/* ==========================================================================
   Luxury Wedding Invitation - Complete Unified Midnight Dark Theme
   Cartier / Apple Events / Rolls-Royce Inspired Aesthetic
   ========================================================================== */

:root {
  /* Unified Sunset Gold & Sand-Rose Palette */
  --color-light-cream-gold: #F5CDA3; /* كريم ذهبي فاتح */
  --color-warm-rose-beige: #DBBDA5;  /* بيج وردي دافئ */
  --color-sunset-gold: #ECB380;      /* ذهبي الغروب */
  --color-light-warm-gray: #C1B0A6;  /* رمادي دافئ فاتح */
  --color-calm-slate-gray: #999BA3;  /* رمادي سماوي هادئ */
  --color-sand-brown: #897563;       /* بني رملي */
  --color-golden-brown: #BA9270;     /* بني ذهبي */
  --color-dark-shadow-brown: #574D42;/* بني داكن للظلال */

  --bg-dark-main: #0b0e14;
  --bg-dark-card: rgba(87, 77, 66, 0.22);
  --bg-dark-glass: rgba(87, 77, 66, 0.22);
  
  --glass-bg: linear-gradient(135deg, rgba(245, 205, 163, 0.16) 0%, rgba(236, 179, 128, 0.04) 25%, rgba(219, 189, 165, 0.01) 60%, rgba(245, 205, 163, 0.08) 100%), rgba(8, 12, 20, 0.08);
  --glass-blur: blur(40px) saturate(240%) brightness(1.08) contrast(1.1);
  --glass-border: 1px solid rgba(245, 205, 163, 0.35);
  --glass-shadow: 0 45px 110px rgba(87, 77, 66, 0.65), inset 0 2.5px 3px rgba(245, 205, 163, 0.65), inset 0 -1.5px 2px rgba(219, 189, 165, 0.25), inset 0 0 50px rgba(236, 179, 128, 0.06), 0 0 45px rgba(236, 179, 128, 0.25);
  
  --gold-primary: #ECB380;
  --gold-light: #F5CDA3;
  --gold-dark: #BA9270;
  --gold-gradient: linear-gradient(135deg, #ECB380 0%, #F5CDA3 50%, #BA9270 100%);
  --gold-border: rgba(245, 205, 163, 0.2);
  
  --white-pure: #f7f7f7;
  --ink-primary: #f7f7f7;
  --ink-secondary: #C1B0A6;
  --muted: #999BA3;
  --terracotta: #DBBDA5;
  --green-success: #2e7d32;

  /* Skeuomorphic Music Player Tokens */
  --music-bg: #F9F9F9;
  --music-black: #1F1F21;
  --music-gray-text: #897563;
  --music-gray-light: #C1B0A6;
  --music-gold: #ECB380;
  --music-gold-dark: #BA9270;
  --music-red-center: #8C1212;

  --shadow-luxury: 0 15px 45px rgba(87, 77, 66, 0.5);
  --shadow-glow: 0 0 25px rgba(236, 179, 128, 0.35);
  --shadow-glow-strong: 0 0 45px rgba(236, 179, 128, 0.6);

  --font-serif-title: "Alex Brush", "Cormorant Garamond", cursive, serif;
  --font-heading: "Cinzel", "Playfair Display", serif;
  --font-arabic: "Amiri", "Cairo", serif;
  --font-body: "Cormorant Garamond", "Inter", sans-serif;

  --nav-height: 70px;
  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --border-radius-card: 20px;
  --border-radius-pill: 50px;
  --border-radius-input: 12px;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-dark-main);
  color: var(--ink-primary);
  font-family: var(--font-body);
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.preloader-active {
  overflow: hidden !important;
}

/* SQLite-first safety state. This is not part of the invitation design during
   normal operation; it appears only if the published SQLite document cannot
   be read, preventing an old browser cache from being presented as current. */
body.cms-data-unavailable {
  overflow: hidden !important;
}

.cms-data-gate {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  color: var(--ink-primary);
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.16), transparent 38%),
    rgba(8, 10, 15, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cms-data-gate[hidden] {
  display: none;
}

.cms-data-gate-card {
  width: min(100%, 35rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
  border: 1px solid rgba(245, 205, 163, 0.42);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(31, 29, 27, 0.92), rgba(12, 14, 20, 0.97));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cms-data-gate-kicker {
  margin: 0 0 0.85rem;
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.cms-data-gate h1 {
  margin: 0;
  color: var(--ink-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
}

.cms-data-gate p:not(.cms-data-gate-kicker) {
  max-width: 29rem;
  margin: 1rem auto 0;
  color: var(--ink-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

.cms-data-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.cms-data-gate-retry,
.cms-data-gate-dashboard {
  min-height: 2.8rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cms-data-gate-retry {
  border: 1px solid rgba(245, 205, 163, 0.82);
  color: #16110b;
  background: linear-gradient(135deg, #f5cda3, #d8a96f);
  box-shadow: 0 0.65rem 1.6rem rgba(212, 175, 55, 0.24);
  cursor: pointer;
}

.cms-data-gate-retry:disabled {
  cursor: progress;
  opacity: 0.68;
}

.cms-data-gate-dashboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 205, 163, 0.38);
  color: var(--gold-light);
  background: rgba(245, 205, 163, 0.06);
}

.cms-data-gate-dashboard:hover {
  color: #fff5ea;
  border-color: rgba(245, 205, 163, 0.72);
}

a {
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover {
  color: var(--gold-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.section-pad {
  padding: 5.5rem 1.5rem;
  position: relative;
  z-index: 2;
  background: transparent;  /* let fixed star layer show through */
}

.section-pad::before {
  content: "";
  position: absolute;
  inset: 0;
  /* A very subtle dark veil keeps text readable without hiding stars */
  background:
    radial-gradient(circle at 50% 30%, rgba(236, 179, 128, 0.05) 0%, transparent 68%),
    rgba(11, 14, 20, 0.45);
  pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark-main); }
::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 4px; }

/* Layout & Containers */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 1rem; }

/* Section Dividers */
.section-head { text-align: center; margin-bottom: 3.5rem; position: relative; }
.section-head .eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  display: block;
}
.section-head .h2 {
  font-family: var(--font-serif-title);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--white-pure);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.gold-line-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem auto 0;
  max-width: 240px;
}
.gold-line-divider::before, .gold-line-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}
.gold-line-divider span { color: var(--gold-primary); font-size: 0.85rem; }

/* Animation Reveals */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Global Fixed Star Field — spans entire viewport behind all sections */
.twinkling-stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;      /* sits above body colour, below every section (z-index: 2) */
  overflow: hidden;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: var(--star-color, #F5CDA3);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 0.12;
}
/* Tier 1 — small distant stars: cool / neutral palette tones */
.star.star-sm {
  width: 2px; height: 2px;
  box-shadow:
    0 0 3px var(--star-color, #C1B0A6),
    0 0 7px var(--star-glow, rgba(193, 176, 166, 0.45));
}
/* Tier 2 — medium stars: warm cream-gold palette tones */
.star.star-md {
  width: 3px; height: 3px;
  box-shadow:
    0 0 5px var(--star-color, #F5CDA3),
    0 0 12px var(--star-glow, rgba(245, 205, 163, 0.6)),
    0 0 20px var(--star-halo, rgba(236, 179, 128, 0.25));
}
/* Tier 3 — large close stars: richest sunset-gold tones */
.star.star-lg {
  width: 4px; height: 4px;
  box-shadow:
    0 0 6px var(--star-color, #ECB380),
    0 0 16px var(--star-glow, rgba(236, 179, 128, 0.85)),
    0 0 28px var(--star-halo, rgba(186, 146, 112, 0.5)),
    0 0 42px var(--star-outer, rgba(245, 205, 163, 0.2));
}

/* Atmospheric Fog Glow */
.atmospheric-fog {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 60%;
  height: 40%;
  background: rgba(201, 163, 58, 0.06);
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
  animation: fogPulse 8s ease-in-out infinite alternate;
}
@keyframes fogPulse {
  0% { transform: scale(1) translateY(0); opacity: 0.2; }
  100% { transform: scale(1.2) translateY(-20px); opacity: 0.5; }
}

/* ==========================================================================
   1. CINEMATIC PRELOADER
   ========================================================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--bg-dark-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s;
}
#preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: brightness(0.6); }
.preloader-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(11,14,20,0.95) 100%); }
/* Language Selector in Preloader */
.preloader-lang-container {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 20;
}
html[dir="rtl"] .preloader-lang-container {
  right: auto;
  left: 1.5rem;
}

.preloader-content { position: relative; z-index: 10; text-align: center; color: #F5CDA3; padding: 2rem; max-width: 500px; width: 100%; }


/* ==========================================================================
   SHARED MONOGRAM COMPONENT — applies identically to every instance
   ========================================================================== */

/* Circle container — shared by .preloader-monogram and .footer-monogram */
.preloader-monogram,
.footer-monogram {
  border-radius: 50%;
  border: 1.5px solid var(--gold-primary);
  display: grid;
  place-items: center;           /* geometric center as anchor point */
  box-sizing: border-box;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 52%,           /* slightly below center to warm the base */
    rgba(245,205,163,0.08) 0%,
    transparent 65%
  );
  box-shadow: var(--shadow-glow);
  animation: pulseGlow 3s infinite alternate;
}

/* Preloader circle — 106 px */
.preloader-monogram {
  width: 106px;
  height: 106px;
  margin: 0 auto 1.5rem;
}

/* Footer circle — 82 px */
.footer-monogram {
  width: 82px;
  height: 82px;
  margin: 0 auto 1.5rem;
}

/* Outer centering layer
   Grid places this div at the geometric centre of the circle.
   A controlled upward shift compensates for Alex Brush’s tall
   ascender — the ascender pulls the pair’s visual mass downward,
   so we lift by ~4% of the circle diameter to restore optical balance. */
.monogram-crest {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: translateY(-4%);
  direction: ltr !important;
}

/* Inner flex row — baseline alignment so F and L share the
   same typographic baseline instead of each centering on
   their own bounding box height (which varies per glyph). */
.monogram-crest-inner {
  display: inline-flex;
  align-items: baseline;         /* ← key fix: shared baseline, not box-center */
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.mono-char {
  font-family: "Alex Brush", "Cormorant Garamond", cursive, serif !important;
  font-size: 2.65rem;            /* ~2.5× the circle radius gives ideal fill */
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  text-shadow:
    0 0 10px rgba(245, 205, 163, 0.72),
    0 0 22px rgba(236, 179, 128, 0.48),
    0 0 40px rgba(186, 146, 112, 0.22);
  position: relative;
  z-index: 1;
}

/* F — draws L gently inward */
.mono-left {
  margin-right: -0.07em;
}

/* L — draws F gently inward; same baseline, no vertical offset */
.mono-right {
  margin-left: -0.07em;
}

/* & — superscript-style connector, sits above the baseline */
.mono-amp {
  font-family: "Cinzel", "Playfair Display", serif !important;
  font-size: 0.25em;
  color: var(--gold-primary);
  opacity: 0.68;
  z-index: 2;
  margin: 0 0.10em;
  display: inline-block;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(236, 179, 128, 0.55);
  position: relative;
  /* Raise the & to sit between the visual cap-height midpoints */
  bottom: 0.38em;
}

/* Footer letters — proportionally smaller for the 82 px ring */
.footer-monogram .mono-char {
  font-size: 2.04rem;            /* 82/106 × 2.65 ≈ 2.05 */
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 15px rgba(236,179,128,0.22), 0 0 0 1.5px rgba(245,205,163,0.28); transform: scale(1);    }
  100% { box-shadow: 0 0 38px rgba(236,179,128,0.52), 0 0 0 2.5px rgba(245,205,163,0.52); transform: scale(1.04); }
}
.preloader-title {
  font-family: var(--font-serif-title);
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.preloader-subtitle {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 205, 163, 0.65);
  margin-bottom: 0;         /* gap now lives on the loading-group below */
}

/* Loading group — pushed far from the title so names stay primary focal point */
.preloader-loading-group {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Hair-thin gold thread progress indicator */
.preloader-progress-bar {
  width: 160px;
  max-width: 75%;
  height: 2px;
  background: rgba(245, 205, 163, 0.12);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.preloader-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--color-golden-brown) 0%,
    var(--color-cream-gold, #F5CDA3) 45%,
    rgba(245, 205, 163,0.9) 60%,
    var(--color-cream-gold, #F5CDA3) 75%,
    var(--color-golden-brown) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.18s ease-out;
  position: relative;
  overflow: hidden;
}
.preloader-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Soft pearl shimmer — not harsh white */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245, 205, 163, 0.55) 50%,
    transparent 100%);
  animation: shimmerSweep 2.2s infinite linear;
}
@keyframes shimmerSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Countdown caption — italic editorial style, 18% larger than previous */
.preloader-countdown-hint {
  font-family: var(--font-body) !important;   /* Cormorant Garamond */
  font-style: italic;
  font-weight: 500 !important;
  font-size: 0.97rem !important;              /* +18% from 0.82rem */
  letter-spacing: 0.06em !important;
  color: rgba(245, 205, 163, 0.82) !important; /* raised from 0.65 for legibility */
  margin-top: 1.1rem !important;
  margin-bottom: 1.6rem !important;
  text-transform: none !important;
  text-shadow: 0 0 12px rgba(236, 179, 128, 0.22) !important; /* whisper glow only */
  opacity: 1 !important;
  line-height: 1.4;
}

/* Ghost / outline button — invitation-level, not dominant */
.btn-open-invite {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(245, 205, 163, 0.45);
  padding: 0.75rem 2.2rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}
.btn-open-invite:hover {
  background: rgba(245, 205, 163, 0.1);
  border-color: rgba(245, 205, 163, 0.75);
  color: #F5CDA3;
  box-shadow: 0 0 20px rgba(236, 179, 128, 0.3);
  transform: translateY(-2px);
}

#preloaderWhiteFade { position: absolute; inset: 0; background: #F5CDA3; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 20; }
#preloaderWhiteFade.active { opacity: 1; }

/* ==========================================================================
   2. HERO SECTION & UNIFIED TOP GLASSMORPHISM HEADER OVERLAY
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  z-index: 100;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

.header-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  pointer-events: none;
}

.header-left-controls,
.header-right-controls,
.header-brand-logo {
  pointer-events: auto;
}

.header-left-controls,
.header-right-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Shared Symmetrical Compact Glassmorphism Controls */
.header-brand-logo,
.lang-dropdown-btn,
.music-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 205, 163, 0.3);
  border-radius: 20px;
  padding: 0 0.95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1.2px rgba(245, 205, 163, 0.35);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  color: var(--gold-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
}

.header-brand-logo:hover,
.lang-dropdown-btn:hover,
.music-btn:hover,
.header-brand-logo.is-touch-pointer-active,
.music-btn.is-touch-pointer-active {
  background: rgba(40, 32, 26, 0.65);
  border-color: rgba(245, 205, 163, 0.65);
  box-shadow: 0 0 15px rgba(236, 179, 128, 0.35), inset 0 1px 2px rgba(245, 205, 163, 0.4);
  transform: scale(1.03);
}

.header-monogram-crest {
  font-family: var(--font-serif-title);
  font-size: 1.25rem;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(236, 179, 128, 0.45);
}

.hero {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-dark-main);
  color: #F5CDA3;
  text-align: center;
  padding: 2.25rem 1.5rem 2rem;
  margin: 0;
  box-sizing: border-box;
}

.hero-video-container {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hero-video-container video {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-video-position-desktop, center center);
  filter: brightness(0.95);
  border: none;
  outline: none;
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The supplied film remains the first-view background at every breakpoint.
   The CMS only changes its focal point; it does not alter the Hero layout. */
@media (max-width: 1024px) {
  .hero-video-container video {
    object-position: var(--hero-video-position-tablet, var(--hero-video-position-desktop, center center));
  }
}
@media (max-width: 768px) {
  .hero-video-container video {
    object-position: var(--hero-video-position-mobile, var(--hero-video-position-tablet, var(--hero-video-position-desktop, center center)));
  }
}
@media (max-width: 450px) {
  .hero-video-container video {
    object-position: var(--hero-video-position-mobile, var(--hero-video-position-tablet, var(--hero-video-position-desktop, center center)));
    width: 120%;
    height: 130%;
    top: -150px;
  }


}

/* Retained for any <img> fallback inside .hero-video-container */
.hero-video-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.6) contrast(1.05);
}

/* Subtle uniform 40% dark overlay for optimal text readability without top/bottom bar artifacts */
.hero-overlay {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 14, 20, 0.40);
  z-index: 2;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 5; max-width: 700px; margin: 0 auto; width: 100%; }
.hero-eyebrow { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: #ECB380; margin-bottom: 1rem; opacity: 1; }
.hero-names { font-family: var(--font-serif-title); font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1; color: #FFFFFF; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(236, 179, 128, 0.25); margin: 1rem 0; }
html[lang="ar"] .hero-names { color: #FFFFFF; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(236, 179, 128, 0.25); }
.hero-names .amp { font-family: var(--font-heading); font-size: 0.4em; color: #ECB380; display: inline-block; margin: 0 0.2em; vertical-align: middle; }
.hero-invite { font-family: var(--font-body); font-size: 1.25rem; font-style: italic; color: #F5CDA3; opacity: 0.88; margin-bottom: 1.5rem; }
.hero-date { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-family: var(--font-heading); color: #DBBDA5; border-top: 1px solid rgba(186, 146, 112, 0.35); border-bottom: 1px solid rgba(186, 146, 112, 0.35); padding: 0.85rem 2rem; margin: 1.5rem 0; justify-content: center; text-shadow: 0 1px 8px rgba(186, 146, 112, 0.10); }
.hero-date-weekday { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.28em; color: #F5CDA3; text-transform: uppercase; text-shadow: 0 1px 8px rgba(186, 146, 112, 0.10); }
html[lang="ar"] .hero-date-weekday { font-family: 'Amiri', serif; letter-spacing: 0; color: #F5CDA3; }
.hero-date-main { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 1.15rem; letter-spacing: 0.18em; font-weight: 500; font-family: var(--font-heading); color: #DBBDA5; }
.hero-date-main span { color: #DBBDA5; }
.hero-date-main .sep { color: #BA9270 !important; opacity: 0.7; }
.hero-date-time { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; letter-spacing: 0.15em; color: #ECB380; opacity: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); }
html[lang="ar"] .hero-date-time { color: #ECB380; opacity: 1; font-size: 1.05rem; font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); }
.hero-tagline { font-family: var(--font-body); font-size: 1rem; color: #F5CDA3; opacity: 0.9; margin-top: 0.75rem; }
html[lang="ar"] .hero-tagline { color: #F5CDA3; opacity: 0.9; }

.hero-content .gold-line-divider::before,
.hero-content .gold-line-divider::after {
  background: linear-gradient(90deg, transparent, #BA9270, transparent);
}
.hero-content .gold-line-divider span {
  color: #BA9270;
}

.scroll-cue { 
  position: relative;
  margin-top: 3rem; 
  display: inline-flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.45rem; 
  color: #DBBDA5; 
  font-family: var(--font-heading);
  font-size: 0.7rem; 
  letter-spacing: 0.22em; 
  text-transform: uppercase; 
  opacity: 0.92; 
  text-decoration: none; 
  cursor: pointer; 
  padding: 0.7rem 1.4rem; 
  border-radius: 30px; 
  background: linear-gradient(135deg, rgba(245, 205, 163, 0.08) 0%, rgba(245, 205, 163, 0.02) 50%, rgba(8, 12, 20, 0.15) 100%); 
  border: 1px solid rgba(245, 205, 163, 0.28); 
  backdrop-filter: blur(18px) saturate(200%) brightness(1.05); 
  -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.05); 
  box-shadow: inset 0 1px 1px rgba(245, 205, 163, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 12px rgba(236, 179, 128, 0.08); 
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  touch-action: manipulation;
  user-select: none;
  z-index: 10;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Glass reflection shine pass */
.scroll-cue::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(245, 205, 163, 0.15) 50%, transparent 55%);
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.scroll-cue:hover::after {
  transform: translateX(100%) rotate(25deg);
}

html[lang="ar"] .scroll-cue {
  letter-spacing: 0.08em;
  color: #DBBDA5;
}

.scroll-cue-text {
  transition: color 0.3s ease;
}

/* Arrow Only Animation (Duration: 2.0s, TranslateY: 0 -> 5px -> 0, Opacity: 1 -> 0.5 -> 1) */
.scroll-cue-arrow { 
  stroke: #ECB380;
  animation: cinematicArrowPulse 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  will-change: transform, opacity;
}

@keyframes cinematicArrowPulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.5;
  }
}

/* Synchronized Vertical Golden Line Animation (ScaleY: 0.6 -> 1.1 -> 0.6) */
.scroll-cue-indicator-line {
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 1.5px;
  height: 14px;
  background: linear-gradient(to bottom, #ECB380 0%, rgba(245, 205, 163, 0) 100%);
  transform-origin: top center;
  animation: cinematicLinePulse 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes cinematicLinePulse {
  0%, 100% {
    transform: translateX(-50%) scaleY(0.6);
    opacity: 0.3;
  }
  50% {
    transform: translateX(-50%) scaleY(1.1);
    opacity: 0.75;
  }
}

.scroll-cue:hover,
.scroll-cue:focus-visible { 
  opacity: 1; 
  color: #F5CDA3; 
  background: linear-gradient(135deg, rgba(245, 205, 163, 0.12) 0%, rgba(245, 205, 163, 0.04) 50%, rgba(8, 12, 20, 0.18) 100%); 
  border-color: rgba(245, 205, 163, 0.55); 
  transform: translateY(-2px); 
  box-shadow: inset 0 1px 1px rgba(245, 205, 163, 0.45), 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(236, 179, 128, 0.25); 
  outline: none;
}

.scroll-cue:hover .scroll-cue-arrow {
  animation-duration: 1.4s;
}

.scroll-cue:hover .scroll-cue-indicator-line {
  animation-duration: 1.4s;
}

.scroll-cue:active,
.scroll-cue.is-clicked { 
  transform: translateY(0) scale(0.98); 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
}

.scroll-cue.is-clicked .scroll-cue-indicator-line {
  transform: translateX(-50%) scaleY(2.6);
  opacity: 1;
}

/* Scrolled out state (fades out past Hero, reappears when returning to top) */
.scroll-cue.is-scrolled-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

/* Cinematic Storytelling Entrance Sequence for Hero Section */
.hero-content .hero-eyebrow,
.hero-content .gold-line-divider,
.hero-content .hero-names,
.hero-content .hero-invite,
.hero-content .hero-date,
.hero-content .hero-tagline,
.hero-content .scroll-cue {
  opacity: 0;
}

body:not(.preloader-active) .hero-content .hero-eyebrow,
.hero-content.revealed .hero-eyebrow {
  animation: heroFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.25s;
}

body:not(.preloader-active) .hero-content .gold-line-divider,
.hero-content.revealed .gold-line-divider {
  animation: heroExpandLine 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
}

body:not(.preloader-active) .hero-content .hero-names,
.hero-content.revealed .hero-names {
  animation: heroRevealNames 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.95s;
}

body:not(.preloader-active) .hero-content .hero-invite,
.hero-content.revealed .hero-invite {
  animation: heroFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.4s;
}

body:not(.preloader-active) .hero-content .hero-date,
.hero-content.revealed .hero-date {
  animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.8s;
}

body:not(.preloader-active) .hero-content .hero-tagline,
.hero-content.revealed .hero-tagline {
  animation: heroFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.2s;
}

body:not(.preloader-active) .hero-content .scroll-cue,
.hero-content.revealed .scroll-cue {
  animation: heroCueReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.6s;
}

@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes heroExpandLine {
  0% { opacity: 0; transform: scaleX(0); }
  50% { opacity: 0.5; }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes heroRevealNames {
  0% { opacity: 0; transform: translateY(32px) scale(0.94); filter: blur(12px); text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  60% { opacity: 0.9; filter: blur(2px); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 25px rgba(236, 179, 128, 0.25); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(236, 179, 128, 0.25); }
}

@keyframes heroCueReveal {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 0.8; transform: translateY(0); }
}

/* ==========================================================================
   3. CAPTURE MOMENTS & PHOTOBOOTH SECTION
   ========================================================================== */
.capture-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--white-pure); letter-spacing: 0.25em; text-transform: uppercase; text-shadow: 0 0 20px rgba(245, 205, 163, 0.3), 0 0 40px rgba(201, 163, 58, 0.4); }
.capture-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 650px; margin: 2rem auto; }
.capture-card { position: relative; background: var(--bg-dark-card); border: 1px solid var(--gold-primary); border-radius: var(--border-radius-card); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-luxury); transform: scale(0.95); opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease, border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.capture-card.visible { transform: scale(1); opacity: 1; }
.capture-card:hover,
.capture-card.is-touch-pointer-active { border-color: var(--gold-light); box-shadow: var(--shadow-glow-strong); }
.capture-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.capture-card:hover img,
.capture-card.is-touch-pointer-active img { transform: scale(1.08); }
.capture-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 14, 20, 0.9) 0%, transparent 65%); display: flex; align-items: flex-end; padding: 1.25rem; color: var(--white-pure); font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 0.1em; }

.counters-row { display: flex; align-items: center; justify-content: center; gap: 2rem; margin: 2.5rem 0; flex-wrap: wrap; }
.counter-box { background: var(--bg-dark-glass); backdrop-filter: blur(20px); border: 1px solid var(--gold-border); border-radius: var(--border-radius-card); padding: 1.5rem 1rem 1.2rem; text-align: center; box-shadow: var(--shadow-luxury); min-width: 150px; flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; }
.counter-icon-glass { width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 50%; border: 1px solid var(--gold-border); background: rgba(245, 205, 163, 0.02); display: flex; align-items: center; justify-content: center; color: var(--gold-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 0 10px rgba(201,163,58,0.1); }
.counter-title { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; }
.counter-val { font-family: sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--gold-primary); line-height: 1; }

.btn-gold-trigger { width: 72px; height: 72px; border-radius: 50%; background: var(--gold-gradient); border: none; color: #0b0e14; display: flex; align-items: center; justify-content: center; margin: 0 auto; cursor: pointer; box-shadow: 0 10px 30px rgba(201, 163, 58, 0.5), inset 0 2px 4px rgba(245, 205, 163, 0.5); animation: goldPulse 2s infinite ease-in-out; transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); outline: none; }
.btn-gold-trigger:active { transform: scale(0.92); }
@keyframes goldPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 163, 58, 0.7); } 70% { transform: scale(1.08); box-shadow: 0 0 0 22px rgba(201, 163, 58, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 163, 58, 0); } }

/* Photobooth Fullscreen Modal */
.photobooth-fullscreen-modal { position: fixed; inset: 0; z-index: 100000; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.photobooth-fullscreen-modal.active { opacity: 1; visibility: visible; }
.camera-scanner-view { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--white-pure); padding: 1rem; }
.scanner-circle-container { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; max-width: 80vw; max-height: 80vw; }
.scanner-inner-circle { width: 140px; height: 140px; border-radius: 50%; border: 2px solid var(--gold-primary); box-shadow: 0 0 30px rgba(201, 163, 58, 0.5); transform: scale(0.8); animation: scannerScale 1.5s ease-out forwards; }
@keyframes scannerScale { to { transform: scale(1); } }
.scanner-outer-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(245, 205, 163, 0.8); animation: expandRing 2s infinite ease-out; }
@keyframes expandRing { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.initializing-text { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light); animation: textFade 1.5s infinite alternate; }
@keyframes textFade { from { opacity: 0.4; } to { opacity: 1; } }

.live-camera-view { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 3rem 1.5rem 2.5rem; background: #000000; }
.live-camera-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-dark-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); pointer-events: none; }
.camera-overlay-header { position: relative; z-index: 10; text-align: center; color: #F5CDA3; text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8); filter: blur(4px); opacity: 0; animation: blurReveal 1.2s ease-out forwards 0.5s; }
@keyframes blurReveal { to { filter: blur(0); opacity: 1; } }
.camera-couple-names { font-family: var(--font-serif-title); font-size: clamp(2.5rem, 8vw, 4.5rem); color: var(--gold-light); margin-bottom: 0.2rem; }
.camera-date-sub { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white-pure); }

.camera-switch-control {
  position: absolute;
  z-index: 11;
  inset-inline-start: clamp(1rem, 4vw, 2.25rem);
  top: clamp(6.75rem, 17vh, 8.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.camera-switch-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(245, 205, 163, 0.16), rgba(201, 163, 58, 0.08)), rgba(8, 11, 16, 0.48);
  border: 1px solid rgba(245, 205, 163, 0.45);
  border-radius: var(--border-radius-pill);
  box-shadow: inset 0 1px 1px rgba(255, 237, 215, 0.32), 0 8px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.camera-switch-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.58));
}

.camera-switch-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(245, 205, 163, 0.24), rgba(201, 163, 58, 0.13)), rgba(8, 11, 16, 0.52);
  border-color: rgba(245, 205, 163, 0.68);
  box-shadow: inset 0 1px 1px rgba(255, 237, 215, 0.42), 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 15px rgba(201, 163, 58, 0.16);
}

.camera-switch-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.camera-switch-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.camera-switch-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.camera-switch-status {
  max-width: min(65vw, 240px);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-heading);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
}

.capture-btn-outer { position: relative; z-index: 10; width: 80px; height: 80px; border-radius: 50%; background: transparent; border: 4px solid var(--gold-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 25px rgba(201, 163, 58, 0.5); animation: snapPulse 1.2s infinite ease-in-out; outline: none; }
.capture-btn-inner { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-gradient); box-shadow: inset 0 2px 4px rgba(245, 205, 163, 0.6); }
@keyframes snapPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.confirmation-view { position: absolute; inset: 0; z-index: 20; background: #000000; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
.captured-photo-frame { position: relative; max-width: 90vw; max-height: 60vh; border-radius: var(--border-radius-card); overflow: hidden; border: 2px solid var(--gold-primary); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), var(--shadow-glow); margin-bottom: 2rem; }
.captured-photo-frame img { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.confirmation-actions-row { display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; max-width: 400px; transform: translateY(40px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.confirmation-view.active .confirmation-actions-row { transform: translateY(0); opacity: 1; }
.btn-retake { flex: 1; background: #555558; color: #F5CDA3; border: none; padding: 1rem; border-radius: var(--border-radius-pill); font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-retake:hover { background: #666; }
.btn-save-gold { flex: 1; background: var(--gold-gradient); color: #0b0e14; border: none; padding: 1rem; border-radius: var(--border-radius-pill); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 25px rgba(201, 163, 58, 0.4); transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-save-gold:hover { transform: translateY(-2px); }

/* Top Navigation Header Music Control Button */
.music-btn {
  background: rgba(26, 22, 20, 0.6);
  border: 1px solid rgba(236, 179, 128, 0.3);
  padding: 0.45rem 0.85rem;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.music-btn:hover,
.music-btn.is-touch-pointer-active {
  background: rgba(236, 179, 128, 0.15);
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(236, 179, 128, 0.3);
}
.music-btn:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}
.music-btn-label { font-family: var(--font-heading); font-size: 0.72rem; color: var(--gold-primary); letter-spacing: 0.15em; line-height: 1; }
.vinyl-player-widget { display: flex; align-items: center; gap: 0.4rem; }
.vinyl-disc-container { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.vinyl-disc { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #2a2622 20%, #111 21%, #111 40%, #2a2622 41%, #111 70%); border: 1.5px solid var(--gold-primary); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; }
.vinyl-disc::after { content: ""; width: 6px; height: 6px; background: var(--gold-gradient); border-radius: 50%; }
.music-btn.playing .vinyl-disc { animation: rotateVinyl 4s linear infinite; }
@keyframes rotateVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tone-arm { position: absolute; top: -3px; right: -2px; width: 10px; height: 15px; border-right: 1.5px solid var(--gold-light); border-top: 1.5px solid var(--gold-light); transform-origin: top right; transform: rotate(-35deg); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.music-btn.playing .tone-arm { transform: rotate(0deg); }

/* Skeuomorphic Music Modal - True Liquid Glassmorphism (visionOS Standard) */
.skeuo-music-card {
  background: linear-gradient(135deg, rgba(245, 205, 163, 0.18) 0%, rgba(245, 205, 163, 0.04) 25%, rgba(245, 205, 163, 0.01) 60%, rgba(245, 205, 163, 0.09) 100%), rgba(8, 12, 20, 0.06) !important;
  backdrop-filter: blur(40px) saturate(240%) brightness(1.08) contrast(1.1) !important;
  -webkit-backdrop-filter: blur(40px) saturate(240%) brightness(1.08) contrast(1.1) !important;
  border: 1px solid rgba(245, 205, 163, 0.38) !important;
  border-radius: 28px;
  width: 100%;
  max-width: min(380px, 92vw);
  padding: 2.2rem 2rem 2.5rem;
  box-shadow: 0 45px 110px rgba(0, 0, 0, 0.7), inset 0 2.5px 3px rgba(245, 205, 163, 0.65), inset 0 -1.5px 2px rgba(245, 205, 163, 0.25), inset 0 0 50px rgba(245, 205, 163, 0.06), 0 0 45px rgba(201, 163, 58, 0.25) !important;
  position: relative;
  color: var(--white-pure);
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.skeuo-music-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.skeuo-music-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: 0.35em; color: var(--gold-light); margin: 0 auto; text-shadow: 0 0 10px rgba(237, 211, 130, 0.4); }

.skeuo-close-btn {
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(245, 205, 163, 0.06);
  border: 1px solid rgba(245, 205, 163, 0.15);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(245, 205, 163, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  z-index: 10;
}

.skeuo-close-btn::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  border-radius: 50%;
}

.skeuo-close-btn:hover {
  background: var(--gold-gradient);
  color: #0b0e14;
  border-color: var(--gold-primary);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(201, 163, 58, 0.4);
}
.skeuo-close-btn:active { transform: scale(0.92); }

.skeuo-vinyl-assembly { position: relative; width: 220px; height: 220px; margin: 0 auto 2.5rem; display: flex; align-items: center; justify-content: center; max-width: 70vw; max-height: 70vw; }
.skeuo-vinyl-shadow { position: absolute; bottom: -10px; width: 200px; height: 30px; background: rgba(0, 0, 0, 0.35); border-radius: 50%; filter: blur(14px); z-index: 1; }
.skeuo-vinyl-disc { position: relative; z-index: 2; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, var(--gold-dark) 0%, var(--gold-dark) 15%, #111113 16%, #252528 17%, #18181a 24%, #222225 32%, #171719 40%, #232326 48%, #161618 60%, #1f1f21 72%, #121214 100%); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 8px 25px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); max-width: 65vw; max-height: 65vw; }
.skeuo-vinyl-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0, transparent 2px, rgba(245, 205, 163, 0.03) 3px, transparent 4px); pointer-events: none; }
.skeuo-vinyl-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 30% 30%, rgba(245, 205, 163, 0.18) 0%, transparent 60%); pointer-events: none; }
.skeuo-vinyl-disc.spinning { animation: skeuoRotateVinyl 4.5s linear infinite; }
@keyframes skeuoRotateVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.skeuo-vinyl-label { position: relative; z-index: 3; width: 65px; height: 65px; border-radius: 50%; background: radial-gradient(circle, #F5CDA3 0%, var(--gold-primary) 70%, var(--gold-dark) 100%); border: 3px solid #1a1a1c; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 5px rgba(245, 205, 163, 0.4), 0 0 15px rgba(236, 179, 128, 0.4); }
.skeuo-vinyl-pin { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #F5CDA3 0%, #cccccc 40%, #777777 100%); border: 1px solid #444; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.skeuo-tonearm { position: absolute; top: -10px; right: 5px; z-index: 5; width: 70px; height: 130px; transform-origin: 55px 15px; transform: rotate(-28deg); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(-3px 5px 6px rgba(0,0,0,0.3)); }
.skeuo-tonearm.on-record { transform: rotate(14deg); }
.skeuo-tonearm-pivot { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #F5CDA3 0%, #cccccc 50%, #888888 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.3); }
.skeuo-tonearm-rod { position: absolute; top: 15px; right: 13px; width: 4px; height: 90px; background: linear-gradient(90deg, #e6e6e6 0%, #aaaaaa 50%, #F5CDA3 100%); border-radius: 2px; }
.skeuo-tonearm-head { position: absolute; bottom: 20px; right: 6px; width: 16px; height: 22px; background: #2a2a2d; border-radius: 3px; transform: rotate(15deg); }
.skeuo-tonearm-needle { position: absolute; bottom: -4px; left: 6px; width: 3px; height: 8px; background: var(--music-gold); }

.skeuo-play-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 35%, #F5CDA3 0%, var(--music-gold) 65%, var(--music-gold-dark) 100%);
  color: #0b0e14;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(201, 163, 58, 0.5), inset 0 2px 4px rgba(245, 205, 163, 0.6);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.skeuo-play-btn:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(201, 163, 58, 0.65), inset 0 2px 5px rgba(245, 205, 163, 0.8); }
.skeuo-play-btn:active { transform: scale(0.94); box-shadow: 0 5px 12px rgba(201, 163, 58, 0.3); }
.skeuo-play-btn svg { width: 24px; height: 24px; fill: currentColor; }

.skeuo-song-info { margin-bottom: 1.75rem; }
.skeuo-song-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; color: var(--white-pure); text-transform: uppercase; margin-bottom: 0.25rem; }
.skeuo-song-status-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.skeuo-song-status { font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); opacity: 0.85; }
.skeuo-equalizer { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.skeuo-eq-bar { width: 3px; background: var(--music-gold); border-radius: 3px; height: 20%; transition: height 0.12s cubic-bezier(0.22, 1, 0.36, 1); }
.skeuo-equalizer.active .skeuo-eq-bar:nth-child(1) { animation: skeuoEq 1.1s infinite ease-in-out; }
.skeuo-equalizer.active .skeuo-eq-bar:nth-child(2) { animation: skeuoEq 0.7s infinite ease-in-out 0.2s; }
.skeuo-equalizer.active .skeuo-eq-bar:nth-child(3) { animation: skeuoEq 1.3s infinite ease-in-out 0.4s; }
.skeuo-equalizer.active .skeuo-eq-bar:nth-child(4) { animation: skeuoEq 0.9s infinite ease-in-out 0.1s; }
.skeuo-equalizer.active .skeuo-eq-bar:nth-child(5) { animation: skeuoEq 1.4s infinite ease-in-out 0.3s; }
@keyframes skeuoEq { 0%, 100% { height: 15%; } 50% { height: 100%; } }

.skeuo-progress-container { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.75rem; }
.skeuo-time {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.05em;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(237, 211, 130, 0.45);
}
.skeuo-progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(245, 205, 163, 0.12);
  border: 1px solid rgba(245, 205, 163, 0.08);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  z-index: 10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background 0.12s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.skeuo-progress-bar:hover { background: rgba(245, 205, 163, 0.18); border-color: rgba(201, 163, 58, 0.3); }
.skeuo-progress-bar::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: 0; right: 0; }
.skeuo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ECB380 0%, #F5CDA3 100%);
  border-radius: 6px;
  width: 0%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(201, 163, 58, 0.5);
}
.skeuo-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 35%, #F5CDA3 0%, #F5CDA3 50%, #ECB380 100%);
  border: 2px solid #0b0e14;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(201, 163, 58, 0.6);
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: none;
}
.skeuo-progress-bar:hover .skeuo-progress-thumb { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7), 0 0 18px rgba(237, 211, 130, 0.9); }

.skeuo-volume-row { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-top: 1rem; }
.skeuo-mute-btn {
  background: rgba(245, 205, 163, 0.06);
  border: 1px solid rgba(201, 163, 58, 0.35);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  touch-action: manipulation;
}

.skeuo-mute-btn:hover {
  background: rgba(201, 163, 58, 0.2);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(201, 163, 58, 0.35);
}
.skeuo-mute-btn:active { transform: scale(0.92); }

.skeuo-mute-btn.muted {
  color: #d94b4b;
  border-color: rgba(217, 75, 75, 0.4);
  background: rgba(217, 75, 75, 0.12);
}

.skeuo-mute-btn.muted:hover {
  background: rgba(217, 75, 75, 0.25);
  color: #ff5c5c;
  border-color: #ff5c5c;
}

.skeuo-mute-btn svg {
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.skeuo-volume-icon { color: inherit; }
.skeuo-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 8px;
  background: rgba(245, 205, 163, 0.12);
  border: 1px solid rgba(245, 205, 163, 0.08);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background 0.12s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.skeuo-volume-slider:hover { background: rgba(245, 205, 163, 0.18); border-color: rgba(201, 163, 58, 0.3); }

.skeuo-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F5CDA3 0%, #F5CDA3 50%, #ECB380 100%);
  border: 2px solid #0b0e14;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 163, 58, 0.5);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

.skeuo-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 14px rgba(237, 211, 130, 0.8);
}

.skeuo-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F5CDA3 0%, #F5CDA3 50%, #ECB380 100%);
  border: 2px solid #0b0e14;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 163, 58, 0.5);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   4. COUNTDOWN SECTION & GRID
   ========================================================================== */
.countdown-section {
  position: relative;
  z-index: 2;
  background: transparent;
}

.countdown-box {
  background: var(--bg-dark-card) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 2.75rem 2rem !important;
  box-shadow: var(--shadow-luxury) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.countdown-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  max-width: 680px !important;
  margin: 0 auto 3rem !important;
}

.cd-unit {
  background: rgba(11, 14, 20, 0.78) !important;
  border: 1px solid rgba(245, 205, 163, 0.28) !important;
  border-radius: 16px !important;
  padding: 1.25rem 0.5rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: inset 0 1px 1.5px rgba(245, 205, 163, 0.25), 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.cd-unit:hover {
  border-color: rgba(245, 205, 163, 0.6) !important;
  box-shadow: 0 10px 30px rgba(236, 179, 128, 0.35), inset 0 1px 2px rgba(245, 205, 163, 0.5) !important;
  transform: translateY(-2px) !important;
}
.cd-unit.is-touch-pointer-active {
  border-color: rgba(245, 205, 163, 0.6) !important;
  box-shadow: 0 10px 30px rgba(236, 179, 128, 0.35), inset 0 1px 2px rgba(245, 205, 163, 0.5) !important;
  transform: translateY(-2px) !important;
}

.cd-num {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: var(--gold-primary) !important;
  line-height: 1 !important;
  margin-bottom: 0.35rem !important;
  text-shadow: 0 0 15px rgba(236, 179, 128, 0.35) !important;
}

.cd-label {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  opacity: 0.8 !important;
  line-height: 1 !important;
  margin-top: 0.2rem !important;
}

.calendar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
}

.btn-gold-outline {
  background: rgba(245, 205, 163, 0.05) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(245, 205, 163, 0.35) !important;
  height: 48px !important;
  padding: 0 1.6rem !important;
  border-radius: var(--border-radius-pill) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.btn-gold-outline:hover {
  background: var(--gold-primary) !important;
  color: #0b0e14 !important;
  border-color: var(--gold-primary) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-2px) !important;
}

.btn-gold-outline.btn-saved {
  background: rgba(46, 125, 50, 0.25) !important;
  color: #a5d6a7 !important;
  border-color: #2e7d32 !important;
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.3) !important;
}

/* ==========================================================================
   5. WELCOME SECTION & CARD
   ========================================================================== */
#welcome {
  position: relative;
  z-index: 2;
  background: transparent;
}

.welcome-card {
  background: var(--bg-dark-card) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--border-radius-card) !important;
  box-shadow: var(--shadow-luxury) !important;
  padding: 3.5rem 2.5rem !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.welcome-card .section-head {
  margin-bottom: 2rem !important;
}

.welcome-text {
  font-family: var(--font-body) !important;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem) !important;
  line-height: 1.9 !important;
  color: var(--ink-secondary) !important;
  font-style: italic !important;
  max-width: 780px !important;
  margin: 0 auto 1.5rem !important;
}

.save-the-date-graphic {
  margin-top: 2.5rem !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--gold-border) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.save-the-date-graphic img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================================================
   6. AGENDA & CINEMATIC CONTINUOUS VERTICAL TIMELINE SECTION
   ========================================================================== */
#schedule { position: relative; z-index: 2; background: transparent; overflow: hidden; }

.timeline-container {
  position: relative;
  max-width: 960px;
  margin: 3rem auto 0;
  padding: 1.5rem 0;
}

/* Central Track & Glowing Progress Line */
.timeline-line-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(201, 163, 58, 0.15);
  border-radius: 3px;
  z-index: 1;
}

.timeline-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--gold-primary), var(--gold-light), #F5CDA3);
  box-shadow: 0 0 8px rgba(236,179,128, 0.4), 0 0 3px rgba(245,205,163, 0.5);
  border-radius: 3px;
  will-change: height;
}

.timeline-traveling-orb {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #F5CDA3;
  border: 2px solid var(--gold-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(245,205,163, 0.5), 0 0 16px rgba(236,179,128, 0.4);
  opacity: 0;
  z-index: 5;
  will-change: top, opacity;
}

/* Items Wrapper */
.timeline-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.timeline-item:nth-child(odd) {
  justify-content: flex-start;
  padding-right: 50%;
  box-sizing: border-box;
}

.timeline-item:nth-child(even) {
  justify-content: flex-end;
  padding-left: 50%;
  box-sizing: border-box;
}

/* Golden Center Node & Glow Pulse */
.timeline-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 22px;
  height: 22px;
  background: var(--bg-dark-card);
  border: 2px solid var(--gold-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 0.35;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-node-inner {
  width: 8px;
  height: 8px;
  background: var(--gold-primary);
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-item.node-pulse .timeline-node {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
  border-color: var(--gold-light);
  box-shadow: 0 0 12px rgba(236,179,128, 0.5), 0 0 6px rgba(245,205,163, 0.6);
  animation: nodeGlowPulse 3s infinite alternate ease-in-out;
}

.timeline-item.node-pulse .timeline-node-inner {
  opacity: 1;
  background: #F5CDA3;
}

@keyframes nodeGlowPulse {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(236,179,128, 0.4), 0 0 3px rgba(245,205,163, 0.5); }
  100% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 14px rgba(236,179,128, 0.6), 0 0 8px rgba(245,205,163, 0.7); }
}

/* Directional Card Slide & Scale Animation */
.timeline-card {
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  padding: 1.75rem 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  box-shadow: var(--shadow-luxury);
  width: 90%;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Left Cards: slide in gently from left */
.timeline-item:nth-child(odd) .timeline-card {
  transform: translateX(-40px) scale(0.95);
}

/* Right Cards: slide in gently from right */
.timeline-item:nth-child(even) .timeline-card {
  transform: translateX(40px) scale(0.95);
}

/* Card Visible State */
.timeline-item.card-visible .timeline-card {
  opacity: 1;
  transform: translateX(0) scale(1);
  border-color: var(--gold-light);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(201, 163, 58, 0.25);
}

.timeline-time-badge {
  background: var(--gold-gradient);
  color: #0b0e14;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(201, 163, 58, 0.3);
}

.timeline-info h3 { color: var(--white-pure); font-size: 1.15rem; margin-bottom: 0.4rem; }
.timeline-info p { color: var(--ink-secondary); font-size: 0.95rem; line-height: 1.7; }

/* Responsive Adjustments for Mobile Screens */
@media (max-width: 768px) {
  .timeline-line-track {
    left: 20px;
    transform: translateX(-50%);
  }

  /* .timeline-traveling-orb {
    left: 20px;
  } */
.footer{
  height: 120%;
  margin-bottom: 5rem;
}
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-left: 48px;
    padding-right: 0;
  }

  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {
    transform: translateX(30px) scale(0.95);
  }

  .timeline-item.card-visible .timeline-card {
    transform: translateX(0) scale(1);
  }

  .timeline-node {
    left: 20px;
  }

  .timeline-card {
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}

/* ==========================================================================
   7. VENUE SECTION
   ========================================================================== */
#venue { position: relative; z-index: 2; background: transparent; }

.venue-wrapper {
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-luxury);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2.5rem;
  align-items: center;
  overflow: hidden;
}

.venue-title { color: var(--white-pure); font-size: 1.8rem; margin-bottom: 0.4rem; }
.venue-location { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.15em; color: var(--gold-light); text-transform: uppercase; margin-bottom: 1rem; }
.venue-desc { color: var(--ink-secondary); margin-bottom: 1.5rem; line-height: 1.8; }
.map-buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.map-buttons .btn-primary-gold {
  /* Keep the intended 320px width in a row, but never turn it into a
     320px height after the mobile map-actions stack vertically. */
  flex: 0 1 auto;
  min-height: 3.5rem;
  text-align: center;
  white-space: normal;
}
.map-buttons .btn-primary-gold > span {
  display: block;
  inline-size: 100%;
  text-align: center;
  line-height: 1.45;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.venue-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; border: 1px solid var(--gold-border); }

.map-embed-container { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--gold-border); box-shadow: var(--shadow-luxury); background: var(--bg-dark-main); }
.map-embed-container iframe { width: 100%; height: 360px; min-height: 280px; border: none; display: block; }

/* ==========================================================================
   8. GUIDELINES SECTION
   ========================================================================== */
#guidelines { position: relative; z-index: 2; background: transparent; }

.guidelines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.guideline-card {
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-luxury);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.guideline-card:hover {
  transform: perspective(1000px) translateY(-2px) scale(1.02);
  border-color: rgba(236, 179, 128, 0.5);
  box-shadow: 0 12px 30px rgba(236, 179, 128, 0.2);
}
.guideline-card h3 { color: var(--white-pure); font-size: 1.2rem; margin-bottom: 0.75rem; }
.color-swatches { display: flex; gap: 0.6rem; margin-top: 1rem; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(245, 205, 163,0.3); }

/* ==========================================================================
   9. GALLERY & LIGHTBOX
   ========================================================================== */
#gallery { position: relative; z-index: 2; background: transparent; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.gallery-item {
  position: relative;
  background: var(--bg-dark-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
  box-shadow: var(--shadow-luxury);
}
.gallery-item { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-item:hover,
.gallery-item.is-touch-pointer-active { transform: perspective(1000px) scale(1.03) rotateX(2deg) rotateY(-2deg); border-color: rgba(236, 179, 128, 0.6); box-shadow: 0 15px 35px rgba(236, 179, 128, 0.25); z-index: 2; }
.gallery-item:hover img,
.gallery-item.is-touch-pointer-active img { transform: scale(1.08); }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 14, 20, 0.85) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 1.25rem; color: var(--white-pure); font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-item:hover .gallery-overlay,
.gallery-item.is-touch-pointer-active .gallery-overlay { opacity: 1; }

/* Smooth Fade & Scale Entrance for Newly Captured Gallery Photos */
.gallery-item.newly-added {
  animation: newPhotoFadeScale 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border-color: var(--gold-light);
}

@keyframes newPhotoFadeScale {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-15px);
    box-shadow: 0 0 0 rgba(201, 163, 58, 0);
  }
  50% {
    opacity: 0.95;
    box-shadow: 0 0 35px rgba(237, 211, 130, 0.85), 0 0 15px rgba(201, 163, 58, 0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: var(--shadow-luxury);
  }
}

/* ==========================================================================
   10. GUESTBOOK & WISHES
   ========================================================================== */
#wishes { position: relative; z-index: 2; background: transparent; }

.wishes-input-box {
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  padding: 2.5rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  box-shadow: var(--shadow-luxury);
}

.wish-card {
  background: var(--bg-dark-glass);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 1.5rem;
  width: 320px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-luxury);
}

.wish-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.avatar-circle { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-gradient); color: #0b0e14; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-heading); }
.wish-author { color: var(--white-pure); font-family: var(--font-heading); font-size: 0.95rem; }
.wish-body { color: var(--ink-secondary); font-size: 0.95rem; line-height: 1.7; font-style: italic; }
.wish-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.75rem; color: var(--gold-light); }
.like-btn { background: transparent; border: 1px solid var(--gold-border); color: var(--gold-light); padding: 0.2rem 0.6rem; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.like-btn:hover { background: rgba(201, 163, 58, 0.2); }

/* RTL wish card typography */
html[dir="rtl"] .wish-card { text-align: right; direction: rtl; }
html[dir="rtl"] .wish-body { font-style: normal; font-weight: 500; line-height: 1.9; letter-spacing: 0; }
html[dir="rtl"] .wish-author { font-size: 1rem; font-weight: 600; }

/* Marquee Scroll */
.wishes-marquee-wrapper { overflow: hidden; position: relative; width: 100%; padding: 1rem 0; }
.wishes-marquee-content { display: flex; gap: 1.5rem; width: max-content; animation: marqueeScroll 35s linear infinite; }
.wishes-marquee-content:hover { animation-play-state: paused; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
html[dir="rtl"] .wishes-marquee-content { animation: marqueeScrollRtl 35s linear infinite; }
@keyframes marqueeScrollRtl { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* ==========================================================================
   11. RSVP SECTION & MODALS
   ========================================================================== */
#rsvp { position: relative; z-index: 2; background: transparent; }

.rsvp-card {
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-luxury);
}

.form-group { margin-bottom: 1.5rem; text-align: left; }
.form-group label { display: block; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white-pure); margin-bottom: 0.5rem; }
.form-input, .form-select, .form-textarea { width: 100%; background: rgba(11, 14, 20, 0.8); border: 1px solid var(--gold-border); border-radius: var(--border-radius-input); padding: 0.9rem 1.2rem; color: var(--white-pure); font-family: var(--font-body); font-size: 1rem; outline: none; transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold-primary); box-shadow: 0 0 10px rgba(201, 163, 58, 0.3); }
.form-textarea { resize: none; overflow: hidden; transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1), height 0.12s cubic-bezier(0.22, 1, 0.36, 1); }

/* A small, in-card confirmation for a SQLite-backed personal invitation.
   It keeps the invitation visually within the existing RSVP card rather than
   adding a separate public interface or exposing private contact details. */
.rsvp-personal-invitation-notice { position: relative; z-index: 1; margin: 0 0 1.1rem; padding: 0.72rem 0.9rem; border: 1px solid rgba(245, 205, 163, 0.38); border-radius: 10px; background: linear-gradient(135deg, rgba(245, 205, 163, 0.12), rgba(201, 163, 58, 0.055)); color: var(--gold-light); font-family: var(--font-body); font-size: 0.86rem; line-height: 1.5; text-align: center; box-shadow: inset 0 1px rgba(255, 255, 255, 0.12); }
.rsvp-personal-invitation-notice[data-tone="loading"] { color: rgba(255, 245, 220, 0.78); border-color: rgba(245, 205, 163, 0.24); }
.rsvp-personal-invitation-notice[data-tone="success"] { border-color: rgba(245, 205, 163, 0.48); }
.rsvp-personal-invitation-notice[data-tone="error"] { color: #ffd4cb; border-color: rgba(240, 137, 118, 0.56); background: rgba(112, 32, 25, 0.18); }
#guestName[data-personal-invite-name="true"] { border-color: rgba(245, 205, 163, 0.52); background: rgba(245, 205, 163, 0.075); cursor: default; }

/* Premium Floating Labels */
.floating-group { position: relative; margin-bottom: 1.5rem; text-align: left; }
.floating-group .form-input, .floating-group .form-textarea, .floating-group .form-select { padding: 1.5rem 1.2rem 0.5rem; }
.floating-group .floating-label { position: absolute; top: 1.15rem; left: 1.2rem; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 205, 163, 0.5); pointer-events: none; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), font-size 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1); margin: 0; }
.floating-group .form-input:focus + .floating-label,
.floating-group .form-textarea:focus + .floating-label,
.floating-group .form-select:focus + .floating-label { transform: translateY(-0.75rem); font-size: 0.55rem; color: var(--gold-light); }
.floating-group .form-input:not(:placeholder-shown) + .floating-label,
.floating-group .form-textarea:not(:placeholder-shown) + .floating-label,
.floating-group .form-select + .floating-label { transform: translateY(-0.75rem); font-size: 0.55rem; color: var(--gold-primary); }

.radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.radio-label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-secondary); font-size: 0.95rem; cursor: pointer; }
.radio-label input { accent-color: var(--gold-primary); }

.btn-primary-gold { width: 100%; background: var(--gold-gradient); color: #0b0e14; border: none; padding: 1.1rem 2rem; border-radius: var(--border-radius-pill); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 25px rgba(201, 163, 58, 0.4); transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.12s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary-gold:hover,
.btn-primary-gold.is-touch-pointer-active { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(201, 163, 58, 0.6); }



/* Modals & Lightbox Base */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 7, 12, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 205, 163, 0.16);
  border-radius: 24px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
overflow-y: hidden;
  padding: 2.5rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), inset 0 1px 1.5px rgba(245, 205, 163, 0.25), inset 0 0 25px rgba(201, 163, 58, 0.06), 0 0 35px rgba(201, 163, 58, 0.12);
  position: relative;
  transform: translateY(40px) scale(0.95);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--white-pure);
}
.modal-backdrop.active .modal-card { transform: translateY(0) scale(1); }
.modal-close-btn { position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: none; font-size: 1.5rem; color: var(--muted); cursor: pointer; transition: color 0.12s cubic-bezier(0.22, 1, 0.36, 1); }
.modal-close-btn:hover { color: var(--gold-light); }

/* REDESIGNED CONTACT POPUP MODAL (EXCLUSIVE GROOM & BRIDE CARDS) */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .modal-backdrop.active .modal-card { height: 68vh; overflow-y: scroll;}

}

.contact-person-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 205, 163, 0.15);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(245, 205, 163, 0.2);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-person-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-glow);
}

.contact-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #0b0e14;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  box-shadow: 0 0 20px rgba(201, 163, 58, 0.4);
}

.contact-person-info .contact-name {
  color: var(--white-pure);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.2;
}

.contact-person-info .contact-role {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: block;
  margin-top: 0.2rem;
  margin-bottom: 1.5rem;
}

.contact-actions-pair {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.btn-whatsapp-action {
  background: var(--gold-gradient);
  color: #0b0e14 !important;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(201, 163, 58, 0.35);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-whatsapp-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(201, 163, 58, 0.55);
}

.btn-call-action {
  background: transparent;
  color: var(--gold-light) !important;
  border: 1px solid var(--gold-primary);
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-call-action:hover {
  background: var(--gold-primary);
  color: #0b0e14 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.lightbox-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(11, 14, 20, 0.96); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox-modal.active { opacity: 1; visibility: visible; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 85vh; }
.lightbox-content img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(245, 205, 163,0.15); color: #F5CDA3; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox-close { top: -50px; right: 0; }
.lightbox-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -60px; top: 50%; transform: translateY(-50%); }

/* Bottom Nav Bar - Pixel-Perfect Equal Width & Centered Alignment */
.bottom-nav-bar {
  position: fixed;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99990;
  width: calc(100% - 2rem);
  max-width: 560px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 205, 163, 0.15);
  border-radius: var(--border-radius-pill);
  padding: 0.25rem 0.4rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1.5px rgba(245, 205, 163, 0.2), inset 0 0 20px rgba(201, 163, 58, 0.06);
}

.bottom-nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bottom-nav-list li {
  flex: 1 1 0px;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-nav-link {
  color: #C1B0A6;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 2px 3px;
  position: relative;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bottom-nav-link svg {
  width: 18px;
  height: 18px;
  stroke: #C1B0A6;
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 1.5px;
  box-sizing: border-box;
  transition: stroke 0.15s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bottom-nav-link span {
  display: block;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #C1B0A6;
  transition: color 0.15s ease;
}

/* Hover Secondary Links */
.bottom-nav-link:hover {
  color: #F5CDA3;
}
.bottom-nav-link.is-touch-pointer-active {
  color: #F5CDA3;
}

.bottom-nav-link:hover svg {
  stroke: #F5CDA3;
}
.bottom-nav-link.is-touch-pointer-active svg {
  stroke: #F5CDA3;
}

.bottom-nav-link:hover span {
  color: #F5CDA3;
}
.bottom-nav-link.is-touch-pointer-active span {
  color: #F5CDA3;
}

/* Active Navigation State (HOME / Selected Tab) */
.bottom-nav-link.active {
  color: #F5CDA3;
  font-weight: 600;
  background: rgba(236, 179, 128, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 205, 163, 0.35);
  box-shadow: 0 3px 10px rgba(87, 77, 66, 0.35), inset 0 1px 1px rgba(245, 205, 163, 0.25);
  transform: translateY(0);
}

.bottom-nav-link.active svg {
  stroke: #F5CDA3;
  stroke-width: 1.8;
  background: rgba(236, 179, 128, 0.2);
  border-radius: 50%;
  padding: 2px;
}

.bottom-nav-link.active span {
  color: #F5CDA3;
  text-shadow: 0 1px 4px rgba(87, 77, 66, 0.5);
  transform: none;
}

/* ==========================================================================
   FEATURED CAMERA BUTTON IN BOTTOM NAV (VERTICALLY CENTERED & BRONZE GOLD)
   ========================================================================== */
.bottom-nav-link.nav-camera-featured {
  position: relative;
  height: 46px;
  margin-top: 0;
  background: linear-gradient(135deg, #897563 0%, #BA9270 100%);
  border: 1px solid rgba(236, 179, 128, 0.5);
  border-radius: 22px;
  color: #F5CDA3;
  box-shadow: 0 3px 10px rgba(87, 77, 66, 0.35), 0 0 8px rgba(236, 179, 128, 0.2), inset 0 1px 1px rgba(245, 205, 163, 0.25);
  transform: translateY(0);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background 180ms ease, border-color 180ms ease;
  animation: cameraBreathingGlow 4s ease-in-out infinite alternate;
  z-index: 2;
  overflow: hidden;
}

/* Micro Reflection Pass */
.bottom-nav-link.nav-camera-featured::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(245, 205, 163, 0.1) 50%, transparent 55%);
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.bottom-nav-link.nav-camera-featured svg {
  stroke: #F5CDA3;
  stroke-width: 1.8;
  width: 20px;
  height: 20px;
  background: rgba(87, 77, 66, 0.35);
  border: 1px solid rgba(236, 179, 128, 0.3);
  box-shadow: 0 1px 3px rgba(87, 77, 66, 0.3);
  padding: 2px;
  transition: stroke 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.bottom-nav-link.nav-camera-featured span {
  color: rgba(245, 205, 163, 0.95);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(87, 77, 66, 0.6);
}

/* Hover State (Desktop Only) */
@media (hover: hover) {
  .bottom-nav-link.nav-camera-featured:hover {
    transform: scale(1.02);
    background: linear-gradient(135deg, #BA9270 0%, #897563 100%);
    border-color: rgba(245, 205, 163, 0.6);
    box-shadow: 0 4px 14px rgba(87, 77, 66, 0.4), 0 0 12px rgba(236, 179, 128, 0.28);
  }

  .bottom-nav-link.nav-camera-featured:hover::after {
    transform: translateX(100%) rotate(25deg);
  }

  .bottom-nav-link.nav-camera-featured:hover svg {
    stroke: #F5CDA3;
    border-color: rgba(245, 205, 163, 0.5);
    background: rgba(87, 77, 66, 0.5);
    transform: scale(1.03);
  }

  .bottom-nav-link.nav-camera-featured:hover span {
    color: #F5CDA3;
    text-shadow: 0 1px 4px rgba(87, 77, 66, 0.7);
  }
}

/* The camera navigation keeps its existing desktop hover finish while a
   finger is actively holding or moving across it. */
.bottom-nav-link.nav-camera-featured.is-touch-pointer-active {
  transform: scale(1.02);
  background: linear-gradient(135deg, #BA9270 0%, #897563 100%);
  border-color: rgba(245, 205, 163, 0.6);
  box-shadow: 0 4px 14px rgba(87, 77, 66, 0.4), 0 0 12px rgba(236, 179, 128, 0.28);
}
.bottom-nav-link.nav-camera-featured.is-touch-pointer-active::after {
  transform: translateX(100%) rotate(25deg);
}
.bottom-nav-link.nav-camera-featured.is-touch-pointer-active svg {
  stroke: #F5CDA3;
  border-color: rgba(245, 205, 163, 0.5);
  background: rgba(87, 77, 66, 0.5);
  transform: scale(1.03);
}
.bottom-nav-link.nav-camera-featured.is-touch-pointer-active span {
  color: #F5CDA3;
  text-shadow: 0 1px 4px rgba(87, 77, 66, 0.7);
}

/* Tactile Press State */
.bottom-nav-link.nav-camera-featured:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(87, 77, 66, 0.35), 0 0 6px rgba(236, 179, 128, 0.15);
  transition-duration: 120ms;
}

/* Accessible Focus State */
.bottom-nav-link.nav-camera-featured:focus-visible {
  outline: 2px solid #ECB380 !important;
  outline-offset: 2px !important;
}

/* Distinct Featured Active State */
.bottom-nav-link.nav-camera-featured.active {
  background: linear-gradient(135deg, #BA9270 0%, #897563 100%);
  border-color: rgba(245, 205, 163, 0.6);
  box-shadow: 0 4px 14px rgba(87, 77, 66, 0.4), 0 0 12px rgba(236, 179, 128, 0.3);
  transform: translateY(0);
}

.bottom-nav-link.nav-camera-featured.active svg {
  stroke: #F5CDA3;
  background: rgba(87, 77, 66, 0.5);
  border-color: rgba(245, 205, 163, 0.5);
  stroke-width: 2;
}

.bottom-nav-link.nav-camera-featured.active span {
  color: #F5CDA3;
  text-shadow: 0 0 5px rgba(245, 205, 163, 0.5);
}

/* Restrained Idle Breathing Halo */
@keyframes cameraBreathingGlow {
  0% {
    box-shadow: 0 3px 10px rgba(87, 77, 66, 0.35), 0 0 6px rgba(236, 179, 128, 0.18);
  }
  100% {
    box-shadow: 0 4px 12px rgba(87, 77, 66, 0.4), 0 0 10px rgba(236, 179, 128, 0.28);
  }
}



/* Footer */
.footer { background: transparent; color: #F5CDA3; text-align: center; padding: 4rem 1.5rem 3rem; border-top: 1px solid var(--gold-border); }

.footer-names { font-family: var(--font-serif-title); font-size: 2.5rem; color: var(--gold-light); margin-bottom: 0.5rem; }
.footer-date { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.25em; color: rgba(245, 205, 163, 0.7); margin-bottom: 1.5rem; }


/* Typography Utilities */
h1, h2, h3, h4, .display-font { font-family: var(--font-heading); font-weight: 500; letter-spacing: 0.05em; }
.alex-brush { font-family: var(--font-serif-title) !important; font-weight: 400 !important; }
.arabic-font { font-family: var(--font-arabic) !important; }
.gold-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.gold-solid { color: var(--gold-primary); }
.terracotta-text { color: var(--terracotta); }
.muted-text { color: var(--muted); }
.center-text { text-align: center; }

/* ==========================================================================
   12. COMPREHENSIVE RESPONSIVE BREAKPOINTS (ALL DEVICES)
   ========================================================================== */

/* Laptop / Small Desktop (992px - 1199px) */
@media (max-width: 1199px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .section-pad { padding: 4.5rem 1.25rem; }
}

/* Tablet Landscape (769px - 991px) */
@media (max-width: 991px) {
  .guidelines-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-wrapper { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
  .venue-media img { max-height: 380px; }
  .modal-card { max-width: 90vw; padding: 2rem; }
}

/* Tablet Portrait (601px - 768px) */
@media (max-width: 768px) {
  .timeline-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-date { font-size: 1rem; padding: 0.6rem 1.5rem; gap: 1rem; }
  .countdown-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.75rem !important; }
  .cd-unit { padding: 1rem 0.3rem !important; }
  .cd-num { font-size: 2.2rem !important; }
  .bottom-nav-bar { width: calc(100% - 1.5rem); bottom: 1rem; }
}

/* Mobile Devices (481px - 600px) */
@media (max-width: 600px) {
  .section-pad { padding: 3.5rem 1rem; }
  .capture-cards-grid { grid-template-columns: 1fr; }
  .guidelines-grid { grid-template-columns: 1fr; }
  .countdown-box { padding: 2rem 1.15rem !important; }
  .countdown-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; margin-bottom: 2rem !important; }
  .cd-unit { padding: 0.75rem 0.2rem !important; border-radius: 12px !important; aspect-ratio: 1 / 1 !important; }
  .cd-num { font-size: 1.6rem !important; margin-bottom: 0.1rem !important; }
  .cd-label { font-size: 0.58rem !important; letter-spacing: 0.12em !important; }
  .calendar-actions { flex-direction: column; width: 100%; gap: 0.75rem !important; }
  .btn-gold-outline { width: 100%; justify-content: center; }
  .map-buttons { flex-direction: column; }
  .map-buttons a { width: 100%; text-align: center; }
  .map-buttons .btn-primary-gold {
    padding-inline: 1.1rem;
    letter-spacing: clamp(0.12em, 0.55vw, 0.18em);
  }
  .timeline-card { padding: 1.5rem; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
  .header-inner { padding: 0.65rem 1rem; }
  .header-brand-logo,
  .lang-dropdown-btn,
  .music-btn { height: 34px; padding: 0 0.75rem; gap: 0.4rem; }
  .header-monogram-crest { font-size: 1.1rem; }
  .music-btn-label { font-size: 0.62rem; }

  /* Fixed global controls — horizontal framing bar on tablet */
  .header-left-controls {
    top: 28px;
    padding: 0 32px;
  }
}

/* Small / Compact Mobile (<= 480px) */
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-names { font-size: 3.2rem; }
  .hero-date { font-size: 0.9rem; padding: 0.5rem 1rem; gap: 0.6rem; }
  .preloader-monogram { width: 90px; height: 90px; }
  .preloader-monogram .mono-char { font-size: 2.25rem; }  /* 90/106 × 2.65 */
  .footer-monogram { width: 74px; height: 74px; }
  .footer-monogram .mono-char { font-size: 1.85rem; }    /* 74/106 × 2.65 */
  .preloader-title { font-size: 2.4rem; }
  .skeuo-music-card { max-width: 92vw; padding: 1.8rem 1.2rem 2rem; }
  .skeuo-close-btn { top: 1.2rem; right: 1.2rem; width: 27px; height: 27px; font-size: 0.8rem; }
  .skeuo-vinyl-assembly { width: 180px; height: 180px; }
  .skeuo-vinyl-disc { width: 170px; height: 170px; }
  .skeuo-tonearm { right: 0px; height: 110px; }
  .lightbox-close { top: -45px; right: 0; }
  .lightbox-prev { left: 0; top: auto; bottom: -55px; transform: none; }
  .lightbox-next { right: 0; top: auto; bottom: -55px; transform: none; }
  .bottom-nav-bar { width: calc(100% - 1rem); bottom: 0.75rem; padding: 0.2rem 0.3rem; }
  .bottom-nav-link { height: 42px; font-size: 0.52rem; padding: 2px 1px; }
  .bottom-nav-link svg { width: 16px; height: 16px; padding: 1px; }
  .bottom-nav-link.active { transform: translateY(0); }
  .bottom-nav-link.active svg { padding: 1.5px; }
  .bottom-nav-link.nav-camera-featured { height: 42px; margin-top: 0; border-radius: 20px; padding: 2px 1px; transform: translateY(0); }
  .bottom-nav-link.nav-camera-featured svg { width: 17px; height: 17px; padding: 1.5px; }
  .bottom-nav-link.nav-camera-featured:hover { transform: scale(1.02); }

}

/* Ultra Small Devices (<= 360px) */
@media (max-width: 360px) {
  .hero-names { font-size: 2.6rem; }
  .counters-row { gap: 0.75rem; }
  .counter-box { min-width: 120px; padding: 0.8rem 1rem; }
  .counter-val { font-size: 1.8rem; }
  .preloader-monogram { width: 80px; height: 80px; }
  .preloader-monogram .mono-char { font-size: 2.0rem; }   /* 80/106 × 2.65 */
  .footer-monogram { width: 68px; height: 68px; }
  .footer-monogram .mono-char { font-size: 1.70rem; }    /* 74/106 × 2.65 */
  .bottom-nav-link { height: 40px; padding: 1px 0; }
  .bottom-nav-link.active { transform: translateY(0); }
  .bottom-nav-link span { display: none; }
  .bottom-nav-link svg { width: 18px; height: 18px; }
  .bottom-nav-link.nav-camera-featured { height: 40px; margin-top: 0; border-radius: 18px; transform: translateY(0); }
  .bottom-nav-link.nav-camera-featured svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   13. CROSS-PLATFORM TOUCH & ORIENTATION OPTIMIZATIONS
   ========================================================================== */

/* iOS Home Indicator Safe Area & Touch Target Padding */
.bottom-nav-bar {
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

/* Touch Device Target Enhancements */
@media (hover: none) and (pointer: coarse) {
  .bottom-nav-link {
    min-height: 48px;
  }
  .modal-close-btn,
  .skeuo-close-btn,
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile & Tablet Landscape Orientation Optimization */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-content { padding-top: 1rem; }
  .hero-names { font-size: 2.8rem; margin: 0.5rem 0; }
  .modal-card { max-height: 85vh; padding: 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .skeuo-music-card { max-height: 88vh; overflow-y: auto; padding: 1.2rem; }
  .skeuo-vinyl-assembly { width: 140px; height: 140px; margin-bottom: 1rem; }
  .skeuo-vinyl-disc { width: 130px; height: 130px; }
  .photobooth-fullscreen-modal { padding: 1rem; }
  .captured-photo-frame { max-height: 48vh; }
  .preloader-monogram { width: 76px; height: 76px; margin-bottom: 0.75rem; }
}

/* ACCESSIBILITY: PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Photobooth capture polish: keep the existing controls and behavior, but
   compose countdown and capture actions as one balanced studio instrument. */
.camera-capture-countdown {
  min-width: clamp(9rem, 34vw, 12.5rem);
  min-height: clamp(9rem, 34vw, 12.5rem);
  place-content: center;
  padding: 1.3rem;
  gap: 0.75rem;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 231, 196, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(84, 72, 65, 0.62), rgba(13, 15, 19, 0.76));
  border-color: rgba(255, 226, 185, 0.68);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.48), inset 0 -1px 1px rgba(71,35,12,.34), 0 18px 50px rgba(0,0,0,.52), 0 0 0 1px rgba(212,175,55,.12), 0 0 30px rgba(229,167,84,.18);
}

.camera-capture-countdown::before,
.camera-capture-countdown::after {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  border: solid rgba(229, 176, 87, 0.88);
  filter: drop-shadow(0 0 5px rgba(232, 169, 77, 0.22));
}
.camera-capture-countdown::before { border-width: 2px 0 0 2px; border-radius: 18px 0 0 0; clip-path: polygon(0 0, 38% 0, 38% 2px, 2px 2px, 2px 38%, 0 38%); }
.camera-capture-countdown::after { border-width: 0 2px 2px 0; border-radius: 0 0 18px 0; clip-path: polygon(62% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 62%, 100% 62%, 100% 100%, 62% 100%); }

.camera-capture-countdown__number { font-size: clamp(4.8rem, 18vw, 7.3rem); line-height: .76; }
.camera-capture-countdown__label { max-width: 12rem; font-size: clamp(.56rem, 1.6vw, .72rem); letter-spacing: .18em; text-wrap: balance; }

.camera-studio-capture-row {
  width: min(100%, 340px);
  grid-template-columns: 58px minmax(84px, 1fr) 58px;
  column-gap: clamp(1.25rem, 6vw, 2.3rem);
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 226, 192, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,237,216,.09), rgba(16,18,24,.18));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}
.camera-filter-options-menu { bottom: .65rem; inset-inline-start: max(calc(50% - 170px), 0px); }
.camera-switch-control { justify-self: center; justify-items: center; }
.camera-capture-mode-summary { margin-top: -.12rem; font-size: clamp(.5rem, 1.5vw, .62rem); letter-spacing: .14em; text-wrap: balance; }

@media (max-width: 420px) {
  .camera-capture-countdown { min-width: 9.5rem; min-height: 9.5rem; padding: 1rem; border-radius: 30px; }
  .camera-capture-countdown__number { font-size: 5.4rem; }
  .camera-capture-countdown__label { font-size: .57rem; }
  .camera-studio-capture-row { width: min(100%, 304px); grid-template-columns: 48px minmax(78px,1fr) 48px; column-gap: 1.2rem; min-height: 76px; padding: .42rem .64rem; }
  .camera-filter-options-menu { inset-inline-start: max(calc(50% - 152px), 0px); bottom: .57rem; }
  .capture-btn-outer { width: 72px; height: 72px; }
  .camera-capture-mode-summary { max-width: 18rem; font-size: .52rem; line-height: 1.45; }
}

/* RSVP confirmation actions
   Keep the existing champagne palette while separating the primary WhatsApp
   action from the secondary close action. This is intentionally scoped to the
   RSVP modal so contact buttons and the rest of the invitation remain intact. */
#rsvpModal .rsvp-confirmation-card {
  max-width: 500px;
  padding: clamp(1.75rem, 5vw, 2.5rem);
}

#rsvpModal .btn-whatsapp-rsvp,
#rsvpModal .rsvp-modal-close-action {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
}

#rsvpModal .btn-whatsapp-rsvp {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 0.8rem;
  min-height: 66px;
  margin: 0.25rem 0 0;
  padding: 0.62rem 1rem;
  text-align: center;
}

#rsvpModal .btn-whatsapp-rsvp::after {
  content: '';
  width: 42px;
  height: 1px;
}

#rsvpModal .rsvp-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(56, 37, 20, 0.2);
  border-radius: 50%;
  color: #241a12;
  background: rgba(255, 247, 235, 0.3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.66), 0 4px 12px rgba(79, 45, 18, 0.12);
}

#rsvpModal .rsvp-whatsapp-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#rsvpModal .rsvp-whatsapp-copy {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 0;
  line-height: 1.25;
}

#rsvpModal .rsvp-whatsapp-title,
#rsvpModal .rsvp-whatsapp-subtitle {
  display: block;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
}

#rsvpModal .rsvp-whatsapp-title {
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 2.8vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#rsvpModal .rsvp-whatsapp-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 2.8vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.035em;
  opacity: 0.82;
}

#rsvpModal .rsvp-modal-close-action {
  min-height: 50px;
  margin-top: 0.7rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, rgba(20, 21, 24, 0.72), rgba(54, 43, 33, 0.44)) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(245, 205, 163, 0.32) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#rsvpModal .rsvp-modal-close-action:hover,
#rsvpModal .rsvp-modal-close-action:focus-visible {
  background: linear-gradient(135deg, rgba(42, 35, 29, 0.84), rgba(75, 56, 39, 0.58)) !important;
  color: #ffe2bb !important;
  border-color: rgba(245, 205, 163, 0.58) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.26), 0 0 12px rgba(236, 179, 128, 0.1) !important;
}

html[dir="rtl"] #rsvpModal .rsvp-whatsapp-title,
html[dir="rtl"] #rsvpModal .rsvp-whatsapp-subtitle {
  letter-spacing: 0 !important;
  text-transform: none;
}

@media (max-width: 480px) {
  #rsvpModal .rsvp-confirmation-card {
    padding: 1.6rem 1.15rem;
  }

  #rsvpModal .btn-whatsapp-rsvp {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 0.55rem;
    min-height: 64px;
    padding-inline: 0.75rem;
  }

  #rsvpModal .btn-whatsapp-rsvp::after,
  #rsvpModal .rsvp-whatsapp-icon {
    width: 38px;
  }

  #rsvpModal .rsvp-whatsapp-icon {
    height: 38px;
  }
}

/* Advanced Photobooth capture flow -------------------------------------------------
   These additions use the existing studio palette and sit above the live video
   only while a capture is in progress. They never become part of the canvas. */
.camera-capture-countdown {
  position: absolute;
  z-index: 45;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  min-width: 8rem;
  padding: 1rem 1.25rem 0.9rem;
  color: #fff0dc;
  background:
    linear-gradient(135deg, rgba(255, 235, 214, 0.22), rgba(190, 129, 60, 0.12)),
    rgba(10, 12, 17, 0.64);
  border: 1px solid rgba(255, 228, 195, 0.56);
  border-radius: 26px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), 0 14px 42px rgba(0, 0, 0, 0.44), 0 0 24px rgba(227, 166, 95, 0.16);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.camera-capture-countdown__number {
  min-width: 1.45em;
  color: #ffe0b6;
  font-family: var(--font-heading);
  font-size: clamp(3.7rem, 14vw, 6.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 0.82;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.66), 0 0 20px rgba(235, 174, 94, 0.3);
}

.camera-capture-countdown__label,
.camera-capture-mode-summary,
.camera-burst-picker__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.camera-capture-countdown__label { color: rgba(255, 239, 217, 0.9); }

.camera-capture-countdown.is-ticking .camera-capture-countdown__number {
  animation: cameraCountdownTick 880ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cameraCountdownTick {
  0% { opacity: 0; transform: scale(1.42); filter: blur(4px); }
  24% { opacity: 1; transform: scale(0.94); filter: blur(0); }
  62% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.76; transform: scale(0.86); }
}

.live-camera-view.is-camera-countdown-active .camera-focus-reticle,
.live-camera-view.is-camera-countdown-active .camera-studio-bottom-area,
.live-camera-view.is-camera-countdown-active .camera-studio-topbar,
.live-camera-view.is-camera-capturing .camera-focus-reticle,
.live-camera-view.is-camera-capturing .camera-studio-bottom-area,
.live-camera-view.is-camera-capturing .camera-studio-topbar {
  pointer-events: none;
  opacity: 0.52;
  transition: opacity 180ms ease;
}

.camera-capture-mode-summary {
  min-height: 0.8rem;
  color: rgba(255, 230, 198, 0.78);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.68);
}

.confirmation-view {
  z-index: 48;
  gap: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.confirmation-view .captured-photo-frame { margin-bottom: 0.95rem; }

.camera-burst-picker {
  width: min(100%, 560px);
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.7rem;
  color: #fff0dc;
  background:
    linear-gradient(135deg, rgba(255, 238, 218, 0.15), rgba(182, 114, 52, 0.09)),
    rgba(11, 13, 19, 0.46);
  border: 1px solid rgba(255, 226, 193, 0.34);
  border-radius: 19px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 10px 25px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.camera-burst-picker__title { color: #ffe1bc; }

.camera-burst-frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 0.5rem;
}

.camera-burst-frame {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 0.3rem;
  padding: 0.28rem;
  color: rgba(255, 239, 220, 0.76);
  background: rgba(3, 4, 7, 0.3);
  border: 1px solid rgba(255, 229, 198, 0.24);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.camera-burst-frame img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 237, 216, 0.44);
  border-radius: 9px;
}

.camera-burst-frame:hover,
.camera-burst-frame:focus-visible,
.camera-burst-frame[aria-checked="true"] {
  color: #ffe8c8;
  border-color: rgba(255, 215, 144, 0.78);
  background: linear-gradient(135deg, rgba(255, 218, 163, 0.18), rgba(133, 72, 26, 0.19));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(243, 181, 84, 0.18), 0 7px 18px rgba(0, 0, 0, 0.26), 0 0 17px rgba(242, 178, 72, 0.13);
  transform: translateY(-2px);
}

.camera-burst-frame[aria-checked="true"]::after {
  position: absolute;
  top: 0.38rem;
  inset-inline-end: 0.38rem;
  width: 0.84rem;
  height: 0.84rem;
  display: grid;
  place-items: center;
  content: "✓";
  color: #25170d;
  background: linear-gradient(135deg, #ffe5b6, #e5aa63);
  border: 1px solid rgba(255, 246, 224, 0.84);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.38);
  font-size: 0.6rem;
  font-weight: 700;
}

.camera-burst-frame:focus-visible { outline: 2px solid #ffe3bb; outline-offset: 2px; }

.confirmation-view.active .camera-burst-picker {
  animation: cameraBurstPickerReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both 100ms;
}

@keyframes cameraBurstPickerReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
  .camera-capture-countdown { min-width: 6.8rem; padding: 0.8rem 1rem; border-radius: 22px; }
  .camera-capture-countdown__label,
  .camera-capture-mode-summary,
  .camera-burst-picker__title { font-size: 0.48rem; letter-spacing: 0.13em; }
  .camera-burst-picker { padding: 0.52rem; margin-bottom: 0.72rem; border-radius: 15px; }
  .camera-burst-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.36rem; }
  .camera-burst-frame { padding: 0.22rem; border-radius: 9px; font-size: 0.44rem; }
  .camera-burst-frame img { border-radius: 7px; }
  .confirmation-view .captured-photo-frame { max-height: 42vh; margin-bottom: 0.68rem; }
  .confirmation-view .captured-photo-frame img { max-height: 42vh; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .camera-capture-countdown { padding: 0.56rem 0.88rem; gap: 0.28rem; }
  .camera-capture-countdown__number { font-size: clamp(2.8rem, 8vw, 4.25rem); }
  .camera-burst-picker { width: min(100%, 440px); grid-template-columns: auto minmax(0, 1fr); align-items: center; margin-bottom: 0.52rem; padding: 0.45rem 0.55rem; }
  .camera-burst-picker__title { max-width: 5.5rem; }
  .camera-burst-frames { grid-template-columns: repeat(3, minmax(48px, 1fr)); gap: 0.32rem; }
  .camera-burst-frame { padding: 0.18rem; font-size: 0.39rem; }
  .confirmation-view .captured-photo-frame { max-height: 40vh; margin-bottom: 0.45rem; }
  .confirmation-view .captured-photo-frame img { max-height: 40vh; }
}

/* SURGICAL FIXES ADDITIONS */

/* Unified Guestbook Toggle */
.guestbook-toggle-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--gold-border); padding: 1.2rem; border-radius: 12px; }
.guestbook-toggle-wrapper span { min-width: 0; font-family: var(--font-heading); font-size: 1rem; color: var(--gold-light); text-align: center; line-height: 1.45; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
.premium-switch { position: relative; display: inline-block; flex: 0 0 48px; width: 48px; height: 26px; }
.premium-switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-dark-main); border: 1px solid var(--gold-border); transition: .4s; border-radius: 34px; }
.switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--gold-primary); transition: .4s; border-radius: 50%; }
.premium-switch input:checked + .switch-slider { background-color: var(--gold-dark); }
.premium-switch input:checked + .switch-slider:before { transform: translateX(22px); background-color: var(--white-pure); }
.guestbook-collapsible { max-height: 0; overflow: hidden; transition: max-height 250ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease, transform 250ms ease; opacity: 0; transform: translateY(-8px); }
.guestbook-collapsible.expanded { max-height: 500px; opacity: 1; transform: translateY(0); }

/* Form Select Single Arrow */
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5L6%206.5L11%201.5%22%20stroke%3D%22%23ECB380%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

/* Segmented Controls (RSVP & Gallery) */
.gallery-filters { margin-bottom: 2rem; display: flex; justify-content: center; }
.segmented-control { display: inline-flex; width: 100%; position: relative; background: rgba(11, 14, 20, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(236, 179, 128, 0.3); border-radius: 30px; padding: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-filters .segmented-control { width: 100%; max-width: 480px; }
.segmented-control:hover { border-color: rgba(236, 179, 128, 0.6); box-shadow: 0 0 20px rgba(236, 179, 128, 0.2); }
.segmented-control input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.segmented-control label { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; text-align: center; padding: 0.75rem 0.4rem; font-family: var(--font-heading); font-size: 0.75rem; color: var(--ink-secondary); cursor: pointer; transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s ease; letter-spacing: 0.08em; text-transform: uppercase; user-select: none; margin: 0; }
.gallery-filters .segmented-control label {
  display: grid;
  min-block-size: 2.6em;
  place-items: center;
  align-content: center;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.segmented-control label:hover { color: var(--gold-light); }
.segmented-control label:active { transform: scale(0.95); }
.segmented-control input[type="radio"]:focus-visible + label { outline: 2px solid var(--gold-primary); outline-offset: 2px; border-radius: 20px; }
.segmented-control input[type="radio"]:checked + label { color: #1A1816; font-weight: 700; text-shadow: 0 1px 1px rgba(245, 205, 163, 0.08); }
.segmented-highlight { position: absolute; top: 4px; bottom: 4px; left: 4px; background: var(--gold-gradient); border-radius: 26px; z-index: 1; box-shadow: 0 4px 15px rgba(236, 179, 128, 0.45), inset 0 1px 2px rgba(245, 205, 163, 0.5); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* Sliding Highlight Calculations */
.segmented-control:has(input[value="attending"]) .segmented-highlight { width: calc((100% - 8px) / 2); }
.segmented-control input[value="attending"]:checked ~ .segmented-highlight { transform: translateX(0); }
.segmented-control input[value="declining"]:checked ~ .segmented-highlight { transform: translateX(100%); }

.segmented-control:has(input[value="all"]) .segmented-highlight { width: calc((100% - 8px) / 3); }
.segmented-control input[value="all"]:checked ~ .segmented-highlight { transform: translateX(0); }
.segmented-control input[value="official"]:checked ~ .segmented-highlight { transform: translateX(100%); }
.segmented-control input[value="guest"]:checked ~ .segmented-highlight { transform: translateX(200%); }

@media (max-width: 480px) {
  /* Keep the RSVP wish choice legible and centered without competing with
     its switch on compact phones. */
  .guestbook-toggle-wrapper {
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    text-align: center;
  }
  .guestbook-toggle-wrapper span {
    width: 100%;
    max-inline-size: 25ch;
    font-size: clamp(0.74rem, 3.4vw, 0.84rem);
    letter-spacing: 0.05em;
  }
  .premium-switch {
    /* The shared 48px flex basis is horizontal by default. Once the RSVP
       control stacks, it must not become a 48 × 48 circular switch. */
    flex: 0 0 auto;
    width: 48px;
    height: 26px;
    margin-inline: auto;
  }

  /* Every gallery option retains its equal third while multi-word labels
     wrap as a centered phrase rather than leaving an orphan word. */
  .gallery-filters .segmented-control label {
    padding-inline: 0.28rem;
    font-size: clamp(0.64rem, 2.8vw, 0.75rem);
    letter-spacing: 0.065em;
  }
}

@media (max-width: 360px) {
  /* The narrowest supported phones retain two balanced wish lines rather
     than stranding “wish” below the phrase. */
  .guestbook-toggle-wrapper span {
    font-size: 0.7rem;
    letter-spacing: 0;
  }
}

/* Glass Button */
.btn-glass-trigger { width: 86px; height: 86px; border-radius: 50%; background: var(--bg-dark-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(236, 179, 128, 0.4); color: var(--gold-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-luxury); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease; }
.btn-glass-trigger:hover { border-color: var(--gold-light); box-shadow: 0 0 20px rgba(236, 179, 128, 0.5); transform: translateY(-2px) scale(1.02); }
.btn-glass-trigger:active { transform: scale(0.98); }
.btn-glass-trigger.primary-action { border: 1px solid rgba(236, 179, 128, 0.8); box-shadow: 0 0 15px rgba(236, 179, 128, 0.2); }
.btn-glass-trigger.primary-action:hover { box-shadow: 0 0 25px rgba(236, 179, 128, 0.7); transform: translateY(-2px) scale(1.02); }
.btn-glass-trigger.primary-action:active { transform: scale(0.98); }

/* New Badge for Gallery */
.gallery-item .new-badge { position: absolute; top: 10px; right: 10px; background: var(--gold-primary); color: #0b0e14; font-family: var(--font-heading); font-size: 0.7rem; font-weight: bold; padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 3; letter-spacing: 0.1em; }

/* Premium Custom Select Component */
.visually-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-wrapper.open {
  z-index: 1000;
}

.form-group:has(.custom-select-wrapper.open) {
  position: relative;
  z-index: 1000;
}

.custom-select-trigger {
  width: 100%;
  background: rgba(11, 14, 20, 0.8);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-input);
  padding: 1.5rem 2.8rem 0.5rem 1.2rem;
  color: var(--white-pure);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  box-sizing: border-box;
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: var(--gold-primary);
  box-shadow: 0 0 8px rgba(201, 163, 58, 0.15);
}

.custom-select-trigger:focus-visible,
.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(201, 163, 58, 0.2);
}

.custom-select-arrow {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 15px rgba(201, 163, 58, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.custom-select-wrapper.open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.custom-select-option {
  padding: 0.95rem 1.2rem;
  min-height: 48px;
  border-radius: 10px;
  color: #F6F1EA;
  font-family: var(--font-body);
  font-size: 1.02rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.12s cubic-bezier(0.22, 1, 0.36, 1), color 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  margin-bottom: 2px;
  box-sizing: border-box;
}

.custom-select-option:last-child {
  margin-bottom: 0;
}

.custom-select-option:hover,
.custom-select-option.focused {
  background: rgba(201, 163, 58, 0.15);
  color: var(--gold-light);
}

.custom-select-option.selected {
  background: var(--gold-gradient);
  color: #1A1614;
  font-weight: 600;
}

.custom-select-option.selected::after {
  content: "✓";
  font-weight: 700;
  font-size: 1.1rem;
  color: #1A1614;
}

.floating-group:has(.custom-select-wrapper) .floating-label,
.floating-group .floating-label.active-float {
  transform: translateY(-0.65rem);
  font-size: 0.55rem;
  color: var(--gold-primary);
}

/* ==========================================================================
   X. LANGUAGE OVERLAY & RTL STYLES
   ========================================================================== */
.language-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-black);
}
.lang-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.lang-overlay-blur {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 13, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-card {
  position: relative;
  z-index: 1;
  background: rgba(26, 22, 20, 0.6);
  border: 1px solid rgba(236, 179, 128, 0.2);
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  animation: langCardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transform: scale(0.96);
}
@keyframes langCardEnter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.lang-title {
  font-family: var(--font-serif-title);
  color: var(--gold-light);
  font-size: 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.lang-subtitle {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.lang-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lang-btn {
  background: transparent;
  border: 1px solid rgba(236, 179, 128, 0.3);
  padding: 1rem;
  border-radius: 8px;
  color: var(--gold-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-btn:hover {
  background: rgba(236, 179, 128, 0.1);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}
.lang-name {
  font-family: var(--font-serif-title);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.lang-desc {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Remove floating F & L badge as requested */
.header-brand-logo,
.header-right-controls {
  display: none !important;
}

/* ==========================================================================
   Global Controls — Horizontal framing bar pinned across the top.
   Framing the Hero title cleanly on ONE horizontal axis (Top: 36px, Side: 48px).
   LTR: Top Left = Music, Top Right = Language.
   RTL: Top Left = Language, Top Right = Music.
   ========================================================================== */
.header-left-controls {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 600;
  pointer-events: none;
}

.header-left-controls > * {
  pointer-events: auto;
}

/* RTL: flex-direction row naturally puts child 1 (Music) on Right, child 2 (Language) on Left */
html[dir="rtl"] .header-left-controls {
  left: 0;
  right: 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Responsive side margins */
@media (max-width: 1024px) {
  .header-left-controls {
    top: 32px;
    padding: 0 36px;
  }
}

@media (max-width: 768px) {
  .header-left-controls {
    top: 24px;
    padding: 0 24px;
  }
}

@media (max-width: 480px) {
  .header-left-controls {
    top: calc(16px + env(safe-area-inset-top, 0px));
    padding: 0 calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
  }
}

/* Language Dropdown Switcher */
.lang-dropdown-wrapper {
  position: relative;
}

.lang-dropdown-btn .globe-icon {
  width: 18px;
  height: 18px;
  stroke: #E8BE8B;
  stroke-width: 1.75px;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-dropdown-btn:hover .globe-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(232, 190, 139, 0.5));
}
.lang-dropdown-btn .chevron {
  font-size: 0.55rem;
  opacity: 0.7;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang-dropdown-wrapper.open .lang-dropdown-btn .chevron {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  background: rgba(22, 18, 15, 0.88);
  border: 1px solid rgba(236, 179, 128, 0.35);
  border-radius: 18px;
  padding: 0.5rem;
  min-width: 140px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(245, 205, 163, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.95);
  transform-origin: top right;
  transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9999;
}

html[dir="rtl"] .lang-dropdown-menu {
  left: 0;
  right: auto;
  transform-origin: top left;
}
.lang-dropdown-wrapper.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lang-dropdown-item {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.65rem 0.85rem 0.65rem 1.15rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
html[dir="rtl"] .lang-dropdown-item {
  padding: 0.65rem 1.15rem 0.65rem 0.85rem;
  text-align: right;
}
.lang-dropdown-item::before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 4px;
  width: 2.5px;
  background: var(--gold-primary);
  border-radius: 2px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 6px rgba(245, 205, 163, 0.6);
}
html[dir="rtl"] .lang-dropdown-item::before {
  left: auto;
  right: 4px;
  transform: translateX(5px);
}
.lang-dropdown-item.active::before {
  opacity: 1;
  transform: translateX(0);
}
.lang-dropdown-item:hover,
.lang-dropdown-item.active {
  color: var(--gold-light);
  background: rgba(236, 179, 128, 0.15);
}
.lang-dropdown-item .check-mark {
  display: none;
}

/* Refined Music Button & Pulse / Equalizer Animations */
.music-note-icon {
  font-size: 0.95rem;
  color: var(--gold-light);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.music-equalizer-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 2px;
}
html[dir="rtl"] .music-equalizer-bars {
  margin-left: 0;
  margin-right: 2px;
}
.music-equalizer-bars .bar {
  width: 2px;
  height: 3px;
  background: var(--gold-light);
  border-radius: 1px;
  transition: height 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.music-btn.playing {
  box-shadow: 0 0 16px rgba(236, 179, 128, 0.4), inset 0 1px 1.5px rgba(245, 205, 163, 0.4);
  border-color: rgba(245, 205, 163, 0.65);
}
.music-btn.playing .music-note-icon {
  animation: musicPulse 2s ease-in-out infinite;
}
.music-btn.playing .music-equalizer-bars .bar1 {
  animation: eqBar1 0.2s cubic-bezier(0.22, 1, 0.36, 1)-in-out infinite alternate;
}
.music-btn.playing .music-equalizer-bars .bar2 {
  animation: eqBar2 0.6s ease-in-out infinite alternate 0.2s;
}
.music-btn.playing .music-equalizer-bars .bar3 {
  animation: eqBar3 0.7s ease-in-out infinite alternate 0.1s;
}

@keyframes musicPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 4px var(--gold-light)); }
}
@keyframes eqBar1 { 0% { height: 3px; } 100% { height: 11px; } }
@keyframes eqBar2 { 0% { height: 4px; } 100% { height: 13px; } }
@keyframes eqBar3 { 0% { height: 2px; } 100% { height: 9px; } }
html[dir="rtl"] .hero-date span {
  display: inline-block;
  direction: ltr; /* keep date format logical */
}
html[lang="ar"] {
  --font-serif-title: 'Amiri', serif;
  --font-sans: 'Cairo', sans-serif;
  --font-serif-body: 'Amiri', serif;
  --font-script: 'Amiri', serif;
}
.arabic-text {
  font-family: 'Amiri', serif;
}
html[dir="rtl"] .btn-open-invite,
html[dir="rtl"] .btn-gold-solid,
html[dir="rtl"] .btn-gold-outline {
  letter-spacing: 0; /* Remove wide letter spacing for Arabic text to improve legibility */
}
html[dir="rtl"] .hero-names,
html[dir="rtl"] .preloader-title,
html[dir="rtl"] .lang-title {
  letter-spacing: 0;
}

/* Transitioning state */
.lang-transitioning {
  opacity: 0 !important;
  filter: blur(8px) !important;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   RTL SUPPORT (ARABIC)
   ========================================================================== */
html[dir="rtl"] {
  --font-serif-title: 'Amiri', serif;
  --font-heading: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}

html[dir="rtl"] .hero-names,
html[dir="rtl"] .preloader-title,
html[dir="rtl"] .footer-names {
  font-family: 'Amiri', serif;
}

html[dir="rtl"] .floating-group .floating-label {
  left: auto;
  right: 1.2rem;
  transform-origin: right top;
}

html[dir="rtl"] .form-group,
html[dir="rtl"] .floating-group {
  text-align: right;
}

html[dir="rtl"] .custom-select-trigger {
  padding: 1.5rem 1.2rem 0.5rem 2.8rem;
  text-align: right;
}

html[dir="rtl"] .custom-select-option {
  text-align: right;
}

html[dir="rtl"] .custom-select-arrow {
  right: auto;
  left: 1.2rem;
}

html[dir="rtl"] .contact-actions-pair,
html[dir="rtl"] .venue-details,
html[dir="rtl"] .guideline-card {
  text-align: right;
}

/* =========================================================
   RTL Segmented Controls — active-state & typography fix
   Root cause: translateX slides in LTR physical direction;
   in RTL flex reverses visual order, so we anchor the
   highlight to `right:4px` and negate all translateX values.
   ========================================================= */
html[dir="rtl"] .segmented-highlight {
  left: auto;
  right: 4px;
}

/* RSVP — 2 slots */
html[dir="rtl"] .segmented-control input[value="attending"]:checked  ~ .segmented-highlight { transform: translateX(0); }
html[dir="rtl"] .segmented-control input[value="declining"]:checked  ~ .segmented-highlight { transform: translateX(-100%); }

/* Gallery — 3 slots */
html[dir="rtl"] .segmented-control input[value="all"]:checked      ~ .segmented-highlight { transform: translateX(0); }
html[dir="rtl"] .segmented-control input[value="official"]:checked  ~ .segmented-highlight { transform: translateX(-100%); }
html[dir="rtl"] .segmented-control input[value="guest"]:checked     ~ .segmented-highlight { transform: translateX(-200%); }

/* Arabic inactive label — warm ivory instead of muted grey */
html[dir="rtl"] .segmented-control label {
  color: rgba(255, 245, 232, 0.82);
  letter-spacing: 0.02em;   /* tighter for Arabic */
  text-transform: none;      /* Arabic has no uppercase */
}

/* Arabic active label — high-contrast charcoal over gold */
html[dir="rtl"] .segmented-control input[type="radio"]:checked + label {
  color: #2F2822;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(245, 205, 163, 0.12);
}

/* Restore hover to gold-light in RTL (overrides warm-ivory) */
html[dir="rtl"] .segmented-control label:hover {
  color: var(--gold-light);
}

/* RTL Timeline (Agenda) Refinement */
html[dir="rtl"] .timeline-item:nth-child(odd) {
  justify-content: flex-start;
  padding-left: 50%;
  padding-right: 0;
  box-sizing: border-box;
}

html[dir="rtl"] .timeline-item:nth-child(even) {
  justify-content: flex-end;
  padding-right: 50%;
  padding-left: 0;
  box-sizing: border-box;
}

html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-card {
  transform: translateX(40px) scale(0.95);
  flex-direction: row;
}

html[dir="rtl"] .timeline-item:nth-child(even) .timeline-card {
  transform: translateX(-40px) scale(0.95);
  flex-direction: row-reverse;
}

html[dir="rtl"] .timeline-item.card-visible .timeline-card {
  transform: translateX(0) scale(1);
}

html[dir="rtl"] .timeline-card {
  width: 90%;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
}

html[dir="rtl"] .timeline-time-badge {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  text-decoration: rtl;
}

html[dir="rtl"] .timeline-info {
  text-align: right;
  flex: 1;
}

html[dir="rtl"] .timeline-info h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-align: right;
  color: var(--white-pure);
}

html[dir="rtl"] .timeline-info p {
  line-height: 1.9;
  opacity: 0.85;
  text-align: right;
  color: var(--ink-secondary);
  font-size: 0.95rem;
}

html[dir="rtl"] .footer-date {
  letter-spacing: 0.05em;
  direction: rtl;
  unicode-bidi: isolate;
}

html[dir="rtl"] .hero-date-main {
  direction: rtl;
}

@media (max-width: 768px) {
  html[dir="rtl"] .timeline-line-track {
    left: auto;
    right: 20px;
    transform: translateX(50%);
  }

  html[dir="rtl"] .timeline-traveling-orb {
    left: auto;
    transform: translate(50%, -50%);
  }

  html[dir="rtl"] .timeline-node {
    left: auto;
    right: 20px;
    transform: translate(50%, -50%) scale(0.6);
  }

  html[dir="rtl"] .timeline-item.node-pulse .timeline-node {
    transform: translate(50%, -50%) scale(1.15);
    animation-name: nodeGlowPulseRtl;
  }

  html[dir="rtl"] .timeline-item:nth-child(odd),
  html[dir="rtl"] .timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-right: 48px;
    padding-left: 0;
  }

  html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-card,
  html[dir="rtl"] .timeline-item:nth-child(even) .timeline-card {
    transform: translateX(-30px) scale(0.95);
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 1.5rem;
  }

  html[dir="rtl"] .timeline-item.card-visible .timeline-card {
    transform: translateX(0) scale(1);
  }
}

@keyframes nodeGlowPulseRtl {
  0% { transform: translate(50%, -50%) scale(1); box-shadow: 0 0 8px rgba(236,179,128, 0.4), 0 0 3px rgba(245,205,163, 0.5); }
  100% { transform: translate(50%, -50%) scale(1.2); box-shadow: 0 0 14px rgba(236,179,128, 0.6), 0 0 8px rgba(245,205,163, 0.7); }
}

/* ==========================================================================
   ARABIC EXPERIENCE POLISH — RTL Typography & Visual Hierarchy
   All rules scoped to html[dir="rtl"] — English version untouched.
   ========================================================================== */

/* ── 1. Global Arabic Typography Defaults ─────────────────────────────────── */
html[dir="rtl"] body {
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Remove LTR letter-spacing from all Arabic text — Arabic script doesn't use it */
html[dir="rtl"] *:not(.mono-char):not(.mono-amp):not(.skeuo-song-title):not(.skeuo-time) {
  letter-spacing: 0 !important;
}

/* Eyebrows: remove uppercase transform (Arabic has no uppercase) */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] [class*="eyebrow"] {
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0 !important;
}

/* ── 2. Section Heads ─────────────────────────────────────────────────────── */
html[dir="rtl"] .section-head {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .h2 {
  line-height: 1.35;
  font-weight: 700;
}

html[dir="rtl"] .h3 {
  line-height: 1.4;
  font-weight: 600;
}

html[dir="rtl"] .muted-text {
  line-height: 1.85;
  font-weight: 400;
}

/* ── 3. Welcome Card ─────────────────────────────────────────────────────── */
html[dir="rtl"] .welcome-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .welcome-text {
  text-align: right;
  line-height: 2;
  font-style: normal;
  font-weight: 400;
}

/* ── 4. Timeline Cards (supplement existing RTL rules) ───────────────────── */
html[dir="rtl"] .timeline-info h3 {
  text-transform: none;   /* Arabic has no uppercase — suppress ALL-CAPS titles */
  font-weight: 700;
  letter-spacing: 0 !important;
}

html[dir="rtl"] .timeline-info p {
  font-weight: 400;
  line-height: 1.95;
}

/* ── 5. Guideline Cards ──────────────────────────────────────────────────── */
html[dir="rtl"] .guideline-card {
  direction: rtl;
}

html[dir="rtl"] .guideline-card h3 {
  text-align: right;
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
}

html[dir="rtl"] .guideline-card .muted-text {
  text-align: right;
}

/* ── 6. Venue Details ────────────────────────────────────────────────────── */
html[dir="rtl"] .venue-details {
  direction: rtl;
}

html[dir="rtl"] .venue-title {
  text-align: right;
  font-weight: 700;
}

html[dir="rtl"] .venue-location {
  text-align: right;
  font-size: 1rem;
  font-weight: 500;
}

html[dir="rtl"] .venue-desc {
  text-align: right;
  line-height: 1.9;
}

html[dir="rtl"] .map-buttons {
  text-align: center;
  direction: rtl;
}

/* ── 7. RSVP Form ────────────────────────────────────────────────────────── */
html[dir="rtl"] .form-input,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-textarea {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .form-input::placeholder,
html[dir="rtl"] .form-textarea::placeholder {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .floating-group .floating-label {
  text-align: right;
}

html[dir="rtl"] .form-group {
  text-align: right;
  direction: rtl;
}

/* RSVP card and section text */
html[dir="rtl"] .rsvp-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .rsvp-card .muted-text {
  text-align: center;
}

/* ── 8. Buttons — remove uppercase & letter-spacing ─────────────────────── */
html[dir="rtl"] .btn-primary-gold,
html[dir="rtl"] .btn-gold-outline,
html[dir="rtl"] .btn-whatsapp-action,
html[dir="rtl"] .btn-call-action {
  text-transform: none;
  letter-spacing: 0 !important;
  font-weight: 600;
}

/* ── 9. Gallery Filters (supplement existing RTL segmented rules) ─────────── */
html[dir="rtl"] .gallery-filters {
  direction: rtl;
}

/* ── 10. Counter / Stats ─────────────────────────────────────────────────── */
html[dir="rtl"] .counter-title {
  text-transform: none;
  letter-spacing: 0 !important;
  font-size: 0.75rem;
  font-weight: 600;
}

html[dir="rtl"] .counters-row {
  direction: rtl;
}

/* ── 11. Live Community / Guestbook section head ─────────────────────────── */
html[dir="rtl"] #live-community .section-head h3 {
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

/* ── 12. Modal Cards ─────────────────────────────────────────────────────── */
html[dir="rtl"] .modal-card {
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .modal-card p,
html[dir="rtl"] .modal-card .muted-text {
  line-height: 1.9;
}

/* ── 13. Contact Cards ───────────────────────────────────────────────────── */
html[dir="rtl"] .contact-person-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .contact-person-info {
  text-align: right;
}

html[dir="rtl"] .contact-name {
  font-weight: 700;
}

html[dir="rtl"] .contact-role {
  font-weight: 400;
  font-size: 0.85rem;
}

/* ── 14. Bottom Navigation ───────────────────────────────────────────────── */
html[dir="rtl"] .bottom-nav-list {
  direction: rtl;
}

html[dir="rtl"] .bottom-nav-link span {
  font-size: 0.65rem;
  letter-spacing: 0 !important;
}

/* ── 15. Footer ──────────────────────────────────────────────────────────── */
html[dir="rtl"] .footer-names {
  direction: rtl;
  letter-spacing: 0 !important;
}

html[dir="rtl"] .footer-date {
  direction: rtl;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ── 16. Share Modal ─────────────────────────────────────────────────────── */
html[dir="rtl"] #shareModal .modal-card h3,
html[dir="rtl"] #shareModal .modal-card p {
  direction: rtl;
}

/* ==========================================================================
   17. WORLD-CLASS CINEMATIC INTERACTIVE MOTION SYSTEM
   ========================================================================== */

/* Universal Easing & Smooth Transitions */
button,
.btn-primary-gold,
.btn-gold-outline,
.btn-glass-trigger,
.btn-open-invite,
.btn-whatsapp-action,
.btn-call-action,
.welcome-card,
.venue-card,
.venue-wrapper,
.map-embed-container,
.rsvp-card,
.gallery-item,
.wish-card,
.timeline-card,
.guideline-card,
.capture-card,
.countdown-box,
.contact-person-card,
.modal-card,
.skeuo-music-card,
.glass-card,
.glass-panel,
.bottom-nav-link,
.lang-dropdown-btn {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Button Tactile Feedback */
button:hover,
.btn-primary-gold:hover,
.btn-gold-outline:hover,
.btn-whatsapp-action:hover,
.btn-call-action:hover,
button.is-touch-pointer-active,
.btn-primary-gold.is-touch-pointer-active,
.btn-gold-outline.is-touch-pointer-active,
.btn-whatsapp-action.is-touch-pointer-active,
.btn-call-action.is-touch-pointer-active {
  transform: scale(1.02) translateY(-2px);
  filter: brightness(1.08);
}

button:active,
.btn-primary-gold:active,
.btn-gold-outline:active,
.btn-whatsapp-action:active,
.btn-call-action:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 0.1s;
}

/* Interactive Card Elevation & Glow (Applied RSVP hover animation to all cards) */
.welcome-card:hover,
.venue-card:hover,
.venue-wrapper:hover,
.map-embed-container:hover,
.rsvp-card:hover,
.timeline-card:hover,
.wish-card:hover,
.guideline-card:hover,
.capture-card:hover,
.countdown-box:hover,
.contact-person-card:hover,
.modal-card:hover,
.skeuo-music-card:hover,
.glass-card:hover,
.glass-panel:hover,
.welcome-card.is-touch-pointer-active,
.venue-card.is-touch-pointer-active,
.venue-wrapper.is-touch-pointer-active,
.map-embed-container.is-touch-pointer-active,
.rsvp-card.is-touch-pointer-active,
.timeline-card.is-touch-pointer-active,
.wish-card.is-touch-pointer-active,
.guideline-card.is-touch-pointer-active,
.capture-card.is-touch-pointer-active,
.countdown-box.is-touch-pointer-active,
.contact-person-card.is-touch-pointer-active,
.modal-card.is-touch-pointer-active,
.skeuo-music-card.is-touch-pointer-active,
.glass-card.is-touch-pointer-active,
.glass-panel.is-touch-pointer-active {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 50px rgba(87, 77, 66, 0.7), 0 0 35px rgba(236, 179, 128, 0.4);
  border-color: var(--gold-light);
}

/* Gallery Ken Burns Zoom & Reflection Shimmer */
.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover img,
.gallery-item.is-touch-pointer-active img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.gallery-item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(245, 205, 163, 0.15) 50%,
    transparent 55%
  );
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.gallery-item:hover::after,
.gallery-item.is-touch-pointer-active::after {
  transform: translateX(100%) rotate(25deg);
}

/* Venue Image Ken Burns Effect & Button Breathing Glow */
.venue-yacht-image-wrapper {
  overflow: hidden;
  border-radius: var(--border-radius-card);
}

.venue-yacht-image-wrapper img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.venue-card:hover .venue-yacht-image-wrapper img,
.venue-card.is-touch-pointer-active .venue-yacht-image-wrapper img {
  transform: scale(1.05);
}

.btn-gold-outline {
  animation: btnGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes btnGlowPulse {
  0% { box-shadow: 0 0 10px rgba(236, 179, 128, 0.2); }
  100% { box-shadow: 0 0 25px rgba(236, 179, 128, 0.55); }
}

/* RSVP Input Smooth Border & Glow Focus */
input:focus,
textarea:focus,
select:focus,
.custom-select-trigger:focus {
  outline: none;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 18px rgba(236, 179, 128, 0.35) !important;
  transform: translateY(-1px);
  transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Footer Monogram Breathing Float */
.footer-monogram,
.footer-monogram-circle {
  animation: footerFloatGlow 6s ease-in-out infinite alternate;
}

@keyframes footerFloatGlow {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(236, 179, 128, 0.3));
  }
  100% {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 0 22px rgba(236, 179, 128, 0.65));
  }
}

/* Equalizer Audio Playing Dot Pulse */
.skeuo-playing-dot {
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.skeuo-playing-dot.active {
  animation: audioPulse 1.8s ease-in-out infinite alternate;
}

@keyframes audioPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 1; filter: drop-shadow(0 0 8px #2e7d32); }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Arabic Hero Title Refinements */
html[dir="rtl"] [data-i18n="countdown.title"] {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}



/* ==========================================================================
   CINEMATIC ENHANCEMENTS (Volumetric Rays, Mist, Mouse Glow, Reflections)
   ========================================================================== */

/* 1. Golden Mist Overlay (Entrance Sequence) */
.golden-mist-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, rgba(236, 179, 128, 0.03) 0%, transparent 60%);
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.22, 0.61, 0.36, 1);
  mix-blend-mode: screen;
}
.golden-mist-overlay.fade-out {
  opacity: 0;
}

/* 2. Volumetric Light Rays */
.volumetric-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2; /* Between video and text */
  mix-blend-mode: screen;
  opacity: 0.6;
}
.ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 205, 163, 0.02) 50%, transparent 100%);
  transform-origin: center center;
  filter: blur(40px);
  animation: slowRayRotate 40s linear infinite;
}
.ray-1 { animation-duration: 45s; opacity: 0.8; }
.ray-2 { animation-duration: 35s; animation-direction: reverse; width: 120%; height: 200px; opacity: 0.5; }
.ray-3 { animation-duration: 55s; transform: translate(-50%, -50%) rotate(45deg); opacity: 0.6; }

@keyframes slowRayRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 3. Constellation Canvas */
.constellation-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1; /* Crisp & visible above section dark veils */
  contain: strict;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* 4. Mouse Glow Light Source */
.mouse-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(245, 205, 163, 0.06) 0%, rgba(236, 179, 128, 0.02) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.mouse-glow.active {
  opacity: 1;
}
@media (pointer: coarse) { .mouse-glow { display: none !important; } }

/* 5. Slow Premium Glass Reflections & Linear Shimmer (RSVP Card Style) */
.glass-panel::before,
.rsvp-card::before,
.venue-card::before,
.venue-wrapper::before,
.map-embed-container::before,
.timeline-card::before,
.welcome-card::before,
.wish-card::before,
.guideline-card::before,
.capture-card::before,
.countdown-box::before,
.contact-person-card::before,
.modal-card::before,
.skeuo-music-card::before,
.glass-card::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(245, 205, 163, 0.02) 25%,
    transparent 30%,
    transparent 40%,
    rgba(219, 189, 165, 0.01) 45%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 5;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* When hovered, the reflection shifts slightly */
.glass-panel:hover::before,
.rsvp-card:hover::before,
.venue-card:hover::before,
.venue-wrapper:hover::before,
.map-embed-container:hover::before,
.timeline-card:hover::before,
.welcome-card:hover::before,
.wish-card:hover::before,
.guideline-card:hover::before,
.capture-card:hover::before,
.countdown-box:hover::before,
.contact-person-card:hover::before,
.modal-card:hover::before,
.skeuo-music-card:hover::before,
.glass-card:hover::before,
.glass-panel.is-touch-pointer-active::before,
.rsvp-card.is-touch-pointer-active::before,
.venue-card.is-touch-pointer-active::before,
.venue-wrapper.is-touch-pointer-active::before,
.map-embed-container.is-touch-pointer-active::before,
.timeline-card.is-touch-pointer-active::before,
.welcome-card.is-touch-pointer-active::before,
.wish-card.is-touch-pointer-active::before,
.guideline-card.is-touch-pointer-active::before,
.capture-card.is-touch-pointer-active::before,
.countdown-box.is-touch-pointer-active::before,
.contact-person-card.is-touch-pointer-active::before,
.modal-card.is-touch-pointer-active::before,
.skeuo-music-card.is-touch-pointer-active::before,
.glass-card.is-touch-pointer-active::before {
  transform: translate(5%, 5%);
}

/* 6. Cinematic Page Transitions (Enhancing fade-in-up) */
.fade-in-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-in-up.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}


.timeline-item:nth-child(1) .timeline-node { animation-delay: 0s; }
.timeline-item:nth-child(2) .timeline-node { animation-delay: 0.8s; }
.timeline-item:nth-child(3) .timeline-node { animation-delay: 1.6s; }
.timeline-item:nth-child(4) .timeline-node { animation-delay: 2.4s; }


/* ==========================================================================
   CINEMATIC ENHANCEMENTS
   ========================================================================== */
.mouse-ambient-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 166, 107, 0.08) 0%, rgba(201, 166, 107, 0) 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0;
  transition: opacity 1s ease;
}
.mouse-ambient-light.active {
  opacity: var(--pointer-light-opacity, 1);
}

.golden-fog {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 166, 107, 0.15) 0%, rgba(10, 10, 10, 0.95) 100%);
  z-index: 8000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1), transform 4s ease-out;
  mix-blend-mode: screen;
  transform: scale(1);
}
.golden-fog.fade-out {
  opacity: 0;
  transform: scale(1.1);
}

.cinematic-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  filter: blur(10px);
  transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}
.cinematic-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Glass panel dynamic reflection (RSVP Card Style) */
.glass-panel, .glass-card, .rsvp-card, .welcome-card, .venue-card, .venue-wrapper, .map-embed-container, .timeline-card, .wish-card, .guideline-card, .capture-card, .countdown-box, .contact-person-card, .modal-card, .skeuo-music-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gold-border);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-luxury);
}

.glass-panel::after, .glass-card::after, .rsvp-card::after, .welcome-card::after, .venue-card::after, .venue-wrapper::after, .map-embed-container::after, .timeline-card::after, .wish-card::after, .guideline-card::after, .capture-card::after, .countdown-box::after, .contact-person-card::after, .modal-card::after, .skeuo-music-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.glass-panel:hover::after, .glass-card:hover::after, .rsvp-card:hover::after, .welcome-card:hover::after, .venue-card:hover::after, .venue-wrapper:hover::after, .map-embed-container:hover::after, .timeline-card:hover::after, .wish-card:hover::after, .guideline-card:hover::after, .capture-card:hover::after, .countdown-box:hover::after, .contact-person-card:hover::after, .modal-card:hover::after, .skeuo-music-card:hover::after,
.glass-panel.is-touch-pointer-active::after, .glass-card.is-touch-pointer-active::after, .rsvp-card.is-touch-pointer-active::after, .welcome-card.is-touch-pointer-active::after, .venue-card.is-touch-pointer-active::after, .venue-wrapper.is-touch-pointer-active::after, .map-embed-container.is-touch-pointer-active::after, .timeline-card.is-touch-pointer-active::after, .wish-card.is-touch-pointer-active::after, .guideline-card.is-touch-pointer-active::after, .capture-card.is-touch-pointer-active::after, .countdown-box.is-touch-pointer-active::after, .contact-person-card.is-touch-pointer-active::after, .modal-card.is-touch-pointer-active::after, .skeuo-music-card.is-touch-pointer-active::after {
  opacity: 1;
}

/* Auto-Scroll Control Button */
.autoscroll-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245, 205, 163, 0.3);
  border-radius: 20px;
  color: var(--gold-primary);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.autoscroll-btn:hover,
.autoscroll-btn.is-touch-pointer-active {
  background: rgba(40, 32, 26, 0.65);
  border-color: rgba(245, 205, 163, 0.65);
  box-shadow: 0 0 15px rgba(236, 179, 128, 0.35), inset 0 1px 2px rgba(245, 205, 163, 0.4);
  transform: scale(1.03);
}
.autoscroll-btn.active {
  background: linear-gradient(135deg, rgba(186, 146, 112, 0.4) 0%, rgba(137, 117, 99, 0.4) 100%);
  border-color: #F5CDA3;
  box-shadow: 0 0 12px rgba(245, 205, 163, 0.4);
}
.autoscroll-btn.active .autoscroll-icon {
  animation: autoscrollPulse 1.5s infinite ease-in-out;
}
@keyframes autoscrollPulse {
  0%, 100% { transform: translateY(-1px); opacity: 0.8; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* Ambient Radial Glow Backdrops */
.section-pad {
  position: relative;
}
.section-pad::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(236, 179, 128, 0.03) 0%, rgba(186, 146, 112, 0.01) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Private dashboard iframe mode: existing public sections are isolated so a
   section preview never presents the whole invitation as its own preview. */
body.cms-section-preview { min-height: 100vh; overflow-x: hidden; }
body.cms-section-preview > #twinklingStars,
body.cms-section-preview > .mouse-ambient-light,
body.cms-section-preview > .golden-fog { display: none !important; }
body.cms-section-preview .cms-section-preview-card {
  width: min(100%, 720px); margin: 0 auto; min-height: 100vh; padding: 2rem;
  display: grid; align-content: center; gap: 1rem; background: var(--bg-dark-main);
  color: var(--white-pure); box-sizing: border-box;
}
body.cms-section-preview .cms-section-preview-card img { width: 100%; max-height: 48vh; object-fit: cover; border-radius: var(--border-radius-card); }
body.cms-section-preview #musicPlayerModal.active { display: flex; opacity: 1; visibility: visible; position: relative; min-height: 100vh; }

/* CMS animation switches ---------------------------------------------------
   These rules only apply when the public configuration explicitly asks for
   reduced motion or disables the Hero entrance.  They keep the approved
   default experience untouched while ensuring that reveal-only content never
   remains transparent when its animation is turned off. */
body.cms-reduced-animations *,
body.cms-reduced-animations *::before,
body.cms-reduced-animations *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body.cms-no-hero-animation .hero-content .hero-eyebrow,
body.cms-no-hero-animation .hero-content .gold-line-divider,
body.cms-no-hero-animation .hero-content .hero-names,
body.cms-no-hero-animation .hero-content .hero-invite,
body.cms-no-hero-animation .hero-content .hero-date,
body.cms-no-hero-animation .hero-content .hero-tagline,
body.cms-reduced-animations .hero-content .hero-eyebrow,
body.cms-reduced-animations .hero-content .gold-line-divider,
body.cms-reduced-animations .hero-content .hero-names,
body.cms-reduced-animations .hero-content .hero-invite,
body.cms-reduced-animations .hero-content .hero-date,
body.cms-reduced-animations .hero-content .hero-tagline {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.cms-no-hero-animation .hero-content .scroll-cue:not(.is-scrolled-out),
body.cms-reduced-animations .hero-content .scroll-cue:not(.is-scrolled-out) {
  animation: none !important;
  opacity: 0.8 !important;
  transform: none !important;
  filter: none !important;
}

/* Sections and the agenda have CSS-only hidden entrance states.  Reveal their
   completed visual state immediately when scroll effects are disabled. */
body.cms-reduced-animations .fade-in-up,
body.cms-reduced-animations .capture-card,
body.cms-reduced-animations .cinematic-reveal,
body.cms-reduced-animations .timeline-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.cms-reduced-animations .timeline-node {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

html[dir="rtl"] body.cms-reduced-animations .timeline-node {
  transform: translate(50%, -50%) scale(1) !important;
}

body.cms-reduced-animations .timeline-node-inner {
  opacity: 1 !important;
}

body.cms-reduced-animations .timeline-line-progress {
  height: 100% !important;
}

body.cms-reduced-animations .timeline-traveling-orb {
  opacity: 1 !important;
  top: 100% !important;
}

/* Hero readability and frosted-control refinement -------------------------
   Keep the approved typography and palette exactly as authored.  These
   layers only give the existing gold/white lettering and glass controls a
   dependable dark separation from bright video frames. */
.hero-content .hero-eyebrow,
.hero-content .hero-invite,
.hero-content .hero-tagline,
.hero-content .hero-date,
.hero-content .hero-date-weekday,
.hero-content .hero-date-main,
.hero-content .hero-date-main span,
.hero-content .hero-date-time {
  text-shadow:
    0 1px 1px rgba(3, 5, 9, 0.68),
    0 2px 5px rgba(3, 5, 9, 0.42),
    0 0 9px rgba(3, 5, 9, 0.24);
}

.hero-content .hero-names,
html[lang="ar"] .hero-content .hero-names {
  text-shadow:
    0 1px 1px rgba(3, 5, 9, 0.72),
    0 3px 10px rgba(3, 5, 9, 0.46),
    0 0 13px rgba(3, 5, 9, 0.30),
    0 0 12px rgba(236, 179, 128, 0.09);
}

.hero-content .hero-names .amp,
.hero-content .gold-line-divider span,
.hero-content .hero-date-main .sep {
  text-shadow:
    0 1px 1px rgba(3, 5, 9, 0.68),
    0 2px 5px rgba(3, 5, 9, 0.42),
    0 0 8px rgba(3, 5, 9, 0.22);
}

.hero-content .hero-date {
  filter: drop-shadow(0 3px 7px rgba(3, 5, 9, 0.19));
}

.hero .scroll-cue {
  background:
    linear-gradient(135deg, rgba(245, 205, 163, 0.26) 0%, rgba(236, 179, 128, 0.13) 44%, rgba(8, 12, 20, 0.26) 100%),
    rgba(80, 58, 38, 0.24);
  border-color: rgba(245, 205, 163, 0.48);
  backdrop-filter: blur(22px) saturate(165%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(165%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 248, 236, 0.56),
    inset 0 -1px 1px rgba(125, 75, 32, 0.12),
    0 4px 11px rgba(242, 181, 94, 0.12),
    0 0 10px rgba(242, 181, 94, 0.10);
  text-shadow: 0 1px 3px rgba(3, 5, 9, 0.48);
}

.site-header .music-btn,
.site-header .lang-dropdown-btn,
#preloader .lang-dropdown-btn {
  background:
    linear-gradient(135deg, rgba(245, 205, 163, 0.16), rgba(236, 179, 128, 0.05) 52%, rgba(8, 12, 20, 0.34)),
    rgba(8, 12, 20, 0.34);
  border-color: rgba(245, 205, 163, 0.42);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    inset 0 1px 1px rgba(255, 235, 210, 0.22),
    0 4px 10px rgba(3, 5, 9, 0.20),
    0 0 7px rgba(236, 179, 128, 0.05);
  text-shadow: 0 1px 4px rgba(3, 5, 9, 0.55);
}

.bottom-nav-bar {
  background:
    linear-gradient(135deg, rgba(245, 205, 163, 0.24) 0%, rgba(236, 179, 128, 0.12) 42%, rgba(8, 12, 20, 0.32) 100%),
    rgba(80, 58, 38, 0.30);
  border-color: rgba(245, 205, 163, 0.34);
  backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 248, 236, 0.42),
    inset 0 -1px 1px rgba(125, 75, 32, 0.12),
    0 5px 14px rgba(242, 181, 94, 0.10),
    0 0 11px rgba(242, 181, 94, 0.08);
}

.bottom-nav-link,
.bottom-nav-link span {
  text-shadow: 0 1px 2px rgba(3, 5, 9, 0.38);
}

.bottom-nav-link svg {
  filter: drop-shadow(0 1px 2px rgba(3, 5, 9, 0.40));
}

.bottom-nav-link.active {
  background:
    linear-gradient(135deg, rgba(245, 205, 163, 0.26), rgba(236, 179, 128, 0.13) 55%, rgba(8, 12, 20, 0.22)),
    rgba(8, 12, 20, 0.18);
  border-color: rgba(245, 205, 163, 0.5);
  box-shadow:
    inset 0 1px 1px rgba(255, 235, 210, 0.16),
    0 2px 5px rgba(3, 5, 9, 0.08),
    0 0 5px rgba(236, 179, 128, 0.03);
}

.bottom-nav-link.nav-camera-featured {
  background: linear-gradient(135deg, rgba(137, 117, 99, 0.80) 0%, rgba(186, 146, 112, 0.76) 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 1px rgba(255, 235, 210, 0.16),
    0 2px 5px rgba(3, 5, 9, 0.09),
    0 0 5px rgba(236, 179, 128, 0.03);
}

/* Additive RSVP-style sheen: a transparent surface layer only.  The existing
   Scroll Down and fixed-bar backgrounds, colours, dimensions, and states stay intact. */
.hero .scroll-cue::before,
.bottom-nav-bar::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 248, 236, 0.05) 42%, rgba(242, 181, 94, 0.08) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 248, 236, 0.22), inset 0 -1px 1px rgba(125, 75, 32, 0.08);
}

.hero .scroll-cue .scroll-cue-text,
.hero .scroll-cue .scroll-cue-arrow,
.bottom-nav-list {
  position: relative;
  z-index: 1;
}

.hero .scroll-cue .scroll-cue-indicator-line {
  z-index: 1;
}

.hero .scroll-cue::after {
  z-index: 2;
}

/* Unified RSVP finish for every text call-to-action.
   Navigation, circular camera controls, and close buttons intentionally keep
   their specialised affordances rather than being turned into pill buttons. */
:is(
  .btn-primary-gold,
  .btn-save-gold,
  .btn-retake,
  .btn-open-invite,
  .btn-whatsapp-action,
  .btn-call-action,
  .btn-gold-outline:not(.btn-saved)
) {
  background: linear-gradient(100deg, #ffd0a0 0%, #f8c18a 46%, #d9a676 100%) !important;
  color: #1a1816 !important;
  border: 1px solid rgba(255, 226, 194, 0.78) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 248, 236, 0.56),
    inset 0 -1px 1px rgba(125, 75, 32, 0.12),
    0 4px 11px rgba(242, 181, 94, 0.12),
    0 0 10px rgba(242, 181, 94, 0.10) !important;
  text-shadow: 0 1px 1px rgba(255, 248, 236, 0.20);
}

:is(
  .btn-primary-gold,
  .btn-save-gold,
  .btn-retake,
  .btn-open-invite,
  .btn-whatsapp-action,
  .btn-call-action,
  .btn-gold-outline:not(.btn-saved)
):hover,
:is(
  .btn-primary-gold,
  .btn-save-gold,
  .btn-retake,
  .btn-open-invite,
  .btn-whatsapp-action,
  .btn-call-action,
  .btn-gold-outline:not(.btn-saved)
):focus-visible {
  background: linear-gradient(100deg, #ffdab0 0%, #fbc993 46%, #e0af80 100%) !important;
  border-color: rgba(255, 238, 216, 0.92) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 250, 240, 0.62),
    inset 0 -1px 1px rgba(125, 75, 32, 0.12),
    0 5px 13px rgba(242, 181, 94, 0.18),
    0 0 12px rgba(242, 181, 94, 0.16) !important;
}

/* ===========================================================================
   PHOTOBOOTH STUDIO CONTROLS
   Additive, camera-only controls.  Existing capture, stream, confirmation, and
   front/rear camera contracts remain intact; these styles simply turn the live
   camera overlay into a compact editorial glass studio.
   =========================================================================== */
.camera-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.photobooth-fullscreen-modal {
  background:
    radial-gradient(circle at 50% 0%, rgba(198, 143, 76, 0.14), transparent 42%),
    #080a0f;
}

.live-camera-view {
  padding: max(1rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  isolation: isolate;
  overflow: hidden;
}

.live-camera-video {
  filter: var(--camera-live-filter, none);
  transform: scale(var(--camera-live-zoom, 1));
  transition: filter 240ms ease, transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.camera-dark-overlay {
  background:
    linear-gradient(180deg, rgba(3, 5, 9, 0.55) 0%, rgba(3, 5, 9, 0.10) 26%, rgba(3, 5, 9, 0.06) 55%, rgba(3, 5, 9, 0.72) 100%);
}

.camera-studio-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.16));
}

.camera-studio-topbar {
  position: absolute;
  z-index: 30;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.camera-studio-menu {
  position: relative;
  z-index: 35;
}

.camera-studio-menu > summary {
  list-style: none;
}

.camera-studio-menu > summary::-webkit-details-marker {
  display: none;
}

.camera-studio-icon-btn {
  position: relative;
  z-index: 31;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #ffe4c6;
  background:
    linear-gradient(135deg, rgba(255, 234, 211, 0.25), rgba(210, 154, 91, 0.10) 54%, rgba(13, 16, 23, 0.38)),
    rgba(24, 20, 22, 0.36);
  border: 1px solid rgba(255, 230, 198, 0.62);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px rgba(255, 253, 245, 0.52),
    inset 0 -1px 1px rgba(74, 34, 9, 0.20),
    0 7px 22px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(227, 166, 95, 0.10);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.camera-studio-icon-btn svg {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.52));
}

.camera-studio-icon-btn:hover,
.camera-studio-menu[open] > .camera-studio-icon-btn,
.camera-studio-icon-btn:focus-visible {
  color: #fff7e8;
  border-color: rgba(255, 240, 220, 0.90);
  background:
    linear-gradient(135deg, rgba(255, 240, 220, 0.34), rgba(224, 165, 96, 0.18) 55%, rgba(13, 16, 23, 0.32)),
    rgba(24, 20, 22, 0.44);
  box-shadow:
    inset 0 1px 1px rgba(255, 253, 245, 0.68),
    inset 0 -1px 1px rgba(74, 34, 9, 0.20),
    0 9px 26px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(227, 166, 95, 0.20);
}

.camera-studio-icon-btn:hover { transform: translateY(-1px); }
.camera-studio-icon-btn:active { transform: translateY(0) scale(0.95); }
.camera-studio-icon-btn:focus-visible { outline: 2px solid #ffe4bd; outline-offset: 3px; }
.camera-studio-icon-btn[disabled] { opacity: 0.45; pointer-events: none; }

.camera-close-control {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
}

.camera-settings-popover,
.camera-flash-options,
.camera-filter-intensity-field {
  box-sizing: border-box;
  color: #fff0dc;
  background:
    linear-gradient(135deg, rgba(255, 235, 214, 0.22), rgba(190, 129, 60, 0.11)),
    rgba(11, 13, 19, 0.68);
  border: 1px solid rgba(255, 228, 195, 0.46);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), 0 14px 35px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.camera-settings-popover {
  width: min(236px, calc(100vw - 2rem));
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  margin-top: 0.55rem;
  border-radius: 18px;
}

.camera-popover-title,
.camera-range-field span,
.camera-filter-intensity-field span {
  margin: 0;
  color: #ffe4c5;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.camera-range-field {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.camera-range-field input,
.camera-filter-intensity-field input {
  width: 100%;
  accent-color: #efb675;
  cursor: pointer;
}

.camera-flash-options {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.2rem;
  padding: 0.3rem;
  margin: 0.55rem 0 0 -1rem;
  border-radius: 999px;
}

.camera-flash-options input,
.camera-zoom-control input,
.camera-filter-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.camera-flash-options label {
  min-width: 3rem;
  padding: 0.48rem 0.55rem;
  color: rgba(255, 241, 222, 0.74);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.camera-flash-options input:checked + label {
  color: #261b13;
  background: linear-gradient(110deg, #ffe0b5, #e7af78);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65), 0 2px 9px rgba(231, 175, 120, 0.25);
}

.camera-overlay-header {
  position: absolute;
  z-index: 8;
  top: clamp(5.5rem, 14vh, 8.5rem);
  inset-inline: 1rem;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  max-width: 760px;
  margin: 0 auto;
  pointer-events: none;
}

.camera-watermark-date-row {
  width: min(100%, 650px);
  display: grid;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  align-items: center;
  column-gap: clamp(0.5rem, 2vw, 1.1rem);
}

.camera-watermark-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(254, 202, 141, 0.78), transparent);
  box-shadow: 0 0 8px rgba(231, 175, 111, 0.3);
}

.camera-couple-names {
  max-inline-size: 100%;
  margin: 0;
  color: #ffdeb2;
  font-size: clamp(2.15rem, 7vw, 4.5rem);
  line-height: 0.86;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72), 0 0 20px rgba(221, 154, 74, 0.28);
}

.camera-date-sub {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  color: #fff0dc;
  font-size: clamp(0.55rem, 1.9vw, 0.75rem);
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.70);
}

.camera-focus-reticle {
  position: absolute;
  z-index: 9;
  top: 50%;
  inset-inline-start: 50%;
  width: clamp(116px, 29vw, 174px);
  height: clamp(116px, 29vw, 174px);
  padding: 0;
  color: #ffc77f;
  background: transparent;
  border: 0;
  border-radius: 22px;
  transform: translate(-50%, -42%);
  cursor: crosshair;
  opacity: 0.88;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 180ms ease;
}

.camera-focus-reticle:hover,
.camera-focus-reticle:focus-visible,
.camera-focus-reticle.is-focusing,
.camera-focus-reticle.is-focused {
  opacity: 1;
  transform: translate(-50%, -42%) scale(1.04);
  filter: drop-shadow(0 0 7px rgba(255, 189, 104, 0.44));
}

.camera-focus-reticle:active { transform: translate(-50%, -42%) scale(0.92); }
.camera-focus-reticle:focus-visible { outline: 1px solid rgba(255, 218, 174, 0.88); outline-offset: 7px; }

.camera-focus-corner {
  position: absolute;
  width: 27%;
  height: 27%;
  border-color: currentColor;
  border-style: solid;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.72));
}

.camera-focus-corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 14px 0 0 0; }
.camera-focus-corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 14px 0 0; }
.camera-focus-corner--br { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 14px 0; }
.camera-focus-corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 14px; }

.camera-focus-cross::before,
.camera-focus-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 99px;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}
.camera-focus-cross::before { width: 25px; height: 1.5px; }
.camera-focus-cross::after { width: 1.5px; height: 25px; }

.camera-studio-bottom-area {
  position: absolute;
  z-index: 20;
  bottom: max(0.8rem, env(safe-area-inset-bottom));
  inset-inline: max(0.7rem, env(safe-area-inset-left)) max(0.7rem, env(safe-area-inset-right));
  display: grid;
  justify-items: center;
  gap: clamp(0.45rem, 1.2vh, 0.8rem);
  max-width: 720px;
  margin: 0 auto;
}

.camera-zoom-control {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(2.8rem, 1fr));
  width: min(320px, calc(100vw - 7rem));
  padding: 0.25rem;
  color: #fff4e4;
  background: rgba(35, 27, 26, 0.36);
  border: 1px solid rgba(255, 229, 198, 0.48);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255, 250, 241, 0.34), 0 7px 20px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(17px) saturate(145%);
  -webkit-backdrop-filter: blur(17px) saturate(145%);
}

.camera-zoom-control label {
  display: grid;
  place-items: center;
  min-height: 37px;
  padding: 0 0.5rem;
  color: rgba(255, 241, 223, 0.76);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: clamp(0.76rem, 2.6vw, 1rem);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.camera-zoom-control input:checked + label {
  color: #fff7ec;
  background: linear-gradient(135deg, rgba(247, 198, 139, 0.52), rgba(177, 110, 57, 0.38));
  border: 1px solid rgba(255, 229, 194, 0.58);
  box-shadow: inset 0 1px 1px rgba(255, 249, 238, 0.45), 0 3px 12px rgba(0, 0, 0, 0.23);
}

.camera-filter-control {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.2rem, 0.8vw, 0.5rem);
  padding: clamp(0.3rem, 0.8vw, 0.48rem);
  background:
    linear-gradient(105deg, rgba(255, 237, 218, 0.13), rgba(186, 119, 54, 0.08) 48%, rgba(12, 14, 20, 0.20)),
    rgba(21, 18, 20, 0.30);
  border: 1px solid rgba(255, 225, 188, 0.24);
  border-radius: 18px;
  box-shadow: inset 0 1px 1px rgba(255, 252, 244, 0.21), inset 0 -1px 1px rgba(82, 37, 10, 0.16);
}

.camera-filter-option {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.16rem 0.32rem;
  color: rgba(255, 243, 229, 0.75);
  background: linear-gradient(180deg, rgba(255, 245, 232, 0.04), rgba(0, 0, 0, 0.09));
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: clamp(0.38rem, 1.45vw, 0.58rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.camera-filter-name {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.52);
}

.camera-filter-swatch {
  position: relative;
  width: 100%;
  max-width: 72px;
  aspect-ratio: 0.84;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 238, 216, 0.48);
  border-radius: 13px;
  background-color: #7b5637;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.42),
    inset 0 -8px 12px rgba(14, 9, 6, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.30);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* A single bundled wedding-venue image gives every option a truthful visual
   treatment preview without adding a remote or artificial photo dependency. */
.camera-filter-swatch::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  background:
    linear-gradient(180deg, rgba(255, 224, 179, 0.06), rgba(8, 7, 9, 0.18)),
    url("assets/paradise-yacht-venue.jpg") center center / cover no-repeat;
  transform: scale(1.025);
}

.camera-filter-swatch::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 244, 211, 0.54), transparent 18%),
    linear-gradient(120deg, rgba(255, 238, 211, 0.16), transparent 32%, transparent 70%, rgba(83, 38, 14, 0.15));
  mix-blend-mode: screen;
  opacity: 0.78;
}
.camera-filter-swatch--original::before { filter: none; }
.camera-filter-swatch--golden::before { filter: sepia(0.54) saturate(1.48) contrast(1.06) brightness(1.08) hue-rotate(-8deg); }
.camera-filter-swatch--vivid-warm::before { filter: sepia(0.30) saturate(1.88) contrast(1.13) brightness(1.04) hue-rotate(-13deg); }
.camera-filter-swatch--dramatic::before { filter: contrast(1.54) saturate(0.91) brightness(0.76); }
.camera-filter-swatch--soft::before { filter: brightness(1.16) saturate(0.76) contrast(0.85) blur(0.35px); }
.camera-filter-swatch--bw::before { filter: grayscale(1) contrast(1.27) brightness(1.04); }
.camera-filter-swatch--moody::before { filter: sepia(0.20) saturate(0.57) contrast(1.28) brightness(0.61) hue-rotate(-5deg); }

.camera-filter-control input:checked + .camera-filter-option {
  color: #ffdfa8;
  background: linear-gradient(180deg, rgba(255, 222, 169, 0.16), rgba(122, 68, 23, 0.18));
  border-color: rgba(255, 213, 139, 0.70);
  box-shadow: inset 0 1px 1px rgba(255, 251, 238, 0.32), 0 0 14px rgba(239, 174, 83, 0.14);
}
.camera-filter-control input:checked + .camera-filter-option .camera-filter-swatch {
  border-color: #ffd276;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.66),
    0 0 0 2px rgba(246, 184, 84, 0.30),
    0 0 18px rgba(242, 178, 72, 0.48),
    0 6px 15px rgba(0, 0, 0, 0.34);
  transform: translateY(-2px);
}

.camera-filter-control input:focus-visible + .camera-filter-option {
  outline: 2px solid rgba(255, 226, 174, 0.96);
  outline-offset: 2px;
}

.camera-filter-options-menu {
  position: absolute;
  z-index: 40;
  bottom: 0;
  inset-inline-start: 0;
}

.camera-filter-options-popover {
  position: absolute;
  bottom: calc(100% + 0.58rem);
  inset-inline-start: 0;
  box-sizing: border-box;
  width: min(710px, calc(100vw - 1.4rem));
  max-height: min(56vh, 440px);
  max-height: min(56svh, 440px);
  display: grid;
  gap: 0.75rem;
  padding: clamp(0.6rem, 1.5vw, 0.82rem);
  color: #fff0dc;
  background:
    linear-gradient(135deg, rgba(255, 241, 223, 0.25), rgba(190, 129, 60, 0.14) 54%, rgba(19, 16, 18, 0.32)),
    rgba(11, 13, 19, 0.72);
  border: 1px solid rgba(255, 228, 195, 0.50);
  border-radius: 21px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.34),
    0 14px 35px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(227, 166, 95, 0.10);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.camera-filter-intensity-field {
  width: 100%;
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.76rem 0.9rem;
  margin: 0;
  border-radius: 16px;
}

.camera-studio-capture-row {
  position: relative;
  width: min(100%, 420px);
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.capture-btn-outer {
  grid-column: 2;
  width: clamp(68px, 17vw, 84px);
  height: clamp(68px, 17vw, 84px);
  z-index: 10;
  border: 3px solid rgba(255, 229, 197, 0.92);
  background: rgba(37, 28, 27, 0.33);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.43), 0 7px 24px rgba(0, 0, 0, 0.36), 0 0 18px rgba(225, 161, 87, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.capture-btn-inner {
  width: 74%;
  height: 74%;
  border: 1px solid rgba(255, 243, 224, 0.82);
  background: linear-gradient(135deg, #ffe2b9 0%, #ecb477 52%, #c9874e 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(119, 59, 20, 0.13), 0 0 15px rgba(244, 184, 104, 0.26);
}

.camera-switch-control {
  position: static;
  grid-column: 3;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 0.2rem;
}

.camera-switch-btn {
  width: 54px;
  min-height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #ffe1bd;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 233, 209, 0.28), rgba(202, 139, 73, 0.13)),
    rgba(20, 20, 24, 0.37);
  border-color: rgba(255, 229, 197, 0.62);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 6px 18px rgba(0, 0, 0, 0.31);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.camera-switch-btn svg { width: 25px; height: 25px; }
.camera-switch-btn > span { display: none; }
.camera-switch-status { max-width: 8.5rem; font-size: 0.43rem; line-height: 1.15; text-align: end; }

.camera-switch-btn:hover:not(:disabled),
.camera-switch-btn.is-touch-pointer-active:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(255, 241, 220, 0.88);
}

.camera-switch-btn:disabled { opacity: 0.54; }

.camera-studio-topbar [hidden],
.camera-studio-bottom-area [hidden],
.camera-watermark-preview[hidden],
.camera-focus-reticle[hidden],
.camera-close-control[hidden] { display: none !important; }

/* Compact portrait tuning is deliberately structural: no camera control can
   widen the viewport or collide with the iOS home indicator at 360px. */
@media (max-width: 420px) {
  .camera-studio-topbar { gap: 0.5rem; }
  .camera-studio-icon-btn { width: 46px; height: 46px; }
  .camera-studio-icon-btn svg { width: 21px; height: 21px; }
  .camera-overlay-header { top: max(4.75rem, 12vh); column-gap: 0.45rem; }
  .camera-couple-names { font-size: clamp(1.9rem, 9vw, 2.55rem); }
  .camera-date-sub { font-size: 0.5rem; letter-spacing: 0.12em; }
  .camera-focus-reticle { width: min(36vw, 134px); height: min(36vw, 134px); }
  .camera-studio-bottom-area { gap: 0.43rem; }
  .camera-filter-options-popover { width: min(100%, calc(100vw - 1.4rem)); gap: 0.55rem; padding: 0.55rem; border-radius: 18px; }
  .camera-filter-control { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.34rem; }
  .camera-filter-option { gap: 0.18rem; font-size: 0.48rem; }
  .camera-filter-swatch { border-radius: 8px; }
  .camera-studio-capture-row { min-height: 70px; }
  .camera-switch-btn { width: 48px; min-height: 48px; }
  .camera-switch-btn svg { width: 22px; height: 22px; }
  .camera-switch-status { display: none; }
  .camera-filter-options-menu .camera-studio-icon-btn { width: 45px; height: 45px; }
  .camera-filter-intensity-field { grid-template-columns: 1fr; gap: 0.38rem; width: 100%; }
  .camera-settings-popover { width: min(218px, calc(100vw - 1.4rem)); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .camera-overlay-header { top: max(3.85rem, 9vh); }
  .camera-couple-names { font-size: clamp(1.7rem, 5vw, 2.6rem); }
  .camera-focus-reticle { width: min(21vw, 120px); height: min(21vw, 120px); transform: translate(-50%, -35%); }
  .camera-filter-options-popover { width: min(68vw, 580px); max-height: min(64vh, 260px); max-height: min(64svh, 260px); gap: 0.48rem; padding: 0.5rem; }
  .camera-filter-control { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .camera-filter-swatch { max-width: 48px; }
  .camera-filter-option { font-size: 0.38rem; }
  .camera-studio-bottom-area { bottom: max(0.4rem, env(safe-area-inset-bottom)); gap: 0.28rem; }
  .camera-zoom-control { min-height: 30px; }
  .camera-zoom-control label { min-height: 28px; }
  .camera-studio-capture-row { min-height: 60px; }
  .capture-btn-outer { width: 58px; height: 58px; }
  .camera-switch-btn { width: 44px; min-height: 44px; }
  .camera-switch-status { display: none; }
}

/* Camera studio motion is deliberately scoped to the Photobooth. It follows
   the invitation's existing soft rise / champagne glow language without
   changing any public-page component. JavaScript adds the state classes when
   the live stream becomes available, so the entrance never plays behind the
   scanner screen. */
@keyframes cameraStudioControlRise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.975);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes cameraStudioWatermarkReveal {
  from {
    opacity: 0;
    filter: blur(7px);
    letter-spacing: 0.22em;
  }
  to {
    opacity: 1;
    filter: blur(0);
    letter-spacing: normal;
  }
}

@keyframes cameraStudioFocusSignal {
  0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(255, 189, 104, 0)); }
  60% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 189, 104, 0.48)); }
  100% { opacity: 0.88; filter: drop-shadow(0 0 0 rgba(255, 189, 104, 0)); }
}

@keyframes cameraFilterOptionsReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0) scale(0.975);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes cameraFilterOptionsDismiss {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.98); }
}

@keyframes cameraFilterIconTurn {
  from { transform: rotate(-18deg) scale(0.84); opacity: 0.6; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes cameraFilterSelected {
  0% { transform: translateY(0) scale(0.96); }
  65% { transform: translateY(-3px) scale(1.035); }
  100% { transform: translateY(-2px) scale(1); }
}

.live-camera-view.is-opening .camera-studio-topbar {
  animation: cameraStudioControlRise 620ms cubic-bezier(0.16, 1, 0.3, 1) both 70ms;
}

#photoboothFullModal:has(.live-camera-view.is-opening) .camera-close-control {
  animation: cameraStudioControlRise 560ms cubic-bezier(0.16, 1, 0.3, 1) both 140ms;
}

.live-camera-view.is-opening .camera-overlay-header {
  animation: cameraStudioWatermarkReveal 880ms cubic-bezier(0.16, 1, 0.3, 1) both 185ms;
}

.live-camera-view.is-opening .camera-focus-reticle {
  animation: cameraStudioFocusSignal 720ms cubic-bezier(0.16, 1, 0.3, 1) both 290ms;
}

.live-camera-view.is-opening .camera-studio-bottom-area {
  animation: cameraStudioControlRise 680ms cubic-bezier(0.16, 1, 0.3, 1) both 350ms;
}

.camera-filter-options-menu[open] .camera-filter-options-popover,
.camera-filter-options-menu.is-opening .camera-filter-options-popover,
.live-camera-view.is-filter-options-open .camera-filter-options-popover {
  transform-origin: left bottom;
  animation: cameraFilterOptionsReveal 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[dir="rtl"] .camera-filter-options-menu[open] .camera-filter-options-popover,
[dir="rtl"] .camera-filter-options-menu.is-opening .camera-filter-options-popover,
[dir="rtl"] .live-camera-view.is-filter-options-open .camera-filter-options-popover {
  transform-origin: right bottom;
}

.camera-filter-options-menu.is-closing .camera-filter-options-popover {
  transform-origin: left bottom;
  pointer-events: none;
  animation: cameraFilterOptionsDismiss 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

.camera-filter-options-menu[open] .camera-studio-icon-btn svg,
.camera-filter-options-menu.is-open .camera-studio-icon-btn svg {
  animation: cameraFilterIconTurn 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.camera-studio-menu[open] .camera-settings-popover,
.camera-studio-menu[open] .camera-flash-options {
  transform-origin: left top;
  animation: cameraFilterOptionsReveal 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

[dir="rtl"] .camera-studio-menu[open] .camera-settings-popover,
[dir="rtl"] .camera-studio-menu[open] .camera-flash-options {
  transform-origin: right top;
}

.camera-studio-menu[open] > .camera-studio-icon-btn:not(#btnCameraFilterOptions) svg {
  animation: cameraFilterIconTurn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.camera-filter-control input:checked + .camera-filter-option .camera-filter-swatch {
  animation: cameraFilterSelected 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.camera-filter-option:hover .camera-filter-swatch,
.camera-filter-option:focus-within .camera-filter-swatch {
  transform: translateY(-1px) scale(1.025);
  border-color: rgba(255, 229, 194, 0.72);
}

/* The controller adds this short-lived state for touch, keyboard and mouse
   input. It keeps each camera action tactile without introducing a new motion
   system outside the studio. The reticle has its own translated coordinate
   system, so it is intentionally excluded from the transform pulse. */
@keyframes cameraStudioPress {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  42% { transform: translate3d(0, 1px, 0) scale(0.955); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.live-camera-view.is-camera-control-interacting [data-camera-interactive].is-interacting:not(.camera-focus-reticle) {
  animation: cameraStudioPress 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.live-camera-view.is-camera-control-interacting[data-camera-interaction="focus"] .camera-focus-reticle {
  animation: cameraStudioFocusSignal 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.live-camera-view.is-filter-selected .camera-studio-vignette {
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(90deg, rgba(41, 19, 6, 0.16), transparent 22%, transparent 78%, rgba(41, 19, 6, 0.16));
  transition: background 320ms ease;
}

.live-camera-view[data-camera-filter-active="false"] .camera-studio-vignette {
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.16));
}

@media (prefers-reduced-motion: reduce) {
  .photobooth-fullscreen-modal .camera-studio-topbar,
  .photobooth-fullscreen-modal .camera-close-control,
  .photobooth-fullscreen-modal .camera-overlay-header,
  .photobooth-fullscreen-modal .camera-focus-reticle,
  .photobooth-fullscreen-modal .camera-studio-bottom-area,
  .photobooth-fullscreen-modal .camera-filter-options-popover,
  .photobooth-fullscreen-modal .camera-filter-options-menu .camera-studio-icon-btn svg,
  .photobooth-fullscreen-modal .camera-filter-option,
  .photobooth-fullscreen-modal .camera-filter-swatch,
  .photobooth-fullscreen-modal [data-camera-interactive].is-interacting {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Final Photobooth composition override. It intentionally lives after every
   camera rule so the mobile control dock cannot be split by legacy absolute
   positioning. */
.live-camera-view.is-camera-countdown-active .camera-focus-reticle,
.live-camera-view.is-camera-capturing .camera-focus-reticle {
  visibility: hidden;
  opacity: 0;
}

.camera-capture-countdown {
  min-width: clamp(9.4rem, 34vw, 12rem);
  min-height: clamp(9.4rem, 34vw, 12rem);
  place-content: center;
  padding: 1.2rem;
  gap: .75rem;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 16%, rgba(255,230,194,.012), transparent 50%), rgba(8,10,14,.008);
  border: 1px solid rgba(255,226,185,.22);
  outline: 1px solid rgba(255,238,215,.025);
  outline-offset: -8px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.07), 0 8px 26px rgba(0,0,0,.045), 0 0 16px rgba(229,167,84,.035);
  backdrop-filter: blur(.6px) saturate(104%);
  -webkit-backdrop-filter: blur(.6px) saturate(104%);
}
.camera-capture-countdown::before,
.camera-capture-countdown::after { display: none; }
.camera-capture-countdown__number { font-size: clamp(4.8rem,18vw,7rem); line-height:.78; text-shadow:0 2px 8px rgba(0,0,0,.76),0 0 18px rgba(239,183,106,.28); }
.camera-capture-countdown__label { max-width:11rem; font-size:clamp(.56rem,1.6vw,.7rem); letter-spacing:.17em; text-wrap:balance; text-shadow:0 2px 6px rgba(0,0,0,.86); }

.camera-studio-capture-row {
  width:min(100%,340px);
  min-height:82px;
  grid-template-columns:58px minmax(84px,1fr) 58px;
  column-gap:clamp(1.15rem,5vw,2rem);
  padding:.55rem .72rem;
  border:1px solid rgba(255,226,192,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,237,216,.1),rgba(16,18,24,.24));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(13px) saturate(140%);
  -webkit-backdrop-filter:blur(13px) saturate(140%);
}
.camera-studio-capture-row .capture-btn-outer {
  grid-column:2;
  justify-self:center;
  margin-inline:0;
}
.camera-filter-options-menu {
  bottom:2.68rem;
  inset-inline-start:calc(50% - 170px + .72rem);
}
.camera-filter-options-menu > .camera-studio-icon-btn { width:54px; height:54px; }
.camera-switch-control { justify-self:center; justify-items:center; }
.camera-switch-btn { width:54px; min-height:54px; }
.camera-capture-mode-summary { max-width:22rem; margin-top:-.08rem; font-size:clamp(.5rem,1.5vw,.62rem); line-height:1.4; letter-spacing:.14em; text-wrap:balance; }

@media (max-width:420px) {
  .camera-capture-countdown { min-width:9.6rem; min-height:9.6rem; padding:1rem; border-radius:29px; }
  .camera-capture-countdown__number { font-size:5.35rem; }
  .camera-capture-countdown__label { font-size:.57rem; }
  .camera-studio-capture-row { width:min(100%,304px); grid-template-columns:48px minmax(76px,1fr) 48px; column-gap:1.15rem; min-height:74px; padding:.4rem .58rem; }
  .camera-filter-options-menu { inset-inline-start:calc(50% - 152px + .58rem); bottom:2.55rem; }
  .camera-filter-options-menu > .camera-studio-icon-btn,
  .camera-switch-btn { width:48px; height:48px; min-height:48px; }
  .capture-btn-outer { width:70px; height:70px; }
  .camera-capture-mode-summary { max-width:18rem; font-size:.52rem; }
  .camera-switch-control { position:relative; }
  .camera-switch-status {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .camera-switch-btn::after {
    content:"";
    position:absolute;
    inset-inline-end:3px;
    bottom:3px;
    width:7px;
    height:7px;
    border:1px solid rgba(255,245,224,.84);
    border-radius:50%;
    background:#d8aa5d;
    box-shadow:0 0 8px rgba(235,180,91,.65);
  }
}

/* Center the three primary camera actions as one optical group. The switch
   status remains available to assistive technology, but never affects the
   visual alignment of the filter, shutter, or camera-toggle controls. */
.camera-studio-capture-row {
  width: fit-content;
  max-width: calc(100vw - 1.4rem);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 5vw, 1.9rem);
  padding: .52rem .72rem;
  margin-inline: auto;
}
.camera-filter-options-menu {
  position: relative;
  inset: auto;
  bottom: auto;
  flex: 0 0 auto;
}
.camera-studio-capture-row .capture-btn-outer {
  position: relative;
  grid-column: auto;
  flex: 0 0 auto;
  justify-self: auto;
}
.camera-switch-control {
  position: relative;
  grid-column: auto;
  flex: 0 0 auto;
  justify-self: auto;
}
.camera-capture-mode-summary {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
@media (max-width:420px) {
  .camera-studio-capture-row {
    width: fit-content;
    gap: 1.05rem;
    padding: .42rem .62rem;
  }
  .camera-filter-options-menu { inset: auto; bottom: auto; }
}

/* The three primary actions share one row, with the shutter locked to the
   optical centre. Side controls never push it left or right. */
.camera-studio-capture-row {
  position: relative !important;
  isolation: isolate;
  display: block !important;
  width: min(100%, 372px) !important;
  max-width: calc(100vw - 1.4rem);
  min-height: 76px;
  height: 76px;
  padding: 0 !important;
  margin-inline: auto;
}
.camera-studio-capture-row > .camera-filter-options-menu,
.camera-studio-capture-row > .capture-btn-outer,
.camera-studio-capture-row > .camera-switch-control {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  inset-block-start: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.camera-studio-capture-row > .camera-filter-options-menu {
  /* Do not transform this parent: a transformed ancestor traps the fixed
     filter sheet inside the 54px icon and causes the clipped-strip bug. */
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  top: calc(50% - 27px) !important;
  left: auto !important;
  right: .55rem !important;
  transform: none !important;
}
.camera-studio-capture-row > .capture-btn-outer {
  /* Explicit physical centering prevents inherited animation/grid rules
     from changing the shutter’s position. */
  inset-inline-start: 50% !important;
  inset-inline-end: auto !important;
  left: 50% !important;
  right: auto !important;
  width: 84px;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  animation: cameraShutterCentreGlow 1.8s ease-in-out infinite !important;
}
.camera-studio-capture-row > .camera-switch-control {
  inset-inline-end: auto !important;
  inset-inline-start: auto !important;
  top: calc(50% - 27px) !important;
  left: .55rem !important;
  right: auto !important;
  width: 54px !important;
  min-width: 54px !important;
  transform: none !important;
}
@keyframes cameraShutterCentreGlow {
  0%, 100% { box-shadow: inset 0 1px 1px rgba(255,255,255,.43), 0 7px 24px rgba(0,0,0,.36), 0 0 18px rgba(225,161,87,.28); }
  50% { box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 7px 24px rgba(0,0,0,.36), 0 0 28px rgba(245,190,110,.48); }
}

/* Filter options are a centered, scrollable studio sheet—not a small panel
   tied to the left action button. */
.camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover {
  position: fixed !important;
  z-index: 10020;
  top: 50% !important;
  left: .55rem !important;
  right: .55rem !important;
  bottom: auto !important;
  inset: 50% .55rem auto .55rem !important;
  width: auto !important;
  max-height: min(82svh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
}
.camera-filter-options-menu[open] .camera-filter-options-popover,
.camera-filter-options-menu.is-opening .camera-filter-options-popover,
.live-camera-view.is-filter-options-open .camera-filter-options-popover {
  transform-origin: center center !important;
  animation: cameraFilterOptionsVerticalReveal 300ms cubic-bezier(.16, 1, .3, 1) both;
}
.camera-filter-options-menu.is-closing .camera-filter-options-popover {
  transform-origin: center center !important;
  animation: cameraFilterOptionsVerticalDismiss 180ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes cameraFilterOptionsCenterReveal {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.975); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cameraFilterOptionsCenterDismiss {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -47%) scale(.975); }
}
@keyframes cameraFilterOptionsVerticalReveal {
  from { opacity: 0; transform: translateY(-47%) scale(.975); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes cameraFilterOptionsVerticalDismiss {
  from { opacity: 1; transform: translateY(-50%) scale(1); }
  to { opacity: 0; transform: translateY(-47%) scale(.975); }
}

/* The live status moves into the one concise, centered information line. */
.camera-switch-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.camera-capture-mode-summary {
  width: 100%;
  max-width: min(100%, 30rem);
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 420px) {
  .camera-studio-capture-row {
    width: min(100%, 304px) !important;
    min-height: 74px;
    height: 74px;
  }
  .camera-studio-capture-row > .capture-btn-outer { width: 70px; }
  .camera-studio-capture-row > .camera-filter-options-menu,
  .camera-studio-capture-row > .camera-switch-control { top: calc(50% - 24px) !important; }
  .camera-studio-capture-row > .camera-switch-control { width: 48px !important; min-width: 48px !important; }
}

/* Filter carousel containment: every card stays whole, scrolls when space is
   tight, and never shares a layer with the floating camera actions. */
.camera-studio-capture-row { z-index: 70; }
.camera-studio-capture-row > .camera-filter-options-menu { z-index: 80; }
.camera-studio-capture-row > .capture-btn-outer,
.camera-studio-capture-row > .camera-switch-control { z-index: 81; }
.camera-studio-capture-row > .camera-filter-options-menu[open] { z-index: 10040; }
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .capture-btn-outer,
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .camera-switch-control { z-index: 81; }

.camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover {
  z-index: 10050;
  box-sizing: border-box;
  width: min(720px, calc(100vw - 1.25rem));
  padding: clamp(.8rem, 2.4vw, 1.15rem);
  display: grid;
  gap: .62rem;
  max-height: min(calc(100svh - 1.5rem), 23rem);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(135deg, rgba(255, 222, 176, .16), rgba(161, 100, 42, .08) 44%, rgba(8, 12, 17, .46)),
    rgba(12, 15, 20, .56);
  border: 1px solid rgba(255, 219, 163, .58);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.26), inset 0 -1px 1px rgba(92,48,15,.2), 0 18px 48px rgba(0,0,0,.4), 0 0 20px rgba(230,169,82,.12);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover::before,
.camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover::after { display: none; }

.camera-filter-control {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.5rem, 1.5vw, .72rem);
  width: 100%;
  padding: .08rem .15rem .48rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .65rem;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(239,181,103,.54) transparent;
}

/* Opening the studio sheet gives it its own clean layer. The capture and
   switch controls remain in the DOM but do not visually compete with it. */
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .capture-btn-outer,
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .camera-switch-control {
  opacity: 0;
  pointer-events: none;
}
.camera-filter-control::-webkit-scrollbar { height: 5px; }
.camera-filter-control::-webkit-scrollbar-thumb { background: rgba(239,181,103,.5); border-radius: 999px; }
.camera-filter-control::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.camera-filter-option {
  flex: 0 0 clamp(70px, 10.1vw, 78px);
  width: clamp(70px, 10.1vw, 78px);
  min-width: clamp(70px, 10.1vw, 78px);
  min-height: 117px;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  gap: .42rem;
  padding: .35rem .26rem .5rem;
  border: 1px solid transparent;
  border-radius: 14px;
}
.camera-filter-swatch {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 82px;
  aspect-ratio: auto;
  border-radius: 11px;
  overflow: hidden;
}
.camera-filter-name {
  display: grid;
  min-height: 1.7rem;
  place-items: start center;
  padding-top: .16rem;
  text-align: center;
  line-height: 1.22;
  text-wrap: balance;
}
.camera-filter-control input:checked + .camera-filter-option {
  background: linear-gradient(180deg, rgba(255,223,174,.13), rgba(117,65,25,.12));
  border-color: rgba(255,215,143,.76);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.26), 0 4px 13px rgba(0,0,0,.23);
}
.camera-filter-control input:checked + .camera-filter-option .camera-filter-swatch {
  transform: none;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.58), 0 0 0 2px rgba(246,184,84,.46), 0 4px 12px rgba(0,0,0,.3);
}
.camera-filter-intensity-field {
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(6.7rem, auto) minmax(0, 1fr);
  gap: .8rem;
  margin-top: .7rem;
  padding: .72rem .82rem;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,230,199,.14), rgba(123,74,33,.08)), rgba(8,11,16,.28);
  border-color: rgba(255,220,165,.42);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 5px 16px rgba(0,0,0,.18);
}
.camera-filter-intensity-field input { min-width: 0; }

@media (max-width: 620px) {
  .camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover {
    inset-inline: .5rem !important;
    width: auto !important;
    max-height: calc(100svh - 1rem);
    padding: .78rem;
    border-radius: 18px;
  }
  /* Present every filter as a complete card. On a short phone screen the
     sheet itself scrolls vertically instead of showing a clipped half-card. */
  .camera-filter-control {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: .42rem;
    padding: .05rem 0 .38rem;
    overflow: visible;
    scroll-snap-type: none;
  }
  .camera-filter-option {
    width: auto;
    min-width: 0;
    min-height: 96px;
    padding: .28rem .18rem .38rem;
    gap: .28rem;
  }
  .camera-filter-swatch { height: clamp(56px, 18vw, 70px); }
  .camera-filter-name { min-height: 1.35rem; padding-top: .08rem; font-size: .46rem; }
  .camera-filter-intensity-field { grid-template-columns: 1fr; gap: .42rem; margin-top: .55rem; }
}

/* Floating filter menu: anchor it above the zoom control rather than the
   viewport centre. The trigger remains in the capture frame below. */
.camera-studio-capture-row > .camera-filter-options-menu {
  /* Let the sheet position against the full capture row, not the 54px
     details element that contains its trigger. */
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
.camera-studio-capture-row > .camera-filter-options-menu > summary {
  position: absolute;
  z-index: 82;
  top: calc(50% - 27px);
  right: .55rem;
  display: grid;
  place-items: center;
}
.camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 3.6rem) !important;
  left: 50% !important;
  right: auto !important;
  inset: auto auto calc(100% + 3.6rem) 50% !important;
  width: min(720px, calc(100vw - 1rem)) !important;
  max-height: min(44svh, 22rem);
  transform: translateX(-50%) !important;
  transform-origin: center bottom !important;
}
.camera-filter-options-menu[open] .camera-filter-options-popover,
.camera-filter-options-menu.is-opening .camera-filter-options-popover,
.live-camera-view.is-filter-options-open .camera-filter-options-popover {
  animation: cameraFilterOptionsAboveZoomReveal 280ms cubic-bezier(.16, 1, .3, 1) both;
}
.camera-filter-options-menu.is-closing .camera-filter-options-popover {
  animation: cameraFilterOptionsAboveZoomDismiss 170ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes cameraFilterOptionsAboveZoomReveal {
  from { opacity: 0; transform: translateX(-50%) translateY(.55rem) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes cameraFilterOptionsAboveZoomDismiss {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to { opacity: 0; transform: translateX(-50%) translateY(.35rem) scale(.98); }
}
/* The three actions stay usable and visually contained while the menu floats. */
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .capture-btn-outer,
.camera-studio-capture-row > .camera-filter-options-menu[open] ~ .camera-switch-control {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 620px) {
  .camera-studio-capture-row > .camera-filter-options-menu > summary { top: calc(50% - 24px); }
  .camera-studio-capture-row > .camera-filter-options-menu > .camera-filter-options-popover {
    bottom: calc(100% + 3.15rem) !important;
    inset-block-end: calc(100% + 3.15rem) !important;
    max-height: min(46svh, 22rem);
  }
}