/* ============================================================
   SUNDAR BAGECHA — original satumomen design + DESIGN.md palette
   ------------------------------------------------------------
   The original theme colors are driven entirely by CSS variables
   (--inv-*, --font-*, --menu-*, --btn-color). To apply the
   DESIGN.md "Romantic Floral" palette we only override those
   variables — the design (layout, frames, fonts, images) stays
   100% original.
   ============================================================ */

:root {
    /* ---- DESIGN.md palette mapped to original theme variables ---- */
    --inv-bg: #29131A;        /* burgundy-950  → body / canvas backdrop   */
    --inv-base: #261B1E;      /* ink           → base text                */
    --inv-accent: #7E203C;    /* plum          → primary accent (buttons, monogram) */
    --inv-border: #B86A2E;    /* gold          → borders & ornaments      */

    --font-base: 'Playfair Display', serif;
    --font-accent: 'Cinzel', serif;
    --font-latin: 'Million Dreams', cursive;

    --menu-bg: #29131A;       /* burgundy-950  → bottom menu bar          */
    --menu-inactive: #FFF7F4; /* ivory         → menu idle color          */
    --menu-active: #B86A2E;   /* gold          → menu active highlight    */
    --btn-color: #FFF7F4;     /* ivory         → button text on accent    */
}

/* ============ Original inline overrides (from captured theme) ============ */
.menu-item.is-active {
    background-color: var(--menu-active);
    color: var(--menu-inactive) !important;
}

/*
 * The markup now renders each frame asset ONCE per slide (cover = frame-1
 * arch + frame-out doors; inner slides = frame-2 gold-line frame), so the
 * original display:none/block toggles are no longer needed.
 */

/* ============ Decorative frames must NEVER block interaction ============ */
/*
 * .frame is position:absolute and covers the whole slide, and the cover
 * "doors" (opening-1/2.png) are 270% wide with z-index:9 — both paint above
 * the static content (buttons, links, menus). Without pointer-events:none
 * the Open Invitation button (and everything else) is unclickable.
 */
.frame,
.frame img,
.frame-out {
    pointer-events: none;
}

/* ============ Frame positioning (fix: frames off-screen on inner slides) ============ */
/*
 * The captured themesv2.css leaves .frame position:absolute. Because the
 * transformed .satumomen_list becomes its containing block, every slide's
 * frame lands at the list's top (y=0) — correct only for the cover (slide 0),
 * while inner slides' frames are pushed ~1 slide above the viewport.
 * Making the slide the containing block anchors each frame to its own slide.
 */
.satumomen_slide {
    position: relative;
}

/* ============ Bottom menu pager (match original: ~5 items visible) ============ */
/*
 * The captured themesv2.css sets .satumomen_menu_item{width:100%} which makes
 * each item a full-canvas "page" — one giant button and a huge active pill.
 * The original shows ~5 items at once (≈82px each) with a small rounded pill.
 */
.satumomen_menu .satumomen_menu_item {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    flex: 0 0 auto;
}

/* ============ Scrollable slide content (gallery with many photos) ============ */
.sb-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/*
 * The carved frame corners are cream/teal PNGs. Tint them toward the DESIGN.md
 * "muted antique gold" so the ornament palette matches the theme. The thin
 * gold-line (frame-2) and leaf doors are left untouched.
 */
.frame img.frame-1 {
    filter: sepia(.55) saturate(1.5) hue-rotate(-12deg) brightness(1.02);
}

/* ============ Original font helper classes ============ */
.font-brittany-signature {
    font-family: 'Brittany Signature';
    line-height: 1.6 !important;
}

.font-photograph-signature {
    font-family: 'Photograph Signature';
    line-height: 1.6 !important;
}

.font-heatwood {
    font-family: 'Heatwood';
    line-height: 3 !important;
}

#YTMusic { display: block; }

/* ============================================================
   Component styles that lived in the original engine
   (theme-app.js injected them; we reconstruct them here)
   ============================================================ */

/* Cover "Open Invitation" button */
.btn-open-invitation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.4rem;
    font-weight: 600;
    letter-spacing: .4px;
    box-shadow: 0 6px 18px rgba(41, 19, 26, .25);
}

/* RSVP trigger button */
.btn-rsvp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .65rem 1.5rem;
    font-weight: 600;
}

/* Quote text block */
.quotes {
    font-style: italic;
    color: var(--inv-base);
    text-align: center;
}

/* Countdown wrapper (data-datetime driven) */
.countdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gift card container */
.gift-container {
    background-color: rgba(255, 247, 244, .88);
    border: 1px solid var(--inv-border);
}

/* Bank account number */
.account-number {
    font-family: var(--font-base);
    letter-spacing: .6px;
}

/* Copy account button */
.btn-copy {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 10px;
    border: 1px solid var(--inv-border);
    border-radius: 50rem;
    background: transparent;
    color: var(--inv-base);
    font-size: 11px;
    cursor: pointer;
}

/* Thanks slide watermark area */
.watermark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.watermark-placeholder { text-align: center; }

/* ============================================================
   RSVP modal form (replaces the original Vue rsvp-component)
   ============================================================ */
.rsvp-form .form-control {
    background-color: rgba(255, 247, 244, .92);
    border: 1px solid var(--inv-border);
    color: var(--inv-base);
    font-family: var(--font-base);
    border-radius: .6rem;
}

.rsvp-form .form-control:focus {
    border-color: var(--inv-accent);
    box-shadow: 0 0 0 .15rem rgba(126, 32, 60, .25);
}

.rsvp-form label {
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--inv-base);
    font-weight: 600;
}

.rsvp-form .btn-primary {
    font-weight: 600;
    letter-spacing: .4px;
}

#sb-rsvp-msg {
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
}

/* ============================================================
   Komen / Ucapan list (themesv2 .comment/.comment-item base)
   ============================================================ */
.comment-item {
    border: 1px solid var(--inv-border);
    background-color: rgba(255, 247, 244, .9);
    color: var(--inv-base);
}

.comment-item strong {
    color: var(--inv-accent);
    font-family: var(--font-base);
}

/* ============================================================
   Lightbox image fit
   ============================================================ */
.lightbox-inner img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/*
 * The captured themesv2.css leaves .lightbox-wrapper in the page flow when
 * NOT .show, so after closing it keeps the last photo and shows it as a
 * background behind the invitation on wide screens. Hide it entirely.
 */
.lightbox-wrapper {
    display: none;
}

.lightbox-wrapper.show {
    display: flex;
}

/* ============================================================
   QR modal — guest QR render
   ============================================================ */
#sb-qrcode-render {
    background: #fff;
    border: 1px solid var(--inv-border);
    border-radius: .8rem;
    padding: 12px;
    display: inline-block;
}

/* ============================================================
   Footer / credit (inside the Thanks slide watermark area)
   ============================================================ */
.sb-footer-logo {
    max-height: 46px;
    margin-bottom: 8px;
}

.sb-footer-credit {
    font-size: 10.5px;
    color: var(--inv-base);
    opacity: .55;
    letter-spacing: .3px;
}

/* ============================================================
   Reduced motion (DESIGN.md §29)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation: none;
    }
    .satumomen_list,
    .satumomen_menu_list {
        transition: none;
    }
}