@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Parisienne&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');



:root {
    --primary: #8FBCBB;      /* Teal Blue */
    --secondary: #0A1628;    /* Midnight Navy */
    --dark: #060E1A;         /* Deep Midnight */
    --gold: #8FBCBB;         /* Teal Accent */
    --gold-light: #C4DFE0;   /* Light Teal */
    --text: #EEF2F7;         /* Cool Ivory */
    --text-muted: #8DA0B5;   /* Muted Steel */
    --marble: #0D1E33;       /* Dark Navy Marble */
    --bg-card: rgba(255, 255, 255, 0.05);
}

body {
    background-color: #D5DCE8;
    color: var(--text);
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    /* NOTE: overflow NOT hidden here — mobile browsers need scroll on body to auto-hide address bar */
}

/* Desktop Split Layout */
.split-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Desktop: scroll is inside .right-panel, not body */
}

.left-panel {
    width: 70%; /* Adjusted width - left panel wider */
    flex: 0 0 70%; /* Prevent shrinking or growing */
    height: 100%;
    background-color: #B8C8D8; /* Solid grey panel */
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: relative;
}

.left-panel-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(143, 188, 187, 0.25), rgba(0, 0, 0, 0.45));
    z-index: 1;
}

.left-panel.has-bg .left-panel-overlay {
    display: block;
}

.left-panel-content {
    max-width: 500px;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.left-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #ffffff; /* White text */
    margin-bottom: 0.75rem;
    font-weight: 400;
}

.left-title {
    font-size: 4.8rem;
    color: #ffffff; /* White text */
    margin: 0;
    line-height: 1.2;
    font-family: 'Parisienne', cursive;
}

.left-panel.has-bg .left-subtitle,
.left-panel.has-bg .left-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.right-panel {
    width: 30%; /* Adjusted width - right panel narrower */
    flex: 0 0 30%; /* Prevent shrinking or growing */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════
   MOBILE LAYOUT — Native body scroll enables Safari/Chrome
   address bar to auto-collapse on scroll down.
   Key rules:
   - html, body must NOT have overflow: hidden or fixed height
   - Scrolling must happen on body/html, NOT inside a div
   - Use position: fixed trick to lock scroll on gate screen
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    html {
        overflow: auto;
    }
    body {
        overflow: auto;
        height: auto;
        /* position: fixed is used by JS (lock-scroll class) to lock scroll
           without triggering the overflow: hidden bug in Safari */
    }
    body.lock-scroll {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        overflow-y: scroll; /* Keeps scrollbar space to prevent layout shift */
    }
    .split-layout {
        display: block;
        width: 100%;
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: visible; /* Must NOT clip — body handles scroll natively */
    }
    .left-panel {
        display: none;
    }
    .right-panel {
        width: 100%;
        height: auto;
        overflow: visible !important; /* Scroll happens on body, not here */
        flex: none !important;
        box-shadow: none;
        background-image: none; /* Remove bg-image on mobile — avoid rendering cost */
    }
    /* On mobile, background-attachment: fixed causes the gradient overlay to
       disappear (iOS Safari/Android Chrome bug inside overflow:auto containers).
       Switch to scroll and rely on the ::before pseudo-element overlay instead. */
    #events,
    #story-section {
        background-attachment: scroll !important;
        margin-top: -10px;
    }
    #couple,
    #event-list {
        background-attachment: scroll !important;
    }
    #events::before,
    #story-section::before {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(247, 245, 240, 0.85) !important;
        content: '' !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    #events > *,
    #story-section > * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Music Player Controls at the Bottom Right */
.music-player {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.music-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0D1E33; /* Dark vinyl style */
    border: 3px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    outline: none;
    transition: all 0.3s ease;
}

.music-btn:hover {
    transform: scale(1.1);
    background: #000000;
}

.music-btn.playing {
    animation: rotateMusic 4s linear infinite;
}

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

/* Sections Base Styling - transparent so parent background shows through */
section {
    background-color: transparent;
    border-bottom: 1px solid rgba(74, 110, 81, 0.1);
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 4rem 1.5rem;
}

/* Typography helper classes */
.font-serif {
    font-family: 'Cinzel', serif;
}

.font-script {
    font-family: 'Parisienne', cursive;
}

.text-primary-color {
    color: var(--primary);
}

.text-gold {
    color: var(--gold);
}

/* Cinematic Cover Gate wrapper */
.motion-gate-container {
    position: relative;
    width: 100%;
    /* Desktop: height 100% fills .right-panel (which is 100vh) */
    height: 100%;
    z-index: 999;
    overflow: hidden;
    background-color: #000000;
}

/* On mobile, the gate container must fill the viewport height explicitly
   since its parent (.right-panel) no longer has a fixed height */
@media (max-width: 1024px) {
    .motion-gate-container {
        height: calc(var(--vh, 1vh) * 100);
    }
}

.cover-gate-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center; /* Center on both X and Y axis */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* Center Content - transparent box, no card background */
.cover-content {
    z-index: 20;
    text-align: center;
    padding: 2vh 1rem;
    max-width: 95%; /* Increased from 90% */
    width: 360px; /* Increased from 340px */
    height: 100%;
    background: transparent; /* Transparent, no card */
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically on Y-axis */
    align-items: center;
    gap: 2.25rem; /* Space between top and bottom content blocks */
    animation: fadeInContent 1.2s ease-out forwards;
}

.cover-top-group {
    width: 100%;
}

.cover-bottom-group {
    width: 100%;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════
   COVER VIDEO SECTION — natural 9:16 sizing, text at bottom
═══════════════════════════════════════ */
.cover-video-section {
    position: relative;
    width: 100%;
    /* Height = natural 9:16 portrait aspect ratio of the video */
    aspect-ratio: 9 / 16;
    /* Fallback for browsers not supporting aspect-ratio: min height of screen */
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    display: block;
    border-bottom: 2px solid var(--primary);
}

/* The video itself fills the container naturally (no object-fit zoom needed
   because the container matches the video's own 9:16 ratio) */
.cover-video-section #main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Subtle white wash for legibility — sits above both video and fallback */
.cover-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    z-index: 3;
    pointer-events: none;
}

/* Fallback image — hidden until video ends, then fades in */
.cover-fallback-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
}

.cover-fallback-img.show {
    opacity: 1;
}

/* Names overlay — hidden until JS triggers it after 10s, centered in diamond */
.cover-names-overlay {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -46%) translateY(20px); /* start slightly below center */
    z-index: 5;
    width: 60%;            /* narrower so it sits inside diamond frame */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1),
                transform 2s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.cover-names-overlay.show {
    opacity: 1;
    transform: translate(-50%, -46%); /* settle at center of diamond area */
}

/* Text block inside the names overlay */
.cover-names-content {
    width: 100%;
    text-align: center;
}

.cover-names-subtitle {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.25rem;
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
    color: #ffffff;
    margin: 0 0 0.8rem 0;
    font-weight: 400;
}

.cover-names-groom,
.cover-names-bride {
    font-family: 'Parisienne', cursive;
    font-style: normal;
    font-size: 58px; /* Increased by 3px */
    font-weight: 400;
    color: #ffffff; /* White color as in screenshot */
    margin: 0;
    line-height: 75px; /* Adjusted line-height */
    text-transform: none;
}

.cover-names-and {
    font-family: 'Parisienne', cursive;
    font-size: 36px;
    color: #ffffff;
    margin: 0.2rem 0;
    font-style: normal;
}

.cover-names-hashtag {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #ffffff; /* Changed from var(--primary) */
    margin: 0.75rem 0 0.3rem;
    font-weight: 600;
}

.cover-names-date {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #ffffff; /* Changed from #555 */
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Keep #cover selector for nav-dot scroll-spy compatibility */
#cover {
    position: relative;
}

/* Custom Cover Gate Styles matching Reference Design (Starry Moon Background) */
.cover-gate-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(6, 14, 26, 0.95) 0%,
        rgba(0, 0, 0, 0.75) 30%,
        rgba(0, 0, 0, 0.2) 65%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 11;
    pointer-events: none;
}

.motion-gate-container.has-photo .cover-gate-overlay,
.motion-gate-container.no-photo .cover-gate-overlay {
    background: linear-gradient(to top,
        rgba(6, 14, 26, 0.95) 0%,
        rgba(0, 0, 0, 0.75) 30%,
        rgba(0, 0, 0, 0.2) 65%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.motion-gate-container.has-photo .cover-content,
.motion-gate-container.no-photo .cover-content {
    color: #ffffff;
}

/* Couple Pill Image - Enlarged with outer border and padded inner image (Arch shape) */
.cover-couple-pill {
    width: 200px; /* Enlarged from 160px */
    height: 310px; /* Enlarged from 250px */
    margin: 0 auto 1.5rem auto;
    border-radius: 100px 100px 0 0; /* Arch shape (top rounded, bottom flat) */
    border: 1px solid rgba(255, 255, 255, 0.85);
    padding: 6px; /* Padding inside the border */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    background-color: transparent;
    box-sizing: border-box;
}

.cover-couple-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 94px 94px 0 0; /* Arch shape for the padded image */
}

/* Monogram */
.cover-monogram {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.cover-monogram .sep {
    opacity: 0.4;
    font-weight: 200;
}

/* Subtitle (The Wedding of) */
.cover-subtitle {
    font-family: 'Satisfy', cursive;
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
.motion-gate-container.has-photo .cover-subtitle,
.motion-gate-container.no-photo .cover-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

/* Title (Names) - Kept on single line with slightly smaller font */
.cover-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 2.1rem; /* Slightly smaller from 2.6rem to prevent wrapping */
    font-weight: 400;
    margin: 0.4rem 0 0 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap; /* Forces text to stay on a single line */
}
.motion-gate-container.has-photo .cover-title,
.motion-gate-container.no-photo .cover-title {
    color: #ffffff;
}

/* Guest Card */
.cover-guest-card {
    margin: 0 0 2rem 0;
}
.cover-guest-card .to-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.motion-gate-container.has-photo .cover-guest-card .to-label,
.motion-gate-container.no-photo .cover-guest-card .to-label {
    color: rgba(255, 255, 255, 0.75);
}

.cover-guest-card .guest-name-val {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0.25rem 0 0 0;
}
.motion-gate-container.has-photo .cover-guest-card .guest-name-val,
.motion-gate-container.no-photo .cover-guest-card .guest-name-val {
    color: #ffffff;
}

/* Buka Undangan Button (Elegant Black & Gold pill style) */
.buka-btn {
    background: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    padding: 0.75rem 2.25rem;
    border-radius: 50px !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.buka-btn:hover {
    background: #1c1c1c !important;
    color: #ffffff !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.buka-btn i {
    font-size: 0.85rem;
    color: #ffffff !important;
    transition: color 0.3s ease;
}
.buka-btn:hover i {
    color: #ffffff !important;
}

/* Mouse Scroll Indicator matching image 2 */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 20;
    pointer-events: none;
}

.scroll-down-indicator .mouse {
    width: 24px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    position: relative;
}

.scroll-down-indicator .mouse .wheel {
    width: 4px;
    height: 8px;
    background-color: #0D1E33;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollMouseWheel 1.6s infinite;
}

@keyframes scrollMouseWheel {
    0% {
        top: 6px;
        opacity: 1;
    }
    100% {
        top: 20px;
        opacity: 0;
    }
}

.scroll-down-indicator .arrow-down {
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    animation: scrollArrow 1.6s infinite;
}

@keyframes scrollArrow {
    0% {
        opacity: 0;
        transform: translateY(-5px) rotate(45deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(5px) rotate(45deg);
    }
}

/* Mempelai / Couple Card */
.couple-card {
    background: #fff;
    border: 1px solid rgba(74, 110, 81, 0.1);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(74, 110, 81, 0.04);
    max-width: 360px;
    width: 100%;
    transition: transform 0.3s ease;
}

.couple-card:hover {
    transform: translateY(-4px);
}

.couple-photo-frame {
    width: 190px;
    height: 270px;
    border-radius: 100px;
    border: 2px solid var(--gold);
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    padding: 6px; /* Spacing between border and photo */
    box-sizing: border-box;
}

.couple-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 94px; /* Matches inner padding boundary */
}

.couple-name {
    font-size: 2.2rem;
    color: var(--primary);
    margin: 0.5rem 0;
}

.couple-parent {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
    opacity: 0.9;
}

/* Events Timeline styling */
.event-card {
    background: #fff;
    border: 2px solid rgba(74, 110, 81, 0.1);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 30px rgba(74, 110, 81, 0.04);
    text-align: center;
}

.event-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(74, 110, 81, 0.15);
    padding-bottom: 0.75rem;
}

.event-details p {
    margin: 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text);
}

/* Gallery Section Styles moved to main gallery section block */

/* Shared UI Components Adjustments */
.rsvp-section .form-card,
.comments-section .comments-card,
.gift-section .bank-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    color: var(--text) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
}

.rsvp-section input, .rsvp-section select, .rsvp-section textarea {
    background-color: var(--bg-light) !important;
    border: 1px solid rgba(74, 110, 81, 0.15) !important;
    color: var(--text) !important;
}

.rsvp-section button {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-radius: 30px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    box-shadow: 0 5px 15px rgba(74, 110, 81, 0.15) !important;
}

.nav-dot.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Countdown component alignment */
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 2rem 0;
}

.countdown-box {
    background: #fff;
    border: 1px solid rgba(74, 110, 81, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    padding: 0.75rem;
    border-radius: 12px;
    min-width: 65px;
    text-align: center;
}

.countdown-number {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.7;
}

/* Static Cover after video transition */
.static-cover-content {
    z-index: 10;
    text-align: center;
    margin-top: -12vh; /* Shift upward to fit inside the diamond arch */
    animation: fadeInContent 1.2s ease-out forwards;
}

.static-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted); /* Dark charcoal/black like image 1 */
    margin: 0 0 1.25rem 0;
    font-weight: 400;
}

.static-groom, .static-bride {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 3.2rem; /* Large elegant italic names like image 1 */
    font-weight: 400;
    color: #0D1E33; /* Solid black like image 1 */
    margin: 0;
    line-height: 1.1;
}

.static-and {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #555555; /* Muted charcoal */
    margin: 0.75rem 0;
}

/* Stage Sections Base Styles */
.stage-section {
    min-height: 70vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
    padding: 3rem 1.5rem;
    overflow: hidden;
}

#intro-verse {
    position: relative;
    background: transparent !important;
    padding: 4rem 1.5rem 4rem 1.5rem !important;
}

#intro-verse::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(13, 14, 58, 0.85); /* Dark blue/navy color matching the screenshot */
    background-image: url('assets/glitter-new.webp');
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    opacity: 1; /* Adjusted opacity to make background slightly darker/more opaque */
    z-index: 1;
    pointer-events: none;
}

#couple {
    background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Section 2: Intro Verse */
.verse-container {
    position: relative;
    z-index: 2; /* Render content on top of pseudo-element background */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    width: 100%;
    margin-top: 0;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Center top flower decoration pointing up naturally */
.verse-flower-top {
    width: 180px;
    margin: 0 auto 1.5rem auto;
    pointer-events: none;
    z-index: 5;
}

.verse-flower-top img {
    width: 100%;
    height: auto;
    display: block;
}

/* Photo Wrapper for absolute positioning of bottom flowers */
.verse-photo-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem; /* reset margin since flowers are moved to section bottom */
}

/* Portrait photo frame at the bottom */
.verse-photo-frame {
    width: 100%;
    max-width: 340px; /* Slightly narrower for portrait look */
    aspect-ratio: 3 / 4; /* Portrait aspect ratio matching reference */
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.85); /* Thin white border */
    overflow: hidden;
    background-color: #0D1E33;
    padding: 0; /* Removed padding to let photo touch border */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* reset margins since the wrapper has it */
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Bottom flowers wrapper, positioned relative to the section */
.verse-flowers-bottom {
    position: absolute;
    bottom: -70px; /* Align to the bottom of the section with a small buffer */
    left: 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
    z-index: 5; /* higher than .verse-photo-frame */
    overflow: visible;
}

.vfb-flower {
    position: absolute;
    width: 180px; /* size of each flower asset */
    height: auto;
}

.vfb-flower img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: bottom center;
    animation: vfbSway 6s ease-in-out infinite alternate;
}

/* Position each of the 6 flowers horizontally with overlapping offsets and positive bottom positions to prevent clipping */
.vfb-1 {
    left: 5%;
    bottom: 30px;
    transform: translateX(-50%) scale(0.95) rotate(-15deg);
}
.vfb-1 img { animation-delay: -0.5s; animation-duration: 5s; }

.vfb-2 {
    left: 23%;
    bottom: 10px;
    transform: translateX(-50%) scale(0.85) rotate(10deg);
}
.vfb-2 img { animation-delay: -1.5s; animation-duration: 7s; }

.vfb-3 {
    left: 41%;
    bottom: 0px;
    transform: translateX(-50%) scale(0.9) rotate(-5deg);
}
.vfb-3 img { animation-delay: -2.5s; animation-duration: 6s; }

.vfb-4 {
    left: 59%;
    bottom: 0px;
    transform: translateX(-50%) scale(0.85) scaleX(-1) rotate(15deg);
}
.vfb-4 img { animation-delay: -3.5s; animation-duration: 5.5s; }

.vfb-5 {
    left: 77%;
    bottom: 10px;
    transform: translateX(-50%) scale(0.95) scaleX(-1) rotate(-10deg);
}
.vfb-5 img { animation-delay: -1.0s; animation-duration: 6.5s; }

.vfb-6 {
    left: 95%;
    bottom: 40px;
    transform: translateX(-50%) scale(0.9) scaleX(-1) rotate(8deg);
}
.vfb-6 img { animation-delay: -2.0s; animation-duration: 7.5s; }

@keyframes vfbSway {
    0% {
        transform: rotate(-1.5deg);
    }
    100% {
        transform: rotate(1.5deg);
    }
}

.verse-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.verse-photo-placeholder {
    width: 100%;
    height: 100%;
    background-color: #0D1E33;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.verse-monogram-letters {
    font-family: 'Cinzel', serif;
    font-size: 5rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.06em;
    margin-bottom: -15px;
}

.verse-monogram-flourish {
    width: 120px;
    height: auto;
    opacity: 0.8;
}

.monogram-flourish-svg {
    width: 100%;
    height: auto;
}

/* Side flower assets positioned at the absolute edges of the viewport and enlarged */
/* Side flower assets positioned at the absolute edges of the viewport and enlarged */
/* Bottom-left flowers (2 layered assets in the corner) */
.verse-flower-left-1 {
    position: absolute;
    left: 10px;
    bottom: -50px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-left-1 img {
    width: 100%;
    height: auto;
    transform-origin: bottom left;
    animation: swayLeftBottom1 9s ease-in-out infinite;
}

.verse-flower-left-2 {
    position: absolute;
    left: 20px;
    bottom: -100px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-left-2 img {
    width: 100%;
    height: auto;
    transform-origin: bottom left;
    animation: swayLeftBottom2 11s ease-in-out infinite;
}

.verse-flower-left-3 {
    position: absolute;
    left: 80px;
    bottom: -120px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-left-3 img {
    width: 100%;
    height: auto;
    transform-origin: bottom left;
    animation: swayLeftBottom3 13s ease-in-out infinite;
}

/* Bottom-right flowers (3 layered assets in the corner) */
.verse-flower-right-1 {
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-right-1 img {
    width: 100%;
    height: auto;
    transform-origin: bottom right;
    animation: swayRightBottom1 9s ease-in-out infinite;
}

.verse-flower-right-2 {
    position: absolute;
    right: 20px;
    bottom: -130px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-right-2 img {
    width: 100%;
    height: auto;
    transform-origin: bottom right;
    animation: swayRightBottom2 11s ease-in-out infinite;
}

.verse-flower-right-3 {
    position: absolute;
    right: 80px;
    bottom: -150px;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.verse-flower-right-3 img {
    width: 100%;
    height: auto;
    transform-origin: bottom right;
    animation: swayRightBottom3 13s ease-in-out infinite;
}

@keyframes swayLeftBottom1 {
    0%, 100% {
        transform: scaleX(-1) rotate(290deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(310deg) scale(0.78);
    }
}

@keyframes swayLeftBottom2 {
    0%, 100% {
        transform: scaleX(-1) rotate(290deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(310deg) scale(0.78);
    }
}
@keyframes swayLeftBottom3 {
    0%, 100% {
        transform: scaleX(-1) rotate(290deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(310deg) scale(0.78);
    }
}

@keyframes swayRightBottom1 {
    0%, 100% {
        transform: scaleX(-1) rotate(100deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(80deg) scale(0.78);
    }
}

@keyframes swayRightBottom2 {
    0%, 100% {
        transform: scaleX(-1) rotate(70deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(50deg) scale(0.78);
    }
}

@keyframes swayRightBottom3 {
    0%, 100% {
        transform: scaleX(-1) rotate(70deg) scale(0.75);
    }
    50% {
        transform: scaleX(-1) rotate(50deg) scale(0.78);
    }
}

.verse-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif; /* Map 'analogue' to this elegant serif */
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.verse-text {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 13px; /* Exact size from WhatFont */
    line-height: 25px; /* Exact line height from WhatFont */
    color: var(--text);
    margin: 0 0 1rem 0;
    font-weight: 400;
    text-align: center;
}

.verse-ref {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; /* Match font-size with verse text */
    color: var(--text);
    margin: 0;
    font-style: italic;
}

.couple-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 450px;
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 6rem 2rem; /* slightly increased top/bottom padding to sit nicely inside pill ends */
    border: 4px double #8fbcbb; /* double gold border matching reference */
    border-radius: 999px; /* Pill/stadium shape */
    background-color: rgba(15, 15, 15, 0.65); /* translucent dark background */
    backdrop-filter: blur(8px); /* smooth premium blur */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.couple-section-title {
    font-family: 'Satisfy', cursive;
    font-size: 2.2rem; /* Script font needs slightly larger size */
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    color: #ffffff; /* changed to white */
    margin: 0 0 1.2rem 0;
    text-transform: none;
}

.couple-intro {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 auto 2.2rem auto;
    max-width: 320px;
    font-weight: 400;
}

.couple-detail {
    margin: 1rem 0;
    width: 100%;
}

/* Photo container for absolute flowers */
.couple-photo-container {
    position: relative;
    width: fit-content;
    margin: 1.5rem auto 1rem auto;
}

/* Absolute Flowers positioning */
.couple-flower-left {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.couple-flower-right {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

/* Bride Side flowers: Left flower is mid-height, Right flower is bottom-right */
.bride-side .couple-flower-left {
    width: 140px;
    left: -155px;
    top: -20%;
}
.bride-side .couple-flower-left img {
    width: 300px;
    height: auto;
    transform: rotate(-50deg);
}

.bride-side .couple-flower-right {
    width: 140px;
    right: -65px;
    bottom: -15px;
}
.bride-side .couple-flower-right img {
    width: 100%;
    height: auto;
    transform: scaleX(-1) rotate(15deg);
}

/* Groom Side flowers: Left flower is bottom-left, Right flower is mid-height */
.groom-side .couple-flower-left {
    width: 140px;
    left: -85px;
    bottom: -15px;
    z-index: 2;
}
.groom-side .couple-flower-left img {
    width: 180px;
    height: auto;
    transform: rotate(-55deg);
}

.groom-side .couple-flower-right {
    width: 210px;
    right: -100px;
    top: -30%;
    z-index: 0;
}
.groom-side .couple-flower-right img {
    width: 100%;
    height: auto;
    transform: scaleX(-1) rotate(40deg);
}

/* Name and Parent styles */
.couple-italic-name {
    font-family: 'Parisienne', cursive;
    font-style: normal;
    font-size: 3.2rem;
    font-weight: 500;
    color: var(--gold); /* keep script name in primary gold color */
    margin: 1.2rem 0 0.2rem 0;
    line-height: 1.1;
}

.couple-full-name {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff; /* changed to white */
    margin: 0.2rem 0 0.5rem 0;
}

.couple-parents-text {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0.5rem auto 1.2rem auto;
    max-width: 280px;
}

.couple-parents-text .parent-label {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7); /* translucent white */
    display: block;
    margin-bottom: 2px;
}

.couple-parents-text .parent-names {
    font-weight: 600;
    color: #ffffff; /* changed to white */
    display: block;
}

/* Pill Button Instagram */
.couple-btn-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    text-decoration: none;
    padding: 0.55rem 1.7rem;
    border-radius: 50px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    margin: 0.5rem auto 0 auto;
    transition: all 0.25s ease;
    cursor: pointer;
}

.couple-btn-ig:hover {
    background-color: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.couple-btn-ig i {
    font-size: 1rem;
    color: #ffffff !important;
}

/* Redefine divider with lines */
.couple-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 3rem auto;
    font-family: 'Vidaloka', serif;
    font-size: 3.125rem; /* 50px */
    font-weight: 400;
    color: #ffffff; /* changed to white */
    gap: 15px;
    line-height: 1;
}

.couple-divider::before,
.couple-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #888888;
}

/* Section 4: Events (Arch Frame) */
.events-outer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#events {
    background-color: rgb(13, 14, 58) !important;
    background-image: none !important;
    padding: 0 !important;
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#events::before {
    display: none !important; /* hide cream mobile background */
}

#events > * {
    position: relative;
    z-index: 1;
}

/* Redesigned unified full-bleed container */
.events-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: rgb(13, 14, 58) !important; /* solid primary */
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Slideshow styles */
.events-slideshow {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.events-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

/* Alternate scale and slow transitions for even/odd slides to prevent snapping */
.events-slide:nth-child(odd) {
    transform: scale(1.02);
    transition: opacity 1.5s ease-in-out, transform 6.5s ease-out;
}
.events-slide:nth-child(even) {
    transform: scale(1.15);
    transition: opacity 1.5s ease-in-out, transform 6.5s ease-out;
}

/* Active states trigger the slow scale transition */
.events-slide:nth-child(odd).active {
    opacity: 1;
    transform: scale(1.15);
}

.events-slide:nth-child(even).active {
    opacity: 1;
    transform: scale(1.02);
}

.events-slideshow-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13, 14, 58, 0) 50%, rgb(13, 14, 58) 100%) !important;
    pointer-events: none;
}

/* Content wrapper inside events */
.events-content-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Absolute Corner Flowers next to countdown */
.events-flower-left {
    position: absolute;
    bottom: 30%;
    left: -100px;
    width: 260px;
    z-index: 2;
    pointer-events: none;
}
.events-flower-left img {
    width: 100%;
    height: auto;
    transform-origin: bottom left;
    animation: swayEventsFlowerLeft 8s ease-in-out infinite;
}

.events-flower-right {
    position: absolute;
    top: 5%;
    right: 10px;
    width: 260px;
    z-index: 2;
    pointer-events: none;
}
.events-flower-right img {
    width: 100%;
    height: auto;
    transform-origin: top right;
    animation: swayEventsFlowerRight 9s ease-in-out infinite;
}

@keyframes swayEventsFlowerLeft {
    0%, 100% {
        transform: rotate(30deg) scale(1);
    }
    50% {
        transform: rotate(40deg) scale(1.03);
    }
}

@keyframes swayEventsFlowerRight {
    0%, 100% {
        transform: rotate(-30deg) scale(1);
    }
    50% {
        transform: rotate(-40deg) scale(1.03);
    }
}

/* Section 4.5: Event List (Separate parallax section with card styling) */
#event-list {
    background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    padding: 4rem 0 !important;
    position: relative !important;
    width: 100%;
    box-sizing: border-box;
}

/* Dark/black overlay behind the cards with opacity */
#event-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.65) !important; */
    pointer-events: none;
    z-index: 1;
}

/* Dark gradient transition at the top fading to transparent */
#event-list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgb(13, 14, 58) 0%, rgba(13, 14, 58, 0) 100%) !important;
    pointer-events: none;
    z-index: 2;
}

.event-list-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 3;
    padding: 0;
    box-sizing: border-box;
}

/* Elegant Event Card with Thin Double Gold Border and Translucent Dark Background */
.event-card {
    position: relative;
    max-width: 480px;
    width: calc(100% - 54px); /* 12px margin on each side */
    min-height: 880px !important; /* Increased height */
    padding: 5.5rem 2rem !important; /* Adjusted padding to stretch */
    border: 4px double #8fbcbb; /* double gold border matching couple card */
    border-radius: 999px !important;
    background-image: linear-gradient(rgba(13, 14, 58, 0.45), rgba(13, 14, 58, 0.45)), url('assets/cover-mdt-no-wm-wJ7e3z.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(8px); /* smooth premium blur */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

/* Card content details */
.event-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 680px !important; /* Increased to fit the taller card height */
    width: 100%;
    box-sizing: border-box;
}

/* SVGs Styling */
.event-card-icon {
    color: #ffffff; /* white icon */
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.event-card-icon img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.event-card-icon svg {
    width: 52px;
    height: 52px;
}

/* Script Title */
.event-card-title {
    font-family: 'Parisienne', cursive;
    font-size: 2.8rem;
    font-weight: 400;
    color: #ffffff; /* white cursive script */
    margin: 0.5rem 0 1.5rem 0;
    font-style: normal;
}

/* DateTime blocks */
.event-card-datetime {
    margin-bottom: 1rem;
}
.event-card-day {
    font-family: 'Raleway', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #ffffff; /* white text */
    margin: 0 0 0.5rem 0;
}
.event-card-date {
    font-family: 'Vidaloka', 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff; /* white text */
    margin: 0 0 0.5rem 0;
}
.event-card-time {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #ffffff; /* white text */
    margin: 0;
}

/* Home Divider */
.event-card-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 1.8rem auto;
    color: #ffffff; /* white home icon */
    gap: 15px;
    font-size: 1.1rem;
}
.event-card-divider::before,
.event-card-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4); /* transparent white divider lines */
}

/* Location details */
.event-card-location {
    margin-bottom: 2rem;
    max-width: 280px;
}
.event-card-venue {
    font-family: 'Vidaloka', 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff; /* white text */
    margin: 0 0 0.5rem 0;
}
.event-card-venue-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75); /* muted white text */
    margin: -0.3rem 0 0.5rem 0;
    font-style: italic;
}
.event-card-address {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85); /* white text */
    margin: 0;
}

/* Maps button */
.event-card-btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.65rem 1.8rem;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease;
}
.event-card-btn-map:hover {
    transform: translateY(-2px);
    background-color: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.events-flower-top {
    width: 110px;
    margin: 2rem auto 0 auto;
    pointer-events: none;
    z-index: 5;
}
.events-flower-top img {
    width: 100%;
    height: auto;
    display: block;
}

.events-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    margin: 1rem auto 1rem auto;
    text-transform: uppercase;
    text-align: center;
}

/* Override Countdown for black section */
#events .countdown-container {
    display: block !important;
    width: calc(100% - 16px) !important; /* 8px margin on each side to make it mepet samping */
    max-width: 450px !important;
    margin: 1.5rem auto !important;
}

#events #countdown-timer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
    z-index: 2;
}

#events #countdown-timer > div {
    background: #ffffff !important; /* white background matching reference */
    border: none !important;
    border-radius: 10px !important;
    flex: 1 !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    box-sizing: border-box !important;
}

#events #countdown-timer span.text-2xl {
    font-family: 'Cinzel', serif !important;
    font-size: 1.9rem !important;
    font-weight: 600 !important;
    color: #0D1E33 !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

#events #countdown-timer span:not(.text-2xl) {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    color: #555555 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.02em !important;
}

.events-invitation-text {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #ffffff;
    opacity: 0.95;
    margin: 1.5rem auto 1.5rem auto;
    max-width: 320px;
    text-align: center;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Calendar Button styling */
.events-btn-calendar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    text-decoration: none;
    padding: 0.55rem 1.7rem;
    border-radius: 50px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    margin: 0.5rem auto 2.5rem auto;
    transition: all 0.25s ease;
    cursor: pointer;
    z-index: 3;
    position: relative;
}

.events-btn-calendar:hover {
    background-color: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Events list at the bottom */
.events-list-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    z-index: 3;
    position: relative;
    text-align: center;
}

.events-list-wrapper .event-item {
    text-align: center;
    width: 100%;
    padding: 0.5rem 0;
}

.events-list-wrapper .event-item-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.events-list-wrapper .event-item-date {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: #e0e0e0 !important;
    margin: 0 0 0.3rem 0;
}

.events-list-wrapper .event-item-time {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: #e0e0e0 !important;
    margin: 0 0 0.6rem 0;
}

.events-list-wrapper .event-item-venue {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0 0 0.2rem 0;
}

.events-list-wrapper .event-item-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    color: #cccccc !important;
    font-style: italic;
    margin: 0 0 0.3rem 0;
}

.events-list-wrapper .event-item-address {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #cccccc !important;
    margin: 0 0 1rem 0;
    padding: 0 0.5rem;
}

.events-list-wrapper .event-map-btn {
    background: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    padding: 0.45rem 1.4rem !important;
    border-radius: 50px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease;
    margin-bottom: 0.4rem;
}

.events-list-wrapper .event-map-btn:hover {
    background: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

.events-list-wrapper .event-divider-line {
    width: 60px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 1.5rem auto;
}

/* Section 5: Story (Frame Frame) */
#story-section {
    background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    padding: 5rem 1rem !important;
    position: relative !important;
    /* margin-top: -10px; */
}

/* Cream overlay using pseudo-element - works on desktop & mobile */
#story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 245, 240, 0.85);
    z-index: 0;
    pointer-events: none;
}

#story-section > * {
    position: relative;
    z-index: 1;
}

.story-container {
    max-width: 355px !important;
    width: 94% !important;
    margin-top: 1.5rem !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(rgba(13, 13, 13, 0.55), rgba(13, 13, 13, 0.55)), url('assets/cover-black-no-wm-004-6IXLnd-scaled-1.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 3px solid var(--gold) !important;
    border-radius: 30px !important;
    padding: 3rem 1.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.story-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--text);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
}

.story-content-wrapper {
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.story-content-wrapper::-webkit-scrollbar {
    display: none;
}

.story-content-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.story-item {
    margin-bottom: 1.25rem;
    width: 100%;
    text-align: center !important;
}

.story-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0A1628;
    margin: 0 0 0.4rem 0;
    text-align: center !important;
}

.story-text {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    text-align: center !important;
}

/* Remove internal scroll containers max-height to let them display fully */
.events-scroll-content,
.story-content-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Gift Section Styling */
.gift-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--dark-green) !important;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    text-align: center;
}

.gift-section p {
    color: var(--text) !important;
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1.5rem !important;
}

.gift-banks-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Gift Section Card Styling */
.gift-section .bank-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    padding: 1.5rem 1.25rem !important;
    width: 100% !important;
    max-width: 300px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.gift-section .bank-card .account-number {
    color: var(--dark-green) !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
}

.gift-section .bank-card .account-name {
    color: #555555 !important;
    font-size: 0.75rem !important;
    margin: 0 0 0.75rem 0 !important;
    font-family: 'Raleway', sans-serif !important;
}

.gift-section .bank-card .bank-copy-btn {
    background: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 50px !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin-top: 0.25rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.gift-section .bank-card .bank-copy-btn:hover {
    background: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Wishes (Comments & RSVP Form Combined) Styles */
.wishes-section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.wishes-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--dark-green) !important;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
}

.wishes-section-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    color: var(--text) !important;
    text-align: center;
    margin: 0 0 1.25rem 0;
    padding: 0 1rem;
}

.wishes-form-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    width: 100% !important;
    max-width: 300px !important;
    box-sizing: border-box !important;
    margin: 0 auto 3.5rem auto !important; /* Larger bottom margin */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.wishes-success-message {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    color: var(--gold);
    text-align: center;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.wishes-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wishes-form-group {
    display: flex;
    flex-direction: column;
}

.wishes-input,
.wishes-textarea,
.wishes-select {
    background: #0D1E33 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.8rem !important;
    color: var(--text) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

.wishes-input:focus,
.wishes-textarea:focus,
.wishes-select:focus {
    border-color: var(--gold) !important;
}

.wishes-textarea {
    resize: none !important;
}

.wishes-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
}

.wishes-select {
    flex: 1 !important;
}

.wishes-submit-btn {
    background: #060e1a !important;
    color: #ffffff !important;
    border: 1.5px solid var(--gold) !important;
    padding: 0.55rem 1.7rem !important;
    border-radius: 50px !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.wishes-submit-btn:hover {
    background: #1c1c1c !important;
    border-color: var(--gold-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

.wishes-error {
    color: #DC2626;
    font-family: 'Raleway', sans-serif;
    font-size: 0.7rem;
    margin-top: 2px;
}

.wishes-list-container {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 1.5rem auto;
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 110, 81, 0.2) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 25px rgba(74, 110, 81, 0.05) !important;
}

/* Scrollbar styles for wishes chat list */
.wishes-list-container::-webkit-scrollbar {
    width: 4px;
}
.wishes-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}
.wishes-list-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

/* Chat bubble styling for wishes list */
.chat-style-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.chat-bubble-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

.chat-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
}

.chat-bubble {
    background: #0D1E33 !important; /* white bubble */
    border-radius: 16px !important;
    border-top-left-radius: 2px !important; /* bubble tail */
    padding: 0.65rem 0.85rem !important;
    max-width: 80% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.chat-bubble-name {
    font-family: 'Cinzel', serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 2px !important;
}

.chat-bubble-message {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
    margin: 0 !important;
}

.chat-bubble-time {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.6rem !important;
    color: #999999 !important;
    align-self: flex-end !important;
    margin-top: 4px !important;
}

.wishes-empty-text {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    color: #888888;
    text-align: center;
    padding: 1.5rem 0;
}

/* Closing Section & Footer Bar Styles */
.closing-section {
    background-color: #FAF8F5 !important; /* warm vintage paper */
    padding: 4rem 0 0 0 !important; /* no left/right padding on the section */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 50vh !important;
    position: relative !important;
}

.closing-bg-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(13, 13, 13, 0.75) !important; /* light semi-transparent wash for readability */
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1 !important;
}

.closing-container {
    text-align: center !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    flex-grow: 1 !important; /* grow to push flowers to bottom */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
}

.closing-thank-you {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: var(--text) !important;
    margin: 0 0 1.5rem 0 !important;
    max-width: 280px !important;
}

.closing-greeting {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--primary) !important;
    margin: 0 0 0.75rem 0 !important;
}

.closing-names {
    font-family: 'Cinzel', serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--dark-green) !important;
    margin: 0 0 1.5rem 0 !important;
}

.closing-flowers-row {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    height: 120px !important;
    margin-top: auto !important; /* pushes to the absolute bottom of the container */
    margin-bottom: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.closing-flowers-row img {
    position: absolute !important;
    bottom: -55px !important; /* stems hidden behind footer */
    left: 50% !important;
    height: 230px !important;
    width: auto !important;
    opacity: 0.95 !important;
    z-index: 2 !important;
}

.closing-flowers-row .flower-1 {
    transform: translateX(-110%) rotate(317deg) !important;
}

.closing-flowers-row .flower-2 {
    transform: translateX(-70%) rotate(82deg) scaleX(-1) !important;
    bottom: -70px !important;
}

.closing-flowers-row .flower-3 {
    transform: translateX(-40%) rotate(287deg) !important
}

.closing-flowers-row .flower-4 {
    transform: translateX(10%) rotate(48deg) scaleX(-1) !important;
}


.footer-bar {
    width: 100% !important;
    background: #3F4745 !important; /* dark charcoal bar */
    padding: 1.25rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 3 !important; /* higher z-index to cover the stems */
}

.footer-copyright {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.7rem !important;
    color: #cccccc !important;
    margin: 0 !important;
}

.footer-copyright i {
    color: #EF4444 !important;
}

.footer-social-icons {
    display: flex !important;
    gap: 12px !important;
}

.social-icon-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    transition: all 0.2s !important;
}

.social-icon-circle:hover {
    background: #0D1E33 !important;
    color: #3F4745 !important;
    border-color: #ffffff !important;
}


/* ═══════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════ */

#gallery {
    background-color: rgba(0, 0, 0, 0.8) !important;
    margin-top: -10px;
    min-height: auto !important;
}

.gallery-slider-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 8px;
    box-sizing: border-box;
}

.gallery-main-display {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: #0A1628;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-sizing: border-box;
}

.gallery-main-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

.gallery-main-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease, transform 0.5s ease;
}

.gallery-main-wrapper:hover img {
    transform: scale(1.03);
}

.gallery-main-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-main-wrapper:hover .gallery-main-overlay {
    opacity: 1;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--text-dark, #333);
    box-shadow: 0 4px 10px rgba(143, 188, 187, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.gallery-nav-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
    color: var(--primary);
}

.gallery-nav-btn svg {
    width: 20px;
    height: 20px;
}

.prev-btn {
    left: 12px;
}

.next-btn {
    right: 12px;
}

/* Thumbnails Strip */
.gallery-thumbnails-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
    box-sizing: border-box;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-thumbnails-wrapper::-webkit-scrollbar {
    height: 4px;
}

.gallery-thumbnails-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--gold);
    border-radius: 4px;
}

.gallery-thumbnails-strip {
    display: flex;
    gap: 10px;
    padding: 2px;
    box-sizing: border-box;
}

.gallery-thumb-item {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    background: #0A1628;
    box-sizing: border-box;
}

.gallery-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb-item:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.gallery-thumb-item.active {
    border-color: var(--gold, #c5a880);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-zoom-icon {
    width: 28px;
    height: 28px;
    color: #fff;
    stroke: #fff;
}

/* Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
}

.gallery-lightbox.active {
    display: flex;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.lightbox-counter {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    margin-top: 12px;
    letter-spacing: 0.05em;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10000;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10000;
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 480px) {
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
}

/* ═══════════════════════════════════════════════
   YOUTUBE VIDEO PLAYER
═══════════════════════════════════════════════ */

#video {
    background: var(--secondary);
    min-height: auto !important;
}

.youtube-wrapper {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.youtube-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.youtube-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s;
}

.youtube-player:hover .youtube-thumb {
    filter: brightness(0.75);
}

.youtube-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.youtube-play-btn svg {
    width: 68px;
    height: 48px;
}

.youtube-player:hover .youtube-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Glass Wrapper for Motion-1 Theme Sections */
.motion-glass-wrapper {
    background: rgba(26, 26, 26, 0.86) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(143, 188, 187, 0.25) !important;
    border-radius: 24px !important;
    padding: 1.5rem 1.25rem !important;
    margin: 0 auto !important;
    width: calc(100% - 2.5rem) !important;
    max-width: 360px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.motion-glass-wrapper p {
    margin-bottom: 1rem !important;
}

/* Reduce empty spacing above/below gift & wishes sections */
.gift-section,
.comments-section {
    min-height: auto !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Custom styled inner containers */
.motion-glass-wrapper .bank-card {
    background: rgba(13, 13, 13, 0.6) !important;
    border: 1px solid rgba(143, 188, 187, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
}

.motion-glass-wrapper .wishes-form-card {
    background: rgba(13, 13, 13, 0.6) !important;
    border: 1px solid rgba(143, 188, 187, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
}

.motion-glass-wrapper .wishes-list-container {
    background: rgba(13, 13, 13, 0.45) !important;
    border: 1px solid rgba(143, 188, 187, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* ── Parent Default Background (desktop only, right-panel scroll bg) ── */
@media (min-width: 1025px) {
    .right-panel {
        background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp') !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll !important;
    }
}

@media (max-width: 1024px) {
    /* Fix: simulasi background-attachment: fixed di mobile (iOS Safari & Android Chrome).
       background-attachment: fixed native tidak berfungsi di mobile browser dalam scroll container.
       Solusi: pakai pseudo-element body::before dengan position: fixed + z-index: -1
       sehingga gambar tetap di tempat saat user scroll — persis seperti efek parallax di desktop. */
    html,
    body {
        background: transparent !important;
    }
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('assets/design-midnight-no-wm-005-aODkjE.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
    }
}

/* Make individual sections transparent to show parent default background */
#couple,
#event-list,
#story-section,
#prayer {
    background-color: transparent !important;
    background-image: none !important;
}

/* Maintain background specifically for intro-verse */
#intro-verse {
    background: transparent !important;
}

/* Reduce margin/padding for couple section on mobile/tablet to make it wider */
@media (max-width: 1024px) {
    #couple.stage-section {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════
   RSVP & WISHES CUSTOM OVERRIDES (MOTION-2 STYLE)
   ═══════════════════════════════════════════════ */

/* Section background & wrapper */
#ucapan.comments-section {
    background-color: rgb(13, 14, 58) !important;
    background-image: none !important;
    padding: 5rem 0 200px 0 !important; /* bottom padding to prevent content overlap with absolute flower */
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important; /* enable absolute positioning for child elements */
}

#ucapan .wishes-section-wrapper {
    max-width: 480px !important;
    width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

/* Hide global motion-1 top flower image and show motion-3 custom top flower */
#ucapan .wishes-top-flower img {
    display: none !important;
}

#ucapan .wishes-top-flower {
    background-image: url('assets/flower-cover-kMqSIO.webp') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 1.5rem auto !important;
}

#ucapan.comments-section::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important; /* 100% height to match container */
    background-image: url('assets/bunga-1-midnight-no-wm-005-8ORF1A.webp') !important;
    background-size: 100% auto !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Title & Subtitle */
#ucapan .wishes-main-title {
    font-family: 'Cinzel', serif !important;
    font-size: 2.1rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
}

#ucapan .wishes-main-subtitle {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 1.5rem !important;
}

/* Wishes Counter Badge */
#ucapan .wishes-counter {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 0.35rem 1rem !important;
    border-radius: 50px !important;
    margin-bottom: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#ucapan .wishes-count-badge {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#ucapan .wishes-count-text {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Form Container */
#ucapan .wishes-form-card-modern {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 2.5rem auto !important;
}

/* Label styling */
#ucapan .wishes-label {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

/* Input Fields */
#ucapan .wishes-input-modern,
#ucapan .wishes-textarea-modern {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.25rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#ucapan .wishes-input-modern:focus,
#ucapan .wishes-textarea-modern:focus {
    border-color: var(--gold) !important;
    outline: none !important;
}

/* Attendance Buttons Group */
#ucapan .attendance-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

#ucapan .attendance-btn-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

#ucapan .attendance-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50px !important;
    padding: 0.8rem 1rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#ucapan .attendance-btn.full-width {
    width: 100% !important;
}

#ucapan .attendance-btn.half-width {
    width: calc(50% - 4px) !important;
}

#ucapan .attendance-btn.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
}

#ucapan .attendance-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Sticker Button */
#ucapan .wishes-form-footer {
    display: flex !important;
    justify-content: flex-start !important;
    margin-bottom: 0.5rem !important;
}

#ucapan .sticker-btn {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50px !important;
    padding: 0.6rem 1.25rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

#ucapan .sticker-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Submit/Kirim Button */
#ucapan .wishes-submit-btn-modern {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.9rem 2rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

#ucapan .wishes-submit-btn-modern:hover {
    background: #f1f5f9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Success Message Override */
#ucapan .wishes-success-message {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.25rem !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

/* wishes list container overrides */
#ucapan .wishes-list-wrapper-modern {
    width: 100% !important;
    max-width: 440px !important;
    margin: 2.5rem auto 0 auto !important;
    padding: 0 !important;
}

#ucapan .wish-item-card {
    background: rgba(15, 15, 15, 0.65) !important;
    border: 1px solid rgba(143, 188, 187, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1rem !important;
}

#ucapan .wish-card-name {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

#ucapan .wish-card-message {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

#ucapan .wish-card-time {
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}