/*
 * @File: register.css
 * @Description: 注册页面专用样式文件，实现了表单的居中布局、美化及响应式适配。
 * @Author: Your Name
 * @Date: 2023-10-27
 */

/* --- 全局变量：补全缺失变量，统一毛玻璃/文字样式 --- */
:root {
  /* 毛玻璃核心参数 */
  --glass-blur: 12px;
  --glass-bg-opacity: 0.2;
  --glass-border-opacity: 0.3;
  /* 文本颜色（补全缺失变量，避免样式失效） */
  --text-dark: #212529;
  --text-medium: #495057;
  --text-light: #6c757d;
  /* 通用过渡 */
  --transition: all 0.2s ease-in-out;
}

/* --- 1. 页面布局与容器样式 --- */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 130px); /* 减去导航栏/页脚高度 */
  padding: 2rem 1rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2rem;
  text-align: center;
}

/* 注册容器：简洁毛玻璃质感，弱化阴影更清爽 */
.register-container {
  width: 100%;
  background-color: rgba(255, 255, 255, var(--glass-bg-opacity));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur)); /* 兼容webkit */
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 更柔和的阴影 */
  border-radius: 30px;
  padding: 40px 60px; /* 减少内边距，更紧凑 */
  transition: var(--transition);
}

/* --- 2. 表单基础样式（简洁统一） --- */
.form-group {
  margin-bottom: 1.2rem; /* 减少间距，更紧凑 */
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem; /* 减少标签间距 */
  font-weight: 500;
  color: var(--text-medium);
  font-size: 0.95rem; /* 微调字号更精致 */
}

/* 输入框：简洁浅白毛玻璃，无多余样式 */
.form-group input[type="email"],
.form-group input[type="text"],
.form-group input[type="password"] {
  width: 100%;
  padding: 0.8rem 1rem; /* 稍增内边距，手感更好 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem; /* 完整圆角，简洁大方 */
  font-size: 1rem;
  color: var(--text-dark);
  transition: var(--transition);
  box-sizing: border-box; /* 避免宽度溢出 */
}

/* 输入框聚焦：仅轻微高亮，不突兀 */
.form-group input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.1);
}

/* --- 3. 核心调整：验证码按钮单独成行，与邮箱输入框分离 --- */
/* 移除原flex布局，恢复普通块级布局 */
.input-group {
  width: 100%;
}

/* 邮箱输入框：单独一行，完整样式 */
.input-group input[type="email"] {
  width: 100%;
  margin-bottom: 0.8rem; /* 与按钮保持合理间距 */
  border-radius: 0.5rem; /* 完整圆角 */
  border-right: 1px solid rgba(255, 255, 255, 0.6); /* 恢复完整边框 */
}

/* 发送验证码按钮：单独一行，左对齐，简洁毛玻璃 */
#captcha-btn {
  width: auto; /* 自适应宽度，不固定120px */
  padding: 0.7rem 1.5rem; /* 更舒适的内边距 */
  font-size: 0.95rem;
  /* 纯毛玻璃样式，无蓝色，简洁干净 */
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.5rem; /* 完整圆角 */
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#captcha-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* --- 4. 其他元素优化（保持简洁） --- */
/* 错误提示：浅白毛玻璃，柔和不刺眼 */
.alert-danger {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--text-medium);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

.alert-danger p {
  margin-bottom: 0;
}

/* 注册按钮：简洁毛玻璃，无蓝色 */
#register-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-top: 0.5rem;
}

#register-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

/* 底部链接：简洁浅灰，无蓝色 */
.form-links {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.form-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition);
}

.form-links a:hover {
  color: var(--text-dark);
  text-decoration: underline;
}

/* --- 5. 响应式优化（适配所有屏幕） --- */
@media (min-width: 768px) {
  .register-container {
    max-width: 480px; /* 稍窄一点，更精致 */
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .register-container {
    padding: 2rem 1.5rem;
  }
  .page-title {
    font-size: 1.75rem;
  }
  /* 小屏按钮自适应 */
  #captcha-btn {
    width: 100%; /* 小屏按钮占满宽度 */
    padding: 0.75rem 1rem;
  }
  #register-btn {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }
}