/**
 * فوانيس المجلس — Lantern Majlis
 * Heritage majlis: mashrabiya screens, swaying lanterns on cords, arch panels
 * and a countdown lit inside four lanterns. Mobile-first.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gold: #d4b56a;
    --gold-bright: #eed49a;
    --gold-deep: #b8944a;
    --maroon: #6b1d3a;
    --maroon-soft: #822548;
    --maroon-deep: #2a0814;
    --cream: #f4e6d0;
    --cream-soft: rgba(244, 230, 208, .78);
    --radius-md: 1.85rem;
    --radius-lg: 2.5rem;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body.maroon-majlis {
    font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
    color: var(--cream);
    min-height: 100vh;
    min-height: var(--app-vh, 100svh);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse 92% 45% at 50% -8%, rgba(212, 181, 106, .16), transparent 58%),
        radial-gradient(ellipse 60% 40% at 8% 55%, rgba(107, 29, 58, .55), transparent 60%),
        radial-gradient(ellipse 60% 40% at 95% 80%, rgba(107, 29, 58, .45), transparent 60%),
        var(--maroon-deep);

    /* Shared feature sections */
    --rsvp-accent: var(--gold);
    --rsvp-text: var(--cream);
    --rsvp-muted: var(--cream-soft);
    --rsvp-border: rgba(212, 181, 106, .4);
    --rsvp-field: rgba(255, 255, 255, .06);
    --if-accent: var(--gold);
    --if-accent-text: var(--maroon-deep);
    --if-text: var(--cream);
    --if-muted: var(--cream-soft);
    --if-border: rgba(212, 181, 106, .32);
    --if-field: rgba(255, 255, 255, .06);
    --if-surface: rgba(212, 181, 106, .08);
    --if-punch: rgba(107, 29, 58, .5);
    --if-rsvp-bg: transparent;
    --if-lang-bg: rgba(42, 8, 20, .92);
}

html[dir="rtl"] body.maroon-majlis {
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}

a { color: inherit; text-decoration: none; }

/* Mashrabiya screen washing the whole page */
.mm-screen {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: .07;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 2L62 32 32 62 2 32Z' fill='none' stroke='%23d4b56a' stroke-width='.8'/%3E%3Cpath d='M32 14L50 32 32 50 14 32Z' fill='none' stroke='%23d4b56a' stroke-width='.6'/%3E%3Ccircle cx='32' cy='32' r='3' fill='none' stroke='%23d4b56a' stroke-width='.6'/%3E%3C/svg%3E");
}

/* Ambient drift — warm fireflies and rose petals */
.inv-amb--spark { color: rgba(238, 212, 154, .85); }
.inv-amb--petal { color: rgba(199, 106, 137, .5); }

.mm-lantern-icon {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.mm-kicker {
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--gold);
}
.mm-kicker--ink { color: var(--gold-deep); }
html[dir="rtl"] .mm-kicker {
    font-family: var(--inv-font-ar-body), serif;
    letter-spacing: .1em;
    text-transform: none;
    font-size: .92rem;
}

/* ── Reveal ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(2.2rem);
    transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ══════════════════════════
   Gate
   ══════════════════════════ */
@keyframes gate-spin { to { transform: rotate(360deg); } }
@keyframes mm-star-spin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(8deg) scale(1.06); }
}
@keyframes mm-flicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(238, 212, 154, .55)); }
    45% { opacity: .82; filter: drop-shadow(0 0 18px rgba(238, 212, 154, .8)); }
    70% { opacity: .95; filter: drop-shadow(0 0 8px rgba(238, 212, 154, .4)); }
}

#maroon-gate {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    height: var(--app-vh, 100svh);
    transition: opacity .7s ease;
}
#maroon-gate.is-fading { opacity: 0; pointer-events: none; }
#maroon-gate.is-hidden { display: none; }
#maroon-gate video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
#maroon-gate .gate-loading,
#maroon-gate .gate-waiting {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}
#maroon-gate .gate-loading.is-active,
#maroon-gate .gate-waiting.is-active { display: flex; }
#maroon-gate .gate-loading { background: var(--maroon-deep); color: var(--gold); z-index: 3; }
#maroon-gate .gate-waiting {
    z-index: 4;
    cursor: pointer;
    background: radial-gradient(ellipse 70% 50% at 50% 45%, rgba(42, 8, 20, .2), rgba(0, 0, 0, .55));
}
#maroon-gate.is-playing .gate-waiting { display: none !important; }

.gate-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(212, 181, 106, .25);
    border-top-color: var(--gold);
    border-inline-end-color: var(--cream);
    animation: gate-spin .9s linear infinite;
}
.gate-loading-text {
    margin-top: 1.4rem;
    font-size: .8rem;
    letter-spacing: .26em;
    text-transform: uppercase;
}
html[dir="rtl"] .gate-loading-text { letter-spacing: normal; text-transform: none; }

.gate-lamp {
    width: 3.4rem;
    color: var(--gold-bright);
    animation: mm-flicker 3.4s ease-in-out infinite;
}
.tap-to-open {
    margin-top: 1.3rem;
    font-size: .85rem;
    color: #fff;
    border-bottom: 1px solid rgba(212, 181, 106, .75);
    padding-bottom: .45rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-align: center;
}
html[dir="rtl"] .tap-to-open { letter-spacing: .04em; text-transform: none; font-size: 1.02rem; }
.gate-hint { margin-top: .8rem; font-size: .74rem; color: var(--cream-soft); }

.maroon-mute-btn {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: rgba(42, 8, 20, .92);
    color: var(--cream);
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}

/* ══════════════════════════
   Courtyard hero
   ══════════════════════════ */
.mm-page { position: relative; z-index: 1; }

.mm-hero {
    position: relative;
    min-height: 100svh;
    min-height: var(--app-vh, 100svh);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(42, 8, 20, .22) 0%, rgba(42, 8, 20, .42) 40%, rgba(42, 8, 20, .94) 100%),
        var(--mm-hero) center/cover no-repeat;
}
.mm-hero--video {
    background: linear-gradient(180deg, rgba(42, 8, 20, .35) 0%, rgba(42, 8, 20, .94) 100%), var(--maroon-deep);
}
.mm-hero .inv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: 0;
    pointer-events: none;
}
.mm-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .13;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 2L70 36 36 70 2 36Z' fill='none' stroke='%23d4b56a' stroke-width='.7'/%3E%3Cpath d='M36 16L56 36 36 56 16 36Z' fill='none' stroke='%23d4b56a' stroke-width='.5'/%3E%3C/svg%3E");
}
.mm-hero-veil {
    position: absolute;
    inset: auto 0 0;
    height: 58%;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(42, 8, 20, .95));
    pointer-events: none;
}

/* Lanterns hanging from the top of the courtyard */
.mm-hang {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-inline: .5rem;
    pointer-events: none;
}
.mm-hang-lamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: mm-sway 5.5s ease-in-out infinite alternate;
}
.mm-hang-lamp i {
    display: block;
    width: 1px;
    height: var(--cord, 3.2rem);
    background: linear-gradient(180deg, rgba(212, 181, 106, .1), rgba(212, 181, 106, .65));
}
.mm-hang-lamp b {
    display: block;
    width: var(--lamp, 1.35rem);
    color: var(--gold-bright);
    animation: mm-flicker 4s ease-in-out infinite;
}
.mm-hang-lamp--1 { --cord: 4.4rem; --lamp: 1.5rem; animation-duration: 6s; }
.mm-hang-lamp--2 { --cord: 2.6rem; --lamp: 1.15rem; animation-duration: 4.8s; animation-delay: -1.2s; }
.mm-hang-lamp--3 { --cord: 6rem; --lamp: 1.8rem; animation-duration: 6.8s; animation-delay: -2.4s; }
.mm-hang-lamp--4 { --cord: 3.2rem; --lamp: 1.25rem; animation-duration: 5.2s; animation-delay: -.8s; }
.mm-hang-lamp--5 { --cord: 5rem; --lamp: 1.4rem; animation-duration: 6.4s; animation-delay: -3s; }
.mm-hang-lamp--1 b { animation-delay: -.4s; }
.mm-hang-lamp--2 b { animation-delay: -1.6s; }
.mm-hang-lamp--3 b { animation-delay: -2.8s; }
.mm-hang-lamp--4 b { animation-delay: -3.4s; }
.mm-hang-lamp--5 b { animation-delay: -1.1s; }

@keyframes mm-sway {
    from { transform: rotate(-3.2deg); }
    to { transform: rotate(3.2deg); }
}

.mm-hero-inner {
    position: relative;
    z-index: 3;
    width: min(34rem, calc(100% - 2.4rem));
    padding: 0 0 3.6rem;
}
.mm-star {
    width: 2rem;
    height: 2rem;
    margin: .8rem auto;
    display: block;
    fill: var(--gold);
    filter: drop-shadow(0 0 10px rgba(212, 181, 106, .5));
    animation: mm-star-spin 5s ease-in-out infinite;
}
.mm-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.4rem, 11vw, 4.4rem);
    font-weight: 600;
    line-height: 1.08;
    text-shadow: 0 10px 32px rgba(0, 0, 0, .5);
}
html[dir="rtl"] .mm-name {
    font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif;
    font-size: clamp(2rem, 9.5vw, 3.6rem);
    line-height: 1.5;
}
.mm-amp { margin: .15rem 0; font-size: 1.5rem; color: var(--gold); }
.mm-tagline {
    margin: 1rem auto 0;
    max-width: 23rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cream-soft);
}

.mm-hero-band {
    margin: 1.4rem auto 0;
    width: fit-content;
    max-width: 100%;
    padding: .55rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    flex-wrap: wrap;
    font-family: 'Cinzel', serif;
    font-size: .7rem;
    letter-spacing: .14em;
    color: var(--gold-bright);
    border-top: 1px solid rgba(212, 181, 106, .4);
    border-bottom: 1px solid rgba(212, 181, 106, .4);
}
html[dir="rtl"] .mm-hero-band {
    font-family: var(--inv-font-ar-body), serif;
    letter-spacing: 0;
    font-size: .88rem;
}
.mm-hero-band em { font-style: normal; color: var(--gold); opacity: .8; }

.mm-scroll {
    display: inline-block;
    margin-top: 1.7rem;
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    padding-bottom: .3rem;
    animation: mm-bounce 2.2s ease infinite;
}
html[dir="rtl"] .mm-scroll { letter-spacing: .05em; text-transform: none; font-size: .9rem; }
@keyframes mm-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* ══════════════════════════
   Invitation panel in an arch
   ══════════════════════════ */
.mm-invite { padding: 3.5rem 1.15rem 2rem; }
.mm-arch-panel {
    position: relative;
    max-width: 32rem;
    margin: 0 auto;
    padding: 4.6rem 1.5rem 2.6rem;
    text-align: center;
    border-radius: 14rem 14rem var(--radius-md) var(--radius-md);
    background:
        radial-gradient(ellipse 70% 34% at 50% 6%, rgba(238, 212, 154, .22), transparent 62%),
        linear-gradient(180deg, rgba(130, 37, 72, .6), rgba(42, 8, 20, .92));
    box-shadow: 0 28px 64px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(212, 181, 106, .3);
    overflow: hidden;
}
.mm-arch-ornament {
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    border: 1px solid rgba(212, 181, 106, .18);
    pointer-events: none;
}
.mm-arch-lamp {
    position: absolute;
    top: 1.2rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 1.9rem;
    color: var(--gold-bright);
    animation: mm-flicker 4.4s ease-in-out infinite;
}
html[dir="rtl"] .mm-arch-lamp { transform: translateX(50%); }

.mm-mono {
    margin: .9rem 0;
    font-family: 'Cinzel', serif;
    letter-spacing: .32em;
    color: var(--gold);
    font-size: 1.05rem;
}
html[dir="rtl"] .mm-mono { letter-spacing: .14em; }
.mm-card-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.7rem, 6.6vw, 2.4rem);
    font-weight: 600;
    line-height: 1.3;
}
html[dir="rtl"] .mm-card-names { font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif; }
.mm-card-names em { font-style: normal; color: var(--gold); font-size: .5em; }
.mm-invite-text {
    margin-top: 1.1rem;
    font-size: 1rem;
    line-height: 1.95;
    color: var(--cream-soft);
}
.mm-date { margin-top: 1.2rem; font-size: 1.12rem; color: var(--gold-bright); }
.mm-time, .mm-venue { margin-top: .35rem; color: var(--cream-soft); }

.mm-cta {
    display: inline-block;
    margin-top: 1.7rem;
    padding: .85rem 2.1rem;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--maroon-deep);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mm-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
html[dir="rtl"] .mm-cta {
    font-family: var(--inv-font-ar-body), serif;
    letter-spacing: .02em;
    text-transform: none;
    font-size: .95rem;
}

/* ══════════════════════════
   Mihrab portrait
   ══════════════════════════ */
.mm-portrait { padding: 2rem 1.25rem 1rem; text-align: center; }
.mm-mihrab {
    position: relative;
    width: min(19rem, 74vw);
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 50% 50% 1.2rem 1.2rem / 42% 42% 1.2rem 1.2rem;
    box-shadow:
        0 24px 52px rgba(0, 0, 0, .45),
        0 0 0 2px rgba(212, 181, 106, .55),
        0 0 0 9px rgba(107, 29, 58, .45),
        0 0 0 10px rgba(212, 181, 106, .3);
}
.mm-mihrab img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: scale(1.04);
    transition: transform 9s ease;
}
.mm-portrait.is-visible .mm-mihrab img { transform: scale(1); }
.mm-portrait-caption {
    margin-top: 1.3rem;
    font-family: 'Cinzel', serif;
    letter-spacing: .3em;
    font-size: 1.05rem;
    color: var(--gold);
}
html[dir="rtl"] .mm-portrait-caption { letter-spacing: .12em; }

/* ══════════════════════════
   Countdown lit in lanterns
   ══════════════════════════ */
.mm-countdown-wrap { padding: 2.6rem 1.1rem 2.4rem; text-align: center; }
.mm-countdown,
body.maroon-majlis .tpl-countdown {
    position: relative;
    margin-top: 3.4rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
}
/* the rope the lanterns hang from */
.mm-countdown::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    inset-inline: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 181, 106, .6) 15%, rgba(212, 181, 106, .6) 85%, transparent);
}
body.maroon-majlis .tpl-countdown-item {
    position: relative;
    display: grid;
    place-items: center;
    gap: .05rem;
    width: clamp(3.7rem, 19vw, 5rem);
    min-width: 0;
    padding: 1.15rem .3rem 1rem;
    border: 0;
    border-radius: 42% 42% 34% 34% / 26% 26% 20% 20%;
    transform-origin: top center;
    background:
        radial-gradient(ellipse 60% 50% at 50% 38%, rgba(238, 212, 154, .35), transparent 65%),
        linear-gradient(180deg, rgba(130, 37, 72, .85), rgba(42, 8, 20, .92));
    box-shadow:
        0 0 0 1px rgba(212, 181, 106, .55),
        inset 0 0 18px rgba(238, 212, 154, .22),
        0 14px 30px rgba(0, 0, 0, .35);
    animation: mm-sway 6s ease-in-out infinite alternate;
}
body.maroon-majlis .tpl-countdown-item::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    inset-inline-start: 50%;
    width: 1px;
    height: 1.5rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(212, 181, 106, .25), rgba(212, 181, 106, .75));
}
body.maroon-majlis .tpl-countdown-item::after {
    content: '';
    position: absolute;
    bottom: -.5rem;
    inset-inline-start: 50%;
    width: .32rem;
    height: .5rem;
    transform: translateX(-50%);
    border-radius: 0 0 999px 999px;
    background: linear-gradient(180deg, var(--gold), transparent);
}
body.maroon-majlis .tpl-countdown-item:nth-child(1) { animation-duration: 5.4s; }
body.maroon-majlis .tpl-countdown-item:nth-child(2) { animation-duration: 6.2s; animation-delay: -1.4s; }
body.maroon-majlis .tpl-countdown-item:nth-child(3) { animation-duration: 5.8s; animation-delay: -2.6s; }
body.maroon-majlis .tpl-countdown-item:nth-child(4) { animation-duration: 6.6s; animation-delay: -3.6s; }

body.maroon-majlis .tpl-countdown-value {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.25rem, 5.6vw, 1.65rem);
    line-height: 1;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(238, 212, 154, .5);
}
body.maroon-majlis .tpl-countdown-label {
    margin-top: .3rem;
    font-size: .52rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream-soft);
}
html[dir="rtl"] body.maroon-majlis .tpl-countdown-label {
    letter-spacing: 0;
    text-transform: none;
    font-size: .66rem;
}
body.maroon-majlis .tpl-countdown-done {
    font-size: 1.3rem;
    color: var(--gold-bright);
}

/* ══════════════════════════
   Three niches
   ══════════════════════════ */
.mm-niches {
    display: grid;
    gap: .9rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 1rem 1.15rem 3rem;
}
.mm-niche {
    position: relative;
    text-align: center;
    padding: 2.4rem 1.1rem 1.6rem;
    border-radius: 8rem 8rem var(--radius-md) var(--radius-md);
    background:
        radial-gradient(ellipse 70% 30% at 50% 4%, rgba(238, 212, 154, .16), transparent 60%),
        linear-gradient(165deg, rgba(107, 29, 58, .45), rgba(42, 8, 20, .6));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(212, 181, 106, .22);
}
.mm-niche-glyph {
    position: absolute;
    top: .9rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-size: 1rem;
    opacity: .9;
}
html[dir="rtl"] .mm-niche-glyph { transform: translateX(50%); }
.mm-niche h3 {
    font-family: 'Cinzel', serif;
    font-size: .64rem;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
}
html[dir="rtl"] .mm-niche h3 {
    font-family: var(--inv-font-ar-body), serif;
    letter-spacing: .06em;
    text-transform: none;
    font-size: .92rem;
}
.mm-niche p { margin-top: .6rem; font-size: 1.05rem; line-height: 1.6; }
.mm-niche small {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--cream-soft);
}

/* ── Rule between rooms ── */
.mm-rooms { position: relative; z-index: 1; }
.mm-rule {
    display: flex;
    align-items: center;
    gap: .9rem;
    max-width: 22rem;
    margin: 2.8rem auto 1.2rem;
}
.mm-rule i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 181, 106, .55), transparent);
}
.mm-rule span { color: var(--gold); font-size: 1.05rem; }

/* ══════════════════════════
   Shared sections — majlis dressing
   ══════════════════════════ */
body.maroon-majlis .inv-if-kicker {
    font-family: 'Cinzel', serif;
    color: var(--gold);
}
html[dir="rtl"] body.maroon-majlis .inv-if-kicker { font-family: var(--inv-font-ar-body), serif; }
body.maroon-majlis .inv-if-title {
    font-family: 'Cinzel', serif;
    color: var(--cream);
}
html[dir="rtl"] body.maroon-majlis .inv-if-title { font-family: var(--inv-font-ar-names), 'Aref Ruqaa', serif; }

body.maroon-majlis .inv-if-welcome,
body.maroon-majlis .inv-if-gratitude { border: 0; background: transparent; }
body.maroon-majlis .inv-if-notes-body,
body.maroon-majlis .inv-if-guestbook-entry {
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, rgba(107, 29, 58, .4), rgba(42, 8, 20, .55));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}

/* Programme hung along a lantern rope */
body.maroon-majlis .inv-if-programme-list {
    position: relative;
    max-width: 32rem;
    margin-inline: auto;
    gap: 0;
    padding-inline-start: 1.4rem;
}
body.maroon-majlis .inv-if-programme-list::before {
    content: '';
    position: absolute;
    inset-block: .6rem;
    inset-inline-start: .2rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 181, 106, .55), transparent);
}
body.maroon-majlis .inv-if-programme-item,
html[dir="rtl"] body.maroon-majlis .inv-if-programme-item {
    position: relative;
    grid-template-columns: 4.4rem 1fr;
    align-items: baseline;
    gap: .9rem;
    padding: 1.05rem .2rem 1.05rem 0;
    border: 0;
    border-bottom: 1px solid rgba(212, 181, 106, .16);
    background: none;
    text-align: start;
}
body.maroon-majlis .inv-if-programme-item::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    inset-inline-start: -1.35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px rgba(238, 212, 154, .8);
}
body.maroon-majlis .inv-if-programme-time {
    font-family: 'Cinzel', serif;
    font-size: .88rem;
    color: var(--gold-bright);
    text-align: start;
}
html[dir="rtl"] body.maroon-majlis .inv-if-programme-item .inv-if-programme-time {
    font-family: var(--inv-font-ar-body), serif;
    text-align: start;
}
body.maroon-majlis .inv-if-programme-name { font-size: 1.05rem; color: var(--cream); }
body.maroon-majlis .inv-if-programme-desc { font-size: .88rem; color: var(--cream-soft); }

/* Language pill on a dark page */
body.maroon-majlis .inv-if-lang {
    background: rgba(42, 8, 20, .92);
    border-color: rgba(212, 181, 106, .45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
body.maroon-majlis .inv-if-lang a { color: var(--cream); }
body.maroon-majlis .inv-if-lang a.is-active {
    background: var(--gold);
    color: var(--maroon-deep);
}

/* Gallery + map framed in gold */
body.maroon-majlis .inv-if-showcase-slide,
body.maroon-majlis .inv-if-gallery-cell {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .34), 0 0 0 1px rgba(212, 181, 106, .35);
}
body.maroon-majlis .inv-if-map-frame {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 0 1px rgba(212, 181, 106, .35);
}
body.maroon-majlis .inv-if-showcase-nav {
    background: rgba(42, 8, 20, .85);
    border-color: rgba(212, 181, 106, .5);
    color: var(--gold-bright);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
body.maroon-majlis .inv-if-showcase-nav:hover { background: rgba(107, 29, 58, .9); }

/* ── Footer ── */
.mm-footer {
    padding: 3rem 1.5rem 4.5rem;
    text-align: center;
    color: var(--cream-soft);
    background: linear-gradient(180deg, transparent, rgba(42, 8, 20, .8));
}
.mm-footer-lamp {
    display: block;
    width: 1.6rem;
    margin: 0 auto .8rem;
    color: var(--gold-bright);
    animation: mm-flicker 5s ease-in-out infinite;
}
.mm-footer-mono {
    font-family: 'Cinzel', serif;
    letter-spacing: .3em;
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: .4rem;
}
html[dir="rtl"] .mm-footer-mono { letter-spacing: .12em; }
.mm-footer-tag {
    margin-top: .5rem;
    font-family: 'Cinzel', serif;
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
html[dir="rtl"] .mm-footer-tag {
    font-family: var(--inv-font-ar-body), serif;
    letter-spacing: .06em;
    text-transform: none;
    font-size: .82rem;
}

/* ══════════════════════════
   Wider screens
   ══════════════════════════ */
@media (min-width: 700px) {
    .mm-niches { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
    .mm-invite { padding: 4.5rem 1.5rem 2.5rem; }
    .mm-arch-panel { padding: 5.2rem 2.4rem 3rem; }
    .mm-countdown, body.maroon-majlis .tpl-countdown { gap: 1.1rem; }
    .mm-hang { padding-inline: 3rem; }
}

/* Keep shared blocks inside the viewport on phones */
.inv-if-showcase,
.inv-if-showcase-shell,
.inv-if-section { max-width: 100%; overflow-x: hidden; }
.inv-if-showcase-viewport { min-width: 0 !important; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .gate-spinner,
    .gate-lamp,
    .mm-star,
    .mm-scroll,
    .mm-hang-lamp,
    .mm-hang-lamp b,
    .mm-arch-lamp,
    .mm-footer-lamp,
    body.maroon-majlis .tpl-countdown-item { animation: none !important; }
    html { scroll-behavior: auto; }
}