/* 
   DEPOP-EARN LOGIN SCREEN UPGRADE v5.0 - QUIET LUXURY (WARM RICE GOLD)
   Complete Light Theme Transformation
*/

/* :root definitions moved to global.css */

#authScreen {
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* 全局渐变背景：顶部浓郁的奶昔金，平缓过渡到页面底部的轻柔米白 */
  background: linear-gradient(180deg, var(--bg-base, #F8ECD5) 0%, var(--bg-base, #FDF8ED) 30%, var(--bg-base, #fdfaf4) 100%) !important;
  position: relative;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  /* 取消 Flex，恢复纯净的自上而下的文档流 */
}

/* 顶部品牌区 */
.brand-mark {
  position: absolute;
  top: 32px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
}

.brand-dot {
  width: 10px;
  height: 10px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.brand-name {
  color: var(--text-primary);
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 物理过渡区块：支持多主题无缝连接 */
.auth-hero-transition {
  width: 100%;
  height: 20px;
  /* 优化：使用底部的微光（gold-glow）代替突兀的纯实色，完美衔接深色和浅色主题 */
  background: linear-gradient(to bottom, var(--bg-base, #FFF9EF) 0%, var(--gold-glow, rgba(255, 153, 0, 0.25)) 100%);
}

/* 背景与遮罩层 */
.auth-hero,
#authHero {
  position: relative !important;
  width: 100% !important;
  height: clamp(350px, 35vh, 400px) !important;
  /* 恢复您选定好的裁切高度范围 */
  aspect-ratio: auto !important;
  flex-shrink: 0 !important;
  z-index: 1;
  display: block !important;
  margin-top: 0 !important;
  /* 取消 margin-top，改用物理区块占位 */
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.auth-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  /* 稍微往下延伸一点防止出现白边 */
  left: 0;
  width: 100%;
  height: 140px;
  /* 拉长渐变高度，让过渡更丝滑 */
  /* 从透明的Amazon橙色微光 -> 浓郁的Amazon橙色过渡 -> 最终完全融进背景的奶昔金 (#FDF8ED) */
  /* 隐藏多余的遮罩层，避免双层叠加导致底部浑浊 */
  display: none !important;
  z-index: 3;
  pointer-events: none;
}

.auth-hero-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

.auth-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 使用多级平滑过渡（类似指数曲线），让褪色感极其柔和、毫无边界感 */
  background: linear-gradient(to bottom,
      rgba(253, 248, 237, 0) 0%,
      rgba(253, 248, 237, 0) 25%,
      rgba(253, 248, 237, 0.1) 45%,
      rgba(253, 248, 237, 0.3) 65%,
      rgba(253, 248, 237, 0.7) 85%,
      #FDF8ED 100%) !important;
  /* 100% 处变成纯实色的奶昔金，完美无缝衔接文字区 */
}

/* 内容区域 */
.auth-content {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  /* 核心：设为0，绝对不允许文字向上越界遮挡图片 */
  padding: 0px 24px 20px 24px !important;
  text-align: left;

  /* Fade the top of auth-content so it blends seamlessly with the hero image below it */
  background: transparent !important;
  flex-grow: 1;
  display: block !important;
}

.auth-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold-dark, #D4A017) !important; /* 深奶昔金 */
  margin-bottom: 16px; /* 增加呼吸感 */
  display: block;
  text-shadow: none !important; /* 移除阴影提升清晰度 */
}

.login-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 5vw, 32px) !important; /* 适当减小字体，手机阅读更舒适锐利 */
  font-weight: 800;
  line-height: 1.6 !important; /* 增加换行后的两行间距，让呼吸感更足 */
  color: var(--text-primary, #1A1A1A) !important;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  text-shadow: none !important; /* 确保无阴影干扰 */
}

.login-tagline {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-secondary, #4A4A4A) !important; /* 深灰，提升对比度 */
  letter-spacing: 0.02em;
  margin-bottom: 24px !important; /* 增加与下方按钮的垂直间距 */
  line-height: 1.6;
  text-shadow: none !important;
}

/* 底部操作区 */
.auth-footer {
  position: relative;
  z-index: 20;
  padding: 0 24px max(20px, env(safe-area-inset-bottom)) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-full, #signInBtnMain {
  width: 100%;
  min-height: 56px !important; /* 增加按钮高度 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important; /* 更柔和的高级圆角 */
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SIGN IN 主按钮 - 使用 ID 强制覆盖 global.css */
#signInBtnMain {
  background: linear-gradient(to right, var(--gold-primary, #FF9900), var(--gold-primary, #E8B923)) !important; /* Amazon橙到深奶昔金渐变 */
  color: var(--text-white, #ffffff) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(232, 185, 35, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; /* 轻微阴影和高光 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; /* 让文字更清晰 */
}

#signInBtnMain:hover {
  background: linear-gradient(to right, var(--gold-light, #FFAA22), var(--gold-light, #F4C430)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(232, 185, 35, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* Create Account 次按钮 - 高级幽灵按钮 */
.btn-login-outline {
  background: var(--bg-base, #FFF9EF) !important; /* 浅奶昔金背景 */
  color: var(--gold-dark, #D4A017) !important; /* 深奶昔金文字 */
  border: 1px solid var(--border, #D4A017) !important; /* 深金色边框 */
  box-shadow: none !important;
}

.btn-login-outline:hover {
  background: var(--bg-base, #FDF8ED) !important;
  transform: translateY(-1px);
}

/* 底部辅助链接 */
.forgot-pwd {
  display: block;
  text-align: center;
  color: var(--text-secondary, #555555);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 12px;
}

.auth-legal {
  display: block !important;
  width: 100% !important;
  font-size: 11px;
  color: var(--text-secondary, #555555);
  text-align: center !important;
  margin-top: 10px;
  line-height: 1.5;
}

/* 强制居中底部 Copyright 区域 */
.auth-footer .text-center {
  width: 100% !important;
  text-align: center !important;
}

.auth-legal a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.btn:active {
  transform: scale(0.98);
}

/* Override global.css to shrink the background image properly and move it up */
.auth-hero-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  /* 恢复 cover 模式，只展示您选定的那一块核心区域 */
  background-position: center top !important;
  /* 强制对齐最上方，让金环和Logo全部露出来 */
  background-repeat: no-repeat !important;
  transform: none !important;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.auth-hero-img.loaded {
  opacity: 1;
}

/* 15. LEGAL MODAL 閲嶆瀯 - 濂堕昔閲戠粺涓€椋庢牸 */
#legalModal .modal-sheet {
  background: var(--bg-base, #fdfaf4) !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(184, 134, 11, 0.15) !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 420px !important;
  width: 90% !important;
  margin: 0 auto !important;
}

#legalTitle {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--text-primary, #2c1f0e) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

#legalModal .modal-header-premium p {
  color: var(--text-muted, #7a5a30) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--border, #e8d8b8) !important;
  padding-bottom: 12px !important;
}

#legalBody {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  color: var(--text-secondary, #555555) !important;
}

/* Ensure the modal close button is clearly visible */
#legalModal .modal-close {
  color: var(--text-primary, #2c1f0e) !important;
}

/* Option C: Remove FAB from login screen entirely */
body:has(#authScreen:not([style*="display: none"])) .woot-widget-bubble,
body:has(#authScreen:not([style*="display: none"])) .woot-widget-holder,
body:has(#authScreen:not([style*="display: none"])) #bottomNav {
  display: none !important;
}

.version-text {
  font-size: 12px;
  color: var(--text-hint, #AAAAAA);
  text-align: center;
  margin-top: 8px;
}