/**
 * 流沙聚工作室官网 - 忘记密码页面样式
 *
 * @fileoverview 忘记密码页面样式文件
 * @author      流沙聚开发团队
 * @company     流沙聚工作室
 * @version     1.0.0
 * @since       2025-01-24
 * @copyright   Copyright (c) 2025 流沙聚工作室. All rights reserved.
 * @license     商业软件，保留所有权利
 * @contact     https://www.icks018.cn
 *
 * 本软件为商业软件，严禁复制、传播、反编译或用于其他任何用途
 * 仅授权合法用户在许可范围内使用
 */

/* ========================================
   邮箱验证码容器
   ======================================== */

/* 邮箱验证码容器 - 输入框和按钮并排 */
.email-code-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.email-code-wrapper .form-control {
  flex: 1;
}

/* 发送验证码按钮 */
.btn-send-code {
  height: 48px;
  min-width: 120px;
  padding: 0 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-send-code:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-send-code:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text-light);
}

/* ========================================
   消息提示样式（黑白极简风格）
   ======================================== */

.auth-message {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation-duration: 0.5s;
}

.auth-message i {
  font-size: 16px;
  flex-shrink: 0;
}

/* 成功提示 - 黑色边框 */
.alert-success.auth-message {
  background-color: #f8f8f8;
  border-color: #000000;
  color: #1a1a1a;
}

.alert-success.auth-message i {
  color: #000000;
}

/* 错误提示 - 深灰边框 */
.alert-danger.auth-message {
  background-color: #f8f8f8;
  border-color: #666666;
  color: #1a1a1a;
}

.alert-danger.auth-message i {
  color: #666666;
}

/* 信息提示 - 浅灰边框 */
.alert-info.auth-message {
  background-color: #ffffff;
  border-color: #e5e5e5;
  color: #666666;
}

.alert-info.auth-message i {
  color: #666666;
}

/* 警告提示 - 中灰边框 */
.alert-warning.auth-message {
  background-color: #f8f8f8;
  border-color: #999999;
  color: #1a1a1a;
}

.alert-warning.auth-message i {
  color: #999999;
}

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

@media (max-width: 576px) {
  .email-code-wrapper {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-send-code {
    width: 100%;
  }
}