@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Amiri (SIL OFL 1.1) carries the verse and the pull-quotes: a real naskh cut with
   room for full vocalisation, where Noto Naskh only had to be legible. Arabic subset
   only, one weight, preloaded in the layout. */
@font-face {
    font-family: "Amiri";
    src: url("../fonts/Amiri-Arabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Naskh Arabic";
    src: url("../fonts/NotoNaskhArabic-Variable.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-primary: #681f34;
    --brand-primary-dark: #4a1527;
    --brand-secondary: #24584b;
    --brand-secondary-dark: #163f36;
    --burgundy-950: #35101c;
    --burgundy-900: #4a1527;
    --burgundy-800: #681f34;
    --burgundy-700: #812d45;
    --burgundy-600: #8f3b52;
    --burgundy-100: #f2dfe4;
    --maylas-rose: #cc8d90;
    --maylas-rose-dark: #92545a;
    --maylas-rose-light: #f7e9e7;
    --blush-100: #fbf1f2;
    --blush-200: #f4dfe2;
    --green-900: #163f36;
    --green-800: #24584b;
    --green-100: #e5eeea;
    --cream: #fffaf5;
    --ink: #251c1f;
    --muted: #6b5e62;
    --white: #fff;
    --border: #e7dadd;
    --shadow-sm: 0 8px 24px rgba(65, 20, 36, .08);
    --shadow-lg: 0 24px 60px rgba(65, 20, 36, .14);
    --radius-sm: .75rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    /* A hairline warm enough to read as paper rather than as a UI border. */
    --rule: #ecdcd7;
    --font-body: "Noto Sans Arabic", Tahoma, sans-serif;
    --font-display: "Amiri", "Noto Naskh Arabic", serif;
    /* One rhythm for the whole page, so no section is left looking dropped in. */
    --section-y: clamp(3.75rem, 7vw, 6rem);
    --section-y-tight: clamp(2.5rem, 4.5vw, 4rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, blockquote {
    color: var(--burgundy-900);
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}

/* Pulled back a step across the board: the old display sizes were set for a page
   with far more air around them than these sections actually have. */
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.24; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
p { text-wrap: pretty; }
a { color: var(--burgundy-800); text-underline-offset: .25em; }
a:hover { color: var(--burgundy-950); }

:focus-visible {
    outline: 3px solid #156bd1;
    outline-offset: 3px;
    border-radius: .2rem;
}

.skip-link {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 2000;
    padding: .75rem 1rem;
    background: var(--white);
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(100% - 2rem, 1180px); margin-inline: auto; }
.narrow { max-width: 780px; }
.centered { text-align: center; }
.muted { color: var(--muted); }
.eyebrow {
    margin: 0 0 .6rem;
    color: var(--brand-secondary);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.btn {
    min-height: 44px;
    border-radius: 999px;
    padding: .68rem 1.35rem;
    font-weight: 800;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    touch-action: manipulation;
    cursor: pointer;
}
.btn-brand { color: var(--white); background: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 8px 22px rgba(104, 31, 52, .18); }
.btn-brand:hover, .btn-brand:focus { color: var(--white); background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); box-shadow: 0 10px 28px rgba(74, 21, 39, .24); }
.btn-outline-brand { color: var(--burgundy-800); background: transparent; border: 1px solid var(--burgundy-800); }
.btn-outline-brand:hover, .btn-outline-brand:focus { color: var(--white); background: var(--burgundy-800); }
/* The companion to .btn-brand wherever the two sit side by side: same shape and
   height, visibly the lesser of the two. */
.btn-quiet { color: var(--burgundy-800); border: 1px solid var(--rule); background: var(--white); font-weight: 750; }
.btn-quiet:hover, .btn-quiet:focus { color: var(--burgundy-900); border-color: var(--burgundy-100); background: var(--blush-100); }

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    border-bottom: 1px solid #e8cdcb;
    background: rgba(252, 243, 241, .96);
    backdrop-filter: blur(16px);
}
.navbar { min-height: 78px; padding-block: 0; }
.site-header-inner { width: min(100% - clamp(1.5rem, 4vw, 3rem), 1520px); min-height: 78px; gap: clamp(.75rem, 1vw, 1.25rem); }
.header-brand-cluster { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: clamp(.85rem, 1.4vw, 1.4rem); }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--burgundy-900); text-decoration: none; }
.brand:hover { color: var(--burgundy-900); }
/* The mark is served at 3x its display box and carries no white plate, so it sits
   on the cream instead of on a pale rectangle. */
.brand-logo { display: block; width: 112px; height: auto; max-height: 66px; object-fit: contain; }
.header-verse {
    margin: 0;
    padding-block: .2rem;
    color: var(--maylas-rose-dark);
    font-family: var(--font-display);
    font-size: clamp(.88rem, 1.05vw, 1.04rem);
    font-weight: 700;
    line-height: 1.65;
    text-shadow: 0 1px 0 var(--white);
    white-space: nowrap;
}
/* A hairline between the verse and the logo, wherever the two fall in source order,
   rather than tied to whichever element happens to render second. */
.header-brand-cluster > * + * {
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--burgundy-100);
}
.navbar-collapse { min-width: 0; align-items: center; gap: clamp(.75rem, 1vw, 1.25rem); }
.navbar-nav { min-width: 0; flex-wrap: nowrap; gap: clamp(.05rem, .2vw, .25rem); }
.nav-link { position: relative; display: grid; min-height: 44px; place-items: center; padding-inline: clamp(.5rem, .55vw, .75rem) !important; color: var(--burgundy-900); font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; }
.nav-link { font-weight: 650; }
.nav-link:hover { color: var(--burgundy-800); }
.site-header .nav-link.active { color: var(--burgundy-900); background: transparent; font-weight: 800; text-decoration: none; }
.site-header .nav-link.active::after { position: absolute; inset: auto .75rem .15rem; height: 2px; border-radius: 999px; background: var(--maylas-rose); content: ""; }
.nav-cta { display: inline-flex; min-width: 116px; flex: 0 0 auto; align-items: center; justify-content: center; padding-inline: 1.5rem; white-space: nowrap; }
.navbar-toggler { width: 48px; height: 44px; flex: 0 0 48px; margin-inline-start: auto; border-color: var(--burgundy-100); }

.hero-section {
    position: relative;
    display: grid;
    min-height: clamp(420px, 56vh, 560px);
    padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(5rem, 8vw, 7rem);
    place-items: center;
    background: var(--burgundy-950);
    overflow: hidden;
}
.hero-section-fallback { background: radial-gradient(circle at 18% 20%, rgba(255, 218, 229, .32), transparent 30%), radial-gradient(circle at 82% 76%, rgba(202, 102, 130, .42), transparent 36%), linear-gradient(135deg, #3f1222, var(--burgundy-800) 58%, #a84765); }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(.98); }
/* Darkest under the copy, easing off at the shoulders, so the poster underneath
   still reads as a photograph rather than as a burgundy panel. */
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 78% at 50% 46%, rgba(53, 16, 28, .82), rgba(53, 16, 28, .62) 62%, rgba(53, 16, 28, .78)), linear-gradient(0deg, rgba(53, 16, 28, .72), rgba(53, 16, 28, .1) 62%); }
.hero-content { position: relative; z-index: 1; }
.hero-copy { width: min(100%, 780px); margin-inline: auto; text-align: center; }
.hero-copy h1 { margin: .85rem 0 .9rem; color: #fdeef1; font-size: clamp(2.15rem, 4.2vw, 3.5rem); line-height: 1.22; text-wrap: balance; }
/* Date and time read as two lines, not one run-on string, so this is a small rounded
   card the two lines stack inside rather than a single-line pill stretched taller. */
.hero-kicker { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; margin: 0; padding: .5rem 1.1rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-sm); color: var(--white); background: rgba(255, 255, 255, .08); font-size: clamp(.84rem, 1.1vw, .95rem); font-weight: 700; letter-spacing: .01em; text-align: center; }
.hero-kicker-time { display: flex; gap: .35rem; color: rgba(255, 255, 255, .82); font-weight: 650; }
.hero-lead { max-width: 58ch; margin-inline: auto; color: rgba(255, 255, 255, .9); font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0 0; }
.hero-actions .btn-lg { min-height: 52px; padding-inline: 1.9rem; font-size: 1rem; }
.btn-hero-secondary { color: var(--white); border: 1px solid rgba(255, 255, 255, .74); background: rgba(255, 255, 255, .08); }
.btn-hero-secondary:hover, .btn-hero-secondary:focus { color: var(--burgundy-950); border-color: var(--white); background: var(--white); }
.hero-countdown-shell { position: relative; z-index: 5; }
.hero-art { position: relative; min-height: 430px; }
.arch {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--blush-100);
    background: linear-gradient(145deg, var(--burgundy-700), var(--burgundy-950));
    box-shadow: var(--shadow-lg);
}
.arch-large { inset: 0 8% 0 2%; border-radius: 48% 48% 2rem 2rem; }
.arch span { font-family: "Noto Naskh Arabic", serif; font-size: clamp(4rem, 10vw, 8rem); transform: rotate(-7deg); }
.botanical { position: absolute; color: var(--green-800); font-size: 6rem; }
.botanical-one { inset-block-end: -1.5rem; inset-inline-start: -1rem; }
.botanical-two { inset-block-start: -2rem; inset-inline-end: 0; color: var(--blush-200); }

.section { padding: var(--section-y) 0; }
/* Where two story sections on the same ground meet, they split one gutter between them. */
.story-section { padding-block-end: var(--section-y-tight); }
.story-section + .story-section { padding-block-start: var(--section-y-tight); }
.about-team-section { padding-block: var(--section-y-tight); }
.story-grid { display: grid; grid-template-columns: minmax(0, 29rem) minmax(0, 33rem); gap: clamp(2.25rem, 6vw, 5rem); align-items: center; justify-content: center; }
.story-copy h2 { max-width: 18ch; margin: 0 0 1.25rem; }
/* The lead here carries a whole section on its own, so it is set as a lead and
   not as body copy shrinking away beside a tall photograph. */
.story-copy > p:not(.eyebrow) { max-width: 46ch; color: #4e4246; font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.95; text-align: justify; text-justify: inter-word; }
.text-link { display: inline-flex; min-height: 44px; gap: .45rem; align-items: center; margin-block-start: .65rem; color: var(--burgundy-800); font-weight: 800; text-decoration-thickness: 1px; }
.story-more-link { text-decoration: none; }
.story-more-link-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.story-visual { position: relative; min-height: 0; margin: 0; }
.story-visual > img, .story-logo-panel { display: block; width: 100%; height: clamp(340px, 34vw, 440px); border-radius: 42% 42% .9rem .9rem; object-fit: cover; box-shadow: var(--shadow-lg); }
.story-logo-panel { display: grid; place-items: center; background: radial-gradient(circle at 28% 24%, #ffdce6, transparent 28%), linear-gradient(145deg, #fff7f9, var(--blush-200)); }
.story-logo-panel img { width: min(44%, 210px); height: auto; padding: 1rem; border-radius: 50%; background: rgba(255, 255, 255, .86); box-shadow: 0 18px 48px rgba(104, 31, 52, .13); }
.story-visual figcaption { position: absolute; inset: auto; inset-block-end: 1.25rem; inset-inline-start: -1rem; max-width: 260px; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--brand-secondary); color: var(--white); background: rgba(53, 16, 28, .93); box-shadow: var(--shadow-sm); font-size: .9rem; font-weight: 700; }
.section-mist { background: var(--blush-100); }
.section-intro { max-width: 680px; margin: 1rem auto 0; color: var(--muted); }
.published-events-section { padding-block-start: var(--section-y-tight); }
.section-blush { background: var(--blush-100); }
.section-green { color: var(--white); background: var(--green-900); }
.section-green h2 { color: var(--white); }
.section-green p { max-width: 620px; margin: 0 auto 1.5rem; color: #d9e9e3; }
.about-cta-section { border-block: 1px solid var(--burgundy-100); background: radial-gradient(circle at 50% 0, var(--white), transparent 46%), var(--blush-100); }
.about-cta-section h2 { color: var(--burgundy-900); }
.about-cta-section p { max-width: 620px; margin: 0 auto 1.5rem; color: var(--muted); }
.section-heading { margin-block-end: clamp(1.75rem, 3vw, 2.5rem); }
.section-heading h2 { margin: 0; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.split-heading > a { font-weight: 800; }
.carousel-count { margin: 0; padding: .45rem 1.1rem; border: 1px solid var(--burgundy-100); border-radius: 999px; color: var(--burgundy-700); background: transparent; font-size: .88rem; font-weight: 750; }
.venue-link { display: inline-flex; min-height: 44px; align-items: center; gap: .35rem; color: var(--burgundy-800); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* The underline marks the venue name as a link; the arrow glyph is a direction cue, not
   text, so it stays plain rather than getting underlined along with the words. */
.venue-link span { text-decoration: none; }
.about-beliefs-section { border-block: 1px solid var(--border); }
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.about-principles article { position: relative; min-height: 260px; padding: 2rem; border: 1px solid rgba(104, 31, 52, .1); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.about-principles article > span { display: block; margin-block-end: 1.25rem; color: var(--burgundy-600); font-weight: 900; }
.about-principles h3 { margin-block-end: .75rem; }
.about-principles p { margin: 0; color: var(--muted); }
.about-principles-centered article { text-align: center; }
.about-principles-centered article > span { margin-inline: auto; }
/* A short line standing on its own: centred between two hairlines rather than
   pinned to a heavy rule down one side, which a single sentence cannot fill. */
.about-closing-quote { max-width: 720px; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem); border-block: 1px solid rgba(104, 31, 52, .18); color: var(--burgundy-900); font-family: "Noto Naskh Arabic", serif; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.85; text-align: center; text-wrap: balance; }
.published-events-carousel { padding-block-end: 4.5rem; }
.published-events-carousel .carousel-inner { min-height: 620px; }
.published-events-carousel .carousel-item { padding: .2rem; }
.published-event-card {
    display: grid;
    /* A floor, not a ceiling: a long venue or title used to be clipped by the
       card's fixed height, taking the age row with it. */
    min-height: 620px;
    grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
    grid-template-areas: "media content";
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.published-event-media { position: relative; display: grid; min-width: 0; min-height: 0; grid-area: media; place-items: center; background: var(--blush-100); overflow: hidden; }
/* One rule for every real poster, wherever it appears: the frame keeps its size for grid
   alignment, but the artwork itself is never cropped - portrait or landscape, it letterboxes
   inside the frame instead of losing any part of the design. See also .gathering-card-media
   img and .event-card-media > img, which share this exact treatment. */
.published-event-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
/* Fill the media area (the parent centres its items rather than stretching them) so the
   logo sits in the middle of the frame, with the glow behind it instead of above it. */
.event-poster-placeholder { display: grid; width: 100%; height: 100%; min-height: 100%; place-items: center; place-content: center; padding: 2rem; background: radial-gradient(circle at 50% 50%, var(--white), transparent 62%), linear-gradient(145deg, #fff7f9, var(--blush-200)); text-align: center; }
.placeholder-logo { display: block; width: min(100%, 190px); height: auto; padding: .6rem; border-radius: .75rem; background: var(--white); box-shadow: var(--shadow-sm); }
.placeholder-logo-mark { width: min(100%, 150px); border-radius: 50%; }
.event-poster-placeholder .placeholder-logo, .event-card-placeholder .placeholder-logo { width: min(100%, 190px); height: auto; min-height: 0; max-height: none; object-fit: contain; }
.published-event-content { display: flex; min-width: 0; min-height: 0; grid-area: content; flex-direction: column; padding: clamp(1.75rem, 3.5vw, 3rem); }
.published-event-heading { min-height: 150px; }
.published-event-content h3 { display: -webkit-box; margin: 0 0 .7rem; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.published-event-summary { display: -webkit-box; min-height: 3.2em; max-width: 60ch; margin: 0 0 1.5rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Four facts, one grid: the label column is a fixed width so the values line up
   down the card instead of drifting with each label's length. */
.published-event-meta { display: grid; margin: auto 0 1.5rem; }
.published-event-meta div { display: grid; min-height: 52px; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: baseline; padding-block: .7rem; border-block-end: 1px solid var(--rule); }
.published-event-meta div:first-child { padding-block-start: 0; }
.published-event-meta dt { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .01em; }
.published-event-meta dd { min-width: 0; margin: 0; color: var(--ink); font-size: .98rem; font-weight: 700; line-height: 1.6; }
/* The price is the one number a first-time visitor looks for. */
.published-event-price dd { color: var(--burgundy-800); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.published-event-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .7rem; align-items: stretch; }
.published-event-actions > * { display: inline-flex; width: 100%; min-width: 0; min-height: 54px; align-items: center; justify-content: center; text-align: center; white-space: normal; }
.published-event-cta { font-size: 1.02rem; letter-spacing: .01em; }
.registration-unavailable { padding: .55rem 1rem; border-radius: 999px; color: var(--muted); background: #f1eded; font-size: .85rem; font-weight: 800; }
.published-carousel-navigation { position: absolute; inset: auto 0 .25rem; display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.published-carousel-control { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1.5px solid var(--burgundy-800); border-radius: 50%; color: var(--burgundy-800); background: var(--white); font-size: 1.1rem; font-weight: 900; box-shadow: 0 4px 14px rgba(104, 31, 52, .12); transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.published-carousel-control:hover, .published-carousel-control:focus-visible { color: var(--white); background: var(--burgundy-800); transform: translateY(-1px); }
.published-carousel-control:active { transform: translateY(0); }
.published-carousel-indicators { position: static; display: flex; align-items: center; gap: .5rem; width: auto; margin: 0; }
.published-carousel-indicators [data-bs-target] { width: 8px; height: 8px; margin: 0; border: 0; border-radius: 50%; background-color: var(--blush-200); opacity: 1; transition: width .22s ease, background-color .22s ease; }
.published-carousel-indicators [data-bs-target]:hover { background-color: #d79cae; }
.published-carousel-indicators .active { width: 26px; border-radius: 999px; background-color: var(--burgundy-800); }

/* Free/paid marker on event media - the same pill language as sponsor tier badges. */
.price-badge { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; z-index: 2; padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .01em; box-shadow: 0 6px 16px rgba(31, 20, 23, .18); }
.price-badge-free { color: var(--green-900); background: var(--green-100); }
.price-badge-paid { color: var(--burgundy-800); background: var(--white); }
.goals-section { padding-block-end: var(--section-y-tight); }
#goals, #values { scroll-margin-top: 90px; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.goal-card { position: relative; display: grid; min-height: 300px; height: 100%; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.8rem 1.5rem 3.6rem; border: 1px solid rgba(104, 31, 52, .08); border-radius: .25rem; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }
.goal-copy { min-width: 0; }
.goal-copy h3 { margin: .15rem 0 .7rem; color: var(--ink); font-size: clamp(1.3rem, 1.65vw, 1.55rem); line-height: 1.45; }
.goal-copy p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.85; }
.goal-symbol, .value-symbol { fill: none; stroke: var(--green-800); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.goal-symbol { width: 64px; height: 64px; padding: .45rem; opacity: .34; }
.goal-number { position: absolute; inset-inline-end: 0; inset-block-end: 0; display: grid; width: 66px; height: 54px; place-items: end center; padding-block-end: .6rem; border-start-start-radius: 100%; color: var(--white); background: var(--burgundy-700); font-size: .86rem; font-weight: 900; }
.values-section { padding-block-start: var(--section-y-tight); }
.value-grid, .card-grid, .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* A fixed 3-column grid used to reserve two empty columns whenever an event published only
   one or two packages - the exact "grid rows stretching siblings" dead space this fixes.
   auto-fit collapses tracks nobody is using, and the max-width plus centering keeps a lone
   package from stretching edge to edge instead of reading as one deliberate card. */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; gap: 1.25rem; }
.reference-value-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.value-grid article { position: relative; padding: 2rem 1.35rem; border-block-start: 1px solid var(--border); }
.reference-value-grid article { min-height: 330px; height: 100%; padding: 4.65rem 1.15rem 3.2rem; border: 1px solid rgba(104, 31, 52, .08); border-radius: .25rem; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }
.reference-value-grid h3 { margin: .2rem 0 .45rem; color: var(--ink); font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.45; }
.reference-value-grid p { margin: 0; font-size: .86rem; line-height: 1.75; }
.value-number { position: absolute; inset-inline-end: 0; inset-block-end: 0; display: grid; width: 64px; height: 52px; place-items: end center; padding-block-end: .55rem; border-start-start-radius: 100%; color: var(--white); background: var(--green-800); font-size: .78rem; font-weight: 900; line-height: 1; }
.value-symbol { position: absolute; inset-block-start: 1rem; inset-inline-start: 1.25rem; width: 54px; height: 54px; opacity: .3; }
.value-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-800); font-weight: 800; }
.value-grid p, .event-card p { color: var(--muted); }
.event-card, .package-card, .contact-grid article {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.event-card a { font-weight: 800; }
.package-card { display: flex; flex-direction: column; gap: .75rem; }
.package-card strong { color: var(--green-800); font-size: 1.4rem; }
.package-card .btn { margin-block-start: auto; }
.empty-state { width: 100%; padding: clamp(2rem, 5vw, 4rem); border: 1px dashed #c9afb6; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .65); text-align: center; }
.empty-state.compact { padding: 1.5rem; }

.page-hero { position: relative; padding: clamp(3.25rem, 6vw, 5rem) 0; color: var(--white); background: radial-gradient(circle at 16% 20%, rgba(244, 223, 226, .24), transparent 28%), linear-gradient(135deg, var(--burgundy-950), var(--burgundy-800)); text-align: center; overflow: hidden; }
.page-hero h1 { margin: .25rem 0 0; }
.page-hero h1 { color: var(--white); }
.page-hero .eyebrow { color: var(--blush-200); }
.page-hero p:last-child { max-width: 720px; margin-inline: auto; color: rgba(255, 255, 255, .86); font-size: 1.15rem; }
/* The group centers as a whole (justify-content), but with two pills of different natural
   heights - a two-line date-and-time pill beside a one-line venue pill - flex's default
   stretch left the shorter pill's text pinned to the top of its stretched box instead of
   centered in it, reading as if that pill were dragging the row off to one side. Centering
   each pill's own content independently of its height fixes that regardless of which pill
   is taller. */
.forum-meta { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: .75rem; }
.forum-meta span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem 1.1rem; border-radius: 999px; color: var(--burgundy-900); background: var(--white); text-align: center; }
.forum-details { display: grid; gap: .75rem; margin: 1.5rem 0 0; }
.forum-details div { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.forum-details dt { color: var(--muted); font-size: .8rem; }
.forum-details dd { margin: .2rem 0 0; color: var(--ink); font-weight: 800; }
.event-location-map { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-block-start: .6rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--blush-50, #f6ece9); }
.event-location-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.event-location-actions { margin-block-start: .6rem; }
.event-location-actions .venue-link { font-weight: 800; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.event-gallery-section { position: relative; background: radial-gradient(circle at 12% 16%, rgba(244, 223, 226, .7), transparent 30%), var(--white); overflow: hidden; }
.event-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-block-end: clamp(1.5rem, 4vw, 2.5rem); }
.event-gallery-heading h2 { margin: 0; }
.event-gallery-featured, .event-gallery-more { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
.event-gallery-featured--single { width: min(100%, 980px); margin-inline: auto; }
.event-gallery-featured--single .event-gallery-item { aspect-ratio: 16 / 9; }
.event-gallery-featured--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-gallery-featured--pair .event-gallery-item { aspect-ratio: 4 / 3; }
.event-gallery-featured--trio { min-height: 560px; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.event-gallery-featured--trio .event-gallery-item:first-child { grid-row: 1 / 3; }
.event-gallery-item { position: relative; min-width: 0; min-height: 0; margin: 0; border: 1px solid var(--border); border-radius: clamp(1rem, 2vw, 1.5rem); background: radial-gradient(circle at 50% 45%, var(--white), var(--blush-100)); box-shadow: var(--shadow-sm); overflow: hidden; }
.event-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.event-gallery-disclosure { margin-block-start: clamp(1.25rem, 3vw, 2rem); }
.event-gallery-toggle { display: flex; min-width: min(100%, 250px); min-height: 48px; align-items: center; justify-content: center; gap: .65rem; margin-inline: auto; list-style: none; cursor: pointer; }
.event-gallery-toggle::-webkit-details-marker { display: none; }
.event-gallery-toggle::after { content: "+"; font-size: 1.4rem; font-weight: 500; line-height: 1; }
.event-gallery-toggle__less { display: none; }
.event-gallery-disclosure[open] .event-gallery-toggle::after { content: "−"; }
.event-gallery-disclosure[open] .event-gallery-toggle__more { display: none; }
.event-gallery-disclosure[open] .event-gallery-toggle__less { display: inline; }
.event-gallery-more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: clamp(1.25rem, 3vw, 2rem); }
.event-gallery-more .event-gallery-item { aspect-ratio: 4 / 3; }
.prose { font-size: 1.08rem; }
.prose h2:not(:first-child) { margin-block-start: 2.25rem; }
.prose p { color: #4e4246; text-align: justify; }
.prose ul { display: grid; gap: .5rem; margin: 1rem 0; padding-inline-start: 1.4rem; color: #4e4246; }
.prose ul li::marker { color: var(--burgundy-700); }
/* The shared event-details partial (Views/Shared/_EventDetailsContent.cshtml) groups its
   sections in one column - on the full event page inside .prose, and again inside the
   registration details drawer - so the rhythm between them lives here once instead of being
   redefined by each caller. */
.event-details-block + .event-details-block { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.event-details-block > .eyebrow { margin-block-end: .35rem; }

.event-details-modal .modal-content { border: 0; border-radius: var(--radius-lg); }
.event-details-modal .modal-header { border-block-end: 1px solid var(--rule); }
.event-details-modal .modal-footer { justify-content: flex-start; border-block-start: 1px solid var(--rule); }
.event-details-loading { display: grid; gap: .75rem; padding: 3rem 1rem; place-items: center; color: var(--muted); text-align: center; }
.quote-card { position: sticky; inset-block-start: 110px; padding: 2rem; border-radius: var(--radius-lg); background: var(--blush-100); }
/* Not sticky: this is the "حالة التسجيل" registration box on the event-details page. It stays
   in normal document flow on every breakpoint - no position: sticky/fixed, so it never follows
   the viewport while scrolling. */
.availability-card { padding: 2rem; border-radius: var(--radius-lg); background: var(--blush-100); }
.quote-card blockquote { font-size: 2rem; }
.availability-card h3 { font-size: 1.8rem; }
.timeline { max-width: 820px; margin-inline: auto; }
.timeline article { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: 1.5rem 0; border-block-end: 1px solid #dec8ce; }
.timeline time { color: var(--burgundy-800); font-weight: 900; direction: ltr; text-align: end; }
.timeline h3, .timeline p { margin: 0; }
.coming-soon, .confirmation-page, .auth-page { display: grid; min-height: 70vh; padding: 5rem 0; place-items: center; text-align: center; background: radial-gradient(circle, var(--blush-100), var(--cream) 65%); }
.coming-mark, .confirmation-icon { display: grid; width: 86px; height: 86px; margin: 0 auto 1.25rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--burgundy-800); font-family: "Noto Naskh Arabic", serif; font-size: 2.6rem; }
.coming-logo { display: grid; width: 166px; min-height: 104px; margin: 0 auto 1.25rem; place-items: center; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.coming-logo img { display: block; width: 126px; height: auto; }

.registration-container { max-width: 980px; }
.registration-form { display: grid; gap: 1.25rem; }
.form-progress { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 1rem; padding: 0; list-style: none; }
.form-progress li { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .85rem; min-width: 0; }
.form-progress li::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.form-progress li:last-child::after { display: none; }
.form-progress .step-number { display: inline-grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; color: var(--burgundy-800); background: var(--blush-200); line-height: 1; }
.form-progress .active { color: var(--burgundy-900); font-weight: 800; }
.form-progress .active .step-number { color: var(--white); background: var(--burgundy-800); }
.form-progress button { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .6rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: inherit; background: transparent; font: inherit; cursor: pointer; }
.form-progress button:hover { background: var(--blush-100); }
.form-progress .active button { border-color: var(--burgundy-800); background: var(--blush-100); }
.form-progress .complete .step-number { color: var(--green-900); background: var(--green-100); border: 2px solid var(--green-800); }
.form-progress .complete::after { background: var(--green-800); }
.wizard-header { scroll-margin-top: 110px; }
.wizard-status { margin: 0 0 .75rem; color: var(--burgundy-900); font-weight: 800; }
[data-wizard-step] { scroll-margin-top: 110px; }
.wizard-actions { display: flex; gap: .75rem; justify-content: space-between; }
.wizard-actions [data-wizard-next] { margin-inline-start: auto; }
.wizard-actions .btn { min-width: 140px; }
.registration-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; padding: 1.25rem; margin-block-end: 1.5rem; background: var(--blush-100); border-radius: var(--radius-sm); }
.registration-review > div { min-width: 0; padding-block-end: .6rem; border-block-end: 1px solid var(--border); }
.registration-review dt { color: var(--muted); font-size: .85rem; }
.registration-review dd { margin: .25rem 0 0; color: var(--ink); font-weight: 700; }
/* Payment plan is a choice between two mutually exclusive options, not a checkbox someone
   opts into - real radios, the same selected-card pattern .package-choice already uses (a
   proven, keyboard-accessible component), just sized to what two lines of text actually
   need instead of borrowing the taller package-card min-height. */
.payment-plan-choice { margin-block-end: 1.25rem; border: 0; padding: 0; }
.payment-plan-choice > legend { padding: 0; margin-block-end: .6rem; }
.payment-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.payment-plan-card { position: relative; cursor: pointer; }
.payment-plan-card > input { position: absolute; opacity: 0; }
.payment-plan-card-body { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.1rem; padding-inline-end: 2.5rem; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.payment-plan-card-body strong { color: var(--burgundy-900); font-family: "Noto Naskh Arabic", serif; font-size: 1.05rem; }
.payment-plan-amount { color: var(--green-900); font-weight: 850; font-variant-numeric: tabular-nums; }
.payment-plan-dates { color: var(--muted); font-size: .78rem; }
.payment-plan-card input:checked + .payment-plan-card-body { border-color: var(--burgundy-800); background: var(--blush-100); box-shadow: 0 0 0 3px rgba(104, 31, 52, .08); }
.payment-plan-card input:checked + .payment-plan-card-body .choice-indicator { border: 6px solid var(--burgundy-800); background: var(--white); }
.payment-plan-card input:focus-visible + .payment-plan-card-body { outline: 3px solid #156bd1; outline-offset: 3px; }
/* The read-only fallback for a paid gathering whose event does not offer instalments at all -
   states the plan as a fact, not a second disabled option sitting beside a working one. */
.payment-plan-static { margin-block-end: 1.25rem; }
.payment-plan-static .eyebrow { margin-block-end: .35rem; }
.payment-plan-static-line { margin: 0; color: var(--ink); }
.payment-plan-static-line strong { color: var(--burgundy-900); }
.payment-plan-static-line span { margin-inline-start: .35rem; color: var(--green-900); font-weight: 850; font-variant-numeric: tabular-nums; }
.installment-choice-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1rem 1.25rem; padding: 1rem 1.2rem; border: 1px solid var(--burgundy-100); border-radius: var(--radius-md); background: #fffafb; }
.installment-choice-details > span { display: grid; gap: .12rem; padding-inline: 1rem; }
.installment-choice-details > span + span { border-inline-start: 1px solid var(--burgundy-100); }
.installment-choice-details strong { color: var(--burgundy-900); font-size: .9rem; }
.installment-choice-details small { color: var(--muted); font-size: .76rem; }
/* Nothing has happened yet at this point in the form - a bright success-green box here would
   claim an outcome before she has even pressed submit. Calm and informational instead. */
.after-submit-note { display: flex; gap: .7rem; align-items: flex-start; margin-block-end: 1.25rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--cream); }
.after-submit-note i { flex: 0 0 auto; margin-block-start: .2rem; color: var(--muted); }
.after-submit-note strong { display: block; color: var(--burgundy-900); font-size: .9rem; }
.after-submit-note p { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.form-section { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.form-section legend { float: none; width: auto; margin: 0 0 .35rem; font-family: "Noto Naskh Arabic", serif; color: var(--burgundy-900); font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.section-help { color: var(--muted); }
.package-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-block-start: 1.25rem; }
.single-package-summary { grid-column: 1 / -1; padding: 1.5rem; border: 2px solid var(--green-800); border-radius: var(--radius-md); background: var(--green-100); }
.single-package-summary h2 { margin: 0 0 .35rem; font-size: 1.4rem; }
.single-package-summary p:not(.eyebrow) { color: var(--muted); }
.single-package-summary > strong { display: block; color: var(--green-900); font-size: 1.15rem; }
.package-choice { position: relative; cursor: pointer; }
.package-choice > input { position: absolute; opacity: 0; }
.package-choice-body { display: flex; min-height: 190px; height: 100%; flex-direction: column; gap: .4rem; padding: 1.4rem; border: 2px solid var(--border); border-radius: var(--radius-md); transition: border-color .2s, transform .2s, box-shadow .2s; }
.package-choice-body strong { color: var(--burgundy-900); font-family: "Noto Naskh Arabic", serif; font-size: 1.5rem; }
.choice-indicator { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; width: 22px; height: 22px; border: 2px solid #a88891; border-radius: 50%; }
.package-choice input:checked + .package-choice-body { border-color: var(--burgundy-800); background: var(--blush-100); box-shadow: 0 0 0 3px rgba(104, 31, 52, .08); }
.package-choice input:checked + .package-choice-body .choice-indicator { border: 6px solid var(--burgundy-800); background: var(--white); }
.package-choice input:focus-visible + .package-choice-body { outline: 3px solid #156bd1; outline-offset: 3px; }
/* Adding another gathering to the same booking. A square marker, not the round one the
   package choices use: these are independent additions, not one pick from a set. */
/* The gathering picker. Every gathering is one card, and the card is the control - there
   is no lead gathering and no second-class "extras" row. */
.gathering-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; gap: 1.15rem; margin-block: 1.25rem; }
/* min-height, not the grid row, sets each card's floor - a short card no longer stretches
   to match a taller sibling's title/meta. The floor still leaves a little slack under the
   price for a future detail row (e.g. seats left, add-ons) without the card growing today. */
.gathering-card { position: relative; display: flex; min-width: 0; min-height: 23rem; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 30px rgba(65, 20, 36, .06); transition: border-color .2s, box-shadow .2s; }
.gathering-card-choice { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; cursor: pointer; }
.gathering-card-choice > input { position: absolute; opacity: 0; }
/* The photograph a first-time visitor already trusts from the home page, shrunk to a
   grid tile: same media block, price pill, and placeholder mark - so a card picked from a
   list still reads as the same gathering, not a plainer stand-in for it. */
.gathering-card-media { position: relative; display: grid; width: 100%; aspect-ratio: 16 / 10; min-width: 0; min-height: 0; place-items: center; background: var(--blush-100); color: inherit; text-decoration: none; overflow: hidden; }
.gathering-card-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.gathering-media-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: radial-gradient(circle at 50% 50%, var(--white), transparent 62%), linear-gradient(145deg, #fff7f9, var(--blush-200)); }
.gathering-media-placeholder .placeholder-logo { width: min(55%, 84px); height: auto; padding: .35rem; border-radius: .6rem; background: var(--white); box-shadow: var(--shadow-sm); }
.gathering-card-media .choice-indicator { inset-inline-start: .75rem; inset-inline-end: auto; inset-block-start: .75rem; border-radius: .4rem; background: rgba(255, 255, 255, .82); box-shadow: 0 2px 8px rgba(31, 20, 23, .18); }
.gathering-card-body { display: flex; height: 100%; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.15rem; border: 0; background: linear-gradient(145deg, #fff, #fffafb); transition: background .2s; }
.gathering-card-body strong { color: var(--burgundy-900); font-family: "Noto Naskh Arabic", serif; font-size: 1.32rem; line-height: 1.35; }
.gathering-meta { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--muted); font-size: .85rem; }
.gathering-price { margin-block-start: auto; padding-block-start: .15rem; color: var(--green-900); font-weight: 850; }
.gathering-price em { display: inline-block; margin-inline-start: .4rem; padding: .05rem .45rem; border-radius: 999px; background: var(--blush-100); color: var(--burgundy-800); font-size: .72rem; font-style: normal; }
.gathering-card:has(input:checked) { border-color: var(--burgundy-800); box-shadow: 0 12px 34px rgba(104, 31, 52, .12); }
.gathering-card-choice:has(input:checked) .gathering-card-body { background: var(--blush-100); }
.gathering-card-choice:has(input:checked) .choice-indicator { border-color: var(--burgundy-800); background: var(--burgundy-800); }
.gathering-card-choice:has(input:focus-visible) { outline: 3px solid #156bd1; outline-offset: 3px; }
/* A gathering with its own days or its own prices cannot be booked from this list. */
.gathering-card-external { border-style: dashed; }
.gathering-card-external .gathering-card-body { padding-inline: 1.2rem; }
.gathering-card-external .gathering-card-body > strong { color: var(--burgundy-900); font-family: "Noto Naskh Arabic", serif; font-size: 1.2rem; }
.gathering-own-form { align-self: flex-start; margin-block-start: .45rem; color: var(--burgundy-800); font-size: .82rem; font-weight: 800; }
/* Replaces the old "عن الملتقى" per-card disclosure: one press opens the shared event-details
   modal (see event-details-modal, registration-event-details.js) instead of expanding a tiny,
   information-poor summary inline - and, inside "إضافة ملتقى آخر؟", no longer nests a second
   independent disclosure whose open/close state had nothing to do with the outer one. */
.gathering-details-trigger { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.2rem; border: 0; border-block-start: 1px solid var(--border); border-radius: 0; color: var(--burgundy-800); background: #fff; font-size: .84rem; font-weight: 800; cursor: pointer; }
.gathering-details-trigger:hover, .gathering-details-trigger:focus-visible { background: #fff8f9; }
.gathering-details-trigger::after { content: "←"; font-size: .9rem; }

/* The gathering she clicked into keeps its own single-column grid so the one card reads as
   a primary choice rather than stretching edge-to-edge; every other gathering waits behind
   the "إضافة ملتقى آخر؟" toggle below instead of competing with it. */
.gathering-grid-primary { grid-template-columns: minmax(0, 480px); justify-content: center; }
/* The same soft gradient the card media placeholders use, not the flat dashed-border cream
   box this used to be - it's an invitation to add another gathering, so it should read as
   polished as the cards it sits beside, not like an unfinished placeholder. */
.gathering-more-toggle { margin-block: 1.25rem; overflow: hidden; border: 1px solid var(--blush-200); border-radius: var(--radius-md); background: linear-gradient(145deg, #fff7f9, var(--blush-100)); }
.gathering-more-toggle > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; color: var(--burgundy-800); font-weight: 800; font-size: .95rem; list-style: none; cursor: pointer; }
.gathering-more-toggle > summary::-webkit-details-marker { display: none; }
.gathering-more-toggle > summary::after { content: "+"; color: var(--burgundy-800); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.gathering-more-toggle[open] > summary { border-block-end: 1px solid var(--blush-200); }
.gathering-more-toggle[open] > summary::after { transform: rotate(45deg); }
.gathering-more-toggle > .gathering-grid { padding: 1rem 1.25rem 1.25rem; }
/* The same gradient family as the cards above it, not the pastel-green pill it used to be -
   a running total belongs to the same polished vibe as everything it's totalling. */
.selection-total { padding: .85rem 1.1rem; border: 1px solid var(--blush-200); border-inline-start: 5px solid var(--burgundy-700); border-radius: var(--radius-sm); background: linear-gradient(145deg, #fff7f9, var(--blush-100)); color: var(--burgundy-900); font-weight: 800; font-variant-numeric: tabular-nums; }
.anchor-options { margin-block-start: 1.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.anchor-options h3 { margin: 0 0 1rem; font-size: 1.25rem; }

/* The hero lists what she has chosen, filling in as she picks. */
.registration-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.registration-picks li { padding: .35rem .9rem; border-radius: 999px; background: var(--blush-100); color: var(--burgundy-900); font-weight: 800; }

.package-original-price { margin-inline-start: .45rem; color: var(--muted); font-weight: 500; }
.package-discount-note { color: var(--burgundy-800); font-weight: 700; }
.early-registration-offer { display: flex; align-items: flex-start; gap: 1rem; margin-block: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-inline-start: 5px solid var(--burgundy-700); border-radius: var(--radius-sm); background: var(--blush-100); }
.early-registration-offer__icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--burgundy-800); color: var(--white); }
.early-registration-offer p { margin: .25rem 0 0; color: var(--muted); }
/* Without this, a field grid-item stretches to match its tallest row sibling, and then
   its own internal auto rows (label/input/small) stretch again to fill that borrowed
   height - the input itself ends up as an oversized empty box. Each field keeps its own
   natural height instead. */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 1rem; }
.registration-country-field { grid-column: 2; grid-row: 2; }
.registration-mobile-field { grid-column: 1; grid-row: 2; }
.registration-email-field { grid-column: 1 / -1; grid-row: 3; }
.registration-mobile-input { min-width: 0; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.phone-entry { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: .5rem; align-items: stretch; }
.calling-code-box { display: grid; min-height: 48px; place-items: center; padding-inline: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--cream); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Same fixed-prefix pattern as the phone field above, so the reference-number box reads as
   part of the same input family instead of a one-off. */
.reference-entry { display: grid; grid-template-columns: 58px minmax(0, 96px); gap: .5rem; align-items: stretch; }
.reference-prefix-box { display: grid; min-height: 48px; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--cream); font-weight: 800; font-variant-numeric: tabular-nums; }
.registration-country-field, .registration-mobile-field, .lookup-country-field, .lookup-mobile-field { align-self: start; }
.field { display: grid; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--ink); font-weight: 800; }
.field small { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.form-control, .form-select { min-height: 48px; border-color: #cfbec3; border-radius: var(--radius-sm); background-color: #fffcfa; }
.form-control:focus, .form-select:focus { border-color: var(--burgundy-700); box-shadow: 0 0 0 .25rem rgba(104, 31, 52, .12); }
.field-validation { display: block; min-height: 1.3rem; color: #a20c28; font-size: .86rem; }
.validation-summary { margin-block-end: 1rem; padding: 1rem; border-inline-start: 4px solid #a20c28; border-radius: .4rem; color: #7d0b20; background: #fff0f3; }
.validation-summary:empty, .field-validation:empty { display: none; }
.session-options { display: grid; gap: .75rem; margin-block-end: 1.25rem; }
.session-choice, .check-card { display: flex; min-height: 64px; gap: .8rem; align-items: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.session-choice input, .check-card input, .privacy-consent input { width: 22px; height: 22px; flex: 0 0 auto; margin-block-start: .15rem; accent-color: var(--burgundy-800); }
.session-choice strong, .session-choice small, .check-card strong, .check-card small { display: block; }
.session-choice small, .check-card small { color: var(--muted); }
.yes-no-choice { display: flex; gap: .75rem; }
.yes-no-choice .check-card { flex: 1 1 0; min-height: auto; align-items: center; justify-content: center; }
.yes-no-choice .check-card:has(input:checked) { border-color: var(--burgundy-800); background: var(--blush-100); }
.conditional-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.conditional-grid .field { grid-column: 1 / -1; }
.conditional-grid-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.privacy-consent label { display: flex; gap: .75rem; align-items: start; cursor: pointer; }
.security-note { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); background: var(--cream); font-size: .85rem; }
/* Bootstrap's own alert-success/warning/danger default to the generic SaaS
   palette (bright candy green/yellow/red) that clashes with the Maylas identity;
   these keep the same roles but in the site's own muted tones. */
.alert { padding: .9rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .92rem; line-height: 1.75; }
.alert-success { color: var(--green-900); background: var(--green-100); border-color: rgba(36, 88, 75, .18); }
.alert-warning { color: #6b4a12; background: #fdf3e3; border-color: rgba(146, 84, 20, .2); }
.alert-danger { color: #a20c28; background: var(--blush-100); border-color: rgba(162, 12, 40, .18); }
.submit-registration { min-width: 220px; }

.confirmation-page > .container { padding: 2rem; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
/* The reference number used to be one row among eight in the details grid below - easy to
   miss on exactly the page where losing it matters most. It gets its own unmissable card
   instead, with the "save this" reminder sitting right beside it rather than a screen away. */
.confirmation-reference-card { margin: 1.75rem 0; padding: 1.5rem; border: 2px solid var(--burgundy-200, var(--border)); border-radius: var(--radius-lg); background: var(--blush-100); text-align: center; }
.confirmation-reference-card .eyebrow { margin: 0 0 .35rem; }
.confirmation-reference-note { max-width: 46ch; margin: .5rem auto 0; color: var(--burgundy-900); font-size: .92rem; line-height: 1.7; }
.confirmation-details { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2rem 0; text-align: start; }
.confirmation-details div { padding: 1rem; border-block-end: 1px solid var(--border); }
.confirmation-details dt { color: var(--muted); font-size: .85rem; }
.confirmation-details dd { margin: .2rem 0 0; color: var(--ink); font-weight: 800; }
.reference-number { color: var(--burgundy-800) !important; direction: ltr; font-family: "Noto Naskh Arabic", serif; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 900; letter-spacing: .02em; }
.status-pill { display: inline-flex; padding: .3rem .7rem; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .85rem; }
.next-steps { padding: 1.25rem; border-radius: var(--radius-md); background: var(--blush-100); text-align: start; }
.next-steps h2 { font-size: 1.5rem; }
.privacy-reminder { color: var(--muted); font-size: .85rem; }
.confirmation-followup { max-width: 46ch; margin: 1.75rem auto 0; color: var(--muted); font-size: .92rem; line-height: 1.85; }
.confirmation-followup-link { display: inline-block; margin-inline-start: .2rem; color: var(--burgundy-800); font-weight: 800; text-decoration: underline; text-underline-offset: .25em; }
.confirmation-followup-link:hover { color: var(--burgundy-950); }
.auth-card { width: min(100% - 2rem, 480px); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); text-align: start; }
.auth-card form { display: grid; gap: 1rem; margin: 1.5rem 0; }
.auth-card h1 { margin: .15rem 0 .6rem; font-size: clamp(2.35rem, 6vw, 4rem); }
.auth-card p { margin-block-end: 0; }
.password-change-page { min-height: calc(100vh - 84px); padding-block: clamp(2.5rem, 7vw, 5rem); text-align: start; }
.password-change-card { width: min(100% - 2rem, 620px); }
.auth-card-header { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1rem; align-items: start; }
.auth-card-header > div { min-width: 0; }
.auth-card-logo { display: grid; width: 104px; min-height: 64px; place-items: center; padding: .35rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--white); box-shadow: var(--shadow-sm); }
.auth-card-logo img { display: block; width: 92px; height: auto; }
.auth-security-note { display: grid; gap: .2rem; margin-block-start: 1.5rem; padding: 1rem 1.1rem; border-inline-start: 4px solid var(--green-800); border-radius: var(--radius-sm); color: var(--green-900); background: var(--green-100); }
.auth-security-note span { font-size: .9rem; }
.password-form { margin-block-end: 0 !important; }
.password-input-group { position: relative; }
.password-input-group .form-control { width: 100%; padding-right: .75rem; padding-left: 5.25rem; }
.password-toggle { position: absolute; inset-block: 2px; inset-inline-end: 2px; min-width: 4.75rem; min-height: 44px; border: 0; border-radius: calc(var(--radius-sm) - 2px); color: var(--burgundy-800); background: var(--blush-100); font-weight: 800; }
.password-toggle:hover { background: var(--blush-200); }
.password-toggle:focus-visible { z-index: 2; }
.password-rules { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.password-rules li { padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: #fffcfa; font-size: .78rem; }

.site-footer { padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.25rem; color: #d8cbd0; background: var(--burgundy-950); }
.footer-grid { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 2rem 3.5rem; align-items: center; }
.brand-footer, .brand-footer:hover { color: var(--white); }
.brand-logo-footer { padding: .3rem; border-radius: .55rem; background: var(--white); }
.footer-intro { max-width: 430px; margin: 1.15rem 0 0; color: #cdbdc2; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.35rem; }
.site-footer a { color: var(--white); }
.footer-copyright { grid-column: 1 / -1; margin: 1rem 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid rgba(255, 255, 255, .1); color: #bdaab0; font-size: .8rem; }

[hidden] { display: none !important; }

@media (max-width: 1199.98px) {
    .reference-value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reference-value-grid article { min-height: 300px; }
}

@media (max-width: 991.98px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-copy { max-width: 720px; }
    .story-visual { width: min(100%, 640px); margin-inline: auto; }
    .content-grid { grid-template-columns: 1fr; }
    .about-principles { grid-template-columns: 1fr; }
    .event-gallery-featured--trio { min-height: 470px; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); }
    .event-gallery-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-card, .availability-card { position: static; }
    .published-events-carousel .carousel-inner { min-height: 600px; }
    .published-event-card { min-height: 600px; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); }
    .published-event-heading { min-height: 140px; }
    .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .goal-card { min-height: 275px; }
    .value-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
    .reference-value-grid article { min-height: 280px; }
    .goal-grid > .goal-card:last-child:nth-child(odd), .reference-value-grid > article:last-child:nth-child(odd) { width: calc((100% - 1rem) / 2); grid-column: 1 / -1; justify-self: center; }
    .footer-grid { grid-template-columns: 1fr auto; }
    .footer-brand-column { grid-column: 1 / -1; }
}

@media (max-width: 1399.98px) {
    .navbar-collapse { gap: 0; padding: 1rem 0 1.25rem; border-block-start: 1px solid var(--border); background: var(--white); }
    .navbar-nav { align-items: stretch !important; }
    .navbar-collapse .btn { width: 100%; margin-block-start: .5rem; }
    .site-header .nav-link.active::after { inset-inline: 0; }
}

@media (max-width: 767.98px) {
    .container { width: min(100% - 1.25rem, 1180px); }
    .site-header .brand small { display: none; }
    .navbar, .site-header-inner { min-height: 70px; }
    .header-brand-cluster { gap: .65rem; }
    .header-brand-cluster > * + * { padding-inline-start: .65rem; }
    .header-verse { max-width: 160px; font-size: .72rem; line-height: 1.5; white-space: normal; text-align: center; text-wrap: balance; }
    .hero-section { min-height: 380px; padding: 3rem 0 5.5rem; }
    .hero-copy h1 { margin-block-start: .85rem; font-size: clamp(1.95rem, 8.5vw, 2.75rem); }
    .hero-lead { font-size: .98rem; line-height: 1.8; }
    .hero-actions .btn-lg { min-height: 50px; }
    .story-visual { min-height: 0; }
    .story-visual > img, .story-logo-panel { height: 340px; }
    .story-visual figcaption { inset-inline-start: .75rem; inset-block-end: .75rem; }
    .split-heading { align-items: start; flex-direction: column; }
    .event-gallery-heading { align-items: start; flex-direction: column; gap: 1rem; }
    .event-gallery-featured--pair, .event-gallery-featured--trio, .event-gallery-more { min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; }
    .event-gallery-featured--single .event-gallery-item, .event-gallery-featured--pair .event-gallery-item, .event-gallery-featured--trio .event-gallery-item, .event-gallery-featured--trio .event-gallery-item:first-child, .event-gallery-more .event-gallery-item { grid-row: auto; aspect-ratio: 4 / 3; }
    .published-events-carousel .carousel-inner { min-height: 0; }
    .published-event-card { min-height: 0; grid-template-columns: 1fr; grid-template-areas: "media" "content"; }
    .published-event-media { min-height: 0; aspect-ratio: 16 / 10; }
    .published-event-media img, .event-poster-placeholder { min-height: 0; max-height: none; }
    .published-event-content { padding: 1.5rem; }
    .published-event-heading { min-height: 0; }
    .published-event-meta div { min-height: 0; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; }
    .published-event-actions { grid-template-columns: 1fr; }
    .goal-grid { grid-template-columns: 1fr; }
    .goal-grid > .goal-card:last-child:nth-child(odd) { width: 100%; grid-column: auto; }
    .goal-card { min-height: 220px; grid-template-columns: 56px minmax(0, 1fr); padding: 1.6rem 1.35rem 3.5rem; }
    .goal-symbol { width: 54px; height: 54px; }
    .value-grid, .card-grid, .contact-grid, .package-choice-grid, .payment-plan-grid, .form-grid, .conditional-grid { grid-template-columns: 1fr; }
    .registration-country-field, .registration-mobile-field, .registration-email-field { grid-column: auto; grid-row: auto; }
    .reference-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field.full, .conditional-grid .field { grid-column: auto; }
    .form-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
    .form-progress li { justify-content: center; font-size: .75rem; }
    .form-progress button { width: 100%; flex-direction: column; gap: .35rem; padding: .5rem .1rem; }
    .form-progress li::after { display: none; }
    .form-progress .step-number { font-size: .85rem; }
    .registration-review { grid-template-columns: 1fr; }
    .installment-choice-details { grid-template-columns: 1fr; gap: .75rem; }
    .installment-choice-details > span { padding-inline: 0; }
    .installment-choice-details > span + span { padding-block-start: .75rem; border-inline-start: 0; border-block-start: 1px solid var(--burgundy-100); }
    .wizard-actions .btn { min-width: 0; flex: 1; }
    .confirmation-details { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-brand-column, .footer-copyright { grid-column: auto; }
    .footer-intro { margin-inline: auto; }
    .brand-footer, .site-footer nav { justify-content: center; }
    .auth-card-header { grid-template-columns: 88px minmax(0, 1fr); }
    .auth-card-logo { width: 88px; min-height: 54px; }
    .auth-card-logo img { width: 78px; }
}

@media (max-width: 399px) {
    .brand-logo { width: 96px; max-height: 58px; }
    .header-verse { max-width: 132px; font-size: .66rem; }
    .hero-actions .btn { width: 100%; }
    .hero-kicker { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared event cards and the portfolio */
.hero-copy, .published-event-content, .card-grid > *, .package-grid > *, .field, .form-section { min-width: 0; }
main { overflow-wrap: anywhere; }
img { max-width: 100%; }
.portfolio-links, .event-card-actions { gap: .75rem; }
.portfolio-links { display: flex; flex-wrap: wrap; }
.portfolio-links { justify-content: center; margin-block-start: 1.5rem; }
.portfolio-links .active { color: var(--white); background: var(--burgundy-800); border-color: var(--burgundy-800); box-shadow: 0 0 0 3px var(--blush-200); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
#upcoming-events, #past-events { scroll-margin-top: 100px; }
#published-events-title { scroll-margin-top: 100px; }
/* Brought up to the same visual language as the homepage's featured card: a fixed-width
   label column down the meta list, the price picked out in weight and colour, and a
   quiet lift on hover - the "agency" polish the plain version was missing. */
.portfolio-event-card { padding: 0; overflow: hidden; border-color: var(--rule); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.portfolio-event-card:hover { border-color: var(--burgundy-100); box-shadow: 0 16px 36px rgba(65, 20, 36, .12); transform: translateY(-3px); }
.event-card-media { position: relative; display: grid; width: 100%; min-height: 0; aspect-ratio: 16 / 10; flex: 0 0 auto; place-items: center; overflow: hidden; background: var(--blush-100); }
.event-card-media > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; transition: transform .35s ease; }
.portfolio-event-card:hover .event-card-media > img { transform: scale(1.04); }
.event-card-placeholder { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; padding: 1.5rem; background: radial-gradient(ellipse at center, var(--white), var(--blush-100)); }
.event-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.event-card-body h3 { display: -webkit-box; margin-block-end: .5rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.event-card-body h3 a { text-decoration: none; }
.event-card-summary { display: -webkit-box; min-height: 2.9em; margin: 0 0 1.1rem; color: var(--muted); font-size: .95rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Same fixed-label-column pattern as the homepage card, scaled down for a card a third
   the width. */
.event-card-meta { display: grid; margin: 0 0 1.25rem; }
.event-card-meta div { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: .7rem; align-items: baseline; padding-block: .55rem; border-block-end: 1px solid var(--rule); }
.event-card-meta div:first-child { padding-block-start: 0; }
.event-card-meta dt { color: var(--muted); font-size: .76rem; font-weight: 700; }
.event-card-meta dd { min-width: 0; margin: 0; color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.55; }
.event-card-meta-price dd { color: var(--burgundy-800); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.event-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-block-start: auto; padding-block-start: 0; gap: .6rem; }
.event-card-actions .btn { display: inline-flex; min-width: 0; height: 56px; align-items: center; justify-content: center; padding: .65rem .8rem; font-size: .92rem; line-height: 1.3; text-align: center; white-space: normal; }
.event-card-actions .btn:only-child { grid-column: 1 / -1; }
.program-day + .program-day { margin-block-start: 2.5rem; }
.program-day > h3 { padding-block-end: .75rem; border-block-end: 2px solid var(--burgundy-800); }
.program-day h4 { font-size: 1.2rem; font-weight: 800; color: var(--burgundy-900); }
.program-time { display: grid; align-content: start; gap: .25rem; }
.program-time span { color: var(--muted); font-size: .85rem; }
.published-carousel-indicators { flex-wrap: wrap; }
.published-carousel-indicators [data-bs-target] { min-width: 32px; min-height: 24px; }
.form-control, .form-select { max-width: 100%; }
.validation-summary-valid { display: none; }
@media (max-width: 575.98px) {
    .reference-value-grid { grid-template-columns: 1fr; }
    .reference-value-grid > article:last-child:nth-child(odd) { width: 100%; grid-column: auto; }
    .reference-value-grid article { min-height: 240px; padding: 4.4rem 1.25rem 3.15rem; }
    .timeline article { grid-template-columns: 1fr; gap: .5rem; }
    .program-time { display: flex; gap: .75rem; }
    .event-card-actions { grid-template-columns: 1fr; }
    .event-card-actions .btn { width: 100%; height: 52px; }
    .portfolio-links .btn { width: 100%; }
    .hero-facts { flex-wrap: wrap; }
    .published-event-media, .published-event-media img, .event-poster-placeholder { min-height: 220px; max-height: 360px; }
    .site-header .container { min-width: 0; }
    .brand { min-width: 0; }
}

.booking-day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.booking-day-option { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--brand, #681f34); border-radius: 16px; color: var(--brand, #681f34); text-decoration: none; background: #fff; }
a.booking-day-option:hover { background: #fff4f6; }
.booking-day-option.unavailable { color: #666; border-color: #ddd; background: #f7f7f7; }
.booking-days { margin-block-end: 2rem; }
.booking-day-check { flex-direction: row; align-items: flex-start; cursor: pointer; text-align: start; }
.booking-day-check input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-block-start: .25rem; accent-color: var(--brand, #681f34); }
.booking-day-check span { display: grid; gap: .5rem; }
.booking-day-check:has(input:checked) { background: var(--blush-100); border-width: 2px; padding: calc(1.25rem - 1px); }
.booking-day-check:focus-within { outline: 3px solid var(--brand, #681f34); outline-offset: 3px; }
.booking-day-check:has(input:disabled) { cursor: not-allowed; }
.package-choice.unavailable { opacity: .65; cursor: not-allowed; }
.package-choice [data-package-unavailable] { color: #8b1934; font-weight: 700; }

/* Registration payment lookup */
.registration-lookup-page { min-height: 70vh; background: linear-gradient(180deg, var(--cream), var(--blush-100)); }
.registration-lookup-page h1 { margin-block: 0; font-size: clamp(2.2rem, 6vw, 4rem); }
.lookup-form-card, .lookup-result-card, .lookup-empty { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.lookup-form-card { padding: clamp(1.25rem, 4vw, 2.25rem); }
.lookup-form-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lookup-country-field { grid-column: 2; grid-row: 2; }
.lookup-mobile-field { grid-column: 1; grid-row: 2; }
.lookup-number-input { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.lookup-privacy-note { margin: 1rem 0; color: var(--muted); font-size: .88rem; }
.lookup-help-note { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 2.5rem 0 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); color: var(--muted); font-size: .92rem; text-align: center; }
.lookup-help-note i { color: #25d366; font-size: 1.15rem; }
.lookup-help-note a { color: var(--brand-primary); font-weight: 700; }
.lookup-empty { margin-block-start: 1.5rem; padding: 2rem; text-align: center; }
.lookup-empty h2 { font-size: 1.4rem; }
.lookup-empty p { margin: 0; color: var(--muted); }
.lookup-result-card { margin-block-start: 1.5rem; padding: clamp(1.25rem, 4vw, 2rem); }
.lookup-result-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.lookup-result-card h2 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.lookup-result-card header p:last-child { margin: 0; color: var(--muted); }
.lookup-status { display: inline-flex; min-height: 36px; align-items: center; padding: .35rem .8rem; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-weight: 850; white-space: nowrap; }
.lookup-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.lookup-totals div { padding: 1rem; text-align: center; }
.lookup-totals div + div { border-inline-start: 1px solid var(--border); }
.lookup-totals dt { color: var(--muted); font-size: .8rem; }
.lookup-totals dd { margin: .25rem 0 0; color: var(--burgundy-900); font-size: 1.1rem; font-weight: 850; }
.lookup-payments h3 { font-size: 1.3rem; }
.lookup-payment { padding: 1rem; border-radius: var(--radius-sm); background: var(--blush-100); }
.lookup-payment + .lookup-payment { margin-block-start: .75rem; }
.lookup-payment-heading { display: flex; justify-content: space-between; gap: 1rem; margin-block-end: .75rem; color: var(--burgundy-900); }
.lookup-payment dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0; }
.lookup-payment dt { color: var(--muted); font-size: .78rem; }
.lookup-payment dd { margin: 0; font-weight: 750; }
.lookup-attachments { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block-start: .9rem; padding-block-start: .9rem; border-block-start: 1px solid var(--border); }
.lookup-attachments > span { font-weight: 800; }
.lookup-receipt-actions { margin-block-start: .9rem; }
.lookup-payment-state { display: inline-flex; min-height: 30px; align-items: center; margin: 0 0 .75rem; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 850; }
.lookup-payment-state--confirmed { color: var(--green-900); background: var(--green-100); }
.lookup-payment-state--pending { color: #6f4c00; background: #fff2c2; }
.lookup-payment-state--rejected { color: #842029; background: #f8d7da; }
.lookup-payment-note { margin: .9rem 0 0; color: var(--muted); font-size: .88rem; }
.lookup-payment-form { margin-block-start: 1.5rem; padding: clamp(1.1rem, 3vw, 1.5rem); border: 1px solid var(--burgundy-100); border-radius: var(--radius-md); background: var(--white); box-shadow: inset 0 4px 0 var(--brand-primary); }
.lookup-payment-form-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.lookup-payment-form-heading h3 { margin: 0; font-size: 1.35rem; }
.lookup-payment-form-heading > span { flex: 0 0 auto; padding: .3rem .7rem; border-radius: 999px; color: var(--burgundy-900); background: var(--blush-100); font-size: .82rem; font-weight: 850; }
.lookup-payment-form-intro { max-width: 68ch; margin: .75rem 0 1.25rem; color: var(--muted); }
.installment-schedule { max-width: 68ch; margin: -.35rem 0 1.25rem; padding: .8rem 1rem; border-inline-start: 3px solid var(--burgundy-700); border-radius: var(--radius-sm); color: var(--ink); background: var(--blush-100); line-height: 1.7; }
.installment-schedule strong, .installment-schedule span { display: block; }
.multi-event-discount { display: flex; align-items: flex-start; gap: .85rem; margin-block: 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--blush-200); border-radius: var(--radius-md); color: var(--burgundy-900); background: linear-gradient(145deg, #fff7f9, var(--blush-100)); }
.multi-event-discount i { flex: 0 0 auto; margin-block-start: .2rem; color: var(--burgundy-700); }
.multi-event-discount strong, .multi-event-discount small { display: block; }
.multi-event-discount small { margin-block-start: .25rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.lookup-payment-entry-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lookup-payment-entry-form .text-danger { display: block; margin-block-start: .35rem; }
.lookup-payment-entry-form > .btn { min-height: 44px; margin-block-start: 1.25rem; }
.lookup-payment-amount { display: flex; }
.lookup-payment-amount .form-control { border-start-end-radius: 0; border-end-end-radius: 0; }
.lookup-payment-amount > span { display: inline-flex; min-width: 54px; align-items: center; justify-content: center; border: 1px solid var(--border); border-inline-start: 0; border-start-end-radius: .5rem; border-end-end-radius: .5rem; background: var(--cream); font-weight: 800; }
.lookup-pending-notice { margin-block-start: 1.5rem; padding: 1rem 1.1rem; border: 1px solid #e8ce80; border-radius: var(--radius-sm); color: #614500; background: #fff7dc; line-height: 1.7; }

/* Contact page */
.contact-hero { padding-block: clamp(4.5rem, 9vw, 7rem); }
.contact-page-section { background: radial-gradient(circle at 92% 8%, rgba(229, 238, 234, .85), transparent 24%), linear-gradient(180deg, var(--cream), var(--blush-100)); }
.contact-section-heading { width: min(100%, 760px); margin-inline: auto; }
.contact-section-heading h2 { margin: 0; }
.contact-section-heading > p:last-child { margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }
.contact-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: clamp(2rem, 5vw, 3.5rem); width: min(100%, 900px); margin-inline: auto; }
.contact-channel-card {
    --contact-accent: var(--burgundy-800);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 270px;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--border);
    border-block-start: 4px solid var(--contact-accent);
    border-radius: var(--radius-md);
    color: var(--ink);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.contact-channel-card:hover, a.contact-channel-card:focus-visible { color: var(--ink); border-color: var(--contact-accent); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.contact-channel-card--instagram { --contact-accent: #9b2d69; }
.contact-channel-card--email { --contact-accent: var(--burgundy-800); }
.contact-channel-card--hours { --contact-accent: var(--green-800); }
.contact-channel-icon { display: grid; width: 66px; height: 66px; flex: 0 0 auto; margin-block-end: 1.1rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--contact-accent); font-size: 1.8rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--contact-accent) 24%, transparent); }
.contact-channel-kicker { color: var(--muted); font-size: .78rem; font-weight: 800; }
.contact-channel-card > strong { margin-block-start: .15rem; color: var(--burgundy-900); font-size: 1.25rem; }
.contact-channel-value { max-width: 100%; margin-block-start: auto; padding-block-start: .55rem; color: var(--ink); font-size: .92rem; font-weight: 750; overflow-wrap: anywhere; }
.contact-channel-action { margin-block-start: auto; padding-block-start: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--contact-accent); font-size: .86rem; font-weight: 850; }
.contact-compose-layout { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 820px); margin-inline: auto; margin-block-start: clamp(2rem, 4vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); overflow: hidden; }
.contact-compose-copy { position: relative; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); color: #68474b; background: linear-gradient(145deg, var(--maylas-rose-light), #edccca); overflow: hidden; }
.contact-compose-copy .eyebrow { color: var(--maylas-rose-dark); }
.contact-compose-copy h2 { margin: .25rem 0 .5rem; color: var(--burgundy-900); font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.contact-compose-copy > p:not(.eyebrow) { margin: 0; line-height: 1.9; }
.contact-compose-mark { display: none; }
.contact-reply-note { display: flex; gap: .8rem; align-items: center; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid rgba(255, 255, 255, .18); }
.contact-reply-note > i { font-size: 1.35rem; }
.contact-reply-note strong { color: var(--white); }
.contact-compose-form { padding: clamp(1.25rem, 3vw, 2rem); }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.contact-form-grid textarea { min-height: 120px; resize: vertical; }
.contact-form-grid .form-control:not(textarea), .contact-form-grid .form-select { min-height: 48px; }
.contact-form-grid .yes-no-choice { min-height: 48px; gap: .5rem; }
.contact-form-grid .check-card { padding: .55rem; gap: .4rem; font-size: .85rem; }
.contact-form-grid small { color: var(--muted); }
.required-mark { color: #a20c28; }
.contact-submit { display: inline-flex; min-width: 220px; align-items: center; justify-content: center; gap: .55rem; margin-block-start: 1.5rem; }
.contact-submit:disabled { cursor: wait; opacity: .65; }
.contact-form-status { min-height: 1.5rem; margin: .7rem 0 0; color: var(--green-900); font-size: .86rem; font-weight: 750; }
.footer-contact-links { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-block-start: 1.1rem; }
.footer-contact-links a { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; color: #e8dfe2; font-size: .82rem; text-decoration: none; }
.footer-contact-links a:hover, .footer-contact-links a:focus { color: var(--white); text-decoration: underline; }
.footer-contact-links i { color: var(--blush-200); font-size: 1.1rem; }

@media (max-width: 991.98px) {
    .contact-compose-layout { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .contact-channel-grid, .contact-form-grid { grid-template-columns: 1fr; }
    .contact-channel-card { min-height: 270px; }
    .contact-submit { width: 100%; min-width: 0; }
    .footer-contact-links { justify-content: center; }
}

/* Next-event countdown */
.hero-countdown { width: min(calc(100% - 2rem), 1180px); max-width: none; margin: clamp(-4.5rem, -5vw, -3rem) auto 0; }
/* One flat burgundy panel, hairline-ruled figures, no shimmer and no frosted
   glass: the numbers are the only thing that should move here. */
.event-countdown {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.6vw, 2.25rem);
    align-items: center;
    margin: 0 0 1.5rem;
    padding: clamp(1.15rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.8vw, 2rem);
    border: 1px solid #dfb8b8;
    border-radius: var(--radius-md);
    color: var(--burgundy-900);
    background: linear-gradient(135deg, #f8eae8, #e8c1c0);
    box-shadow: 0 18px 44px rgba(146, 84, 90, .15);
}
.event-countdown-intro { display: flex; min-width: 0; gap: .85rem; align-items: center; }
.event-countdown-intro > div { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.event-countdown-intro strong { color: var(--burgundy-900); font-family: var(--font-body); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.35; text-wrap: balance; }
.event-countdown-intro small { color: var(--burgundy-700); font-size: .78rem; font-weight: 650; }
.event-countdown-kicker { width: fit-content; margin-block-end: .08rem; padding: .18rem .65rem; border: 1px solid rgba(146, 84, 90, .22); border-radius: 999px; color: var(--maylas-rose-dark); background: rgba(255, 255, 255, .48); font-size: .72rem; font-weight: 750; }
.event-countdown-sprig { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; border: 1px solid rgba(146, 84, 90, .22); border-radius: 50%; background: rgba(255, 255, 255, .62); }
.event-countdown-sprig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); }
.event-countdown-grid span { display: grid; min-height: 90px; padding-block: .35rem; place-items: center; align-content: center; }
.event-countdown-grid span + span { border-inline-start: 1px solid rgba(146, 84, 90, .22); }
.event-countdown-grid strong { color: var(--burgundy-900); font-family: var(--font-body); font-size: clamp(2rem, 4vw, 3.15rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.event-countdown-grid small { margin-block-start: .3rem; color: var(--maylas-rose-dark); font-size: .72rem; font-weight: 650; letter-spacing: .02em; }
.hero-countdown .event-countdown { margin-block-end: 0; box-shadow: 0 24px 56px rgba(146, 84, 90, .18); }
.published-event-content .event-countdown { grid-template-columns: 1fr; gap: .8rem; margin-block-end: 1.5rem; padding: 1rem; border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(65, 20, 36, .15); }
.published-event-content .event-countdown-intro strong { font-size: 1.05rem; }
.published-event-content .event-countdown-sprig { width: 34px; height: 34px; flex-basis: 34px; }
.published-event-content .event-countdown-grid span { min-height: 64px; }
.published-event-content .event-countdown-grid strong { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.store-preview { min-height: 72vh; text-align: start; }
.store-preview-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(320px, 1.14fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.store-preview-copy { max-width: 540px; }
.store-preview-icon { display: inline-grid; width: 52px; height: 52px; margin-block-end: 1rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--brand-primary); font-size: 1.15rem; box-shadow: 0 10px 24px rgba(104, 31, 52, .22); }
.store-preview-copy h1 { margin-block: .35rem .65rem; }
.store-preview-copy > p:not(.eyebrow):not(.store-preview-promise) { color: var(--muted); }
.store-preview-promise { margin: 0 0 1rem; color: var(--maylas-rose-dark); font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 2rem); }
/* The frame carries its own border/padding as a mat, so the photo inside it fills
   edge-to-edge (cover) instead of floating with empty space around it (contain). */
.store-preview-visual { position: relative; margin: 0; padding: clamp(.7rem, 2vw, 1.25rem); border: 1px solid rgba(146, 84, 90, .18); border-radius: min(9vw, 72px) min(3vw, 24px); background: rgba(255, 255, 255, .58); box-shadow: var(--shadow-sm); overflow: hidden; }
.store-preview-visual img { display: block; width: 100%; height: min(54vh, 560px); border-radius: inherit; object-fit: cover; object-position: center; }
.store-preview-visual figcaption { position: absolute; inset-inline-start: clamp(1rem, 3vw, 2rem); inset-block-end: clamp(1rem, 3vw, 2rem); padding: .55rem .9rem; border-radius: 999px; color: var(--burgundy-900); background: rgba(255, 250, 247, .9); font-size: .82rem; font-weight: 700; box-shadow: 0 8px 24px rgba(74, 21, 39, .1); }

/* Sponsor logo marquee */
.sponsors-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; overflow: hidden; background: var(--white); }
.sponsor-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sponsor-marquee-track { display: flex; width: max-content; will-change: transform; animation: sponsor-marquee var(--sponsor-marquee-duration, 32s) linear infinite; }
.sponsor-marquee:hover .sponsor-marquee-track, .sponsor-marquee:focus-within .sponsor-marquee-track { animation-play-state: paused; }
.sponsor-logo-set { display: flex; flex: 0 0 auto; gap: 1.25rem; align-items: center; padding-inline: .625rem; }
.sponsor-logo { display: grid; width: 112px; height: 112px; flex: 0 0 112px; place-items: center; overflow: hidden; padding: .7rem; border: 1px solid var(--border); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); }
a.sponsor-logo { text-decoration: none; }
.sponsor-logo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.sponsor-logo-placeholder { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; color: var(--brand-primary); background: var(--blush-100); font-family: "Noto Naskh Arabic", serif; font-size: 2rem; font-weight: 700; }
@keyframes sponsor-marquee { to { transform: translate3d(var(--sponsor-marquee-shift, 50%), 0, 0); } }

/* Sponsors directory */
.sponsor-section-heading { max-width: 720px; margin-block-end: clamp(2rem, 5vw, 3.25rem); }
.sponsor-section-heading h2 { margin-block-end: .75rem; }
.sponsor-section-heading > p:last-child { max-width: 650px; margin: 0; color: var(--muted); }
.sponsor-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 1.25rem; align-items: stretch; }
.sponsor-package-card { position: relative; display: flex; min-width: 0; min-height: 500px; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--white), #fffdfb); box-shadow: var(--shadow-sm); }
.sponsor-package-card-featured { border: 2px solid var(--burgundy-900); box-shadow: 0 18px 44px rgba(65, 20, 36, .14); }
.sponsor-package-badge { align-self: flex-start; margin: -.4rem 0 1rem; padding: .3rem .75rem; border-radius: 999px; color: var(--white); background: var(--burgundy-900); font-size: .78rem; font-weight: 850; }
.sponsor-package-label { margin: 0 0 .35rem; color: var(--green-800); font-size: .78rem; font-weight: 850; }
.sponsor-package-card h3 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.15rem); }
.sponsor-package-price { margin: .85rem 0 0; color: var(--burgundy-900); font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sponsor-package-description { margin: .65rem 0 0; color: var(--muted); font-size: .9rem; }
.sponsor-package-benefits { display: grid; gap: .8rem; margin: 1.5rem 0; padding: 1.35rem 0 0; border-block-start: 1px solid var(--border); list-style: none; }
.sponsor-package-benefits li { position: relative; padding-inline-start: 1.15rem; color: var(--ink); line-height: 1.75; }
.sponsor-package-benefits li::before { position: absolute; inset-block-start: .68em; inset-inline-start: 0; width: .42rem; height: .42rem; border-radius: 50%; background: var(--brand-secondary); content: ""; }
.sponsor-package-cta { width: 100%; margin-block-start: auto; white-space: normal; }
.active-sponsors-section { background: linear-gradient(180deg, var(--green-100), var(--cream)); }
.sponsor-directory-section { background: linear-gradient(180deg, var(--blush-100), var(--cream)); }
.sponsor-directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.sponsor-directory-card { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.sponsor-directory-card::before { position: absolute; z-index: 2; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); content: ""; }
.sponsor-directory-card:hover { border-color: var(--burgundy-100); box-shadow: 0 16px 36px rgba(65, 20, 36, .12); }
.sponsor-directory-card-linked { cursor: pointer; }
.sponsor-directory-card-link { position: absolute; z-index: 3; inset: 0; border-radius: inherit; touch-action: manipulation; }
.sponsor-directory-card-link:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: -4px; }
.sponsor-directory-card-linked:active { box-shadow: var(--shadow-sm); }
.sponsor-directory-logo-stage { display: grid; min-height: 190px; place-items: center; padding: 1.75rem; background: radial-gradient(circle at 50% 50%, var(--white) 0 36%, var(--blush-100) 100%); }
.sponsor-directory-logo-stage img { display: block; width: 100%; height: 140px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(65, 20, 36, .1)); }
.sponsor-directory-placeholder { display: grid; width: 112px; height: 112px; place-items: center; border: 1px solid var(--burgundy-100); border-radius: 50%; color: var(--burgundy-800); background: var(--white); font-family: "Noto Naskh Arabic", serif; font-size: 2.4rem; font-weight: 700; }
.sponsor-directory-details { display: grid; justify-items: start; padding: 1.15rem 1.25rem 1.3rem; border-block-start: 1px solid var(--border); text-align: start; }
.sponsor-directory-package { margin: 0 0 .35rem; padding: .15rem .55rem; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .7rem; font-weight: 850; }
.sponsor-directory-card h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.sponsor-directory-link { display: inline-flex; min-height: 44px; gap: .35rem; align-items: center; margin-block-start: .35rem; color: var(--burgundy-800); font-size: .8rem; font-weight: 850; text-decoration: none; }
.sponsor-directory-card-linked:hover .sponsor-directory-link, .sponsor-directory-card-linked:focus-within .sponsor-directory-link { text-decoration: underline; }
.active-sponsor-events { display: grid; width: 100%; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.active-sponsor-events li { display: grid; gap: .2rem; padding: .65rem .75rem; border-radius: .65rem; background: var(--green-100); }
.active-sponsor-events span { color: var(--ink); font-size: .78rem; }
.active-sponsor-events strong { color: var(--green-900); font-size: .72rem; }

/* Partner logo wall - circles only, the logo is the link. Flex-wrap centres the last row. */
.sponsor-logo-grid { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.4vw, 1.75rem); justify-content: center; }
.sponsor-logo-tile { width: 132px; height: 132px; flex-basis: 132px; padding: .85rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
a.sponsor-logo-tile:hover, a.sponsor-logo-tile:focus-visible { border-color: var(--burgundy-100); box-shadow: 0 16px 32px rgba(65, 20, 36, .14); transform: translateY(-4px); }
a.sponsor-logo-tile:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 3px; }

@media (max-width: 991.98px) {
    .sponsor-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .lookup-form-card .form-grid, .lookup-payment dl, .lookup-payment-entry-form .form-grid { grid-template-columns: 1fr; }
    .lookup-form-card .lookup-country-field, .lookup-form-card .lookup-mobile-field { grid-column: auto; grid-row: auto; }
    .lookup-result-card > header { flex-direction: column; }
    .lookup-payment-form-heading { flex-direction: column; }
    .lookup-totals { grid-template-columns: 1fr; }
    .lookup-totals div + div { border-inline-start: 0; border-block-start: 1px solid var(--border); }
    .hero-countdown { margin-block-start: -2rem; }
    .event-countdown { grid-template-columns: 1fr; gap: 1.15rem; text-align: center; }
    .event-countdown-intro { justify-content: center; }
    .event-countdown-intro > div { align-items: flex-start; text-align: start; }
    .event-countdown-grid { padding-block-start: 1.15rem; border-block-start: 1px solid rgba(146, 84, 90, .22); }
    .store-preview-grid { grid-template-columns: 1fr; gap: 2rem; }
    .store-preview-copy { max-width: none; text-align: center; }
    .sponsor-logo { width: 88px; height: 88px; flex-basis: 88px; padding: .55rem; }
    .sponsor-logo-tile { width: 100px; height: 100px; flex-basis: 100px; padding: .65rem; }
    .sponsor-logo-placeholder { font-size: 1.5rem; }
    .sponsor-directory-grid { grid-template-columns: 1fr; }
    .sponsor-package-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-marquee { overflow: visible; mask-image: none; }
    .sponsor-marquee-track { width: auto; animation: none; }
    .sponsor-logo-set { width: 100%; flex-wrap: wrap; justify-content: center; padding-inline: 1rem; }
    .sponsor-logo-set[aria-hidden="true"] { display: none; }
    a.sponsor-logo-tile:hover, a.sponsor-logo-tile:focus-visible { transform: none; }
}
.booking-total { padding: 1rem 1.25rem; margin-block: 1rem; border-radius: var(--radius-sm); background: var(--blush-100); color: var(--ink); font-weight: 700; }
.confirmation-days { text-align: start; margin-block: 2rem; }
.confirmation-reservations { display: grid; gap: 1rem; list-style: none; padding: 0; }
.confirmation-reservations li { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.confirmation-reservations h3 { font-size: 1.1rem; }
.booking-scope { padding: 1.5rem; margin-block-end: 1.5rem; border-radius: 16px; background: #fff4f6; }
.booking-scope p { margin-block: .75rem; }
.whatsapp-registration-preview { margin-block-start: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.whatsapp-registration-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.9; text-align: start; }
.whatsapp-registration-preview .btn { white-space: normal; }

.is-submitting::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-start: .5rem; vertical-align: middle; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: submit-spin .75s linear infinite; }
@keyframes submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-submitting::after { animation: none; } }

/* Muted inline film used as an editorial visual on the About page. */
[data-bg-video] { position: relative; overflow: hidden; isolation: isolate; }
.section-green[data-bg-video] > .container { position: relative; z-index: 2; }
.section-green[data-bg-video]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 61, 46, .72); }
.quote-card[data-bg-video] { color: var(--white); background: var(--burgundy-950); }
.quote-card[data-bg-video] blockquote, .quote-card[data-bg-video] > p { position: relative; z-index: 2; }
.quote-card[data-bg-video] > p { color: #f3d7de; }
.rabee-video { width: min(100%, 360px); aspect-ratio: 4 / 5; margin-inline: auto; border-radius: 44% 44% 1rem 1rem; background: var(--maylas-rose-light); }
.story-video-caption { position: static !important; max-width: none !important; margin-block-start: .8rem; padding: 0 !important; border: 0 !important; color: var(--maylas-rose-dark) !important; background: transparent !important; box-shadow: none !important; text-align: center; }
.story-video-caption a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.story-video-caption a:hover, .story-video-caption a:focus-visible { text-decoration-thickness: 2px; }
.story-video-caption-note { display: block; margin-block-start: .35rem; color: var(--muted); font-size: .9rem; font-weight: 500; line-height: 1.7; }
.bg-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.video-sound-toggle {
    position: absolute; z-index: 3; inset-block-end: 1rem; inset-inline-end: 1rem;
    display: grid; width: 2.75rem; height: 2.75rem; place-items: center;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
    background: rgba(0, 0, 0, .45); color: var(--white); font-size: 1rem; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.video-sound-toggle:hover { background: rgba(0, 0, 0, .7); transform: scale(1.06); }
.video-sound-toggle:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    /* The film stays visible on its first frame - public.js pauses it - rather than
       vanishing and leaving an empty panel now that the card carries no caption. */
    .section-green .bg-video { display: none; }
    .video-sound-toggle:hover { transform: none; }
}