/* ==============================================
   选项卡样式设置
   ============================================== */
/* 选项卡容器样式 */
#authTabs {
    padding: 0; /* 移除两端间隙 */
}

/* 选项卡按钮文字样式 */
#authTabs .nav-link {
    font-size: 22px; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    color: #e0e0e0 !important; /* 默认文字颜色 */
    letter-spacing: 5px; /* 字间距 */
    text-transform: none; /* 取消自动大写转换 */
}


/* ==============================================
   模态框关闭按钮样式
   ============================================== */
.modal-header .btn-close {
    background-color: rgba(255,255,255,0.8); /* 半透明白色背景 */
    padding: 8px; /* 按钮内边距 */
    border-radius: 50%; /* 圆形按钮 */
    right: 18px;  /* 从原来的10px调整为18px，向左移动 */
    top: 18px; /* 顶部位置调整 */
    opacity: 1; /* 不透明 */
    transition: all 0.2s; /* 过渡动画 */
    position: absolute; /* 绝对定位 */
}

/* 关闭按钮关闭按钮悬停效果 */
.modal-header .btn-close:hover {
    background-color: white; /* 纯白背景 */
    transform: scale(1.1); /* 轻微放大 */
}


/* ==============================================
   密码显示切换按钮样式
   ============================================== */
.toggle-password {
    border: 1px solid #3d566e; /* 与输入框相同边框 */
    border-left: none; /* 去除左侧双边框 */
    background-color: #3d566e; /* 按钮背景色 */
    color: #bdc3c7; /* 按钮文字颜色 */
    transition: all 0.2s; /* 过渡动画 */
}

/* 密码按钮悬停效果 */
.toggle-password:hover {
    background-color: #4a6b8a; /* 深色背景 */
    color: white; /* 白色文字 */
}


/* ==============================================
   自定义复选框样式
   ============================================== */
/* 复选框容器 */
.form-check {
  position: relative; /* 相对定位，用于内部元素定位 */
  padding-left: 30px; /* 左侧留出空间放置复选框 */
  min-height: 24px; /* 最小高度 */
}

/* 隐藏原生复选框 */
.form-check-input {
  position: absolute; /* 绝对定位 */
  opacity: 0; /* 完全透明 */
  width: 0; /* 零尺寸 */
  height: 0; /* 零尺寸 */
}

/* 自定义复选复选框外观 */
.form-check-input + .form-check-label::before {
  content: ""; /* 空内容，用于创建视觉元素 */
  position: absolute; /* 绝对定位 */
  left: 0; /* 左对齐 */
  top: 2px; /* 顶部位置 */
  width: 18px; /* 宽度 */
  height: 18px; /* 高度 */
  border: 2px solid #3498db; /* 边框 */
  background-color: #2c3e50; /* 背景色 */
  border-radius: 3px; /* 圆角 */
  transition: all 0.2s; /* 过渡动画 */
}

/* 复选复选框选中状态 */
.form-check-input:checked + .form-check-label::before {
  background-color: #3498db; /* 选中状态背景色 */
  border-color: #3498db; /* 选中状态边框色 */
}

/* 复选框选中图标 */
.form-check-input:checked + .form-check-label::after {
  content: "✓"; /* 勾选符号 */
  position: absolute; /* 绝对定位 */
  left: 4px; /* 左位置 */
  top: 0; /* 顶部位置 */
  color: white; /* 白色符号 */
  font-size: 14px; /* 符号大小 */
}


/* ==============================================
   图形验证码样式
   ============================================== */
/* 验证码容器统一高度 */
.verification-code-container {
  display: flex;
  align-items: stretch; /* 确保子元素高度一致 */
}

/* 输入框样式 */
.verification-input {
  height: 38px; /* 标准高度 */
  line-height: 38px;
}

/* 验证码图片样式 */
.verification-image {
  height: 38px !important; /* 强制高度一致 */
  width: auto;
  object-fit: cover; /* 保持图片比例 */
  padding: 0;
  margin: 0;
}