/* register.css - 注册页特有样式（在 login.css 基础上补充差异） */
/* Flat Remix 明亮扁平化风格 */

/* ========================================
   🚀 GPU 硬件加速优化 - 注册页特定元素
   ======================================== */
.register-form,
.register-form .verify-slide,
.register-form .code-box,
.register-form .password-rules,
#sendEmailCode {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* iOS26 滑动解锁验证码样式继承 - login.css 已定义完整样式 */
/* 这里只需要确保注册页面特有的间距调整 */
.register-form .verify-slide {
  margin-bottom: 0; /* 在注册表单中调整间距 */
}

.register-form .code-box {
  margin-top: 16px; /* 注册页面的验证码输入框间距 */
}

/* iOS26 密码强度引导区样式继承自 login.css */
/* 注册页面特有的微调 */
.register-form .password-rules {
  margin-top: 10px;
  margin-bottom: 12px;
}

/* 倒计时按钮 - 明亮风格 */
#sendEmailCode { 
  position: relative;
  background: #f8f9fc;
  color: #4e73df;
  border: 2px solid #e3e6f0;
  border-left: none;
  border-radius: 0 8px 8px 0;
  font-weight: 500;
  transition: all 0.15s ease;
}
#sendEmailCode:hover:not(:disabled) {
  background: #eaecf4;
  border-color: #d1d3e2;
  color: #2e59d9;
}
#sendEmailCode:disabled {
  background: #e3e6f0;
  color: #858796;
  cursor: not-allowed;
  opacity: 0.8;
}
#sendEmailCode .countdown { 
  font-weight: 500; 
  color: #858796;
}

/* 邮箱输入框与验证码按钮组合 */
.auth-card .input-group .form-control:has(+ #sendEmailCode) {
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.auth-card .input-group .form-control:has(+ #sendEmailCode):focus {
  border-right: none;
}

/* 链接颜色覆盖 - 明亮背景下使用主色 */
.auth-card .link-light {
  color: #4e73df !important;
}
.auth-card .link-light:hover {
  color: #2e59d9 !important;
}

/* 服务条款复选框标签文字颜色 */
.auth-card .form-check-label {
  color: #5a5c69;
}

/* 小屏兼容 - 保持横向排列，允许自动换行 */
@media (max-width: 480px){
  .auth-card .pw-rules { 
    font-size: 11px;
  }
  .auth-card .pw-rules-title {
    font-size: 11px;
  }
  .auth-card .pw-rules-list { 
    gap: 4px;
  }
  .auth-card .pw-rules-list .rule {
    padding: 2px 8px;
    font-size: 10px;
  }
}

/* ================================================
   🎯 移动端分步注册样式
   ================================================ */
@media (max-width: 991.98px) {
  /* 移动端分步显示 */
  .mobile-next-btn { display: block; }
  .mobile-only { display: flex; }
  
  /* 分步动画效果 */
  .register-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  #register-step-2 { 
    display: none;
    opacity: 0;
    transform: translateX(20px);
  }
  #register-step-2.active { 
    display: block;
    opacity: 1;
    transform: translateX(0);
  }
  
  #register-step-1.hidden { 
    display: none;
    opacity: 0;
    transform: translateX(-20px);
  }
  
  /* 返回按钮样式 */
  .btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #4e73df;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-back:hover {
    color: #2e59d9;
    transform: translateX(-2px);
  }
  .btn-back svg {
    transition: transform 0.2s ease;
  }
  .btn-back:hover svg {
    transform: translateX(-2px);
  }
}

/* 桌面端隐藏分步相关元素 */
@media (min-width: 992px) {
  .mobile-next-btn { display: none !important; }
  .mobile-only { display: none !important; }
  #register-step-1, #register-step-2 { 
    display: block !important; 
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================
   ✅ 密码提示系统、密码可见性切换等样式已移至 login.css
   这些样式在三个页面间共享，避免重复代码
   ================================================ */