/* 
   ==========================================================================
   ROYAL MUSLIM WEDDING INVITATION — COMPLETE STYLESHEET
   Chandelier + Lamps + Trilingual + Khandaan + Edit Drawer
   ==========================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Great+Vibes&family=Montserrat:wght@300;400;600&family=Noto+Nastaliq+Urdu:wght@400;700&family=Noto+Sans+Devanagari:wght@300;400;600;700&family=Tiro+Devanagari+Hindi&family=Hind:wght@300;400;500;600&display=swap');

:root {
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-theme: background 2s ease, background-color 2s ease, border-color 2s ease, color 2s ease, box-shadow 2s ease;
    
    --font-royal: 'Cinzel', serif;
    --font-decorative: 'Cinzel Decorative', serif;
    --font-cursive: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-urdu: 'Noto Nastaliq Urdu', serif;
    --font-hindi: 'Noto Sans Devanagari', sans-serif;
}

/* ==========================================================================
   5 PREMIUM DYNAMIC MULTI-COLOR THEMES
   Each theme guarantees high contrast text readability
   ========================================================================== */

/* 1. Emerald Noir (Default) */
body.theme-emerald, .theme-emerald {
    --bg-dark: #04130e;
    --bg-card: #082218;
    --bg-card-hover: #0c2d21;
    --gold-light: #fbe08e;
    --gold-mid: #d4af37;
    --gold-dark: #a67c13;
    --gold-gradient: linear-gradient(135deg, #fbe08e 0%, #d4af37 50%, #7c5a08 100%);
    --gold-border: linear-gradient(135deg, #7c5a08 0%, #fbe08e 50%, #7c5a08 100%);
    --text-white: #ffffff;
    --text-gold-light: #f6eed5;
    --text-gold: #e8cc6e;
    --text-muted: #b8d0bc;
    --shadow-gold: 0 4px 30px rgba(212, 175, 55, 0.12);
    --shadow-gold-heavy: 0 10px 40px rgba(212, 175, 55, 0.25);
    --glow-radial: radial-gradient(circle at 50% 30%, #0d3627 0%, #04130e 70%);
}

/* 2. Crimson Royale */
body.theme-crimson, .theme-crimson {
    --bg-dark: #160305;
    --bg-card: #28070b;
    --bg-card-hover: #3a0b11;
    --gold-light: #fde5a3;
    --gold-mid: #e5b83b;
    --gold-dark: #b2841a;
    --gold-gradient: linear-gradient(135deg, #fff4cc 0%, #e5b83b 50%, #855f0b 100%);
    --gold-border: linear-gradient(135deg, #855f0b 0%, #fde5a3 50%, #855f0b 100%);
    --text-white: #ffffff;
    --text-gold-light: #fff5e6;
    --text-gold: #f0cc5a;
    --text-muted: #e0c5c8;
    --shadow-gold: 0 4px 30px rgba(229, 184, 59, 0.12);
    --shadow-gold-heavy: 0 10px 40px rgba(229, 184, 59, 0.25);
    --glow-radial: radial-gradient(circle at 50% 30%, #450c13 0%, #160305 70%);
}

/* 3. Midnight Sapphire */
body.theme-sapphire, .theme-sapphire {
    --bg-dark: #020b17;
    --bg-card: #061833;
    --bg-card-hover: #0a254c;
    --gold-light: #fae4b2;
    --gold-mid: #dfb158;
    --gold-dark: #aa7c11;
    --gold-gradient: linear-gradient(135deg, #fae4b2 0%, #dfb158 50%, #7a5506 100%);
    --gold-border: linear-gradient(135deg, #7a5506 0%, #fae4b2 50%, #7a5506 100%);
    --text-white: #ffffff;
    --text-gold-light: #fff4db;
    --text-gold: #f0c462;
    --text-muted: #b5c4de;
    --shadow-gold: 0 4px 30px rgba(223, 177, 88, 0.12);
    --shadow-gold-heavy: 0 10px 40px rgba(223, 177, 88, 0.25);
    --glow-radial: radial-gradient(circle at 50% 30%, #0d2c5c 0%, #020b17 70%);
}

/* 4. Amethyst Luxury */
body.theme-amethyst, .theme-amethyst {
    --bg-dark: #0f0214;
    --bg-card: #20062c;
    --bg-card-hover: #2f0b40;
    --gold-light: #fae2b1;
    --gold-mid: #d8ab53;
    --gold-dark: #aa7c11;
    --gold-gradient: linear-gradient(135deg, #fae2b1 0%, #d8ab53 50%, #7a5506 100%);
    --gold-border: linear-gradient(135deg, #7a5506 0%, #fae2b1 50%, #7a5506 100%);
    --text-white: #ffffff;
    --text-gold-light: #fff4db;
    --text-gold: #edc060;
    --text-muted: #d0b8df;
    --shadow-gold: 0 4px 30px rgba(216, 171, 83, 0.12);
    --shadow-gold-heavy: 0 10px 40px rgba(216, 171, 83, 0.25);
    --glow-radial: radial-gradient(circle at 50% 30%, #3a0d50 0%, #0f0214 70%);
}

/* 5. Rose Gold Sparkle */
body.theme-rosegold, .theme-rosegold {
    --bg-dark: #160e10;
    --bg-card: #28191c;
    --bg-card-hover: #3a2528;
    --gold-light: #fdd3cb;
    --gold-mid: #df9a90;
    --gold-dark: #a56057;
    --gold-gradient: linear-gradient(135deg, #fdd3cb 0%, #df9a90 50%, #70332b 100%);
    --gold-border: linear-gradient(135deg, #70332b 0%, #fdd3cb 50%, #70332b 100%);
    --text-white: #ffffff;
    --text-gold-light: #fff0ed;
    --text-gold: #f0b0a5;
    --text-muted: #e0b8bb;
    --shadow-gold: 0 4px 30px rgba(223, 154, 144, 0.12);
    --shadow-gold-heavy: 0 10px 40px rgba(223, 154, 144, 0.25);
    --glow-radial: radial-gradient(circle at 50% 30%, #462227 0%, #160e10 70%);
}

/* ==========================================================================
   Base Reset & Global Readability
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    transition: var(--transition-theme);
}

body.opened-invitation {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* RTL support for Urdu */
body.lang-ur { direction: rtl; }
body.lang-ur .edit-drawer-body { direction: rtl; text-align: right; }
body.lang-ur .card-inner-scroll,
body.lang-ur .family-card,
body.lang-ur .event-card,
body.lang-ur .rsvp-card,
body.lang-ur .rsvp-form-group,
body.lang-ur .couple-names-wrap,
body.lang-ur .hero-section,
body.lang-ur .countdown-section,
body.lang-ur .events-section,
body.lang-ur .family-section,
body.lang-ur .rsvp-section,
body.lang-ur .contact-section,
body.lang-ur .contact-card,
body.lang-ur .footer { text-align: center; }
body.lang-ur .rsvp-label,
body.lang-ur .event-detail-item { direction: rtl; }

/* Hindi font overrides */
body.lang-hi { font-family: var(--font-hindi), var(--font-body); }
body.lang-hi .cursive-header,
body.lang-hi .royal-title,
body.lang-hi .couple-name,
body.lang-hi .secret-title,
body.lang-hi .secret-desc,
body.lang-hi .secret-badge,
body.lang-hi .secret-venue-tag,
body.lang-hi .countdown-title,
body.lang-hi .family-role,
body.lang-hi .contact-title,
body.lang-hi .contact-sub-title,
body.lang-hi .bismillah-translation,
body.lang-hi .success-title,
body.lang-hi .footer-cursive,
body.lang-hi .footer-note,
body.lang-hi .footer-dua,
body.lang-hi .theme-badge,
body.lang-hi .parent-info,
body.lang-hi .lang-label {
    font-family: var(--font-hindi), var(--font-body) !important;
}

/* Urdu font overrides */
body.lang-ur { font-family: var(--font-urdu), var(--font-body); }
body.lang-ur .cursive-header,
body.lang-ur .royal-title,
body.lang-ur .couple-name,
body.lang-ur .secret-title,
body.lang-ur .secret-desc,
body.lang-ur .secret-badge,
body.lang-ur .secret-venue-tag,
body.lang-ur .countdown-title,
body.lang-ur .family-role,
body.lang-ur .contact-title,
body.lang-ur .contact-sub-title,
body.lang-ur .bismillah-translation,
body.lang-ur .success-title,
body.lang-ur .footer-cursive,
body.lang-ur .footer-note,
body.lang-ur .footer-dua,
body.lang-ur .theme-badge,
body.lang-ur .parent-info,
body.lang-ur .lang-label {
    font-family: var(--font-urdu), var(--font-body) !important;
}

/* Global text readability: all readable text has subtle shadow */
.poetry-verse, .intro-text, .invitation-quote, .rsvp-desc,
.event-desc, .family-names, .kids-speech-bubble, .venue-address,
.footer-dua, .bismillah-translation, .parent-info, .door-tagline,
.success-msg, .countdown-lbl, .event-detail-item span, .scratch-instruction {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

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

/* ==========================================================================
   Background & Ambient Effects
   ========================================================================== */
.ambient-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; background: var(--glow-radial);
    pointer-events: none; transition: var(--transition-theme);
}

#particles-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none; overflow: hidden;
}

.particle {
    position: absolute; background: var(--gold-gradient);
    border-radius: 50%; pointer-events: none; opacity: 0.6;
    animation: floatParticle linear infinite;
}

.petal {
    position: absolute; background: rgba(255, 192, 203, 0.35);
    border-radius: 50% 0 50% 50%; pointer-events: none;
    transform-origin: left top; animation: fallPetal linear infinite;
}

@keyframes floatParticle {
    0% { transform: translateY(100vh) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.6; } 90% { opacity: 0.6; }
    100% { transform: translateY(-10vh) translateX(50px) scale(1); opacity: 0; }
}

@keyframes fallPetal {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; } 90% { opacity: 0.6; }
    100% { transform: translateY(100vh) translateX(100px) rotate(360deg); opacity: 0; }
}

/* ==========================================================================
   A. 3D ENTRANCE GATE SCREEN
   ========================================================================== */
.camera-viewport {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
    z-index: 2000; overflow: hidden;
    perspective: 1200px; transform-style: preserve-3d;
    transition: transform 2s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 2.2s ease;
    background: #000;
}
@media (min-width: 481px) {
    .camera-viewport {
        left: 50%;
        width: 480px;
        margin-left: -240px;
    }
}
.camera-viewport.zoomed {
    transform: translateZ(600px); opacity: 0; pointer-events: none;
}

.door-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
    background: transparent;
    z-index: 3;
    display: flex; justify-content: center; align-items: center;
    transform-style: preserve-3d;
    transition: var(--transition-theme);
}

/* Viewport Fixed Scenery Layer */
.fixed-scenery-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2100;
    pointer-events: none;
}
@media (min-width: 481px) {
    .fixed-scenery-layer {
        left: 50%;
        width: 480px;
        margin-left: -240px;
    }
}
.fixed-scenery-layer * {
    pointer-events: none !important;
}

/* ═══ CHANDELIER STYLES & ANIMATION ═══ */
.chandelier-container {
    --chandelier-scale: 1.4;
    position: fixed; top: 0; left: 50%;
    display: flex; flex-direction: column; align-items: center;
    z-index: 20; animation: chandelierSway 6s ease-in-out infinite;
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--chandelier-scale));
}

@keyframes chandelierSway {
    0%, 100% { transform: translateX(-50%) scale(var(--chandelier-scale)) rotate(-2.5deg); }
    50% { transform: translateX(-50%) scale(var(--chandelier-scale)) rotate(2.5deg); }
}

.chandelier-chain {
    width: 2px; height: 40px;
    background: linear-gradient(to bottom, var(--gold-dark), var(--gold-mid));
}

.chandelier-body {
    position: relative; display: flex; flex-direction: column; align-items: center;
}

.chandelier-top-cap {
    width: 30px; height: 12px; border-radius: 50%;
    background: var(--gold-gradient);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
}

.chandelier-arms {
    display: flex; gap: 6px; margin-top: -2px; align-items: flex-end;
}

.chandelier-arm {
    display: flex; flex-direction: column; align-items: center;
}

.arm-left-far, .arm-right-far { margin-top: 8px; }
.arm-left, .arm-right { margin-top: 4px; }

.chandelier-crystal {
    width: 4px; height: 16px;
    background: linear-gradient(to bottom, var(--gold-light), transparent);
    border-radius: 0 0 2px 2px;
    animation: crystalSparkle 2.5s ease-in-out infinite alternate;
}

.chandelier-crystal-big {
    width: 6px; height: 22px;
}

.chandelier-light {
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #fffbe6 0%, var(--gold-light) 60%, transparent 100%);
    box-shadow: 0 0 8px 3px rgba(255, 235, 150, 0.6);
    animation: lightFlicker 3s ease-in-out infinite;
}

.chandelier-light-big {
    width: 8px; height: 8px;
    box-shadow: 0 0 12px 5px rgba(255, 235, 150, 0.7);
}

.chandelier-drops {
    display: flex; gap: 4px; margin-top: 2px;
}

.chandelier-drops .drop {
    width: 3px; height: 10px; border-radius: 0 0 50% 50%;
    background: linear-gradient(to bottom, var(--gold-mid), transparent);
    animation: crystalSparkle 2s ease-in-out infinite alternate;
}
.chandelier-drops .drop:nth-child(odd) { animation-delay: 0.5s; }
.chandelier-drops .drop:nth-child(even) { animation-delay: 1s; }

.chandelier-glow {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 150, 0.15) 0%, transparent 70%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes crystalSparkle {
    0% { opacity: 0.5; filter: brightness(0.8); }
    100% { opacity: 1; filter: brightness(1.4); }
}

@keyframes lightFlicker {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.15); }
    50% { opacity: 0.85; transform: scale(1.05); }
    75% { opacity: 1; transform: scale(1.1); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }
}

/* ═══ SIDE LAMPS ═══ */
.side-lamp {
    --lamp-scale: 1;
    position: fixed; top: 0; z-index: 15;
    display: flex; flex-direction: column; align-items: center;
}

/* Staggered Side Lamps Placement & Sway Animations */
.side-lamp-left-far { left: 4%; animation: lampSwayLeftFar 5.5s ease-in-out infinite; transform-origin: top center; }
.side-lamp-left-far .lamp-chain { height: 75px; }

.side-lamp-left-mid { left: 12%; animation: lampSwayLeftMid 4.8s ease-in-out infinite; transform-origin: top center; }
.side-lamp-left-mid .lamp-chain { height: 45px; }

.side-lamp-left-close { left: 20%; animation: lampSwayLeftClose 6.2s ease-in-out infinite; transform-origin: top center; }
.side-lamp-left-close .lamp-chain { height: 95px; }

.side-lamp-right-close { right: 20%; animation: lampSwayRightClose 6.2s ease-in-out infinite; transform-origin: top center; }
.side-lamp-right-close .lamp-chain { height: 95px; }

.side-lamp-right-mid { right: 12%; animation: lampSwayRightMid 4.8s ease-in-out infinite; transform-origin: top center; }
.side-lamp-right-mid .lamp-chain { height: 45px; }

.side-lamp-right-far { right: 4%; animation: lampSwayRightFar 5.5s ease-in-out infinite; transform-origin: top center; }
.side-lamp-right-far .lamp-chain { height: 75px; }

@keyframes lampSwayLeftFar { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(-2.5deg); } 50% { transform: scale(var(--lamp-scale)) rotate(1.5deg); } }
@keyframes lampSwayLeftMid { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(-1.8deg); } 50% { transform: scale(var(--lamp-scale)) rotate(2.2deg); } }
@keyframes lampSwayLeftClose { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(-3deg); } 50% { transform: scale(var(--lamp-scale)) rotate(1.2deg); } }

@keyframes lampSwayRightClose { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(3deg); } 50% { transform: scale(var(--lamp-scale)) rotate(-1.2deg); } }
@keyframes lampSwayRightMid { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(1.8deg); } 50% { transform: scale(var(--lamp-scale)) rotate(-2.2deg); } }
@keyframes lampSwayRightFar { 0%, 100% { transform: scale(var(--lamp-scale)) rotate(2.5deg); } 50% { transform: scale(var(--lamp-scale)) rotate(-1.5deg); } }

.lamp-chain {
    width: 2px;
    background: linear-gradient(to bottom, var(--gold-dark), var(--gold-mid));
}

.lamp-body {
    position: relative; display: flex; flex-direction: column; align-items: center;
}

.lamp-cap {
    width: 22px; height: 8px; border-radius: 50%;
    background: var(--gold-gradient);
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.5);
}

.lamp-glass {
    width: 18px; height: 30px;
    background: rgba(255, 200, 80, 0.08);
    border: 1px solid var(--gold-dark);
    border-radius: 4px 4px 8px 8px;
    position: relative;
    box-shadow: inset 0 0 10px rgba(255, 200, 80, 0.1);
}

.lamp-flame {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 12px;
    background: radial-gradient(ellipse, #fff8dc 0%, #ffcc33 40%, #ff8800 70%, transparent 100%);
    border-radius: 50% 50% 20% 20%;
    animation: flameFlicker 1.5s ease-in-out infinite;
    filter: blur(0.5px);
}

.lamp-base {
    width: 14px; height: 5px; border-radius: 0 0 4px 4px;
    background: var(--gold-gradient);
}

.lamp-glow {
    position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 80, 0.12) 0%, transparent 70%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flameFlicker {
    0%, 100% { opacity: 0.8; height: 12px; }
    20% { opacity: 1; height: 14px; }
    40% { opacity: 0.7; height: 10px; }
    60% { opacity: 0.95; height: 13px; }
    80% { opacity: 0.85; height: 11px; }
}

/* ═══ DOOR STYLES ═══ */
.door-archway {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 10;
}
.door-archway svg { width: 100%; height: 100%; }

.split-cover-wrapper {
    position: absolute; width: 100%; height: 100%; max-width: 100%;
    z-index: 5; display: flex; justify-content: center; align-items: center;
    perspective: 1200px; transform-style: preserve-3d;
}

.cover-door {
    position: absolute; top: 0; width: 50%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 4.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 3.8s ease-in-out;
    z-index: 2;
}
.cover-door-left { left: 0; transform-origin: left center; }
.cover-door-right { right: 0; transform-origin: right center; }

.split-cover-wrapper.opened .cover-door-left { transform: rotateY(-140deg); opacity: 0; }
.split-cover-wrapper.opened .cover-door-right { transform: rotateY(140deg); opacity: 0; }

.cover-door-face {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, var(--bg-card-hover) 0%, var(--bg-dark) 100%);
    border: 3px double var(--gold-mid);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: var(--transition-theme);
}

/* Full-Height Arched Window Frames */
.door-window-frame {
    position: absolute;
    top: 3%;
    bottom: 3%;
    left: 8%;
    right: 8%;
    border: 2px solid var(--gold-mid);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    overflow: hidden;
    pointer-events: none;
    transition: var(--transition-theme);
}
.cover-door-left .door-window-frame {
    border-radius: 100px 0 0 0;
    border-right: none;
}
.cover-door-right .door-window-frame {
    border-radius: 0 100px 0 0;
    border-left: none;
}
.cover-door-left .door-window-frame .door-border {
    border-radius: 94px 0 0 0;
}
.cover-door-right .door-window-frame .door-border {
    border-radius: 0 94px 0 0;
}

.cover-door-left .door-window-frame {
    border-radius: 170px 0 0 0;
    border-right: none;
}
.cover-door-right .door-window-frame {
    border-radius: 0 170px 0 0;
    border-left: none;
}

.lattice-pattern {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(circle, transparent 20%, var(--gold-mid) 20%, var(--gold-mid) 80%, transparent 80%),
        radial-gradient(circle, transparent 20%, var(--gold-mid) 20%, var(--gold-mid) 80%, transparent 80%);
    background-size: 24px 24px; background-position: 0 0, 12px 12px;
    opacity: 0.15;
    pointer-events: none; transition: var(--transition-theme);
}

.door-border {
    position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1.5px solid var(--gold-dark); opacity: 0.45;
    pointer-events: none; transition: var(--transition-theme);
}
.cover-door-left .door-window-frame .door-border {
    border-radius: 164px 0 0 0;
    border-right: none;
}
.cover-door-right .door-window-frame .door-border {
    border-radius: 0 164px 0 0;
    border-left: none;
}

/* Mughal Wreath Behind Seal */
.door-wreath-ornament {
    position: absolute; width: 130px; height: 130px; border-radius: 50%;
    border: 1.5px dashed var(--gold-mid); opacity: 0.4; z-index: 3;
    pointer-events: none; animation: rotateDisc 15s linear infinite;
    transition: var(--transition-theme);
}

/* Bismillah above the Seal badge */
.seal-bismillah-wrapper {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    pointer-events: none;
    text-align: center;
    width: 100%;
}
.seal-bismillah-text {
    font-family: var(--font-royal);
    font-size: 0.9rem;
    color: var(--text-gold);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
    letter-spacing: 1px;
    font-weight: bold;
    transition: var(--transition-theme);
}

/* Wax Seal circular badge with initials */
.royal-wax-seal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, #a1141e 0%, #68050a 100%);
    border: 3px double var(--gold-mid);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    z-index: 10; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: var(--transition-smooth); pointer-events: auto;
}
.royal-wax-seal:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 25px var(--gold-mid); }
.split-cover-wrapper.opened .royal-wax-seal { opacity: 0; transform: translate(-50%, -50%) scale(0.6); pointer-events: none; }
.split-cover-wrapper.opened .seal-bismillah-wrapper { opacity: 0; transition: opacity 0.5s ease; }

.seal-inner { text-align: center; color: var(--gold-light); }

.seal-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-royal);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold-light);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.seal-heart {
    color: #ff3344;
    font-size: 1.25rem;
    animation: heartBeat 1.2s infinite ease-in-out;
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(255, 50, 50, 0.6));
}

.seal-glow {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    box-shadow: 0 0 15px var(--gold-mid); opacity: 0.5;
    animation: sealPulse 2s infinite ease-in-out;
}

@keyframes sealPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.8; }
}
@keyframes rotateDisc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   B. FLOATING CONTROLS
   ========================================================================== */
.card-controls-container {
    position: absolute; top: 20px; right: 20px;
    display: flex; gap: 8px; z-index: 15; flex-wrap: wrap;
    direction: ltr !important;
}

.card-control-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(18, 18, 18, 0.85); border: 1.5px solid var(--gold-mid);
    color: var(--gold-mid); display: flex; justify-content: center; align-items: center;
    cursor: pointer; box-shadow: var(--shadow-gold);
    transition: var(--transition-smooth); outline: none; font-size: 14px;
    position: relative;
}
.card-control-btn:hover { transform: scale(1.1); background: var(--gold-gradient); color: #000; box-shadow: var(--shadow-gold-heavy); }
.card-control-btn.active { border-color: var(--gold-light); box-shadow: 0 0 15px var(--gold-mid); }

.lang-label {
    font-family: var(--font-royal); font-weight: 700; font-size: 11px; letter-spacing: 1px;
}

.music-pulse {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 1.5px solid var(--gold-light); opacity: 0; pointer-events: none;
}
.card-control-btn.active .music-pulse { animation: radarPulse 1.8s linear infinite; }

@keyframes radarPulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ==========================================================================
   C. MAIN CARD LAYOUT
   ========================================================================== */
.main-card-container {
    max-width: 680px; width: 95%;
    margin: 40px auto 60px auto; position: relative; z-index: 100;
    border-radius: 20px; background: var(--bg-card);
    box-shadow: var(--shadow-gold-heavy); padding: 8px;
    display: block; opacity: 1; transform: translateY(0);
    transition: var(--transition-theme);
}

body:not(.opened-invitation) .main-card-container {
    opacity: 0; transform: translateY(80px); pointer-events: none;
}

.card-outer-border {
    position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 2px double var(--gold-mid); border-radius: 12px;
    pointer-events: none; opacity: 0.8; z-index: 2;
    transition: var(--transition-theme);
}

.card-corner-accent {
    position: absolute; width: 32px; height: 32px;
    border: 2.5px solid var(--gold-mid); pointer-events: none; z-index: 3;
    transition: var(--transition-theme);
}
.corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.card-bg-arch-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.01) 0%, rgba(0,0,0,0.4) 100%);
    border-radius: 20px; pointer-events: none; z-index: 1;
}

.card-inner-scroll {
    position: relative; z-index: 2; padding: 115px 30px 50px 30px;
    overflow-y: auto; max-height: 85vh; border-radius: 16px;
    background: radial-gradient(circle at center, var(--bg-card-hover) 0%, var(--bg-card) 100%);
    transition: var(--transition-theme);
}

/* ==========================================================================
   Section Divider
   ========================================================================== */
.section-divider {
    display: flex; justify-content: center; align-items: center; margin: 3rem 0;
}
.divider-line { height: 1px; width: 60px; background: var(--gold-gradient); opacity: 0.5; }
.divider-icon { width: 24px; height: 24px; margin: 0 15px; filter: drop-shadow(0 0 5px var(--gold-mid)); }

/* ==========================================================================
   Hero / Bismillah & Couple Names
   ========================================================================== */
.hero-section {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    padding-top: 90px; /* Shift Bismillah down to accommodate the Chandelier and Lamps */
}

.bismillah-container { width: 100%; display: flex; justify-content: center; margin-bottom: 8px; }
.bismillah-svg { width: 260px; height: auto; }

.bismillah-translation {
    font-size: 0.65rem; font-family: var(--font-body);
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-gold-light); margin-bottom: 20px;
    transition: var(--transition-theme);
}

/* Quranic Marriage Verse Box (Royal Scroll Style) */
.wedding-poetry-box.royal-poetry-box {
    position: relative;
    background: radial-gradient(circle at center, rgba(18, 18, 18, 0.55) 0%, rgba(0, 0, 0, 0.65) 100%);
    border: 2px solid var(--gold-mid);
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), var(--shadow-gold), 0 5px 15px rgba(0,0,0,0.5);
    margin: 1.5rem auto 2.5rem auto;
    max-width: 90%;
    transition: var(--transition-theme);
}
.wedding-poetry-box.royal-poetry-box::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border: 1.5px solid rgba(212, 175, 55, 0.25);
    border-radius: 9px;
    pointer-events: none;
}
/* Corner ornaments for royal box */
.royal-box-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--gold-mid);
    pointer-events: none;
    z-index: 2;
}
.royal-box-corner.corner-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.royal-box-corner.corner-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.royal-box-corner.corner-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.royal-box-corner.corner-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }



/* Gold Floral Vine SVGs */
.card-floral {
    position: absolute;
    top: 20px;
    width: 40px;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    transition: var(--transition-theme);
}
.card-floral-left { left: 20px; }
.card-floral-right { right: 20px; }
.card-floral svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.25)); }

.poetry-verse {
    font-family: var(--font-body); font-size: 0.85rem;
    font-style: italic; color: var(--text-gold-light);
    line-height: 1.7; font-weight: 300;
    transition: var(--transition-theme);
}
.verse-reference {
    font-family: var(--font-royal); font-size: 0.75rem;
    color: var(--text-gold); display: block; margin-top: 5px;
    font-style: normal; transition: var(--transition-theme);
}

.intro-text {
    font-size: 0.75rem; letter-spacing: 3px; color: var(--text-gold-light);
    text-transform: uppercase; margin-bottom: 1.5rem; line-height: 1.8;
    max-width: 90%; margin-left: auto; margin-right: auto;
    transition: var(--transition-theme);
}

.cursive-header {
    font-family: var(--font-body); color: var(--text-gold);
    font-size: 1.1rem; margin-bottom: 0.6rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    transition: var(--transition-theme);
}

.royal-title {
    font-family: var(--font-royal); color: var(--text-white);
    letter-spacing: 4px; text-transform: uppercase; text-align: center;
}
.gold-gradient-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* standard fallback */
    display: inline-block;
}

/* ♥ Couple Names with Heart ♥ */
.couple-names-wrap { margin: 2rem 0; text-align: center; }

.groom-block, .bride-block { margin: 1rem 0; }

.couple-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
    font-weight: 800;
    line-height: 1.1; margin: 0.3rem 0;
    animation: nameGlow 3s ease-in-out infinite alternate;
}

.parent-info {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--text-gold-light); letter-spacing: 1.5px;
    margin-top: 0.3rem; font-weight: 300;
    transition: var(--transition-theme);
}

.heart-separator {
    position: relative; display: flex; justify-content: center;
    align-items: center; margin: 1.2rem 0;
}

.heart-icon {
    font-size: 2.4rem; z-index: 2;
    animation: heartBeat 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.4));
}

.heart-pulse-ring {
    position: absolute; width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid rgba(255, 50, 50, 0.3);
    animation: heartRingPulse 2s ease-out infinite;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

@keyframes heartRingPulse {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.invitation-quote {
    color: var(--text-gold-light); font-family: var(--font-body);
    font-size: 0.9rem; font-weight: 300; max-width: 85%;
    margin: 1rem auto 0; letter-spacing: 1px; line-height: 1.7;
    transition: var(--transition-theme);
}

/* ==========================================================================
   Photo Frame
   ========================================================================== */
.photo-frame-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    position: relative;
}

.photo-floral {
    position: absolute;
    width: 80px;
    height: 320px;
    z-index: 10;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center bottom;
}

.photo-floral-left {
    left: calc(50% - 130px - 60px); /* 130px is half of 260px frame width, 60px is spacing */
    animation: photoFloralSwayLeft 5s ease-in-out infinite;
}

.photo-floral-right {
    right: calc(50% - 130px - 60px);
    transform: translateY(-50%) scaleX(-1);
    transform-origin: center bottom;
    animation: photoFloralSwayRight 5.5s ease-in-out infinite;
}

@keyframes photoFloralSwayLeft {
    0%, 100% { transform: translateY(-50%) rotate(-3deg); }
    50% { transform: translateY(-50%) rotate(3deg); }
}

@keyframes photoFloralSwayRight {
    0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(3deg); }
    50% { transform: translateY(-50%) scaleX(-1) rotate(-3deg); }
}

.photo-frame {
    position: relative; width: 260px; height: 350px;
    border-radius: 130px 130px 0 0; padding: 8px;
    background: var(--gold-border); box-shadow: var(--shadow-gold-heavy);
    overflow: hidden; transition: var(--transition-smooth), var(--transition-theme);
}
.photo-frame:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-gold-heavy); }

.photo-inner {
    width: 100%; height: 100%; border-radius: 122px 122px 0 0;
    overflow: hidden; position: relative; background-color: #111;
}
.couple-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s ease; }
.photo-frame:hover .couple-img { transform: scale(1.08); }
.photo-inner::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6); pointer-events: none;
}

/* ==========================================================================
   Scratch Card
   ========================================================================== */
.scratch-section { text-align: center; margin: 3rem 0; }

.scratch-instruction {
    font-size: 0.85rem; color: var(--text-gold-light); letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 1.5rem; font-weight: 600;
    transition: var(--transition-theme);
}

.scratch-card-outer {
    position: relative; width: 320px; height: 200px; margin: 0 auto;
    border-radius: 15px; padding: 3px; background: var(--gold-border);
    box-shadow: var(--shadow-gold); overflow: hidden;
    transition: var(--transition-theme);
}

.scratch-card-inner {
    position: relative; width: 100%; height: 100%; border-radius: 12px;
    background-color: var(--bg-card); display: flex; flex-direction: column;
    justify-content: center; align-items: center; overflow: hidden;
    transition: var(--transition-theme);
}

.scratch-revealed-content {
    position: absolute; width: 100%; height: 100%; padding: 20px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: radial-gradient(circle, var(--bg-card-hover) 0%, var(--bg-dark) 100%);
    z-index: 1; transition: var(--transition-theme);
}

.secret-title { font-family: var(--font-royal); color: var(--text-gold); font-size: 0.85rem; letter-spacing: 3px; margin-bottom: 0.8rem; }
.secret-desc { font-family: var(--font-body) !important; font-size: 1.3rem; color: var(--text-white); font-weight: 700; margin-bottom: 0.8rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.secret-venue-tag {
    background: rgba(212, 175, 55, 0.12); border: 1px solid var(--gold-mid);
    padding: 4px 14px; font-family: var(--font-royal); font-size: 0.7rem;
    letter-spacing: 1.5px; border-radius: 20px; color: var(--text-white);
    transition: var(--transition-theme);
}

#scratch-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2; cursor: crosshair; touch-action: none; border-radius: 12px;
}

/* ==========================================================================
   Countdown
   ========================================================================== */
.countdown-section {
    text-align: center; background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 20px;
    padding: 2.5rem 1.5rem; box-shadow: var(--shadow-gold);
    backdrop-filter: blur(10px); transition: var(--transition-theme);
}

.countdown-title {
    font-family: var(--font-royal); font-size: 1.1rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--text-gold);
    margin-bottom: 2rem; transition: var(--transition-theme);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 460px; margin: 0 auto; }

.countdown-box {
    background: var(--bg-card); border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 12px; padding: 15px 5px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative; overflow: hidden;
    transition: var(--transition-smooth), var(--transition-theme);
}
.countdown-box::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.countdown-box:hover { transform: translateY(-3px); border-color: var(--gold-mid); box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }

.countdown-val {
    font-family: var(--font-royal); font-size: 2.2rem; font-weight: 600;
    color: var(--text-white); line-height: 1; margin-bottom: 5px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}
.countdown-lbl {
    font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-gold-light); transition: var(--transition-theme);
}

/* ==========================================================================
   Event Cards (Baraat & Walima)
   ========================================================================== */
.events-section { padding: 1rem 0; }

.event-cards-grid {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    max-width: 500px; margin: 0 auto;
}

.event-card {
    background: var(--bg-card); border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px; padding: 2rem 1.5rem; text-align: center;
    box-shadow: var(--shadow-gold); position: relative; overflow: hidden;
    transition: var(--transition-smooth), var(--transition-theme);
}
.event-card:hover { transform: translateY(-4px); border-color: var(--gold-mid); box-shadow: var(--shadow-gold-heavy); }

.event-icon-circle {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(212, 175, 55, 0.1); border: 2px solid var(--gold-mid);
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 1rem; font-size: 1.2rem; color: var(--gold-mid);
    transition: var(--transition-theme);
}

.event-name {
    font-family: var(--font-royal); font-size: 1.3rem; font-weight: 700;
    color: var(--text-white); letter-spacing: 2px; margin-bottom: 1rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.event-detail-item {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--text-gold-light);
    transition: var(--transition-theme);
}
.event-detail-item i { color: var(--gold-mid); font-size: 0.9rem; }

.map-link-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gold-gradient); color: #000; padding: 10px 20px;
    border-radius: 25px; font-family: var(--font-royal); font-size: 0.75rem;
    font-weight: 600; letter-spacing: 1.5px; text-decoration: none;
    margin-top: 1rem; box-shadow: var(--shadow-gold);
    transition: var(--transition-smooth);
}
.map-link-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold-heavy); filter: brightness(1.1); }

/* ==========================================================================
   Family Khandaan Section
   ========================================================================== */
.family-section { padding: 1rem 0; }

.family-cards-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    max-width: 500px; margin: 0 auto;
}

.family-card {
    background: var(--bg-card); border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 15px; padding: 1.3rem; text-align: center;
    box-shadow: var(--shadow-gold); transition: var(--transition-smooth), var(--transition-theme);
}
.family-card:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.3); box-shadow: var(--shadow-gold-heavy); }

.family-card.highlight-card {
    border-color: var(--gold-mid); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
    box-shadow: 0 4px 25px rgba(212, 175, 55, 0.15);
}

.family-card.kids-card {
    border-style: dashed; border-color: rgba(255, 192, 203, 0.3);
}

.family-role {
    font-family: var(--font-royal); font-size: 0.8rem; color: var(--text-gold);
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.6rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: var(--transition-theme);
}

.family-names {
    font-size: 0.85rem; color: var(--text-white); font-weight: 400;
    line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.kids-speech-bubble {
    margin-top: 0.8rem; padding: 8px 16px; border-radius: 12px;
    background: rgba(255, 192, 203, 0.08); border: 1px solid rgba(255, 192, 203, 0.2);
    font-size: 0.8rem; color: var(--text-gold-light); font-style: italic;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ==========================================================================
   RSVP Section
   ========================================================================== */
.rsvp-section { text-align: center; }

.rsvp-card {
    background: var(--bg-card); border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 20px; padding: 2.5rem 2rem;
    box-shadow: var(--shadow-gold-heavy); position: relative; overflow: hidden;
    transition: var(--transition-theme);
}

.rsvp-desc {
    font-size: 0.85rem; color: var(--text-gold-light); margin-bottom: 2rem;
    font-weight: 300; transition: var(--transition-theme);
}

.rsvp-form-group { margin-bottom: 1.5rem; text-align: left; }

.rsvp-label {
    display: block; font-family: var(--font-royal); font-size: 0.75rem;
    letter-spacing: 2px; color: var(--text-gold); margin-bottom: 0.5rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: var(--transition-theme);
}

.rsvp-input {
    width: 100%; background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 8px;
    padding: 12px 15px; color: var(--text-white);
    font-family: var(--font-body); font-size: 0.9rem;
    transition: var(--transition-smooth), var(--transition-theme);
}
.rsvp-input:focus { outline: none; border-color: var(--gold-mid); box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); background: rgba(0, 0, 0, 0.6); }

.rsvp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.rsvp-radio-group { display: flex; gap: 15px; }

.rsvp-radio-lbl { flex: 1; display: block; position: relative; }
.rsvp-radio-lbl input { position: absolute; opacity: 0; cursor: pointer; }

.rsvp-radio-btn {
    display: block; text-align: center; border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 10px;
    font-size: 0.8rem; color: var(--text-gold-light); cursor: pointer;
    transition: var(--transition-smooth), var(--transition-theme);
}
.rsvp-radio-lbl input:checked ~ .rsvp-radio-btn {
    border-color: var(--gold-mid); background: rgba(212, 175, 55, 0.1);
    color: var(--text-white); box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}

.rsvp-submit-btn { width: 100%; margin-top: 1rem; }

.map-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--gold-gradient); color: #000;
    font-family: var(--font-royal); font-weight: 600; font-size: 0.85rem;
    letter-spacing: 2px; padding: 12px 28px; border-radius: 30px;
    text-decoration: none; box-shadow: var(--shadow-gold);
    transition: var(--transition-smooth); border: none; cursor: pointer;
}
.map-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold-heavy); filter: brightness(1.1); }

/* Success Overlay */
.rsvp-success-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, var(--bg-card-hover) 0%, var(--bg-dark) 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 2rem; z-index: 10; opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
.rsvp-success-overlay.visible { opacity: 1; pointer-events: auto; }

.success-icon { width: 70px; height: 70px; margin-bottom: 1.5rem; filter: drop-shadow(0 0 10px var(--gold-mid)); }
.success-title { font-family: var(--font-royal); color: var(--text-gold); font-size: 1.8rem; margin-bottom: 1rem; letter-spacing: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.success-msg { font-size: 0.9rem; color: var(--text-white); font-weight: 300; line-height: 1.6; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { text-align: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(212, 175, 55, 0.1); }
.footer-cursive {
    font-family: var(--font-cursive); color: var(--text-gold);
    font-size: 1.3rem; margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}
.footer-note { font-size: 0.75rem; color: var(--text-gold-light); letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.footer-dua {
    font-size: 0.8rem; color: var(--text-gold-light); margin-top: 1rem;
    font-style: italic; max-width: 90%; margin-left: auto; margin-right: auto;
    line-height: 1.6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   EDIT DRAWER (Floating Side Panel)
   ========================================================================== */
.edit-drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 3000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
    direction: ltr !important;
}
.edit-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.edit-drawer {
    position: fixed; top: 0; right: -380px; width: 360px; max-width: 90vw;
    height: 100vh; height: 100dvh; background: var(--bg-card); border-left: 2px solid var(--gold-mid);
    z-index: 3100; display: flex; flex-direction: column;
    transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
    direction: ltr !important;
}
.edit-drawer.open { right: 0; }

/* Align input text inside edit drawer to RTL for Urdu */
body.lang-ur .edit-drawer-header h3 {
    text-align: right;
    direction: rtl;
    width: 100%;
}
body.lang-ur .edit-group label {
    text-align: right;
    direction: rtl;
}
body.lang-ur .edit-group input,
body.lang-ur .edit-group textarea {
    direction: rtl;
    text-align: right;
}

.edit-drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    flex-shrink: 0;
}
.edit-drawer-header h3 {
    font-family: var(--font-royal); font-size: 1rem;
    color: var(--text-gold); letter-spacing: 2px;
}
.edit-drawer-close {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 0, 0, 0.15); border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff6b6b; cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: var(--transition-smooth);
}
.edit-drawer-close:hover { background: rgba(255, 0, 0, 0.3); transform: scale(1.1); }

.edit-drawer-body {
    padding: 20px; overflow-y: auto; flex: 1;
}

.edit-group { margin-bottom: 1.2rem; }
.edit-group label {
    display: block; font-family: var(--font-royal); font-size: 0.7rem;
    color: var(--text-gold); letter-spacing: 1px; margin-bottom: 4px;
    text-transform: uppercase;
}
.edit-group input, .edit-group textarea {
    width: 100%; background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 8px;
    padding: 10px 12px; color: var(--text-white);
    font-family: var(--font-body); font-size: 0.85rem;
    transition: var(--transition-smooth);
}
.edit-group input:focus, .edit-group textarea:focus {
    outline: none; border-color: var(--gold-mid);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

.edit-divider {
    border: none; border-top: 1px dashed rgba(212, 175, 55, 0.2);
    margin: 1.5rem 0;
}

.edit-drawer-body h4 {
    font-family: var(--font-royal); color: var(--text-gold);
    font-size: 0.85rem; letter-spacing: 1.5px; margin-bottom: 1rem;
}

.save-edits-btn {
    width: 100%; margin-top: 1rem;
}

/* Dynamic Family Section Editor Styles inside Drawer */
.family-edit-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.family-edit-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    padding-bottom: 6px;
    margin-bottom: 4px;
}
.family-edit-item-header h5 {
    color: var(--gold-mid);
    font-family: var(--font-royal);
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}
.family-delete-btn {
    background: rgba(255, 0, 0, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: var(--transition-smooth);
}
.family-delete-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: scale(1.05);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
    .couple-name { font-size: 2.1rem; }
    .cursive-header { font-size: 1.8rem; }
    .countdown-grid { gap: 8px; }
    .countdown-val { font-size: 1.7rem; }
    .countdown-lbl { font-size: 0.55rem; letter-spacing: 1px; }
    .rsvp-row { grid-template-columns: 1fr; gap: 0; }
    
    /* Full screen gate alignment on mobile */
    .split-cover-wrapper {
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
    .door-window-frame {
        top: 3dvh;
        bottom: 3dvh;
        left: 4vw;
        right: 4vw;
    }
    .cover-door-left .door-window-frame {
        border-radius: 100px 0 0 0;
    }
    .cover-door-right .door-window-frame {
        border-radius: 0 100px 0 0;
    }
    .cover-door-left .door-window-frame .door-border {
        border-radius: 94px 0 0 0;
    }
    .cover-door-right .door-window-frame .door-border {
        border-radius: 0 94px 0 0;
    }

    .card-controls-container { top: 10px; right: 10px; gap: 5px; }
    .card-control-btn { width: 34px; height: 34px; font-size: 12px; }
    .chandelier-container { --chandelier-scale: 0.85; }
    
    .side-lamp { --lamp-scale: 0.65; }
    .side-lamp-left-far { left: 2%; }
    .side-lamp-left-mid { left: 9%; }
    .side-lamp-left-close { left: 16%; }
    .side-lamp-right-close { right: 16%; }
    .side-lamp-right-mid { right: 9%; }
    .side-lamp-right-far { right: 2%; }

    .heart-icon { font-size: 2rem; }
    .event-cards-grid { gap: 15px; }
    .family-cards-grid { gap: 12px; }
    
    /* Full screen card alignment on mobile */
    .main-card-container {
        width: 100vw;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        padding: 0;
    }
    .card-inner-scroll {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 115px 16px 40px 16px;
    }
    .card-outer-border {
        top: 8px; left: 8px; right: 8px; bottom: 8px;
        border-radius: 0;
    }
    .card-corner-accent {
        display: none;
    }
}

@media (max-width: 360px) {
    .couple-name { font-size: 1.8rem; }
    .heart-icon { font-size: 1.6rem; }
}

/* ==========================================================================
   Phase 4 Animated Couple Names Glow & Theme Badge & Contact Card Styles
   ========================================================================== */

@keyframes nameGlow {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }
    100% {
        transform: scale(1.03);
        text-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 0 10px rgba(212, 175, 55, 0.3);
    }
}

.theme-badge {
    font-family: var(--font-royal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-gold-light);
    background: rgba(18, 18, 18, 0.85);
    border: 1.5px solid var(--gold-mid);
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-gold);
    pointer-events: none;
    margin-right: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: var(--transition-theme);
}

.contact-section {
    text-align: center;
    margin: 3rem 0;
}
.contact-card {
    background: var(--bg-card);
    border: 2px solid var(--gold-mid);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-gold-heavy);
    position: relative;
    overflow: hidden;
    max-width: 500px;
    margin: 0 auto;
    transition: var(--transition-smooth), var(--transition-theme);
}
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold-heavy), 0 15px 35px rgba(0,0,0,0.5);
}
.contact-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold-mid);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.2rem;
    font-size: 1.2rem;
    color: var(--gold-mid);
    transition: var(--transition-theme);
}
.contact-title {
    font-family: var(--font-royal);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.contact-address {
    font-size: 0.85rem;
    color: var(--text-gold-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-weight: 300;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.contact-phones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.phone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-white);
}
.phone-item i {
    color: var(--gold-mid);
    font-size: 0.95rem;
}
.phone-link {
    font-size: 1.2rem;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: var(--transition-smooth);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    border-bottom: 1.5px dashed var(--gold-mid);
    padding-bottom: 2px;
    display: inline-block;
}
.phone-link:hover {
    color: var(--text-white) !important;
    border-bottom-color: var(--gold-light);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .theme-badge {
        font-size: 9px;
        padding: 6px 12px;
        margin-right: 0;
        margin-bottom: 5px;
        width: 100%;
    }
    .photo-floral {
        width: 50px;
        height: 200px;
    }
    .photo-floral-left {
        left: calc(50% - 130px - 35px);
    }
    .photo-floral-right {
        right: calc(50% - 130px - 35px);
    }
}

/* Map Iframe Styling */
.map-iframe-container {
    width: 100%;
    margin-top: 15px;
    border: 2px solid var(--gold-mid);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    background-color: #000;
}
.map-iframe-container iframe {
    display: block;
    filter: invert(90%) hue-rotate(180deg) contrast(120%); /* Premium dark mode map overlay */
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.map-iframe-container iframe:hover {
    opacity: 1;
}

/* Celebration Confetti & Balloons */
.confetti-pop {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 9999;
    pointer-events: none;
    border-radius: 2px;
}
.balloon-pop {
    position: fixed;
    width: 25px;
    height: 32px;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}
.balloon-pop::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid currentColor;
}
.balloon-pop-string {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
}

@keyframes flyFromLeft {
    0% {
        transform: translate3d(0, 110vh, 0) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
        opacity: 0;
    }
}
@keyframes flyFromRight {
    0% {
        transform: translate3d(100vw, 110vh, 0) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
        opacity: 0;
    }
}

/* ==========================================================================
   ADDED LUXURY STYLES (METALLIC GATE, GOV SEAL, GRANDFATHER BLESSING)
   ========================================================================== */

/* 1. Grandfather Blessing styles */
.grandfather-blessing-header {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-gold-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.grandfather-name {
    font-family: var(--font-royal);
    font-size: 1.15rem;
    color: var(--text-gold);
    font-weight: bold;
    display: inline-block;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* 2. Interactive Government Seal animated classes */
.royal-wax-seal {
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle, #b81e28 0%, #4a0205 100%) !important;
    border: 3px double var(--gold-mid) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0,0,0,0.6) !important;
}

.gov-seal-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.seal-outer-star-ring {
    transform-origin: center;
    animation: rotateDisc 25s linear infinite;
}

.seal-text-ring {
    transform-origin: center;
    animation: rotateDisc 35s linear infinite reverse;
}

.seal-monogram-group {
    animation: monogramPulse 2.5s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes monogramPulse {
    0% {
        transform: scale(0.96);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    }
    100% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 10px rgba(253, 211, 203, 0.6));
    }
}

/* 3. Luxury Rose Gold Shimmer on split cover doors */
.cover-door-face {
    background: radial-gradient(circle at center, #2e1a1c 0%, #12090b 100%) !important;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95), 0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 4px rgba(253, 211, 203, 0.25), inset 0 0 0 8px #70332b !important;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--gold-mid) !important;
}

.cover-door-face::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 60%, transparent 70%);
    background-size: 200% 100%;
    animation: metallicShimmer 6s infinite linear;
    pointer-events: none;
}

@keyframes metallicShimmer {
    0% { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}

/* Contrast beveled panel framing inside windows */
.door-window-frame {
    border: 6px double #fdd3cb !important;
    box-shadow: 0 0 30px rgba(223, 154, 144, 0.4), inset 0 0 20px rgba(112, 51, 43, 0.6) !important;
    background: rgba(22, 14, 16, 0.68) !important; /* Rich dark velvet rose backing for high-end contrast */
}

/* Ornate Rose Gold Lattice pattern */
.lattice-pattern {
    opacity: 0.35 !important;
    background-image: 
        radial-gradient(circle, transparent 20%, #fdd3cb 20%, #fdd3cb 80%, transparent 80%),
        radial-gradient(circle, transparent 20%, #fdd3cb 20%, #fdd3cb 80%, transparent 80%) !important;
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Dual counter-rotating mandala wreath ornament behind seal */
.door-wreath-ornament {
    position: absolute; width: 145px; height: 145px; border-radius: 50%;
    border: 2px solid rgba(253, 211, 203, 0.4) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 0 20px rgba(253, 211, 203, 0.3) !important;
    opacity: 0.7 !important; z-index: 3;
    pointer-events: none; animation: rotateDisc 12s linear infinite !important;
    transition: var(--transition-theme);
}
.door-wreath-ornament::before {
    content: '';
    position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1.8px dashed var(--gold-mid);
    border-radius: 50%;
    animation: rotateDisc 8s linear infinite reverse;
}

/* ==========================================================================
   PATH A — DUBAI TIERS ROYAL WEDDING REDESIGN OVERRIDES
   ========================================================================== */

/* 1. Procedural Black Marble Door Faces */
.cover-door-face {
    background: 
        radial-gradient(circle at center, rgba(35, 35, 35, 0.15) 0%, rgba(5, 5, 5, 0.95) 100%),
        linear-gradient(55deg, transparent 40%, rgba(223, 154, 144, 0.08) 45%, rgba(253, 211, 203, 0.16) 48%, rgba(223, 154, 144, 0.08) 51%, transparent 56%),
        linear-gradient(-35deg, transparent 20%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 26%, transparent 28%),
        #0d0809 !important;
    background-blend-mode: normal, overlay, overlay;
    box-shadow: 
        inset 0 0 70px rgba(0, 0, 0, 0.98), 
        0 15px 35px rgba(0,0,0,0.8), 
        inset 0 0 0 4px rgba(253, 211, 203, 0.28), 
        inset 0 0 0 8px #70332b, 
        inset 0 0 0 10px var(--gold-mid) !important;
    border: 2px solid var(--gold-mid) !important;
}

/* 2. Symmetrical Royal Black Marble Pillars */
.marble-pillar {
    position: absolute;
    top: 0;
    width: 9%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 35px rgba(0,0,0,0.9);
    transition: transform 3.8s ease-in-out, opacity 3.8s ease-in-out;
}
.pillar-left {
    left: 0;
    border-right: 2px solid var(--gold-mid);
    transform-origin: left center;
}
.pillar-right {
    right: 0;
    border-left: 2px solid var(--gold-mid);
    transform-origin: right center;
}
.pillar-shaft {
    flex-grow: 1;
    background: 
        linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(50,50,50,0.1) 50%, rgba(0,0,0,0.95) 100%),
        linear-gradient(75deg, transparent 40%, rgba(223, 154, 144, 0.08) 45%, rgba(253, 211, 203, 0.16) 48%, rgba(223, 154, 144, 0.08) 51%, transparent 56%),
        #0d0809;
    background-blend-mode: normal, overlay;
    box-shadow: inset -5px 0 15px rgba(0,0,0,0.8), inset 5px 0 15px rgba(0,0,0,0.8);
}
.pillar-cap, .pillar-base {
    height: 5%;
    min-height: 25px;
    background: linear-gradient(90deg, #70332b 0%, #df9a90 50%, #70332b 100%);
    border: 1.5px solid var(--gold-light);
    box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}

/* 3. Volumetric Ray Overlay inside viewport */
.door-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 40%, rgba(253, 211, 203, 0.15) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: color-dodge;
}

/* 4. Luxury Gold Foil Text Effect & Ambient Sweeps */
.gold-foil-text {
    background: linear-gradient(135deg, #fdd3cb 0%, #df9a90 30%, #70332b 70%, #fdd3cb 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldSweep 4.5s linear infinite;
    text-shadow: 0 0 1px rgba(253, 211, 203, 0.1);
}
@keyframes goldSweep {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 5. Islamic Arch Glassmorphism Cards */
.card-section-wrapper {
    position: relative;
    background: rgba(22, 14, 16, 0.45) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    border: 1.5px solid rgba(223, 154, 144, 0.25) !important;
    border-radius: 40px 40px 15px 15px !important;
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.6), 
        inset 0 0 0 1px rgba(253, 211, 203, 0.1) !important;
    overflow: hidden;
    margin-bottom: 2.5rem !important;
    transition: transform 0.8s ease, border-color 0.8s ease;
}
.card-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: var(--gold-gradient);
    opacity: 0.8;
}

/* Islamic Arch Profile header for cards */
.islamic-header-shape {
    width: 100%; height: 50px;
    background: rgba(22, 14, 16, 0.8);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    margin-top: -1px;
}

/* 6. Floating Glassmorphism Countdown */
.countdown-box-wrapper {
    background: rgba(35, 21, 24, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(253, 211, 203, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 15px rgba(253, 211, 203, 0.08) !important;
    padding: 1rem !important;
    animation: floatingCard 6s ease-in-out infinite alternate;
}
@keyframes floatingCard {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(0.5deg); }
}

/* 7. Premium Glassmorphic Inputs */
.rsvp-input, .edit-input {
    background: rgba(13, 8, 9, 0.6) !important;
    border: 1.5px solid rgba(223, 154, 144, 0.35) !important;
    border-radius: 10px !important;
    color: #fffbe6 !important;
    padding: 12px 16px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.rsvp-input:focus, .edit-input:focus {
    outline: none !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 0 15px rgba(253, 211, 203, 0.3), inset 0 0 8px rgba(253, 211, 203, 0.1) !important;
    background: rgba(22, 14, 16, 0.85) !important;
}

/* ==========================================================================
   8. CINEMATIC LUXURY REVEAL SEQUENCE & SVG CALLIGRAPHY STYLES
   ========================================================================== */

/* Islamic Star Geometric Pattern */
.islamic-pattern-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 L52 28 L80 40 L52 52 L40 80 L28 52 L0 40 L28 28 Z M40 15 L48 35 L65 40 L48 45 L40 65 L32 45 L15 40 L32 35 Z' fill='none' stroke='%23df9a90' stroke-width='0.6' opacity='0.45'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
    transition: opacity 1.5s ease;
}
.islamic-pattern-bg.visible {
    opacity: 0.12;
}

/* Golden Fog */
.golden-fog {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(253, 211, 203, 0.45) 0%, rgba(22, 14, 16, 0.95) 100%);
    filter: blur(40px);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    z-index: 1400;
    transition: opacity 1.5s ease;
}
.golden-fog.active {
    opacity: 0.85;
}

/* Draw SVG Handwriting Typography */
.handwritten-svg {
    overflow: visible;
}
.handwritten-svg .write-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke: var(--gold-mid);
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(223, 154, 144, 0.5));
}
.handwritten-svg .write-dot {
    opacity: 0;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    transform-origin: center;
}
.handwritten-svg .write-dot.drawn {
    opacity: 1;
    transform: scale(1);
}

/* Gold Shimmer Sweep Effect */
.shimmer-active {
    position: relative;
    overflow: hidden;
}
.shimmer-active::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 5;
}
.shimmer-sweep::after {
    animation: shimmerSweepAnim 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes shimmerSweepAnim {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* Drawing Border Rect */
.drawing-border-rect {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* Decorative Corners with Elastic Reveals */
.card-corner-accent {
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1.2s ease;
}
.card-corner-accent.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.corner-tl.active { transform: scale(1) rotate(0deg); }
.corner-tr.active { transform: scale(1) rotate(0deg); }
.corner-bl.active { transform: scale(1) rotate(0deg); }
.corner-br.active { transform: scale(1) rotate(0deg); }

/* Event Sections Decorations */
/* Nikah Mosque Silhouette & Moon */
.nikah-decor-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 1; opacity: 0.18;
}
.mosque-silhouette {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scale(0.9);
    transform-origin: bottom center; opacity: 0; transition: transform 2s ease, opacity 2s ease;
}
.mosque-silhouette.active {
    opacity: 1; transform: translateX(-50%) scale(1);
}
.crescent-moon-glow {
    position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
    border-radius: 50%; box-shadow: -8px 8px 0 0 var(--gold-light);
    filter: drop-shadow(0 0 10px var(--gold-light)); opacity: 0; transition: opacity 2s ease;
}
.crescent-moon-glow.active {
    opacity: 1;
}

/* Baraat Palace Frame & Sparkles */
.baraat-decor-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 1; opacity: 0.15;
}
.palace-frame {
    position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px dashed var(--gold-mid); border-radius: 8px; opacity: 0;
    transition: opacity 2s ease;
}
.palace-frame.active {
    opacity: 1;
}

/* Walima Floral Frame */
.walima-decor-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 1; opacity: 0.22;
}
.floral-backing {
    position: absolute; top: 5%; left: 5%; width: 90%; height: 90%;
    background-image: radial-gradient(circle, rgba(223, 154, 144, 0.08) 0%, transparent 70%);
    opacity: 0; transition: opacity 2s ease;
}
.floral-backing.active {
    opacity: 1;
}

/* Symmetrical Volumetric Light Rays */
.volumetric-light-rays {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(253, 211, 203, 0.15) 0%, transparent 60%);
    mix-blend-mode: screen; pointer-events: none; z-index: 4; opacity: 0;
    transition: opacity 1.5s ease;
}
.volumetric-light-rays.active {
    opacity: 1;
}

/* Symmetrical Hanging Lanterns Glow Pulse */
@keyframes lanternGlowPulse {
    0% { filter: drop-shadow(0 0 4px var(--gold-light)) brightness(1); }
    100% { filter: drop-shadow(0 0 15px var(--gold-light)) brightness(1.2); }
}
.side-lamp.active .lamp-flame {
    animation: lanternGlowPulse 2.5s ease-in-out infinite alternate;
}

/* Symmetrical Chandelier Glow Pulse */
@keyframes chandelierGlowPulse {
    0% { filter: drop-shadow(0 0 8px var(--gold-light)) brightness(1); }
    100% { filter: drop-shadow(0 0 25px var(--gold-light)) brightness(1.3); }
}
.chandelier-container.active .chandelier-light {
    animation: chandelierGlowPulse 3s ease-in-out infinite alternate;
}

/* Premium Glassmorphic Buttons with Shine Sweep */
.map-link-btn, .rsvp-submit-btn, .save-edits-btn {
    position: relative;
    background: rgba(22, 14, 16, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(253, 211, 203, 0.4) !important;
    color: var(--gold-light) !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
.map-link-btn:hover, .rsvp-submit-btn:hover, .save-edits-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 8px 25px rgba(223, 154, 144, 0.3) !important;
    color: #fff !important;
}
.map-link-btn::after, .rsvp-submit-btn::after, .save-edits-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    transition: none;
}
.map-link-btn:hover::after, .rsvp-submit-btn:hover::after, .save-edits-btn:hover::after {
    left: 150%;
    transition: left 0.8s ease-in-out;
}

/* Mobile-First Handwriting Wrap Layouts */
.names-handwriting-container {
    width: 100%; max-width: 320px; margin: 0 auto; display: flex; justify-content: center;
}
.couple-names-svg {
    width: 100%; height: auto; display: block;
}
.event-handwriting-wrap {
    width: 100%; max-width: 260px; margin: 0 auto; display: flex; justify-content: center;
}
.event-handwriting-svg {
    width: 100%; height: auto; display: block; margin-bottom: 0.5rem;
}

/* Premium Typographic Styling for Cursive Calligraphy Fallback */
.names-fallback {
    text-align: center;
    margin: 15px auto;
    width: 100%;
}
.names-fallback .couple-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
    font-weight: 700;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-mid), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(223, 154, 144, 0.25);
    filter: drop-shadow(0 0 1px rgba(253, 211, 203, 0.4));
}
.names-fallback .fallback-heart {
    font-size: 2.8rem;
    margin: 0 8px;
    display: inline-block;
    vertical-align: middle;
    color: #ff3344;
    text-shadow: 0 0 15px rgba(255, 51, 68, 0.85), 0 0 25px rgba(212, 175, 55, 0.65);
    animation: royalHeartPulse 1.4s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glowing-heart-pulse {
    display: inline-block;
    color: #ff3344;
    font-size: 2.8rem;
    vertical-align: middle;
    text-shadow: 0 0 15px rgba(255, 51, 68, 0.85), 0 0 25px rgba(212, 175, 55, 0.65);
    animation: royalHeartPulse 1.4s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes royalHeartPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 51, 68, 0.6)); }
    14% { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(255, 51, 68, 0.85)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.7)); }
    28% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255, 51, 68, 0.7)); }
    42% { transform: scale(1.3); filter: drop-shadow(0 0 15px rgba(255, 51, 68, 0.9)) drop-shadow(0 0 22px rgba(212, 175, 55, 0.85)); }
    70%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 51, 68, 0.6)); }
}

/* Event Name Text Header fallback */
.event-name {
    font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
    font-size: 1.6rem;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-mid), var(--gold-dark)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    margin: 10px auto 15px !important;
    display: block !important;
    filter: drop-shadow(0 0 1px rgba(253, 211, 203, 0.3));
}

/* Premium Bismillah Text Calligraphy styling */
.bismillah-text-calligraphy {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 2.4rem;
    line-height: 2.2;
    text-align: center;
    color: var(--gold-light);
    background: linear-gradient(135deg, var(--gold-light), var(--gold-mid), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(223, 154, 144, 0.25);
    margin: 15px auto;
    filter: drop-shadow(0 0 1px rgba(253, 211, 203, 0.4));
    overflow: visible;
}
body.lang-hi .bismillah-text-calligraphy,
body.lang-ur .bismillah-text-calligraphy {
    font-size: 2.4rem;
}

/* Language specific overrides for names and titles */
/* Hindi override */
body.lang-hi .names-fallback .couple-name {
    font-family: 'Great Vibes', 'Noto Sans Devanagari', cursive, sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
body.lang-hi .event-name {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Urdu Nastaliq override (Absolutely premium royal calligraphy) */
body.lang-ur .names-fallback .couple-name {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 2.1rem;
    line-height: 2.3;
    letter-spacing: 0;
    font-weight: normal;
}
body.lang-ur .event-name {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0;
    font-weight: normal;
    text-transform: none;
}

/* Symmetrical Mobile-Friendly Parent Column Layout */
.names-flex-row {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 15px auto;
}
.groom-column, .bride-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.parent-subtext {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--gold-light);
    margin: 5px 0 0 0;
    opacity: 0.85;
    letter-spacing: 0.5px;
}
body.lang-hi .parent-subtext {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 0.85rem;
    font-style: normal;
}
body.lang-ur .parent-subtext {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 2.0;
}

/* Grand Palace Environment Background behind Gate */
.palace-bg-environment {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 30%, #2a0b12 0%, #110507 70%, #060203 100%);
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.palace-bg-environment::before {
    content: '';
    position: absolute;
    bottom: 25%; left: 50%;
    width: 320px; height: 180px;
    transform: translateX(-50%);
    background: no-repeat bottom center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180' width='100%25' height='100%25'%3E%3Cpath d='M0 180 L320 180 L320 120 L280 120 C280 100 270 90 260 90 C250 90 240 100 240 120 L200 120 C200 70 180 50 160 50 C140 50 120 70 120 120 L80 120 C80 100 70 90 60 90 C50 90 40 100 40 120 L0 120 Z' fill='%2319080c' opacity='0.7'/%3E%3Cpath d='M40 180 L280 180 L280 140 C280 125 272 115 260 115 C248 115 240 125 240 140 L200 140 C200 95 180 75 160 75 C140 75 120 95 120 140 L80 140 C80 125 72 115 60 115 C48 115 40 125 40 140 Z' fill='%23220b10' opacity='0.9'/%3E%3C/svg%3E");
    opacity: 0.45;
}

/* Volumetric Cinematic Light Rays */
.volumetric-light-rays {
    position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    background: radial-gradient(circle at 50% 30%, rgba(253, 211, 203, 0.12) 0%, rgba(184, 134, 11, 0.05) 45%, transparent 75%),
                conic-gradient(from 180deg at 50% 30%, transparent, rgba(255,250,240,0.05), transparent, rgba(255,250,240,0.05), transparent);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    animation: raysRotate 35s infinite linear;
}
@keyframes raysRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Symmetrical Floating Butterflies */
.butterflies-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}
.butterfly {
    position: absolute;
    width: 14px; height: 12px;
    perspective: 500px;
    opacity: 0.75;
}
.butterfly::before, .butterfly::after {
    content: '';
    position: absolute;
    width: 7px; height: 12px;
    background: radial-gradient(circle, var(--gold-light) 0%, var(--gold-mid) 100%);
    border-radius: 50% 50% 0 50%;
    top: 0;
    transform-origin: right center;
    animation: wingFlapLeft 0.15s infinite alternate ease-in-out;
}
.butterfly::after {
    left: 7px;
    border-radius: 50% 50% 50% 0;
    transform-origin: left center;
    animation: wingFlapRight 0.15s infinite alternate ease-in-out;
}
@keyframes wingFlapLeft {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(75deg); }
}
@keyframes wingFlapRight {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-75deg); }
}

/* Floating Butterflies Staggered Paths */
.bfly-1 { top: 35%; left: 15%; animation: bflyFloat1 18s infinite ease-in-out; }
.bfly-2 { top: 45%; right: 15%; animation: bflyFloat2 22s infinite ease-in-out; }
.bfly-3 { top: 60%; left: 30%; animation: bflyFloat3 25s infinite ease-in-out; }
.bfly-4 { top: 25%; right: 35%; animation: bflyFloat4 20s infinite ease-in-out; }

@keyframes bflyFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(5deg); }
    50% { transform: translate(30px, -40px) rotate(-15deg); }
}
@keyframes bflyFloat2 {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    50% { transform: translate(-40px, -30px) rotate(15deg); }
}
@keyframes bflyFloat3 {
    0%, 100% { transform: translate(0, 0) rotate(10deg); }
    50% { transform: translate(45px, -50px) rotate(-10deg); }
}
@keyframes bflyFloat4 {
    0%, 100% { transform: translate(0, 0) rotate(-10deg); }
    50% { transform: translate(-35px, -35px) rotate(10deg); }
}

/* Symmetrical Black Marble Flooring & Premium reflections */
.black-marble-floor {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 20%;
    background: linear-gradient(to bottom, rgba(20, 12, 14, 0.95) 0%, #0d0709 100%);
    border-top: 1.5px solid var(--gold-mid);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.85);
    z-index: 5;
    pointer-events: none;
}
.floor-reflection {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 0%, rgba(223, 154, 144, 0.15) 0%, transparent 60%);
}

/* Floating Controls (Fixed Viewport Layer) */
.floating-lang-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}
.floating-music-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
.floating-control-btn {
    background: rgba(22, 14, 16, 0.85) !important;
    border: 1px solid var(--gold-mid) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    color: var(--gold-light) !important;
    font-family: var(--font-royal) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(184, 134, 11, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}
.floating-control-btn i {
    font-size: 1.1rem;
}
.floating-control-btn:hover, .floating-control-btn:active {
    background: rgba(22, 14, 16, 0.95) !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(223, 154, 144, 0.4) !important;
}
.lang-dropdown {
    position: absolute;
    bottom: 50px;
    left: 0;
    background: rgba(22, 14, 16, 0.92);
    border: 1px solid var(--gold-mid);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lang-dropdown.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.lang-option {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--gold-light);
    font-family: var(--font-royal);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lang-option:hover {
    background: rgba(184, 134, 11, 0.18);
    color: #fff;
}

/* Floating Music Player Customizations */
.music-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
    position: relative !important;
}
.music-btn i {
    font-size: 1.25rem !important; /* Larger icon */
    transition: all 0.3s ease;
}
.music-pulse-glow {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 2px solid var(--gold-light);
    opacity: 0;
    pointer-events: none;
}
.music-btn.playing .music-pulse-glow {
    animation: musicGlowPulse 2.0s infinite ease-out;
}
.music-btn.playing i {
    animation: musicIconRotate 4s infinite linear;
}
@keyframes musicGlowPulse {
    0% { transform: scale(1); opacity: 0.75; }
    100% { transform: scale(1.45); opacity: 0; }
}
@keyframes musicIconRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   PREMIUM GOLD FRAME & SHIMMER FOR FAMILY BLESSINGS SECTION
   ========================================================================== */
.family-card {
    position: relative !important;
    background: radial-gradient(circle at 50% 30%, var(--bg-card) 0%, var(--bg-card-hover) 100%) !important;
    border: 1.5px solid var(--gold-mid) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 10px rgba(184,134,11,0.15) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.family-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -150% !important; width: 50% !important; height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(251, 224, 142, 0.15), transparent) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
    animation: goldCardShimmer 7s infinite ease-in-out !important;
}

@keyframes goldCardShimmer {
    0% { left: -150%; }
    25%, 100% { left: 150%; }
}

/* Category Title Luxury Typography */
.family-role {
    font-family: var(--font-royal) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-gold) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.8rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.25) !important;
    padding-bottom: 8px !important;
}

/* Family names list */
.family-names {
    font-family: 'Cormorant Garamond', 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--text-gold-light) !important;
    line-height: 1.8 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Language Typography Overrides */
body.lang-hi .family-role {
    font-family: 'Tiro Devanagari Hindi', serif !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
}
body.lang-hi .family-names {
    font-family: 'Hind', sans-serif !important;
    font-size: 0.95rem !important;
}

body.lang-ur .family-role {
    font-family: 'Noto Nastaliq Urdu', serif !important;
    font-size: 1.15rem !important;
    line-height: 2.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
body.lang-ur .family-names {
    font-family: 'Noto Nastaliq Urdu', serif !important;
    font-size: 1.0rem !important;
    line-height: 2.2 !important;
}

/* Luxury Divider Ornament between categories */
.family-card::after {
    content: '✧ ⚜ ✧' !important;
    display: block !important;
    margin-top: 12px !important;
    font-size: 0.8rem !important;
    color: var(--gold-mid) !important;
    opacity: 0.55 !important;
    text-align: center !important;
}
.family-card.kids-card::after {
    content: '⭐ 👶 ⭐' !important;
}

/* Custom Photo-Realistic Floral Gate Overrides */
.door-archway {
    display: none !important;
}
.door-window-frame {
    display: none !important;
}

.door-bg-image {
    position: absolute;
    top: 0;
    width: 200%; /* Spans the combined width of both door panels */
    height: 100%;
    background-image: url('stitch_gates/indian_ivory_white.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.door-bg-left {
    left: 0;
}
.door-bg-right {
    right: 0;
}

/* ==========================================================================
   PERMANENT MOBILE RESPONSIVENESS & OVERFLOW FIXES
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fix fixed scenery layer clipping swinging lamps outside screen */
.fixed-scenery-layer {
    overflow: hidden !important;
}

/* Ensure the main container doesn't overflow horizontally on small viewports */
.main-card-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Make names column vertical on mobile to avoid overflow */
@media (max-width: 480px) {
    .names-flex-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 15px auto !important;
    }
    
    .groom-column, .bride-column {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .fallback-heart {
        margin: 5px 0 !important;
        display: inline-block !important;
    }

    /* Adjust font sizes slightly for extremely long parent texts on mobile */
    .couple-name {
        font-size: 1.9rem !important;
        word-wrap: break-word !important;
    }

    .parent-subtext {
        font-size: 0.85rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 90% !important;
        text-align: center !important;
    }
}