// 登录页面根据Figma设计稿重新设计
.login_page {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

}

// 背景图片和渐变覆盖层
.background_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;



  .bg_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .bg_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 48%,
        rgba(0, 0, 0, 0.96) 86%,
        rgba(0, 0, 0, 1) 100%);
  }
}

// 状态栏样式
.status_bar {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  z-index: 10;

  .time {
    color: #FFFFFF;
    font-family: 'SF Pro';
    font-weight: 590;
    font-size: 17px;
    line-height: 22px;
  }

  .status_icons {
    display: flex;
    align-items: center;
    gap: 7px;

    .signal_icon,
    .wifi_icon,
    .battery_icon {
      width: 20px;
      height: 12px;
      background: #FFFFFF;
      border-radius: 2px;
      opacity: 0.8;
    }

    .signal_icon {
      width: 19px;
      height: 12px;
    }

    .wifi_icon {
      width: 17px;
      height: 12px;
    }

    .battery_icon {
      width: 27px;
      height: 13px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: #FFFFFF;
      border-radius: 4px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        right: -3px;
        top: 4px;
        width: 1px;
        height: 4px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 0 1px 1px 0;
      }
    }
  }
}

// 主要内容区域
.main_content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 20px;
}

// 品牌区域
.brand_section {
  margin-top: 237px;

  .logo_container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 44px;
    height: 58px;
    width: 252px;
    background: url('../../../static/login/yc.svg') no-repeat left top;
    background-size: contain;

  }

  .slogan_container {
    margin-bottom: 51px;
    background: url('../../../static/login/bro.svg') no-repeat left top;
    background-size: inherit;
    width: 363px;
    height: 114px;

  }
}

// 登录区域
.login_section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 64px;

  .login_button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 52px;
    border-radius: 16px;
    border: none;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    font-family: 'PingFang SC';
    transition: all 0.3s ease;

    &::after {
      border: none;
    }

    .button_text {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
    }

    // 微信登录按钮
    &.wechat_button {
     
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0px 8px 64px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(32px);
      margin-bottom: 0px;

      .button_text {
        color: #000000;
      }

      .wechat_icon {
        position: absolute;
        left: 16px;
        width: 28px;
        height: 28px;

        .wechat_logo {
          width: 100%;
          height: 100%;
        }
      }

      &.loading {
        opacity: 0.7;
      }
    }

    // 手机号登录按钮
    &.phone_button {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0px 8px 64px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(32px);
      margin-top: 0px;

      .button_text {
        color: #FFFFFF;
      }

      .phone_icon {
        position: absolute;
        left: 16px;
        width: 24px;
        height: 24px;

        .phone_logo {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 0;
            border-top: 2px solid #FFFFFF;
          }

          &::after {
            content: '';
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 0;
            border-bottom: 2px solid #FFFFFF;
          }
        }
      }
    }
  }

  // 用户协议区域
  .terms_section {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 8px;

    .checkbox_container {
      flex-shrink: 0;
      padding-top: 2px;

      .checkbox {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 1000px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &.checked {
          background: #07C160;
          border-color: #07C160;

          .checkmark {
            width: 6px;
            height: 6px;
            background: #FFFFFF;
            border-radius: 50%;
          }
        }
      }
    }

    .terms_text_container {
      flex: 1;
      line-height: 20px;

      .terms_text {
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 20px;
      }

      .terms_link {
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 20px;
        text-decoration: underline;
        margin-right: 4px;
      }
    }
  }
}

// 底部指示器
.home_indicator {
  position: absolute;
  bottom: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  background: #FFFFFF;
  border-radius: 2.5px;
  z-index: 10;
}

// 底部条款浮层
.terms_float_layer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px 34px;
  z-index: 101;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;

  // 浮层标题
  .float_title {
    text-align: center;
    margin-bottom: 20px;

    .title_text {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 18px;
      color: #000000;
      line-height: 1.4;
    }
  }

  // 条款列表
  .terms_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;

    .terms_item {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 16px;
      color: #07C160;
      text-decoration: underline;
      cursor: pointer;
      transition: all 0.3s ease;

      &:active {
        opacity: 0.7;
      }
    }
  }

  // 同意按钮
  .agree_button {
    width: 100%;
    height: 52px;
    background: #000000;
    border: none;
    border-radius: 16px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    font-family: 'PingFang SC';
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;

    &::after {
      border: none;
    }

    &.agreed {
      background: #07C160;
    }

    &:active {
      opacity: 0.8;
    }
  }

  // 底部指示器
  .home_indicator {
    position: relative;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 5px;
    background: #000000;
    border-radius: 2.5px;
    z-index: 10;
  }
}

// 浮层遮罩
.terms_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

// 用户协议复选框区域
.terms_checkbox_section {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 16px;

  .checkbox_container {
    flex-shrink: 0;
    padding-top: 2px;

    .checkbox {
      width: 20px;
      height: 20px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 1000px;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;

      &.checked {
        background: #07C160;
        border-color: #07C160;

        .checkmark {
          width: 6px;
          height: 6px;
          background: #FFFFFF;
          border-radius: 50%;
        }
      }
    }
  }

  .terms_text_container {
    flex: 1;
    line-height: 20px;

    .terms_text {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      line-height: 20px;
    }

    .terms_link {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 20px;
      text-decoration: underline;
      margin-left: 4px;
      cursor: pointer;
    }
  }
}