/* ════════════════════════════════════════════════
   Godiva Azure Silk Edition — Mobile-First CSS
   Theme: Deep Sapphire Blue + Royal Gold
════════════════════════════════════════════════ */

:root {
  --blue-deep:    #0b1c3a;
  --blue-mid:     #0d2347;
  --blue-light:   #122d5a;
  --gold:         #c9a84c;
  --gold-light:   #e3c97e;
  --gold-dim:     #8a6c2a;
  --gold-glow:    rgba(201,168,76,0.25);
  --white:        #f5f0e8;
  --white-dim:    rgba(245,240,232,0.65);
  --error-red:    #c0392b;
  --success-green:#27ae60;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Montserrat', sans-serif;
  --radius:       16px;
  --transition:   0.35s cubic-bezier(0.4,0,0.2,1);
  /* Mobile spacing */
  --page-pad:     1.1rem;
  --card-pad:     1.4rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport for mobile */
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--white);
  background: var(--blue-deep);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  padding: var(--page-pad);
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  position: relative;
}

/* ════════════════════════════════════════════════
   DIAGONAL WAVE ANIMATION
════════════════════════════════════════════════ */

.diagonal-wave-container {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200vw;
  height: 200vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transform: rotate(-35deg);
  transform-origin: center center;
}

.wave {
  position: absolute;
  top: 50%;
  left: -50%;
  width: 200%;
  height: auto;
}

.wave.dw1 {
  fill: rgba(201,168,76,0.05);
  animation: diagWaveMove 12s ease-in-out infinite;
}

.wave.dw2 {
  fill: rgba(201,168,76,0.03);
  animation: diagWaveMove 16s ease-in-out infinite reverse;
  top: 52%;
}

.wave.dw3 {
  fill: rgba(18,45,90,0.4);
  animation: diagWaveMove 9s ease-in-out infinite 1s;
  top: 54%;
}

@keyframes diagWaveMove {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(-20%) scaleY(1.2); }
  100% { transform: translateX(0) scaleY(1); }
}

/* ════════════════════════════════════════════════
   FLOATING PARTICLES
════════════════════════════════════════════════ */

.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFloat linear infinite;
  opacity: 0;
}

@keyframes particleFloat {
  0%   { transform: translateY(110vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-10px) scale(1); opacity: 0; }
}

/* Background pattern */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════════════════
   SCREENS
════════════════════════════════════════════════ */

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 1;
  padding-top: 1.5rem;
  animation: fadeSlideUp 0.55s var(--transition) both;
}

.screen.active { display: flex; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════
   BRAND EMBLEM
════════════════════════════════════════════════ */

.brand-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.8rem;
}

.emblem-ring {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--gold);
  border-radius: 50px;
  padding: 5px 18px;
  letter-spacing: 0.18em;
  box-shadow: 0 0 18px var(--gold-glow), inset 0 0 10px rgba(201,168,76,0.08);
}

.emblem-year  { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--gold-light); }
.emblem-dot   { font-size: 0.55rem; color: var(--gold-dim); }
.emblem-brand { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em; color: var(--gold); }
.emblem-sub   { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.3em; color: var(--gold-dim); }

.emblem-tagline {
  margin-top: 7px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold-dim);
  letter-spacing: 0.12em;
}

.brand-emblem.small { margin-bottom: 1rem; }
.brand-emblem.small .emblem-ring { padding: 3px 12px; }
.brand-emblem.small .emblem-year { font-size: 0.8rem; }

/* ══════════════════════════════════════
   PREMIUM ENTRANCE — SILK CURTAIN
   Timeline:
     0.00s  Curtains visible, brand fades in
     0.05s  Sheen sweeps across each panel (1.2s)
     0.70s  Brand starts fading out (0.45s)
     0.85s  Center seam glow fades (0.5s)
     1.00s  Curtains begin opening (1.5s)
     2.50s  Curtains fully offscreen → JS hides overlay
     2.60s+ Content stagger begins
══════════════════════════════════════ */

/* ── Overlay container ── */
.curtain-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: all;
  overflow: hidden;
}

/* ── Gold rod across the top ── */
.curtain-rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  z-index: 10;
  background: linear-gradient(90deg,
    #5c4216 0%,
    #c9a84c 12%,
    #f0e0a0 30%,
    #e3c97e 50%,
    #f0e0a0 70%,
    #c9a84c 88%,
    #5c4216 100%
  );
  box-shadow: 0 2px 18px rgba(201,168,76,0.55), 0 1px 4px rgba(0,0,0,0.9);
  /* Fade out as curtains finish opening */
  animation: curtainRailFade 0.35s ease 2.2s forwards;
}
@keyframes curtainRailFade { to { opacity: 0; } }
/* Finial orbs at each end */
.curtain-rail::before,
.curtain-rail::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f5e8b0, #c9a84c 48%, #7a5e1e);
  box-shadow: 0 0 10px rgba(201,168,76,0.7), inset 0 1px 2px rgba(255,255,255,0.4);
}
.curtain-rail::before { left: 6px; }
.curtain-rail::after  { right: 6px; }

/* ── Curtain panels ── */
.curtain-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 51%; /* slight overlap at seam */
  overflow: hidden;
  will-change: transform;
}

/* Left panel — light source from outside-left, heavy shadow at inside (right) edge */
.curtain-left {
  left: 0;
  background:
    /* Fine silk weave */
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(255,255,255,0.013) 1px,
      transparent 3px,
      rgba(0,0,0,0.025) 5px,
      transparent 7px
    ),
    /* Fold highlights/shadows — bunching increases toward inside edge */
    linear-gradient(90deg,
      rgba(255,255,255,0.13) 0%,
      rgba(0,0,0,0.05)       3%,
      rgba(0,0,0,0.22)       9%,
      rgba(255,255,255,0.09) 15%,
      rgba(0,0,0,0.17)       21%,
      rgba(255,255,255,0.07) 28%,
      rgba(0,0,0,0.20)       35%,
      rgba(255,255,255,0.11) 41%,
      rgba(0,0,0,0.14)       48%,
      rgba(255,255,255,0.06) 55%,
      rgba(0,0,0,0.19)       62%,
      rgba(255,255,255,0.08) 69%,
      rgba(0,0,0,0.16)       75%,
      rgba(255,255,255,0.05) 82%,
      rgba(0,0,0,0.28)       90%,   /* deep shadow at center seam */
      rgba(0,0,0,0.50)       100%
    ),
    /* Base navy-midnight */
    linear-gradient(175deg, #0b2040 0%, #0e2650 45%, #071a30 100%);
  border-right: 1px solid rgba(201,168,76,0.45);
  box-shadow: inset -12px 0 28px rgba(0,0,0,0.55), 6px 0 24px rgba(0,0,0,0.8);
  animation: curtainOpenL 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}

/* Right panel — mirror fold pattern */
.curtain-right {
  right: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(255,255,255,0.013) 1px,
      transparent 3px,
      rgba(0,0,0,0.025) 5px,
      transparent 7px
    ),
    linear-gradient(90deg,
      rgba(0,0,0,0.50)       0%,
      rgba(0,0,0,0.28)       10%,
      rgba(255,255,255,0.05) 18%,
      rgba(0,0,0,0.16)       25%,
      rgba(255,255,255,0.08) 31%,
      rgba(0,0,0,0.19)       38%,
      rgba(255,255,255,0.06) 45%,
      rgba(0,0,0,0.14)       52%,
      rgba(255,255,255,0.11) 59%,
      rgba(0,0,0,0.20)       65%,
      rgba(255,255,255,0.07) 72%,
      rgba(0,0,0,0.17)       79%,
      rgba(255,255,255,0.09) 85%,
      rgba(0,0,0,0.22)       91%,
      rgba(0,0,0,0.05)       97%,
      rgba(255,255,255,0.13) 100%
    ),
    linear-gradient(175deg, #071a30 0%, #0e2650 45%, #0b2040 100%);
  border-left: 1px solid rgba(201,168,76,0.45);
  box-shadow: inset 12px 0 28px rgba(0,0,0,0.55), -6px 0 24px rgba(0,0,0,0.8);
  animation: curtainOpenR 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}

/* Sheen sweep — uses transform (GPU-accelerated, works on mobile) */
.curtain-left::after,
.curtain-right::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 28%;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,0.08) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(201,168,76,0.05) 75%,
    transparent
  );
  pointer-events: none;
  will-change: transform;
}
.curtain-left::after {
  left: 0;
  transform: translateX(-130%);
  animation: sheenL 1.2s ease-out 0.05s forwards;
}
.curtain-right::after {
  right: 0;
  transform: translateX(130%);
  animation: sheenR 1.2s ease-out 0.05s forwards;
}

/* translateX replaces left/right — GPU accelerated on all mobile browsers */
@keyframes sheenL {
  from { transform: translateX(-130%); }
  to   { transform: translateX(260%); }
}
@keyframes sheenR {
  from { transform: translateX(130%); }
  to   { transform: translateX(-260%); }
}

/* Opening keyframes */
@keyframes curtainOpenL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-101%); }
}
@keyframes curtainOpenR {
  0%   { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* ── Glowing gold seam at center ── */
.curtain-seam-glow {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(201,168,76,0.7) 8%,
    rgba(230,195,90,0.95) 25%,
    rgba(243,210,110,1)   50%,
    rgba(230,195,90,0.95) 75%,
    rgba(201,168,76,0.7) 92%,
    transparent 100%
  );
  z-index: 5;
  box-shadow: 0 0 14px 2px rgba(201,168,76,0.5);
  animation: seamFade 0.55s ease 0.85s forwards;
}
@keyframes seamFade { to { opacity: 0; } }

/* ── Brand mark centered on curtain ── */
.curtain-brand {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  text-align: center;
  pointer-events: none;
  animation: curtainBrandOut 0.45s ease 0.7s forwards;
}
@keyframes curtainBrandOut {
  to { opacity: 0; transform: translate(-50%, -47%) scale(0.97); }
}

.curtain-brand-ring {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 1.4vw, 8px);
  border: 1.5px solid rgba(201,168,76,0.6);
  border-radius: 50px;
  padding: clamp(6px, 1.8vw, 10px) clamp(18px, 5vw, 32px);
  font-family: var(--font-sans);
  font-size: clamp(0.62rem, 2.4vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--gold-light);
  white-space: nowrap;
  animation: ringReveal 0.55s cubic-bezier(0.2, 0.8, 0.4, 1) both,
             ringGlow   1.4s ease-in-out 0.55s 1;
}
@keyframes ringReveal {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ringGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); border-color: rgba(201,168,76,0.5); }
  50%     { box-shadow: 0 0 26px 3px rgba(201,168,76,0.3); border-color: rgba(201,168,76,0.9); }
}

.cb-dot { color: var(--gold-dim); font-size: 0.5rem; opacity: 0.7; }

.curtain-brand-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.72rem, 2.3vw, 0.88rem);
  color: rgba(201,168,76,0.55);
  letter-spacing: 0.18em;
  margin-top: 10px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
}

.curtain-brand-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
  margin: 12px auto 0;
  animation: lineExpand 0.8s ease 0.35s both;
}
@keyframes lineExpand {
  from { width: 0; opacity: 0; }
  to   { width: 40px; opacity: 1; }
}

/* ──────────────────────────────────────────
   STAGGERED CONTENT REVEAL (first load only)
   Content reveals AS the curtains open (1.0s–2.5s),
   so the page is "discovered" behind the curtains.
   JS removes .first-load after entrance ends.
────────────────────────────────────────── */

@keyframes contentReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Suppress screen-level fadeSlideUp during first load */
.screen.first-load { animation: none !important; }

/* Reveal coincides with curtain opening (starts at 1.0s, spreads to 2.1s) */
.screen.first-load .brand-emblem { animation: contentReveal 0.60s ease 1.00s both; }
.screen.first-load .headline     { animation: contentReveal 0.55s ease 1.25s both; }
.screen.first-load .subline      { animation: contentReveal 0.50s ease 1.45s both; }
.screen.first-load .card         { animation: contentReveal 0.55s ease 1.65s both; }
.screen.first-load .admin-link   { animation: contentReveal 0.40s ease 1.90s both; }
.screen.first-load .footer-note  { animation: contentReveal 0.35s ease 2.05s both; }


/* ══════════════════════════════════════
   TYPOGRAPHY & GLOBAL STR
══════════════════════════════════════ */

.headline {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 300;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.subline {
  font-size: 0.875rem;
  color: var(--white-dim);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 1.6rem;
  font-weight: 300;
}

.subline strong { color: var(--gold); font-weight: 500; }

/* ════════════════════════════════════════════════
   CARD — Mobile-first glass card
════════════════════════════════════════════════ */

.card {
  width: 100%;
  background: rgba(13,35,71,0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius);
  padding: var(--card-pad);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(201,168,76,0.05),
    inset 0 1px 0 rgba(255,255,255,0.04);
  margin-bottom: 1.2rem;
}

/* ════════════════════════════════════════════════
   FORM ELEMENTS — Large touch targets
════════════════════════════════════════════════ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.input-hint {
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.req { color: var(--gold); margin-left: 2px; }

.input-group input,
.select-wrapper select {
  width: 100%;
  background: rgba(11,28,58,0.6);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 10px;
  /* 52px height for comfortable mobile touch */
  padding: 0.85rem 1rem;
  min-height: 52px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem; /* prevents iOS zoom */
  font-weight: 300;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.input-group input::placeholder { color: rgba(245,240,232,0.22); }
.input-group input:focus,
.select-wrapper select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.select-wrapper { position: relative; }
.select-wrapper select { cursor: pointer; padding-right: 2.5rem; }
.select-wrapper select option { background: var(--blue-mid); color: var(--white); }
.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--gold-dim);
  pointer-events: none;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

.form-grid.third {
  display: flex;
  flex-direction: column;
}

@media (min-width: 540px) {
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .form-grid.third {
    grid-template-columns: 1fr 1fr 1.3fr;
  }
  .form-grid.third > div { grid-column: span 1 !important; }
}

.form-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════
   UPLOAD ZONE
════════════════════════════════════════════════ */

.upload-zone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1.5px dashed rgba(201,168,76,0.28);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  margin-bottom: 1.2rem;
  min-height: 64px;
  -webkit-tap-highlight-color: transparent;
}

.upload-zone:hover, .upload-zone:active {
  border-color: var(--gold);
  background: rgba(201,168,76,0.04);
}

.upload-zone svg { width: 30px; height: 30px; color: var(--gold-dim); flex-shrink: 0; }
.upload-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.upload-title { font-size: 0.83rem; font-weight: 500; color: var(--white-dim); }
.upload-hint  { font-size: 0.68rem; color: var(--gold-dim); }

.upload-btn {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}

.upload-preview {
  margin-top: -0.8rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: var(--gold);
  padding: 6px 10px;
  background: rgba(201,168,76,0.07);
  border-radius: 6px;
  border: 1px solid rgba(201,168,76,0.18);
}

/* ════════════════════════════════════════════════
   BUTTONS — 48px+ touch targets
════════════════════════════════════════════════ */

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 1rem 2rem;
  min-height: 52px;
  background: linear-gradient(135deg, #c9a84c 0%, #e3c97e 50%, #c9a84c 100%);
  background-size: 200% auto;
  border: none;
  border-radius: 12px;
  color: var(--blue-deep);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background-position 0.6s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 28px rgba(201,168,76,0.28);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.btn-primary:hover,
.btn-primary:active { background-position: right center; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(201,168,76,0.48); }
.btn-primary:hover::after { transform: translateX(100%); }

.btn-primary svg { width: 18px; height: 18px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-back {
  background: none;
  border: none;
  color: var(--gold-dim);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
  min-height: 44px;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.btn-back:hover { color: var(--gold); }

/* ════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════ */

.alert-box {
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  border: 1px solid;
  animation: fadeSlideUp 0.4s ease both;
}

.alert-box.error { background: rgba(192,57,43,0.14); border-color: rgba(192,57,43,0.4); color: #e08070; }
.alert-box.info  { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.35); color: var(--gold-light); }
.alert-box.used  { background: rgba(180,140,40,0.1); border-color: rgba(180,140,40,0.4); color: #d4a84b; }

.hidden { display: none !important; }

/* ════════════════════════════════════════════════
   WELCOME BANNER
════════════════════════════════════════════════ */

.welcome-banner {
  text-align: center;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(135deg, rgba(201,168,76,0.07), rgba(226,201,126,0.03));
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--white-dim);
  font-weight: 300;
  width: 100%;
}

.welcome-banner strong { color: var(--gold-light); font-weight: 600; }

/* ════════════════════════════════════════════════
   TICKET BADGE
════════════════════════════════════════════════ */

.ticket-badge {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.2rem;
  width: 100%;
  box-shadow: 0 0 20px rgba(201,168,76,0.07);
}

.ticket-icon { font-size: 1.7rem; }
.ticket-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-dim); text-transform: uppercase; }
.ticket-count { font-family: var(--font-serif); font-size: 1.1rem; color: var(--gold-light); margin-top: 2px; }

/* ════════════════════════════════════════════════
   LOCKOUT BAR
════════════════════════════════════════════════ */

.lockout-bar {
  background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: #e08070;
  text-align: center;
  margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════
   SUCCESS SCREEN
════════════════════════════════════════════════ */

.success-medallion {
  position: relative;
  width: 110px; height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.medallion-inner {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px var(--gold-glow);
  position: relative;
  z-index: 2;
}

.check-icon { font-size: 1.9rem; color: var(--blue-deep); font-weight: 700; line-height: 1; }

.medallion-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,0.4);
  animation: ripple 2s ease-out infinite;
}

.medallion-ripple.r1 { width: 94px;  height: 94px;  animation-delay: 0s; }
.medallion-ripple.r2 { width: 110px; height: 110px; animation-delay: 0.55s; }

@keyframes ripple {
  0%   { opacity: 0.8; transform: scale(0.88); }
  100% { opacity: 0;   transform: scale(1.12); }
}

/* ════════════════════════════════════════════════
   PROMO CARD
════════════════════════════════════════════════ */

.promo-card {
  width: 100%;
  background: rgba(13,35,71,0.55);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--radius);
  padding: 1.6rem var(--card-pad);
  text-align: center;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.promo-ribbon {
  display: inline-block;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  color: var(--blue-deep);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 3px 14px;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}

.promo-text  { font-size: 0.83rem; color: var(--white-dim); line-height: 1.6; margin-bottom: 0.4rem; font-weight: 300; }
.promo-label { font-size: 0.78rem; color: var(--gold-dim); margin-bottom: 0.8rem; }

.promo-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(201,168,76,0.07);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 0.9rem 2rem;
  cursor: pointer;
  transition: background var(--transition), transform 0.2s;
  margin-bottom: 0.5rem;
  -webkit-tap-highlight-color: transparent;
}

.promo-code:active { transform: scale(0.97); }

#promo-code-text {
  font-family: 'Courier New', monospace;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-light);
}

.copy-hint { font-size: 0.62rem; color: var(--gold-dim); letter-spacing: 0.08em; }
.copy-toast { font-size: 0.75rem; color: var(--success-green); padding: 4px 0; }

.btn-godiva { margin-top: 0; }

/* ════════════════════════════════════════════════
   ADMIN LINK
════════════════════════════════════════════════ */

.admin-link {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(201,168,76,0.3);
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 0.4rem;
  margin-top: 0.4rem;
  transition: color var(--transition);
}

.admin-link:hover { color: var(--gold-dim); }

/* ════════════════════════════════════════════════
   STARS / CONFETTI
════════════════════════════════════════════════ */

.stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.star {
  position: absolute;
  animation: starFall linear forwards;
}

@keyframes starFall {
  0%  { transform: translateY(-10px) rotate(0deg) scale(0); opacity: 1; }
  80% { opacity: 1; }
  100%{ transform: translateY(110vh) rotate(360deg) scale(1); opacity: 0; }
}

/* ════════════════════════════════════════════════
   FOOTER NOTE
════════════════════════════════════════════════ */

.footer-note {
  font-size: 0.65rem;
  color: rgba(201,168,76,0.28);
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
  padding: 0 1rem;
}

/* ════════════════════════════════════════════════
   TABLET & DESKTOP enhancements
════════════════════════════════════════════════ */

@media (min-width: 540px) {
  :root { --page-pad: 2rem; --card-pad: 2rem; }
  .headline { font-size: 2.6rem; }
  .btn-primary:hover { transform: translateY(-2px); }
}

@media (min-width: 768px) {
  body { align-items: center; padding-top: 2rem; }
}

/* ════════════════════════════════════════════════
   SHAKE animation
════════════════════════════════════════════════ */

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* ══════════════════════════════════════
   SCREEN DIRECTIONAL TRANSITIONS
══════════════════════════════════════ */

@keyframes screenExitLeft   { to   { opacity: 0; transform: translateX(-20px); } }
@keyframes screenExitRight  { to   { opacity: 0; transform: translateX(20px);  } }
@keyframes screenEnterRight { from { opacity: 0; transform: translateX(26px);  } to { opacity:1; transform:translateX(0); } }
@keyframes screenEnterLeft  { from { opacity: 0; transform: translateX(-26px); } to { opacity:1; transform:translateX(0); } }

/* ══════════════════════════════════════
   INPUT FOCUS & VALIDATION STATES
══════════════════════════════════════ */

/* Expanding ring on focus (replaces static box-shadow) */
.input-group input:focus,
.select-wrapper select:focus {
  animation: inputFocusRing 0.3s ease both;
}
@keyframes inputFocusRing {
  from { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
  to   { box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }
}

/* Green success state after correct password */
.input-valid {
  border-color: rgba(39,174,96,0.65) !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,0.14) !important;
  animation: inputValidPulse 0.3s ease both !important;
}
@keyframes inputValidPulse {
  from { box-shadow: 0 0 0 0 rgba(39,174,96,0.55); }
  to   { box-shadow: 0 0 0 3px rgba(39,174,96,0.14); }
}

/* ══════════════════════════════════════
   LOADING SPINNER (inside .btn-primary)
══════════════════════════════════════ */

.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(11,28,58,0.35);
  border-top-color: var(--blue-deep);
  animation: btnSpin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   MOBILE FORM — BOTTOM-SHEET CARD ENTER
══════════════════════════════════════ */

@media (max-width: 640px) {
  #screen-form.active .card {
    animation: cardSheetIn 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s both;
  }
}
@keyframes cardSheetIn {
  from { transform: translateY(56px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════
   STEP PROGRESS INDICATOR
══════════════════════════════════════ */

.step-indicator {
  position: fixed;
  /* iOS safe area — stays above home bar */
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  background: rgba(5, 14, 28, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 50px;
  padding: 7px 16px;
  gap: 2px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55);
  pointer-events: none;
  white-space: nowrap;
  /* fallback if backdrop-filter unsupported */
  background-color: rgba(5, 14, 28, 0.92);
}

/* On narrow screens hide text labels — show dots only */
@media (max-width: 380px) {
  .step-label { display: none; }
  .step-item  { gap: 0; }
}

.step-item {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.32;
  transition: opacity 0.4s ease;
}
.step-item.active { opacity: 1; }
.step-item.done   { opacity: 0.65; }

.step-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--gold-dim);
  letter-spacing: 0;
  font-family: var(--font-sans);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.step-item.active .step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--blue-deep);
  box-shadow: 0 0 10px rgba(201,168,76,0.45);
}
.step-item.done .step-dot {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.45);
  color: var(--gold);
}

.step-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.step-item.active .step-label { color: var(--gold-light); }

.step-connector {
  width: 20px;
  height: 1px;
  background: rgba(201,168,76,0.18);
  margin: 0 3px;
  transition: background 0.4s ease;
}
.step-connector.done { background: rgba(201,168,76,0.48); }