/*
* 山西永盛云saas管理系统 - 忘记密码页面样式
* 本文件编写程序员：刘永盛
* 开发时间：2026-03-22 10:05:00
* 提供忘记密码页面的专用样式，包括步骤指示器、表单布局和响应式设计
* @version 2.0
*/

/* CSS 变量定义 */
:root {
  --primary-color: #007bff; /* 主要颜色 - 蓝色 */
  --success-color: #198754; /* 成功颜色 - 绿色 */
  --danger-color: #dc3545; /* 危险颜色 - 红色 */
  --light-bg: #f8f9fa; /* 浅色背景 */
  --card-radius: 15px; /* 卡片圆角大小 */
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 卡片阴影 */
  --card-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.3); /* 卡片悬停阴影 */
  --nav-height: 76px; /* 导航栏高度 */
  --nav-height-mobile: 60px; /* 移动端导航栏高度 */
  --padding-base: 1rem; /* 基础内边距 */
  --padding-lg: 1.5rem; /* 大内边距 */
  --padding-xl: 2rem; /* 超大内边距 */
  --padding-sm: 0.625rem; /* 小内边距 */
  --transition-speed: 0.3s; /* 过渡动画速度 */
}

/* 忘记密码页面主体样式 */
.forgot-password-body {
  min-height: 100vh; /* 最小高度为视口高度 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列 */
  margin: 0; /* 重置默认外边距 */
  padding: 0; /* 重置默认内边距 */
}

/* 忘记密码容器样式 - 应用背景效果 */
.forgot-password-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height));
  padding: var(--padding-sm) 0;
  /* 135度角的线性渐变背景，从淡灰色过渡到浅蓝色 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) center/cover fixed;
  position: relative;
  overflow: hidden;
}

/* 装饰元素 - 顶部左侧 */
.forgot-password-container::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 50%;
  z-index: 0;
  animation: float 6s ease-in-out infinite;
}

/* 装饰元素 - 底部右侧 */
.forgot-password-container::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: rgba(0, 123, 255, 0.1);
  border-radius: 50%;
  z-index: 0;
  animation: float 8s ease-in-out infinite reverse;
}

/* 确保卡片内容位于装饰元素之上 */
.forgot-password-card {
  position: relative;
  z-index: 1;
}

/* 浮动动画 */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* 忘记密码卡片样式 */
.forgot-password-card {
    max-width: 500px;
    width: 100%;
    margin: 0 20px;
    padding: 30px;
    border: 1px solid #dee2e6;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background: white;
    transition: all var(--transition-speed) ease;
}

/* 忘记密码卡片悬停效果 */
.forgot-password-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

@media (max-width: 576px) {
    .forgot-password-container {
        padding: var(--padding-sm);
    }

    .forgot-password-card {
        margin: 0 10px;
        padding: 20px;
    }
}

/* 媒体查询 - 移动设备 */
@media (max-width: 576px) {
  .forgot-password-container {
    min-height: calc(100vh - var(--nav-height-mobile));
  }
}

 .step-indicator {
     display: flex;
     justify-content: space-between;
     margin-bottom: 30px;
     position: relative;
 }

 .step-indicator::before {
     content: '';
     position: absolute;
     top: 20px;
     left: 0;
     right: 0;
     height: 2px;
     background: #dee2e6;
     z-index: 1;
 }

 .step {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 .step-number {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #dee2e6;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .step.active .step-number {
     background: #007bff;
 }

 .step.completed .step-number {
     background: #28a745;
 }

 .step-label {
     font-size: 12px;
     color: #6c757d;
 }

 .step.active .step-label {
     color: #007bff;
     font-weight: bold;
 }

 

 .back-link {
     color: #6c757d;
     text-decoration: none;
 }

 .back-link:hover {
    color: #007bff;
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

.button-container .btn {
    flex: 1;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 14px;
}

/* 表单输入框高度设置 */
.form-control {
    height: 35px;
    font-size: 14px;
    padding: 0 12px;
}