@use '../variables' as *;

/* 登录弹窗遮罩层 */
.login-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height, 100vh);
  background: rgba(0, 0, 0, 0.45);
  z-index: 2050;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗底座盒子 */
.login-dialog-box {
  font-size: 0.14rem;
  position: relative;
  width: 5.6rem;
  min-height: 4.57rem;
  background: radial-gradient(58.14% 30.59% at 100% 0%, #D2F2F3 0%, #FFFFFF 100%);
  border: 1px solid #F0F0F0;
  border-radius: 0.32rem;
  padding: 0.48rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 关闭按钮 */
.login-dialog-box__close {
  position: absolute;
  top: 0.2rem;
  right: 0.24rem;
  width: 0.32rem;
  height: 0.32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  svg {
    width: 0.2rem;
    height: 0.2rem;
  }
}

/* Logo 行 */
.login-dialog-box__logo-row {
  width: 100%;
  margin-bottom: 0.4rem;

  img {
    width: 1.6rem;
    height: 0.4rem;
  }
}

/* 表单包裹 */
.login-dialog-box__form-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  width: 100%;
}

/* 标题 */
.login-dialog-box__heading {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.login-dialog-box__title {
  font-weight: 700;
  font-size: 0.24rem;
  line-height: 0.22rem;
  color: #18181A;
}

.login-dialog-box__subtitle {
  font-weight: 400;
  font-size: 0.14rem;
  margin-top: 0.08rem;
  margin-bottom: 0.08rem;
  color: #616367;

  > span:nth-child(2) {
    color: $accent;
  }
}

/* 手机号输入行 */
.login-dialog-box__phone-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.56rem;
  background: #FFFFFF;
  border: 1px solid #C8C9CD;
  box-shadow: 0 0.08rem 0.20rem rgba(15, 83, 87, 0.05);
  border-radius: 0.12rem;
}

.login-dialog-box__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.18rem;
  height: 0.18rem;
  margin-left: 0.16rem;
  flex-shrink: 0;

  svg {
    width: 0.18rem;
    height: 0.18rem;
  }
}

.login-dialog-box__country-label {
  margin-left: 0.06rem;
  font-weight: 500;
  font-size: 0.14rem;
  line-height: 0.15rem;
  color: #202124;
  white-space: nowrap;
}

.login-dialog-box__country-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.20rem;
  height: 0.20rem;
  flex-shrink: 0;
  cursor: pointer;

  svg {
    width: 0.20rem;
    height: 0.20rem;
  }
}

.login-dialog-box__input-divider {
  width: 1px;
  height: 0.30rem;
  background: #E7F2F3;
  margin: 0 0.16rem;
  flex-shrink: 0;
}

.login-dialog-box__phone-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 0.14rem;
  line-height: 0.15rem;
  color: #202124;
  outline: none;

  &::placeholder {
    color: #939599;
  }
}

/* 发送验证码按钮 */
.login-dialog-box__send-btn {
  width: 100%;
  height: 0.43rem;
  background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
  box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
  border-radius: 0.12rem;
  border: none;
  font-weight: 600;
  font-size: 0.14rem;
  line-height: 0.15rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    opacity: 0.9;
  }
}

/* OTP 验证码输入 */
.login-dialog-box__otp-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  cursor: text;
}

.login-dialog-box__otp-hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  font-size: 0.16rem;
  caret-color: transparent;
}

.login-dialog-box__otp-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.56rem;
  height: 0.56rem;
  background: #FAFBFC;
  border: 1px solid #E2E8F0;
  border-radius: 0.12rem;
  transition: border-color 0.2s, background 0.2s;
}

.login-dialog-box__otp-box--active {
  background: #F3FFFD;
  border: 1px solid $accent;
}

.login-dialog-box__otp-box--filled {
  background: #F3FFFD;
  border: 2px solid $accent;
}

.login-dialog-box__otp-digit {
  font-weight: 700;
  font-size: 0.24rem;
  line-height: 0.29rem;
  color: #132034;
}

/* 闪烁光标 */
.login-dialog-box__otp-cursor {
  display: inline-block;
  width: 2px;
  height: 0.28rem;
  background: $accent;
  border-radius: 1px;
  animation: login-dialog-otp-blink 1s ease-in-out infinite;
}

@keyframes login-dialog-otp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 验证码状态提示 */
.login-dialog-box__sms-status {
  width: 100%;
  font-size: 0.13rem;
  line-height: 0.16rem;
  color: #64748B;
  text-align: left;
  margin-top: -0.14rem;
  margin-bottom: -0.06rem;
}

.login-dialog-box__sms-status--error {
  color: #EF4444;
}

/* 状态按钮（步骤二） */
.login-dialog-box__status-btn {
  width: 100%;
  height: 0.43rem;
  background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
  border-radius: 0.12rem;
  border: none;
  font-weight: 600;
  font-size: 0.14rem;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  transition: opacity 0.2s;

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    opacity: 0.9;
  }
}

/* 登录中转圈动画 */
.login-dialog-box__spinner {
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: login-dialog-spin 0.7s linear infinite;
}

@keyframes login-dialog-spin {
  to { transform: rotate(360deg); }
}

/* 协议勾选 */
.login-dialog-box__agreement {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}

.login-dialog-box__checkbox {
  box-sizing: border-box;
  width: 0.18rem;
  height: 0.18rem;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 0.04rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.login-dialog-box__checkbox--checked {
  background: #4FC2C9;
  border-color: #4FC2C9;
}

.login-dialog-box__check-icon {
  font-size: 0.11rem;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1;
}

.login-dialog-box__agreement-text {
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #616367;
}

.login-dialog-box__agreement-link {
  font-weight: 500;
  font-size: 0.12rem;
  line-height: 0.15rem;
  color: #42A8B3;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}
