/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-8yq8b10n27] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--admin-bg, #EEEDFC);
}

.admin-shell-bare[b-8yq8b10n27] {
    /* Login page: no header/sidebar chrome, just the plain canvas —
       AdminLogin.razor centers its own card within this. */
    align-items: center;
    justify-content: center;
}

/* ── Branded header ───────────────────────────────────────── */
.admin-header[b-8yq8b10n27] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    background: var(--admin-surface, #fff);
    border-bottom: 1px solid var(--admin-border, #eadff0);
    box-shadow: var(--admin-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.06));
    position: sticky;
    top: 0;
    z-index: 10;
    /* Actual rendered height (logo + padding + border) — the sidebar's
       sticky offset below must match this exactly, or the sidebar (whose
       natural position sits above that offset at scrollY 0) snaps down
       to it immediately, opening a visible gap under the header even
       before any scrolling happens. Confirmed by measuring both live:
       header bottom = 52px, sidebar was pinned to 61px. */
    --header-height: 52px;
}

.admin-header-logo[b-8yq8b10n27] {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.admin-header-wordmark[b-8yq8b10n27] {
    font-family: var(--font-display, inherit);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary, #fa1689);
}

.admin-header-badge[b-8yq8b10n27] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
    background: var(--admin-surface-2, #fff5fa);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-pill, 999px);
    padding: 0.15rem 0.6rem;
}

/* ── Dark-mode switch ─────────────────────────────────────── */
.admin-theme-toggle[b-8yq8b10n27] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
}

.admin-theme-toggle input[b-8yq8b10n27] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-theme-toggle-track[b-8yq8b10n27] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 46px;
    height: 24px;
    padding: 0 5px;
    border-radius: var(--radius-pill, 999px);
    background: var(--admin-hover, #eee);
    border: 1px solid var(--admin-border, #ddd);
    transition: background 0.2s ease;
}

.admin-theme-toggle-track i[b-8yq8b10n27] {
    font-size: 0.65rem;
    color: var(--admin-text-light, #999);
    position: relative;
    z-index: 1;
}

.admin-theme-toggle-thumb[b-8yq8b10n27] {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track[b-8yq8b10n27] {
    background: var(--primary, #fa1689);
    border-color: var(--primary, #fa1689);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track .admin-theme-toggle-thumb[b-8yq8b10n27] {
    transform: translateX(22px);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track i.fa-sun[b-8yq8b10n27] {
    color: rgba(255, 255, 255, 0.55);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track i.fa-moon[b-8yq8b10n27] {
    color: #fff;
}

.admin-theme-toggle input:focus-visible + .admin-theme-toggle-track[b-8yq8b10n27] {
    outline: 2px solid var(--primary, #fa1689);
    outline-offset: 2px;
}

/* ── Sidebar + body row ───────────────────────────────────── */
.admin-main-row[b-8yq8b10n27] {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.admin-sidebar[b-8yq8b10n27] {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--admin-surface, #fff);
    border-right: 1px solid var(--admin-border, #eadff0);
    padding: 1rem 0.75rem;
    position: sticky;
    top: 52px; /* must match .admin-header's real rendered height, see above */
    align-self: flex-start;
    height: calc(100vh - 52px);
}

/* NavLink is a framework component — confirmed by inspecting the live DOM
   that its rendered <a> does NOT receive this file's CSS-isolation scope
   attribute the way plain elements written directly in this .razor file
   do. ::deep is required for any selector that needs to match it. */
[b-8yq8b10n27] .admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--admin-text-light, #666);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

[b-8yq8b10n27] .admin-nav-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--admin-text-light, #999);
    flex-shrink: 0;
}

[b-8yq8b10n27] .admin-nav-item:hover {
    background: var(--admin-hover, #f4f4f7);
    color: var(--admin-text, #333);
}

[b-8yq8b10n27] .admin-nav-item.active {
    background: var(--admin-surface-2, #fff5fa);
    color: var(--primary, #fa1689);
}

[b-8yq8b10n27] .admin-nav-item.active i {
    color: var(--primary, #fa1689);
}

/* ── "Page Content" collapsible group ─────────────────────── */
.admin-nav-group[b-8yq8b10n27] {
    display: flex;
    flex-direction: column;
}

.admin-nav-group-toggle[b-8yq8b10n27] {
    justify-content: flex-start;
}

.admin-nav-caret[b-8yq8b10n27] {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.admin-nav-group.expanded .admin-nav-caret[b-8yq8b10n27] {
    transform: rotate(180deg);
}

.admin-nav-subitems[b-8yq8b10n27] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.15rem 0 0.3rem;
}

/* Plain indented links, no bullet/list marker — just a lighter weight
   and extra left indent to read as "nested under Page Content". */
[b-8yq8b10n27] .admin-nav-subitem {
    display: block;
    padding: 0.5rem 0.85rem 0.5rem 2.55rem;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--admin-text-light, #666);
    text-decoration: none;
}

[b-8yq8b10n27] .admin-nav-subitem:hover {
    background: var(--admin-hover, #f4f4f7);
    color: var(--admin-text, #333);
}

[b-8yq8b10n27] .admin-nav-subitem.active {
    background: var(--admin-surface-2, #fff5fa);
    color: var(--primary, #fa1689);
    font-weight: 700;
}

.admin-nav-logout-form[b-8yq8b10n27] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--admin-border, #eadff0);
}

[b-8yq8b10n27] .admin-nav-logout:hover {
    background: #fdecec;
    color: #c0392b;
}

[b-8yq8b10n27] .admin-nav-logout:hover i {
    color: #c0392b;
}

/* ── Content ──────────────────────────────────────────────── */
.admin-body[b-8yq8b10n27] {
    flex: 1;
    min-width: 0;
}

/* Tablet: sidebar becomes a horizontal top bar instead of a left column —
   still icon + label, just wrapping left-to-right instead of stacked. */
@media (max-width: 820px) {
    .admin-header[b-8yq8b10n27] {
        padding: 0.5rem 0.85rem;
    }

    .admin-main-row[b-8yq8b10n27] {
        flex-direction: column;
    }

    .admin-sidebar[b-8yq8b10n27] {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--admin-border, #eadff0);
    }

    [b-8yq8b10n27] .admin-nav-item {
        width: auto;
    }

    /* The Page Content dropdown needs its own full-width row when open —
       squeezed inline between the other wrapped nav items it'd be unreadable. */
    .admin-nav-group[b-8yq8b10n27] {
        width: 100%;
    }

    .admin-nav-logout-form[b-8yq8b10n27] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        margin-left: auto;
    }
}

/* Phone: five icon+label items in a wrapping row gets cramped fast — drop
   to icon-only (with an accessible label instead of visible text) so the
   whole nav fits on one compact line. */
@media (max-width: 480px) {
    .admin-header-wordmark[b-8yq8b10n27] {
        font-size: 0.95rem;
    }

    .admin-header-badge[b-8yq8b10n27] {
        display: none;
    }

    .admin-sidebar[b-8yq8b10n27] {
        justify-content: space-between;
        padding: 0.4rem;
        gap: 0;
    }

    [b-8yq8b10n27] .admin-nav-item {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.5rem 0.4rem;
        font-size: 0.6rem;
        text-align: center;
    }

    [b-8yq8b10n27] .admin-nav-item i {
        font-size: 1rem;
    }

    .admin-nav-logout-form[b-8yq8b10n27] {
        margin-left: 0;
    }
}
/* /Components/Layout/CtaBand.razor.rz.scp.css */
.cta-band[b-ok6sjrgpop] {
    margin-top: var(--space-3xl);
    padding-block: var(--space-2xl);
    background: var(--ink-800);
    color: rgba(255, 255, 255, 0.86);
    position: relative;
    overflow: clip;
    isolation: isolate;
}

/* Brand glow in the corner */
.cta-band[b-ok6sjrgpop]::before {
    content: "";
    position: absolute;
    bottom: -55%;
    right: -8%;
    width: min(620px, 80vw);
    aspect-ratio: 1;
    background: radial-gradient(circle,
                rgba(250, 22, 137, 0.42) 0%,
                transparent 68%);
    z-index: -1;
}

.cta-inner[b-ok6sjrgpop] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.cta-copy[b-ok6sjrgpop] {
    min-width: 0;
}

.cta-band h2[b-ok6sjrgpop] {
    color: #fff;
    font-size: var(--step-3);
    margin-bottom: 0.35rem;
}

.cta-band p[b-ok6sjrgpop] {
    font-size: var(--step-0);
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 700px) {
    .cta-inner[b-ok6sjrgpop] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════ */

.site-footer[b-54d45n6w6i] {
    margin-top: var(--space-3xl);
    background: var(--surface-cream);
    border-top: 1.5px solid var(--border-subtle);
    color: var(--text-light);
}

.footer-grid[b-54d45n6w6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
    align-items: start;
}

/* Once there's room for a true 4-across footer, give the mailing-list
   column extra width so the form fields aren't cramped. */
@media (min-width: 1000px) {
    .footer-grid[b-54d45n6w6i] {
        grid-template-columns: 1.75fr 1fr 1.3fr 1fr;
    }
}

.footer-subscribe[b-54d45n6w6i] {
    min-width: 0;
}

/* Keep the form comfortable but stop it sprawling on ultra-wide screens */
.subscribe-form[b-54d45n6w6i],
.subscribe-success[b-54d45n6w6i] {
    max-width: 340px;
}

.subscribe-error[b-54d45n6w6i] {
    color: #c0392b;
    font-size: var(--step--1);
    margin: 0 0 var(--space-xs);
}

.footer-col[b-54d45n6w6i] {
    min-width: 0;
}

.footer-title[b-54d45n6w6i] {
    font-size: var(--step-0);
    font-weight: 800;
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
    text-wrap: balance;
}

.footer-note[b-54d45n6w6i] {
    font-size: var(--step--1);
    color: var(--text-subtle);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

/* ── Subscribe form ─────────────────────────── */
.subscribe-form[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.subscribe-names[b-54d45n6w6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: var(--space-sm);
}

.subscribe-success[b-54d45n6w6i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--success) 35%, transparent);
    border-radius: var(--radius-sm);
    color: #1d7a3a;
    font-size: var(--step--1);
    font-weight: 600;
}

/* ── Brand ──────────────────────────────────── */
.footer-brand[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

.footer-logo[b-54d45n6w6i] {
    width: clamp(110px, 12vw, 150px);
    height: auto;
    object-fit: contain;
}

.footer-tagline[b-54d45n6w6i] {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-transform: uppercase;
}

/* ── Contact ────────────────────────────────── */
.footer-address[b-54d45n6w6i] {
    font-style: normal;
    font-size: var(--step--1);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.footer-contact-list[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: var(--space-md);
}

.footer-contact-list li[b-54d45n6w6i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
}

.footer-contact-list i[b-54d45n6w6i] {
    width: 1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.footer-contact-list a[b-54d45n6w6i] {
    color: var(--text-light);
    text-decoration: none;
    word-break: break-word;
}

.footer-contact-list a:hover[b-54d45n6w6i] {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Socials ────────────────────────────────── */
.footer-socials[b-54d45n6w6i] {
    display: flex;
    gap: 0.6rem;
}

.footer-social[b-54d45n6w6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.footer-social:hover[b-54d45n6w6i] {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-3px);
}

/* ── Sitemap links ──────────────────────────── */
/* This <ul> has no class, so the global `ul[class]` reset skips it — clear
   the default bullets and 40px indent here (the indent also skewed the
   mobile centring). */
.footer-links ul[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a[b-54d45n6w6i] {
    font-size: var(--step--1);
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
}

.footer-links a:hover[b-54d45n6w6i] {
    color: var(--primary);
    padding-left: 4px;
}

/* ── Bottom bar ─────────────────────────────── */
.footer-bottom[b-54d45n6w6i] {
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.footer-bottom-inner[b-54d45n6w6i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-md);
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.footer-credit[b-54d45n6w6i] {
    opacity: 0.85;
}

@media (max-width: 560px) {
    .footer-bottom-inner[b-54d45n6w6i] {
        justify-content: center;
        text-align: center;
    }
}

/* ── Mobile: once the footer stacks into a single column, centre every
   section so the whole footer reads as one tidy centred stack (instead of
   the brand block being centred while the others stay left-aligned). ── */
@media (max-width: 640px) {
    .footer-col[b-54d45n6w6i] {
        text-align: center;
    }

    /* Centre the block-level form/success panel and let it size to content */
    .subscribe-form[b-54d45n6w6i],
    .subscribe-success[b-54d45n6w6i] {
        max-width: 340px;
        margin-inline: auto;
    }

    /* Icon + text rows: centre the row content, keep icon beside the text */
    .footer-contact-list li[b-54d45n6w6i],
    .footer-socials[b-54d45n6w6i],
    .footer-links ul[b-54d45n6w6i] {
        justify-content: center;
        align-items: center;
    }

    /* The links list is a flex column — centre its items horizontally */
    .footer-links ul[b-54d45n6w6i] {
        align-items: center;
    }

    /* Hover nudge shifts links off-centre; drop it on mobile */
    .footer-links a:hover[b-54d45n6w6i] {
        padding-left: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   APP SHELL + HEADER
   ═══════════════════════════════════════════════════════════ */

.page[b-skospf7ysc] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

main[b-skospf7ysc] {
    flex: 1;
}

/* Keyboard-only skip link */
.skip-link[b-skospf7ysc] {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    z-index: 200;
    padding: 0.7rem 1.2rem;
    background: var(--primary);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--dur) var(--ease-out);
}

.skip-link:focus[b-skospf7ysc] {
    top: 0;
    color: #fff;
}

/* ── Header shell ───────────────────────────────────────────── */
.site-header[b-skospf7ysc] {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

.header-inner[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--header-h);
    padding-block: 0.5rem;
}

/* ── Book-a-class CTA ───────────────────────────────────────── */
.header-cta[b-skospf7ysc] {
    flex-shrink: 0;
    padding: 0.62rem 1.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.header-cta:hover[b-skospf7ysc] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Logo ───────────────────────────────────────────────────── */
.site-logo[b-skospf7ysc] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.logo-img[b-skospf7ysc] {
    width: auto;
    height: clamp(42px, 5vw, 56px);
    object-fit: contain;
    transition: transform var(--dur) var(--ease-out);
}

.site-logo:hover .logo-img[b-skospf7ysc] {
    transform: scale(1.04);
}

/* ── Desktop nav ────────────────────────────────────────────── */
.primary-nav[b-skospf7ysc] {
    margin-inline: auto;
}

.primary-nav > ul[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.4vw, 1.4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav li[b-skospf7ysc] {
    position: relative;
}

/* NavLink is a child component, so the <a> it renders does not receive this
   stylesheet's scope attribute. ::deep from .primary-nav (which we author)
   is required, otherwise none of these rules match. */
.primary-nav[b-skospf7ysc]  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

/* Animated underline */
.primary-nav[b-skospf7ysc]  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.primary-nav[b-skospf7ysc]  .nav-link:hover,
.primary-nav[b-skospf7ysc]  .nav-link.active {
    color: var(--primary);
}

.primary-nav[b-skospf7ysc]  .nav-link:hover::after,
.primary-nav[b-skospf7ysc]  .nav-link.active::after {
    transform: scaleX(1);
}

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown[b-skospf7ysc] {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    min-width: 208px;
    padding: 0.45rem;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    /* Hidden but animatable, and removed from the a11y tree */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
}

.has-dropdown:hover .dropdown[b-skospf7ysc],
.has-dropdown:focus-within .dropdown[b-skospf7ysc] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Invisible bridge so the pointer can travel to the menu */
.dropdown[b-skospf7ysc]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -0.6rem;
    height: 0.6rem;
}

.dropdown a[b-skospf7ysc] {
    display: block;
    padding: 0.58rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.dropdown a:hover[b-skospf7ysc] {
    background: var(--pink-50);
    color: var(--primary);
}

/* ── Header actions ─────────────────────────────────────────── */
.header-actions[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    margin-left: auto;
}

.login-link[b-skospf7ysc] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.login-link:hover[b-skospf7ysc] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

/* Session controls (shown when signed in) */
.logout-form[b-skospf7ysc] {
    margin: 0;
    display: block;
}

/* ── Signed-in user menu ────────────────────────────────────── */
.user-menu[b-skospf7ysc] {
    position: relative;
}

.login-user[b-skospf7ysc] {
    cursor: pointer;
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
}

/* The trigger opens the dropdown on hover/focus, so give it the same
   affordance as the login link (unlike the old static name span). */
.login-user:hover[b-skospf7ysc],
.user-menu:focus-within .login-user[b-skospf7ysc] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

.user-caret[b-skospf7ysc] {
    font-size: 0.62rem;
    transition: transform var(--dur) var(--ease-out);
}

.user-menu:hover .user-caret[b-skospf7ysc],
.user-menu:focus-within .user-caret[b-skospf7ysc] {
    transform: rotate(180deg);
}

/* Centred under the trigger, matching the primary-nav dropdowns. */
.user-dropdown[b-skospf7ysc] {
    left: 50%;
    right: auto;
    min-width: 180px;
    transform: translate(-50%, -8px);
}

.user-menu:hover .user-dropdown[b-skospf7ysc],
.user-menu:focus-within .user-dropdown[b-skospf7ysc] {
    transform: translate(-50%, 0);
}

.user-dropdown li + li[b-skospf7ysc] {
    margin-top: 0.15rem;
}

/* Log Out is a form submit button, styled to match the dropdown links */
.dropdown-btn[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.58rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--ink-700);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.dropdown-btn:hover[b-skospf7ysc] {
    background: var(--pink-50);
    color: var(--primary);
}

.user-dropdown a[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* ── Hamburger ──────────────────────────────────────────────── */
.nav-toggle[b-skospf7ysc] {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.nav-toggle-bars[b-skospf7ysc],
.nav-toggle-bars[b-skospf7ysc]::before,
.nav-toggle-bars[b-skospf7ysc]::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-800);
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle-bars[b-skospf7ysc]::before,
.nav-toggle-bars[b-skospf7ysc]::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars[b-skospf7ysc]::before { transform: translateY(-7px); }
.nav-toggle-bars[b-skospf7ysc]::after  { transform: translateY(7px); }

/* Morph into an X */
.nav-toggle-bars[data-open="true"][b-skospf7ysc] {
    background: transparent;
}

.nav-toggle-bars[data-open="true"][b-skospf7ysc]::before {
    transform: translateY(0) rotate(45deg);
}

.nav-toggle-bars[data-open="true"][b-skospf7ysc]::after {
    transform: translateY(0) rotate(-45deg);
}

/* ── Mobile drawer ──────────────────────────────────────────── */
.nav-scrim[b-skospf7ysc] {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(28, 0, 32, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.nav-scrim[data-open="true"][b-skospf7ysc] {
    opacity: 1;
    visibility: visible;
}

.mobile-nav[b-skospf7ysc] {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: min(320px, 84vw);
    height: 100dvh;
    padding: calc(var(--header-h) + var(--space-md)) var(--space-lg) var(--space-lg);
    background: var(--surface);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -12px 0 40px rgba(28, 0, 32, 0.18);
    overflow-y: auto;

    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.mobile-nav[data-open="true"][b-skospf7ysc] {
    transform: translateX(0);
    visibility: visible;
}

.mobile-nav ul[b-skospf7ysc] {
    display: flex;
    flex-direction: column;
}

.mobile-nav li + li[b-skospf7ysc] {
    border-top: 1px solid var(--border-subtle);
}

.mobile-nav a:not(.btn)[b-skospf7ysc] {
    display: block;
    padding: 0.7rem 0.2rem;
    font-size: 0.92rem;
    color: var(--ink-700);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
}

.mobile-nav a:not(.btn):hover[b-skospf7ysc] {
    color: var(--primary);
    padding-left: 6px;
}

/* Top-level entries read as headings */
.mobile-nav .m-parent[b-skospf7ysc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
}

/* Indented jump-links beneath each parent */
.mobile-nav .m-sub[b-skospf7ysc] {
    padding-left: var(--space-sm);
    margin-bottom: var(--space-xs);
    border-left: 2px solid var(--border-subtle);
}

.mobile-nav .m-sub li + li[b-skospf7ysc] {
    border-top: 0;
}

.mobile-nav .m-sub a[b-skospf7ysc] {
    padding-block: 0.45rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-light);
}

/* ── Responsive switch ──────────────────────────────────────── */
@media (max-width: 1040px) {
    .primary-nav[b-skospf7ysc] {
        display: none;
    }

    .nav-toggle[b-skospf7ysc] {
        display: inline-flex;
    }

    .site-logo[b-skospf7ysc] {
        margin-right: auto;
    }
}

/* Below this the drawer's own Book a Class button takes over */
@media (max-width: 640px) {
    .header-cta[b-skospf7ysc] {
        display: none;
    }
}

@media (max-width: 520px) {
    .login-text[b-skospf7ysc] {
        display: none;
    }

    .login-link[b-skospf7ysc] {
        padding: 0.5rem 0.7rem;
    }
}

/* Above the drawer breakpoint the drawer must never appear */
@media (min-width: 1041px) {
    .mobile-nav[b-skospf7ysc],
    .nav-scrim[b-skospf7ysc] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ql22jhlh84] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ql22jhlh84] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ql22jhlh84] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ql22jhlh84] {
    font-size: 1.1rem;
}

.bi[b-ql22jhlh84] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ql22jhlh84] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ql22jhlh84] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ql22jhlh84] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ql22jhlh84]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ql22jhlh84]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ql22jhlh84]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ql22jhlh84] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ql22jhlh84] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ql22jhlh84] {
        display: none;
    }

    .nav-scrollable[b-ql22jhlh84] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PageHero.razor.rz.scp.css */
.page-hero[b-uwltmf4z4t] {
    position: relative;
    padding-block: var(--space-2xl);
    background: var(--grad-brand);
    color: #fff;
    overflow: clip;
    isolation: isolate;
}

/* Subtle light sweep */
.page-hero[b-uwltmf4z4t]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 0%,
                rgba(255, 255, 255, 0.28) 0%,
                transparent 62%);
    z-index: -1;
}

.page-hero-inner[b-uwltmf4z4t] {
    text-align: center;
}

.page-hero-eyebrow[b-uwltmf4z4t] {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-xs);
}

.page-hero h1[b-uwltmf4z4t] {
    color: #fff;
    font-size: var(--step-4);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.page-hero-lead[b-uwltmf4z4t] {
    max-width: 62ch;
    margin: var(--space-sm) auto 0;
    font-size: var(--step-1);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.page-hero-extra[b-uwltmf4z4t] {
    margin-top: var(--space-lg);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dnkseo6odw],
.components-reconnect-repeated-attempt-visible[b-dnkseo6odw],
.components-reconnect-failed-visible[b-dnkseo6odw],
.components-pause-visible[b-dnkseo6odw],
.components-resume-failed-visible[b-dnkseo6odw],
.components-rejoining-animation[b-dnkseo6odw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-failed[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dnkseo6odw] {
    display: block;
}


#components-reconnect-modal[b-dnkseo6odw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dnkseo6odw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dnkseo6odw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dnkseo6odw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dnkseo6odw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dnkseo6odw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dnkseo6odw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dnkseo6odw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dnkseo6odw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dnkseo6odw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dnkseo6odw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dnkseo6odw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dnkseo6odw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dnkseo6odw] {
        background-color: #6b9ed2;
    }

/* NOTE: display (none/block) for this element is controlled by the
   show/hide toggle rules above — don't redeclare it here or it'll
   override that cascade and the animation will show even when closed. */
.components-rejoining-animation[b-dnkseo6odw] {
    width: 80px;
    height: 80px;
    text-align: center;
}

.reconnect-logo-flip[b-dnkseo6odw] {
    width: 64px;
    height: 64px;
    margin-top: 8px;
    object-fit: contain;
    animation: reconnect-logo-flip-b-dnkseo6odw 1.4s ease-in-out infinite;
}

@keyframes reconnect-logo-flip-b-dnkseo6odw {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-logo-flip[b-dnkseo6odw] {
        animation: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   About.razor.css
   Blazor CSS isolation — these rules only apply to About.razor.
   (Blazor auto-appends a scope attribute to every element this
   component renders, and rewrites these selectors to match it —
   so nothing here touches Classes, Membership, Contact, etc.)

   Design direction: "Backstage / Spotlight". Pole & aerial
   performers work under stage light and rigging — so the page
   borrows that vocabulary: a spotlight cone + hanging rig-line
   on every instructor card, and cue-sheet mono type for the
   credential/role tags, instead of a generic "glow card" look.
   ═══════════════════════════════════════════════════════════ */


/* Tokens — defined on .ffp (the component's root element) since
   :root never receives Blazor's scope attribute and would be a
   no-op selector in an isolated stylesheet. */
.ffp[b-cxbp5i0xkj] {
    --ab-ink: #17001c;
    --ab-ink-soft: #2c0b33;
    --ab-pink: #fa1689;
    --ab-pink-dark: #d4116f;
    --ab-violet: #a04fd2;
    --ab-violet-deep: #5a1f7a;
    --ab-glow-pink: rgba(250, 22, 137, 0.42);
    --ab-glow-violet: rgba(160, 79, 210, 0.42);
    --ab-display: 'Poppins', 'Helvetica Neue', sans-serif;
    --ab-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    /* Keep the horizontal slide-in reveals from spawning a scrollbar. */
    overflow-x: clip;
}

/* Offset anchored sections (e.g. /about#story) below the sticky header */
.ffp-section[b-cxbp5i0xkj] {
    scroll-margin-top: 90px;
}

/* ── Our Story: centered stack (heading · large video · justified copy) ── */
.story-centered[b-cxbp5i0xkj] {
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
}

.story-video[b-cxbp5i0xkj] {
    margin: var(--space-xl) auto;
    max-width: 960px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #000;
}

/* Copy sits below the video: readable measure, centered, justified */
.story-prose[b-cxbp5i0xkj] {
    max-width: 780px;
    margin-inline: auto;
    text-align: justify;
}

/* Poster button that opens the full-screen video modal (see effects.js,
   "Full-screen video modal") — replaces the old inline <video controls>. */
.story-video-trigger[b-cxbp5i0xkj] {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.story-video-poster[b-cxbp5i0xkj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-video-play-icon[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.story-video-play-icon i[b-cxbp5i0xkj] {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ab-glow-pink);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
    transition: transform 0.2s ease, background 0.2s ease;
}

.story-video-trigger:hover .story-video-play-icon i[b-cxbp5i0xkj],
.story-video-trigger:focus-visible .story-video-play-icon i[b-cxbp5i0xkj] {
    transform: scale(1.08);
    background: var(--ab-pink);
}

/* The video itself, full-screen in a native <dialog> */
.story-video-modal[b-cxbp5i0xkj] {
    position: fixed;
    width: min(1100px, 92vw);
    max-width: 92vw;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 0;
    /* visible (not hidden) so the close button can sit above the video,
       fully outside it, instead of overlapping the frame */
    overflow: visible;
    background: #000;
    box-shadow: var(--shadow-lg);
}

.story-video-modal[b-cxbp5i0xkj]::backdrop {
    background: rgba(10, 0, 15, 0.88);
}

.story-video-modal-player[b-cxbp5i0xkj] {
    display: block;
    width: 100%;
    max-height: 92vh;
}

/* Sits above the video frame in the backdrop, not on top of the video */
.story-video-modal-close[b-cxbp5i0xkj] {
    position: absolute;
    top: -3.25rem;
    right: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.story-video-modal-close:hover[b-cxbp5i0xkj],
.story-video-modal-close:focus-visible[b-cxbp5i0xkj] {
    background: var(--ab-pink-dark);
}

/* ── Alternating two-column rows (Story, Mission, Vision, Founder) ──
   Copy on one side, big media on the other; the media side flips per row.
   Kept within the content width (no 100vw breakout) so nothing overflows. */
.about-row[b-cxbp5i0xkj] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2xl);
    text-align: left;
}

.about-row.reverse[b-cxbp5i0xkj] {
    flex-direction: row-reverse;
}

/* Equal columns — image and copy the same width */
.about-row-body[b-cxbp5i0xkj] {
    flex: 1 1 0;
    min-width: 0;
}

/* Text-only row (Mission + Vision side by side) — no media column, so
   each half gets its own centred column instead of a media/copy split. */
.about-row--split .about-row-body[b-cxbp5i0xkj] {
    text-align: center;
}

.about-row--split .ffp-kicker[b-cxbp5i0xkj] {
    justify-content: center;
}

.about-row--split .ffp-h2[b-cxbp5i0xkj]::after {
    left: 50%;
    transform: translateX(-50%);
}

.about-row--split .ffp-prose[b-cxbp5i0xkj],
.about-row--split .ffp-prose p[b-cxbp5i0xkj],
.about-row--split p[b-cxbp5i0xkj] {
    text-align: center;
}

/* A divider between the two halves reads better than the bare gap */
.about-row--split .about-row-body + .about-row-body[b-cxbp5i0xkj] {
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--space-2xl);
}

@media (max-width: 820px) {
    .about-row--split .about-row-body + .about-row-body[b-cxbp5i0xkj] {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding-top: var(--space-lg);
    }
}

.about-row-media[b-cxbp5i0xkj] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;   /* let the inner media fill the column height */
}

/* Media fills its column so it's the same height as the copy */
.about-row .story-video[b-cxbp5i0xkj],
.about-row .ffp-founder-photo[b-cxbp5i0xkj] {
    width: 100%;
    aspect-ratio: auto;
}

/* Fill the row height with the poster button/image (no crop) */
.about-row .story-video-trigger[b-cxbp5i0xkj] {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: #000;
}

.about-row .story-video-poster[b-cxbp5i0xkj] {
    object-fit: contain;
}

/* Slightly smaller, justified copy */
.about-row .ffp-prose[b-cxbp5i0xkj],
.about-row .ffp-prose p[b-cxbp5i0xkj] {
    font-size: var(--step-0);
    text-align: justify;
}

/* The standalone video loses its centering margins inside the row */
.about-row .story-video[b-cxbp5i0xkj] {
    margin: 0;
    max-width: none;
    width: 100%;
}

/* Square corners on the big media (no border radius) */
.about-row .story-video[b-cxbp5i0xkj],
.about-row .ffp-founder-photo[b-cxbp5i0xkj] {
    border-radius: 0;
}

/* Numbered circle badge above the heading (matches the reference) */
.about-num[b-cxbp5i0xkj] {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    background: var(--pink-100);
    color: var(--ab-pink-dark);
    font-family: var(--ab-mono);
    font-size: 1rem;
    font-weight: 700;
}

/* Left-align the label + heading underline inside the row (they default to
   centred elsewhere) so the number, label and heading line up cleanly. */
.about-row .ffp-kicker[b-cxbp5i0xkj] {
    width: auto;
    justify-content: flex-start;
}

.about-row .ffp-h2[b-cxbp5i0xkj]::after {
    left: 0;
    transform: none;
}

/* Slide-in reveal, alternating sides per row. Animates `translate` (not
   `transform`), so it overrides the founder photo's own transform reveal
   cleanly and never fights a hover state. Falls back to fully visible. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .about-row-body[b-cxbp5i0xkj] {
            animation: about-slide-left-b-cxbp5i0xkj linear both;
            animation-timeline: view();
            animation-range: entry 4% cover 32%;
        }

        .about-row-media[b-cxbp5i0xkj] {
            animation: about-slide-right-b-cxbp5i0xkj linear both;
            animation-timeline: view();
            animation-range: entry 4% cover 32%;
        }

        /* Flip both columns on the reversed row */
        .about-row.reverse .about-row-body[b-cxbp5i0xkj] {
            animation-name: about-slide-right-b-cxbp5i0xkj;
        }

        .about-row.reverse .about-row-media[b-cxbp5i0xkj] {
            animation-name: about-slide-left-b-cxbp5i0xkj;
        }
    }
}

@keyframes about-slide-left-b-cxbp5i0xkj {
    from { opacity: 0; translate: -64px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes about-slide-right-b-cxbp5i0xkj {
    from { opacity: 0; translate: 64px 0; }
    to   { opacity: 1; translate: 0 0; }
}

/* Stack on narrower screens — media above copy */
@media (max-width: 820px) {
    .about-row[b-cxbp5i0xkj],
    .about-row.reverse[b-cxbp5i0xkj] {
        flex-direction: column;
    }

    .about-row-media[b-cxbp5i0xkj] {
        flex: none;
        width: 100%;
    }

    .about-row .ffp-founder-photo[b-cxbp5i0xkj] {
        max-width: 340px;
        margin-inline: auto;
    }
}

/* ── Hero: plain brand gradient ── */
.ffp-hero[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
}

.ffp-hero h1[b-cxbp5i0xkj] {
    position: relative;
    font-family: var(--ab-display);
    letter-spacing: 0.01em;
}

.ffp-hero p[b-cxbp5i0xkj] {
    position: relative;
}

/* ── Section labels: cue-sheet mono kicker with a live cue-light dot ── */
.ffp-kicker[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    letter-spacing: 0.22em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

.ffp-kicker[b-cxbp5i0xkj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ab-pink);
    box-shadow: 0 0 8px 2px var(--ab-glow-pink);
}

.ffp-sub[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    letter-spacing: 0.03em;
    font-size: var(--step-0);
}

/* ── Content copy: consistent body size across the About page ── */
.ffp-prose p[b-cxbp5i0xkj],
.about-row-body p[b-cxbp5i0xkj] {
    font-size: var(--step-0);
    line-height: 1.85;
}

/* ── Headings: display face + a short glowing beam underline ── */
.ffp-h2[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    position: relative;
    padding-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

.ffp-h2[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ab-pink), var(--ab-violet));
    box-shadow: 0 0 10px var(--ab-glow-pink);
}

/* ── Prose: editorial drop cap on the opening line of each block ── */
.ffp-prose > p:first-child[b-cxbp5i0xkj]::first-letter {
    font-family: var(--ab-display);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ab-pink);
    float: left;
    line-height: 0.85;
    padding: 0.1rem 0.35rem 0 0;
}

/* ── About the Founder: portrait beside the story ── */
.ffp-founder[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--space-xl);
    align-items: start;
    text-align: left;
}

.ffp-founder-photo[b-cxbp5i0xkj] {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--ab-ink) 0%, var(--ab-ink-soft) 100%);
    box-shadow: 0 18px 44px var(--ab-glow-pink);
}

/* real photo (when /images/founder.jpg exists) sits above the placeholder */
.ffp-founder-photo img[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* spotlight wash, echoing the instructor cards */
.ffp-founder-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 65% 70% at 50% 12%, rgba(255,255,255,0.32), transparent 70%);
    pointer-events: none;
}

.ffp-founder-ph[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.ffp-founder-ph i[b-cxbp5i0xkj] {
    font-size: 3rem;
    color: var(--ab-pink);
    filter: drop-shadow(0 0 16px var(--ab-glow-pink));
}

.ffp-founder-ph span[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.ffp-founder-ph small[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

/* Portrait glides in from the side as it enters the viewport */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ffp-founder-photo[b-cxbp5i0xkj] {
            animation: founder-photo-in-b-cxbp5i0xkj linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }
    }
}

@keyframes founder-photo-in-b-cxbp5i0xkj {
    from { opacity: 0; transform: translateX(-28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .ffp-founder[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .ffp-founder-photo[b-cxbp5i0xkj] {
        max-width: 300px;
        margin-inline: auto;
    }
}

/* ── Instructor cards: the signature spotlight + rig-line ── */
.ffp-instructor[b-cxbp5i0xkj] {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ffp-instructor:hover[b-cxbp5i0xkj] {
    transform: translateY(-6px);
}

.ffp-instructor:nth-child(odd):hover[b-cxbp5i0xkj] {
    box-shadow: 0 16px 36px var(--ab-glow-pink);
}

.ffp-instructor:nth-child(even):hover[b-cxbp5i0xkj] {
    box-shadow: 0 16px 36px var(--ab-glow-violet);
}

.ffp-instructor-photo[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ab-ink) 0%, var(--ab-ink-soft) 100%);
}

/* the hanging rig-line, like an aerial silk dropping from the rig */
.ffp-instructor-photo[b-cxbp5i0xkj]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 42%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
}

/* the spotlight cone, brightest at the rig and fading to the floor */
.ffp-instructor-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 20%, rgba(255,255,255,0.35), transparent 70%);
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.ffp-instructor:hover .ffp-instructor-photo[b-cxbp5i0xkj]::after {
    opacity: 1;
}

.ffp-instructor-photo > *[b-cxbp5i0xkj] {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
}

/* Real instructor portraits fill the media panel (override the 130px
   emoji strip from the global .ffp-instructor-photo). */
.ffp-instructor-photo[b-cxbp5i0xkj] {
    height: 300px;
    padding: 0;
}

.ffp-instructor-photo img[b-cxbp5i0xkj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: none;
}

.ffp-instructor-body h3[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
}

/* role/credential shown as a backstage cue-sheet badge */
.ffp-instructor-role[b-cxbp5i0xkj] {
    display: inline-block;
    font-family: var(--ab-mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(160, 79, 210, 0.35);
    background: rgba(160, 79, 210, 0.06);
}

.ffp-instructor-body p em[b-cxbp5i0xkj] {
    color: var(--ab-pink-dark);
}

/* ── Instructors carousel (one featured coach at a time) ── */
/* No arrows now — the card uses the full width; dots sit below. */
.ffp-carousel[b-cxbp5i0xkj] {
    position: relative;
    padding-inline: 0;
    /* Gives the photo's flip (below) actual 3D depth on rotation. */
    perspective: 1400px;
}

.ffp-feature[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* Text side still slides in; the photo (below) flips instead — both replay
   on every slide because @key re-creates the whole .ffp-feature element. */
.ffp-feature-body[b-cxbp5i0xkj] {
    animation: feature-slide-b-cxbp5i0xkj 0.5s var(--ease-out) both;
}

@keyframes feature-slide-b-cxbp5i0xkj {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ffp-feature-body[b-cxbp5i0xkj],
    .ffp-feature-photo[b-cxbp5i0xkj] {
        animation: none;
    }
}

/* Portrait rectangle. The photos are all 2:3, so a 2:3 frame shows the
   whole shot with no cropping. object-position is still set per-coach
   inline as a safety net for any non-2:3 image added later. */
.ffp-feature-photo[b-cxbp5i0xkj] {
    position: relative;
    border-radius: var(--radius-lg);
    animation: feature-photo-flip-b-cxbp5i0xkj 0.6s var(--ease-out) both;
}

@keyframes feature-photo-flip-b-cxbp5i0xkj {
    from { opacity: 0; transform: rotateY(-90deg); }
    to   { opacity: 1; transform: rotateY(0deg); }
}

.ffp-feature-photo img[b-cxbp5i0xkj] {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-lg);
    object-fit: cover;
    object-position: center;
    background: linear-gradient(160deg, var(--ab-ink), var(--ab-ink-soft));
    box-shadow: 0 18px 44px var(--ab-glow-pink);
}

/* Glossy highlight that follows the cursor (paired with data-tilt).
   --mx/--my are set by effects.js; inert without JS. */
.ffp-feature-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255, 255, 255, 0.30), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    mix-blend-mode: soft-light;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ffp-feature-photo:hover[b-cxbp5i0xkj]::after { opacity: 1; }
}

.ffp-feature-body[b-cxbp5i0xkj] {
    text-align: left;
}

.ffp-feature-awards[b-cxbp5i0xkj] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: var(--ab-mono);
    font-size: 0.78rem;
    color: var(--ab-violet-deep);
}

.ffp-feature-name[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    font-size: var(--step-3);
    line-height: 1.15;
    margin: 0.2rem 0 0.15rem;
}

.ffp-feature-handle[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.7rem;
}

.ffp-feature-desc[b-cxbp5i0xkj] {
    color: var(--ink-700);
    line-height: 1.75;
    font-size: var(--step-0);
}


/* Position dots */
.ffp-carousel-dots[b-cxbp5i0xkj] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
}

.ffp-carousel-dot[b-cxbp5i0xkj] {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: color-mix(in srgb, var(--ab-pink) 28%, transparent);
    transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.ffp-carousel-dot:hover[b-cxbp5i0xkj] {
    background: color-mix(in srgb, var(--ab-pink) 55%, transparent);
}

.ffp-carousel-dot.active[b-cxbp5i0xkj] {
    background: var(--ab-pink);
    transform: scale(1.35);
}

/* Social links row */
.ffp-instructor-socials[b-cxbp5i0xkj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.ffp-instructor-socials a[b-cxbp5i0xkj] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--ab-pink);
    background: var(--pink-50);
    transition: background-color 0.2s var(--ease-out),
                color 0.2s var(--ease-out),
                transform 0.2s var(--ease-out);
}

.ffp-instructor-socials a:hover[b-cxbp5i0xkj] {
    background: var(--ab-pink);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 760px) {
    .ffp-carousel[b-cxbp5i0xkj] { padding-inline: 0; }

    .ffp-feature[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-lg);
    }

    .ffp-feature-photo[b-cxbp5i0xkj] {
        max-width: 340px;
    }

    .ffp-feature-body[b-cxbp5i0xkj] {
        text-align: center;
    }

    .ffp-feature-awards[b-cxbp5i0xkj] {
        align-items: center;
    }

    .ffp-instructor-socials[b-cxbp5i0xkj] {
        justify-content: center;
    }
}

/* Each card fades up as it scrolls into view. Opacity-only keeps the
   hover-lift transform above working (a filled transform animation would
   otherwise override :hover). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ffp-instructor[b-cxbp5i0xkj] {
            animation: instructor-in-b-cxbp5i0xkj linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 16%;
        }
    }
}

@keyframes instructor-in-b-cxbp5i0xkj {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Pole specs: cue-sheet list with a glowing chevron marker ── */
.ffp-prose ul[b-cxbp5i0xkj] {
    list-style: none;
    margin-left: 0;
}

.ffp-prose li[b-cxbp5i0xkj] {
    position: relative;
    padding-left: 1.4rem;
    font-family: var(--ab-mono);
    font-size: var(--step-0);
}

.ffp-prose li[b-cxbp5i0xkj]::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--ab-pink);
    font-weight: 700;
    text-shadow: 0 0 6px var(--ab-glow-pink);
}

.ffp-prose li strong[b-cxbp5i0xkj] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── CTA: brand pill button gets a sweeping spotlight on hover ── */
.ffp-btn[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
}

.ffp-btn[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.ffp-btn:hover[b-cxbp5i0xkj]::after {
    left: 130%;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .ffp-prose > p:first-child[b-cxbp5i0xkj]::first-letter {
        font-size: 2.1rem;
    }

    .ffp-instructor-photo[b-cxbp5i0xkj]::before {
        height: 34%;
    }
}

/* ── Respect reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ffp-instructor[b-cxbp5i0xkj],
    .ffp-instructor-photo[b-cxbp5i0xkj]::after,
    .ffp-btn[b-cxbp5i0xkj]::after {
        transition: none;
    }

    .ffp-instructor:hover[b-cxbp5i0xkj] {
        transform: none;
    }
}
/* /Components/Pages/Admin/AdminLogin.razor.rz.scp.css */
.admin-login-wrap[b-c9xf080nof] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.admin-login-card[b-c9xf080nof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 360px;
    padding: 2rem;
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    background: var(--admin-surface, #fff);
    box-shadow: var(--admin-shadow-md, 0 6px 22px rgba(250, 22, 137, 0.14));
    text-align: center;
}

.admin-login-logo[b-c9xf080nof] {
    object-fit: contain;
    margin-bottom: 0.25rem;
}

.admin-login-card h1[b-c9xf080nof] {
    font-size: 1.3rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.admin-login-sub[b-c9xf080nof] {
    font-size: 0.85rem;
    color: var(--admin-text-light, #888);
    margin: 0 0 0.5rem;
}

.admin-login-error[b-c9xf080nof] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #f8d7da;
    color: #842029;
    border-radius: 6px;
    font-size: 0.82rem;
    margin: 0;
}

.field[b-c9xf080nof] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
}

.field .label[b-c9xf080nof] {
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
}

.field .input[b-c9xf080nof] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.field .input:focus[b-c9xf080nof] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}
/* /Components/Pages/Admin/ContentEditor.razor.rz.scp.css */
.content-editor-wrap[b-c9ls4yee76] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.content-editor-head[b-c9ls4yee76] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.content-editor-head h1[b-c9ls4yee76] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.content-editor-status[b-c9ls4yee76] {
    font-size: 0.82rem;
    color: #0f5132;
    white-space: nowrap;
}

.content-editor-section[b-c9ls4yee76] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* A plain div header instead of <fieldset>/<legend> — the browser's
   default legend rendering breaks the fieldset border right around the
   text, which read as a stray line trailing off after the title. This
   gives full control: a small eyebrow-style label with its own
   underline, consistent everywhere. */
.content-editor-section-head[b-c9ls4yee76] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--admin-border, #f0e6ee);
}

.content-editor-section-head h2[b-c9ls4yee76] {
    font-family: var(--font-display, inherit);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary, #fa1689);
    margin: 0;
}

.content-editor-field[b-c9ls4yee76] {
    margin-bottom: 1rem;
}

.content-editor-field:last-child[b-c9ls4yee76] {
    margin-bottom: 0;
}

.content-editor-field label[b-c9ls4yee76] {
    display: block;
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
    margin-bottom: 0.3rem;
}

.content-editor-flag[b-c9ls4yee76] {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    color: #92400e;
}

.content-editor-input[b-c9ls4yee76] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.content-editor-input:focus[b-c9ls4yee76] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}

.content-editor-image[b-c9ls4yee76] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.content-editor-preview[b-c9ls4yee76] {
    max-width: 220px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border, #eadff0);
}

.content-editor-error[b-c9ls4yee76] {
    color: #842029;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/ContentListEditor.razor.rz.scp.css */
.cle-items[b-ytplxdtho0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cle-item[b-ytplxdtho0] {
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--admin-shadow-xs, 0 1px 3px rgba(250, 22, 137, 0.08));
    padding: 1rem;
    background: var(--admin-surface, #fff);
    cursor: grab;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cle-item:active[b-ytplxdtho0] {
    cursor: grabbing;
}

/* Text fields inside keep the normal text-input cursor — grabbing the
   card is still just "click anywhere that isn't already interactive". */
.cle-item textarea[b-ytplxdtho0],
.cle-item input[b-ytplxdtho0] {
    cursor: auto;
}

/* The card being picked up — dim it so the drop target reads clearly. */
.cle-item-dragging[b-ytplxdtho0] {
    opacity: 0.4;
}

/* Whatever card the pointer is currently over — a pink dashed outline
   signals "drop here" without needing a separate insertion-line element. */
.cle-item-drop-target[b-ytplxdtho0] {
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #fa1689) 30%, transparent);
}

.cle-item-head[b-ytplxdtho0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

/* Decorative only — the whole card is the drag surface now, this is
   just the visual cue that it's grabbable. */
.cle-item-grip[b-ytplxdtho0] {
    color: var(--admin-text-light, #bbb);
}

.cle-item-num[b-ytplxdtho0] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-text-light, #888);
}

.cle-item-actions[b-ytplxdtho0] {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.cle-item-remove[b-ytplxdtho0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm, 8px);
    color: var(--admin-text-light, #999);
    background: transparent;
    border: 1px solid var(--admin-border, #eadff0);
}

.cle-item-remove:hover[b-ytplxdtho0] {
    color: #c0392b;
    background: #fdecec;
    border-color: #f5b7b1;
}

.cle-field[b-ytplxdtho0] {
    margin-bottom: 0.6rem;
}

.cle-field label[b-ytplxdtho0] {
    display: block;
    font-size: 0.75rem;
    color: var(--admin-text-light, #888);
    margin-bottom: 0.2rem;
}

.cle-field textarea[b-ytplxdtho0] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.cle-field textarea:focus[b-ytplxdtho0] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}

.content-editor-image[b-ytplxdtho0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.content-editor-preview[b-ytplxdtho0] {
    max-width: 220px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border, #e0e0e0);
}

.content-editor-error[b-ytplxdtho0] {
    color: #842029;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dash-wrap[b-kftb1a0q31] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.dash-head[b-kftb1a0q31] {
    margin-bottom: 1.5rem;
}

.dash-head h1[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.dash-head p[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

/* ── Stat cards ───────────────────────────────────────────── */
.dash-stats[b-kftb1a0q31] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-stat[b-kftb1a0q31] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1rem 1.1rem;
}

.dash-stat-icon[b-kftb1a0q31] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.dash-stat-pink .dash-stat-icon[b-kftb1a0q31] { background: var(--primary, #fa1689); }
.dash-stat-green .dash-stat-icon[b-kftb1a0q31] { background: #16b981; }
.dash-stat-purple .dash-stat-icon[b-kftb1a0q31] { background: #7c5cfa; }
.dash-stat-blue .dash-stat-icon[b-kftb1a0q31] { background: #2f8fe0; }
.dash-stat-amber .dash-stat-icon[b-kftb1a0q31] { background: #f5a623; }

.dash-stat-body[b-kftb1a0q31] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-stat-value[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--admin-text, #222);
    line-height: 1.2;
}

.dash-stat-label[b-kftb1a0q31] {
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
}

/* ── Content grid ─────────────────────────────────────────── */
.dash-grid[b-kftb1a0q31] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.dash-side[b-kftb1a0q31] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-card[b-kftb1a0q31] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1.1rem 1.25rem 1.25rem;
}

.dash-card-head[b-kftb1a0q31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dash-card-head h2[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.dash-card-link[b-kftb1a0q31] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #fa1689);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dash-card-link:hover[b-kftb1a0q31] {
    text-decoration: underline;
}

.dash-table-wrap[b-kftb1a0q31] {
    box-shadow: none;
    border: 1px solid var(--admin-border, #eee);
}

/* ── Recent-activity mini lists ───────────────────────────── */
.dash-list[b-kftb1a0q31] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li[b-kftb1a0q31] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--admin-border, #f0f0f0);
    font-size: 0.85rem;
}

.dash-list li:last-child[b-kftb1a0q31] {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-list-title[b-kftb1a0q31] {
    font-weight: 600;
    color: var(--admin-text, #333);
    flex-shrink: 0;
}

.dash-list-sub[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.dash-list-date[b-kftb1a0q31] {
    color: var(--admin-text-light, #aaa);
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* ── Shared table look (same as the other admin review pages —
     CSS isolation means it has to be repeated per component) ── */
.admin-review-empty[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    padding: 1.5rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-kftb1a0q31] {
    background: var(--admin-surface, #fff);
    overflow-x: auto;
    border-radius: var(--radius-md, 12px);
}

.admin-review-table[b-kftb1a0q31] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-kftb1a0q31],
.admin-review-table td[b-kftb1a0q31] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table thead th[b-kftb1a0q31] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-kftb1a0q31] {
    border-bottom: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
    .dash-grid[b-kftb1a0q31] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dash-stats[b-kftb1a0q31] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .dash-list li[b-kftb1a0q31] {
        flex-wrap: wrap;
    }

    .dash-list-sub[b-kftb1a0q31] {
        white-space: normal;
    }
}
/* /Components/Pages/Admin/Inquiries.razor.rz.scp.css */
.admin-review-wrap[b-tfwyz10meh] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-tfwyz10meh] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-tfwyz10meh] {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-tfwyz10meh] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-tfwyz10meh] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-tfwyz10meh] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-tfwyz10meh] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
    border-radius: var(--radius-sm, 8px);
}

.admin-review-table[b-tfwyz10meh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-tfwyz10meh],
.admin-review-table td[b-tfwyz10meh] {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    vertical-align: top;
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-tfwyz10meh],
.admin-review-table td:last-child[b-tfwyz10meh] {
    border-right: none;
}

.admin-review-table thead th[b-tfwyz10meh] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
    white-space: nowrap;
}

.admin-review-table tbody tr:last-child td[b-tfwyz10meh] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-tfwyz10meh] {
    cursor: pointer;
    user-select: none;
}

.admin-review-table th.sortable:hover[b-tfwyz10meh] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-tfwyz10meh] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-tfwyz10meh] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-tfwyz10meh] {
    opacity: 1;
}

.admin-review-message[b-tfwyz10meh] {
    max-width: 320px;
    white-space: pre-wrap;
}
/* /Components/Pages/Admin/PaymentReview.razor.rz.scp.css */
.admin-review-wrap[b-eh0lmfcpdc] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-eh0lmfcpdc] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-eh0lmfcpdc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-eh0lmfcpdc] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-eh0lmfcpdc] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
    border-radius: var(--radius-sm, 8px);
}

.admin-review-table[b-eh0lmfcpdc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-eh0lmfcpdc],
.admin-review-table td[b-eh0lmfcpdc] {
    padding: 0.85rem 1.1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-eh0lmfcpdc],
.admin-review-table td:last-child[b-eh0lmfcpdc] {
    border-right: none;
}

.admin-review-table thead th[b-eh0lmfcpdc] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-eh0lmfcpdc] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-eh0lmfcpdc] {
    cursor: pointer;
    user-select: none;
}

.admin-review-table th.sortable:hover[b-eh0lmfcpdc] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-eh0lmfcpdc] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-eh0lmfcpdc] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-eh0lmfcpdc] {
    opacity: 1;
}

.admin-review-noproof[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #ccc);
}

.admin-review-actions[b-eh0lmfcpdc] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/Admin/Subscribers.razor.rz.scp.css */
.admin-review-wrap[b-9bvk97cv02] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-9bvk97cv02] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-9bvk97cv02] {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-9bvk97cv02] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-9bvk97cv02] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-9bvk97cv02] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-9bvk97cv02] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
    border-radius: var(--radius-sm, 8px);
}

.admin-review-table[b-9bvk97cv02] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-9bvk97cv02],
.admin-review-table td[b-9bvk97cv02] {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-9bvk97cv02],
.admin-review-table td:last-child[b-9bvk97cv02] {
    border-right: none;
}

.admin-review-table thead th[b-9bvk97cv02] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-9bvk97cv02] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-9bvk97cv02] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-review-table th.sortable:hover[b-9bvk97cv02] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-9bvk97cv02] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-9bvk97cv02] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-9bvk97cv02] {
    opacity: 1;
}
/* /Components/Pages/Blog.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════ */

/* ── Shared meta row ────────────────────────── */
.post-meta[b-cm2ffbgrmv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.post-date[b-cm2ffbgrmv] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ── Featured post ──────────────────────────── */
.featured-post[b-cm2ffbgrmv] {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.featured-media[b-cm2ffbgrmv] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 250px;
    font-size: clamp(3.5rem, 9vw, 6rem);
    background: var(--grad-brand);
    overflow: hidden;
}

/* Drop-in photo overlays the emoji; if it's absent/fails, onerror removes it
   and the emoji shows through. Shared by the featured + post media tiles. */
.media-photo[b-cm2ffbgrmv] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.featured-body[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xl);
}

.featured-body h2[b-cm2ffbgrmv] {
    font-size: var(--step-3);
    color: var(--primary);
}

.featured-body p[b-cm2ffbgrmv] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    max-width: 56ch;
    margin-bottom: var(--space-sm);
}

/* ── Post cards ─────────────────────────────── */
.posts-section[b-cm2ffbgrmv] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.post-card[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
}

.post-media[b-cm2ffbgrmv] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    background: linear-gradient(135deg, var(--pink-400), var(--plum-400));
    overflow: hidden;
}

.post-body[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-lg);
}

.post-body h3[b-cm2ffbgrmv] {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.post-body p[b-cm2ffbgrmv] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

.posts-note[b-cm2ffbgrmv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--space-xl);
    font-size: var(--step--1);
    color: var(--text-light);
}

.posts-note i[b-cm2ffbgrmv] {
    color: var(--primary);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .featured-post[b-cm2ffbgrmv] {
        grid-template-columns: 1fr;
    }

    .featured-media[b-cm2ffbgrmv] {
        min-height: 170px;
    }

    .featured-body[b-cm2ffbgrmv] {
        padding: var(--space-lg);
    }
}
/* /Components/Pages/BookingDetail.razor.rz.scp.css */
/* ── Booking Wrapper ─────────────────────────────────── */
.booking-wrapper[b-oanx12vtwm] {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    position: relative;
}

.booking-title[b-oanx12vtwm] {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #2a002e;
}

/* ── Validation ──────────────────────────────────────── */
.input-error[b-oanx12vtwm] {
    border-bottom-color: #c0392b !important;
    background: #fff5f5;
}

.field-error[b-oanx12vtwm] {
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.15rem;
}

/* ── Pill Stepper ────────────────────────────────────── */
.stepper-wrapper[b-oanx12vtwm] {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.stepper[b-oanx12vtwm] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 5px;
    gap: 3px;
    box-shadow: 0 4px 20px rgba(250, 22, 137, 0.18);
}

.step-pill[b-oanx12vtwm] {
    padding: 0.48rem 1.2rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: default;
    border: none;
    background: transparent;
    color: #bbb;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}

.step-pill.active[b-oanx12vtwm] {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(250, 22, 137, 0.35);
}

.step-pill.completed[b-oanx12vtwm] {
    color: #555;
    cursor: pointer;
}

.step-pill.completed:hover[b-oanx12vtwm] {
    background: rgba(250, 22, 137, 0.08);
    color: var(--primary);
}

.step-pill.pending[b-oanx12vtwm] {
    color: #ccc;
    cursor: default;
}

/* ── Form Card ───────────────────────────────────────── */
.form-card[b-oanx12vtwm] { border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem 2rem; margin-bottom: 1.5rem; background: #fff; }
.section-label[b-oanx12vtwm] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 1.25rem; }
.form-grid[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.field-group[b-oanx12vtwm] { display: flex; flex-direction: column; gap: 0.3rem; }
.field-group.span-full[b-oanx12vtwm] { grid-column: 1 / -1; }

.field-label[b-oanx12vtwm] { font-size: 0.75rem; color: var(--text-light); font-weight: 500; }

.field-input[b-oanx12vtwm] {
    background: var(--bg-field); border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--text);
    outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.field-input:focus[b-oanx12vtwm] { border-bottom-color: var(--primary); }

.field-select[b-oanx12vtwm] {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}

/* ── Summary Box ─────────────────────────────────────── */
.summary-box[b-oanx12vtwm] { margin-top: 1.5rem; background: #fff0f7; border: 1px solid rgba(250,22,137,0.25); border-radius: var(--radius); padding: 1rem 1.25rem; }
.summary-title[b-oanx12vtwm] { font-size: 0.78rem; font-weight: 600; color: var(--primary); letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.summary-row[b-oanx12vtwm] { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 0.3rem 0; color: var(--text-light); border-bottom: 1px dashed rgba(250,22,137,0.2); }
.summary-row:last-child[b-oanx12vtwm] { border-bottom: none; }
.summary-row strong[b-oanx12vtwm] { color: var(--text); }
.summary-total[b-oanx12vtwm] { font-weight: 700; color: var(--primary); }

/* ── Review ──────────────────────────────────────────── */
.review-section[b-oanx12vtwm] { margin-bottom: 0.5rem; }
.review-heading[b-oanx12vtwm] { font-size: 0.8rem; font-weight: 600; color: var(--primary); letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.review-grid[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
.review-item[b-oanx12vtwm] { display: flex; flex-direction: column; gap: 0.2rem; }
.review-label[b-oanx12vtwm] { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.review-value[b-oanx12vtwm] { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.review-amount[b-oanx12vtwm] { font-size: 1.1rem; color: var(--primary-dark); font-weight: 700; }
.review-divider[b-oanx12vtwm] { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Status Badge ────────────────────────────────────── */
.status-badge[b-oanx12vtwm] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.status-pending[b-oanx12vtwm]       { background: #fff3cd; color: #856404; }
.status-pendingreview[b-oanx12vtwm] { background: #cfe2ff; color: #084298; }
.status-paid[b-oanx12vtwm]          { background: #d1e7dd; color: #0f5132; }
.status-failed[b-oanx12vtwm]        { background: #f8d7da; color: #842029; }

/* ── Step Hint ───────────────────────────────────────── */
.step-hint[b-oanx12vtwm] {
    text-align: center;
    font-size: 0.82rem;
    color: #999;
    margin-top: 0.5rem;
    font-style: italic;
}

.step-hint strong[b-oanx12vtwm] { color: var(--primary); }

/* ── Buttons ─────────────────────────────────────────── */
.btn-row[b-oanx12vtwm] { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.btn[b-oanx12vtwm] { padding: 0.6rem 1.6rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; border-radius: var(--radius); cursor: pointer; transition: all 0.2s; }
.btn-outline[b-oanx12vtwm] { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover[b-oanx12vtwm] { background: var(--primary); color: #fff; }
.btn-primary[b-oanx12vtwm] { background: var(--primary); border: 1.5px solid var(--primary); color: #fff; }
.btn-primary:hover[b-oanx12vtwm] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.error-msg[b-oanx12vtwm] { color: #c0392b; font-size: 0.85rem; margin: -0.5rem 0 0.75rem; }

/* ── Checkout Layout (Step 3) ────────────────────────── */
.checkout-layout[b-oanx12vtwm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.checkout-review[b-oanx12vtwm],
.checkout-payment[b-oanx12vtwm] {
    margin-bottom: 0;
}

.checkout-payment .field-group[b-oanx12vtwm] {
    margin-bottom: 0.5rem;
}

/* ── Payment Methods ─────────────────────────────────── */
.payment-methods[b-oanx12vtwm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.payment-method-option[b-oanx12vtwm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    font-size: 0.9rem;
    background: #fff;
}

.payment-method-option.selected[b-oanx12vtwm] {
    border-color: var(--primary, #C9A84C);
    background: #fffbf0;
}

.payment-method-option input[type="radio"][b-oanx12vtwm] {
    accent-color: var(--primary, #C9A84C);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Payment Method Icons ─────────────────────────────── */
.pm-img[b-oanx12vtwm] {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.pm-icon[b-oanx12vtwm] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary, #C9A84C);
    flex-shrink: 0;
}

.pm-label[b-oanx12vtwm] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
}

/* ── Privacy Policy ──────────────────────────────────── */
.pm-privacy[b-oanx12vtwm] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #eee);
}

.pm-check-row[b-oanx12vtwm] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pm-check-row input[type="checkbox"][b-oanx12vtwm] {
    accent-color: var(--primary, #C9A84C);
    margin-top: 2px;
    flex-shrink: 0;
}

.pm-check-row a[b-oanx12vtwm] {
    color: var(--primary, #C9A84C);
    text-decoration: underline;
}

/* ── Review Note ─────────────────────────────────────── */
.pm-review-note[b-oanx12vtwm] {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-light, #888);
}

/* ── Proof-of-Payment File Input ─────────────────────── */
.file-input[b-oanx12vtwm] {
    display: block;
    width: 100%;
    font-size: 0.85rem;
}

.file-hint[b-oanx12vtwm] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-light, #888);
}

/* ── PAY Button ──────────────────────────────────────── */
.btn-pay[b-oanx12vtwm] {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #fa1689 0%, #d4116f 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(250, 22, 137, 0.35);
}
.btn-pay:hover[b-oanx12vtwm] {
    background: linear-gradient(135deg, #d4116f 0%, #b00e5c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(250, 22, 137, 0.45);
}

/* ── BACK Button Row ─────────────────────────────────── */
.btn-row-back[b-oanx12vtwm] {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

/* ── Success Modal ───────────────────────────────────── */
.success-overlay[b-oanx12vtwm] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 999; }
.success-card[b-oanx12vtwm] { background: #fff; border-radius: 8px; padding: 2.5rem; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.success-icon[b-oanx12vtwm] { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.success-card h3[b-oanx12vtwm] { font-size: 1.4rem; margin-bottom: 0.75rem; }
.success-card p[b-oanx12vtwm] { font-size: 0.92rem; color: var(--text-light); line-height: 1.6; margin-bottom: 0.5rem; }
.success-sub[b-oanx12vtwm] { margin-bottom: 0.25rem !important; }
.success-ref[b-oanx12vtwm] { font-size: 0.82rem; color: #aaa; margin-bottom: 1.5rem !important; }

/* ── Payment Method Sub-label ────────────────────────── */
.pm-sublabel[b-oanx12vtwm] {
    display: block;
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 1px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-layout[b-oanx12vtwm] { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .form-grid[b-oanx12vtwm], .form-grid-3[b-oanx12vtwm], .review-grid[b-oanx12vtwm] { grid-template-columns: 1fr; }
    .step-label[b-oanx12vtwm] { display: none; }
    .step-line[b-oanx12vtwm] { min-width: 40px; }
}

/* ── Where to send payment (QR + account details) ─────────────
   Both slots come from the CMS (ContentSchema.Booking) and either can be
   blank, so this block is laid out to look right with just a QR, just the
   account text, or both. */
.pay-to[b-oanx12vtwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.15rem 1rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: #fffdfa;
    text-align: center;
}

.pay-to-qr[b-oanx12vtwm] {
    width: min(210px, 65%);
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.pay-to-hint[b-oanx12vtwm] {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Label/value rows (account name, number, bank) — a <dl>, since that's
   what these pairs actually are. Rows the studio hasn't filled in are
   dropped before render, so there are never empty lines here. */
.pay-to-details[b-oanx12vtwm] {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pay-to-row[b-oanx12vtwm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    border-bottom: 1px dashed var(--border);
}

.pay-to-row:last-child[b-oanx12vtwm] {
    border-bottom: none;
}

.pay-to-row dt[b-oanx12vtwm] {
    color: var(--text-light);
    white-space: nowrap;
}

.pay-to-row dd[b-oanx12vtwm] {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.pay-to-instructions[b-oanx12vtwm] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.pay-to-note[b-oanx12vtwm] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* ── Ticket cards ─────────────────────────────────────────────
   The review card and the booking summary both read as printed tickets: a
   pair of notches and a dashed tear line sit just below the heading,
   turning it into the stub. The notches are real transparent cut-outs via
   mask (not solid-coloured circles), so they work over the page's pink
   gradient — and, for the summary, over the white form card behind it —
   rather than only over one flat colour. Each card sets its own --tear-y
   (measured from its heading + padding) and --notch-r below. */
.checkout-review[b-oanx12vtwm],
.summary-box[b-oanx12vtwm] {
    position: relative;
    -webkit-mask-image:
        radial-gradient(circle var(--notch-r) at left var(--tear-y), transparent 97%, #000 100%),
        radial-gradient(circle var(--notch-r) at right var(--tear-y), transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle var(--notch-r) at left var(--tear-y), transparent 97%, #000 100%),
        radial-gradient(circle var(--notch-r) at right var(--tear-y), transparent 97%, #000 100%);
    mask-composite: intersect;
}

.checkout-review[b-oanx12vtwm]::before,
.summary-box[b-oanx12vtwm]::before {
    content: "";
    position: absolute;
    top: var(--tear-y);
    left: calc(var(--notch-r) + 8px);
    right: calc(var(--notch-r) + 8px);
    border-top: 2px dashed var(--border);
    pointer-events: none;
}

.checkout-review[b-oanx12vtwm] {
    --tear-y: 3.1rem;
    --notch-r: 13px;
    border-radius: 10px;
}

/* Smaller notches — this card is narrower and more compact than the
   review panel, so 13px reads as oversized here. */
.summary-box[b-oanx12vtwm] {
    --tear-y: 2.45rem;
    --notch-r: 10px;
}

/* Match the summary's existing pink dashed row separators. */
.summary-box[b-oanx12vtwm]::before {
    border-top-color: rgba(250, 22, 137, 0.25);
}

/* Section splits become perforations too, matching the tear line. */
.checkout-review .review-divider[b-oanx12vtwm] {
    border-top-style: dashed;
}
/* /Components/Pages/Classes.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CLASSES — timetable & pricing
   ═══════════════════════════════════════════ */

/* (Class-types accordion removed — the section now uses the reusable
   .split-* layout defined in app.css.) */

/* ── Per instructor ─────────────────────────── */
/* Perspective on the grid, not the photo itself, is what gives the
   .reveal-flip animation actual 3D depth instead of a flat squash. */
#per-instructor .auto-grid[b-4tpwsw7b5b] {
    perspective: 1200px;
}

.instructor-card[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
}

.instructor-photo[b-4tpwsw7b5b] {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--plum-500), var(--pink-500));
}

.instructor-photo img[b-4tpwsw7b5b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.instructor-body[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    align-items: center;
    text-align: center;
}

.instructor-body h3[b-4tpwsw7b5b] {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.instructor-role[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--secondary);
}

.instructor-classes[b-4tpwsw7b5b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-block: var(--space-xs) var(--space-md);
}

.instructor-classes li[b-4tpwsw7b5b] {
    padding: 0.22rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pink-700);
    background: var(--pink-100);
    border-radius: var(--radius-pill);
}

/* ── Timetable ──────────────────────────────── */
.timetable-section[b-4tpwsw7b5b] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* Let the timetable run wider than the standard 1180px container so the
   week grid has more room to breathe. */
.timetable-section .container[b-4tpwsw7b5b] {
    max-width: min(96vw, 1560px);
}

/* ── FullCalendar timetable ─────────────────── */
/* The calendar DOM is built by JS, so it doesn't carry this stylesheet's
   scope attribute — reach its .fc-* classes with ::deep. */
.timetable-calendar[b-4tpwsw7b5b] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    font-size: var(--step--1);
}

/* Brand the toolbar buttons (default FullCalendar blue → studio pink) */
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    box-shadow: none;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:disabled {
    background: color-mix(in srgb, var(--primary) 45%, #fff);
    border-color: transparent;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-toolbar-title {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-col-header-cell-cushion,
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-timegrid-axis-cushion,
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-list-day-text {
    color: var(--ink-700);
    text-decoration: none;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-event {
    border: none;
    padding: 1px 3px;
    font-weight: 600;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-today-button {
    text-transform: capitalize;
}

/* Highlight the current day column subtly, in brand tint */
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-day-today {
    background: var(--surface-tint) !important;
}

@media (max-width: 640px) {
    .timetable-calendar[b-4tpwsw7b5b]  .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.timetable-note[b-4tpwsw7b5b] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: center;
    margin-top: var(--space-md);
    font-size: var(--step--1);
    color: var(--text-light);
}

.timetable-note i[b-4tpwsw7b5b] {
    color: var(--primary);
}

/* ── Pricing ────────────────────────────────── */
.price-card[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
}

.price-card.featured[b-4tpwsw7b5b] {
    border-color: var(--primary);
    border-width: 2px;
    background: linear-gradient(165deg, #fff 55%, var(--pink-50) 100%);
    box-shadow: var(--shadow-md);
}

.price-card .badge[b-4tpwsw7b5b] {
    align-self: center;
}

.price-name[b-4tpwsw7b5b] {
    font-size: var(--step-1);
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.price-amount[b-4tpwsw7b5b] {
    font-size: var(--step-3);
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}

.price-amount small[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--secondary);
}

.price-desc[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    color: var(--text-light);
    margin-bottom: var(--space-md);
}
/* /Components/Pages/ContactUs.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CONTACT US
   ═══════════════════════════════════════════ */

/* Light band so the whole contact block reads separate from the pink
   "Beyond the timetable" section below it. */
.contact-section[b-w2hsolrxvj] {
    background: var(--surface-cream);
}

/* ── Two columns: (info + message intro) | (map + form) ─────── */
.contact-two-col[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.contact-col[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* Let the column shrink below its content's intrinsic width so the grid
       track can't be propped wider than the viewport (form inputs and the
       map iframe otherwise force horizontal overflow on narrow screens). */
    min-width: 0;
}

/* Form controls default to an intrinsic min-width — clamp them so they
   shrink with the column instead of overflowing it. */
.contact-col .input[b-w2hsolrxvj],
.contact-col textarea[b-w2hsolrxvj],
.contact-col select[b-w2hsolrxvj],
.contact-col .field[b-w2hsolrxvj] {
    min-width: 0;
    max-width: 100%;
}

/* Info as a plain icon list — no cards */
.contact-info[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-line[b-w2hsolrxvj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
}

/* Let the text column shrink and long values (email, URLs) wrap instead of
   forcing the row wider than the screen. */
.contact-line > *[b-w2hsolrxvj] {
    min-width: 0;
}

.contact-line p[b-w2hsolrxvj],
.contact-line a[b-w2hsolrxvj] {
    overflow-wrap: anywhere;
}

.contact-line-icon[b-w2hsolrxvj] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--primary);
    font-size: 1.15rem;
}

.contact-line h2[b-w2hsolrxvj] {
    margin: 0 0 0.15rem;
    font-size: var(--step-1);
    color: var(--ink-800);
}

.contact-line p[b-w2hsolrxvj] {
    margin: 0;
    color: var(--text-light);
}

.contact-line a[b-w2hsolrxvj] {
    font-weight: 600;
}

/* Map fills the right column */
.contact-map[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .contact-two-col[b-w2hsolrxvj] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* ── Map ────────────────────────────────────── */
.map-frame[b-w2hsolrxvj] {
    position: relative;
    flex: 1;
    min-height: 380px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.map-frame iframe[b-w2hsolrxvj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-note[b-w2hsolrxvj] {
    margin-top: var(--space-sm);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

.map-note i[b-w2hsolrxvj] {
    margin-right: 0.4rem;
    color: var(--primary);
}

.map-note a[b-w2hsolrxvj] {
    font-weight: 600;
}

@media (max-width: 640px) {
    .map-frame[b-w2hsolrxvj] {
        aspect-ratio: 4 / 3;
        /* Drop the 380px floor: with it, aspect-ratio widens the frame to
           380×4/3 = 507px and overflows narrow screens. Letting the width
           (100% of the column) drive the height keeps it inside the page. */
        min-height: 0;
        flex: none;
        width: 100%;
    }
}

/* ── Detail tiles ───────────────────────────── */
.contact-tile[b-w2hsolrxvj] {
    padding: var(--space-lg);
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.contact-tile:hover[b-w2hsolrxvj] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.contact-icon[b-w2hsolrxvj] {
    display: grid;
    place-items: center;
    width: 50px;
    aspect-ratio: 1;
    margin: 0 auto var(--space-sm);
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--primary);
    font-size: 1.15rem;
}

.contact-tile h2[b-w2hsolrxvj] {
    font-size: var(--step-0);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.contact-tile p[b-w2hsolrxvj] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

.contact-tile a[b-w2hsolrxvj] {
    color: var(--secondary);
    text-decoration: none;
    word-break: break-word;
}

.contact-tile a:hover[b-w2hsolrxvj] {
    text-decoration: underline;
}

/* ── Form layout ────────────────────────────── */
.form-section[b-w2hsolrxvj] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.contact-grid[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-intro > .prose[b-w2hsolrxvj] {
    margin-block: var(--space-md) var(--space-lg);
}

.contact-socials[b-w2hsolrxvj] {
    display: flex;
    gap: 0.7rem;
}

.contact-socials a[b-w2hsolrxvj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.contact-socials a:hover[b-w2hsolrxvj] {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-3px);
}

/* ── The form itself ────────────────────────── */
.contact-form-wrap[b-w2hsolrxvj] {
    padding: var(--space-xl);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* The <form> is rendered by the EditForm child component, so it does not
   receive this stylesheet's scope attribute — reach it with ::deep. */
.contact-form-wrap[b-w2hsolrxvj]  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-row[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-md);
}

.form-disclaimer[b-w2hsolrxvj] {
    text-align: center;
    margin-top: calc(-1 * var(--space-2xs));
}

.form-error[b-w2hsolrxvj] {
    text-align: center;
    color: #c0392b;
}

/* ValidationMessage is also a child component. */
.contact-form-wrap[b-w2hsolrxvj]  .validation-message {
    font-size: var(--step--1);
    color: var(--danger);
}

/* ── Success state ──────────────────────────── */
.form-success[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    text-align: center;
}

.success-icon[b-w2hsolrxvj] {
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    font-size: 1.8rem;
}

.form-success h3[b-w2hsolrxvj] {
    color: var(--primary);
    font-size: var(--step-2);
}

.form-success p[b-w2hsolrxvj] {
    font-size: var(--step--1);
    color: var(--text-light);
    max-width: 44ch;
    line-height: 1.7;
}

/* ── Other services ─────────────────────────── */
.service-card[b-w2hsolrxvj] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

/* Gradient accent strip along the top */
.service-card[b-w2hsolrxvj]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.service-card:hover[b-w2hsolrxvj] {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.service-card:hover[b-w2hsolrxvj]::before {
    transform: scaleX(1);
}

.service-num[b-w2hsolrxvj] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--primary);
    opacity: 0.45;
}

.service-card h3[b-w2hsolrxvj] {
    font-size: var(--step-1);
    color: var(--ink-800);
    margin: 0;
}

.service-card p[b-w2hsolrxvj] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

.service-arrow[b-w2hsolrxvj] {
    margin-top: var(--space-sm);
    color: var(--primary);
    transform: translateX(-4px);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.service-card:hover .service-arrow[b-w2hsolrxvj] {
    transform: translateX(0);
    opacity: 1;
}

.services-pointer[b-w2hsolrxvj] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

/* ── FAQ (native disclosure widgets) ────────── */
.faq[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item[b-w2hsolrxvj] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.faq-item:hover[b-w2hsolrxvj] {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.faq-item summary[b-w2hsolrxvj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--ink-800);
    cursor: pointer;
    list-style: none;
}

.faq-item summary[b-w2hsolrxvj]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-w2hsolrxvj]::marker {
    content: "";
}

.faq-icon[b-w2hsolrxvj] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary);
    transition: transform var(--dur) var(--ease-out);
}

.faq-item[open] .faq-icon[b-w2hsolrxvj] {
    transform: rotate(45deg);
}

.faq-item[open] summary[b-w2hsolrxvj] {
    color: var(--primary);
}

.faq-item p[b-w2hsolrxvj] {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--step--1);
    line-height: 1.75;
    color: var(--text-light);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 880px) {
    .contact-grid[b-w2hsolrxvj] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 520px) {
    .contact-form-wrap[b-w2hsolrxvj] {
        padding: var(--space-lg) var(--space-md);
    }
}
/* /Components/Pages/Events.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════ */

/* ── Announcement bar ───────────────────────── */
.announce-bar[b-3fj7y63amc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.announce-tag[b-3fj7y63amc] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
}

.announce-bar p[b-3fj7y63amc] {
    flex: 1;
    min-width: 220px;
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

.blog-teaser[b-3fj7y63amc] {
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

/* ── Featured event ─────────────────────────── */
.feature-event[b-3fj7y63amc] {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.feature-media[b-3fj7y63amc] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    font-size: clamp(4rem, 10vw, 7rem);
    background: var(--grad-brand);
}

/* Past-event photo fills the media panel */
.feature-media img[b-3fj7y63amc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The showcase poster is portrait — show it whole (no crop) on a black mat
   that blends with the poster's own background. */
.past-event .feature-media[b-3fj7y63amc] {
    background: #050505;
}

.past-event .feature-media img[b-3fj7y63amc] {
    object-fit: contain;
}

.past-badge[b-3fj7y63amc] {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(28, 0, 32, 0.72);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.feature-body[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-xl);
}

.feature-body h2[b-3fj7y63amc] {
    font-size: var(--step-3);
    color: var(--primary);
}

.feature-lead[b-3fj7y63amc] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    max-width: 52ch;
}

.feature-meta[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    padding-block: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.feature-meta li[b-3fj7y63amc] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--step--1);
    color: var(--text-light);
}

.feature-meta i[b-3fj7y63amc] {
    width: 1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.feature-meta strong[b-3fj7y63amc] {
    color: var(--ink-800);
    margin-right: 0.35rem;
}

/* ── Upcoming events ────────────────────────── */
.upcoming-section[b-3fj7y63amc] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.event-card[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
}

.event-date[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--grad-pink);
    color: #fff;
}

.event-month[b-3fj7y63amc] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.9;
}

.event-day[b-3fj7y63amc] {
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.1;
}

.event-body[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    padding: var(--space-lg);
    align-items: flex-start;
}

.event-body h3[b-3fj7y63amc] {
    color: var(--ink-800);
    font-size: var(--step-1);
}

.event-body p[b-3fj7y63amc] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

/* ── Steps ──────────────────────────────────── */
.step-card[b-3fj7y63amc] {
    position: relative;
    padding: var(--space-lg);
    padding-top: var(--space-xl);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.step-num[b-3fj7y63amc] {
    position: absolute;
    top: calc(-1 * var(--space-sm));
    left: var(--space-lg);
    display: grid;
    place-items: center;
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--grad-pink);
    color: #fff;
    font-size: var(--step-0);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.step-card h3[b-3fj7y63amc] {
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.step-card p[b-3fj7y63amc] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .feature-event[b-3fj7y63amc] {
        grid-template-columns: 1fr;
    }

    .feature-media[b-3fj7y63amc] {
        min-height: 180px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   HOMEPAGE
   ═══════════════════════════════════════════════════════════ */

/* ── SECTION 1 · VSL JUMBOTRON ─────────────────────────────── */
/* Full-bleed showcase band: copy sets up the video, video dominates. */
.jumbotron[b-fm6wgpyh6q] {
    position: relative;
    padding-block: var(--space-2xl) var(--space-3xl);
    background: linear-gradient(165deg,
                var(--ink-900) 0%,
                var(--ink-800) 42%,
                #4a0f3d 100%);
    overflow: clip;
    isolation: isolate;
}

/* Brand glow bleeding in from the top corners */
.jumbotron[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    translate: -50% 0;
    width: min(1100px, 130vw);
    aspect-ratio: 1;
    background: radial-gradient(circle,
                rgba(250, 22, 137, 0.34) 0%,
                rgba(160, 79, 210, 0.18) 42%,
                transparent 68%);
    pointer-events: none;
    z-index: -1;
}

/* (Bottom fade removed — the diagonal slice now defines the lower edge.) */


/* ── Ambient background video ───────────────────────────────── */
.jumbo-bg[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Tone it down so the copy stays legible on top */
    opacity: 0.55;
    filter: saturate(1.15);
}

/* Darkening scrim between the video and the text */
.jumbo-scrim[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(28, 0, 32, 0.30) 0%, rgba(28, 0, 32, 0.78) 78%),
        linear-gradient(180deg, rgba(28, 0, 32, 0.55) 0%, rgba(28, 0, 32, 0.35) 45%, rgba(28, 0, 32, 0.80) 100%);
}

/* Content must sit above the video + scrim */
.jumbo-inner[b-fm6wgpyh6q] {
    position: relative;
    z-index: 3;
}

/* If the visitor prefers less motion, hold a still frame instead */
@media (prefers-reduced-motion: reduce) {
    .jumbo-bg[b-fm6wgpyh6q] {
        display: none;
    }

    .jumbotron[b-fm6wgpyh6q] {
        background-image: linear-gradient(rgba(28, 0, 32, 0.72), rgba(28, 0, 32, 0.72)),
                          url("/images/vsl-poster.jpg");
        background-size: cover;
        background-position: center;
    }
}

.jumbo-inner[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: min(58vh, 520px);
    justify-content: center;
}

/* ── Copy above the video ──────────────────────────────────── */
.jumbo-copy[b-fm6wgpyh6q] {
    max-width: 44rem;
    margin-bottom: var(--space-xl);
}

.jumbo-eyebrow[b-fm6wgpyh6q] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--pink-300);
    margin-bottom: var(--space-sm);
}

.jumbo-title[b-fm6wgpyh6q] {
    font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4.15rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    margin-bottom: var(--space-md);
}

.jumbo-title em[b-fm6wgpyh6q] {
    display: block;
    font-style: normal;
    background: linear-gradient(100deg, var(--pink-400) 0%, var(--plum-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Typewriter reveal: each line clips in from the right, one after
   another, then a blinking caret picks up where the last line ends.
   clip-path (not width) is used so it doesn't depend on knowing the
   text's pixel width in this font. ── */
.type-line[b-fm6wgpyh6q] {
    display: block;
    clip-path: inset(0 100% 0 0);
    animation-fill-mode: forwards;
    animation-timing-function: steps(var(--type-steps, 10), end);
}

.type-line-1[b-fm6wgpyh6q] { --type-steps: 12; animation: type-reveal-b-fm6wgpyh6q 0.72s steps(12, end) 0.2s forwards; }
.type-line-2[b-fm6wgpyh6q] { --type-steps: 15; animation: type-reveal-b-fm6wgpyh6q 0.9s steps(15, end) 1.07s forwards; }
.type-line-3[b-fm6wgpyh6q] { --type-steps: 10; animation: type-reveal-b-fm6wgpyh6q 0.6s steps(10, end) 2.12s forwards; }

@keyframes type-reveal-b-fm6wgpyh6q {
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .type-line[b-fm6wgpyh6q] {
        clip-path: none;
        animation: none;
    }
}

.jumbo-lead[b-fm6wgpyh6q] {
    font-size: var(--step-1);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.76);
    max-width: 38rem;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    text-wrap: pretty;
}

.jumbo-actions[b-fm6wgpyh6q] {
    --gap: var(--space-sm);
    justify-content: center;
}

/* Ghost button that reads correctly on the dark band */
.jumbo-btn-ghost[b-fm6wgpyh6q] {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
}

.jumbo-btn-ghost:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── The VSL player ────────────────────────────────────────── */
.vsl-frame[b-fm6wgpyh6q] {
    position: relative;
    width: 100%;
    max-width: 60rem;      /* the star of the section */
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #000;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.10),
                0 0 70px -12px rgba(250, 22, 137, 0.45);
}

.vsl-poster[b-fm6wgpyh6q] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    cursor: pointer;
}

.vsl-poster-img[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.vsl-poster[b-fm6wgpyh6q]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(28, 0, 32, 0.18) 0%,
                rgba(28, 0, 32, 0.62) 100%);
}

.vsl-poster:hover .vsl-poster-img[b-fm6wgpyh6q] {
    transform: scale(1.04);
}

.vsl-play[b-fm6wgpyh6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(66px, 8vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary);
    font-size: clamp(1.25rem, 1.9vw, 1.85rem);
    padding-left: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out);
}

/* Pulsing ring */
.vsl-play[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: vsl-pulse-b-fm6wgpyh6q 2.4s var(--ease-out) infinite;
}

@keyframes vsl-pulse-b-fm6wgpyh6q {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}

.vsl-poster:hover .vsl-play[b-fm6wgpyh6q] {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.vsl-label[b-fm6wgpyh6q] {
    position: absolute;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    z-index: 2;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.vsl-embed[b-fm6wgpyh6q],
.vsl-player[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Dismiss the opened player and return to the copy */
.jumbo-close[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-md);
    padding: 0.5rem 1.1rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.jumbo-close:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── Proof points under the video ──────────────────────────── */
.jumbo-proof[b-fm6wgpyh6q] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) var(--space-xl);
    margin-top: var(--space-lg);
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.7);
}

.jumbo-proof li[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.jumbo-proof li[b-fm6wgpyh6q]::before {
    content: "✓";
    font-weight: 800;
    color: var(--pink-300);
}

.jumbo-proof strong[b-fm6wgpyh6q] {
    color: #fff;
    font-weight: 700;
}

/* ── Quick booking: two simple cards ───────────────────────────── */
.book-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.book-card[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: var(--space-xl);
    /* Translucent frosted card so the pink section shows through */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.book-card:hover[b-fm6wgpyh6q] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.book-card h3[b-fm6wgpyh6q] {
    margin: 0;
    color: var(--primary);
    font-size: var(--step-2);
}

.book-card p[b-fm6wgpyh6q] {
    margin: 0 0 var(--space-md);
    color: var(--text-light);
}

.book-card .btn[b-fm6wgpyh6q] {
    margin-top: auto;
}

@media (max-width: 640px) {
    .book-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
    }
}

/* ── Jumbotron responsive ──────────────────────────────────── */
@media (max-width: 700px) {
    .jumbotron[b-fm6wgpyh6q] {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .vsl-frame[b-fm6wgpyh6q] {
        border-radius: var(--radius-lg);
    }

    .jumbo-proof[b-fm6wgpyh6q] {
        gap: var(--space-2xs) var(--space-md);
    }
}

/* ── SECTION 2 · Intro ─────────────────────────────────────── */
.intro-prose[b-fm6wgpyh6q] {
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ── SECTION 2b · Showcase / gallery (auto-scroll marquee) ── */
/* Two rows drifting in opposite directions; images are bigger and the loop
   is seamless (each row's set is duplicated). Pauses on hover. */
.gallery-marquee[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.gm-row[b-fm6wgpyh6q] {
    overflow: hidden;
}

.gm-track[b-fm6wgpyh6q] {
    display: flex;
    gap: var(--space-md);
    width: max-content;
    /* Duration is set per-row from Home.razor (--gm-duration) so speed
       stays constant regardless of how many slides are in the CMS list;
       50s is just the fallback for the pre-duplication track width. */
    animation: gm-scroll-b-fm6wgpyh6q var(--gm-duration, 50s) linear infinite;
}

.gm-row--right .gm-track[b-fm6wgpyh6q] {
    animation-direction: reverse;
}

/* Pause on hover (mouse) and on focus-within (keyboard) — a tile is
   individually focusable (see .split-thumb in Home.razor), so tabbing
   onto one must stop the row, otherwise the focus ring keeps sliding
   out from under the visitor. Hover-only left touch/keyboard users with
   no way to pause continuously-moving content (WCAG 2.2.2). */
.gm-row:hover .gm-track[b-fm6wgpyh6q],
.gm-row:focus-within .gm-track[b-fm6wgpyh6q] {
    animation-play-state: paused;
}

@keyframes gm-scroll-b-fm6wgpyh6q {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.gm-cell[b-fm6wgpyh6q] {
    flex: 0 0 auto;
    margin: 0;
    width: clamp(220px, 20vw, 320px);
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--ink-800);
}

.gm-cell img[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reduced motion: stop the drift, allow manual horizontal scroll instead */
@media (prefers-reduced-motion: reduce) {
    .gm-track[b-fm6wgpyh6q] { animation: none; }
    .gm-row[b-fm6wgpyh6q] { overflow-x: auto; }
}

.gallery-tile[b-fm6wgpyh6q] {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(150deg, var(--pink-400), var(--plum-500));
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.gallery-tile:hover[b-fm6wgpyh6q],
.gallery-tile:focus-visible[b-fm6wgpyh6q] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.gallery-tile:nth-child(even)[b-fm6wgpyh6q] {
    background: linear-gradient(150deg, var(--plum-500), var(--pink-600));
}

/* Light sweep across the tile on hover */
.gallery-tile[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease-out);
    pointer-events: none;
}

.gallery-tile:hover[b-fm6wgpyh6q]::before,
.gallery-tile:focus-visible[b-fm6wgpyh6q]::before {
    transform: translateX(120%);
}

/* Uniform IG grid — legacy mosaic spans are neutralised. */
.tile-tall[b-fm6wgpyh6q],
.tile-wide[b-fm6wgpyh6q] {
    grid-row: auto;
    grid-column: auto;
}

/* Real photo fills the tile; gentle zoom on hover. */
.gallery-img[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.gallery-tile:hover .gallery-img[b-fm6wgpyh6q],
.gallery-tile:focus-visible .gallery-img[b-fm6wgpyh6q] {
    transform: scale(1.06);
}

/* "Expand" affordance revealed on hover */
.gallery-view[b-fm6wgpyh6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    font-size: 1.15rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring);
    pointer-events: none;
}

.gallery-tile:hover .gallery-view[b-fm6wgpyh6q],
.gallery-tile:focus-visible .gallery-view[b-fm6wgpyh6q] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-cap[b-fm6wgpyh6q] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(28, 0, 32, 0.75));
}

@media (max-width: 620px) {
    /* Keep the three-column IG layout, just tighten the caption */
    .gallery-cap[b-fm6wgpyh6q] {
        font-size: 0.72rem;
        padding: var(--space-2xs) var(--space-sm);
    }
}

/* ── Gallery lightbox / carousel ───────────────────────────── */
.gallery-modal[b-fm6wgpyh6q] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(17, 0, 22, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.gallery-modal.is-open[b-fm6wgpyh6q] {
    opacity: 1;
    visibility: visible;
}

.gm-stage[b-fm6wgpyh6q] {
    position: relative;
    margin: 0;
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.4s var(--ease-spring);
}

.gallery-modal.is-open .gm-stage[b-fm6wgpyh6q] {
    transform: none;
}

.gm-slide[b-fm6wgpyh6q] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--ink-900);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: gm-slide-in-b-fm6wgpyh6q 0.45s var(--ease-out);
}

@keyframes gm-slide-in-b-fm6wgpyh6q {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: none; }
}

/* Whole photo shown in the lightbox (no crop) on a dark backdrop. */
.gm-img[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gm-caption[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.gm-count[b-fm6wgpyh6q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}

.gm-close[b-fm6wgpyh6q],
.gm-nav[b-fm6wgpyh6q] {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gm-close:hover[b-fm6wgpyh6q],
.gm-nav:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.3);
}

.gm-close[b-fm6wgpyh6q] {
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
}

.gm-close:hover[b-fm6wgpyh6q] {
    transform: rotate(90deg);
}

.gm-nav[b-fm6wgpyh6q] {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
}

.gm-nav:hover[b-fm6wgpyh6q] {
    transform: translateY(-50%) scale(1.08);
}

.gm-prev[b-fm6wgpyh6q] { left: clamp(0.5rem, 2vw, 1.5rem); }
.gm-next[b-fm6wgpyh6q] { right: clamp(0.5rem, 2vw, 1.5rem); }

.gm-dots[b-fm6wgpyh6q] {
    position: absolute;
    left: 50%;
    bottom: clamp(0.75rem, 3vw, 2rem);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.gm-dot[b-fm6wgpyh6q] {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gm-dot:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.7);
}

.gm-dot.active[b-fm6wgpyh6q] {
    background: #fff;
    transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-art[b-fm6wgpyh6q] { animation: none; }
    .gm-slide[b-fm6wgpyh6q] { animation: none; }
    .gallery-modal[b-fm6wgpyh6q],
    .gm-stage[b-fm6wgpyh6q],
    .gm-close[b-fm6wgpyh6q],
    .gm-nav[b-fm6wgpyh6q],
    .gm-dot[b-fm6wgpyh6q] { transition: none; }
    .gm-stage[b-fm6wgpyh6q] { transform: none; }
}

/* ── SECTION 3 · Why choose us ─────────────────────────────── */
.why[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.why-card[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.why-card h3[b-fm6wgpyh6q] {
    color: var(--primary);
}

.why-card p[b-fm6wgpyh6q] {
    font-size: var(--step--1);
    color: var(--text-light);
    line-height: 1.7;
}

.why-icon[b-fm6wgpyh6q] {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--space-2xs);
}

.section-cta[b-fm6wgpyh6q] {
    margin-top: var(--space-xl);
}

/* ── SECTION 4 · Explore trio ──────────────────────────────── */
/* Alternating editorial rows — media on one side, copy on the other,
   flipping sides down the page. Reads more premium than three tiles. */
.explore-rows[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.explore-row[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

/* Flip every second row so the media alternates left/right */
.explore-row:nth-child(even)[b-fm6wgpyh6q] {
    flex-direction: row-reverse;
}

.explore-media[b-fm6wgpyh6q] {
    position: relative;
    flex: 0 0 54%;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    font-size: clamp(3rem, 7vw, 5rem);
    box-shadow: var(--shadow-md);
    background: var(--grad-brand);
    overflow: hidden;
}

/* Drop-in photo overlays the emoji; onerror falls back to the emoji. */
.media-photo[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.media-classes[b-fm6wgpyh6q] { background: linear-gradient(135deg, var(--pink-500), var(--plum-500)); }
.media-events[b-fm6wgpyh6q]  { background: linear-gradient(135deg, var(--plum-500), var(--pink-400)); }
.media-rentals[b-fm6wgpyh6q] { background: linear-gradient(135deg, var(--pink-600), var(--pink-400)); }

.explore-body[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    flex: 1;
}

.explore-index[b-fm6wgpyh6q] {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.explore-body h3[b-fm6wgpyh6q] {
    color: var(--ink-800);
    margin: 0;
}

.explore-body p[b-fm6wgpyh6q] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
}

/* Stack on smaller screens — media always sits above the copy */
@media (max-width: 760px) {
    .explore-row[b-fm6wgpyh6q],
    .explore-row:nth-child(even)[b-fm6wgpyh6q] {
        flex-direction: column;
    }

    .explore-media[b-fm6wgpyh6q] {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ── SECTION 5 · About teaser + studio specs ───────────────── */
.teaser-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
    align-items: center;
}

.teaser-copy > .prose[b-fm6wgpyh6q] {
    margin-block: var(--space-md) var(--space-lg);
}

.studio-specs[b-fm6wgpyh6q] {
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.specs-title[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: var(--space-md);
}

.specs-list[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-lg);
}

.specs-list li[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-sm);
    padding-block: 0.6rem;
    font-size: var(--step--1);
    border-bottom: 1px solid var(--border-subtle);
}

.specs-list li:last-child[b-fm6wgpyh6q] {
    border-bottom: 0;
}

.spec-k[b-fm6wgpyh6q] {
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    padding-top: 0.15rem;
}

.spec-v[b-fm6wgpyh6q] {
    color: var(--text-light);
    line-height: 1.55;
}

/* ── SECTION 6 · Testimonials ──────────────────────────────── */
.testimonials[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* Plain section block — no card. Quote sits large and centred on the band. */
.quote-block[b-fm6wgpyh6q] {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: var(--ink-800);
}

.quote-block blockquote[b-fm6wgpyh6q] {
    margin: 0;
}

.quote-block blockquote p[b-fm6wgpyh6q] {
    font-size: var(--step-2);
    line-height: 1.6;
    max-width: 54ch;
    margin-inline: auto;
    color: var(--ink-700);
    font-style: italic;
}

.quote-block figcaption[b-fm6wgpyh6q] {
    margin-top: var(--space-md);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--step--1);
    color: var(--primary);
}

.quote-dots[b-fm6wgpyh6q] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
}

.quote-dot[b-fm6wgpyh6q] {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    transition: background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.quote-dot:hover[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--primary) 55%, transparent);
}

.quote-dot.active[b-fm6wgpyh6q] {
    background: var(--primary);
    transform: scale(1.45);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .teaser-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .quote-block blockquote p[b-fm6wgpyh6q] {
        font-size: var(--step-1);
    }

    .specs-list li[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════ */

.login-section[b-g5dhjou7e9] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.login-wrap[b-g5dhjou7e9] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 300px);
    gap: var(--space-xl);
    align-items: center;
    justify-content: center;
}

/* ── Card ───────────────────────────────────── */
.login-card[b-g5dhjou7e9] {
    padding: var(--space-xl);
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.login-logo[b-g5dhjou7e9] {
    width: clamp(84px, 10vw, 108px);
    height: auto;
    margin: 0 auto var(--space-sm);
    object-fit: contain;
}

.login-card h1[b-g5dhjou7e9] {
    font-size: var(--step-3);
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.login-sub[b-g5dhjou7e9] {
    font-size: var(--step--1);
    color: var(--text-light);
    margin-bottom: var(--space-lg);
}

.login-notice[b-g5dhjou7e9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--ink-700);
    background: var(--pink-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.login-notice i[b-g5dhjou7e9] {
    flex-shrink: 0;
    margin-top: 0.25em;
    color: var(--primary);
}

/* ── Sign-in provider buttons ───────────────── */
.provider-buttons[b-g5dhjou7e9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: left;
}

.provider-btn[b-g5dhjou7e9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.provider-btn:hover[b-g5dhjou7e9] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.provider-btn i[b-g5dhjou7e9] {
    font-size: 1rem;
}

.provider-google[b-g5dhjou7e9] {
    color: var(--ink-800);
    background: #fff;
}

.provider-google i[b-g5dhjou7e9] {
    color: #ea4335;
}

.provider-facebook[b-g5dhjou7e9] {
    color: #fff;
    background: #1877f2;
    border-color: #1877f2;
}

.provider-email[b-g5dhjou7e9] {
    color: var(--ink-700);
    background: var(--surface);
}

/* Genuinely inert until Entra is configured — href is omitted in markup,
   this just gives it the visual "not available yet" treatment to match. */
.provider-btn.is-disabled[b-g5dhjou7e9] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.provider-divider[b-g5dhjou7e9] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 0.15rem;
    text-align: center;
}

.provider-divider[b-g5dhjou7e9]::before,
.provider-divider[b-g5dhjou7e9]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.provider-divider span[b-g5dhjou7e9] {
    padding-inline: 0.75rem;
    font-size: var(--step--2);
    color: var(--text-subtle);
}

.login-alt[b-g5dhjou7e9] {
    margin-top: var(--space-md);
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-subtle);
}

/* ── Aside ──────────────────────────────────── */
.login-aside[b-g5dhjou7e9] {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(8px);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.login-aside h2[b-g5dhjou7e9] {
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.login-perks[b-g5dhjou7e9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: var(--space-lg);
}

.login-perks li[b-g5dhjou7e9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-light);
}

.login-perks i[b-g5dhjou7e9] {
    flex-shrink: 0;
    margin-top: 0.28em;
    font-size: 0.7rem;
    color: var(--primary);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .login-wrap[b-g5dhjou7e9] {
        grid-template-columns: minmax(0, 440px);
    }

    /* Perks read better below the form on narrow screens */
    .login-aside[b-g5dhjou7e9] {
        order: 2;
    }
}

@media (max-width: 520px) {
    .login-card[b-g5dhjou7e9] {
        padding: var(--space-lg) var(--space-md);
    }
}
/* /Components/Pages/Membership.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   MEMBERSHIP
   ═══════════════════════════════════════════ */

/* ── Pass cards ─────────────────────────────── */
.pass-card[b-a7sdkqirvw] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.pass-card:hover[b-a7sdkqirvw] {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.pass-card.featured[b-a7sdkqirvw] {
    border: 2px solid var(--primary);
    background: linear-gradient(170deg, #fff 50%, var(--pink-50) 100%);
    box-shadow: var(--shadow-md);
}

.pass-ribbon[b-a7sdkqirvw] {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.28rem 0.9rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.pass-body[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2xs);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
}

.pass-name[b-a7sdkqirvw] {
    font-size: var(--step-1);
    font-weight: 800;
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pass-validity[b-a7sdkqirvw] {
    font-size: var(--step--1);
    color: var(--text-subtle);
}

.pass-price[b-a7sdkqirvw] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    margin-block: var(--space-sm);
    font-size: var(--step-4);
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}

.pass-currency[b-a7sdkqirvw] {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--secondary);
}

/* ── Perks ──────────────────────────────────── */
.pass-perks[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    text-align: left;
}

.pass-perks li[b-a7sdkqirvw] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--step--1);
    color: var(--text-light);
    line-height: 1.55;
}

.pass-perks i[b-a7sdkqirvw] {
    flex-shrink: 0;
    margin-top: 0.28em;
    font-size: 0.7rem;
    color: var(--primary);
}

.pass-footnote[b-a7sdkqirvw] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 68ch;
    margin: var(--space-xl) auto 0;
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
    text-align: left;
}

.pass-footnote i[b-a7sdkqirvw] {
    flex-shrink: 0;
    margin-top: 0.3em;
    color: var(--primary);
}

/* ── Comparison table ───────────────────────── */
.compare-section[b-a7sdkqirvw] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.compare-section .table th[scope="row"][b-a7sdkqirvw] {
    background: var(--surface-tint);
    color: var(--ink-800);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--step--1);
}

/* ── FAQ (native disclosure widgets) ────────── */
.faq[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item[b-a7sdkqirvw] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.faq-item:hover[b-a7sdkqirvw] {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.faq-item summary[b-a7sdkqirvw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--ink-800);
    cursor: pointer;
    list-style: none;
}

/* Hide the default triangle marker */
.faq-item summary[b-a7sdkqirvw]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-a7sdkqirvw]::marker {
    content: "";
}

.faq-icon[b-a7sdkqirvw] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary);
    transition: transform var(--dur) var(--ease-out);
}

.faq-item[open] .faq-icon[b-a7sdkqirvw] {
    transform: rotate(45deg);
}

.faq-item[open] summary[b-a7sdkqirvw] {
    color: var(--primary);
}

.faq-item p[b-a7sdkqirvw] {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--step--1);
    line-height: 1.75;
    color: var(--text-light);
}
/* /Components/Pages/MyBookings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   MY BOOKINGS
   ═══════════════════════════════════════════════════════════ */

.mb-wrapper[b-2bkt6bsd69] {
    max-width: 900px;
    margin-inline: auto;
    padding: var(--space-2xl, 3rem) var(--space-md) var(--space-2xl, 3rem);
}

.mb-head[b-2bkt6bsd69] {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.mb-title[b-2bkt6bsd69] {
    margin: 0 0 0.35rem;
    font-size: var(--step-3, 2rem);
    color: var(--ink-900, var(--ink-800));
}

.mb-sub[b-2bkt6bsd69] {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ── Empty / loading state ──────────────────────────────────── */
.mb-empty[b-2bkt6bsd69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl, 3rem) var(--space-md);
    text-align: center;
    color: var(--text-light);
    background: var(--surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

/* ── Table ──────────────────────────────────────────────────── */
.mb-table-wrap[b-2bkt6bsd69] {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.mb-table[b-2bkt6bsd69] {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.mb-table thead th[b-2bkt6bsd69] {
    padding: 0.9rem 1.1rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--surface-tint);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.mb-table tbody td[b-2bkt6bsd69] {
    padding: 0.95rem 1.1rem;
    color: var(--ink-700);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    vertical-align: middle;
}

.mb-table tbody tr:last-child td[b-2bkt6bsd69] {
    border-bottom: none;
}

.mb-table tbody tr[b-2bkt6bsd69] {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.mb-table tbody tr:hover[b-2bkt6bsd69] {
    background: var(--pink-50);
}

/* Column accents */
.mb-td-ref[b-2bkt6bsd69] {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
}

.mb-td-type[b-2bkt6bsd69] {
    font-weight: 600;
    color: var(--ink-800);
}

.mb-col-amount[b-2bkt6bsd69] {
    text-align: right;
}

.mb-td-amount[b-2bkt6bsd69] {
    font-weight: 700;
    color: var(--ink-800);
}

/* ── Status badge ───────────────────────────────────────────── */
.mb-badge[b-2bkt6bsd69] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.mb-badge-paid[b-2bkt6bsd69] {
    color: #0f5132;
    background: #d1e7dd;
}

.mb-badge-pending[b-2bkt6bsd69] {
    color: #664d03;
    background: #fff3cd;
}

.mb-badge-pendingreview[b-2bkt6bsd69] {
    color: #084298;
    background: #cfe2ff;
}

.mb-badge-failed[b-2bkt6bsd69] {
    color: #842029;
    background: #f8d7da;
}

/* ── Buttons ────────────────────────────────────────────────── */
.mb-btn[b-2bkt6bsd69] {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.mb-btn-primary[b-2bkt6bsd69] {
    color: #fff;
    background: var(--grad-pink);
    box-shadow: var(--shadow-sm);
}

.mb-btn-primary:hover[b-2bkt6bsd69] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* /Components/Pages/PaymentSuccess.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   PAYMENT SUCCESS — booking ticket
   ═══════════════════════════════════════════════════════════ */

.ps-page[b-ls7lpw9b7h] {
    max-width: 620px;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-md) var(--space-3xl);
    color: var(--ink-700);
}

/* ── Loading ────────────────────────────────────────────────── */
.ps-loading[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 320px;
    color: var(--text-light);
    font-size: var(--step-0);
}

.ps-spinner[b-ls7lpw9b7h] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--pink-100);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ps-spin-b-ls7lpw9b7h 0.75s linear infinite;
}

@keyframes ps-spin-b-ls7lpw9b7h { to { transform: rotate(360deg); } }

/* ── Hero ───────────────────────────────────────────────────── */
.ps-hero[b-ls7lpw9b7h] {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.ps-check[b-ls7lpw9b7h] {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto var(--space-md);
    color: #fff;
    background: var(--grad-pink);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    animation: ps-pop-b-ls7lpw9b7h 0.5s var(--ease-spring) both;
}

.ps-check svg[b-ls7lpw9b7h] { width: 44px; height: 44px; }

.ps-check-path[b-ls7lpw9b7h] {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: ps-draw-b-ls7lpw9b7h 0.45s var(--ease-out) 0.35s forwards;
}

@keyframes ps-pop-b-ls7lpw9b7h {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes ps-draw-b-ls7lpw9b7h { to { stroke-dashoffset: 0; } }

.ps-title[b-ls7lpw9b7h] {
    margin: 0 0 var(--space-xs);
    font-size: var(--step-4);
    font-weight: 800;
    color: var(--ink-800);
}

.ps-subtitle[b-ls7lpw9b7h] {
    max-width: 46ch;
    margin: 0 auto;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text-light);
}

.ps-subtitle strong[b-ls7lpw9b7h] { color: var(--ink-700); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   TICKET
   ═══════════════════════════════════════════════════════════ */

/* Notch radius, shared by the pieces so the cut-outs line up. */
.ps-ticket[b-ls7lpw9b7h] {
    --notch: 15px;
    /* drop-shadow (not box-shadow) so the shadow follows the notched
       silhouette rather than the original rectangle. */
    filter: drop-shadow(0 12px 26px rgba(250, 22, 137, 0.16));
    animation: ps-fadein-b-ls7lpw9b7h 0.4s var(--ease-out) 0.15s both;
}

@keyframes ps-fadein-b-ls7lpw9b7h {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Main body (top of the ticket) ──────────────────────────── */
.ps-ticket-main[b-ls7lpw9b7h] {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* Punch a semicircle out of each bottom corner — the top half of the
       perforation notches. mask-composite: intersect keeps everything
       EXCEPT the union of the two circles. */
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0% 100%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 100%, transparent 96%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--notch) at 0% 100%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 100%, transparent 96%, #000 100%);
    mask-composite: intersect;
}

/* Header band */
.ps-card-band[b-ls7lpw9b7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-tint);
    border-bottom: 1px solid var(--border-subtle);
}

.ps-band-ref-group[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ps-band-label[b-ls7lpw9b7h] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ps-band-ref[b-ls7lpw9b7h] {
    font-size: var(--step-1);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--primary-dark);
}

/* Paid badge */
.ps-badge[b-ls7lpw9b7h] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.ps-badge-dot[b-ls7lpw9b7h] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ps-badge-paid[b-ls7lpw9b7h]          { color: #0f5132; background: #d1e7dd; }
.ps-badge-pendingreview[b-ls7lpw9b7h] { color: #084298; background: #cfe2ff; }
.ps-badge-failed[b-ls7lpw9b7h]        { color: #842029; background: #f8d7da; }

/* Body */
.ps-body[b-ls7lpw9b7h] {
    padding: var(--space-lg);
    padding-bottom: var(--space-xl);
    position: relative;
}

/* Dashed tear line, inset so it sits between the two notches. */
.ps-body[b-ls7lpw9b7h]::after {
    content: "";
    position: absolute;
    left: calc(var(--notch) + 6px);
    right: calc(var(--notch) + 6px);
    bottom: 0;
    border-top: 2px dashed var(--border-subtle);
}

.ps-section-label[b-ls7lpw9b7h] {
    margin: 0 0 var(--space-md);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.ps-grid[b-ls7lpw9b7h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-lg);
}

.ps-item[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ps-label[b-ls7lpw9b7h] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ps-value[b-ls7lpw9b7h] {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink-800);
    overflow-wrap: anywhere;
}

.ps-divider[b-ls7lpw9b7h] {
    height: 1px;
    margin: var(--space-lg) 0;
    background: var(--border-subtle);
}

/* ── Tear-off stub (bottom of the ticket) ───────────────────── */
.ps-ticket-stub[b-ls7lpw9b7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--ink-800);
    color: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);

    /* Bottom half of the perforation notches, matching the main piece. */
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0% 0%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 0%, transparent 96%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--notch) at 0% 0%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 0%, transparent 96%, #000 100%);
    mask-composite: intersect;
}

.ps-stub-amount[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ps-stub-amount-label[b-ls7lpw9b7h] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pink-200);
}

.ps-stub-amount-value[b-ls7lpw9b7h] {
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.ps-stub-admit[b-ls7lpw9b7h] {
    margin-top: 0.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.ps-stub-code[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

/* Faux barcode built from an irregular repeating gradient. */
.ps-barcode[b-ls7lpw9b7h] {
    width: 132px;
    height: 42px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg,
            #fff 0 2px, transparent 2px 4px,
            #fff 4px 7px, transparent 7px 8px,
            #fff 8px 9px, transparent 9px 12px,
            #fff 12px 15px, transparent 15px 17px,
            #fff 17px 18px, transparent 18px 21px);
}

.ps-stub-ref[b-ls7lpw9b7h] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Actions ────────────────────────────────────────────────── */
.ps-actions[b-ls7lpw9b7h] {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}

.ps-btn[b-ls7lpw9b7h] {
    flex: 1 1 auto;
    min-width: 170px;
    max-width: 260px;
    padding: 0.8rem 1.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.ps-btn-primary[b-ls7lpw9b7h] {
    color: #fff;
    background: var(--grad-pink);
    border: none;
    box-shadow: var(--shadow-sm);
}

.ps-btn-primary:hover[b-ls7lpw9b7h] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ps-btn-outline[b-ls7lpw9b7h] {
    color: var(--primary);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
}

.ps-btn-outline:hover[b-ls7lpw9b7h] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

/* ── Help line ──────────────────────────────────────────────── */
.ps-help[b-ls7lpw9b7h] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

.ps-help a[b-ls7lpw9b7h] { font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ps-grid[b-ls7lpw9b7h] { grid-template-columns: 1fr; }

    .ps-ticket-stub[b-ls7lpw9b7h] { flex-direction: column; align-items: stretch; text-align: left; }

    .ps-stub-code[b-ls7lpw9b7h] { align-items: flex-start; }

    .ps-barcode[b-ls7lpw9b7h] { width: 100%; }

    .ps-actions[b-ls7lpw9b7h] { flex-direction: column; align-items: stretch; }

    .ps-btn[b-ls7lpw9b7h] { max-width: none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ps-check[b-ls7lpw9b7h],
    .ps-check-path[b-ls7lpw9b7h],
    .ps-ticket[b-ls7lpw9b7h],
    .ps-spinner[b-ls7lpw9b7h] { animation: none; }

    .ps-check-path[b-ls7lpw9b7h] { stroke-dashoffset: 0; }
}
/* /Components/Pages/Rentals.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   RENTALS & OTHER SERVICES
   ═══════════════════════════════════════════ */

/* ── Rental cards ───────────────────────────── */
.rental-card[b-ivij6oywww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.rental-icon[b-ivij6oywww] {
    font-size: 2.1rem;
    line-height: 1;
    margin-bottom: var(--space-2xs);
}

.rental-card h3[b-ivij6oywww] {
    color: var(--primary);
}

.rental-card p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

.rental-rate[b-ivij6oywww] {
    margin-block: var(--space-xs) var(--space-md);
    font-weight: 700;
    color: var(--secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.74rem !important;
}

/* ── Other services ─────────────────────────── */
.services-section[b-ivij6oywww] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.service-card[b-ivij6oywww] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.service-card:hover[b-ivij6oywww] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service-icon[b-ivij6oywww] {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.service-card h3[b-ivij6oywww] {
    font-size: var(--step-0);
    color: var(--ink-800);
    margin-bottom: 0.25rem;
}

.service-card p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

/* ── Equipment list: one bordered panel with divided rows instead of
   four repeated cards — same visual language as the spec-list below. ── */
.equipment-list[b-ivij6oywww] {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.equipment-row[b-ivij6oywww] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color var(--dur) var(--ease-out);
}

.equipment-row:last-child[b-ivij6oywww] {
    border-bottom: 0;
}

.equipment-row:hover[b-ivij6oywww] {
    background: var(--bg-field);
}

.equipment-num[b-ivij6oywww] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--pink-100);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.05rem;
}

.equipment-body h3[b-ivij6oywww] {
    font-size: var(--step-0);
    color: var(--ink-800);
    margin: 0 0 0.2rem;
}

.equipment-body p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
}

@media (max-width: 500px) {
    .equipment-row[b-ivij6oywww] {
        gap: var(--space-sm);
        padding: var(--space-md);
    }
}

.services-pointer[b-ivij6oywww] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

/* ── Studio specs ───────────────────────────── */
.specs-grid[b-ivij6oywww] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
    align-items: center;
}

.spec-list[b-ivij6oywww] {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.spec-list li[b-ivij6oywww] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-sm);
    padding-block: 0.65rem;
    font-size: var(--step--1);
    border-bottom: 1px solid var(--border-subtle);
}

.spec-list li:last-child[b-ivij6oywww] {
    border-bottom: 0;
}

.spec-k[b-ivij6oywww] {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-700);
    padding-top: 0.15rem;
}

.spec-v[b-ivij6oywww] {
    color: var(--text-light);
    line-height: 1.55;
}

@media (max-width: 860px) {
    .specs-grid[b-ivij6oywww] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .spec-list li[b-ivij6oywww] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}