/* Stylesheet for Motion 1 Theme with Video Transition */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Great+Vibes&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #4A6E51;     /* Forest Green */
    --secondary: #EAE3D2;   /* Soft Ivory/Cream */
    --dark-green: #2C3E2D;  /* Dark Sage */
    --gold: #BCA374;        /* Muted Accent Gold */
    --text: #4A4A4A;        /* Soft Charcoal Text */
    --bg-light: #F7F5F0;    /* Premium Vintage Paper */
}

body {
    background-color: #E2E2E2;
    color: var(--text);
    font-family: 'Inter', 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: #D8D8D8; /* 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(0, 0, 0, 0.15), 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: 'Great Vibes', 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-garden-no-wm-001-VgpAeP.jpg');
    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: #111111; /* 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: 'Playfair Display', serif;
}

.font-script {
    font-family: 'Great Vibes', 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);
    }
}

/* Initial cover screen style */
.cover-gate-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    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: 7vh 1rem 4.5vh 1rem;
    max-width: 90%;
    width: 340px;
    height: 100%;
    background: transparent; /* Transparent, no card */
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    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: 'Playfair Display', serif;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #555;
    margin: 0 0 0.5rem 0;
    font-weight: 400;
}

.cover-names-groom,
.cover-names-bride {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 3.8rem;
    font-weight: 400;
    color: #1e3550;
    margin: 0;
    line-height: 1.05;
}

.cover-names-and {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary);
    margin: 0.3rem 0;
    font-style: italic;
}

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

.cover-names-date {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    color: #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 Gambar 1 & Gambar 3 */
.motion-gate-container.has-photo .cover-gate-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
    z-index: 11;
}

.motion-gate-container.no-photo .cover-gate-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: 11;
}

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

.motion-gate-container.no-photo .cover-content {
    color: #1e3550; /* Elegant dark blue matching Gambar 3 */
}

/* Monogram */
.cover-monogram {
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    font-weight: 300;
    color: #1e3550;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.cover-monogram .sep {
    opacity: 0.4;
    font-weight: 200;
}

/* Subtitle */
.cover-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.motion-gate-container.has-photo .cover-subtitle {
    color: rgba(255, 255, 255, 0.85);
}
.motion-gate-container.no-photo .cover-subtitle {
    color: #555555;
}

/* Title (Names) */
.cover-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    font-weight: 400;
    margin: 0.5rem 0 0 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap; /* Prevent line wrapping */
}
.motion-gate-container.has-photo .cover-title {
    color: #ffffff;
}
.motion-gate-container.no-photo .cover-title {
    color: #1e3550;
}

/* Guest Card */
.cover-guest-card {
    margin: 0 0 3.5rem 0;
}
.cover-guest-card .to-label {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}
.motion-gate-container.has-photo .cover-guest-card .to-label {
    color: rgba(255, 255, 255, 0.9);
}
.motion-gate-container.no-photo .cover-guest-card .to-label {
    color: #555555;
}

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

/* Buka Undangan Button (Pink Style matching image 1) */
.buka-btn-pink {
    background: #cb6c83;
    color: #ffffff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(203, 108, 131, 0.3);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.buka-btn-pink:hover {
    background: #b55a71;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(203, 108, 131, 0.4);
}

/* Bottom Note */
.cover-note {
    font-size: 0.75rem;
    font-style: italic;
    margin-top: 1.5rem;
    font-weight: 300;
}
.motion-gate-container.has-photo .cover-note {
    color: rgba(255, 255, 255, 0.75);
}
.motion-gate-container.no-photo .cover-note {
    color: #777777;
}

/* 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: #ffffff;
    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 #1e3550;
    overflow: hidden;
    background: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

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

.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: 'Playfair Display', 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.05) !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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #444444; /* Dark charcoal/black like image 1 */
    margin: 0 0 1.25rem 0;
    font-weight: 400;
}

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

.static-and {
    font-family: 'Playfair Display', 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 {
    background-image: linear-gradient(rgba(250, 247, 242, 0.9), rgba(250, 247, 242, 0.9)), url('assets/design-garden-no-wm-001-VgpAeP.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 4rem 1.5rem 10rem 1.5rem !important;
}

#couple {
    background-image: url('assets/design-garden-no-wm-001-VgpAeP.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Section 2: Intro Verse */
.verse-container {
    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;
}

.verse-photo-frame {
    width: 100%;
    max-width: 390px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-color: #ffffff;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.verse-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

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

.verse-monogram-letters {
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 500;
    color: #4A4A4A;
    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: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #333333;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
}

.verse-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #444444;
    margin: 0 0 0.75rem 0;
    font-weight: 400;
    text-align: center;
}

.verse-ref {
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    color: #333333;
    margin: 0;
    font-style: italic;
}

/* Section 3: Couple (Redesigned Stadium Frame) */
.couple-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 450px;
    width: calc(100% - 16px);
    margin: 0 auto;
    padding: 4.5rem 1.8rem;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.couple-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.05em;
    color: #1e3550;
    margin: 0 0 1.2rem 0;
    text-transform: none;
}

.couple-intro {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #333333;
    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: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.6rem;
    font-weight: 400;
    color: #1e3550;
    margin: 1.2rem 0 0.2rem 0;
    line-height: 1.1;
}

.couple-full-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
    margin: 0.2rem 0 0.5rem 0;
}

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

.couple-parents-text .parent-label {
    font-weight: 400;
    color: #666666;
    display: block;
    margin-bottom: 2px;
}

.couple-parents-text .parent-names {
    font-weight: 600;
    color: #111111;
    display: block;
}

/* Pill Button Instagram */
.couple-btn-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #c46882;
    color: #ffffff !important;
    text-decoration: none;
    padding: 0.55rem 1.7rem;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(196, 104, 130, 0.25);
    margin: 0.5rem auto 0 auto;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.couple-btn-ig:hover {
    background-color: #b0556e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(196, 104, 130, 0.35);
}

.couple-btn-ig i {
    font-size: 1rem;
}

/* Redefine divider with lines */
.couple-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 3rem auto;
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #1e3550;
    gap: 15px;
}

.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: #2d4564 !important;
    background-image: none !important;
    padding: 0 !important;
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#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: #2d4564; /* deep blue */
    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(45, 69, 100, 0) 60%, rgba(45, 69, 100, 1) 100%);
    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-garden-no-wm-001-VgpAeP.jpg') !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;
}

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

/* Deep blue gradient transition at the top */
#event-list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, #2d4564 0%, rgba(45, 69, 100, 0) 100%);
    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;
}

/* Vibrant Event Card with Thick White Border and Garden Background */
.event-card {
    position: relative;
    max-width: 450px;
    width: calc(100% - 32px); /* 16px margin on each side */
    min-height: 760px; /* Increased height */
    padding: 5rem 1.5rem;
    border: 10px solid #2d4564;
    border-radius: 40px;
    background-image: url('assets/cover-garden-no-wm-001-SLT9Z8.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    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: 540px; /* Increased to fit the taller card height */
    width: 100%;
    box-sizing: border-box;
}

/* SVGs Styling */
.event-card-icon {
    color: #1e3550;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.event-card-icon svg {
    width: 52px;
    height: 52px;
}

/* Script Title */
.event-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-style: italic;
    font-weight: 400;
    color: #1e3550;
    margin: 0.5rem 0 1.5rem 0;
}

/* DateTime blocks */
.event-card-datetime {
    margin-bottom: 1rem;
}
.event-card-day {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #1e3550;
    margin: 0 0 0.5rem 0;
}
.event-card-date {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1e3550;
    margin: 0 0 0.5rem 0;
}
.event-card-time {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #444444;
    margin: 0;
}

/* Home Divider */
.event-card-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 1.8rem auto;
    color: #1e3550;
    gap: 15px;
    font-size: 1.1rem;
}
.event-card-divider::before,
.event-card-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #d0b07a;
}

/* Location details */
.event-card-location {
    margin-bottom: 2rem;
    max-width: 280px;
}
.event-card-venue {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #1e3550;
    margin: 0 0 0.5rem 0;
}
.event-card-venue-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: #666666;
    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: #555555;
    margin: 0;
}

/* Maps button */
.event-card-btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #c46882;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.65rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(196, 104, 130, 0.25);
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.event-card-btn-map:hover {
    transform: translateY(-2px);
    background-color: #b35670;
    box-shadow: 0 6px 15px rgba(196, 104, 130, 0.35);
}

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

/* Override Countdown for dark blue card (Larger dimensions) */
#events #countdown-timer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    margin: 1rem auto !important;
    max-width: 290px !important;
    z-index: 2;
}

#events #countdown-timer > div {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    width: 135px !important;
    height: 95px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#events #countdown-timer span.text-2xl {
    font-family: 'Playfair Display', serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #2d4564 !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
}

#events #countdown-timer span:not(.text-2xl) {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #666666 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.05em !important;
}

.events-invitation-text {
    font-family: 'Inter', 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: #c46882;
    color: #ffffff !important;
    text-decoration: none;
    padding: 0.55rem 1.7rem;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(196, 104, 130, 0.25);
    margin: 0.5rem auto 2.5rem auto;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
    z-index: 3;
    position: relative;
}

.events-btn-calendar:hover {
    background-color: #b0556e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(196, 104, 130, 0.35);
}

/* 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: 'Playfair Display', 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: 'Inter', 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: 'Inter', 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: 'Playfair Display', 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: 'Inter', 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: 'Inter', 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: #ffffff !important;
    color: #2d4564 !important;
    border: none;
    padding: 0.45rem 1.4rem;
    border-radius: 20px;
    font-family: 'Inter', 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.1);
    transition: all 0.2s ease;
    margin-bottom: 0.4rem;
}

.events-list-wrapper .event-map-btn:hover {
    background: #eeeeee !important;
    transform: translateY(-1px);
}

.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-garden-no-wm-001-VgpAeP.jpg') !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(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url('assets/cover-garden-no-wm-001-SLT9Z8.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 3px solid #BCA374 !important;
    border-radius: 30px !important;
    padding: 3rem 1.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.story-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #333333;
    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: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2C3E2D;
    margin: 0 0 0.4rem 0;
    text-align: center !important;
}

.story-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    line-height: 1.55;
    color: #444444;
    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: 'Playfair Display', 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: 'Inter', 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.05) !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: 'Inter', 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: 'Inter', sans-serif !important;
}

.gift-section .bank-card .bank-copy-btn {
    background: #3F4745 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    display: inline-block !important;
    margin-top: 0.25rem !important;
}

.gift-section .bank-card .bank-copy-btn:hover {
    background: var(--primary) !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: 'Playfair Display', 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: 'Inter', 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.05) !important;
}

.wishes-success-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #4A6E51;
    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: #ffffff !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: #333333 !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: #4A6E51 !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: #3F4745 !important; /* dark grey button */
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.wishes-submit-btn:hover {
    background: #2C3E2D !important;
}

.wishes-error {
    color: #DC2626;
    font-family: 'Inter', 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: 'Playfair Display', 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: #ffffff !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: 'Playfair Display', serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 2px !important;
}

.chat-bubble-message {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    margin: 0 !important;
}

.chat-bubble-time {
    font-family: 'Inter', 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: 'Inter', 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(255, 255, 255, 0.82) !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: 'Inter', 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: 'Inter', 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: 'Playfair Display', 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: 'Inter', 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: #ffffff !important;
    color: #3F4745 !important;
    border-color: #ffffff !important;
}


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

#gallery {
    background: var(--bg-light);
    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.08);
    background: #eaeaea;
    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(0, 0, 0, 0.15);
    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: #eaeaea;
    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(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !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.05) !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(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
}

.motion-glass-wrapper .wishes-form-card {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    border-radius: 16px !important;
    margin-bottom: 0 !important;
}

.motion-glass-wrapper .wishes-list-container {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !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-garden-no-wm-001-VgpAeP.jpg') !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-garden-no-wm-001-VgpAeP.jpg');
        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 soft cream background specifically for intro-verse */
#intro-verse {
    background-color: rgba(250, 247, 242, 0.9) !important;
    background-image: none !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;
    }
}