/* ==========================================================================
   ROYAL WEDDING WEBSITE - DESIGN SYSTEM & STYLESHEET
   Theme: Royal Burgundy & Champagne Gold
   ========================================================================== */

:root {
  --color-maroon-dark: #1A0207;
  --color-maroon-main: #4A0E17;
  --color-maroon-light: #6A1825;
  --color-gold-bright: #F5D77F;
  --color-gold-main: #D4AF37;
  --color-gold-dark: #A38025;
  --color-parchment: #FDFBF7;
  --color-cream-card: #F9F5EC;
  --color-terracotta: #C86D51;
  --color-text-dark: #2C1810;
  --color-text-muted: #6C5A52;
  --color-white: #FFFFFF;

  --font-script: 'Great Vibes', 'Monsieur La Doulaise', 'Pinyon Script', cursive;
  --font-heading: 'Cinzel', 'Playfair Display', serif;
  --font-serif: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-sans: 'Montserrat', sans-serif;

  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-royal: 0 15px 35px rgba(43, 4, 11, 0.3);
  --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.25);
}

/* Base Resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-serif);
  background-color: var(--color-maroon-dark);
  color: var(--color-text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Fullscreen Canvas for Particles & Confetti */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   1. LANDING SCREEN & STAGE CURTAIN REVEAL
   ========================================================================== */
.landing-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 100;
  pointer-events: auto;
}

/* Main invitation sits directly behind landing screen */
.main-invitation {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.main-invitation.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Stage Curtain Panels */
.landing-curtain {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.95);
}

.landing-curtain-left {
  left: 0;
}

.landing-curtain-right {
  right: 0;
}

.curtain-wallpaper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('assets/royal_curtains.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.95) contrast(1.05);
}

.landing-curtain-right .curtain-wallpaper {
  left: -50vw; /* Keeps wallpaper seamless across left & right curtains */
}

/* Curtains Opening Trigger Class */
.landing-screen.curtains-open .landing-curtain-left {
  transform: translateX(-100%);
}

.landing-screen.curtains-open .landing-curtain-right {
  transform: translateX(100%);
}

.floating-glitter-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.landing-screen.curtains-open .floating-glitter-container {
  opacity: 0;
}

.glitter-particle {
  position: absolute;
  background: radial-gradient(circle, #FFF 0%, var(--color-gold-bright) 70%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  animation: floatUp 8s infinite ease-in-out;
}

@keyframes floatUp {
  0% {
    transform: translateY(105vh) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10vh) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}

.lanterns-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.lantern {
  position: absolute;
  bottom: -120px;
  width: 44px;
  height: 66px;
  opacity: 0;
  animation: floatLantern 16s infinite linear;
  filter: drop-shadow(0 0 10px rgba(255, 179, 0, 0.45));
}

.lantern-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lantern-flame {
  transform-origin: 40px 90px;
  animation: flickerFlame 0.15s infinite alternate ease-in-out;
}

@keyframes flickerFlame {
  0% { transform: scale(0.9) rotate(-1.5deg); opacity: 0.8; }
  100% { transform: scale(1.15) rotate(1.5deg); opacity: 1; }
}

.lantern-1 { left: 8%; animation-delay: 0s; animation-duration: 15s; width: 40px; height: 60px; }
.lantern-2 { left: 24%; animation-delay: 3s; animation-duration: 18s; width: 50px; height: 75px; }
.lantern-3 { left: 38%; animation-delay: 1s; animation-duration: 16s; width: 38px; height: 57px; }
.lantern-4 { left: 52%; animation-delay: 5s; animation-duration: 20s; width: 54px; height: 81px; }
.lantern-5 { left: 68%; animation-delay: 2s; animation-duration: 14s; width: 44px; height: 66px; }
.lantern-6 { left: 82%; animation-delay: 6s; animation-duration: 17s; width: 46px; height: 69px; }
.lantern-7 { left: 16%; animation-delay: 8s; animation-duration: 19s; width: 42px; height: 63px; }
.lantern-8 { left: 76%; animation-delay: 9s; animation-duration: 16s; width: 52px; height: 78px; }
.lantern-9 { left: 3%; animation-delay: 4.5s; animation-duration: 17.5s; width: 45px; height: 67.5px; }
.lantern-10 { left: 19%; animation-delay: 11s; animation-duration: 21s; width: 36px; height: 54px; }
.lantern-11 { left: 31%; animation-delay: 7s; animation-duration: 15.5s; width: 48px; height: 72px; }
.lantern-12 { left: 45%; animation-delay: 13s; animation-duration: 18.5s; width: 42px; height: 63px; }
.lantern-13 { left: 59%; animation-delay: 2.5s; animation-duration: 16.5s; width: 52px; height: 78px; }
.lantern-14 { left: 71%; animation-delay: 10s; animation-duration: 22s; width: 38px; height: 57px; }
.lantern-15 { left: 88%; animation-delay: 5.5s; animation-duration: 19.5s; width: 48px; height: 72px; }
.lantern-16 { left: 12%; animation-delay: 12s; animation-duration: 16s; width: 40px; height: 60px; }
.lantern-17 { left: 63%; animation-delay: 8.5s; animation-duration: 20s; width: 46px; height: 69px; }
.lantern-18 { left: 93%; animation-delay: 1.5s; animation-duration: 17s; width: 50px; height: 75px; }

@keyframes floatLantern {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-120vh) translateX(60px) rotate(15deg) scale(1.1);
    opacity: 0;
  }
}

.landing-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  width: 90%;
  padding: 2.5rem 1.8rem;
  background: radial-gradient(ellipse at center, rgba(15, 2, 5, 0.82) 0%, rgba(20, 3, 7, 0.55) 60%, transparent 100%);
  border: none;
  border-radius: 30px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--color-parchment);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, filter 0.35s ease-out;
}

.landing-screen.curtains-open .landing-content {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(6px);
  pointer-events: none;
}

.invitation-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.35rem;
  color: var(--color-gold-bright);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.family-invite-text {
  font-family: 'Cormorant Garamond', var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.12rem;
  color: #E2D7C3;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.family-highlight {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-gold-bright);
}

.couple-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 1rem;
  width: 100%;
  padding: 1.2rem 0;
  overflow: visible;
}

.couple-hero-title .name-bride,
.couple-hero-title .name-groom {
  font-family: 'Great Vibes', var(--font-script);
  font-size: clamp(3.0rem, 7.5vw, 5.5rem);
  line-height: 1.6;
  display: inline-block;
  padding: 0.5rem 0.4rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3D1 35%, #F5D77F 70%, #D4AF37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(0, 0, 0, 0.9));
}

.couple-hero-title .weds-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.18rem;
  color: #FFF3D1;
  margin: 0 0.6rem;
  text-transform: lowercase;
  -webkit-text-fill-color: #FFF3D1;
  display: inline-block;
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 1)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.9));
}

/* Blessings and Marigold Flower Section */
.blessings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Interactive Ultra-Realistic Marigold Flower Button */
.marigold-btn {
  position: relative;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 0.5rem;
}

.marigold-btn:hover {
  transform: scale(1.08);
}

.marigold-text-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: spinRing 22s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(245, 215, 127, 0.5));
  z-index: 3;
}

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

.marigold-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 179, 0, 0.6);
  pointer-events: none;
  animation: ringRipple 2.5s infinite ease-out;
  z-index: 1;
}

@keyframes ringRipple {
  0% {
    width: 110px;
    height: 110px;
    opacity: 0.85;
    border-color: rgba(255, 215, 0, 0.85);
  }
  100% {
    width: 185px;
    height: 185px;
    opacity: 0;
    border-color: rgba(255, 152, 0, 0);
  }
}

.marigold-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 25px rgba(255, 152, 0, 0.7));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.marigold-btn:hover .marigold-img {
  transform: scale(1.08) rotate(6deg);
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(255, 152, 0, 0.95));
}

.marigold-btn:active .marigold-img {
  transform: scale(0.94);
}

/* Marigold Radial Click Glow Effect */
.marigold-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,152,0,0.85) 45%, rgba(230,81,0,0) 70%);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.1, 0.8, 0.25, 1), opacity 0.7s ease-out;
  z-index: 10;
}

.marigold-glow.active {
  transform: translate(-50%, -50%) scale(4.5);
  opacity: 1;
}

/* Accessible Landing Prompt Banner & Auto-Timer */
.landing-prompt-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(26, 2, 7, 0.8);
  border: 1px solid rgba(245, 215, 127, 0.5);
  padding: 0.65rem 1.35rem;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65), 0 0 15px rgba(245, 215, 127, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  animation: promptPulse 2.4s infinite ease-in-out;
  position: relative;
  z-index: 10;
}

.landing-prompt-banner:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--color-gold-bright);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.75), 0 0 24px rgba(245, 215, 127, 0.45);
  background: rgba(50, 6, 17, 0.9);
}

.landing-prompt-banner:active {
  transform: scale(0.97);
}

.marigold-btn:focus-visible,
.landing-prompt-banner:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 4px;
}

.prompt-icon-bounce {
  color: var(--color-gold-bright);
  font-size: 1.05rem;
  animation: fingerTap 1.3s infinite ease-in-out;
  display: flex;
  align-items: center;
}

.prompt-main-text {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #FFF3D1;
}

.prompt-auto-badge {
  font-family: 'Cormorant Garamond', var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(245, 215, 127, 0.9);
  border-left: 1px solid rgba(245, 215, 127, 0.35);
  padding-left: 0.65rem;
}

.prompt-auto-badge strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  color: #FFF;
}

@keyframes promptPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 215, 127, 0.15);
  }
  50% {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.75), 0 0 24px rgba(245, 215, 127, 0.4);
    border-color: rgba(245, 215, 127, 0.85);
  }
}

@keyframes fingerTap {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.18);
  }
}

/* Hide/Show State & Scroll Reveal Transitions */
.hidden {
  display: none !important;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* ==========================================================================
   MAIN INVITATION CONTAINER
   ========================================================================== */
.main-invitation {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-maroon-dark);
  color: var(--color-text-dark);
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* Shared Section Header */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.section-header.light .sub-subtitle {
  color: var(--color-gold-bright);
}
.section-header.light .section-title {
  color: var(--color-parchment);
}
.section-header.light .section-instruction {
  color: #E2D7C3;
}

.sub-subtitle {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  color: var(--color-gold-main);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  color: var(--color-gold-dark);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.section-instruction {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==========================================================================
   FLOATING AUDIO CONTROLLER
   ========================================================================== */
.audio-controller-wrapper {
  position: fixed;
  bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.2rem));
  right: max(2rem, calc(env(safe-area-inset-right, 0px) + 1.2rem));
  z-index: 999;
}

.audio-toggle-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid var(--color-gold-main);
  background: var(--color-maroon-dark);
  color: var(--color-gold-bright);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.audio-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 25px rgba(212, 175, 55, 0.6);
}

.sound-waves {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.sound-waves .bar {
  width: 3px;
  background-color: var(--color-gold-bright);
  border-radius: 3px;
  height: 4px;
  transition: height 0.2s ease;
}

.audio-toggle-btn.playing .bar:nth-child(1) { animation: soundBar 1s infinite ease-in-out 0.1s; }
.audio-toggle-btn.playing .bar:nth-child(2) { animation: soundBar 1s infinite ease-in-out 0.3s; }
.audio-toggle-btn.playing .bar:nth-child(3) { animation: soundBar 1s infinite ease-in-out 0.2s; }

@keyframes soundBar {
  0%, 100% { height: 4px; }
  50% { height: 18px; }
}

.music-icon {
  font-size: 1.2rem;
  display: none;
}

.audio-toggle-btn.muted .sound-waves {
  display: none;
}
.audio-toggle-btn.muted .music-icon {
  display: block;
}

.audio-tooltip {
  position: absolute;
  bottom: 65px;
  right: 0;
  background: rgba(43, 4, 11, 0.9);
  color: var(--color-gold-bright);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  white-space: nowrap;
  border: 1px solid var(--color-gold-main);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.audio-controller-wrapper:hover .audio-tooltip {
  opacity: 1;
}

/* ==========================================================================
   FLOATING AUTO-SCROLL CONTROLLER
   ========================================================================== */
.auto-scroll-pill {
  position: fixed;
  bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.2rem));
  left: 50%;
  transform: translateX(-50%) translateY(25px);
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(26, 2, 7, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(212, 175, 55, 0.25);
  border-radius: 30px;
  padding: 0.45rem 1rem 0.45rem 1.15rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 10ms ease, transform 10ms cubic-bezier(0.16, 1, 0.3, 1);
}

.auto-scroll-pill.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.auto-scroll-status {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-gold-bright);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.scroll-bounce-icon {
  animation: scrollBounceDown 1.6s infinite ease-in-out;
  color: var(--color-gold-main);
  font-size: 0.78rem;
}

@keyframes scrollBounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.auto-scroll-btn {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(163, 128, 37, 0.45));
  border: 1px solid rgba(245, 215, 127, 0.55);
  color: var(--color-gold-bright);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.auto-scroll-btn:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(163, 128, 37, 0.7));
  box-shadow: 0 0 12px rgba(245, 215, 127, 0.45);
}

@media (max-width: 640px) {
  .audio-controller-wrapper {
    bottom: max(1.2rem, calc(env(safe-area-inset-bottom, 0px) + 0.8rem));
    right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.6rem));
  }
  .auto-scroll-pill {
    bottom: max(1.2rem, calc(env(safe-area-inset-bottom, 0px) + 0.8rem));
    padding: 0.35rem 0.75rem 0.35rem 0.85rem;
    max-width: calc(100vw - 85px);
  }
  .auto-scroll-status {
    font-size: 0.68rem;
  }
  .auto-scroll-btn {
    font-size: 0.64rem;
    padding: 0.2rem 0.55rem;
  }
}

/* ==========================================================================
   2. FORMAL ANNOUNCEMENT ROYAL PARCHMENT PAPER CARD
   ========================================================================== */
.announcement-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

.announcement-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  pointer-events: none;
}

.announcement-translucent-box.mughal-card-box,
.announcement-translucent-box.plain-parchment-box {
  position: relative;
  z-index: 5;
  /* Deep Royal Indigo — translucent, regal, gem-like */
  background: rgba(10, 14, 40, 0.52);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: none;
  border-radius: 20px;
  padding: clamp(2.2rem, 5vw, 3.8rem) clamp(1.5rem, 4vw, 3rem);
  max-width: clamp(300px, 90vw, 640px);
  width: 88%;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(191, 149, 63, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  margin: auto;
}

.mughal-card-svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.mughal-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  color: #F5E6C8;
  gap: clamp(0.7rem, 2vw, 1.25rem);
}

.card-opening-blessing {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(0.72rem, 1.3vw, 0.95rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.06em;
  /* Warm ivory — legible on deep indigo */
  color: #EDD9A3;
  max-width: 460px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.card-couple-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0.2rem 0;
}

.card-couple-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(1.4rem, 3.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  /* Imperial Gold gradient shimmer */
  background: linear-gradient(135deg, #FCF6BA 0%, #D4AF37 35%, #BF953F 65%, #FCF6BA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.card-and-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.15rem 0;
  width: 100%;
}

.card-flourish {
  width: 55px;
  height: 1px;
  background: linear-gradient(to right, transparent, #D4AF37, transparent);
  opacity: 0.8;
}

.card-and-script {
  font-family: 'Great Vibes', 'Monsieur La Doulaise', cursive;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  /* Rose gold script */
  color: #E8C97A;
  font-weight: 400;
  line-height: 1;
  padding: 0 0.3rem;
  text-shadow: 0 1px 8px rgba(212, 175, 55, 0.45);
}

.card-event-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.3rem 0;
}

.card-event-details p {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2D231E;
  margin: 0;
  text-shadow: none;
}

.card-closing-line {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #3D3028;
  margin-top: 0.2rem;
  text-shadow: none;
}

.text-card-scroll {
  margin-top: 0.8rem;
  color: #C9A84C;
  letter-spacing: 0.12em;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.text-card-scroll:hover {
  opacity: 0.75;
}

.text-card-scroll .bounce-arrow {
  color: #D4AF37;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}

.bounce-arrow {
  font-size: 1.1rem;
  color: var(--color-gold-bright);
  animation: arrowBounce 1.5s infinite alternate ease-in-out;
  text-shadow: 0 0 8px rgba(245, 215, 127, 0.6);
}

@keyframes arrowBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

/* Vector Silhouette positioning at bottom */
.palace-silhouette-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 380px;
  z-index: 3;
  pointer-events: none;
}

.palace-silhouette-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mobile responsive fixes */
@media (max-width: 767px) {
  .announcement-section {
    height: 100vh;
    min-height: 100vh;
    padding: 0;
  }
  .palace-lineage-container {
    flex-direction: column;
    gap: 1rem;
  }
  .palace-lineage-card {
    min-width: 100%;
    padding: 1.2rem;
  }
}

/* ==========================================================================
   3. ROYAL MUGHAL CALENDAR & ITINERARY - SAVE THE DATE
   ========================================================================== */
.calendar-section {
  padding: 6rem 1.5rem;
  background-image: 
    linear-gradient(rgba(26, 2, 7, 0.88), rgba(26, 2, 7, 0.94)),
    url('assets/wallpaper_bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow-x: clip;
}

.save-the-date-split-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 2.5rem);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.itinerary-panel-card,
.calendar-panel-card {
  background: radial-gradient(ellipse at center, rgba(38, 8, 17, 0.95) 0%, rgba(16, 2, 7, 0.98) 100%);
  border: none;
  border-radius: 26px;
  padding: clamp(1.2rem, 2.5vw, 2.2rem);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Panel Header */
.panel-ornament-header {
  text-align: center;
  margin-bottom: 1.2rem;
  width: 100%;
}

.panel-kicker {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gold-bright);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}

.panel-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #FFF6D8 0%, #F5D77F 40%, #D4AF37 80%, #AA8222 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.1rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.itin-header-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-style: italic;
  color: #F5D77F;
  margin: 0.15rem 0 0.4rem 0;
}

.panel-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.divider-line {
  width: 35px;
  height: 1px;
  background: linear-gradient(to right, transparent, #D4AF37, transparent);
}

.divider-gem {
  color: var(--color-gold-bright);
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(245, 215, 127, 0.5);
}

/* Quick Day Jump Pills */
.itin-day-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
  width: 100%;
}

.itin-jump-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  color: #E6D7C3;
  user-select: none;
  min-width: 0;
  box-sizing: border-box;
}

.itin-jump-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(245, 215, 127, 0.6);
  transform: translateY(-2px);
}

.itin-jump-btn.active-jump {
  background: linear-gradient(135deg, rgba(85, 14, 25, 0.95) 0%, rgba(138, 20, 36, 0.9) 100%);
  border: 1.5px solid #F5D77F;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.3);
  color: #FFF;
}

.jump-pill-num {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold-bright);
  flex-shrink: 0;
}

.jump-pill-label {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.62rem, 1.4vw, 0.7rem);
  font-weight: 600;
  line-height: 1.25;
  color: #EAE0D0;
  min-width: 0;
  overflow: hidden;
}

.jump-crown-icon {
  position: absolute;
  top: -8px;
  right: 8px;
  color: #FFD700;
  font-size: 0.72rem;
  animation: crownFloat 2s infinite ease-in-out;
}

/* Scrollable Container with Both Days in Single Itinerary */
.itin-card-scroll-area {
  flex: 1;
  background: rgba(14, 2, 5, 0.6);
  border: none;
  border-radius: 16px;
  padding: clamp(0.65rem, 1.5vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  max-height: 480px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.itin-card-scroll-area::-webkit-scrollbar {
  width: 5px;
}
.itin-card-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}

.itin-day-block {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 14px;
  padding: clamp(0.65rem, 1.5vw, 0.95rem);
  transition: all 0.35s ease;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.itin-day-block.day-highlighted {
  border-color: #F5D77F;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.35), inset 0 0 15px rgba(212, 175, 55, 0.1);
  background: rgba(212, 175, 55, 0.06);
}

.itin-day-title-strip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  flex-wrap: wrap;
}

.itin-day-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--color-gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.4);
  flex-shrink: 0;
}

.itin-day-badge.gold {
  background: linear-gradient(135deg, #F5D77F 0%, #D4AF37 100%);
  color: #1A0207;
  border: none;
  font-weight: 800;
}

.itin-day-date {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.78rem, 1.8vw, 0.88rem);
  font-weight: 700;
  color: #FFF2CD;
  letter-spacing: 0.04em;
}

.itin-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}

.itin-event-item {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 0.85rem);
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s ease;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.itin-event-item:hover {
  background: rgba(212, 175, 55, 0.08);
  transform: translateX(3px);
}

.itin-event-time {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.66rem, 1.4vw, 0.72rem);
  font-weight: 700;
  color: var(--color-gold-bright);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.itin-event-time.gold {
  color: #FFF;
  background: linear-gradient(135deg, #F5D77F 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.itin-event-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.itin-event-name {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.76rem, 1.8vw, 0.82rem);
  font-weight: 700;
  color: #FFF;
  margin: 0;
  line-height: 1.3;
}

.itin-event-venue {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.65rem, 1.5vw, 0.7rem);
  color: #D6C2A0;
  display: block;
  line-height: 1.3;
}

.itin-event-venue i {
  color: #F5D77F;
  margin-right: 0.25rem;
}

.itin-interday-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  width: 100%;
}

.itin-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.4), transparent);
}

.itin-div-badge {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.62rem, 1.4vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F5D77F;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Calendar Card Header */
.calendar-card-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  width: 100%;
}

.calendar-flourish-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.calendar-flourish-top .ornament-line {
  width: 45px;
  height: 1px;
  background: linear-gradient(to right, transparent, #D4AF37, transparent);
}

.calendar-flourish-top .ornament-icon {
  color: var(--color-gold-bright);
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(245, 215, 127, 0.5);
}

.calendar-month-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(1.35rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #FFF6D8 0%, #F5D77F 40%, #D4AF37 80%, #AA8222 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.2rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.calendar-auspicious-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.82rem, 1.6vw, 1.05rem);
  font-style: italic;
  letter-spacing: 0.04em;
  color: #D8C7A5;
  margin: 0;
  line-height: 1.35;
}

/* Calendar Table & 7-Column Grid */
.calendar-table-container {
  width: 100%;
  margin: 0 auto 1.2rem auto;
  box-sizing: border-box;
}

.calendar-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  box-sizing: border-box;
  width: 100%;
}

.weekday-col {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.58rem, 1.3vw, 0.82rem);
  font-weight: 700;
  color: #D4AF37;
  letter-spacing: 0.05em;
  text-align: center;
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 8px);
  padding-top: 0.8rem;
  width: 100%;
  box-sizing: border-box;
}

.day-cell {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.72rem, 1.8vw, 1.1rem);
  font-weight: 500;
  color: #E6D7C3;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  padding: 1px;
}

.day-cell.day-empty {
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  border: none;
}

.day-cell:not(.day-empty):not(.wedding-date-btn):hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  color: #FFF;
}

/* Special Wedding Celebration Date Buttons */
.wedding-date-btn {
  cursor: pointer;
  background: linear-gradient(145deg, rgba(85, 14, 25, 0.85) 0%, rgba(45, 6, 12, 0.95) 100%);
  border: 1.5px solid rgba(245, 215, 127, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 175, 55, 0.2);
  padding: 2px 1px;
}

.wedding-date-btn:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #FFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 215, 127, 0.5);
}

.wedding-date-btn .day-number {
  font-weight: 700;
  color: #FFF;
  line-height: 1;
  font-size: clamp(0.72rem, 2vw, 1.1rem);
}

.wedding-date-btn .date-event-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.34rem, 0.9vw, 0.54rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-top: 2px;
  color: #F5D77F;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  word-break: normal;
  display: block;
}

/* Dec 11: Main Wedding Day */
.wedding-date-btn.date-wedding {
  background: linear-gradient(135deg, rgba(163, 128, 37, 0.9) 0%, rgba(212, 175, 55, 0.95) 50%, rgba(138, 20, 36, 0.95) 100%);
  border: 2px solid #FFF1B8;
  color: #FFF;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 215, 127, 0.6);
  transform: scale(1.04);
}

.wedding-crown-icon {
  position: absolute;
  top: -8px;
  color: #FFD700;
  font-size: 0.72rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  animation: crownFloat 2s infinite ease-in-out;
}

@keyframes crownFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.date-pulse-glow {
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 1.5px solid rgba(245, 215, 127, 0.7);
  animation: calPulse 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes calPulse {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.18); opacity: 0; }
}

.wedding-date-btn.active-selected {
  outline: 2px solid #FFF;
  outline-offset: 2px;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.85), 0 0 25px rgba(245, 215, 127, 0.75);
  border-color: #FFF;
}

/* 1-Click Calendar Sync Action Suite */
.calendar-sync-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  width: 100%;
  box-sizing: border-box;
}

.sync-actions-caption {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.7rem, 1.3vw, 0.84rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E5D5B8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  flex-wrap: wrap;
}

.sync-actions-caption i {
  color: #F5D77F;
}

.calendar-buttons-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.cal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.76rem, 1.8vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-sizing: border-box;
  max-width: 100%;
}

.google-cal-btn {
  background: linear-gradient(135deg, #F5D77F 0%, #D4AF37 50%, #AA8222 100%);
  color: #1A0207;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.4);
}

.google-cal-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #FFF0B8 0%, #F5D77F 50%, #D4AF37 100%);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.apple-cal-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF;
  border: 1px solid rgba(245, 215, 127, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.apple-cal-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(245, 215, 127, 0.22);
  border-color: var(--color-gold-bright);
  box-shadow: 0 8px 25px rgba(245, 215, 127, 0.35);
}

.cal-action-btn:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

.calendar-footer-hint {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  font-style: italic;
  color: #D8C7A5;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.calendar-footer-hint i {
  color: var(--color-gold-bright);
  font-size: 0.85rem;
  animation: fingerTap 1.5s infinite ease-in-out;
}

/* Tablet & Mobile Layout: Stack vertically with Itinerary on top (first), Calendar below (second) */
@media (max-width: 992px) {
  .calendar-section {
    padding: 4.5rem 1.2rem;
  }
  .save-the-date-split-layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 580px;
    width: 100%;
  }
  .itinerary-panel-card {
    order: 1; /* First on mobile */
  }
  .calendar-panel-card {
    order: 2; /* Second on mobile */
  }
}

@media (max-width: 768px) {
  .calendar-section {
    padding: 3.5rem 0.85rem;
  }
  .itinerary-panel-card,
  .calendar-panel-card {
    padding: 1.3rem 0.95rem;
    border-radius: 20px;
  }
  .itin-card-scroll-area {
    max-height: 400px;
  }
  .calendar-buttons-grid {
    flex-direction: column;
  }
  .cal-action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .itin-day-pills {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .itin-jump-btn {
    padding: 0.6rem 0.8rem;
  }
  .jump-pill-num {
    font-size: 1.25rem;
  }
  .jump-pill-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .calendar-section {
    padding: 2.8rem 0.5rem;
  }
  .itinerary-panel-card,
  .calendar-panel-card {
    padding: 1.1rem 0.65rem;
    border-radius: 16px;
  }
  .itin-card-scroll-area {
    max-height: 350px;
    padding: 0.5rem 0.4rem;
  }
  .itin-day-block {
    padding: 0.65rem 0.45rem;
  }
  .itin-event-item {
    padding: 0.35rem 0.4rem;
    gap: 0.45rem;
  }
  .itin-event-time {
    font-size: 0.64rem;
  }
  .itin-event-name {
    font-size: 0.78rem;
  }
  .itin-event-venue {
    font-size: 0.66rem;
  }
  .calendar-card-header {
    margin-bottom: 1rem;
  }
  .calendar-month-title {
    font-size: 1.45rem;
    letter-spacing: 0.08em;
  }
  .calendar-auspicious-subtitle {
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .calendar-weekdays-row {
    padding-bottom: 0.4rem;
  }
  .weekday-col {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .calendar-days-grid {
    gap: 3px;
    padding-top: 0.5rem;
  }
  .day-cell {
    border-radius: 7px;
    font-size: 0.76rem;
  }
  .wedding-date-btn .day-number {
    font-size: 0.82rem;
  }
  .wedding-date-btn .date-event-tag {
    font-size: 0.38rem;
  }
  .wedding-crown-icon {
    top: -6px;
    font-size: 0.6rem;
  }
  .calendar-sync-actions {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
  }
  .sync-actions-caption {
    font-size: 0.72rem;
  }
  .cal-action-btn {
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 350px) {
  .calendar-section {
    padding: 2.2rem 0.3rem;
  }
  .itinerary-panel-card,
  .calendar-panel-card {
    padding: 0.9rem 0.45rem;
    border-radius: 14px;
  }
  .calendar-days-grid {
    gap: 2px;
  }
  .day-cell {
    border-radius: 5px;
    font-size: 0.68rem;
  }
  .wedding-date-btn .date-event-tag {
    font-size: 0.32rem;
  }
}

/* ==========================================================================
   4. 3D INTERACTIVE ROYAL MAHAL & KINGDOM - A GLIMPSE OF US
   ========================================================================== */
.glimpse-mahal-section,
.countdown-carousel-section {
  padding: 6rem 1.5rem;
  background-image: 
    linear-gradient(rgba(26, 2, 7, 0.88), rgba(26, 2, 7, 0.94)),
    url('assets/wallpaper_bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow-x: clip;
  color: var(--color-parchment);
}

/* ==========================================================================
   4. 3D INTERACTIVE ROYAL MAHAL & KINGDOM - A GLIMPSE OF US
   ========================================================================== */
.glimpse-mahal-wrapper {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.mahal-instruction-hint {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-style: italic;
  color: #F5D77F;
  text-align: center;
  margin: 0.35rem 0 1.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mahal-instruction-hint i {
  color: var(--color-gold-bright);
  font-size: 0.95rem;
  animation: compassSpin 6s infinite ease-in-out;
}

@keyframes compassSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(35deg); }
}

/* Automated Guided Tour Control Bar */
.mahal-tour-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(36, 6, 14, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 30px;
  padding: 0.45rem 0.75rem 0.45rem 1.15rem;
  margin: -0.6rem auto 1.5rem auto;
  max-width: 660px;
  width: 94%;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 15px rgba(212, 175, 55, 0.12);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.tour-indicator-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: #FAF3E0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-pulse-gem {
  color: var(--color-gold-bright);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: gemGlow 2.5s infinite ease-in-out;
}

@keyframes gemGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 215, 127, 0.4)); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(245, 215, 127, 0.9)); }
}

.tour-status-text {
  color: #E2D7C3;
  font-weight: 500;
  font-size: 0.78rem;
}

.tour-status-text strong {
  color: var(--color-gold-bright);
  font-weight: 700;
}

.tour-control-btn {
  background: rgba(85, 14, 25, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--color-gold-bright);
  border-radius: 20px;
  padding: 0.38rem 0.95rem;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.25s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.tour-control-btn:hover {
  background: var(--color-gold-main);
  color: #1A0207;
  border-color: #FFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.tour-control-btn.paused {
  background: linear-gradient(135deg, rgba(106, 17, 32, 0.95), rgba(153, 27, 48, 0.95));
  border-color: var(--color-gold-bright);
  color: #FFF;
}

@media (max-width: 600px) {
  .mahal-tour-bar {
    flex-direction: column;
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
    border-radius: 20px;
  }
  .tour-indicator-left {
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

/* Quick Landmark Navigation Pills (Below Palace) */
.mahal-quick-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.mahal-nav-pill {
  background: rgba(36, 6, 14, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 30px;
  padding: 0.55rem 1.1rem;
  color: #E6D7C3;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mahal-nav-pill .pill-icon {
  font-size: 1rem;
}

.mahal-nav-pill:hover {
  background: rgba(85, 14, 25, 0.85);
  border-color: #F5D77F;
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.mahal-nav-pill.active-nav {
  background: linear-gradient(135deg, rgba(106, 17, 32, 0.95) 0%, rgba(153, 27, 48, 0.95) 100%);
  border-color: #F5D77F;
  color: #FFF;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.4), inset 0 0 0 1px rgba(245, 215, 127, 0.3);
  transform: translateY(-2px);
}



.mahal-art-canvas {
  position: relative;
  width: 100%;
  line-height: 0;
}

.mahal-bg-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.mahal-ambient-light {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, transparent 65%, rgba(14, 2, 5, 0.45) 100%),
    linear-gradient(to top, rgba(14, 2, 5, 0.5) 0%, transparent 20%);
  pointer-events: none;
}

/* Interactive Landmark Hotspot Beacons */
.mahal-hotspot-beacon {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(25px);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.mahal-hotspot-beacon:hover,
.mahal-hotspot-beacon:focus,
.mahal-hotspot-beacon.active-beacon {
  transform: translate(-50%, -50%) translateZ(45px) scale(1.18);
  z-index: 25;
}

.beacon-pulse-core {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6D8 0%, #D4AF37 55%, #8B6508 100%);
  box-shadow: 0 0 15px rgba(245, 215, 127, 0.85), 0 0 30px rgba(212, 175, 55, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A050E;
  font-size: 0.95rem;
  border: 2px solid #FFF;
  transition: all 0.3s ease;
}

.mahal-hotspot-beacon:hover .beacon-pulse-core,
.mahal-hotspot-beacon.active-beacon .beacon-pulse-core {
  background: radial-gradient(circle at 35% 35%, #FFF 0%, #FFD700 60%, #B8860B 100%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 45px rgba(212, 175, 55, 0.8);
  color: #210307;
}

.beacon-pulse-ring {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(245, 215, 127, 0.8);
  animation: beaconPulse 2.2s infinite ease-out;
  pointer-events: none;
}

.mahal-hotspot-beacon.active-beacon .beacon-pulse-ring {
  border-color: #FFD700;
  animation: beaconPulseActive 1.4s infinite ease-out;
}

@keyframes beaconPulse {
  0% {
    transform: scale(0.65);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes beaconPulseActive {
  0% {
    transform: scale(0.65);
    opacity: 1;
    border-width: 2.5px;
  }
  100% {
    transform: scale(2.0);
    opacity: 0;
    border-width: 1px;
  }
}

/* Floating Landmark Tooltip */
.beacon-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(24, 3, 8, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.75);
  border-radius: 8px;
  padding: 0.22rem 0.52rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  text-align: center;
  z-index: 30;
}

.beacon-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #D4AF37;
}

.mahal-hotspot-beacon:hover .beacon-tooltip,
.mahal-hotspot-beacon:focus .beacon-tooltip,
.mahal-hotspot-beacon.active-beacon .beacon-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tooltip-name {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFF6D8;
  display: block;
}

/* Recenter Floating Button */
.mahal-recenter-btn {
  position: absolute;
  bottom: 1.1rem;
  right: 1.1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(28, 4, 10, 0.85);
  border: 1px solid var(--color-gold-main);
  color: var(--color-gold-bright);
  cursor: pointer;
  z-index: 15;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.mahal-recenter-btn:hover {
  background: var(--color-gold-main);
  color: var(--color-maroon-dark);
  transform: scale(1.1) rotate(45deg);
}

/* ==========================================================================
   INTEGRATED THEATER STAGE & ROYAL FOLIO DRAWER
   ========================================================================== */
.mahal-theater-stage {
  position: relative;
  width: 100%;
  max-width: min(1180px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
}

.mahal-theater-stage.drawer-open {
  max-width: min(1340px, 96vw);
  gap: clamp(1rem, 2vw, 1.8rem);
}

/* 3D Diorama Viewport */
.mahal-viewport-container {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: clamp(340px, 58vh, 600px);
  border-radius: clamp(16px, 2vw, 26px);
  overflow: hidden;
  perspective: 1200px;
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.9), 0 0 40px rgba(212, 175, 55, 0.15);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  background: #080105;
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;
  box-sizing: border-box;
  transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.mahal-viewport-container.is-zoomed {
  cursor: grab;
}

.mahal-viewport-container.is-zoomed:active {
  cursor: grabbing;
}

.mahal-tilt-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

/* When Folio Drawer is open on desktop, diorama adapts gracefully to 58% */
.mahal-theater-stage.drawer-open .mahal-viewport-container {
  flex: 1 1 58%;
  width: 58%;
  max-height: clamp(340px, 56vh, 550px);
}

/* Integrated Royal Folio Drawer */
.royal-folio-drawer {
  flex: 0 0 0px;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mahal-theater-stage.drawer-open .royal-folio-drawer {
  flex: 0 0 42%;
  width: 42%;
  max-width: 460px;
  opacity: 1;
  visibility: visible;
}

.folio-drawer-inner {
  background: radial-gradient(ellipse at top, rgba(50, 8, 18, 0.98) 0%, rgba(18, 2, 6, 0.99) 100%);
  border: 1.5px solid var(--color-gold-main);
  border-radius: clamp(16px, 2vw, 26px);
  padding: clamp(0.35rem, 0.8vw, 0.65rem);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(212, 175, 55, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Picture Frame with In-Frame Navigation & Close Controls */
.folio-photo-wrapper {
  position: relative;
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: clamp(340px, 56vh, 550px);
  background: #0A0103;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Option 3: CSS Background Photo Surface (No <img> tag, prevents right-click save and mobile long-press) */
.folio-photo-surface {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.folio-photo-wrapper:hover .folio-photo-surface {
  transform: scale(1.02);
}

/* Transparent Protective Click Shield */
.folio-photo-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.folio-photo-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Floating Close Button */
.folio-close-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(24, 3, 8, 0.85);
  border: 1.2px solid var(--color-gold-main);
  color: #FFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.folio-close-toggle:hover {
  background: var(--color-gold-main);
  color: var(--color-maroon-dark);
  transform: scale(1.12);
}

/* Floating Navigation Arrows */
.folio-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(24, 3, 8, 0.85);
  border: 1.2px solid var(--color-gold-main);
  color: var(--color-gold-bright);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.folio-nav-btn:hover {
  background: var(--color-gold-main);
  color: var(--color-maroon-dark);
  transform: translateY(-50%) scale(1.12);
}

.folio-nav-btn.folio-prev { left: 10px; }
.folio-nav-btn.folio-next { right: 10px; }

/* Photo Counter Badge */
.folio-counter-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(24, 3, 8, 0.82);
  border: 1.2px solid var(--color-gold-main);
  border-radius: 14px;
  padding: 3px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold-bright);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Dots Container */
.folio-dots-container {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(14, 2, 6, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.folio-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.6);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.folio-dot:hover {
  background: var(--color-gold-bright);
  transform: scale(1.2);
}

.folio-dot.active {
  width: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, #FFF6D8 0%, #D4AF37 100%);
  box-shadow: 0 0 10px rgba(245, 215, 127, 0.85);
  border-color: #FFF;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES FOR 3D THEATER & FOLIO DRAWER
   ========================================================================== */
@media (max-width: 900px) {
  .mahal-theater-stage {
    flex-direction: column-reverse;
    align-items: center;
    gap: 0;
  }

  .mahal-theater-stage.drawer-open {
    gap: clamp(0.9rem, 2.5vw, 1.4rem);
  }

  .mahal-theater-stage.drawer-open .mahal-viewport-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: min(100%, 720px);
    aspect-ratio: 16 / 9;
    max-height: clamp(200px, 32vh, 320px);
  }

  .royal-folio-drawer {
    width: 100%;
    flex: 0 0 auto;
    max-height: 0;
    margin: 0;
    transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease, visibility 0.35s ease;
  }

  .mahal-theater-stage.drawer-open .royal-folio-drawer {
    width: 100%;
    max-width: min(92vw, 400px);
    flex: 0 0 auto;
    max-height: clamp(320px, 55vh, 480px);
  }

  .folio-photo-wrapper {
    aspect-ratio: 4 / 5;
    max-height: clamp(280px, 48vh, 440px);
  }
}

@media (max-width: 600px) {
  .glimpse-mahal-section {
    padding: clamp(3rem, 7vh, 4rem) 0.75rem;
  }

  .mahal-viewport-container {
    border-radius: 16px;
  }

  .mahal-theater-stage.drawer-open .mahal-viewport-container {
    max-height: clamp(180px, 28vh, 240px);
  }

  .mahal-theater-stage.drawer-open .royal-folio-drawer {
    max-width: min(94vw, 340px);
    max-height: clamp(280px, 45vh, 400px);
  }

  .folio-photo-wrapper {
    aspect-ratio: 4 / 5;
    max-height: clamp(260px, 42vh, 360px);
    border-radius: 14px;
  }

  .mahal-quick-nav {
    gap: 0.35rem;
    margin-top: 1.1rem;
  }

  .mahal-nav-pill {
    padding: 0.38rem 0.65rem;
    font-size: 0.68rem;
  }

  .mahal-hotspot-beacon {
    width: 32px;
    height: 32px;
  }

  .beacon-pulse-core {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }

  .beacon-pulse-ring {
    width: 42px;
    height: 42px;
  }

  .folio-drawer-inner {
    padding: 0.35rem;
    border-radius: 16px;
  }

  .folio-close-toggle {
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    font-size: 0.82rem;
  }

  .folio-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .folio-nav-btn.folio-prev { left: 6px; }
  .folio-nav-btn.folio-next { right: 6px; }

  .folio-counter-badge {
    top: 6px;
    left: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.62rem;
  }

  .tooltip-name {
    font-size: 0.55rem;
  }
}

@media (max-width: 400px) {
  .mahal-nav-pill {
    padding: 0.32rem 0.52rem;
    font-size: 0.62rem;
  }

  .mahal-theater-stage.drawer-open .royal-folio-drawer {
    max-width: 96vw;
  }

  .folio-photo-wrapper {
    max-height: clamp(230px, 40vh, 320px);
  }
}




/* ==========================================================================
   6. CLOSING FOOTER
   ========================================================================== */
.site-footer {
  background-image: 
    radial-gradient(circle at center, rgba(106, 24, 37, 0.5) 0%, rgba(43, 4, 11, 0.9) 100%),
    url('assets/velvet_bg.webp');
  background-size: cover;
  background-position: center;
  color: var(--color-parchment);
  text-align: center;
  padding: 4.5rem 1.5rem;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.footer-ornament {
  font-size: 1.6rem;
  color: var(--color-gold-bright);
  margin-bottom: 1rem;
}

.footer-couple {
  font-family: var(--font-script);
  font-size: 3.5rem;
  color: var(--color-gold-bright);
  margin-bottom: 0.4rem;
}

.footer-date {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.2rem;
  color: #E2D7C3;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.footer-divider {
  width: 80px;
  height: 1px;
  background: var(--color-gold-main);
  margin: 0 auto 2rem auto;
  opacity: 0.6;
}

.footer-credit {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: #A38025;
}

/* ==========================================================================
   TABLET & MOBILE RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Tablet & iPad Devices (768px - 1024px) */
@media (max-width: 1024px) {
  .landing-content {
    padding: 1.5rem;
  }
  .couple-hero-title {
    font-size: 4rem;
  }
  .parchment-card {
    padding: 3.5rem 2rem;
  }
}

/* Mobile & Small Tablet Devices (max-width: 768px) */
@media (max-width: 768px) {
  .landing-content {
    max-width: 100%;
    padding: 1.2rem;
  }
  .invitation-header-badge {
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
  }
  .family-invite-text {
    font-size: 1.15rem;
    line-height: 1.5;
  }
  .couple-hero-title {
    font-size: 3.2rem;
    gap: 0.4rem;
  }
  .couple-hero-title .ampersand {
    font-size: 2.2rem;
  }
  .wax-seal {
    width: 110px;
    height: 110px;
  }
  .seal-inner {
    width: 70px;
    height: 70px;
  }
  .seal-monogram {
    font-size: 1.3rem;
  }
  .tap-banner {
    font-size: 0.8rem;
    padding: 0.4rem 1.1rem;
  }

  /* Formal Announcement */
  .announcement-section {
    padding: 0;
  }
  .parchment-card {
    padding: 2.8rem 1.2rem;
    border-radius: 12px;
  }
  .couple-announcement-names {
    flex-direction: column;
    gap: 1.2rem;
  }
  .lineage-column {
    min-width: 100%;
  }
  .name-display {
    font-size: 2.4rem;
  }
  .ornate-amp {
    font-size: 3.2rem;
    margin: -0.5rem 0;
  }
  .blessings-text {
    font-size: 1.1rem;
  }
  .invitation-solicitation {
    font-size: 1.1rem;
  }

  /* Save The Date Scratch Cards */
  .scratch-section {
    padding: 4rem 1rem;
  }
  .section-title {
    font-size: 1.9rem;
  }
  .scratch-cards-grid {
    gap: 1.2rem;
  }
  .scratch-card-wrapper {
    width: 170px;
    height: 160px;
  }
  .scratch-card-bg {
    padding: 1.5rem 0.6rem 0.8rem 0.6rem;
  }
  .scratch-value {
    font-size: 1.9rem;
  }
  .scratch-label {
    font-size: 0.65rem;
  }
  .scratch-subtext {
    font-size: 0.65rem;
  }

  .glimpse-mahal-section,
  .countdown-carousel-section {
    padding: 4rem 1rem;
  }

  /* Audio Controller */
  .audio-controller-wrapper {
    bottom: 1.2rem;
    right: 1.2rem;
  }
  .audio-toggle-btn {
    width: 48px;
    height: 48px;
  }
  .audio-tooltip {
    display: none;
  }

  /* Footer */
  .site-footer {
    padding: 3.5rem 1rem;
  }
  .footer-couple {
    font-size: 2.8rem;
  }
}

/* ==========================================================================
   5. VENUE & INTERACTIVE MAP PAVILION
   ========================================================================== */
.venue-section {
  position: relative;
  padding: 6.5rem 1.5rem;
  background-image: 
    linear-gradient(rgba(26, 2, 7, 0.88), rgba(26, 2, 7, 0.94)),
    url('assets/wallpaper_bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-x: clip;
  color: var(--color-parchment);
}

/* Venue Section Header Typography (Balanced Venue Title & Venue Name Hierarchy) */
.venue-section .section-header .venue-title,
.venue-section .sub-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.35rem;
  color: var(--color-gold-bright);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.65rem;
  text-shadow: 0 0 12px rgba(245, 215, 127, 0.3);
}

.venue-section .section-header .venue-name,
.venue-section .section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 600;
  color: var(--color-parchment);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  line-height: 1.25;
}

.venue-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: stretch;
  box-sizing: border-box;
}

/* Left Panel: Imperial Hospitality & Transit Concierge */
.venue-concierge-card {
  background: radial-gradient(ellipse at center, rgba(38, 8, 17, 0.96) 0%, rgba(16, 2, 7, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 24px;
  padding: clamp(1.6rem, 2.8vw, 2.5rem);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(212, 175, 55, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.venue-concierge-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 18px;
  pointer-events: none;
}

.concierge-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.concierge-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-gold-bright);
  background: rgba(85, 14, 25, 0.6);
  border: 1px solid rgba(245, 215, 127, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
}

.concierge-city-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: #E2D7C3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.concierge-city-badge i {
  color: var(--color-gold-main);
}

.concierge-venue-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  color: var(--color-gold-bright);
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.concierge-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-style: italic;
  color: #E6D7C3;
  line-height: 1.5;
  margin: 0;
}

/* Quick Address Box with Copy Button */
.venue-address-box {
  background: rgba(28, 4, 11, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.venue-address-box:hover {
  border-color: rgba(245, 215, 127, 0.6);
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.15);
}

.address-icon-wrap {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 17, 32, 0.8) 0%, rgba(153, 27, 48, 0.8) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-bright);
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.address-text-wrap {
  flex: 1;
}

.address-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: #A38025;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.address-full {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  color: #FAF3E0;
  margin: 0;
  line-height: 1.45;
}

.address-copy-btn {
  background: rgba(85, 14, 25, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--color-gold-bright);
  border-radius: 20px;
  padding: 0.5rem 0.95rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  user-select: none;
  white-space: nowrap;
}

.address-copy-btn:hover {
  background: var(--color-gold-main);
  color: #1A0207;
  border-color: var(--color-gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.address-copy-btn.copied {
  background: #2E6B34;
  border-color: #64DD17;
  color: #FFF;
}

/* Transit Guide & Travel Tabs */
.transit-guide-wrapper {
  background: rgba(22, 3, 9, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 18px;
  padding: 1.2rem;
}

.transit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.transit-title {
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold-bright);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.transit-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #D4AF37;
}

.transit-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.transit-tab {
  background: rgba(43, 4, 11, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: #E2D7C3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.25s ease;
}

.transit-tab:hover {
  background: rgba(85, 14, 25, 0.8);
  border-color: rgba(245, 215, 127, 0.5);
  color: #FFF;
}

.transit-tab.active {
  background: linear-gradient(135deg, rgba(106, 17, 32, 0.95) 0%, rgba(153, 27, 48, 0.95) 100%);
  border-color: var(--color-gold-bright);
  color: #FFF;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.transit-tab i {
  color: var(--color-gold-bright);
  font-size: 0.82rem;
}

.transit-detail-display {
  background: rgba(14, 2, 6, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.transit-detail-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.transit-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-gold-bright);
  min-width: 140px;
}

.transit-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #FFF;
}

.transit-detail-note {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.4;
  color: #E2D7C3;
  margin: 0.25rem 0 0 0;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(212, 175, 55, 0.2);
}

/* Amenities Grid */
.venue-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.amenity-item {
  background: rgba(38, 6, 15, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  color: #E6D7C3;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.amenity-item:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 215, 127, 0.5);
}

.amenity-item i {
  color: var(--color-gold-bright);
  font-size: 0.95rem;
}

/* Call to Action Buttons Row */
.venue-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.venue-primary-btn,
.venue-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.4rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  user-select: none;
  flex: 1 1 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.venue-primary-btn {
  background: linear-gradient(135deg, #D4AF37 0%, #F5D77F 50%, #C49726 100%);
  color: #1A0207;
  border: 1px solid #FFF;
}

.venue-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(245, 215, 127, 0.5);
  filter: brightness(1.08);
}

.venue-secondary-btn {
  background: rgba(43, 4, 11, 0.85);
  color: var(--color-gold-bright);
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.venue-secondary-btn:hover {
  background: rgba(85, 14, 25, 0.9);
  border-color: var(--color-gold-bright);
  color: #FFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.3);
}

/* Right Panel: Royal Jharokha Map Pavilion */
.venue-map-pavilion {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-sizing: border-box;
}

.jharokha-frame {
  background: radial-gradient(ellipse at center, rgba(38, 8, 17, 0.96) 0%, rgba(16, 2, 7, 0.98) 100%);
  border: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 24px;
  padding: 1.1rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(212, 175, 55, 0.12);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jharokha-arch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0.95rem 0.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  margin-bottom: 0.9rem;
}

.arch-ornament-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.arch-flourish {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  color: var(--color-gold-bright);
  font-weight: 700;
}

.arch-live-pulse {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #64DD17;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64DD17;
  box-shadow: 0 0 8px #64DD17;
  animation: radarPulse 2s infinite ease-in-out;
}

@keyframes radarPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

.arch-lantern {
  color: var(--color-gold-bright);
  font-size: 0.9rem;
  opacity: 0.8;
}

.jharokha-map-canvas {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
  line-height: 0;
}

.jharokha-map-canvas iframe {
  width: 100%;
  height: 440px;
  display: block;
  filter: saturate(1.1) contrast(1.05);
}

.map-vignette-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(26, 2, 7, 0.5), inset 0 0 12px rgba(212, 175, 55, 0.25);
  border-radius: 16px;
}

/* Map Floating Pin Card */
.map-floating-pin-card {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(26, 2, 7, 0.92);
  border: 1px solid rgba(245, 215, 127, 0.45);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: auto;
}

.floating-pin-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A81B32, #6A1120);
  border: 1px solid #F5D77F;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F5D77F;
  font-size: 0.85rem;
}

.floating-pin-info {
  display: flex;
  flex-direction: column;
}

.floating-pin-title {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #FFF;
}

.floating-pin-coords {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.64rem;
  color: #F5D77F;
}

.floating-pin-link {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(245, 215, 127, 0.4);
  color: var(--color-gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.floating-pin-link:hover {
  background: var(--color-gold-main);
  color: #1A0207;
  transform: scale(1.1);
}

.jharokha-footer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.distance-pill {
  background: rgba(28, 4, 11, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  padding: 0.55rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: #E2D7C3;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.distance-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 215, 127, 0.5);
}

.distance-pill i {
  color: var(--color-gold-bright);
  font-size: 0.88rem;
}

.distance-pill strong {
  color: #FFF;
}

/* Guest Weather Tip Card */
.guest-weather-tip-card {
  background: linear-gradient(135deg, rgba(38, 8, 17, 0.85) 0%, rgba(55, 11, 25, 0.85) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.guest-weather-tip-card .tip-icon {
  font-size: 1.3rem;
  color: var(--color-gold-bright);
  margin-top: 0.15rem;
  animation: tipSparkle 3s infinite ease-in-out;
}

@keyframes tipSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(245, 215, 127, 0.3)); }
  50% { transform: scale(1.15) rotate(15deg); filter: drop-shadow(0 0 8px rgba(245, 215, 127, 0.8)); }
}

.guest-weather-tip-card .tip-content strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-gold-bright);
  margin-bottom: 0.25rem;
}

.guest-weather-tip-card .tip-content p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.02rem;
  font-style: italic;
  color: #E2D7C3;
  line-height: 1.45;
  margin: 0;
}

/* Royal Toast Notification */
.royal-toast-notification {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(38, 8, 17, 0.98) 0%, rgba(16, 2, 7, 0.98) 100%);
  border: 1px solid var(--color-gold-bright);
  border-radius: 30px;
  padding: 0.75rem 1.6rem;
  color: #FAF3E0;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.4);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.royal-toast-notification.visible {
  top: max(1.5rem, calc(env(safe-area-inset-top, 0px) + 0.8rem));
  opacity: 1;
}

.royal-toast-notification .toast-icon {
  color: #64DD17;
  font-size: 1.1rem;
}

/* Responsive Adjustments for Venue Pavilion */
@media (max-width: 1024px) {
  .venue-container {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
  .jharokha-map-canvas iframe {
    height: 380px;
  }
}

@media (max-width: 640px) {
  .venue-section {
    padding: 4.5rem 1rem;
  }
  .transit-tabs {
    grid-template-columns: 1fr;
  }
  .venue-amenities-grid {
    grid-template-columns: 1fr;
  }
  .venue-cta-row {
    flex-direction: column;
  }
  .venue-primary-btn,
  .venue-secondary-btn {
    width: 100%;
  }
  .jharokha-footer-stats {
    grid-template-columns: 1fr;
  }
  .jharokha-map-canvas iframe {
    height: 320px;
  }
}

/* Extra Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .couple-hero-title {
    font-size: 2.6rem;
  }
  .family-invite-text {
    font-size: 1rem;
  }
  .wax-seal {
    width: 95px;
    height: 95px;
  }
  .seal-inner {
    width: 60px;
    height: 60px;
  }
  .seal-monogram {
    font-size: 1.1rem;
  }
}