/* ══════════════════════════════════════════════════════════════
   ENKUTATASH 2019 (፳፻፲፱) — DESIGN TOKENS & SYSTEM
   100% Mobile-First · Touch-First · Token-Driven Architecture
   Lead Character: Enkutatash_flower (አደይ አበባ)
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand & Holiday Golds ── */
  --gold-primary:      #f5c518;
  --gold-radiant:      #ffdb4d;
  --gold-deep:         #d4a900;
  --gold-glow:         transparent;
  --gold-glow-soft:    transparent;
  --gold-glow-intense: transparent;

  /* ── Surfaces & Glassmorphism (Translucent & Luminous like Easter project) ── */
  --surface-base:       #060c18;
  --surface-card:       rgba(12, 22, 46, 0.52);
  --surface-card-hover: rgba(18, 32, 64, 0.65);
  --surface-card-glow:  transparent;
  --surface-overlay:    rgba(5, 10, 20, 0.45);
  --surface-pill:       rgba(245, 197, 24, 0.16);
  --surface-input:      rgba(6, 12, 26, 0.75);
  --surface-accent:     rgba(31, 138, 76, 0.20);

  /* ── Borders & Dividers ── */
  --border-subtle:      rgba(255, 255, 255, 0.12);
  --border-gold:        rgba(245, 197, 24, 0.32);
  --border-gold-bright: rgba(255, 219, 77, 0.65);

  /* ── Typography Colors ── */
  --text-primary:       #ffffff;
  --text-secondary:     rgba(255, 255, 255, 0.88);
  --text-muted:         rgba(255, 255, 255, 0.58);
  --text-gold:          #ffdb4d;

  /* ── Cultural Accents (ቄጠማ / Ketema green) ── */
  --ketema-green:       #1f8a4c;
  --ketema-bright:      #2ecc71;

  /* ── Radius & Spacing ── */
  --radius-sm:          10px;
  --radius-md:          16px;
  --radius-lg:          24px;
  --radius-pill:        9999px;
  --card-gap:           clamp(1.5rem, 4.5vw, 2.5rem);

  /* Height reserved at the bottom of every page for the fixed brand footer */
  --geez-footer-h:      52px;
}

/* ── Reset & Base Setup ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── Ethiopian Custom Typography: Benaiah (በናያ) ── */
@font-face {
  font-family: 'Benaiah';
  src: url('../fonts/Benaiah.ttf') format('truetype'),
       url('/public/fonts/Benaiah.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter', 'Benaiah', 'Noto Serif Ethiopic', system-ui, -apple-system, sans-serif;
  background-color: var(--surface-base);
  color: var(--text-primary);
  line-height: 1.65;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  position: relative;
}

/* ── Base Setup for Pages ── */
body.intro-page-body {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body.card-page-body {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

input, button, select, textarea {
  font-family: inherit;
}

/* ── Typography Helpers ── */
.ethiopic-font {
  font-family: 'Benaiah', 'Noto Serif Ethiopic', 'Nyala', 'Abyssinica SIL', serif;
}

.serif-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Shimmering Gold Text Effect */
.shimmer-gold {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #ffffff 35%, var(--gold-radiant) 65%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: goldShimmerAnim 6s linear infinite;
}

@keyframes goldShimmerAnim {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Full-Viewport Background Photo (Easter Project Style) ── */
.bg-photo-fixed,
.ybb-bg-img-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

@supports (height: 100lvh) {
  .bg-photo-fixed,
  .ybb-bg-img-fixed {
    height: 100lvh;
  }
}

/* Dual Atmospheric Scrims (Light-balanced matching Easter project) */
.bg-scrim,
.ybb-bg-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.bg-scrim-gradient {
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 36, 0.58) 0%,
    rgba(22, 34, 62, 0.32) 36%,
    rgba(8, 14, 28, 0.68) 100%
  );
}

.bg-scrim-radial {
  background: radial-gradient(
    ellipse 120% 70% at 50% 12%,
    rgba(245, 197, 24, 0.22) 0%,
    transparent 58%
  );
}

/* Adey Abeba Falling Petals Canvas (Page 2 Card) */
#petals-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   PAGE 1: STANDALONE INTRO TEASER PAGE
   Dedicated full-viewport landing with dark overlay & no petals
   ══════════════════════════════════════════════════════════════ */
.intro-page-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(1rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow: hidden;
}

/* Dedicated Background for 1st Page with Darker Overlay */
.intro-page-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.intro-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
}

/* Rich, dark overlay specifically for 1st page */
.intro-bg-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 7, 16, 0.90) 0%,
    rgba(6, 12, 28, 0.82) 42%,
    rgba(2, 5, 12, 0.94) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Teaser Card Box on 1st Page */
.intro-card-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: introPageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes introPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Animated Logo Loop (Page 1) ──
   One 7s cycle. The flower is the whole show: it spins in place, then glides
   left as the wordmark writes itself out from behind it, spins again while the
   lockup holds, then the wordmark is pulled back in and the flower recentres.

     0%–18%   flower spins 360° in place, centred, wordmark hidden
     18%–24%  beat
     24%–44%  flower glides left + "እንቁጣጣሽ 2019" writes out from behind it
     44%–60%  flower spins another 360°, lockup holds
     60%–74%  hold (read time)
     74%–88%  wordmark is pulled back in, flower recentres
     88%–100% beat, then loop (720° ≡ 0°, so the seam is invisible)

   The horizontal motion comes from the grid track going 0fr → 1fr: the lockup
   is centre-justified, so as the text track opens the flower is pushed left and
   the text is uncovered left-to-right. No hard-coded pixel widths, so it adapts
   to whatever the font actually measures. Only transform/opacity/track-size
   animate, so it stays composited and smooth on phones. */
.intro-logo-loop {
  display: inline-grid;
  grid-template-columns: auto 0fr;
  align-items: center;
  margin: 0 auto clamp(0.6rem, 1.9vh, 1rem);
  animation: logoLockup 7s infinite;
}

@keyframes logoLockup {
  0%,  24%  { grid-template-columns: auto 0fr; animation-timing-function: cubic-bezier(0.38, 0.15, 0.25, 1); }
  44%, 74%  { grid-template-columns: auto 1fr; animation-timing-function: cubic-bezier(0.6, 0, 0.75, 0.25); }
  88%, 100% { grid-template-columns: auto 0fr; }
}

.intro-logo-flower {
  width: clamp(88px, 20vw, 118px);
  height: clamp(88px, 20vw, 118px);
  object-fit: contain;
  animation: logoSpin 7s infinite;
  will-change: transform;
}

@keyframes logoSpin {
  0%   { transform: rotate(0deg)   scale(1);    animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  9%   { transform: rotate(180deg) scale(1.06); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  18%  { transform: rotate(360deg) scale(1); }
  44%  { transform: rotate(360deg) scale(1);    animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  52%  { transform: rotate(540deg) scale(1.06); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  60%  { transform: rotate(720deg) scale(1); }
  100% { transform: rotate(720deg) scale(1); }
}

/* The mask that uncovers the wordmark. Width is driven by the grid track above. */
.intro-logo-textwrap {
  overflow: hidden;
  min-width: 0;
}

/* Rides slightly behind the uncovering edge, so the letters feel pulled out
   rather than just wiped in. */
.intro-logo-text {
  display: block;
  white-space: nowrap;
  padding-left: clamp(0.5rem, 2.2vw, 0.9rem);
  font-size: clamp(1.4rem, 4.8vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
  animation: logoTextSlide 7s infinite;
  will-change: transform, opacity;
}

@keyframes logoTextSlide {
  0%,  24%  { transform: translateX(-26px); opacity: 0; animation-timing-function: cubic-bezier(0.38, 0.15, 0.25, 1); }
  44%, 74%  { transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.75, 0.25); }
  88%, 100% { transform: translateX(-26px); opacity: 0; }
}

/* Accessibility: opt out of motion → the finished lockup, held still. */
@media (prefers-reduced-motion: reduce) {
  .intro-logo-loop   { grid-template-columns: auto 1fr; animation: none; }
  .intro-logo-flower { animation: none; }
  .intro-logo-text   { animation: none; opacity: 1; transform: none; }
}

/* Grand Titles on 1st Full Page */
.intro-page-title {
  font-size: clamp(1.45rem, 4.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: clamp(0.4rem, 1.4vh, 0.8rem);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.intro-page-title span.block {
  display: block;
}

/* Thin Elegant Festive Divider */
.intro-page-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 200px;
  margin: 0 auto clamp(0.4rem, 1.3vh, 0.8rem);
}

.intro-page-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.55), transparent);
}

.divider-mini-flower {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
}

/* Subtitle on 1st Full Page */
.intro-page-subtitle {
  font-size: clamp(0.92rem, 2.6vw, 1.08rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: clamp(1rem, 2.6vh, 1.6rem);
  max-width: 440px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* 100% Clickable Native Navigation Button */
.intro-grand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  height: 52px;
  background: linear-gradient(135deg, #ffe066 0%, #f5c518 50%, #d4a900 100%);
  color: #050a14 !important;
  font-weight: 700;
  font-size: clamp(1.02rem, 2.8vw, 1.15rem);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.intro-grand-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: #050a14 !important;
}

.intro-grand-btn:active {
  transform: scale(0.98);
  color: #050a14 !important;
}

/* ══════════════════════════════════════════════════════════════
   PAGE 2: ROTATING ADEY ABEBA FLOWER LOADER
   Displays on entry and dissolves smoothly once ready
   ══════════════════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 8, 18, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-loader.loader-dissolved {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.loader-flower-glow {
  display: none;
}

.loader-flower-spinning {
  position: relative;
  z-index: 2;
  width: clamp(90px, 20vw, 120px);
  height: clamp(90px, 20vw, 120px);
  object-fit: contain;
  filter: none;
  animation: loaderSpin 3.5s linear infinite;
}

@keyframes loaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-text {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   MAIN PAGE LAYOUT & CARDS
   ══════════════════════════════════════════════════════════════ */
.app-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3.5vw, 2.5rem) 1rem 4rem;
}

body.card-page-body .app-container {
  padding-top: calc(clamp(1.2rem, 3.5vw, 2.5rem) + 58px);
}

.cards-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

/* ── Hero Banner ── */
.hero-banner {
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.56) 0%, rgba(8, 16, 34, 0.70) 100%);
  backdrop-filter: blur(5px) saturate(135%);
  -webkit-backdrop-filter: blur(5px) saturate(135%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.2rem, 3.5vw, 2rem);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--card-gap);
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-radiant), transparent);
}

/* Flower Hero Character on Main Page */
.hero-character-wrap {
  width: 86px;
  height: 86px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-character-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: none;
}

.holiday-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-pill);
  border: 1px solid var(--border-gold);
  color: var(--gold-radiant);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 1.1rem;
}

.holiday-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-radiant);
  box-shadow: none;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.hero-title {
  font-size: clamp(0.92rem, 4.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 0.55rem;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (max-width: 375px) {
  .hero-title {
    font-size: 0.88rem;
  }
}

@media (max-width: 335px) {
  .hero-title {
    font-size: 0.78rem;
  }
}

.hero-subtitle {
  font-size: clamp(1rem, 2.7vw, 1.25rem);
  color: var(--gold-radiant);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.subtitle-flower-mini {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  filter: none;
  animation: miniFlowerSpin 10s linear infinite;
  display: inline-block;
}

@keyframes miniFlowerSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Cultural Divider */
.festive-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 1.2rem auto 0;
  max-width: 240px;
}

.festive-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.6), transparent);
}

.festive-divider .flower-divider-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: none;
}

/* ── Main Greeting Card & Multiple Messages ── */
.greeting-card {
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.56) 0%, rgba(8, 16, 34, 0.70) 100%);
  backdrop-filter: blur(5px) saturate(135%);
  -webkit-backdrop-filter: blur(5px) saturate(135%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  margin-bottom: var(--card-gap);
  position: relative;
}

/* ── Active Wish Display on Main Card ── */
.wish-card-theme-header {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.greeting-body {
  font-size: clamp(0.96rem, 2.6vw, 1.14rem);
  line-height: 2.15;
  color: var(--text-secondary);
  text-align: center;
  margin: 1.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wish-body-text p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.greeting-closing {
  font-size: clamp(1.2rem, 3.2vw, 1.45rem);
  font-weight: 700;
  color: var(--gold-radiant);
  text-align: center;
  margin-top: 1rem;
}

/* Sender Signature on Recipient View */
.sender-signature-box {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.sender-from-label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.sender-signature-name {
  font-size: clamp(1.75rem, 4.8vw, 2.35rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ── Generator & Share Section ── */
/* Same glass panel as .hero-banner and .greeting-card, so the step titles and
   the name field stay readable over the busy photo. The choices inside use a
   light surface rather than a second glass layer — stacking two translucent
   panels would double the opacity and go muddy. */
.generator-section {
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.56) 0%, rgba(8, 16, 34, 0.70) 100%);
  backdrop-filter: blur(5px) saturate(135%);
  -webkit-backdrop-filter: blur(5px) saturate(135%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.generator-title {
  font-size: clamp(1.2rem, 3.2vw, 1.45rem);
  font-weight: 700;
  color: var(--gold-primary);
  margin-bottom: 0.5rem;
}

.generator-subtitle {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   STEPS — FLAT SECTIONS, NOT NESTED PANELS
   The generator card is the ONE box. Steps live directly inside it,
   separated by a hairline. No panel inside a panel inside a panel.
   State is carried by the numbered badge and the title colour.
   ══════════════════════════════════════════════════════════════ */
.stepped-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  margin: 1.4rem auto 0;
  text-align: left;
}

.accordion-step-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 1.35rem 0;
  transition: opacity 0.28s ease;
}

.accordion-step-card:first-child { padding-top: 0; }
.accordion-step-card:last-child  { padding-bottom: 0; }

/* Steps are separated by air, not by a rule — there's no panel to divide now */
.accordion-step-card + .accordion-step-card {
  border-top: 0;
  margin-top: 0.4rem;
}

.accordion-step-card.step-locked { opacity: 0.42; }

/* Step header — no bar, no fill, just the badge and the title */
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.step-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

.step-active .step-badge {
  background: linear-gradient(135deg, var(--gold-radiant) 0%, var(--gold-primary) 100%);
  color: #050a14;
  box-shadow: none;
}

.step-done .step-badge {
  background: #10b981;
  color: #ffffff;
  box-shadow: none;
}

.step-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.step-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.step-active .step-title {
  color: var(--gold-radiant);
}

.step-summary {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.step-edit-hint {
  font-size: 0.76rem;
  color: var(--gold-primary);
  margin-left: 4px;
  opacity: 0.85;
}

/* Step body — flush with the step, no inner panel */
.step-body {
  padding: 1rem 0 0;
}

.step-instruction {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1rem;
  text-align: left;
}

.btn-step-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-radiant) 0%, var(--gold-primary) 100%);
  color: #050a14;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.8rem 2.2rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  width: 100%;
  max-width: 320px;
}

.btn-step-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

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

/* ══════════════════════════════════════════════════════════════
   STEP 2 — WISH CHOOSER
   A quiet, scannable menu of four cards. The whole card is the
   tap target; the tick on the left is the only selection signal.
   Full text is opt-in, so nothing competes for attention.
   ══════════════════════════════════════════════════════════════ */
.wishes-choice-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;            /* background photo shows through between the cards */
  width: 100%;
}

/* A raised surface inside the panel — same family as .music-choice-item, just
   roomier. No backdrop-filter here: the panel behind already frosts the photo,
   and a second frosted layer only muddies it. */
.wish-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: rgba(12, 22, 46, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: clamp(1.05rem, 3.4vw, 1.4rem);
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.wish-choice:hover {
  border-color: rgba(245, 197, 24, 0.42);
  background: rgba(16, 30, 60, 0.55);
}

.wish-choice:active { background: rgba(18, 34, 66, 0.6); }

.wish-choice:focus-visible {
  outline: 2px solid var(--gold-radiant);
  outline-offset: 3px;
}

/* Chosen: gold wash + gold border, matching the music picker */
.wish-choice.is-selected {
  background: rgba(245, 197, 24, 0.1);
  border-color: var(--gold-radiant);
  box-shadow: none;
}

/* Selection tick — empty ring until chosen, then a filled gold disc */
.wish-choice-tick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.26);
  display: grid;
  place-items: center;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.wish-choice-tick i {
  font-size: 0.6rem;
  color: #050a14;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.is-selected .wish-choice-tick {
  background: var(--gold-radiant);
  border-color: var(--gold-radiant);
}

.is-selected .wish-choice-tick i { opacity: 1; }

.wish-choice-text {
  flex: 1;
  min-width: 0;
}

.wish-choice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.wish-choice-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  transition: color 0.22s ease;
}

.is-selected .wish-choice-title { color: var(--gold-radiant); }

.wish-choice-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-primary);
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.2);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Collapsed preview — deliberately muted so four of them read calmly */
.wish-choice-summary {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* Expanded wish — the text simply breathes. No rule, no panel, no tint;
   generous leading does the separating instead. */
.wish-choice-full {
  font-size: 0.95rem;
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.92);
  background: none;
  border: 0;
  padding: 0;
  margin: 0.4rem 0 0;
}

.wish-choice-full p + p { margin-top: 1.05rem; }

.wish-choice-closing {
  margin-top: 1.2rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-primary);
  line-height: 1.85;
}

/* Read more / less — a quiet text affordance, never competing with the
   card's own selection. min-height keeps it thumb-reachable. */
.wish-choice-more {
  margin-top: 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold-radiant);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wish-choice-more i { font-size: 0.68rem; }
.wish-choice-more:hover { text-decoration: underline; }
.wish-choice-more:focus-visible {
  outline: 2px solid var(--gold-radiant);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The single commit point for step 2 */
.step-next-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.btn-step-next:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Step 3: Multi-Platform Sharing ── */
.share-result-inner {
  width: 100%;
}

.share-buttons-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100%;
  margin: 1rem 0;
}

@media (min-width: 480px) {
  .share-buttons-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.btn-share-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
}

.btn-share-channel i {
  font-size: 1.22rem;
}

.btn-share-channel:hover {
  transform: translateY(-2px);
}

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

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.btn-instagram:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.instagram-notice-toast {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #ffb3d0;
  margin-top: 0.8rem;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.btn-restart {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.84rem;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.btn-restart:hover {
  color: var(--gold-radiant);
  background: rgba(255, 255, 255, 0.06);
}

.form-group-wrap {
  width: 100%;
  max-width: 500px;
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-radiant);
  margin-bottom: 0.55rem;
  letter-spacing: 0.03em;
}

.name-input {
  width: 100%;
  max-width: 500px;
  height: 52px;
  background: var(--surface-input);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: 1.1rem;
  text-align: left;
  padding: 0 1.2rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.name-input:focus {
  border-color: var(--gold-radiant);
  background-color: rgba(10, 22, 46, 0.96);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

.name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold-radiant) 0%, var(--gold-primary) 100%);
  color: #050a14;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  width: 100%;
  max-width: 440px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

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

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Generated Link Share Box */
.share-result-box {
  margin-top: 1.5rem;
  padding: 1.4rem;
  border-radius: var(--radius-md);
  background: rgba(6, 12, 24, 0.75);
  border: 1px solid var(--border-gold);
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* The link reads as a line of text underlined by a rule — not a sunken panel */
.url-display {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 0.5rem 0 0.65rem;
  font-family: monospace;
  font-size: 0.82rem;
  word-break: break-all;
  color: var(--gold-radiant);
  margin: 0.6rem 0 1.1rem;
}

.share-buttons-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .share-buttons-grid {
    flex-direction: row;
  }
}

.btn-whatsapp {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.btn-telegram {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0088cc;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-telegram:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
}

.btn-copy:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.copy-confirmed {
  color: var(--gold-radiant);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 0.6rem;
  animation: fadeIn 0.3s ease;
}

/* ── Footer ── */
.app-footer {
  text-align: center;
  padding: 1.5rem 1rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-flower-mini {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.8;
}

/* ── Utilities ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.mr-2 { margin-right: 0.5rem; }
[x-cloak] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   FIXED TOP MP3 CONTROLLER (Comfortable size & interactive dropdown)
   ══════════════════════════════════════════════════════════════ */
.fixed-audio-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  background: rgba(6, 12, 26, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(245, 197, 24, 0.32);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  z-index: 100;
  user-select: none;
}

.audio-bar-inner {
  max-width: 660px;
  height: 100%;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Left: Track Info, Mini Disc Flower & Dropdown Trigger */
.audio-track-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  padding: 6px 10px 6px 4px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.audio-track-info:hover {
  background: rgba(245, 197, 24, 0.08);
}

.audio-disc-flower {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(245, 197, 24, 0.14);
  border: 1px solid rgba(245, 197, 24, 0.45);
  box-shadow: none;
  transition: all 0.2s ease;
}

.audio-flower-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.disc-spinning .audio-flower-icon {
  animation: spinFlower 5s linear infinite;
}

@keyframes spinFlower {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.audio-track-text {
  min-width: 0;
  overflow: hidden;
}

.audio-track-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}

.audio-track-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--gold-radiant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.audio-dropdown-chevron {
  font-size: 0.72rem;
  color: var(--gold-radiant);
  opacity: 0.85;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.audio-dropdown-chevron.is-open {
  transform: rotate(180deg);
}

/* Right: Control Buttons Group */
.audio-controls-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.audio-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.18s ease;
}

.audio-ctrl-btn:hover {
  background: rgba(245, 197, 24, 0.24);
  border-color: rgba(245, 197, 24, 0.6);
  color: var(--gold-radiant);
  transform: scale(1.06);
}

.audio-ctrl-btn:active {
  transform: scale(0.92);
}

/* Distinct Play Button */
.audio-play-btn {
  width: 38px;
  height: 38px;
  font-size: 0.92rem;
  background: rgba(245, 197, 24, 0.2);
  border-color: rgba(245, 197, 24, 0.55);
  color: var(--gold-radiant);
}

.audio-play-btn.is-playing {
  background: var(--gold-radiant);
  color: #060c18;
  border-color: var(--gold-radiant);
  box-shadow: none;
}

.audio-play-btn.is-playing:hover {
  background: #ffe373;
}

/* Mute Button State */
.audio-mute-btn.is-muted {
  color: #ff7575;
  border-color: rgba(255, 117, 117, 0.45);
  background: rgba(255, 117, 117, 0.14);
}

/* ── Dropdown Menu for Holiday Songs ── */
.audio-tracks-dropdown {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  max-width: 480px;
  margin: 6px auto 0;
  background: rgba(8, 16, 36, 0.96);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  z-index: 120;
}

.audio-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(245, 197, 24, 0.08);
  border-bottom: 1px solid rgba(245, 197, 24, 0.2);
}

.audio-dropdown-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-radiant);
  display: flex;
  align-items: center;
}

.audio-dropdown-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.18s ease;
}

.audio-dropdown-close:hover {
  color: #ffffff;
}

.audio-dropdown-list {
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.audio-dropdown-item:hover {
  background: rgba(245, 197, 24, 0.12);
  border-color: rgba(245, 197, 24, 0.3);
}

.audio-dropdown-item.is-active {
  background: rgba(245, 197, 24, 0.18);
  border-color: rgba(245, 197, 24, 0.5);
  box-shadow: none;
}

.audio-dropdown-item-indicator {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.audio-dropdown-item.is-active .audio-dropdown-item-indicator {
  color: var(--gold-radiant);
}

.audio-soundwaves-mini {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.audio-soundwaves-mini span {
  width: 2.5px;
  background: var(--gold-radiant);
  border-radius: 2px;
  animation: soundwaveBounce 0.75s ease-in-out infinite alternate;
}

.audio-soundwaves-mini span:nth-child(1) { height: 50%; animation-delay: 0s; }
.audio-soundwaves-mini span:nth-child(2) { height: 100%; animation-delay: 0.22s; }
.audio-soundwaves-mini span:nth-child(3) { height: 40%; animation-delay: 0.11s; }

@keyframes soundwaveBounce {
  0% { height: 25%; }
  100% { height: 100%; }
}

.audio-dropdown-item-meta {
  flex: 1;
  min-width: 0;
}

.audio-dropdown-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.audio-dropdown-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-dropdown-item.is-active .audio-dropdown-item-title {
  color: var(--gold-radiant);
  font-weight: 700;
}

.audio-dropdown-item-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.audio-dropdown-item.is-active .audio-dropdown-item-badge {
  background: rgba(245, 197, 24, 0.2);
  color: var(--gold-radiant);
}

.audio-dropdown-item-action {
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Transitions for Dropdown */
.audio-dropdown-enter {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.audio-dropdown-enter-start {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
}
.audio-dropdown-enter-end {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.audio-dropdown-leave {
  transition: all 0.16s ease;
}
.audio-dropdown-leave-start {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.audio-dropdown-leave-end {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}

/* ── Floating Preparation Countdown Banner (Docked to fixed audio bar) ── */
.audio-countdown-banner {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  background: rgba(8, 16, 36, 0.96);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
  padding: 6px 12px;
  z-index: 115;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.countdown-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.countdown-digit-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-radiant) 0%, var(--gold-primary) 100%);
  color: #050a14;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.countdown-copy-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.countdown-primary-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.countdown-secondary-text {
  font-size: 0.72rem;
  color: var(--gold-radiant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.countdown-instant-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-radiant);
  color: #060c18;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.countdown-instant-play-btn:hover {
  background: #ffe373;
  transform: scale(1.03);
}

.countdown-instant-play-btn:active {
  transform: scale(0.96);
}

.audio-countdown-inline-badge {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gold-radiant);
  padding: 1px 6px;
  background: rgba(245, 197, 24, 0.16);
  border-radius: var(--radius-pill);
  margin-left: 4px;
  flex-shrink: 0;
}

/* Transitions for Countdown Banner */
.countdown-banner-enter {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.countdown-banner-enter-start {
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.95);
}
.countdown-banner-enter-end {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.countdown-banner-leave {
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.countdown-banner-leave-start {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.countdown-banner-leave-end {
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.95);
}

/* ── Music Choice Section in Step 2 ── */
.music-choice-section {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(245, 197, 24, 0.22);
}

.music-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.music-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.music-section-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.music-choice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.music-choice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(12, 22, 46, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.music-choice-item:hover {
  background: rgba(20, 36, 72, 0.6);
  border-color: rgba(245, 197, 24, 0.35);
}

.music-choice-item.is-selected {
  background: rgba(245, 197, 24, 0.12);
  border-color: var(--gold-radiant);
  box-shadow: none;
}

.music-choice-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  color: var(--gold-radiant);
}

.music-choice-item.is-selected .music-choice-tick {
  background: var(--gold-radiant);
  border-color: var(--gold-radiant);
  color: #070e1e;
}

.music-choice-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.music-choice-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

.music-choice-item.is-selected .music-choice-title {
  color: var(--gold-radiant);
}

.music-choice-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.music-choice-item.is-selected .music-choice-badge {
  background: rgba(245, 197, 24, 0.18);
  color: var(--gold-radiant);
}

.music-preview-icon {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-left: 4px;
}

.music-choice-item:hover .music-preview-icon,
.music-choice-item.is-selected .music-preview-icon {
  color: var(--gold-radiant);
}
/* ══════════════════════════════════════════════════════════════
   FIXED BRAND FOOTER
   Two compact lines pinned to the bottom of both pages. Glass over
   the background photo rather than a solid bar, so it recedes.
   The whole strip is one link out to the restaurant site.
   ══════════════════════════════════════════════════════════════ */
.geez-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0.4rem 1rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 9, 20, 0.76);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid rgba(245, 197, 24, 0.16);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.22s ease, border-color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.geez-footer:hover {
  background: rgba(8, 16, 32, 0.9);
  border-top-color: rgba(245, 197, 24, 0.45);
}

.geez-footer:active { background: rgba(10, 20, 38, 0.95); }

.geez-footer:focus-visible {
  outline: 2px solid var(--gold-radiant);
  outline-offset: -3px;
}

.geez-footer-greeting {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--gold-primary);
  opacity: 0.9;
}

.geez-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.22s ease;
}

.geez-footer:hover .geez-footer-brand { color: rgba(255, 255, 255, 0.75); }

.geez-footer-brand strong {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 600;
}

.geez-footer-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Very small phones: drop to one line so the bar never grows */
@media (max-width: 340px) {
  .geez-footer-greeting { display: none; }
}

/* Reserve the space on card page so nothing ever hides behind the bar */
body.card-page-body {
  padding-bottom: calc(var(--geez-footer-h) + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK — one quiet line above the footer, expanding on tap.
   Deliberately low-contrast when closed so it never pulls focus
   away from the greeting itself.
   ══════════════════════════════════════════════════════════════ */
.feedback-section {
  width: 100%;
  max-width: 540px;
  margin: 1.75rem auto 0;
  text-align: center;
}

.feedback-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.feedback-toggle:hover {
  color: var(--gold-radiant);
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(245, 197, 24, 0.08);
}

.feedback-toggle i:last-child { font-size: 0.65rem; opacity: 0.8; }

.feedback-panel {
  margin-top: 0.9rem;
  padding: 1.2rem;
  text-align: left;
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.56) 0%, rgba(8, 16, 34, 0.70) 100%);
  backdrop-filter: blur(5px) saturate(135%);
  -webkit-backdrop-filter: blur(5px) saturate(135%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  animation: fadeIn 0.25s ease;
}

.feedback-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-primary);
  margin: 0.65rem 0 0.35rem;
}

.feedback-label:first-child { margin-top: 0; }
.feedback-opt { color: var(--text-muted); font-weight: 400; }

.feedback-input {
  width: 100%;
  background: rgba(6, 12, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feedback-input:focus {
  border-color: var(--gold-radiant);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18);
}

.feedback-textarea { resize: vertical; min-height: 96px; line-height: 1.7; }

.feedback-count {
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* Honeypot: off-screen, not display:none — some bots skip hidden fields. */
.feedback-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback-error {
  color: #ff8f8f;
  font-size: 0.84rem;
  margin-top: 0.6rem;
}

.feedback-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
}

.feedback-cancel {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  cursor: pointer;
  border-radius: var(--radius-pill);
  touch-action: manipulation;
}

.feedback-cancel:hover { color: #fff; }

.feedback-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  background: linear-gradient(135deg, var(--gold-radiant) 0%, var(--gold-primary) 100%);
  color: #050a14;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 8px 22px var(--gold-glow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  touch-action: manipulation;
}

.feedback-send:hover:not(:disabled) { transform: translateY(-1px); }
.feedback-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.feedback-thanks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ketema-bright);
  animation: fadeIn 0.3s ease;
}