/* ================================================================
   Ginger Films — Wizard Overlay (additive skin) — v2
   Fix 1: aisle motif is now its own independent fixed bar, positioned
   in JS to always sit exactly below the real sticky rail (whether or
   not the brand-bar has pushed the rail down) — instead of living
   inside the rail's own fragile sticky/blur/z-index setup.
   Fix 2: more characterful figures (veil arc, bowtie, a small gold
   ring that appears once the couple meets).
   ================================================================ */

.wizard-hide { display: none !important; }

/* ---------- Continue / Back nav row ---------- */
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; gap: 16px; }
.wizard-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 999px; padding: 13px 26px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--cream); color: var(--muted);
  transition: all 0.2s cubic-bezier(.34,1.4,.64,1);
}
.wizard-btn:hover { border-color: var(--gold); color: var(--ink); }
.wizard-btn:active { transform: scale(0.96); }
.wizard-btn-next { background: var(--grad); color: #2B2118; border: none; box-shadow: 0 6px 18px rgba(193,98,59,0.32); }
.wizard-btn-next:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(193,98,59,0.4); }

/* ---------- Gold shimmer on the final total ---------- */
.total-shimmer {
  background-image: linear-gradient(100deg, #8A3F22 0%, #E0885A 45%, #8A3F22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
@keyframes gfTotalPulse { 0% { opacity: 0.55; } 100% { opacity: 1; } }
.total-shimmer.pulse { animation: gfTotalPulse 0.5s ease; }

/* ---------- Walking bride/groom progress motif ----------
   Independent fixed bar. JS sets `top` to sit exactly below the
   real .rail, so it never overlaps or hides behind anything. */
#wizardAisle {
  position: fixed; left: 0; right: 0; z-index: 61;
  height: 30px;
  background: rgba(246,241,231,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: top 0.2s ease;
  pointer-events: none;
}
#wizardAisle .aisle-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; height: 100%; }
#wizardAisle .aisle-line { position: absolute; top: 50%; left: 4%; right: 4%; height: 1px; background: var(--border); transform: translateY(-50%); }
#wizardAisle .aisle-figure { position: absolute; bottom: 1px; width: 15px; height: 26px; transition: left 0.7s cubic-bezier(.16,1,.3,1), right 0.7s cubic-bezier(.16,1,.3,1); }
#wizardAisle .aisle-figure svg { width: 100%; height: 100%; display: block; overflow: visible; }
#wizardAisle .fig-groom { left: 4%; }
#wizardAisle .fig-groom svg { color: var(--ink); }
#wizardAisle .fig-bride { right: 4%; }
#wizardAisle .fig-bride svg { color: var(--gold-text); }
#wizardAisle .aisle-heart {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%) scale(0);
  color: var(--gold); transition: transform 0.4s cubic-bezier(.34,1.6,.64,1);
}
#wizardAisle.wizard-arrived .aisle-heart { transform: translateX(-50%) scale(1); }

.wizard-gait-bob, .wizard-gait-leg-l, .wizard-gait-leg-r,
.wizard-gait-arm-l, .wizard-gait-arm-r, .wizard-gait-skirt, .wizard-gait-veil {
  transform-box: view-box; transform-origin: 12px 20px;
}
.wizard-walking .wizard-gait-bob { animation: gfGaitBob 1.6s ease-in-out infinite; }
.wizard-walking .wizard-gait-leg-l { animation: gfGaitLegA 1.6s ease-in-out infinite; }
.wizard-walking .wizard-gait-leg-r { animation: gfGaitLegB 1.6s ease-in-out infinite; }
.wizard-walking .wizard-gait-arm-l { animation: gfGaitLegB 1.6s ease-in-out infinite; }
.wizard-walking .wizard-gait-arm-r { animation: gfGaitLegA 1.6s ease-in-out infinite; }
#wizardAisle .fig-bride .wizard-gait-skirt { transform-box: view-box; transform-origin: 12px 19px; }
.wizard-walking .fig-bride .wizard-gait-skirt { animation: gfGaitSway 1.6s ease-in-out infinite; }
.wizard-walking .fig-bride .wizard-gait-veil { animation: gfGaitSway 1.6s ease-in-out infinite; }

@keyframes gfGaitLegA { 0%,100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes gfGaitLegB { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes gfGaitSway { 0%,100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
@keyframes gfGaitBob { 0%,50%,100% { transform: translateY(0); } 25%,75% { transform: translateY(-1.5px); } }

@media (prefers-reduced-motion: reduce) {
  .wizard-gait-bob, .wizard-gait-leg-l, .wizard-gait-leg-r,
  .wizard-gait-arm-l, .wizard-gait-arm-r, .wizard-gait-skirt, .wizard-gait-veil,
  .total-shimmer.pulse, #wizardAisle .aisle-heart { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  #wizardAisle .aisle-inner { padding: 0 16px; }
}

/* ---------- Wedding date field: match the existing #weddingCity treatment ---------- */
#weddingDate {
  width: 168px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--cream-2); font-size: 15px; color: #2B2118; font-family: inherit;
  color-scheme: light;
}
#weddingDate::-webkit-calendar-picker-indicator {
  filter: invert(35%) sepia(70%) saturate(600%) hue-rotate(345deg) brightness(95%);
  cursor: pointer;
}