/* /Components/Account/Pages/Login.razor.rz.scp.css */
.account-page[b-b33jiffuks] {
    animation: fadein-b-b33jiffuks 180ms ease-out;
}

@keyframes fadein-b-b33jiffuks {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
.account-page[b-upjurlvjhi] {
    animation: fadein-b-upjurlvjhi 180ms ease-out;
}

.account-policy-check[b-upjurlvjhi] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.55rem;
    align-items: start;
    padding: 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fafaf9;
}

.account-policy-check .text-danger[b-upjurlvjhi] {
    grid-column: 2;
}

.account-policy-check a[b-upjurlvjhi] {
    font-weight: 700;
}

@keyframes fadein-b-upjurlvjhi {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
.account-page[b-hjftk4em9q] {
    animation: fadein-b-hjftk4em9q 180ms ease-out;
}

@keyframes fadein-b-hjftk4em9q {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Layout/CookieConsent.razor.rz.scp.css */
.cookie-consent[b-fo7dudl7qo] {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(26, 25, 23, 0.18);
    color: #1a1917;
}

.cookie-consent strong[b-fo7dudl7qo] {
    display: block;
    margin-bottom: 0.2rem;
    font-family: "Space Grotesk", system-ui, sans-serif;
}

.cookie-consent p[b-fo7dudl7qo] {
    margin: 0;
    color: #5f5b54;
}

.cookie-consent-actions[b-fo7dudl7qo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .cookie-consent[b-fo7dudl7qo] {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions[b-fo7dudl7qo] {
        justify-content: flex-end;
    }
}
/* /Components/Layout/InteractiveHeader.razor.rz.scp.css */
.app-shell[b-jly6o58t6t] {
    min-height: 64px;
}

.dark-shell[b-jly6o58t6t] {
    background: #14161c;
}

.brand-block[b-jly6o58t6t] {
    cursor: pointer;
    margin-right: 1.5rem;
}

.brand-logo[b-jly6o58t6t] {
    /* The dense MudBlazor toolbar is a HARD 48px. 48-56px logo heights either sat flush
       against both edges or overhung the bar's bottom border by 8px on desktop — cap under
       the bar height so the mark gets breathing room at every width. */
    height: 40px;
    width: auto;
    display: block;
}

.app-bar[b-jly6o58t6t] {
    border-bottom: 1px solid rgba(176, 172, 163, 0.22);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.layout-body[b-i0i1k1u6z3] {
    /* The app bar is a FIXED MudBlazor dense toolbar — a hard 48px at every width (it never
       grows a second row; nav items hide behind the hamburger instead). This padding used to
       assume 64px/96px bars, which stacked ~70px of dead whitespace on top of every phone
       page before content began. Keep the height in one place. */
    --app-bar-h: 48px;
    padding: 1.35rem 1.25rem 2rem;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: calc(var(--app-bar-h) + 1.35rem);
}

.site-footer[b-i0i1k1u6z3] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.25rem 2rem;
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    color: #85817a;
    font-size: 0.92rem;
}

.site-footer a[b-i0i1k1u6z3] {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.site-footer a:hover[b-i0i1k1u6z3] {
    color: #223cab;
}

#blazor-error-ui[b-i0i1k1u6z3] {
    color-scheme: light only;
    background: lightyellow !important; 
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-i0i1k1u6z3] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 900px) {
    .layout-body[b-i0i1k1u6z3] {
        /* Same 48px bar on phones; tighten the side gutters — three nested paddings
           (layout + container + panel) were eating ~30% of a 375px viewport. */
        padding: calc(var(--app-bar-h) + 0.9rem) 0.8rem 2rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ---- Palette -------------------------------------------------------------------------------
   Only the foreground tokens flip in dark mode (see design-tokens.css), so the surface and
   hairline are re-pointed for `body.eventrika-dark` in app.css. Everything here reads from these
   four locals so that override stays a four-line block. */
#components-reconnect-modal[b-vtt1crofba] {
    --rc-surface: var(--tr-card);
    --rc-line: var(--tr-line);
    --rc-accent: var(--tr-primary);
    --rc-accent-hover: var(--tr-primary-dark);
    --rc-accent-ink: #FFFFFF;

    color: var(--tr-ink);
    font-family: var(--font-sans);
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    z-index: 9999;

    /* MudBlazor styles this dialog itself — `#components-reconnect-modal { background-color:
       var(--mud-palette-background) !important }`. The surface belongs to .rc-panel here, so the
       dialog has to be see-through or Mud paints a slab behind the pill and, in blocking mode,
       over the entire viewport. Scoped CSS adds the [b-…] attribute, which is what lets an
       !important of ours outrank an !important of theirs. */
    background-color: transparent !important;
}

/* ---- Quiet mode: a status pill, not a modal ------------------------------------------------
   Opened with dialog.show(), so it isn't in the top layer and needs its own stacking + a
   pointer-events opt-out — a reconnect in progress must never swallow a click. */
#components-reconnect-modal:not(.rc-blocking)[b-vtt1crofba] {
    position: fixed;
    inset: auto auto auto 50%;
    top: var(--space-4);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - var(--space-8));
    z-index: 3000;
    pointer-events: none;
    animation: rc-drop-in-b-vtt1crofba var(--motion-base) var(--ease-standard) both;
}

#components-reconnect-modal:not(.rc-blocking) .rc-panel[b-vtt1crofba] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--rc-line);
    border-radius: var(--radius-pill);
    background: var(--rc-surface);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
}

/* ---- Blocking mode: a centered card the user has to answer --------------------------------- */
#components-reconnect-modal.rc-blocking[b-vtt1crofba] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

#components-reconnect-modal.rc-blocking .rc-panel[b-vtt1crofba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(22rem, calc(100vw - var(--space-8)));
    padding: var(--space-6);
    border: 1px solid var(--rc-line);
    border-radius: var(--radius-lg);
    background: var(--rc-surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: rc-lift-in-b-vtt1crofba var(--motion-base) var(--ease-emphasized) both;
}

#components-reconnect-modal[b-vtt1crofba]::backdrop {
    background: rgba(20, 22, 28, 0.45);
    animation: rc-fade-in-b-vtt1crofba var(--motion-base) var(--ease-standard) both;
}

/* ---- Copy ---------------------------------------------------------------------------------- */
#components-reconnect-modal p[b-vtt1crofba] {
    margin: 0;
}

.rc-line[b-vtt1crofba] {
    font-weight: 600;
}

#components-reconnect-modal.rc-blocking .rc-line[b-vtt1crofba] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.rc-detail[b-vtt1crofba] {
    margin-top: var(--space-2) !important;
    color: var(--tr-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* ---- What shows in which state --------------------------------------------------------------
   Blazor toggles its own class on the dialog as the reconnection progresses (show → retrying →
   failed, or paused → resume-failed) and each block below hangs off one of them. Note that
   `show` is NOT removed when `retrying` is added, so the first-attempt line has to opt out of
   the retry state explicitly or both lines render at once. */
.rc-state[b-vtt1crofba] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .rc-first[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-retrying .rc-retrying[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-failed .rc-failed[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-paused .rc-paused[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-resume-failed .rc-resume-failed[b-vtt1crofba] {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .rc-btn.rc-failed[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-paused .rc-btn.rc-paused[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-resume-failed .rc-btn.rc-resume-failed[b-vtt1crofba] {
    display: inline-flex;
}

/* The wrapper is only there to group the buttons in markup — `contents` keeps it out of the
   layout so the panel's own flex gap applies, and a state with no button leaves no empty row. */
.rc-actions[b-vtt1crofba] {
    display: contents;
}

/* ---- Button --------------------------------------------------------------------------------
   MudBlazor also claims `#components-reconnect-modal button` — an id selector, so it outranks a
   plain class and drags in Material's uppercase text, letter-spacing, ink, and a
   `margin: 40px auto !important`. These rules are prefixed with the id to win the specificity
   fight, and re-state the properties Mud sets rather than assuming a default. */
#components-reconnect-modal .rc-btn[b-vtt1crofba] {
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--rc-accent);
    color: var(--rc-accent-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}

#components-reconnect-modal .rc-btn:hover[b-vtt1crofba] {
    background: var(--rc-accent-hover);
}

#components-reconnect-modal .rc-btn:focus-visible[b-vtt1crofba] {
    outline: 2px solid var(--rc-accent);
    outline-offset: 2px;
}

/* ---- Spinner ------------------------------------------------------------------------------
   Only meaningful while a reconnect is actually in flight; the states that wait on the user
   drop it so a stalled page doesn't keep pretending something is happening. */
.rc-spinner[b-vtt1crofba] {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rc-line);
    border-top-color: var(--rc-accent);
    border-radius: 50%;
    animation: rc-spin-b-vtt1crofba 700ms linear infinite;
}

#components-reconnect-modal.components-reconnect-failed .rc-spinner[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-paused .rc-spinner[b-vtt1crofba],
#components-reconnect-modal.components-reconnect-resume-failed .rc-spinner[b-vtt1crofba] {
    display: none;
}

@keyframes rc-spin-b-vtt1crofba {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rc-drop-in-b-vtt1crofba {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes rc-lift-in-b-vtt1crofba {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes rc-fade-in-b-vtt1crofba {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal:not(.rc-blocking)[b-vtt1crofba],
    #components-reconnect-modal.rc-blocking .rc-panel[b-vtt1crofba],
    #components-reconnect-modal[b-vtt1crofba]::backdrop {
        animation-duration: 1ms;
    }

    .rc-spinner[b-vtt1crofba] {
        animation-duration: 2s;
    }
}
/* /Components/Pages/Admin/CreateEvent.razor.rz.scp.css */
[b-v8zpwdzyic] .fulfillment-card {
    border: 2px solid #e7e6e2;
    border-radius: 12px;
    transition: all 200ms ease;
    cursor: pointer;
}

[b-v8zpwdzyic] .fulfillment-card:hover {
    border-color: #2a4bd1;
    box-shadow: 0 4px 12px rgba(42, 75, 209, 0.1);
}

[b-v8zpwdzyic] .fulfillment-card.is-selected {
    border-color: #2a4bd1;
    background: linear-gradient(135deg, #eef2fe 0%, #ffffff 100%);
    box-shadow: 0 8px 24px rgba(42, 75, 209, 0.15);
}
/* /Components/Pages/Admin/Events.razor.rz.scp.css */
.admin-grid[b-38g1eveatf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.field[b-38g1eveatf] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.field-row[b-38g1eveatf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.text-input[b-38g1eveatf] {
    padding: 0.45rem;
}

.primary-button[b-38g1eveatf] {
    border: 0;
    border-radius: 0.45rem;
    background: #145747;
    color: #fff;
    padding: 0.6rem 0.9rem;
}

table[b-38g1eveatf] {
    width: 100%;
    border-collapse: collapse;
}

th[b-38g1eveatf],
td[b-38g1eveatf] {
    border-bottom: 1px solid #d6d4ce;
    text-align: left;
    padding: 0.45rem;
}

@media (max-width: 980px) {
    .admin-grid[b-38g1eveatf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Orders/Orders.razor.rz.scp.css */
.admin-grid[b-xq3qihjjor] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.field[b-xq3qihjjor] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.field-row[b-xq3qihjjor] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.text-input[b-xq3qihjjor] {
    padding: 0.45rem;
}

.primary-button[b-xq3qihjjor] {
    border: 0;
    border-radius: 0.45rem;
    background: #145747;
    color: #fff;
    padding: 0.6rem 0.9rem;
}

table[b-xq3qihjjor] {
    width: 100%;
    border-collapse: collapse;
}

th[b-xq3qihjjor],
td[b-xq3qihjjor] {
    border-bottom: 1px solid #d6d4ce;
    text-align: left;
    padding: 0.45rem;
}

@media (max-width: 980px) {
    .admin-grid[b-xq3qihjjor] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Scanner.razor.rz.scp.css */
.scanner-page[b-zswyp6o5kl] {
    --scanner-line: #e7e6e2;
    --scanner-ink: #1a1917;
    --scanner-muted: #5f5b54;
    display: grid;
    gap: 1rem;
}

.scanner-hero[b-zswyp6o5kl],
.scanner-card[b-zswyp6o5kl] {
    border: 1px solid var(--scanner-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(26, 25, 23, 0.07);
}

.scanner-hero[b-zswyp6o5kl] {
    padding: 1.4rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    background:
        radial-gradient(120% 120% at 100% 0%, #dce4fd 0%, #eef2fe 38%, #ffffff 76%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
}

.scanner-eyebrow[b-zswyp6o5kl] {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0e7490;
}

.scanner-hero h1[b-zswyp6o5kl],
.scanner-card-header h2[b-zswyp6o5kl],
.scanner-ticket-summary h3[b-zswyp6o5kl] {
    margin: 0;
    color: var(--scanner-ink);
}

.scanner-copy[b-zswyp6o5kl],
.scanner-card-header p[b-zswyp6o5kl],
.scanner-placeholder p[b-zswyp6o5kl],
.scanner-ticket-summary p[b-zswyp6o5kl],
.scanner-message[b-zswyp6o5kl],
.scanner-ticket-meta dt[b-zswyp6o5kl] {
    color: var(--scanner-muted);
}

.scanner-copy[b-zswyp6o5kl] {
    margin: 0.7rem 0 0;
    max-width: 48rem;
}

.scanner-hero-actions[b-zswyp6o5kl] {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.scanner-layout[b-zswyp6o5kl] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.scanner-card[b-zswyp6o5kl] {
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
}

.scanner-card-header p[b-zswyp6o5kl],
.scanner-ticket-summary p[b-zswyp6o5kl] {
    margin: 0.35rem 0 0;
}

.scanner-video-shell[b-zswyp6o5kl] {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, #1a1917 0%, #2c2a25 100%);
    min-height: 20rem;
}

.scanner-video[b-zswyp6o5kl] {
    width: 100%;
    min-height: 20rem;
    object-fit: cover;
    display: block;
}

.scanner-video-overlay[b-zswyp6o5kl] {
    position: absolute;
    inset: 15% 15%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    box-shadow: 0 0 0 9999px rgba(26, 25, 23, 0.24);
}

.scanner-manual[b-zswyp6o5kl] {
    display: grid;
    gap: 0.45rem;
}

.scanner-manual label[b-zswyp6o5kl] {
    color: var(--scanner-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.scanner-manual-row[b-zswyp6o5kl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
}

.scanner-input[b-zswyp6o5kl] {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font: inherit;
    color: var(--scanner-ink);
}

.scanner-input:focus[b-zswyp6o5kl] {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem rgba(42, 75, 209, 0.14);
}

.scanner-button[b-zswyp6o5kl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font: inherit;
    font-weight: 800;
    border: 0;
}

.scanner-button-primary[b-zswyp6o5kl],
.scanner-checkin-button[b-zswyp6o5kl] {
    background: linear-gradient(180deg, #2a4bd1 0%, #223cab 100%);
    color: #fff;
    box-shadow: 0 16px 28px rgba(42, 75, 209, 0.2);
}

.scanner-button-secondary[b-zswyp6o5kl] {
    border: 1px solid #e7e6e2;
    background: #fff;
    color: #1e2f6d;
}

.scanner-button:disabled[b-zswyp6o5kl],
.scanner-checkin-button:disabled[b-zswyp6o5kl] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.scanner-message[b-zswyp6o5kl] {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: #fafaf9;
    border: 1px solid #dce4fd;
    font-weight: 700;
}

.scanner-placeholder[b-zswyp6o5kl] {
    min-height: 12rem;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed #d6d4ce;
    background: #fafaf9;
    padding: 1rem;
}

.scanner-ticket-summary[b-zswyp6o5kl] {
    display: grid;
    gap: 0.85rem;
}

.scanner-status-row[b-zswyp6o5kl] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scanner-status-chip[b-zswyp6o5kl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 800;
}

.scanner-status-chip.is-ready[b-zswyp6o5kl] {
    background: #e7f6ec;
    color: #12652f;
}

.scanner-status-chip.is-checked-in[b-zswyp6o5kl] {
    background: #fdecee;
    color: #8f1a21;
}

.scanner-status-chip.is-neutral[b-zswyp6o5kl] {
    background: #eef2fe;
    color: #223cab;
}

.scanner-ticket-meta[b-zswyp6o5kl] {
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.scanner-ticket-meta div[b-zswyp6o5kl] {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: #fafaf9;
    border: 1px solid #dce4fd;
}

.scanner-ticket-meta dt[b-zswyp6o5kl] {
    margin: 0 0 0.2rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.scanner-ticket-meta dd[b-zswyp6o5kl] {
    margin: 0;
    color: var(--scanner-ink);
    font-weight: 700;
}

@media (max-width: 960px) {
    .scanner-layout[b-zswyp6o5kl] {
        grid-template-columns: 1fr;
    }

    .scanner-hero[b-zswyp6o5kl] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .scanner-manual-row[b-zswyp6o5kl] {
        grid-template-columns: 1fr;
    }
}

/* ── Door-ops helpers (SCAN-01/04/06) ──────────────────────────── */
.scanner-help[b-zswyp6o5kl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    color: var(--scanner-muted);
    cursor: help;
    font-size: 0.85rem;
}

.scanner-hint[b-zswyp6o5kl] {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--scanner-muted);
}

.scanner-link-button[b-zswyp6o5kl] {
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #2a4bd1;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}

.scanner-session[b-zswyp6o5kl] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: #eef2fe;
    border: 1px solid #e7e6e2;
}

.scanner-session-count[b-zswyp6o5kl] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--scanner-ink);
    line-height: 1;
}

.scanner-session-label[b-zswyp6o5kl] {
    font-size: 0.85rem;
    color: var(--scanner-muted);
}

.scanner-success-flash[b-zswyp6o5kl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #e7f6ec;
    border: 1px solid #86efac;
    color: #12652f;
    font-weight: 800;
    animation: scanner-flash-b-zswyp6o5kl 0.4s ease;
}

.scanner-success-check[b-zswyp6o5kl] {
    font-size: 1.4rem;
    line-height: 1;
}

/* SCAN-07: event-lock bar + cross-event warning. */
.scanner-event-lock[b-zswyp6o5kl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    background: #f4f4f2;
    border: 1px solid #e7e6e2;
    color: #5f5b54;
    font-size: 0.85rem;
    font-weight: 600;
}

.scanner-event-lock.is-locked[b-zswyp6o5kl] {
    background: #eef2fe;
    border-color: #becefb;
    color: #1f3488;
}

.scanner-wrong-event[b-zswyp6o5kl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fdf0f1;
    border: 1px solid #ec9aa0;
    color: #8f1a21;
    font-weight: 700;
}

@keyframes scanner-flash-b-zswyp6o5kl {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.scanner-recent[b-zswyp6o5kl] {
    margin-top: 1rem;
    border-top: 1px solid var(--scanner-line);
    padding-top: 0.75rem;
}

.scanner-recent h4[b-zswyp6o5kl] {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--scanner-muted);
}

.scanner-recent ul[b-zswyp6o5kl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.scanner-recent li[b-zswyp6o5kl] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.scanner-recent-name[b-zswyp6o5kl] {
    font-weight: 700;
    color: var(--scanner-ink);
}

.scanner-recent-time[b-zswyp6o5kl] {
    color: var(--scanner-muted);
}

.scanner-camera-error[b-zswyp6o5kl] {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fdf0f1;
    border: 1px solid #f6c9cd;
    color: #8f1a21;
}

.scanner-camera-error p[b-zswyp6o5kl] {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.scanner-camera-error-fallback[b-zswyp6o5kl] {
    font-weight: 700;
    color: #8f2e14;
}

.scanner-undo-button[b-zswyp6o5kl] {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid #d6d4ce;
    border-radius: 12px;
    background: #ffffff;
    color: #92580a;
    font-weight: 700;
    cursor: pointer;
}

.scanner-undo-button:hover:not(:disabled)[b-zswyp6o5kl] {
    background: #fef6e7;
    border-color: #fcd34d;
}

.scanner-undo-button:disabled[b-zswyp6o5kl] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Verdict block — the doc's scanner pattern: an instant, unmistakable yes/no
   readable in daylight, one-handed. Saturated fills, huge type, no ambiguity. ── */
.scanner-verdict[b-zswyp6o5kl] {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 1.15rem 1rem;
    border-radius: 16px;
    text-align: center;
    animation: scanner-verdict-pop-b-zswyp6o5kl 160ms ease-out;
}

@keyframes scanner-verdict-pop-b-zswyp6o5kl {
    from { transform: scale(0.97); opacity: 0.6; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scanner-verdict[b-zswyp6o5kl] { animation: none; }
}

.scanner-verdict-icon[b-zswyp6o5kl] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.scanner-verdict-word[b-zswyp6o5kl] {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.scanner-verdict-detail[b-zswyp6o5kl] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0.92;
}

.scanner-verdict.is-valid[b-zswyp6o5kl] {
    background: #15803d;
    color: #ffffff;
}

.scanner-verdict.is-valid .scanner-verdict-icon[b-zswyp6o5kl] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.scanner-verdict.is-duplicate[b-zswyp6o5kl] {
    background: #f59e0b;
    color: #3a2c10;
}

.scanner-verdict.is-duplicate .scanner-verdict-icon[b-zswyp6o5kl] {
    background: rgba(255, 255, 255, 0.45);
    color: #7a4a08;
}

.scanner-verdict.is-invalid[b-zswyp6o5kl] {
    background: #d22730;
    color: #ffffff;
}

.scanner-verdict.is-invalid .scanner-verdict-icon[b-zswyp6o5kl] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.scanner-verdict.is-ready[b-zswyp6o5kl] {
    background: #eef2fe;
    border: 1px solid #becefb;
    color: #223cab;
}

.scanner-verdict.is-ready .scanner-verdict-icon[b-zswyp6o5kl] {
    background: #2a4bd1;
    color: #ffffff;
}

/* ── Live door stats (shown while locked to an event) ── */
.scanner-door-stats[b-zswyp6o5kl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--scanner-line);
    border-radius: 14px;
    background: #fafaf9;
}

.scanner-door-stat[b-zswyp6o5kl] {
    display: grid;
    gap: 0.1rem;
}

.scanner-door-stat strong[b-zswyp6o5kl] {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--scanner-ink);
    font-variant-numeric: tabular-nums;
}

.scanner-door-stat strong em[b-zswyp6o5kl] {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--scanner-muted);
}

.scanner-door-stat span[b-zswyp6o5kl] {
    font-size: 0.75rem;
    color: var(--scanner-muted);
}

.scanner-door-progress[b-zswyp6o5kl] {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: #edece8;
    overflow: hidden;
}

.scanner-door-progress span[b-zswyp6o5kl] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2a4bd1, #3d62e3);
    transition: width 300ms ease;
}
/* /Components/Pages/Checkout/Checkout.razor.rz.scp.css */
.checkout-page[b-m9dynqz7kj] {
    --checkout-line: #e7e6e2;
    --checkout-ink: #1a1917;
    --checkout-muted: #5f5b54;
    --checkout-primary: #2a4bd1;
    --checkout-primary-deep: #223cab;
    /* Coral is reserved for the fan's commit moment (the Pay button) — never navigation. */
    --checkout-buy: #e04a22;
    --checkout-buy-deep: #bb3a18;
    --checkout-surface: #ffffff;
    display: grid;
    gap: 1rem;
}

.checkout-hero[b-m9dynqz7kj],
.checkout-state-card[b-m9dynqz7kj],
.checkout-card[b-m9dynqz7kj] {
    border: 1px solid var(--checkout-line);
    border-radius: 22px;
    background: var(--checkout-surface);
    box-shadow: 0 18px 40px rgba(26, 25, 23, 0.08);
}

.checkout-hero[b-m9dynqz7kj] {
    padding: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background:
        radial-gradient(120% 100% at 100% 0%, #dce4fd 0%, #eef2fe 42%, #ffffff 76%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
}

.checkout-hero.is-demo[b-m9dynqz7kj] {
    border-color: #f59e0b;
    background:
        radial-gradient(120% 100% at 100% 0%, #fde7b8 0%, #fff4d6 42%, #fffaf0 76%),
        linear-gradient(180deg, #fffaf0 0%, #fff7e6 100%);
}

.checkout-hero.is-demo .checkout-eyebrow[b-m9dynqz7kj] {
    color: #7a4a08;
}

.checkout-eyebrow[b-m9dynqz7kj] {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1f3488;
}

.checkout-hero h1[b-m9dynqz7kj],
.checkout-state-card h1[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.checkout-hero-copy[b-m9dynqz7kj],
.checkout-state-card p[b-m9dynqz7kj],
.checkout-card-header p[b-m9dynqz7kj],
.checkout-dev-copy[b-m9dynqz7kj],
.checkout-footnotes p[b-m9dynqz7kj] {
    color: var(--checkout-muted);
}

.checkout-hero-copy[b-m9dynqz7kj] {
    margin: 0.7rem 0 0;
    max-width: 42rem;
    font-size: 1rem;
}

.checkout-timer[b-m9dynqz7kj] {
    display: grid;
    gap: 0.15rem;
    min-width: 10rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(42, 75, 209, 0.08);
    border: 1px solid rgba(42, 75, 209, 0.18);
    color: #1e2f6d;
    text-align: right;
}

.checkout-timer span[b-m9dynqz7kj] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.checkout-timer strong[b-m9dynqz7kj] {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.checkout-timer.is-urgent[b-m9dynqz7kj] {
    background: rgba(210, 39, 48, 0.08);
    border-color: rgba(210, 39, 48, 0.18);
    color: #8f1a21;
}

.checkout-steps[b-m9dynqz7kj] {
    list-style: none;
    margin: 0;
    padding: 0.85rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 1px solid var(--checkout-line);
    border-radius: 18px;
    background: var(--checkout-surface);
    box-shadow: 0 12px 28px rgba(26, 25, 23, 0.06);
}

.checkout-step[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #b0aca3;
    font-weight: 700;
}

.checkout-step-index[b-m9dynqz7kj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: #f4f4f2;
    border: 1px solid #e7e6e2;
    color: #85817a;
    font-size: 0.9rem;
    font-weight: 800;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.checkout-step-label[b-m9dynqz7kj] {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.checkout-step.is-active[b-m9dynqz7kj] {
    color: var(--checkout-ink);
}

.checkout-step.is-active .checkout-step-index[b-m9dynqz7kj] {
    background: linear-gradient(180deg, var(--checkout-primary) 0%, var(--checkout-primary-deep) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(42, 75, 209, 0.28);
}

.checkout-step.is-complete[b-m9dynqz7kj] {
    color: #1e2f6d;
}

.checkout-step.is-complete .checkout-step-index[b-m9dynqz7kj] {
    background: #dce4fd;
    border-color: #becefb;
    color: #223cab;
}

.checkout-step-line[b-m9dynqz7kj] {
    flex: 1;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e7e6e2 0%, #f4f4f2 100%);
}

.checkout-card-header-row[b-m9dynqz7kj] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.checkout-back-button[b-m9dynqz7kj] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e7e6e2;
    border-radius: 12px;
    background: #fafaf9;
    color: #223cab;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.checkout-back-button:hover[b-m9dynqz7kj] {
    background: #eef2fe;
    border-color: #becefb;
}

.checkout-subscribe[b-m9dynqz7kj] {
    margin: 0;
    padding: 1rem;
    border: 1px solid #dce4fd;
    border-radius: 16px;
    background: #fafaf9;
    display: grid;
    gap: 0.6rem;
}

.checkout-subscribe-title[b-m9dynqz7kj] {
    padding: 0 0.35rem;
    margin-bottom: 0.15rem;
    color: var(--checkout-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.checkout-subscribe .checkout-policy-check[b-m9dynqz7kj] {
    background: #fff;
}

.checkout-layout[b-m9dynqz7kj] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.checkout-card[b-m9dynqz7kj] {
    padding: 1.35rem;
}

.checkout-card-header h2[b-m9dynqz7kj],
.ticket-card-title[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-ink);
    font-size: 1.2rem;
}

.checkout-card-header p[b-m9dynqz7kj],
.ticket-card-title[b-m9dynqz7kj] {
    margin-top: 0.35rem;
}

.checkout-form-card[b-m9dynqz7kj] {
    display: grid;
    gap: 1rem;
}

.checkout-grid[b-m9dynqz7kj] {
    display: grid;
    gap: 0.85rem;
}

.checkout-grid-compact[b-m9dynqz7kj] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-field[b-m9dynqz7kj] {
    display: grid;
    gap: 0.45rem;
}

.checkout-field label[b-m9dynqz7kj] {
    color: var(--checkout-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.checkout-required[b-m9dynqz7kj] {
    color: #d22730;
}

.checkout-input[b-m9dynqz7kj] {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font: inherit;
    color: var(--checkout-ink);
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.checkout-input:focus[b-m9dynqz7kj] {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem rgba(42, 75, 209, 0.14);
}

/* Stripe's Payment Element mounts its own iframe here, so this styles the container only — the
   fields inside are cross-origin and can't be reached by our CSS (that isolation is the point:
   it's what keeps card data off this origin). min-height reserves space so the payment step
   doesn't jump when the iframe finishes loading. Appearance inside the frame is configured
   through Stripe's appearance API in Checkout.razor.js, not from here. */
.checkout-payment-element[b-m9dynqz7kj] {
    min-height: 15rem;
}

.checkout-payment-element:empty[b-m9dynqz7kj] {
    border: 1px dashed #d6d4ce;
    border-radius: 14px;
}

/* Apple Pay / Google Pay. Stripe renders its own buttons in this container, so like the payment
   element above we style the box and nothing inside it. The whole stack is hidden until Stripe's
   "ready" event names a wallet this device can actually offer — an empty express-pay block above
   the card form reads as a broken page, and a dead wallet button reads worse. No min-height for
   the same reason: while it's hidden it must take no space at all. */
.payment-stack-wallets.is-hidden[b-m9dynqz7kj] {
    display: none;
}

.checkout-wallet-element:not(:empty)[b-m9dynqz7kj] {
    margin-bottom: 0.75rem;
}

/* "or pay by card" rule between the wallet buttons and the card form. */
.checkout-wallet-divider[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    color: var(--checkout-muted);
    font-size: 0.8125rem;
}

.checkout-wallet-divider[b-m9dynqz7kj]::before,
.checkout-wallet-divider[b-m9dynqz7kj]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--checkout-border, #d6d4ce);
}

/* Demo checkout locks the prefilled identity fields — theme-agnostic so the background
   still comes from the light/dark .checkout-input rule; only the framing signals "locked". */
.checkout-input:disabled[b-m9dynqz7kj] {
    color: var(--checkout-muted);
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.9;
}

/* A muted "(optional)" tag beside a label — the counterpart to .checkout-required. */
.checkout-optional[b-m9dynqz7kj] {
    color: var(--checkout-muted);
    font-weight: 500;
}

/* Field-level helper copy, e.g. the demo's "enter an email for a sample confirmation" note. */
.checkout-field-hint[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.checkout-express-pay[b-m9dynqz7kj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.express-pay-button[b-m9dynqz7kj] {
    border: 1px solid #e7e6e2;
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font: inherit;
    background: #fff;
    display: grid;
    justify-items: start;
    gap: 0.22rem;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.express-pay-button:hover[b-m9dynqz7kj] {
    transform: translateY(-1px);
}

.express-pay-button.is-selected[b-m9dynqz7kj] {
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem rgba(42, 75, 209, 0.1);
}

.express-pay-button.is-apple[b-m9dynqz7kj] {
    background: linear-gradient(180deg, #101010 0%, #1c1c1c 100%);
    color: #fff;
}

.express-pay-button.is-google[b-m9dynqz7kj] {
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    color: #1a1917;
}

.express-pay-brand[b-m9dynqz7kj] {
    font-size: 1rem;
    font-weight: 800;
}

.express-pay-caption[b-m9dynqz7kj] {
    font-size: 0.82rem;
    opacity: 0.8;
}

.checkout-divider[b-m9dynqz7kj] {
    position: relative;
    text-align: center;
}

.checkout-divider[b-m9dynqz7kj]::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    border-top: 1px solid #e7e6e2;
}

.checkout-divider span[b-m9dynqz7kj] {
    position: relative;
    display: inline-block;
    padding: 0 0.75rem;
    background: #fff;
    color: #85817a;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.payment-stack[b-m9dynqz7kj] {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid #e7e6e2;
    background: linear-gradient(180deg, #fafaf9 0%, #fafaf9 100%);
}

.payment-stack.is-selected[b-m9dynqz7kj] {
    border-color: #93adf6;
    box-shadow: inset 0 0 0 1px rgba(42, 75, 209, 0.08);
}

.payment-stack-header[b-m9dynqz7kj] {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
}

.payment-stack-title[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-ink);
    font-weight: 800;
}

.payment-stack-copy[b-m9dynqz7kj] {
    margin: 0.3rem 0 0;
    color: var(--checkout-muted);
    font-size: 0.92rem;
}

.card-brand-row[b-m9dynqz7kj] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.card-brand-row span[b-m9dynqz7kj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    padding: 0.38rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e7e6e2;
    color: #454239;
    font-size: 0.74rem;
    font-weight: 800;
}

.payment-stack-preview[b-m9dynqz7kj] {
    border: 0;
    border-radius: 20px;
    padding: 1rem;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(61, 98, 227, 0.38) 0%, rgba(42, 75, 209, 0.15) 36%, rgba(26, 25, 23, 0) 60%),
        linear-gradient(135deg, #1a1917 0%, #1e2f6d 58%, #2a4bd1 100%);
    color: #fff;
    display: grid;
    gap: 1rem;
    text-align: left;
    box-shadow: 0 16px 28px rgba(26, 25, 23, 0.18);
}

.payment-stack-chip[b-m9dynqz7kj] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.payment-stack-number[b-m9dynqz7kj] {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.payment-stack-meta[b-m9dynqz7kj] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
}

.checkout-dev-note[b-m9dynqz7kj] {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #fafaf9 0%, #eef2fe 100%);
    border: 1px solid #dce4fd;
}

.checkout-dev-title[b-m9dynqz7kj] {
    margin: 0;
    color: #1e2f6d;
    font-weight: 800;
}

.checkout-dev-copy[b-m9dynqz7kj] {
    margin: 0;
    font-size: 0.94rem;
}

.dev-scenario-grid[b-m9dynqz7kj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.dev-scenario-button[b-m9dynqz7kj] {
    border: 1px solid #dce4fd;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    padding: 0.8rem 0.9rem;
    text-align: left;
    font: inherit;
    display: grid;
    gap: 0.22rem;
    color: var(--checkout-ink);
}

.dev-scenario-button.is-selected[b-m9dynqz7kj] {
    border-color: #93adf6;
    background: #fff;
    box-shadow: 0 0 0 0.2rem rgba(42, 75, 209, 0.08);
}

.dev-scenario-label[b-m9dynqz7kj] {
    font-weight: 800;
}

.dev-scenario-caption[b-m9dynqz7kj],
.dev-scenario-active[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 0.9rem;
}

.checkout-alert[b-m9dynqz7kj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #fdf0f1;
    border: 1px solid #f6c9cd;
    color: #a81d25;
    font-weight: 600;
}

.checkout-submit-button[b-m9dynqz7kj] {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--checkout-primary) 0%, var(--checkout-primary-deep) 100%);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 18px 30px rgba(42, 75, 209, 0.24);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.checkout-submit-button:hover:not(:disabled)[b-m9dynqz7kj] {
    transform: translateY(-1px);
}

.checkout-submit-button:disabled[b-m9dynqz7kj] {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
}

.checkout-submit-button.is-pay[b-m9dynqz7kj] {
    background: linear-gradient(180deg, var(--checkout-buy) 0%, var(--checkout-buy-deep) 100%);
    box-shadow: 0 18px 30px rgba(224, 74, 34, 0.26);
}

.checkout-footnotes[b-m9dynqz7kj] {
    display: grid;
    gap: 0.35rem;
}

.checkout-policy-check[b-m9dynqz7kj] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fafaf9;
    color: #454239;
    font-size: 0.94rem;
}

/* Audit fix: opt-in checkboxes were ~13px — too small to hit and to see. The whole label
   stays clickable; the box itself is 20px with a visible keyboard focus ring. */
.checkout-policy-check input[b-m9dynqz7kj] {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 0.12rem;
    accent-color: var(--checkout-primary);
}

.checkout-policy-check input:focus-visible[b-m9dynqz7kj] {
    outline: 2px solid var(--checkout-primary);
    outline-offset: 2px;
}

.checkout-policy-check a[b-m9dynqz7kj] {
    color: #223cab;
    font-weight: 800;
}

.checkout-footnotes p[b-m9dynqz7kj] {
    margin: 0;
    font-size: 0.9rem;
}

.checkout-summary-card[b-m9dynqz7kj] {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5.6rem;
    align-self: start;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.checkout-line-items[b-m9dynqz7kj],
.ticket-list[b-m9dynqz7kj] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.checkout-line-items li[b-m9dynqz7kj],
.ticket-list li[b-m9dynqz7kj] {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: #fafaf9;
    border: 1px solid #dce4fd;
    color: var(--checkout-ink);
    font-weight: 700;
}

/* Add-ons — the doc's checkout pattern: extras ride along, steppers stay ≥44px targets. */
.checkout-addons[b-m9dynqz7kj] {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--checkout-line);
    border-radius: 14px;
    background: #fafaf9;
}

.checkout-addons-title[b-m9dynqz7kj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--checkout-ink);
}

.checkout-addons-copy[b-m9dynqz7kj] {
    margin: 0;
    font-size: 0.86rem;
    color: var(--checkout-muted);
}

.checkout-addon-row[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid #efeee9;
}

.checkout-addon-info[b-m9dynqz7kj] {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.checkout-addon-name[b-m9dynqz7kj] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--checkout-ink);
}

.checkout-addon-desc[b-m9dynqz7kj] {
    font-size: 0.82rem;
    color: var(--checkout-muted);
}

.checkout-addon-price[b-m9dynqz7kj] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--checkout-ink);
}

.checkout-addon-stepper[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.checkout-addon-stepper button[b-m9dynqz7kj] {
    width: 34px;
    height: 34px;
    border: 1px solid #d6d4ce;
    border-radius: 9px;
    background: #fff;
    color: var(--checkout-ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.checkout-addon-stepper button:hover:not(:disabled)[b-m9dynqz7kj] {
    background: #f4f4f2;
}

.checkout-addon-stepper button:disabled[b-m9dynqz7kj] {
    opacity: 0.4;
    cursor: not-allowed;
}

.checkout-addon-stepper span[b-m9dynqz7kj] {
    min-width: 1.4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--checkout-ink);
}

.checkout-line-addon[b-m9dynqz7kj] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 600 !important;
}

.checkout-line-addon span[b-m9dynqz7kj] {
    font-variant-numeric: tabular-nums;
}

/* Promo code — no surprises: the discount shows as its own line before fees. */
.checkout-promo[b-m9dynqz7kj] {
    display: grid;
    gap: 0.4rem;
    padding-top: 0.25rem;
}

.checkout-promo-label[b-m9dynqz7kj] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--checkout-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checkout-promo-row[b-m9dynqz7kj] {
    display: flex;
    gap: 0.5rem;
}

.checkout-promo-input[b-m9dynqz7kj] {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

.checkout-promo-apply[b-m9dynqz7kj] {
    border: 0;
    border-radius: 10px;
    padding: 0 1rem;
    min-height: 44px;
    background: var(--checkout-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.checkout-promo-apply:hover:not(:disabled)[b-m9dynqz7kj] {
    background: var(--checkout-primary-deep);
}

.checkout-promo-apply:disabled[b-m9dynqz7kj] {
    opacity: 0.55;
    cursor: not-allowed;
}

.checkout-promo-error[b-m9dynqz7kj] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a81d25;
}

/* Shown while a PaymentIntent exists: the promo box is frozen so the summary can't drift from
   the amount the intent was created for (dark twin in app.css). */
.checkout-promo-locked[b-m9dynqz7kj] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b675e;
}

.checkout-promo-applied[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #bfe9cd;
    border-radius: 10px;
    background: #ecfbf1;
    color: #12652f;
    font-size: 0.9rem;
}

.checkout-promo-applied button[b-m9dynqz7kj] {
    border: 0;
    background: transparent;
    color: #12652f;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-summary-discount[b-m9dynqz7kj],
.checkout-summary-discount strong[b-m9dynqz7kj] {
    color: #15803d;
}

/* Standing member benefits — applied automatically once the buyer email is known. */
.checkout-member-chip[b-m9dynqz7kj] {
    padding: 0.6rem 0.8rem;
    border: 1px solid #becefb;
    border-radius: 10px;
    background: #eef2fe;
    color: #223cab;
    font-size: 0.88rem;
    font-weight: 700;
}

.checkout-summary-row[b-m9dynqz7kj],
.checkout-summary-total[b-m9dynqz7kj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.checkout-summary-row[b-m9dynqz7kj] {
    color: var(--checkout-muted);
    font-size: 0.95rem;
}

.checkout-summary-row strong[b-m9dynqz7kj],
.checkout-summary-total strong[b-m9dynqz7kj] {
    color: var(--checkout-ink);
}

/* The total is the answer to "what am I paying?" — make it unmistakable. */
.checkout-summary-total[b-m9dynqz7kj] {
    padding-top: 1rem;
    border-top: 1px solid #e7e6e2;
    color: var(--checkout-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.checkout-summary-total strong[b-m9dynqz7kj] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.checkout-summary-row strong[b-m9dynqz7kj] {
    font-variant-numeric: tabular-nums;
}

.checkout-state-card[b-m9dynqz7kj] {
    padding: 1.8rem;
    max-width: 48rem;
    background:
        radial-gradient(140% 110% at 100% 0%, #eef2fe 0%, #fafaf9 48%, #ffffff 80%),
        #fff;
}

.checkout-state-card p[b-m9dynqz7kj] {
    margin-bottom: 0;
    max-width: 42rem;
}

.checkout-state-card.is-expired[b-m9dynqz7kj] {
    background:
        radial-gradient(140% 110% at 100% 0%, #fdf0f1 0%, #fdf0f1 52%, #ffffff 82%),
        #fff;
}

.checkout-state-card.is-success[b-m9dynqz7kj] {
    background:
        radial-gradient(140% 110% at 100% 0%, #e7f6ec 0%, #ecfbf1 52%, #ffffff 82%),
        #fff;
}

.ticket-card[b-m9dynqz7kj] {
    margin-top: 1.2rem;
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid #d9e7dc;
    background: rgba(255, 255, 255, 0.72);
}

.checkout-mobile-action[b-m9dynqz7kj] {
    display: none;
}

@media (max-width: 960px) {
    .checkout-layout[b-m9dynqz7kj] {
        grid-template-columns: 1fr;
    }

    .checkout-summary-card[b-m9dynqz7kj] {
        position: static;
    }
}

@media (max-width: 720px) {
    .checkout-page[b-m9dynqz7kj] {
        padding-bottom: 5.5rem;
    }

    .checkout-hero[b-m9dynqz7kj] {
        padding: 1.1rem;
        flex-direction: column;
    }

    .checkout-timer[b-m9dynqz7kj] {
        width: 100%;
        text-align: left;
    }

    .checkout-card[b-m9dynqz7kj],
    .checkout-state-card[b-m9dynqz7kj] {
        padding: 1.05rem;
    }

    .checkout-express-pay[b-m9dynqz7kj],
    .checkout-grid-compact[b-m9dynqz7kj],
    .dev-scenario-grid[b-m9dynqz7kj] {
        grid-template-columns: 1fr;
    }

    .payment-stack-header[b-m9dynqz7kj] {
        flex-direction: column;
    }

    .checkout-hero h1[b-m9dynqz7kj],
    .checkout-state-card h1[b-m9dynqz7kj] {
        font-size: 2rem;
    }

    .checkout-mobile-action[b-m9dynqz7kj] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
        border-top: 1px solid #e7e6e2;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -12px 32px rgba(26, 25, 23, 0.12);
        backdrop-filter: blur(10px);
    }

    .checkout-mobile-action span[b-m9dynqz7kj] {
        display: grid;
        gap: 0.12rem;
        color: var(--checkout-muted);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .checkout-mobile-action strong[b-m9dynqz7kj] {
        color: var(--checkout-ink);
        font-size: 1.08rem;
    }

    .checkout-mobile-submit[b-m9dynqz7kj] {
        border: 0;
        border-radius: 14px;
        min-width: 6rem;
        min-height: 44px;
        padding: 0.7rem 1rem;
        background: linear-gradient(180deg, var(--checkout-primary) 0%, var(--checkout-primary-deep) 100%);
        color: #ffffff;
        font: inherit;
        font-weight: 800;
    }

    .checkout-mobile-submit.is-pay[b-m9dynqz7kj] {
        background: linear-gradient(180deg, var(--checkout-buy) 0%, var(--checkout-buy-deep) 100%);
    }

    .checkout-mobile-submit:disabled[b-m9dynqz7kj] {
        opacity: 0.58;
    }
}
/* /Components/Pages/Cookies.razor.rz.scp.css */
.legal-page[b-7v8bzqgo1m] {
    display: grid;
    gap: 1.1rem;
}

.legal-hero[b-7v8bzqgo1m],
.legal-content[b-7v8bzqgo1m],
.legal-side[b-7v8bzqgo1m] {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
}

.legal-hero[b-7v8bzqgo1m] {
    padding: 1.4rem;
    background:
        radial-gradient(100% 120% at 100% 0%, #dce4fd 0%, #eef2fe 46%, #ffffff 82%),
        #fff;
}

.legal-kicker[b-7v8bzqgo1m] {
    margin: 0 0 0.45rem;
    color: #223cab;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-hero h1[b-7v8bzqgo1m] {
    margin: 0;
    max-width: 60rem;
    color: #1a1917;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.legal-hero p[b-7v8bzqgo1m],
.legal-content p[b-7v8bzqgo1m],
.legal-side p[b-7v8bzqgo1m] {
    color: #5f5b54;
}

.legal-layout[b-7v8bzqgo1m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.35fr);
    gap: 1rem;
    align-items: start;
}

.legal-content[b-7v8bzqgo1m],
.legal-side[b-7v8bzqgo1m] {
    padding: 1.2rem;
}

.legal-content h2[b-7v8bzqgo1m],
.legal-side h2[b-7v8bzqgo1m] {
    margin: 0 0 0.35rem;
    color: #1a1917;
    font-size: 1.15rem;
}

.legal-content p[b-7v8bzqgo1m],
.legal-side p[b-7v8bzqgo1m] {
    margin: 0 0 1rem;
}

.legal-side[b-7v8bzqgo1m] {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .legal-layout[b-7v8bzqgo1m] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/DemoLanding.razor.rz.scp.css */
/* "Two quick picks. One real demo." — the merged demo page.
   Surfaces, text, and hairlines lean on MudBlazor palette tokens so light/dark both work with
   only a couple of accent overrides at the bottom. The per-selection category accent arrives as
   --accent (inline) on .demo2-result and each browse .demo2-group; the art backdrop and the chip
   pill are intentionally fixed (they sit on dark artwork in both themes). */

.demo2[b-msble685dk] {
    padding: 56px 24px 88px;
    background: linear-gradient(180deg, var(--mud-palette-background) 0%, rgba(42, 75, 209, 0.05) 100%);
}

.demo2__inner[b-msble685dk] {
    max-width: 1120px;
    margin: 0 auto;
}

.demo2__loading[b-msble685dk] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

/* ── Hero ──────────────────────────────────────────────── */
.demo2-hero[b-msble685dk] {
    text-align: center;
    margin-bottom: 40px;
}

.demo2-hero__eyebrow[b-msble685dk] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12.5px;
    font-weight: 600;
    color: #2a4bd1;
    margin-bottom: 12px;
}

.demo2-hero__title[b-msble685dk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.12;
    margin: 0 0 12px;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.demo2-hero__sub[b-msble685dk] {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0 auto;
    max-width: 560px;
    text-wrap: pretty;
}

/* ── Picker + result ───────────────────────────────────── */
.demo2-picker[b-msble685dk] {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

.demo2-questions[b-msble685dk] {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.demo2-result[b-msble685dk] {
    flex: 2 1 480px;
    min-width: 0;
    position: sticky;
    top: 76px;
}

/* ── Questions ─────────────────────────────────────────── */
.demo2-q__label[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.demo2-q__num[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2a4bd1;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex: none;
}

.demo2-q__text[b-msble685dk] {
    font-weight: 700;
    font-size: 16.5px;
    color: var(--mud-palette-text-primary);
}

.demo2-q1__grid[b-msble685dk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.demo2-q2__stack[b-msble685dk] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Option buttons (shared) ───────────────────────────── */
.demo2-opt[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    color: var(--mud-palette-text-primary);
    border-radius: 12px;
    border: 1.5px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    min-height: 48px;
    transition: border-color 160ms ease, background 160ms ease;
}

.demo2-opt:hover:not(.is-selected):not(.is-off)[b-msble685dk] {
    border-color: #93adf6;
}

.demo2-opt.is-selected[b-msble685dk] {
    border-color: #2a4bd1;
    background: color-mix(in srgb, #2a4bd1 10%, var(--mud-palette-surface));
}

.demo2-opt:focus-visible[b-msble685dk] {
    outline: 2px solid #2a4bd1;
    outline-offset: 2px;
}

.demo2-opt.is-off[b-msble685dk] {
    cursor: not-allowed;
    opacity: 0.5;
}

.demo2-opt__emoji[b-msble685dk] {
    line-height: 1;
    flex: none;
}

/* Q1 — compact category tiles */
.demo2-opt--cat[b-msble685dk] {
    gap: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 14px;
}

.demo2-opt--cat .demo2-opt__emoji[b-msble685dk] {
    font-size: 19px;
}

/* Q2 — scenario rows with a right-aligned check */
.demo2-opt--scn[b-msble685dk] {
    padding: 11px 14px;
}

.demo2-opt--scn .demo2-opt__emoji[b-msble685dk] {
    font-size: 18px;
}

.demo2-opt__body[b-msble685dk] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.demo2-opt__name[b-msble685dk] {
    font-weight: 700;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.demo2-opt__sub[b-msble685dk] {
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.demo2-opt__check[b-msble685dk] {
    margin-left: auto;
    flex: none;
    color: #2a4bd1;
    opacity: 0;
    transition: opacity 160ms ease;
}

.demo2-opt.is-selected .demo2-opt__check[b-msble685dk] {
    opacity: 1;
}

/* ── Result card ───────────────────────────────────────── */
.demo2-card[b-msble685dk] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(26, 25, 23, 0.04), 0 14px 40px -18px rgba(26, 25, 23, 0.14);
    animation: demo2FadeIn-b-msble685dk 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.demo2-card__art[b-msble685dk] {
    position: relative;
    aspect-ratio: 2 / 1;
    background: #14161c;
}

.demo2-card__art img[b-msble685dk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.demo2-card__chip[b-msble685dk] {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1917;
    background: rgba(255, 255, 255, 0.94);
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(16, 15, 14, 0.3);
}

.demo2-card__body[b-msble685dk] {
    padding: 24px 28px 28px;
}

.demo2-card--empty .demo2-card__body[b-msble685dk] {
    padding: 40px 28px;
}

.demo2-card__eyebrow[b-msble685dk] {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent, #2a4bd1);
    margin-bottom: 7px;
}

.demo2-card__name[b-msble685dk] {
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.demo2-card__venue[b-msble685dk] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.demo2-card__plain[b-msble685dk] {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* Fact grid — 2×2 that auto-fits to 1 column when narrow */
.demo2-facts[b-msble685dk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--mud-palette-divider);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.demo2-fact[b-msble685dk] {
    background: var(--mud-palette-background);
    padding: 11px 14px;
}

.demo2-fact__label[b-msble685dk] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.demo2-fact__value[b-msble685dk] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--mud-palette-text-primary);
}

.demo2-card__cta-row[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.demo2-card__cta[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    background: var(--accent, #2a4bd1);
    color: #fff !important;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(26, 25, 23, 0.3);
    transition: filter 160ms ease;
}

.demo2-card__cta:hover[b-msble685dk] {
    filter: brightness(1.08);
}

.demo2-card__cta svg[b-msble685dk] {
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.demo2-card__cta:hover svg[b-msble685dk] {
    transform: translateX(3px);
}

.demo2-card__note[b-msble685dk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ── Browse-all ────────────────────────────────────────── */
.demo2-browse[b-msble685dk] {
    margin-top: 52px;
}

.demo2-browse__toggle-row[b-msble685dk] {
    text-align: center;
}

.demo2-browse__toggle[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1.5px solid var(--mud-palette-divider);
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--mud-palette-text-primary);
    min-height: 44px;
    transition: border-color 160ms ease;
}

.demo2-browse__toggle:hover[b-msble685dk] {
    border-color: #93adf6;
}

.demo2-browse__chevron[b-msble685dk] {
    transition: transform 200ms ease;
}

.demo2-browse__chevron.is-open[b-msble685dk] {
    transform: rotate(180deg);
}

.demo2-browse__list[b-msble685dk] {
    max-width: 900px;
    margin: 28px auto 0;
    animation: demo2FadeIn-b-msble685dk 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.demo2-group[b-msble685dk] {
    padding: 22px 0 4px;
}

.demo2-group__head[b-msble685dk] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
}

.demo2-group__dot[b-msble685dk] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, #2a4bd1);
    align-self: center;
    flex: none;
}

.demo2-group__title[b-msble685dk] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--mud-palette-text-primary);
}

.demo2-group__note[b-msble685dk] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.demo2-row[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-wrap: wrap;
}

.demo2-row__art[b-msble685dk] {
    flex: none;
    width: 150px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #14161c;
    display: block;
}

.demo2-row__art img[b-msble685dk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.demo2-row__mid[b-msble685dk] {
    flex: 1;
    min-width: 220px;
}

.demo2-row__chip[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #2a4bd1);
    margin-bottom: 3px;
}

.demo2-row__chip span[b-msble685dk] {
    font-size: 13px;
}

.demo2-row__name[b-msble685dk] {
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.3;
}

.demo2-row__name a[b-msble685dk] {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.demo2-row__name a:hover[b-msble685dk] {
    text-decoration: underline;
}

.demo2-row__plain[b-msble685dk] {
    margin: 0;
    font-size: 13.8px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    max-width: 52ch;
}

.demo2-row__end[b-msble685dk] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

.demo2-row__cap[b-msble685dk] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.demo2-row__cta[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    background: #2a4bd1;
    color: #fff !important;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 160ms ease;
}

.demo2-row__cta:hover[b-msble685dk] {
    background: #223cab;
}

/* ── Closer ────────────────────────────────────────────── */
.demo2-closer[b-msble685dk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 56px;
    padding: 30px 34px;
    border-radius: 20px;
    border: 1px solid rgba(42, 75, 209, 0.28);
    background: linear-gradient(135deg, rgba(42, 75, 209, 0.10) 0%, rgba(42, 75, 209, 0.07) 100%);
    box-shadow: 0 14px 40px -24px rgba(42, 75, 209, 0.55);
}

.demo2-closer__copy h2[b-msble685dk] {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--mud-palette-text-primary);
}

.demo2-closer__copy p[b-msble685dk] {
    margin: 0;
    max-width: 52ch;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.demo2-closer__actions[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.demo2-closer__cta[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(180deg, #2a4bd1 0%, #223cab 100%);
    box-shadow: 0 10px 24px -12px rgba(42, 75, 209, 0.8);
    text-decoration: none;
    transition: transform 160ms ease;
}

.demo2-closer__cta:hover[b-msble685dk] {
    transform: translateY(-2px);
}

.demo2-closer__link[b-msble685dk] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo2-closer__link:hover[b-msble685dk] {
    color: var(--mud-palette-text-primary);
}

/* ── Empty / error states ──────────────────────────────── */
.demo2__empty[b-msble685dk] {
    text-align: center;
    padding: 48px 0;
}

.demo2__empty-title[b-msble685dk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: var(--mud-palette-text-primary);
}

.demo2__empty-text[b-msble685dk] {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0 auto 1.6rem;
    max-width: 44ch;
}

.demo2__empty-actions[b-msble685dk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.demo2__empty-link[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.demo2__empty-link:hover[b-msble685dk] {
    text-decoration: underline;
}

@keyframes demo2FadeIn-b-msble685dk {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Dark mode: only the accent-colored text needs a nudge; everything else rides the
   MudBlazor palette tokens. Lighten the category accent so labels stay legible on dark. */
body.eventrika-dark .demo2-card__eyebrow[b-msble685dk],
body.eventrika-dark .demo2-row__chip[b-msble685dk] {
    color: color-mix(in srgb, var(--accent, #2a4bd1) 55%, #e9e8e3);
}

body.eventrika-dark .demo2-closer[b-msble685dk] {
    border-color: rgba(94, 125, 238, 0.35);
    background: linear-gradient(135deg, rgba(94, 125, 238, 0.16) 0%, rgba(94, 125, 238, 0.10) 100%);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Once the two columns stack, center the (max-width 440px) question column. */
    .demo2-questions[b-msble685dk] {
        margin-inline: auto;
    }

    .demo2-result[b-msble685dk] {
        position: static;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .demo2[b-msble685dk] {
        padding: 36px 16px 64px;
    }

    .demo2-card__body[b-msble685dk] {
        padding: 20px 18px 22px;
    }

    .demo2-closer[b-msble685dk] {
        padding: 24px 22px;
    }

    /* Keep the browse row's CTA from being squeezed to the far edge on narrow screens. */
    .demo2-row__end[b-msble685dk] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo2-card[b-msble685dk],
    .demo2-browse__list[b-msble685dk] {
        animation: none;
    }

    .demo2-opt[b-msble685dk],
    .demo2-opt__check[b-msble685dk],
    .demo2-card__cta[b-msble685dk],
    .demo2-card__cta svg[b-msble685dk],
    .demo2-browse__chevron[b-msble685dk],
    .demo2-closer__cta[b-msble685dk] {
        transition: none;
    }
}
/* /Components/Pages/FindMyTickets.razor.rz.scp.css */
.findtickets-page[b-7vlet28sf1] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 4rem;
    background: #fafaf9;
    min-height: 60vh;
}

.findtickets-card[b-7vlet28sf1] {
    width: min(100%, 34rem);
    background: #ffffff;
    border: 1px solid #e7e6e2;
    border-radius: 18px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.findtickets-card h1[b-7vlet28sf1] {
    margin: 0;
    font-size: 1.6rem;
    color: #1a1917;
}

.findtickets-intro[b-7vlet28sf1] {
    margin: 0;
    color: #5f5b54;
    line-height: 1.55;
}

.findtickets-submit[b-7vlet28sf1] {
    min-height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--tr-primary, #2a4bd1);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.7rem 1.4rem;
}

.findtickets-submit:hover:not(:disabled)[b-7vlet28sf1] {
    filter: brightness(1.05);
}

.findtickets-submit:disabled[b-7vlet28sf1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.findtickets-note[b-7vlet28sf1] {
    margin: 0;
    font-size: 0.82rem;
    color: #85817a;
}

.findtickets-error[b-7vlet28sf1] {
    margin: 0;
    color: #8f1a21;
    font-weight: 700;
}

.findtickets-result[b-7vlet28sf1] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 12px;
    background: #ecfbf1;
    border: 1px solid #a7f3d0;
    color: #12652f;
}

.findtickets-result p[b-7vlet28sf1] {
    margin: 0;
    line-height: 1.5;
}

.findtickets-again[b-7vlet28sf1] {
    align-self: flex-start;
    min-height: 44px;
    border: 1px solid #d6d4ce;
    border-radius: 999px;
    background: #fafaf9;
    color: #1a1917;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 1.1rem;
}

.findtickets-turnstile[b-7vlet28sf1] {
    min-height: 70px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ================================================================
   Eventrika home — "Front Row" marketing page (from the owner's
   Eventrika Home design comp).

   Tokens: light values live here on .fr-home; the dark flip is the
   `body.eventrika-dark .fr-home` block in wwwroot/app.css (the real
   dark class — do NOT add dark overrides in this file).
   ================================================================ */
.fr-home[b-4k0m01ixna] {
    --fr-bg: #F6F5F3;
    --fr-bg2: #FAFAF9;
    --fr-surface: #FFFFFF;
    --fr-tint: #F4F7FF;
    --fr-tile: #EEF2FE;
    --fr-ink: #1A1917;
    --fr-body: #423E38;
    --fr-muted: #57544C;
    --fr-subtle: #8C8779;
    --fr-border: #E7E6E2;
    --fr-border-soft: #F0EEE9;
    --fr-border-strong: #D6D4CE;
    --fr-accent-text: #2A4BD1;
    --fr-success: #15803D;
    --fr-hover: #F4F4F2;
    --fr-stage-bg: #1A1917;
    --fr-sel-ring: rgba(255, 255, 255, .6);
    --fr-check-bg: #E7F6EC;
    --fr-check-ink: #15803D;
    --fr-card-shadow: 0 24px 60px rgba(26, 25, 23, .13);
    --fr-chip-shadow: 0 12px 30px rgba(26, 25, 23, .14);
    --fr-lift-shadow: 0 12px 30px rgba(26, 25, 23, .08);
    font-family: var(--font-sans);
    color: var(--fr-ink);
}

/* ── Full-bleed bands ─────────────────────────────────────────────
   .layout-body caps content at 1440px with 1.25rem gutters. Each band
   breaks out of the gutters with negative margins, then paints its
   background across the whole viewport via a huge box-shadow spread;
   clip-path keeps that paint inside the band's own vertical extent
   (and never creates horizontal scroll, since shadows don't scroll). */
.fr-band[b-4k0m01ixna] {
    position: relative;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background: var(--fr-band-bg, var(--fr-bg));
    box-shadow: 0 0 0 100vmax var(--fr-band-bg, var(--fr-bg));
    clip-path: inset(0 -100vmax);
}

.fr-band--soft[b-4k0m01ixna] { --fr-band-bg: var(--fr-bg2); }
.fr-band--tint[b-4k0m01ixna] { --fr-band-bg: var(--fr-tint); }
.fr-band--surface[b-4k0m01ixna] { --fr-band-bg: var(--fr-surface); }

.fr-container[b-4k0m01ixna] {
    max-width: 1160px;
    margin: 0 auto;
}

/* ── Shared type & buttons ───────────────────────────────────── */
.fr-eyebrow[b-4k0m01ixna] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fr-accent-text);
    margin-bottom: 14px;
}

.fr-eyebrow--coral[b-4k0m01ixna] { color: #F5623C; }

.fr-h2[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--fr-ink);
    margin: 0 0 14px;
}

.fr-h2--sm[b-4k0m01ixna] {
    font-size: 36px;
    line-height: 1.08;
}

.fr-lede[b-4k0m01ixna] {
    font-size: 17px;
    line-height: 1.6;
    color: var(--fr-muted);
    margin: 0;
}

.fr-lede--sm[b-4k0m01ixna] { font-size: 16px; }
.fr-lede--gap[b-4k0m01ixna] { margin-bottom: 24px; }

.fr-sec-head[b-4k0m01ixna] {
    max-width: 60ch;
    margin: 0 0 44px;
}

.fr-sec-head--center[b-4k0m01ixna] {
    text-align: center;
    margin: 0 auto 46px;
}

.fr-btn[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 13px 22px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s ease, box-shadow .14s ease;
}

.fr-btn--lg[b-4k0m01ixna] {
    font-size: 16px;
    padding: 14px 26px;
}

.fr-btn__arrow[b-4k0m01ixna] { font-size: 16px; }

.fr-btn--primary[b-4k0m01ixna] {
    color: #fff;
    background: #2A4BD1;
    box-shadow: 0 2px 8px rgba(42, 75, 209, .22);
}

.fr-btn--primary:hover[b-4k0m01ixna] {
    color: #fff;
    background: #223CAB;
    box-shadow: 0 6px 18px rgba(42, 75, 209, .3);
}

.fr-btn--secondary[b-4k0m01ixna] {
    color: var(--fr-ink);
    background: var(--fr-surface);
    border: 1px solid var(--fr-border-strong);
}

.fr-btn--secondary:hover[b-4k0m01ixna] {
    color: var(--fr-ink);
    background: var(--fr-hover);
}

.fr-btn--coral[b-4k0m01ixna] {
    color: #fff;
    background: #E04A22;
    box-shadow: 0 4px 16px rgba(224, 74, 34, .32);
}

.fr-btn--coral:hover[b-4k0m01ixna] {
    color: #fff;
    background: #BB3A18;
}

.fr-btn--ghost[b-4k0m01ixna] {
    color: #F3F1EC;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
}

.fr-btn--ghost:hover[b-4k0m01ixna] {
    color: #F3F1EC;
    background: rgba(255, 255, 255, .14);
}

.fr-btn:focus-visible[b-4k0m01ixna] {
    outline: 2px solid #2A4BD1;
    outline-offset: 2px;
}

.fr-dot[b-4k0m01ixna] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.fr-dot--coral[b-4k0m01ixna] { background: #F5623C; }
.fr-dot--green[b-4k0m01ixna] { background: var(--fr-success); }

/* ── Hero ─────────────────────────────────────────────────────── */
.fr-hero[b-4k0m01ixna] { overflow: hidden; }

.fr-hero__glow[b-4k0m01ixna] {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 75, 209, .10), transparent 68%);
    pointer-events: none;
}

.fr-hero__inner[b-4k0m01ixna] {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 64px 0 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 56px;
    align-items: center;
}

.fr-hero__copy[b-4k0m01ixna] { animation: fr-fade-b-4k0m01ixna .6s ease both; }

.fr-hero__badge[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fr-muted);
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 999px;
    padding: 5px 12px 5px 11px;
    margin-bottom: 22px;
    white-space: nowrap;
}

.fr-hero__h1[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--fr-ink);
    margin: 0 0 22px;
}

.fr-hero__sub[b-4k0m01ixna] {
    font-size: 19px;
    line-height: 1.6;
    color: var(--fr-muted);
    max-width: 48ch;
    margin: 0 0 30px;
}

.fr-hero__actions[b-4k0m01ixna] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.fr-hero__ticks[b-4k0m01ixna] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.fr-tick[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--fr-muted);
}

/* ── Hero seat-map card ───────────────────────────────────────── */
.fr-hero__visual[b-4k0m01ixna] {
    position: relative;
    animation: fr-fade-b-4k0m01ixna .7s ease both;
}

.fr-map-card[b-4k0m01ixna] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 20px;
    box-shadow: var(--fr-card-shadow);
    padding: 20px;
    position: relative;
}

.fr-map-card__head[b-4k0m01ixna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.fr-map-card__venue[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--fr-ink);
}

.fr-onsale[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 11px;
    color: #C0431C;
    background: #FDECE5;
    border-radius: 999px;
    padding: 4px 10px;
}

.fr-map-card__when[b-4k0m01ixna] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fr-subtle);
    letter-spacing: .05em;
    margin-bottom: 16px;
}

.fr-stagebar[b-4k0m01ixna] {
    background: var(--fr-stage-bg);
    color: #fff;
    border-radius: 7px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .26em;
    padding: 7px;
    margin-bottom: 14px;
}

.fr-stagebar--lg[b-4k0m01ixna] {
    border-radius: 8px;
    font-size: 11px;
    padding: 9px;
    margin-bottom: 16px;
}

.fr-seatgrid[b-4k0m01ixna] {
    display: grid;
    gap: 5px;
    justify-content: center;
    margin-bottom: 14px;
}

.fr-seatrow[b-4k0m01ixna] {
    display: flex;
    justify-content: center;
}

/* Chairback seats — the same backrest + cushion + armrest recipe the real buyer seat map
   draws (.public-venue-seat.is-theater in app.css), scaled to the hero card and driven by
   the same --venue-seat-color variable, so the demo looks like the actual seat selector. */
.fr-seat[b-4k0m01ixna] {
    position: relative;
    width: 26px;
    height: 26px;
    border: 0;
    padding: 0;
    margin-right: 2px;
    background: transparent;
    cursor: pointer;
    transition: transform .1s ease;
}

.fr-seat:last-child[b-4k0m01ixna] { margin-right: 0; }
.fr-seat--aisle[b-4k0m01ixna] { margin-right: 14px; }

.fr-seat--vip[b-4k0m01ixna] { --venue-seat-color: #7C5CFC; }
.fr-seat--prem[b-4k0m01ixna] { --venue-seat-color: #2A4BD1; }
.fr-seat--std[b-4k0m01ixna] { --venue-seat-color: #0E9C8A; }

.fr-seat__glyph[b-4k0m01ixna],
.fr-seat__glyph[b-4k0m01ixna]::before,
.fr-seat__glyph[b-4k0m01ixna]::after {
    display: block;
}

.fr-seat__glyph[b-4k0m01ixna] {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fr-seat__glyph[b-4k0m01ixna]::before,
.fr-seat__glyph[b-4k0m01ixna]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Backrest, with the armrests as offset box-shadows. */
.fr-seat__glyph[b-4k0m01ixna]::before {
    top: 5%;
    width: 52%;
    height: 50%;
    border-radius: 0.34rem 0.34rem 0.06rem 0.06rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--venue-seat-color, #607aa0) 54%, #ffffff 46%) 0%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 76%, #ffffff 24%) 45%, var(--venue-seat-color, #607aa0) 100%);
    border: 1px solid rgba(26, 25, 23, 0.26);
    box-shadow:
        -0.44rem 0.18rem 0 -0.18rem color-mix(in srgb, var(--venue-seat-color, #607aa0) 98%, transparent),
        0.44rem 0.18rem 0 -0.18rem color-mix(in srgb, var(--venue-seat-color, #607aa0) 98%, transparent),
        inset 0 -3px 5px rgba(26, 25, 23, 0.18),
        inset 0 1px 3px rgba(255, 255, 255, 0.32),
        0 5px 10px rgba(26, 25, 23, 0.2);
}

/* Cushion. */
.fr-seat__glyph[b-4k0m01ixna]::after {
    bottom: 7%;
    width: 72%;
    height: 32%;
    border-radius: 0.06rem 0.06rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--venue-seat-color, #607aa0) 0%, var(--venue-seat-color, #607aa0) 40%, color-mix(in srgb, var(--venue-seat-color, #607aa0) 88%, #1a1917 12%) 100%);
    border: 1px solid rgba(26, 25, 23, 0.28);
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.28),
        inset 0 -1px 3px rgba(26, 25, 23, 0.16);
}

.fr-seat:hover:not(:disabled)[b-4k0m01ixna] { transform: scale(1.18); }

.fr-seat:focus-visible[b-4k0m01ixna] {
    outline: 2px solid var(--fr-ink);
    outline-offset: 1px;
}

.fr-seat.is-sold[b-4k0m01ixna] {
    --venue-seat-color: var(--fr-border-strong);
    cursor: not-allowed;
}

/* Selected keeps the tier color and gets the same white checkmark the real picker overlays. */
.fr-seat.is-selected[b-4k0m01ixna]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 4px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(-50%, -60%) rotate(45deg);
    filter: drop-shadow(0 1px 2px rgba(26, 25, 23, 0.5));
    z-index: 3;
    pointer-events: none;
}

.fr-map-legend[b-4k0m01ixna] {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid var(--fr-border-soft);
    margin-bottom: 14px;
}

.fr-map-legend span[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--fr-muted);
}

.fr-sw[b-4k0m01ixna] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
}

.fr-sw--vip[b-4k0m01ixna] { background: #7C5CFC; }
.fr-sw--prem[b-4k0m01ixna] { background: #2A4BD1; }
.fr-sw--std[b-4k0m01ixna] { background: #0E9C8A; }
.fr-sw--sold[b-4k0m01ixna] { background: var(--fr-border-strong); }
.fr-sw--sel[b-4k0m01ixna] { background: var(--fr-ink); }

.fr-map-card__bar[b-4k0m01ixna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--fr-bg2);
    border: 1px solid var(--fr-border);
    border-radius: 12px;
    padding: 11px 14px;
}

.fr-map-card__sel-label[b-4k0m01ixna] {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--fr-ink);
}

.fr-map-card__sel-meta[b-4k0m01ixna] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fr-subtle);
}

.fr-map-card__checkout[b-4k0m01ixna] {
    font-weight: 600;
    font-size: 13.5px;
    color: #fff;
    background: #E04A22;
    border-radius: 10px;
    padding: 9px 16px;
    text-decoration: none;
    flex: none;
}

.fr-map-card__checkout:hover[b-4k0m01ixna] {
    color: #fff;
    background: #BB3A18;
}

.fr-map-card__checkout:focus-visible[b-4k0m01ixna] {
    outline: 2px solid #2A4BD1;
    outline-offset: 2px;
}

.fr-verified[b-4k0m01ixna] {
    position: absolute;
    bottom: -18px;
    left: -22px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 12px;
    padding: 10px 13px;
    box-shadow: var(--fr-chip-shadow);
    animation: fr-float-b-4k0m01ixna 5s ease-in-out infinite;
}

.fr-verified__icon[b-4k0m01ixna] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #15803D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex: none;
}

.fr-verified__name[b-4k0m01ixna] {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fr-ink);
}

.fr-verified__meta[b-4k0m01ixna] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fr-subtle);
}

/* ── Features ─────────────────────────────────────────────────── */
.fr-features[b-4k0m01ixna] {
    padding-top: 80px;
    padding-bottom: 80px;
}

.fr-feature-grid[b-4k0m01ixna] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fr-feature[b-4k0m01ixna] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 24px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.fr-feature:hover[b-4k0m01ixna] {
    transform: translateY(-3px);
    box-shadow: var(--fr-lift-shadow);
    border-color: var(--fr-border-strong);
}

.fr-fi[b-4k0m01ixna] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--fr-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.fr-fi svg[b-4k0m01ixna] { display: block; }

.fr-feature h3[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--fr-ink);
    margin: 0 0 7px;
}

.fr-feature p[b-4k0m01ixna] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fr-muted);
    margin: 0;
}

/* ── Seating showcase ─────────────────────────────────────────── */
.fr-seating__inner[b-4k0m01ixna] {
    padding-top: 80px;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 52px;
    align-items: center;
}

.fr-checklist[b-4k0m01ixna] {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
}

.fr-check[b-4k0m01ixna] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.45;
    color: var(--fr-body);
}

.fr-check__mark[b-4k0m01ixna] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fr-check-bg);
    color: var(--fr-check-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex: none;
    margin-top: 1px;
}

.fr-showcase[b-4k0m01ixna] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(42, 75, 209, .1);
    padding: 22px;
}

.fr-showcase__sections[b-4k0m01ixna] {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.fr-showcase__label[b-4k0m01ixna] {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fr-subtle);
    text-align: center;
    margin-bottom: 6px;
}

.fr-showcase__grid[b-4k0m01ixna] {
    display: grid;
    gap: 3px;
}

.fr-showcase__row[b-4k0m01ixna] {
    display: flex;
    gap: 3px;
}

.fr-vseat[b-4k0m01ixna] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
}

.fr-vseat--vip[b-4k0m01ixna] { background: #7C5CFC; }
.fr-vseat--prem[b-4k0m01ixna] { background: #2A4BD1; }
.fr-vseat--std[b-4k0m01ixna] { background: #0E9C8A; }
.fr-vseat--sold[b-4k0m01ixna] { background: var(--fr-border); }

.fr-vseat--sel[b-4k0m01ixna] {
    background: var(--fr-ink);
    box-shadow: inset 0 0 0 2px var(--fr-sel-ring);
}

.fr-showcase__legend[b-4k0m01ixna] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--fr-border-soft);
}

.fr-showcase__legend span[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fr-muted);
}

/* ── How it works ─────────────────────────────────────────────── */
.fr-how[b-4k0m01ixna] {
    padding-top: 80px;
    padding-bottom: 80px;
}

.fr-steps[b-4k0m01ixna] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.fr-step[b-4k0m01ixna] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 26px;
}

.fr-step__head[b-4k0m01ixna] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.fr-step__num[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: #2A4BD1;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.fr-step__num--coral[b-4k0m01ixna] { background: #E04A22; }

.fr-step__line[b-4k0m01ixna] {
    height: 1px;
    flex: 1;
    background: var(--fr-border);
}

.fr-step h3[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--fr-ink);
    margin: 0 0 8px;
}

.fr-step p[b-4k0m01ixna] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fr-muted);
    margin: 0;
}

/* ── Testimonial ──────────────────────────────────────────────── */
.fr-quote[b-4k0m01ixna] {
    padding-top: 74px;
    padding-bottom: 74px;
}

.fr-quote__inner[b-4k0m01ixna] {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.fr-quote__mark[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--fr-border);
    margin-bottom: 8px;
}

.fr-quote__text[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--fr-ink);
    margin: 0 0 22px;
}

.fr-quote__who[b-4k0m01ixna] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.fr-quote__avatar[b-4k0m01ixna] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: repeating-linear-gradient(135deg,
        var(--fr-border-soft), var(--fr-border-soft) 6px,
        var(--fr-border) 6px, var(--fr-border) 12px);
    flex: none;
}

.fr-quote__meta[b-4k0m01ixna] { text-align: left; }

.fr-quote__name[b-4k0m01ixna] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--fr-ink);
}

.fr-quote__role[b-4k0m01ixna] {
    font-size: 12.5px;
    color: var(--fr-subtle);
}

/* ── Numbers ──────────────────────────────────────────────────── */
.fr-numbers[b-4k0m01ixna] {
    padding-top: 74px;
    padding-bottom: 74px;
    /* comp's hairline; spans the band (full viewport up to the 1440px layout cap) */
    border-top: 1px solid var(--fr-border);
}

.fr-numbers__inner[b-4k0m01ixna] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
}

.fr-stat-grid[b-4k0m01ixna] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fr-stat[b-4k0m01ixna] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 14px;
    padding: 20px;
}

.fr-stat__val[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: -.02em;
    color: var(--fr-ink);
}

.fr-stat__bar[b-4k0m01ixna] {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #F5623C;
    margin: 8px 0 10px;
}

.fr-stat__lbl[b-4k0m01ixna] {
    font-size: 13px;
    color: var(--fr-muted);
    line-height: 1.4;
}

/* ── Final CTA ────────────────────────────────────────────────── */
.fr-cta[b-4k0m01ixna] {
    padding-top: 20px;
    padding-bottom: 56px;
}

.fr-cta__panel[b-4k0m01ixna] {
    background: linear-gradient(120deg, #161821, #14161C);
    /* nearly invisible on the light canvas; defines the panel edge in dark */
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 56px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fr-cta__glow[b-4k0m01ixna] {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    width: 340px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 98, 60, .28), transparent 70%);
    pointer-events: none;
}

.fr-cta__body[b-4k0m01ixna] { position: relative; }

.fr-cta__body .fr-eyebrow[b-4k0m01ixna] { margin-bottom: 16px; }

.fr-cta__h2[b-4k0m01ixna] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 14px;
}

.fr-cta__body p[b-4k0m01ixna] {
    font-size: 17px;
    line-height: 1.6;
    color: #B7B2A6;
    margin: 0 auto 30px;
    max-width: 52ch;
}

.fr-cta__actions[b-4k0m01ixna] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ── Motion ───────────────────────────────────────────────────── */
@keyframes fr-fade-b-4k0m01ixna {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes fr-float-b-4k0m01ixna {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    .fr-hero__copy[b-4k0m01ixna],
    .fr-hero__visual[b-4k0m01ixna],
    .fr-verified[b-4k0m01ixna] {
        animation: none;
    }

    .fr-seat[b-4k0m01ixna],
    .fr-feature[b-4k0m01ixna] {
        transition: none;
    }

    .fr-seat:hover:not(:disabled)[b-4k0m01ixna],
    .fr-feature:hover[b-4k0m01ixna] {
        transform: none;
    }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .fr-hero__inner[b-4k0m01ixna] {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-top: 40px;
        padding-bottom: 72px;
    }

    .fr-hero__h1[b-4k0m01ixna] { font-size: 48px; }

    .fr-hero__visual[b-4k0m01ixna] {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }

    .fr-seating__inner[b-4k0m01ixna],
    .fr-numbers__inner[b-4k0m01ixna] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 840px) {
    .fr-h2[b-4k0m01ixna] { font-size: 32px; }
    .fr-quote__text[b-4k0m01ixna] { font-size: 22px; }
    .fr-cta__h2[b-4k0m01ixna] { font-size: 34px; }

    .fr-feature-grid[b-4k0m01ixna] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-steps[b-4k0m01ixna] { grid-template-columns: 1fr; }
    .fr-cta__panel[b-4k0m01ixna] { padding: 44px 24px; }
}

@media (max-width: 640px) {
    .fr-hero__h1[b-4k0m01ixna] { font-size: 40px; }
    .fr-hero__sub[b-4k0m01ixna] { font-size: 17px; }

    .fr-features[b-4k0m01ixna],
    .fr-how[b-4k0m01ixna] {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .fr-seating__inner[b-4k0m01ixna] {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .fr-quote[b-4k0m01ixna],
    .fr-numbers[b-4k0m01ixna] {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .fr-feature-grid[b-4k0m01ixna] { grid-template-columns: 1fr; }
    .fr-verified[b-4k0m01ixna] { left: 8px; }
    .fr-cta__h2 br[b-4k0m01ixna] { display: none; }
}

@media (max-width: 480px) {
    .fr-stat-grid[b-4k0m01ixna] { grid-template-columns: 1fr; }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-page[b-1u4zhsk1gt] {
    min-height: 70vh;
    width: min(720px, calc(100vw - 3rem));
    margin: 4rem auto;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.error-code[b-1u4zhsk1gt] {
    margin-bottom: 0.5rem;
    color: var(--tr-primary);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
}

.not-found-page h1[b-1u4zhsk1gt] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.not-found-page p[b-1u4zhsk1gt] {
    max-width: 380px;
    margin: 0 0 1.5rem;
    color: var(--tr-muted);
    text-align: center;
}

.not-found-actions[b-1u4zhsk1gt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.landing-link-button[b-1u4zhsk1gt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--tr-primary);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.landing-link-button-secondary[b-1u4zhsk1gt] {
    border: 1px solid var(--tr-line);
    background: transparent;
    color: var(--tr-ink);
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
.legal-page[b-kmw7i7xvtf] {
    display: grid;
    gap: 1.1rem;
}

.legal-hero[b-kmw7i7xvtf],
.legal-content[b-kmw7i7xvtf],
.legal-side[b-kmw7i7xvtf] {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
}

.legal-hero[b-kmw7i7xvtf] {
    padding: 1.4rem;
    background:
        radial-gradient(100% 120% at 100% 0%, #dce4fd 0%, #eef2fe 46%, #ffffff 82%),
        #fff;
}

.legal-kicker[b-kmw7i7xvtf] {
    margin: 0 0 0.45rem;
    color: #223cab;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-hero h1[b-kmw7i7xvtf] {
    margin: 0;
    max-width: 60rem;
    color: #1a1917;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.legal-hero p[b-kmw7i7xvtf] {
    margin: 0.7rem 0 0;
    max-width: 50rem;
    color: #5f5b54;
}

.legal-layout[b-kmw7i7xvtf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.35fr);
    gap: 1rem;
    align-items: start;
}

.legal-content[b-kmw7i7xvtf],
.legal-side[b-kmw7i7xvtf] {
    padding: 1.2rem;
}

.legal-content h2[b-kmw7i7xvtf],
.legal-side h2[b-kmw7i7xvtf] {
    margin: 0 0 0.35rem;
    color: #1a1917;
    font-size: 1.15rem;
}

.legal-content p[b-kmw7i7xvtf],
.legal-side p[b-kmw7i7xvtf] {
    margin: 0 0 1rem;
    color: #5f5b54;
}

.legal-content p:last-child[b-kmw7i7xvtf],
.legal-side p:last-child[b-kmw7i7xvtf] {
    margin-bottom: 0;
}

.legal-side[b-kmw7i7xvtf] {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .legal-layout[b-kmw7i7xvtf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PublicEvent.razor.rz.scp.css */
.sales-closed-message[b-h6h37woeul] {
    padding: 0.9rem;
    background: #f7f4e5;
    border: 1px solid #ddd6b7;
    border-radius: 0.5rem;
}

.summary-panel[b-h6h37woeul] {
    border: 1px solid #e7e6e2;
    border-radius: 0.5rem;
    padding: 1rem;
}

.summary-total[b-h6h37woeul] {
    font-weight: 700;
}

/* Coral is the fan's commit moment (Front Row): this button starts the buy.
   This scoped rule outranks the app.css .checkout-button styling — keep them in sync. */
.checkout-button[b-h6h37woeul] {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #e04a22 0%, #bb3a18 100%);
    color: #fff;
    padding: 0.95rem 1rem;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 800;
    /* Kept in sync with app.css: tight enough to stay inside the summary panel's padding. */
    box-shadow: 0 8px 18px #e04a2226;
}

.checkout-button:disabled[b-h6h37woeul] {
    opacity: 0.52;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Pages/PublicOrganization.razor.rz.scp.css */
.landing-page[b-7ksqau8xsc] {
    --landing-ink: #14161c;
    --landing-heading: #1a1917;
    --landing-subtle: #5f5b54;
    --landing-line: rgba(26, 25, 23, 0.12);
    --landing-surface: #ffffff;
    --landing-accent: #2a4bd1;
    --landing-accent-deep: #223cab;
    --landing-shadow: 0 18px 40px rgba(26, 25, 23, 0.08);
    --landing-card-padding: 1.5rem;
    color: var(--landing-ink);
    padding: 1.25rem 0 3.5rem;
}

.landing-state[b-7ksqau8xsc] {
    width: min(720px, calc(100vw - 3rem));
    margin: 4rem auto;
    text-align: center;
    color: var(--landing-subtle, #5f5b54);
}

.landing-state-empty h1[b-7ksqau8xsc] {
    margin: 0 0 0.75rem;
    color: var(--landing-heading, #1a1917);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
}

.landing-link-button[b-7ksqau8xsc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: #2a4bd1;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.landing-hero[b-7ksqau8xsc],
.landing-body[b-7ksqau8xsc] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
}

.landing-hero[b-7ksqau8xsc] {
    border: 1px solid var(--landing-line);
    border-radius: 28px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--landing-surface);
    box-shadow: var(--landing-shadow);
    overflow: hidden;
}

.landing-hero-inner[b-7ksqau8xsc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
}

.landing-hero-logo[b-7ksqau8xsc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 12vw, 112px);
    height: clamp(72px, 12vw, 112px);
    border-radius: 24px;
    background: linear-gradient(135deg, var(--landing-accent) 0%, var(--landing-accent-deep) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
}

.landing-eyebrow[b-7ksqau8xsc] {
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--landing-accent-deep);
}

.landing-hero h1[b-7ksqau8xsc] {
    margin: 0.45rem 0 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--landing-heading);
}

.landing-tagline[b-7ksqau8xsc] {
    margin: 0.6rem 0 0;
    color: var(--landing-subtle);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 56ch;
}

.landing-hero-stats[b-7ksqau8xsc] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.25rem;
    margin-top: 1.2rem;
}

.landing-hero-stats div[b-7ksqau8xsc] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.landing-hero-stats strong[b-7ksqau8xsc] {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 800;
    color: var(--landing-heading);
}

.landing-hero-stats span[b-7ksqau8xsc] {
    margin-top: 0.18rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--landing-subtle);
}

.landing-body[b-7ksqau8xsc] {
    margin-top: 1.5rem;
}

.landing-toolbar[b-7ksqau8xsc] {
    position: sticky;
    top: 4.25rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--landing-line);
    border-radius: 18px;
    background: var(--landing-surface);
    box-shadow: 0 14px 34px rgba(26, 25, 23, 0.08);
}

.landing-tabs[b-7ksqau8xsc] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--landing-line) 60%, transparent);
}

.landing-tab[b-7ksqau8xsc] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.45rem 1.05rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--landing-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.landing-tab:hover[b-7ksqau8xsc] {
    color: var(--landing-heading);
}

.landing-tab-active[b-7ksqau8xsc],
.landing-tab-active:hover[b-7ksqau8xsc] {
    background: var(--landing-surface);
    color: var(--landing-heading);
    box-shadow: 0 1px 0 rgba(26, 25, 23, 0.08), 0 6px 16px rgba(26, 25, 23, 0.08);
}

.landing-controls[b-7ksqau8xsc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.landing-search[b-7ksqau8xsc] {
    min-width: 200px;
}

.landing-select[b-7ksqau8xsc] {
    min-width: 160px;
}

.landing-empty-events[b-7ksqau8xsc] {
    margin-top: 1.5rem;
    padding: 2.4rem 1.5rem;
    border: 1px dashed var(--landing-line);
    border-radius: 20px;
    text-align: center;
    color: var(--landing-subtle);
}

.landing-empty-events h3[b-7ksqau8xsc] {
    margin: 0 0 0.4rem;
    color: var(--landing-heading);
    font-size: 1.15rem;
}

.landing-empty-events p[b-7ksqau8xsc] {
    margin: 0;
    line-height: 1.6;
}

.landing-clear-filters[b-7ksqau8xsc] {
    appearance: none;
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    padding: 0.62rem 1rem;
    background: var(--landing-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.landing-event-grid[b-7ksqau8xsc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.landing-event-card[b-7ksqau8xsc] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: var(--landing-card-padding);
    border: 1px solid var(--landing-line);
    border-radius: 22px;
    background: var(--landing-surface);
    color: inherit;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    box-shadow: var(--landing-shadow);
}

.landing-event-card:hover[b-7ksqau8xsc] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--landing-accent) 38%, var(--landing-line));
    box-shadow: 0 22px 48px rgba(26, 25, 23, 0.14);
}

.landing-event-card:focus-visible[b-7ksqau8xsc] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--landing-accent) 58%, var(--landing-line));
    box-shadow:
        0 22px 48px rgba(26, 25, 23, 0.14),
        0 0 0 0.22rem color-mix(in srgb, var(--landing-accent) 22%, transparent);
    outline: none;
}

.landing-event-grid-loading[b-7ksqau8xsc] {
    pointer-events: none;
}

.landing-event-skeleton[b-7ksqau8xsc] {
    box-shadow: none;
}

.landing-event-skeleton:hover[b-7ksqau8xsc] {
    transform: none;
}

.landing-skeleton-date[b-7ksqau8xsc],
.landing-skeleton-line[b-7ksqau8xsc] {
    border-radius: 999px;
    background: linear-gradient(90deg, #f4f4f2 0%, #fafaf9 50%, #f4f4f2 100%);
    background-size: 200% 100%;
    animation: landing-skeleton-pulse-b-7ksqau8xsc 1.2s ease-in-out infinite;
}

.landing-skeleton-date[b-7ksqau8xsc] {
    width: 5rem;
    height: 3.4rem;
    border-radius: 16px;
}

.landing-skeleton-line[b-7ksqau8xsc] {
    height: 0.9rem;
    width: 72%;
}

.landing-skeleton-line.is-wide[b-7ksqau8xsc] {
    width: 92%;
}

.landing-skeleton-line.is-short[b-7ksqau8xsc] {
    width: 46%;
}

@keyframes landing-skeleton-pulse-b-7ksqau8xsc {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.landing-event-date[b-7ksqau8xsc] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.6rem 0.85rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--landing-accent) 12%, transparent);
    color: var(--landing-accent-deep);
    line-height: 1;
    width: fit-content;
}

.landing-event-day[b-7ksqau8xsc] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.landing-event-month[b-7ksqau8xsc] {
    margin-top: 0.18rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.landing-event-year[b-7ksqau8xsc] {
    margin-top: 0.05rem;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.78;
}

.landing-event-body h3[b-7ksqau8xsc] {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.25;
    color: var(--landing-heading);
    letter-spacing: -0.01em;
}

.landing-event-meta[b-7ksqau8xsc] {
    margin: 0.4rem 0 0;
    color: var(--landing-subtle);
    font-size: 0.94rem;
    line-height: 1.4;
}

.landing-event-tag[b-7ksqau8xsc] {
    display: inline-flex;
    margin-top: 0.65rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--landing-accent-deep);
    background: color-mix(in srgb, var(--landing-accent) 14%, transparent);
}

.landing-event-cta[b-7ksqau8xsc] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--landing-accent);
    font-weight: 700;
    font-size: 0.95rem;
}

.landing-pagination[b-7ksqau8xsc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.landing-pager[b-7ksqau8xsc] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--landing-line);
    border-radius: 999px;
    background: var(--landing-surface);
    color: var(--landing-heading);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.landing-pager:hover:not(:disabled)[b-7ksqau8xsc] {
    border-color: color-mix(in srgb, var(--landing-accent) 40%, var(--landing-line));
}

.landing-pager:disabled[b-7ksqau8xsc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.landing-pager-info[b-7ksqau8xsc] {
    color: var(--landing-subtle);
    font-size: 0.92rem;
    font-weight: 600;
}

/* ── Branded looks ───────────────────────────────────────────────────────────────
   The org's brand kit arrives as inline --brand-* custom properties on .landing-page
   (derived server-side by BrandPaletteBuilder — every *-text/*-ink var is already
   contrast-safe for the surface it's used on). The looks remap ONLY the page's color
   hooks; layout, type, and spacing are identical across all of them on purpose.
   Dark-mode remaps live in app.css beside the stock dark landing block, because
   scoped CSS can't reach the body-level .eventrika-dark class. */

.landing-page.landing-branded[b-7ksqau8xsc] {
    --landing-accent: var(--brand-accent);
    --landing-accent-deep: var(--brand-accent-text);
}

/* The raw primary can be too light to read on white, so text slots that used the raw
   accent switch to the derived text tone. Fills keep the raw color (ink is computed). */
.landing-branded .landing-event-cta[b-7ksqau8xsc] {
    color: var(--brand-accent-text);
}

.landing-branded .landing-clear-filters[b-7ksqau8xsc] {
    color: var(--brand-accent-ink);
}

.landing-branded .landing-hero-logo[b-7ksqau8xsc] {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);
    color: var(--brand-hero-ink);
}

/* Extra swatches cycle the date tiles (inline --chip-* per card); no swatches → the
   accent fallback keeps every tile in the primary tint. */
.landing-branded .landing-event-date[b-7ksqau8xsc] {
    background: color-mix(in srgb, var(--chip-accent, var(--landing-accent)) 13%, transparent);
    color: var(--chip-ink-light, var(--landing-accent-deep));
}

/* Gradient look: a soft primary→secondary wash across the hero. Mixing against the
   surface var (not white) makes the same rule tint correctly in dark mode. */
.landing-look-gradient .landing-hero[b-7ksqau8xsc] {
    background:
        linear-gradient(130deg,
            color-mix(in srgb, var(--brand-accent) 16%, var(--landing-surface)) 0%,
            var(--landing-surface) 46%,
            color-mix(in srgb, var(--brand-secondary) 20%, var(--landing-surface)) 100%);
    border-color: color-mix(in srgb, var(--brand-accent) 26%, var(--landing-line));
}

/* Bold look: the hero becomes a full-strength brand banner; all hero text switches to
   the precomputed pair ink (readable over BOTH gradient endpoints). */
.landing-look-bold .landing-hero[b-7ksqau8xsc] {
    background: linear-gradient(130deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);
    border-color: transparent;
}

.landing-look-bold .landing-eyebrow[b-7ksqau8xsc],
.landing-look-bold .landing-hero h1[b-7ksqau8xsc],
.landing-look-bold .landing-hero-stats strong[b-7ksqau8xsc] {
    color: var(--brand-hero-ink);
}

.landing-look-bold .landing-tagline[b-7ksqau8xsc],
.landing-look-bold .landing-hero-stats span[b-7ksqau8xsc] {
    color: color-mix(in srgb, var(--brand-hero-ink) 85%, transparent);
}

/* A gradient tile would melt into the banner — frost it with the hero ink instead. */
.landing-look-bold .landing-hero-logo[b-7ksqau8xsc] {
    background: color-mix(in srgb, var(--brand-hero-ink) 16%, transparent);
    color: var(--brand-hero-ink);
}

@media (max-width: 720px) {
    .landing-page[b-7ksqau8xsc] {
        --landing-card-padding: 1.2rem;
    }

    .landing-hero-inner[b-7ksqau8xsc] {
        grid-template-columns: 1fr;
    }

    .landing-toolbar[b-7ksqau8xsc] {
        flex-direction: column;
        align-items: stretch;
        top: 3.75rem;
    }

    .landing-controls[b-7ksqau8xsc] {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-search[b-7ksqau8xsc],
    .landing-select[b-7ksqau8xsc] {
        width: 100%;
    }

    .landing-event-card[b-7ksqau8xsc] {
        gap: 0.85rem;
    }

    .landing-event-date[b-7ksqau8xsc] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.22rem;
        padding: 0.5rem 0.7rem;
    }

    .landing-event-day[b-7ksqau8xsc],
    .landing-event-month[b-7ksqau8xsc] {
        margin: 0;
        font-size: 0.9rem;
        letter-spacing: 0;
    }

    .landing-event-year[b-7ksqau8xsc] {
        display: none;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
.support-page[b-yjw5zo88tx] {
    display: grid;
    gap: 1.1rem;
}

.support-hero[b-yjw5zo88tx],
.support-form-panel[b-yjw5zo88tx],
.support-side-panel[b-yjw5zo88tx] {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
}

.support-hero[b-yjw5zo88tx] {
    padding: 1.4rem;
    background:
        radial-gradient(100% 120% at 100% 0%, #dce4fd 0%, #eef2fe 46%, #ffffff 82%),
        #fff;
}

.support-kicker[b-yjw5zo88tx] {
    margin: 0 0 0.45rem;
    color: #223cab;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-hero h1[b-yjw5zo88tx] {
    margin: 0;
    max-width: 56rem;
    color: #1a1917;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.support-hero p[b-yjw5zo88tx] {
    margin: 0.7rem 0 0;
    max-width: 46rem;
    color: #5f5b54;
}

.support-layout[b-yjw5zo88tx] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.support-form-panel[b-yjw5zo88tx],
.support-side-panel[b-yjw5zo88tx] {
    padding: 1.15rem;
}

.support-form-panel form[b-yjw5zo88tx] {
    display: grid;
    gap: 0.9rem;
}

.support-grid[b-yjw5zo88tx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.support-field[b-yjw5zo88tx] {
    display: grid;
    gap: 0.38rem;
}

.support-field label[b-yjw5zo88tx] {
    color: #1a1917;
    font-weight: 800;
}

.support-input[b-yjw5zo88tx] {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 8px;
    padding: 0.85rem 0.9rem;
    font: inherit;
    color: #1a1917;
    background: #fff;
}

.support-textarea[b-yjw5zo88tx] {
    min-height: 10rem;
    resize: vertical;
}

.support-input:focus[b-yjw5zo88tx] {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.22rem rgba(42, 75, 209, 0.14);
}

.support-side-panel[b-yjw5zo88tx] {
    display: grid;
    gap: 0.8rem;
}

.support-side-panel h2[b-yjw5zo88tx],
.support-side-panel p[b-yjw5zo88tx] {
    margin: 0;
}

.support-side-panel p[b-yjw5zo88tx],
.support-side-list span[b-yjw5zo88tx] {
    color: #5f5b54;
}

.support-side-list[b-yjw5zo88tx] {
    display: grid;
    gap: 0.25rem;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .support-layout[b-yjw5zo88tx],
    .support-grid[b-yjw5zo88tx] {
        grid-template-columns: 1fr;
    }
}

.support-faq[b-yjw5zo88tx] {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
    padding: 1rem 1.15rem 0.4rem;
    margin-bottom: 1.1rem;
}

.support-faq h2[b-yjw5zo88tx] {
    margin: 0 0 0.7rem;
    color: #1a1917;
    font-size: 1.05rem;
}

.support-faq details[b-yjw5zo88tx] {
    border-bottom: 1px solid #f4f4f2;
    padding: 0.55rem 0;
}

.support-faq details:last-of-type[b-yjw5zo88tx] {
    border-bottom: 0;
}

.support-faq summary[b-yjw5zo88tx] {
    cursor: pointer;
    font-weight: 700;
    color: #2c2a25;
    padding: 0.2rem 0;
    list-style: none;
}

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

.support-faq summary[b-yjw5zo88tx]::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    margin-right: 0.45rem;
    color: #223cab;
    font-weight: 800;
}

.support-faq details[open] summary[b-yjw5zo88tx]::before {
    content: "−";
}

.support-faq details p[b-yjw5zo88tx] {
    margin: 0.45rem 0 0.6rem 1.45rem;
    color: #5f5b54;
}

.support-reference[b-yjw5zo88tx] {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background: #ecfbf1;
    border: 1px solid #99f6e4;
    color: #0e9c8a;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 700;
}
/* /Components/Pages/Terms.razor.rz.scp.css */
.legal-page[b-yb8z0raent] {
    display: grid;
    gap: 1.1rem;
}

.legal-hero[b-yb8z0raent],
.legal-content[b-yb8z0raent],
.legal-side[b-yb8z0raent] {
    border: 1px solid #e7e6e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
}

.legal-hero[b-yb8z0raent] {
    padding: 1.4rem;
    background:
        radial-gradient(100% 120% at 100% 0%, #dce4fd 0%, #eef2fe 46%, #ffffff 82%),
        #fff;
}

.legal-kicker[b-yb8z0raent] {
    margin: 0 0 0.45rem;
    color: #223cab;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-hero h1[b-yb8z0raent] {
    margin: 0;
    max-width: 60rem;
    color: #1a1917;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.legal-hero p[b-yb8z0raent],
.legal-content p[b-yb8z0raent],
.legal-side p[b-yb8z0raent] {
    color: #5f5b54;
}

.legal-layout[b-yb8z0raent] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.35fr);
    gap: 1rem;
    align-items: start;
}

.legal-content[b-yb8z0raent],
.legal-side[b-yb8z0raent] {
    padding: 1.2rem;
}

.legal-content h2[b-yb8z0raent],
.legal-side h2[b-yb8z0raent] {
    margin: 0 0 0.35rem;
    color: #1a1917;
    font-size: 1.15rem;
}

.legal-content p[b-yb8z0raent],
.legal-side p[b-yb8z0raent] {
    margin: 0 0 1rem;
}

.legal-side[b-yb8z0raent] {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .legal-layout[b-yb8z0raent] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/TicketView.razor.rz.scp.css */
.ticket-page[b-w7svpgm9j9] {
    --ticket-accent: #0e7490;
    --ticket-line: #e7e6e2;
    --ticket-ink: #1a1917;
    --ticket-muted: #5f5b54;
    display: grid;
    gap: 1rem;
}

.ticket-hero[b-w7svpgm9j9],
.ticket-card[b-w7svpgm9j9],
.ticket-state-card[b-w7svpgm9j9] {
    border: 1px solid var(--ticket-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(26, 25, 23, 0.07);
}

.ticket-hero[b-w7svpgm9j9] {
    padding: 1.45rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    background:
        radial-gradient(120% 120% at 100% 0%, #dce4fd 0%, #eef2fe 44%, #ffffff 78%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
}

.ticket-eyebrow[b-w7svpgm9j9] {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ticket-accent, #0e7490);
}

.ticket-hero h1[b-w7svpgm9j9],
.ticket-state-card h1[b-w7svpgm9j9] {
    margin: 0;
    color: var(--ticket-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.03;
}

.ticket-hero-copy[b-w7svpgm9j9],
.ticket-state-card p[b-w7svpgm9j9],
.ticket-note p[b-w7svpgm9j9],
.ticket-number-block span[b-w7svpgm9j9],
.ticket-meta dt[b-w7svpgm9j9] {
    color: var(--ticket-muted);
}

.ticket-hero-copy[b-w7svpgm9j9] {
    margin: 0.7rem 0 0;
}

.ticket-print-button[b-w7svpgm9j9] {
    border: 1px solid #d6d4ce;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: #fff;
    color: var(--ticket-accent, #1e2f6d);
    font: inherit;
    font-weight: 800;
}

.ticket-layout[b-w7svpgm9j9] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1rem;
}

.ticket-card[b-w7svpgm9j9] {
    padding: 1.25rem;
}

.ticket-code-block[b-w7svpgm9j9] {
    display: grid;
    place-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 1rem;
    border: 1px dashed #d7e5f6;
    border-radius: 22px;
    background: #fff;
    color: var(--ticket-muted);
    font: inherit;
    cursor: pointer;
}

.ticket-code-block[b-w7svpgm9j9]  svg {
    width: min(100%, 18rem);
    height: auto;
}

.ticket-code-hint[b-w7svpgm9j9] {
    color: var(--ticket-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* TIX-03: door-mode button + fullscreen high-contrast QR for the entry queue. */
.ticket-door-button[b-w7svpgm9j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d6d4ce;
    border-radius: 999px;
    background: #fafaf9;
    color: #1a1917;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.ticket-door-button:hover[b-w7svpgm9j9] {
    background: #f4f4f2;
}

/* Wallet badges — deliberately black in both themes, matching Apple/Google badge conventions. */
.ticket-wallet-row[b-w7svpgm9j9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.ticket-wallet-badge[b-w7svpgm9j9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1.05rem;
    border: 1px solid #000000;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-size: 0.85rem;
    text-decoration: none;
}

.ticket-wallet-badge:hover[b-w7svpgm9j9] {
    background: #1c1d23;
    color: #ffffff;
}

.ticket-wallet-badge strong[b-w7svpgm9j9] {
    font-weight: 700;
}

.ticket-wallet-badge svg[b-w7svpgm9j9] {
    flex-shrink: 0;
}

.ticket-door-overlay[b-w7svpgm9j9] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: #ffffff;
    padding: 1.5rem;
    cursor: pointer;
}

.ticket-door-qr[b-w7svpgm9j9] {
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: #ffffff;
}

.ticket-door-qr[b-w7svpgm9j9]  svg {
    width: min(86vw, 86vh, 30rem);
    height: auto;
}

.ticket-door-number[b-w7svpgm9j9] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #000000;
}

.ticket-door-hint[b-w7svpgm9j9] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5f5b54;
    text-align: center;
}

.ticket-door-close[b-w7svpgm9j9] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #f4f4f2;
    color: #1a1917;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.ticket-barcode-block[b-w7svpgm9j9] {
    display: grid;
    place-items: center;
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 18px;
    border: 1px solid #dce4fd;
    background: #ffffff;
    overflow-x: auto;
}

.ticket-barcode-block[b-w7svpgm9j9]  svg {
    width: min(100%, 26rem);
    min-width: 16rem;
    height: auto;
}

.ticket-number-block[b-w7svpgm9j9] {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: #fafaf9;
    border: 1px solid #dce4fd;
}

.ticket-number-label[b-w7svpgm9j9] {
    margin: 0;
    color: var(--ticket-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 800;
}

.ticket-number-block strong[b-w7svpgm9j9] {
    color: var(--ticket-ink);
    font-size: 1.2rem;
}

.ticket-number-fallback[b-w7svpgm9j9] {
    margin: 0.35rem 0 0;
    color: var(--ticket-muted);
    font-size: 0.78rem;
}

.ticket-detail-card[b-w7svpgm9j9] {
    display: grid;
    gap: 1rem;
}

.ticket-status-summary[b-w7svpgm9j9] {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
}

.ticket-status-summary p[b-w7svpgm9j9] {
    margin: 0;
    color: var(--ticket-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.ticket-chip[b-w7svpgm9j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    background: #eef2fe;
    color: #223cab;
    font-size: 0.8rem;
    font-weight: 800;
}

.ticket-chip.is-active[b-w7svpgm9j9] {
    background: #e7f6ec;
    color: #12652f;
}

.ticket-chip.is-used[b-w7svpgm9j9] {
    background: #fdecee;
    color: #8f1a21;
}

.ticket-meta[b-w7svpgm9j9] {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.ticket-meta div[b-w7svpgm9j9] {
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid #dce4fd;
    background: #fafaf9;
}

.ticket-meta dt[b-w7svpgm9j9] {
    margin: 0 0 0.18rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ticket-meta dd[b-w7svpgm9j9] {
    margin: 0;
    color: var(--ticket-ink);
    font-weight: 700;
}

.ticket-note[b-w7svpgm9j9] {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #eef2fe 0%, #fafaf9 100%);
    border: 1px solid #dce4fd;
}

.ticket-note p[b-w7svpgm9j9] {
    margin: 0;
}

.ticket-state-card[b-w7svpgm9j9] {
    padding: 1.6rem;
    max-width: 46rem;
}

.ticket-state-card.is-missing[b-w7svpgm9j9] {
    background:
        radial-gradient(140% 110% at 100% 0%, #fdf0f1 0%, #fdf0f1 52%, #ffffff 82%),
        #fff;
}

@media (max-width: 960px) {
    .ticket-layout[b-w7svpgm9j9] {
        grid-template-columns: 1fr;
    }

    .ticket-hero[b-w7svpgm9j9] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .ticket-code-block[b-w7svpgm9j9]  svg {
        width: 100%;
    }

    .ticket-code-block.is-expanded[b-w7svpgm9j9] {
        position: fixed;
        inset: 0;
        z-index: 1300;
        align-content: center;
        padding: 1.25rem;
        border: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.98);
    }

    .ticket-code-block.is-expanded[b-w7svpgm9j9]  svg {
        width: min(94vw, 34rem);
    }
}

@media print {
    .ticket-page[b-w7svpgm9j9] {
        gap: 0.7rem;
    }

    .ticket-hero[b-w7svpgm9j9],
    .ticket-card[b-w7svpgm9j9],
    .ticket-state-card[b-w7svpgm9j9] {
        box-shadow: none;
    }

    .ticket-hero[b-w7svpgm9j9] {
        padding: 0;
        border: 0;
        background: #ffffff;
    }

    .ticket-print-button[b-w7svpgm9j9],
    .ticket-code-hint[b-w7svpgm9j9],
    .ticket-wallet-row[b-w7svpgm9j9] {
        display: none !important;
    }

    .ticket-layout[b-w7svpgm9j9] {
        grid-template-columns: 1fr;
    }

    .ticket-code-block[b-w7svpgm9j9] {
        border: 0;
        padding: 0.25rem;
        cursor: default;
    }

    .ticket-code-block[b-w7svpgm9j9]  svg {
        width: 3.25in;
        margin: 0 auto;
    }

    .ticket-barcode-block[b-w7svpgm9j9] {
        border: 0;
        padding: 0.25rem 0;
    }
}

/* Send to a friend - the barcode reissues, the old one stops scanning (design doc pattern). */
.ticket-transfer[b-w7svpgm9j9] {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e7e6e2;
    border-radius: 14px;
    background: #fafaf9;
    display: grid;
    gap: 0.45rem;
}

.ticket-transfer-title[b-w7svpgm9j9] {
    margin: 0;
    font-weight: 800;
    color: #1a1917;
}

.ticket-transfer-copy[b-w7svpgm9j9] {
    margin: 0;
    font-size: 0.85rem;
    color: #5f5b54;
}

.ticket-transfer-label[b-w7svpgm9j9] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1917;
}

.ticket-transfer-row[b-w7svpgm9j9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.ticket-transfer-input[b-w7svpgm9j9] {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: #1a1917;
}

.ticket-transfer-input:focus[b-w7svpgm9j9] {
    outline: 0;
    border-color: #93adf6;
    box-shadow: 0 0 0 0.2rem rgba(42, 75, 209, 0.14);
}

.ticket-transfer-button[b-w7svpgm9j9] {
    border: 0;
    border-radius: 10px;
    padding: 0 1rem;
    min-height: 44px;
    background: #2a4bd1;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ticket-transfer-button:hover:not(:disabled)[b-w7svpgm9j9] {
    background: #223cab;
}

.ticket-transfer-button:disabled[b-w7svpgm9j9] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ticket-transfer-error[b-w7svpgm9j9] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a81d25;
}

/* Refund timeline - the buyer sees exactly where the money is (design doc pattern). */
.ticket-refund-timeline[b-w7svpgm9j9] {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--ticket-line);
    border-radius: 16px;
    background: #fafaf9;
}

.ticket-refund-title[b-w7svpgm9j9] {
    margin: 0 0 0.9rem;
    font-weight: 800;
    color: var(--ticket-ink);
}

.ticket-refund-steps[b-w7svpgm9j9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.ticket-refund-steps li[b-w7svpgm9j9] {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: var(--ticket-ink);
}

.ticket-refund-steps li small[b-w7svpgm9j9] {
    color: var(--ticket-muted);
}

.ticket-refund-dot[b-w7svpgm9j9] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #15803d;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 1px;
}

.ticket-refund-dot.is-pending[b-w7svpgm9j9] {
    background: #fff;
    border: 2px solid #f59e0b;
}
/* /Components/Pages/WhatsNew.razor.rz.scp.css */
/* What's New — public changelog. Surfaces use the light token values here and get
   explicit dark overrides in app.css (mirroring the .legal-* pattern), because the
   background tokens intentionally stay light in dark mode. Foreground text uses
   --tr-ink / --tr-muted, which DO flip for dark. */

.whatsnew-page[b-b8zoep08ae] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}

/* ---- Audience toggle (super-admins only: Public | Master) ---- */
.wn-audience-toggle[b-b8zoep08ae] {
    justify-self: start;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #e7e6e2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(26, 25, 23, 0.06);
}

.wn-audience-link[b-b8zoep08ae] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    color: var(--tr-muted);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.wn-audience-link:hover[b-b8zoep08ae] { color: var(--tr-ink); }

.wn-audience-link.is-active[b-b8zoep08ae] {
    background: var(--tr-primary);
    color: #fff;
}

/* ---- Hero ---- */
.wn-hero[b-b8zoep08ae] {
    border: 1px solid #e7e6e2;
    border-radius: 16px;
    padding: 1.8rem 1.6rem;
    background:
        radial-gradient(120% 130% at 100% 0%, #dce4fd 0%, #eef2fe 44%, #ffffff 82%),
        #fff;
    box-shadow: 0 16px 34px rgba(26, 25, 23, 0.08);
}

/* Master (internal) changelog: a neutral stone hero + an unmistakable ink flag, so a
   super admin always knows at a glance they're reading the privileged record. */
.wn-hero-master[b-b8zoep08ae] {
    background:
        radial-gradient(120% 130% at 100% 0%, #ecebe8 0%, #f4f3f1 46%, #ffffff 82%),
        #fff;
}

.wn-hero-master .wn-kicker[b-b8zoep08ae] { color: #5f5b54; }

.wn-master-flag[b-b8zoep08ae] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    background: #1a1917;
    color: #f6f5f3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wn-kicker[b-b8zoep08ae] {
    margin: 0 0 0.5rem;
    color: #223cab;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wn-hero h1[b-b8zoep08ae] {
    margin: 0;
    color: var(--tr-ink);
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.wn-lede[b-b8zoep08ae] {
    margin: 0.7rem 0 0;
    max-width: 52rem;
    color: var(--tr-muted);
    font-size: 1.05rem;
    line-height: 1.5;
}

.wn-meta[b-b8zoep08ae] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(42, 75, 209, 0.16);
    color: var(--tr-muted);
    font-size: 0.92rem;
}

.wn-meta-item strong[b-b8zoep08ae] { color: var(--tr-ink); }
.wn-meta-dot[b-b8zoep08ae] { color: #93adf6; }

/* ---- Timeline ---- */
.wn-timeline[b-b8zoep08ae] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.wn-release[b-b8zoep08ae] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.9rem;
}

/* The vertical rail + node */
.wn-rail[b-b8zoep08ae] {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 1.7rem;
}

.wn-rail[b-b8zoep08ae]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1.1rem;            /* bridge the gap to the next release */
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #dce4fd, #e7e6e2);
}

.wn-release:last-child .wn-rail[b-b8zoep08ae]::before { bottom: 0; }

.wn-node[b-b8zoep08ae] {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid var(--tr-primary);
    box-shadow: 0 0 0 4px rgba(42, 75, 209, 0.12);
}

/* ---- Release card ---- */
.wn-card[b-b8zoep08ae] {
    border: 1px solid #e7e6e2;
    border-radius: 14px;
    background: var(--tr-card);
    box-shadow: 0 10px 26px rgba(26, 25, 23, 0.07);
    padding: 1.2rem 1.3rem;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.wn-card:hover[b-b8zoep08ae] {
    box-shadow: 0 18px 40px rgba(26, 25, 23, 0.12);
    transform: translateY(-1px);
}

.wn-card.is-latest[b-b8zoep08ae] {
    border-color: rgba(42, 75, 209, 0.4);
    box-shadow: 0 12px 30px rgba(42, 75, 209, 0.16);
}

.wn-card-head[b-b8zoep08ae] { margin-bottom: 0.85rem; }

.wn-date-row[b-b8zoep08ae] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.wn-date[b-b8zoep08ae] {
    color: var(--tr-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wn-latest-badge[b-b8zoep08ae] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--tr-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wn-title[b-b8zoep08ae] {
    margin: 0;
    color: var(--tr-ink);
    font-size: 1.3rem;
    line-height: 1.2;
}

.wn-summary[b-b8zoep08ae] {
    margin: 0.3rem 0 0;
    color: var(--tr-muted);
    font-size: 0.98rem;
    line-height: 1.45;
}

/* ---- Change list ---- */
.wn-changes[b-b8zoep08ae] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.wn-change[b-b8zoep08ae] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
}

.wn-change-text[b-b8zoep08ae] {
    color: var(--tr-ink);
    font-size: 0.96rem;
    line-height: 1.5;
}

.wn-tag[b-b8zoep08ae] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.1rem;
    padding: 0.12rem 0.2rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.wn-tag-new[b-b8zoep08ae] {
    background: #dce4fd;
    color: #223cab;
    border-color: #dce4fd;
}

.wn-tag-improved[b-b8zoep08ae] {
    background: #dce4fd;
    color: #223cab;
    border-color: #becefb;
}

.wn-tag-fixed[b-b8zoep08ae] {
    background: #e7f6ec;
    color: #12652f;
    border-color: #bfe9cd;
}

/* ---- Footer CTA ---- */
.wn-footer-cta[b-b8zoep08ae] {
    border: 1px dashed #d6d4ce;
    border-radius: 14px;
    padding: 1.4rem;
    text-align: center;
    background: rgba(42, 75, 209, 0.03);
}

.wn-footer-cta p[b-b8zoep08ae] {
    margin: 0 0 0.9rem;
    color: var(--tr-muted);
    font-size: 1.02rem;
}

.wn-cta-buttons[b-b8zoep08ae] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

@media (max-width: 600px) {
    .wn-release[b-b8zoep08ae] {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 0.65rem;
    }
    .wn-change[b-b8zoep08ae] {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .wn-tag[b-b8zoep08ae] { justify-self: start; }
}
/* /Components/Shared/SeatViewPreview.razor.rz.scp.css */
.seatview[b-ij2shg3bf9] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: #1a1917;
}

.seatview-head[b-ij2shg3bf9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.seatview-rating[b-ij2shg3bf9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999rem;
    font-weight: 600;
    color: #fff;
    background: #85817a;
}

.seatview-rating-score[b-ij2shg3bf9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.35rem;
    border-radius: 999rem;
    background: rgba(255, 255, 255, 0.22);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.seatview-rating-text[b-ij2shg3bf9] {
    font-size: 0.9rem;
}

.seatview-rating-excellent[b-ij2shg3bf9] { background: linear-gradient(135deg, #15803d, #15803d); }
.seatview-rating-great[b-ij2shg3bf9] { background: linear-gradient(135deg, #2a4bd1, #3d62e3); }
.seatview-rating-good[b-ij2shg3bf9] { background: linear-gradient(135deg, #0891b2, #22d3ee); color: #062a33; }
.seatview-rating-fair[b-ij2shg3bf9] { background: linear-gradient(135deg, #f59e0b, #f59e0b); }
.seatview-rating-limited[b-ij2shg3bf9] { background: linear-gradient(135deg, #a81d25, #d22730); }

.seatview-head-meta[b-ij2shg3bf9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.1rem;
}

.seatview-seat-label[b-ij2shg3bf9] {
    font-weight: 700;
    font-size: 1rem;
}

.seatview-head-caption[b-ij2shg3bf9] {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #85817a;
}

/* ---- Simulated "from your seat" scene ---- */
.seatview-scene[b-ij2shg3bf9] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e7e6e2;
    background: var(--sv-floor, #f4f4f2);
    box-shadow: inset 0 -20px 40px rgba(26, 25, 23, 0.08);
    perspective: 900px;
    isolation: isolate;
}

.seatview-compact .seatview-scene[b-ij2shg3bf9] {
    aspect-ratio: 2 / 1;
}

.seatview-sky[b-ij2shg3bf9] {
    position: absolute;
    inset: 0 0 calc(100% - var(--sv-horizon, 50%)) 0;
    background:
        radial-gradient(ellipse at 50% 12%, rgba(176, 172, 163, 0.2), transparent 42%),
        radial-gradient(ellipse at 18% 28%, rgba(61, 98, 227, 0.16), transparent 34%),
        linear-gradient(180deg, #101116 0%, #1c1d23 55%, #454239 100%);
}

.seatview-scene.is-elevated .seatview-sky[b-ij2shg3bf9] {
    filter: brightness(1.08);
}

/* Ceiling: a darker overhang along the top edge so we don't feel like we're outdoors. */
.seatview-ceiling[b-ij2shg3bf9] {
    position: absolute;
    inset: 0 0 calc(100% - 16%) 0;
    background:
        linear-gradient(180deg, rgba(16, 15, 14, 0.85) 0%, rgba(16, 15, 14, 0.55) 60%, transparent 100%),
        radial-gradient(ellipse at 50% 0%, rgba(176, 172, 163, 0.18), transparent 60%);
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 -8px 18px rgba(16, 15, 14, 0.4);
}

/* Back wall framing the stage area. */
.seatview-back-wall[b-ij2shg3bf9] {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 14%;
    height: calc(var(--sv-horizon, 50%) - 14%);
    background:
        linear-gradient(180deg, #1c1d23 0%, #14161c 60%, #101116 100%),
        radial-gradient(ellipse at 50% 100%, rgba(96, 122, 160, 0.18), transparent 65%);
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -10px 20px rgba(16, 15, 14, 0.45);
    z-index: 1;
    pointer-events: none;
}

/* Side walls — angled inward via perspective so they read as receding into the venue. They also
   react to where the viewer is sitting: a back-right seat sees the right wall huge and close, the
   left wall small and far away. --sv-lateral is +1 for an audience-right viewer, -1 for left. */
.seatview-wall[b-ij2shg3bf9] {
    position: absolute;
    top: 0;
    bottom: calc(100% - var(--sv-horizon, 50%) - 6%);
    background:
        linear-gradient(180deg, rgba(16, 15, 14, 0.97) 0%, rgba(26, 25, 23, 0.85) 55%, rgba(26, 25, 23, 0.5) 100%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 26px);
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 28px rgba(16, 15, 14, 0.7),
        inset 0 -8px 22px rgba(16, 15, 14, 0.5);
}

.seatview-wall-left[b-ij2shg3bf9] {
    left: -3%;
    /* Grows when the viewer is on the LEFT (lateral negative), shrinks on the right. */
    width: calc(22% - (var(--sv-lateral, 0) * 15%));
    opacity: calc(0.85 - (var(--sv-lateral, 0) * 0.45));
    transform-origin: left center;
    transform: perspective(680px) rotateY(calc(34deg + (var(--sv-lateral, 0) * 8deg)));
    clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
}

.seatview-wall-right[b-ij2shg3bf9] {
    right: -3%;
    /* Mirror: grows when the viewer is on the RIGHT (lateral positive). */
    width: calc(22% + (var(--sv-lateral, 0) * 15%));
    opacity: calc(0.85 + (var(--sv-lateral, 0) * 0.45));
    transform-origin: right center;
    transform: perspective(680px) rotateY(calc(-34deg + (var(--sv-lateral, 0) * 8deg)));
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 86%);
}

.seatview-floor[b-ij2shg3bf9] {
    position: absolute;
    inset: var(--sv-horizon, 50%) 0 0 0;
    background:
        linear-gradient(110deg, transparent 0 47%, rgba(255, 255, 255, 0.12) 47% 48%, transparent 48% 100%),
        linear-gradient(70deg, transparent 0 52%, rgba(26, 25, 23, 0.08) 52% 53%, transparent 53% 100%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18), transparent 56%),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-floor, #f4f4f2) 36%, #1a1917 64%) 0%, color-mix(in srgb, var(--sv-floor, #f4f4f2) 54%, #454239 46%) 100%);
    transform: perspective(680px) rotateX(calc(0deg - (var(--sv-elevated, 0) * 3deg)));
    transform-origin: center top;
}

.seatview-floor[b-ij2shg3bf9]::before,
.seatview-floor[b-ij2shg3bf9]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.seatview-floor[b-ij2shg3bf9]::before {
    background:
        repeating-linear-gradient(90deg, rgba(26, 25, 23, 0.08) 0 1px, transparent 1px 58px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 42px);
    opacity: 0.55;
    transform: perspective(560px) rotateX(54deg) scaleX(1.35);
    transform-origin: center top;
}

.seatview-floor[b-ij2shg3bf9]::after {
    background: linear-gradient(180deg, rgba(16, 15, 14, 0.04), rgba(16, 15, 14, 0.2));
}

.seatview-scene.is-elevated .seatview-floor[b-ij2shg3bf9] {
    filter: brightness(0.98);
}

.seatview-scene.sv-floor-concrete .seatview-floor[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 32px),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-floor, #f4f4f2) 36%, #1a1917 64%), color-mix(in srgb, var(--sv-floor, #f4f4f2) 54%, #454239 46%));
}

.seatview-scene.sv-floor-carpet .seatview-floor[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-floor, #f4f4f2) 34%, #1a1917 66%), color-mix(in srgb, var(--sv-floor, #f4f4f2) 48%, #5f5b54 52%));
}

/* Grass/turf sites (ballparks, outdoor pitches): mowed-stripe bands receding to the horizon,
   leaning on the green --sv-floor tint rather than the indoor slate mix. */
.seatview-scene.sv-floor-grass .seatview-floor[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 26px, rgba(20, 83, 45, 0.10) 26px 52px),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-floor, #b5d9bc) 44%, #14532d 56%), color-mix(in srgb, var(--sv-floor, #b5d9bc) 62%, #1f5132 38%));
}

/* Stage in the distance — wider than tall so a wall-to-wall stage doesn't tower up the frame.
   The aspect ratio is intentionally squat: real stages from the audience read as a wide, low
   slab (deck on top, riser on the face). */
.seatview-stage[b-ij2shg3bf9] {
    position: absolute;
    z-index: 3;
    aspect-ratio: 10 / 1.7;
    transform-origin: center bottom;
    will-change: transform;
    filter: drop-shadow(0 12px 16px rgba(16, 15, 14, 0.28));
}

.seatview-stage-deck[b-ij2shg3bf9],
.seatview-stage-riser[b-ij2shg3bf9],
.seatview-stage-lip[b-ij2shg3bf9] {
    position: absolute;
    display: block;
}

.seatview-stage-deck[b-ij2shg3bf9] {
    left: 3%;
    right: 3%;
    top: 6%;
    height: calc(40% + (var(--sv-block-depth, 0.3) * 6%));
    border-radius: 3px 3px 1px 1px;
    background:
        radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.18), transparent 56%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-stage, #2c2a25) 82%, #ffffff 18%) 0%, var(--sv-stage, #2c2a25) 74%, color-mix(in srgb, var(--sv-stage, #2c2a25) 88%, #100f0e 12%) 100%);
    color: var(--sv-stage-fg, #fafaf9);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -12px 18px rgba(16, 15, 14, 0.16);
    /* Subtle trapezoid for perspective (top narrower than bottom) — but only just. The deck top
       reads as a straight horizontal edge, not a cresting wave. */
    clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
    overflow: hidden;
    z-index: 3;
}

.seatview-stage-deck[b-ij2shg3bf9]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%);
    pointer-events: none;
}

.seatview-stage.is-center-view .seatview-stage-deck[b-ij2shg3bf9] {
    left: 2%;
    right: 2%;
    clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}

.seatview-stage.is-center-view .seatview-stage-riser[b-ij2shg3bf9] {
    left: 4%;
    right: 4%;
    clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}

.seatview-stage.is-center-view .seatview-stage-lip[b-ij2shg3bf9] {
    left: 3.5%;
    right: 3.5%;
}

.seatview-stage-riser[b-ij2shg3bf9] {
    left: 5%;
    right: 5%;
    top: calc(45% + (var(--sv-block-depth, 0.3) * 4%));
    height: calc(28% + (var(--sv-riser, 0) * 15%));
    border-radius: 0 0 4px 4px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 46px),
        linear-gradient(90deg, rgba(16, 15, 14, 0.22), transparent 18%, transparent 82%, rgba(16, 15, 14, 0.22)),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-stage, #2c2a25) 70%, #ffffff 30%) 0%, color-mix(in srgb, var(--sv-stage, #2c2a25) 88%, #100f0e 12%) 42%, color-mix(in srgb, var(--sv-stage, #2c2a25) 68%, #100f0e 32%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -10px 18px rgba(16, 15, 14, 0.3);
    /* Riser is the vertical face of the stage under the deck — flat sides, slight perspective. */
    clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sv-stage-fg, #fafaf9);
    z-index: 2;
}

/* Stage lip: the thin highlighted edge where the deck meets the riser. Rectangular, NOT a pill —
   the pill shape (border-radius: 999px) read as a cresting wave when the stage was wall-to-wall. */
.seatview-stage-lip[b-ij2shg3bf9] {
    left: 4%;
    right: 4%;
    top: calc(44% + (var(--sv-block-depth, 0.3) * 4%));
    height: 1.6%;
    border-radius: 1px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(176, 172, 163, 0.22) 45%, rgba(16, 15, 14, 0.22));
    box-shadow: 0 3px 6px rgba(16, 15, 14, 0.24);
    z-index: 4;
}

.seatview-stage-name[b-ij2shg3bf9] {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0 0.5rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(16, 15, 14, 0.45);
    opacity: 0.9;
}

.seatview-stage-shadow[b-ij2shg3bf9] {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 19%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(16, 15, 14, 0.34), transparent 70%);
    z-index: 1;
}

/* Foreground chair-back strip — the chair backs of the row directly in front of the viewer.
   Sits at the bottom of the frame, slightly off-screen, so the rounded tops poke up like a real
   row of seats one step ahead. Without this the POV feels like it's floating in mid-air. */
.seatview-front-backs[b-ij2shg3bf9] {
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -7%;
    height: 22%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(0.3rem, 1vw, 0.8rem);
    padding: 0 4%;
    /* Must beat the projected-row z-index formula (10 + ~800 max) so the chair backs sit in front
       of every audience row, not behind them. */
    z-index: 9000;
    pointer-events: none;
}

.seatview-frontback[b-ij2shg3bf9] {
    flex: 1 1 0;
    max-width: 13%;
    background:
        radial-gradient(ellipse at 50% 24%, rgba(96, 122, 160, 0.42), transparent 70%),
        linear-gradient(180deg, rgba(44, 42, 37, 0.92) 0%, rgba(26, 25, 23, 0.97) 60%, rgba(16, 15, 14, 1) 100%);
    border-radius: 36% 36% 6% 6% / 56% 56% 6% 6%;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.07),
        inset 0 -6px 14px rgba(16, 15, 14, 0.55),
        0 -3px 10px rgba(16, 15, 14, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Elevated viewer looks DOWN on the row in front — the chair backs sit slightly lower and read
   shorter than at ground level, but stay clearly visible so the POV still feels anchored. */
.seatview-scene.is-elevated .seatview-front-backs[b-ij2shg3bf9] {
    bottom: -9%;
    height: 19%;
    opacity: 0.92;
}

/* Chart-composed audience rows. Each row is positioned from chart geometry, then drawn as a
   readable strip of seats so the scene keeps the polished "view from seat" composition. */
.seatview-audience[b-ij2shg3bf9] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.seatview-audience-row[b-ij2shg3bf9] {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--sv-chair-gap, 0.12rem);
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    will-change: left, top, width;
    filter: drop-shadow(0 0.25rem 0.35rem rgba(16, 15, 14, 0.22));
}

.seatview-audience-row.is-left[b-ij2shg3bf9],
.seatview-audience-row.is-right[b-ij2shg3bf9] {
    justify-content: center;
}

.seatview-audience-row.is-viewer-section[b-ij2shg3bf9] {
    filter: drop-shadow(0 0.3rem 0.45rem rgba(16, 15, 14, 0.3));
}

.seatview-chair[b-ij2shg3bf9] {
    position: relative;
    display: block;
    flex: 0 0 var(--sv-chair-width, 0.8rem);
    width: var(--sv-chair-width, 0.8rem);
    height: var(--sv-chair-height, 1rem);
    transform-style: preserve-3d;
}

.seatview-chair-back[b-ij2shg3bf9],
.seatview-chair-cushion[b-ij2shg3bf9],
.seatview-chair-stem[b-ij2shg3bf9] {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

.seatview-chair-back[b-ij2shg3bf9] {
    top: 0;
    width: 86%;
    height: 58%;
    border-radius: 8px 8px 5px 5px;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.28), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--sv-seat, #607aa0) 72%, #ffffff 28%), color-mix(in srgb, var(--sv-seat, #607aa0) 82%, #1a1917 18%));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 -7px 9px rgba(26, 25, 23, 0.18), 0 2px 5px rgba(26, 25, 23, 0.2);
}

.seatview-chair-cushion[b-ij2shg3bf9] {
    bottom: 12%;
    width: 100%;
    height: 42%;
    border-radius: 7px 7px 5px 5px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sv-seat, #607aa0) 84%, #ffffff 16%), color-mix(in srgb, var(--sv-seat, #607aa0) 78%, #1a1917 22%));
    box-shadow: 0 5px 7px rgba(26, 25, 23, 0.22);
    transform: translateX(-50%) perspective(80px) rotateX(26deg);
    transform-origin: center top;
}

.seatview-chair-stem[b-ij2shg3bf9] {
    bottom: 0;
    width: 32%;
    height: 24%;
    border-radius: 0 0 999px 999px;
    background: rgba(69, 66, 57, 0.45);
    filter: blur(0.2px);
}

.seatview-front-gap[b-ij2shg3bf9] {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 14%;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: clamp(0.55rem, 2vw, 1.25rem);
    opacity: 0.35;
    pointer-events: none;
}

.seatview-front-gap span[b-ij2shg3bf9] {
    width: clamp(0.75rem, 1.8vw, 1.25rem);
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(231, 230, 226, 0.8);
    box-shadow: 0 0.25rem 0.75rem rgba(26, 25, 23, 0.24);
}

.seatview-empty[b-ij2shg3bf9] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1rem;
    color: #5f5b54;
    background: repeating-linear-gradient(45deg, rgba(176, 172, 163, 0.12) 0 10px, transparent 10px 20px), var(--sv-floor, #f4f4f2);
}

.seatview-empty strong[b-ij2shg3bf9] {
    color: #2c2a25;
}

.seatview-summary[b-ij2shg3bf9] {
    margin: 0;
    font-size: 0.9rem;
    color: #454239;
    line-height: 1.4;
}

/* ---- Stat chips ---- */
.seatview-chips[b-ij2shg3bf9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.seatview-chip[b-ij2shg3bf9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    background: #f4f4f2;
    border: 1px solid #e7e6e2;
}

.seatview-chip-label[b-ij2shg3bf9] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #85817a;
}

.seatview-chip-value[b-ij2shg3bf9] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1917;
}

/* ---- Mini-map ---- */
.seatview-map-wrap[b-ij2shg3bf9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.seatview-map-wrap-primary[b-ij2shg3bf9] {
    order: 1;
    gap: 0.5rem;
}

.seatview-head[b-ij2shg3bf9] {
    order: 0;
}

.seatview-summary[b-ij2shg3bf9] {
    order: 2;
}

.seatview-chips[b-ij2shg3bf9] {
    order: 3;
}

.seatview-map-wrap-primary .seatview-map-caption[b-ij2shg3bf9] {
    font-size: 0.8rem;
    color: #5f5b54;
}

.seatview-map-caption[b-ij2shg3bf9] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #85817a;
}

.seatview-map[b-ij2shg3bf9] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 14px;
    border: 1px solid #e7e6e2;
    overflow: hidden;
    background: var(--sv-floor, #f4f4f2);
}

.seatview-map-wrap-primary .seatview-map[b-ij2shg3bf9] {
    aspect-ratio: 16 / 11;
    border-radius: 18px;
    border-color: #d6d4ce;
    box-shadow: 0 10px 28px rgba(26, 25, 23, 0.12), inset 0 -18px 36px rgba(26, 25, 23, 0.06);
}

.seatview-map.is-round-room[b-ij2shg3bf9] {
    border-radius: 999rem;
}

.seatview-map.sv-floor-concrete[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(90deg, rgba(26, 25, 23, 0.05) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(26, 25, 23, 0.04) 0 1px, transparent 1px 24px);
}

.seatview-map.sv-floor-carpet[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(26, 25, 23, 0.06) 0 1px, transparent 1px 5px);
}

.seatview-map.sv-floor-grass[b-ij2shg3bf9] {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 10px, rgba(20, 83, 45, 0.07) 10px 20px);
}

.seatview-map-node[b-ij2shg3bf9] {
    position: absolute;
    border-radius: 4px;
    background: var(--sv-node, #d6d4ce);
    border: 1px solid rgba(26, 25, 23, 0.12);
}

.seatview-map-stage[b-ij2shg3bf9] {
    border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sv-node, #2c2a25) 82%, #ffffff 18%), var(--sv-node, #2c2a25));
}

.seatview-map-section[b-ij2shg3bf9] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sv-node, #bfd6f3) 72%, #ffffff 28%), var(--sv-node, #bfd6f3));
}

.seatview-map-section.is-elevated[b-ij2shg3bf9] {
    border-color: rgba(26, 25, 23, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 5px);
}

.seatview-map-table.is-round[b-ij2shg3bf9] {
    border-radius: 50%;
}

.seatview-map-zone[b-ij2shg3bf9] {
    border-style: dashed;
}

.seatview-map-sightline[b-ij2shg3bf9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.seatview-map-sightline line[b-ij2shg3bf9] {
    stroke: rgba(42, 75, 209, 0.85);
    stroke-width: 1.4;
    stroke-dasharray: 3 2.5;
    vector-effect: non-scaling-stroke;
}

.seatview-map-marker[b-ij2shg3bf9] {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(26, 25, 23, 0.25), 0 2px 6px rgba(26, 25, 23, 0.4);
    z-index: 6;
}

.seatview-map-marker[b-ij2shg3bf9]::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.45;
    animation: seatview-ping-b-ij2shg3bf9 1.8s ease-out infinite;
}

@keyframes seatview-ping-b-ij2shg3bf9 {
    0% { transform: scale(0.6); opacity: 0.5; }
    100% { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 640px) {
    .seatview-head[b-ij2shg3bf9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .seatview-head-meta[b-ij2shg3bf9] {
        align-items: flex-start;
        text-align: left;
    }

    .seatview-chips[b-ij2shg3bf9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/TicketFeeModeChooser.razor.rz.scp.css */
/* Same selected-card language as CreateEvent's fulfillment/visibility cards. These resolve to
   [b-<chooser>] .fee-mode-card…, satisfied by the component's plain wrapper div; the dark twin lives
   in app.css beside .fulfillment-card.is-selected because scoped CSS can't reach body.eventrika-dark. */
[b-g1vpqvqt7r] .fee-mode-card {
    border: 2px solid #e7e6e2;
    border-radius: 12px;
    transition: all 200ms ease;
    cursor: pointer;
}

[b-g1vpqvqt7r] .fee-mode-card:hover {
    border-color: #2a4bd1;
    box-shadow: 0 4px 12px rgba(42, 75, 209, 0.1);
}

[b-g1vpqvqt7r] .fee-mode-card.is-selected {
    border-color: #2a4bd1;
    background: linear-gradient(135deg, #eef2fe 0%, #ffffff 100%);
    box-shadow: 0 8px 24px rgba(42, 75, 209, 0.15);
}