/* 
 * ========================================
 * 登录页面统一样式文件
 * ========================================
 * 整合了 login-page.css 和 login.css 的所有功能
 * 包含：表单样式、导航栏样式、名言样式、滚动条设置等
 */

/* CSS变量定义 */
:root {
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
}

/* 
 * ========================================
 * 登录页面专用导航栏和名言样式设置
 * ========================================
 * 独立于首页和注册页面样式，专门为登录页面定制
 * 复制自注册页面的导航栏和标题设置
 */

/* 
 * 登录页面导航栏中部名言样式设置
 * ========================================
 * 名言内容："宁缺毋滥定会得偿所愿，饥不择食必会悔不当初"
 * 
 * 适用页面：
 * - 登录页面 (pages/login.html)
 * 
 * HTML结构：
 * <div class="nav-quote">
 *   <a class="nav-quote-link" href="...">
 *     <span class="quote-line1">
 *       <span class="quote-pre">宁缺毋滥定会</span>
 *       <span class="quote-anchor">得偿所愿</span>
 *     </span>
 *     <span class="quote-line2">饥不择食必会悔不当初</span>
 *   </a>
 * </div>
 * 
 * 功能特性：
 * - 点击可跳转到百度百科查看名言解释
 * - 悬停时文字变为橙色
 * - 移动端自动隐藏
 * - 字体大小：14px（与首页和注册页面保持一致）
 */

/* 
 * 登录页面名言容器主要样式
 * ========================================
 */
.nav-quote { 
  color: #666;           /* 名言文字颜色：中等灰色，保持低调优雅 */
  font-size: 14px;       /* 名言字体大小：14像素，与首页和注册页面保持一致 */
  margin: 0 12px;        /* 名言左右边距：12像素，与导航其他元素保持适当间距 */
  line-height: 1.2;      /* 名言行高：1.2倍，确保两行文字间距适中 */
}

/* 
 * 登录页面名言行布局设置
 * ========================================
 * 将名言分为两行显示：
 * 第一行："宁缺毋滥定会得偿所愿"
 * 第二行："饥不择食必会悔不当初"
 */
.nav-quote .quote-line1, 
.nav-quote .quote-line2 { 
  display: block;        /* 每行独占一行显示，形成上下布局 */
}

/* 
 * 登录页面名言第二行缩进设置
 * ========================================
 * 可通过CSS变量 --quote-indent 调整第二行的左缩进
 * 当前设置为0px，即不缩进，与第一行左对齐
 */
.nav-quote .quote-line2 { 
  margin-left: var(--quote-indent, 85px);  /* 第二行左缩进，默认0px */
}

/* 
 * 登录页面名言链接基础样式
 * ========================================
 * 整个名言区域是一个可点击的链接
 * 点击后跳转到百度百科查看名言解释
 */
.nav-quote a.nav-quote-link { 
  color: inherit;        /* 继承父元素颜色（#666灰色） */
  text-decoration: none; /* 去除链接默认的下划线 */
}

/* 
 * 登录页面名言链接悬停交互效果
 * ========================================
 * 鼠标悬停时改变颜色，提供视觉反馈
 * 橙色与网站主题色保持一致
 */
.nav-quote a.nav-quote-link:hover { 
  color: #ff7a45;        /* 悬停时变为橙色，与网站主色调一致 */
}

/* 
 * 登录页面移动端响应式设计
 * ========================================
 * 在小屏幕设备上隐藏名言，节省导航栏空间
 * 断点：768px（平板及以下设备）
 */
@media (max-width: 768px) { 
  .nav-quote { 
    display: none;       /* 在768px以下屏幕完全隐藏名言 */
  } 
}

/* 
 * ========================================
 * 登录页面滚动条隐藏设置
 * ========================================
 * 完全隐藏登录页面的滚动条，保持页面简洁
 */

/* 隐藏整个页面的滚动条 */
body {
  overflow: hidden !important; /* 完全隐藏滚动条 */
}

/* 如果需要滚动功能但隐藏滚动条样式（备用方案） */
/*
body {
  overflow-y: auto;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

body::-webkit-scrollbar {
  display: none; 
}
*/

/* 
 * ========================================
 * 登录页面表单和布局样式
 * ========================================
 * 原 login-page.css 的内容：基础与表单样式
 */

/* 页面背景和容器样式 */
.auth-page { 
  background: white; 
  min-height: 100vh; 
  display: flex; 
  align-items: flex-start; 
  justify-content: center; 
  padding: 1rem 2rem 2rem 2rem; 
  padding-top: 1rem; /* 减少顶部间距 */
}

/* 登录页面容器样式 */
.auth-container {
  max-width: 500px !important; /* 稍微减小宽度，保持适中 */
  box-shadow: 0 8px 32px rgba(45, 62, 95, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background: white;
  padding: 2rem 2.5rem;
  width: 100%;
  margin-top: -1rem; /* 增加负值让登录框更靠近导航栏 */
}

.auth-container:hover {
  box-shadow: 0 12px 40px rgba(45, 62, 95, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 登录页面输入框通用样式 */
.form-input { 
  width: 100%; 
  padding: 0.5rem !important;
  border: 2px solid #e5e7eb; 
  border-radius: 0.5rem; 
  font-size: 1rem; 
  transition: all 0.3s ease; 
  background: white; 
  color: #374151; 
}

/* 输入框获得焦点时的淡橙色边框样式 */
.form-input:focus { 
  outline: none; 
  border-color: #ffa07a !important;
  box-shadow: 0 0 0 2px rgba(255, 160, 122, 0.2) !important;
  transition: all 0.3s ease;
}

/* 页面加载时确保没有输入框被选中 */
.form-input:not(:focus) {
  border-color: #e5e7eb;
  box-shadow: none;
}

/* 密码输入框容器与切换按钮 */
.password-group { 
  position: relative; 
  display: flex; 
  align-items: center; 
}

.password-group .form-input { 
  padding-right: 5rem; 
  padding-top: 0.5rem; 
  padding-bottom: 0.5rem; 
}

.form-input:invalid, .form-input:required:invalid { 
  border-color: #d1d5db !important; 
  box-shadow: none !important; 
  outline: none !important; 
}

.form-input:focus:invalid { 
  border-color: #ffa07a !important; 
  box-shadow: 0 0 0 2px rgba(255, 160, 122, 0.2) !important; 
}

.password-toggle { 
  position: absolute; 
  right: 1.5rem; 
  top: 50%; 
  transform: translateY(-50%); 
  background: none; 
  border: none; 
  cursor: pointer; 
  font-size: 1.2rem; 
  color: #6b7280; 
  transition: color 0.3s ease; 
  padding: 0.25rem; 
  border-radius: 0.25rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 2rem; 
  height: 2rem; 
  z-index: 10; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.password-group.has-content .password-toggle { 
  opacity: 1; 
  visibility: visible; 
}

.password-toggle:hover { 
  color: #FF4500; 
  background: rgba(255, 69, 0, 0.1); 
}

.password-toggle:focus { 
  outline: 2px solid #FF4500; 
  outline-offset: 2px; 
}

/* 表单选项与复选框 */
.form-options { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 1.5rem; 
}

/* 自定义复选框 */
.custom-checkbox { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.75rem; 
  cursor: pointer; 
  font-size: 0.75rem; 
  line-height: 1.4; 
}

.custom-checkbox > span:last-child { 
  margin-top: 1px; 
  transition: color 0.3s ease; 
}

.custom-checkbox input[type="checkbox"] { 
  display: none; 
}

.checkbox-mark { 
  width: 18px; 
  height: 18px; 
  border: 2px solid #d1d5db; 
  border-radius: 3px; 
  background: white; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  margin-top: 0px; 
  transition: all 0.3s ease; 
  position: relative; 
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark { 
  background: #FF4500; 
  border-color: #FF4500; 
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after { 
  content: '✓'; 
  position: absolute; 
  top: -2px; 
  left: 2px; 
  color: white; 
  font-size: 12px; 
  font-weight: bold; 
}

.custom-checkbox:hover .checkbox-mark { 
  border-color: #FF4500; 
}

/* 复选框选中时文字颜色变化 */
.custom-checkbox input[type="checkbox"]:checked ~ span:last-child { 
  color: #ffa07a !important; /* 淡橙色，选中时文字变色 */
}

/* 忘记密码链接 */
.forgot-link { 
  color: #333333; 
  text-decoration: none; 
  font-size: 0.9rem; 
  font-weight: normal; 
  transition: color 0.3s ease; 
}

.forgot-link:hover { 
  color: #FF4500; 
  text-decoration: none; 
}

/* 登录按钮样式 */
.auth-submit { 
  width: 60%; 
  max-width: 320px; 
  min-width: 180px; 
  margin: 0 auto; 
  display: inline-flex; 
  justify-content: center; 
  padding: 0.875rem 1.5rem; 
  background: #FF8C69; 
  border: none; 
  border-radius: 4px; 
  color: white; 
  font-size: 1rem; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  position: relative; 
  overflow: hidden; 
  margin-bottom: var(--spacing-4); 
}

.auth-submit:hover { 
  background: #FF4500; 
  box-shadow: 0 6px 20px rgba(255, 69, 0, 0.4); 
}

.auth-submit:active { 
  animation: none; 
}

@keyframes buttonBounce { 
  0%,100%{ transform: translateY(-2px) scale(1);} 
  25%{ transform: translateY(-4px) scale(1.02);} 
  50%{ transform: translateY(-2px) scale(1.01);} 
  75%{ transform: translateY(-3px) scale(1.01);} 
}

@keyframes flowOrange { 
  0% { background-position: 0% 50%; } 
  50% { background-position: 100% 50%; } 
  100% { background-position: 0% 50%; } 
}

@media (prefers-reduced-motion: reduce) { 
  .auth-submit, .btn-primary { 
    animation: none; 
    background: #FF8C69; 
  } 
}

.button-text { 
  display: inline-block; 
  transition: opacity 0.3s ease; 
}

.button-loader { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  opacity: 0; 
  transition: opacity 0.3s ease; 
}

.auth-submit.loading .button-text { 
  opacity: 0; 
}

.auth-submit.loading .button-loader { 
  opacity: 1; 
}

.loader-spinner { 
  width: 20px; 
  height: 20px; 
  border: 2px solid rgba(255, 255, 255, 0.3); 
  border-top: 2px solid white; 
  border-radius: 50%; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

/* 立即注册链接 */
.auth-link { 
  color: #333333; 
  text-decoration: none; 
  font-weight: normal; 
  transition: all 0.3s ease; 
}

.auth-link:hover { 
  font-weight: bold; 
  color: #FF4500; 
}

/* 第三方登录按钮 */
.social-login { 
  display: flex !important; 
  flex-direction: row !important; 
  flex-wrap: nowrap; 
  align-items: center; 
  justify-content: center; 
  gap: 1rem; 
  margin: var(--spacing-6) 0; 
  width: 100%; 
}

.social-login .social-btn { 
  flex: 0 0 auto; 
}

.social-btn { 
  width: 60px; 
  height: 60px; 
  border-radius: 4px; 
  border: 2px solid #d1d5db; 
  background: white; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
  padding: 0; 
}

.social-icon { 
  width: 40px; 
  height: 40px; 
  border-radius: 4px; 
  transition: transform 0.3s ease; 
}

.wechat-btn:hover { 
  border-color: #07C160; 
  background: #f0f9f5; 
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.2); 
}

.wechat-btn:hover .social-icon { 
  transform: scale(1.1); 
}

.qq-btn:hover { 
  border-color: #1296DB; 
  background: #f0f8ff; 
  box-shadow: 0 4px 12px rgba(18, 150, 219, 0.2); 
}

.qq-btn:hover .social-icon { 
  transform: scale(1.1); 
}

.social-btn:active { 
  transform: scale(0.95); 
}

/* 登录页面表单样式 */
.auth-form {
  gap: var(--spacing-5) !important;
}

/* 登录页面标题样式优化 */
.auth-header {
  margin-bottom: var(--spacing-2) !important;
}

.auth-title {
  margin-bottom: 0 !important;
  color: #2D3E5F !important; /* 更淡的藏青黑色 */
  text-align: center !important; /* 标题居中 */
}

/* 登录页面表单组定位 */
.form-group {
  position: relative !important; /* 为绝对定位的错误提示提供定位上下文 */
}

/* 登录页面页脚链接位置调整 */
.auth-footer {
  margin-top: var(--spacing-3) !important; /* 进一步减小上方间距 */
  padding-top: var(--spacing-2) !important; /* 减小内部上边距 */
}

/* 浏览器默认验证提示处理 */
input:invalid { 
  box-shadow: none; 
}

input::-webkit-validation-bubble, 
input::-webkit-validation-bubble-message, 
input::-webkit-validation-bubble-arrow { 
  display: none; 
}

input:required:invalid { 
  box-shadow: none; 
}

input:required:valid { 
  box-shadow: none; 
}

/* 错误提示样式 */
.field-error { 
  display: block; 
  margin-top: 0.5rem; 
  font-size: 0.875rem; 
  color: #ff6b6b; 
  line-height: 1.4; 
  word-wrap: break-word; 
  white-space: normal; 
}

/* 邮箱字段专用错误提示样式 */
.email-field-error {
  display: block !important;
  margin: 2px 0 -19px 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: #ff6b6b !important;
  line-height: 1.4 !important;
  text-align: left !important;
  word-wrap: break-word;
  white-space: normal;
}

/* 密码字段专用错误提示样式 */
.password-field-error {
  position: absolute !important;
  bottom: -18px !important;
  left: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: #ff6b6b !important;
  line-height: 1.4 !important;
  text-align: left !important;
  word-wrap: break-word;
  white-space: normal;
  width: 100% !important;
}

/* 
 * ========================================
 * 响应式设计
 * ========================================
 */

/* 二维码图标样式 */
.qr-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  z-index: 10;
}

.qr-icon:hover {
  color: #ffa07a;
  transform: scale(1.1);
}

.qr-icon svg {
  width: 20px;
  height: 20px;
}

/* 微信扫码登录浮窗样式 */
.qr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.qr-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.qr-modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s ease;
}

.qr-modal-overlay.show .qr-modal-content {
  transform: scale(1) translateY(0);
}

.qr-modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #07C160 0%, #00A854 100%);
  color: white;
}

.qr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.qr-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.qr-modal-body {
  padding: 30px 20px;
  text-align: center;
}

.qr-code-container {
  display: flex;
    flex-direction: column; 
  align-items: center;
  gap: 20px;
}

.qr-code-placeholder {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-instructions p {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.qr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #07C160;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.qr-modal-footer {
  padding: 15px 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.qr-note {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .auth-nav { 
    position: relative; 
    background: transparent; 
    backdrop-filter: none; 
    -webkit-backdrop-filter: none; 
  } 
  
  .social-btn { 
    width: 50px; 
    height: 50px; 
  } 
  
  .social-btn-icon { 
    font-size: 1.5rem; 
  } 
  
  .social-login { 
    gap: var(--spacing-3); 
  }
  
  .qr-modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .qr-modal-body {
    padding: 20px 15px;
  }
  
  .qr-code-placeholder svg {
    width: 160px;
    height: 160px;
  }
}