/* /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, so the box has to stay under it. The source
       PNGs are trimmed to the wordmark's own ink — they used to carry ~68% transparent padding,
       which made a 40px box render a 13px-tall mark that read as a caption next to the nav.
       Height here IS the mark's height now: 26px leaves 11px of clearance above and below. */
    height: 26px;
    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);
}

/* No app bar on a kiosk, so no room to keep for one. */
.layout-body.is-kiosk[b-i0i1k1u6z3] {
    padding-top: 0.75rem;
}

.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.web.js shows this with an inline display:block, so the layout works as a block.
   Dark mode lives in app.css (scoped CSS can't follow body.eventrika-dark). */
#blazor-error-ui[b-i0i1k1u6z3] {
    background: var(--tr-card, #ffffff);
    color: var(--tr-ink, #1a1917);
    border-top: 3px solid var(--tr-danger, #d22730);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    display: none;
    font-weight: 600;
    left: 0;
    padding: 0.75rem 3.75rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1400;
}

#blazor-error-ui .app-error-bar-text[b-i0i1k1u6z3] {
    display: inline;
    margin: 0;
}

#blazor-error-ui .reload[b-i0i1k1u6z3] {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--tr-primary, #2a4bd1);
    color: #ffffff;
    text-decoration: none;
}

#blazor-error-ui .dismiss[b-i0i1k1u6z3] {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

#blazor-error-ui .dismiss:hover[b-i0i1k1u6z3],
#blazor-error-ui .dismiss:focus-visible[b-i0i1k1u6z3] {
    background: rgba(0, 0, 0, 0.06);
}

@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/Door/DoorHub.razor.rz.scp.css */
.door-stepper[b-4yfega5djv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.door-stepper-count[b-4yfega5djv] {
    min-width: 2.5ch;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
}
/* /Components/Pages/Admin/Door/DoorKiosk.razor.rz.scp.css */
.door-kiosk-steps[b-8e4u4sdlcv] {
    margin: 0;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.35rem;
}
/* /Components/Pages/Admin/Door/DoorSale.razor.rz.scp.css */
.door-lines[b-5syh7joqmg] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.door-lines li[b-5syh7joqmg] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--tr-line, #e7e5e0);
    overflow-wrap: anywhere;
}

.door-pay-choices[b-5syh7joqmg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.door-payment-element[b-5syh7joqmg] {
    min-height: 3rem;
}
/* /Components/Pages/Admin/Door/DoorSign.razor.rz.scp.css */
/* A sheet of paper: black on white whatever the theme, since it gets printed. */
.door-sign-sheet[b-epi437yad4] {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: #fff;
    color: #111;
    border: 1px solid #d6d3cd;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;
}

.door-sign-eyebrow[b-epi437yad4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.door-sign-title[b-epi437yad4] {
    margin: 0.5rem 0 0.25rem;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.door-sign-when[b-epi437yad4] {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
}

.door-sign-qr[b-epi437yad4] {
    width: min(100%, 320px);
    margin: 0 auto;
    line-height: 0;
}

.door-sign-qr[b-epi437yad4]  svg {
    width: 100%;
    height: auto;
}

.door-sign-scan[b-epi437yad4] {
    margin: 0.75rem 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.door-sign-prices[b-epi437yad4] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 420px;
    text-align: left;
}

.door-sign-prices li[b-epi437yad4] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #e3e0da;
    font-size: 1.15rem;
}

.door-sign-note[b-epi437yad4] {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
}

.door-sign-link[b-epi437yad4] {
    margin: 0;
    font-size: 0.8rem;
    color: #555;
    overflow-wrap: anywhere;
}

@media print {
    .door-sign-sheet[b-epi437yad4] {
        border: 0;
        max-width: none;
    }
}
/* /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 */
.order-list-count[b-xq3qihjjor] {
    margin-bottom: 0.6rem;
}

.order-card-open[b-xq3qihjjor] {
    cursor: pointer;
    border-radius: 6px;
}

.order-card-open:focus-visible[b-xq3qihjjor] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 4px;
}

/* Clears the fixed app bar when it's scrolled to on a phone. */
.order-detail-anchor[b-xq3qihjjor] {
    scroll-margin-top: 80px;
}

.order-detail-anchor:focus[b-xq3qihjjor] {
    outline: none;
}

.order-breakdown[b-xq3qihjjor] {
    margin: 0.25rem 0 0.25rem;
    font-size: 0.875rem;
}

.order-breakdown > div[b-xq3qihjjor] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
}

.order-breakdown dt[b-xq3qihjjor] {
    color: var(--tr-muted);
    overflow-wrap: anywhere;
}

.order-breakdown dd[b-xq3qihjjor] {
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.order-breakdown > div.is-total[b-xq3qihjjor] {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 0.2rem;
    padding-top: 0.35rem;
    font-weight: 700;
}

.order-breakdown > div.is-total dt[b-xq3qihjjor] {
    color: inherit;
}
/* /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);
}

/* Camera off (not started, stopped, or failed): no 20rem black box pushing manual entry away.
   The video stays in the DOM for startScanner. */
.scanner-video-shell.is-idle[b-zswyp6o5kl] {
    min-height: 0;
}

.scanner-video-shell.is-idle .scanner-video[b-zswyp6o5kl] {
    min-height: 0;
    height: 0;
}

.scanner-video-shell.is-idle .scanner-video-overlay[b-zswyp6o5kl] {
    display: none;
}

.scanner-video-idle[b-zswyp6o5kl] {
    margin: 0;
    padding: 0.9rem 1.1rem;
    color: #e9e8e3;
    font-weight: 600;
}

.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;
}

/* The verdict and Check in, right under the camera. */
.scanner-door-bar[b-zswyp6o5kl] {
    display: grid;
    gap: 0.6rem;
}

.scanner-door-bar .scanner-undo-button[b-zswyp6o5kl] {
    margin-top: 0;
}

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

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

    /* Leaves room under the lens for the answer. */
    .scanner-video-shell[b-zswyp6o5kl],
    .scanner-video[b-zswyp6o5kl] {
        min-height: 0;
    }

    .scanner-video[b-zswyp6o5kl] {
        height: 38vh;
    }

    /* Flex, not grid: a sticky grid item can't leave its own row, a flex item can. */
    .scanner-camera-card[b-zswyp6o5kl] {
        display: flex;
        flex-direction: column;
    }

    /* Single column puts the result card a screen or more down, so the answer and the button
       stay on screen while staff scroll. */
    .scanner-door-bar[b-zswyp6o5kl] {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 0 -1.2rem;
        padding: 0.75rem 1.2rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: inherit;
        border-top: 1px solid var(--scanner-line);
        box-shadow: 0 -10px 24px rgba(26, 25, 23, 0.08);
    }
}

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

    /* At the door the page is a tool, not a pitch: the camera and the answer come first. */
    .scanner-hero[b-zswyp6o5kl] {
        padding: 0.9rem 1rem;
        gap: 0.7rem;
    }

    .scanner-eyebrow[b-zswyp6o5kl],
    .scanner-copy[b-zswyp6o5kl],
    .scanner-card-header p[b-zswyp6o5kl] {
        display: none;
    }

    .scanner-hero h1[b-zswyp6o5kl] {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .scanner-hero-actions[b-zswyp6o5kl] {
        width: 100%;
        flex-wrap: nowrap;
    }

    .scanner-hero-actions .scanner-button[b-zswyp6o5kl] {
        flex: 1 1 0;
    }
}

/* ── 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);
}

/* Text-styled, but a full 44px target: staff hit these one-handed at the door. */
.scanner-link-button[b-zswyp6o5kl] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 0.25rem;
    padding: 0 0.6rem;
    border: none;
    border-radius: 10px;
    background: none;
    color: #2a4bd1;
    font-weight: 700;
    font-size: 0.85rem;
    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-pick[b-zswyp6o5kl] {
    display: grid;
    gap: 0.3rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.scanner-event-select[b-zswyp6o5kl] {
    width: 100%;
    border: 1px solid #d6d4ce;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: var(--scanner-ink);
    background: #fff;
}

.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;
}

/* No answer (throttled, unreachable) or a date to check: amber, never the red of a refusal. */
.scanner-verdict.is-caution[b-zswyp6o5kl] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #5c3d06;
}

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

.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/Admin/SuperAdmin/EmailLog.razor.rz.scp.css */
/* The provider's refusal, in its own words, right on the card: "why did this fail?" should not
   take a click. Clamped so one verbose error can't swallow the list. */
.email-log-error[b-qn91076mx1] {
    margin: 0.4rem 0 0;
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/SuperAdmin/EmailLogDetail.razor.rz.scp.css */
/* The email as its recipient saw it. Emails are designed on white whatever the admin's theme, so
   the frame stays white in dark mode too — the same call the builder canvas makes. */
.email-log-preview[b-r5du5tugd0] {
    display: block;
    width: 100%;
    height: 640px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: #ffffff;
}

.email-log-source[b-r5du5tugd0] {
    margin-top: 0.9rem;
}

.email-log-source summary[b-r5du5tugd0] {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tr-muted);
}

.email-log-source pre[b-r5du5tugd0] {
    margin: 0.6rem 0 0;
    max-height: 420px;
    overflow: auto;
    padding: 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .email-log-preview[b-r5du5tugd0] {
        height: 520px;
    }
}
/* /Components/Pages/Admin/SuperAdmin/SupportInbox.razor.rz.scp.css */
/* The message's opening under the sender line: two lines at most, so a long request can't turn
   one card into a wall of text. */
.support-card-preview[b-6z7dgwm4jv] {
    margin: 0.4rem 0 0;
    color: var(--tr-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Stored but nobody was told: worth a second look, not an error. */
.support-not-emailed[b-6z7dgwm4jv] {
    color: var(--mud-palette-warning);
}

.support-reference-code[b-6z7dgwm4jv] {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    letter-spacing: 0.02em;
}
/* /Components/Pages/Admin/SuperAdmin/SupportTicketDetail.razor.rz.scp.css */
/* The request exactly as typed: its own line breaks, long URLs wrapped rather than scrolling. */
.support-message[b-e86cijaj66] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    line-height: 1.55;
}

.support-reference-code[b-e86cijaj66] {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    letter-spacing: 0.02em;
}

/* The conversation, oldest first. The customer's side and ours are told apart by a coloured edge
   and a tint, not by alignment: long support text reads badly in narrow chat bubbles. */
.support-thread[b-e86cijaj66] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.support-thread-item[b-e86cijaj66] {
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--mud-palette-surface);
}

.support-thread-item.is-inbound[b-e86cijaj66] {
    border-left-color: var(--mud-palette-warning);
}

.support-thread-item.is-outbound[b-e86cijaj66] {
    border-left-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

/* A private note is ours alone, so it must never read as something the customer saw: its own
   (info) colour, a dashed outline and a lock label. Info rather than tertiary because the label is
   text, and the tertiary teal falls short of 4.5:1 on white. */
.support-thread-item.is-note[b-e86cijaj66] {
    border-style: dashed;
    border-left-style: solid;
    border-left-color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 7%, var(--mud-palette-surface));
}

.support-note-label[b-e86cijaj66] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--mud-palette-info);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.support-note-actions[b-e86cijaj66] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
}

/* app.css pins .admin-panel's border colour with !important in both themes, so the edge needs it
   too (this selector is the more specific of the two, so it wins). */
.support-note-composer[b-e86cijaj66]  .admin-panel {
    border-left: 4px solid var(--mud-palette-info) !important;
}

.support-thread-head[b-e86cijaj66] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-bottom: 0.45rem;
}

.support-thread-meta[b-e86cijaj66] {
    color: var(--tr-muted);
    font-size: 0.85rem;
}

.support-thread-note[b-e86cijaj66] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    color: var(--tr-muted);
    font-size: 0.85rem;
}

/* How far the address can be trusted, right where a reply to it is written. */
.support-sender-check[b-e86cijaj66] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.support-sender-check.is-matchesaccount[b-e86cijaj66],
.support-sender-check.is-matchesorders[b-e86cijaj66] {
    color: var(--mud-palette-success);
}

.support-sender-check.is-unverified[b-e86cijaj66] {
    color: var(--mud-palette-warning);
}
/* /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:not(:disabled)[b-m9dynqz7kj] {
    background: #eef2fe;
    border-color: #becefb;
}

/* Only the payment step's <button> Back can disable (while a payment is confirming). */
.checkout-back-button:disabled[b-m9dynqz7kj] {
    opacity: 0.55;
    cursor: not-allowed;
}

.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;
}

.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-seller-note[b-m9dynqz7kj] {
    margin: 0.6rem 0 0;
    color: var(--checkout-muted);
    font-size: 0.86rem;
}

.checkout-refund-policy[b-m9dynqz7kj] {
    margin: 0 0 0.6rem;
}

.checkout-refund-policy-title[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-ink);
    font-size: 0.86rem;
    font-weight: 800;
}

/* pre-line keeps the organizer's own line breaks */
.checkout-refund-policy-text[b-m9dynqz7kj] {
    margin: 0.15rem 0 0;
    color: var(--checkout-muted);
    font-size: 0.86rem;
    white-space: pre-line;
}

.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;
}

/* Each ticket number beside the seat it's for, so the buyer can tell them apart. */
.ticket-list li[b-m9dynqz7kj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.ticket-list-seat[b-m9dynqz7kj] {
    color: var(--checkout-muted);
    font-weight: 600;
}

.checkout-order-number[b-m9dynqz7kj] {
    margin: 0.35rem 0 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--checkout-muted);
}

/* The one link that opens every ticket in the order. Full-width on phones so it clears the
   44px target rule the rest of this page follows. */
.checkout-tickets-button[b-m9dynqz7kj] {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.8rem 1.4rem;
    min-height: 44px;
    border-radius: 999px;
    background: var(--checkout-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.checkout-tickets-button:hover[b-m9dynqz7kj],
.checkout-tickets-button:focus-visible[b-m9dynqz7kj] {
    filter: brightness(1.08);
}

@media (max-width: 30rem) {
    .checkout-tickets-button[b-m9dynqz7kj] {
        display: block;
        text-align: center;
    }
}

/* 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] {
    min-width: 44px;
    min-height: 44px;
    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;
}

.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;
    }
}

/* A problem with one field, said under that field (dark twin in app.css). */
.checkout-field-error[b-m9dynqz7kj] {
    margin: 0;
    color: #a81d25;
    font-size: 0.85rem;
    font-weight: 600;
}

.checkout-input[aria-invalid="true"][b-m9dynqz7kj] {
    border-color: #d22730;
}

/* "Did you mean …?" under the email: a nudge, never a refusal. */
.checkout-email-suggestion[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 0.88rem;
}

.checkout-email-suggestion-button[b-m9dynqz7kj],
.checkout-inline-link[b-m9dynqz7kj] {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--checkout-primary);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

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

/* Where to go, and what to quote, when money may be out. */
.checkout-support-line[b-m9dynqz7kj] {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 0.88rem;
}

.checkout-support-line a[b-m9dynqz7kj] {
    color: var(--checkout-primary);
    font-weight: 700;
}

.checkout-support-ref[b-m9dynqz7kj] {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    user-select: all;
}

/* The code boxes appear twice on the details step: in the summary on wide screens, and in the
   form, above Continue, once the summary stacks below it. */
.checkout-promo-group[b-m9dynqz7kj] {
    display: contents;
}

.checkout-promo-inline[b-m9dynqz7kj] {
    display: none;
}

@media (max-width: 960px) {
    .checkout-promo-inline[b-m9dynqz7kj] {
        display: grid;
        gap: 1rem;
    }

    .checkout-summary-card.has-inline-promo .checkout-promo-group[b-m9dynqz7kj] {
        display: none;
    }
}
/* /Components/Pages/Cookies.razor.rz.scp.css */
/* Shared by Terms, Privacy and Cookies: keep the three files identical. Dark-mode remaps live in
   app.css ("Legal pages"), since scoped CSS can't reach body.eventrika-dark. */
.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] {
    margin: 0.7rem 0 0;
    max-width: 50rem;
    color: #5f5b54;
}

.legal-hero .legal-updated[b-7v8bzqgo1m] {
    font-size: 0.86rem;
    font-weight: 700;
}

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

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

.legal-content section[b-7v8bzqgo1m] {
    scroll-margin-top: 5.5rem;
}

/* Reading width for text; tables get the whole card. */
.legal-content h2[b-7v8bzqgo1m],
.legal-content h3[b-7v8bzqgo1m],
.legal-content p[b-7v8bzqgo1m],
.legal-content ul[b-7v8bzqgo1m] {
    max-width: 72ch;
}

.legal-content section + section[b-7v8bzqgo1m] {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid #efeee9;
}

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

.legal-content h3[b-7v8bzqgo1m] {
    margin: 1.1rem 0 0.3rem;
    color: #1a1917;
    font-size: 1rem;
}

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

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

.legal-content ul[b-7v8bzqgo1m] {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.legal-content li[b-7v8bzqgo1m] {
    margin: 0 0 0.45rem;
    color: #5f5b54;
}

.legal-content a[b-7v8bzqgo1m] {
    color: #223cab;
}

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

.legal-toc[b-7v8bzqgo1m] {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    padding: 0;
    list-style: none;
}

.legal-toc a[b-7v8bzqgo1m] {
    color: #223cab;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.legal-toc a:hover[b-7v8bzqgo1m],
.legal-toc a:focus-visible[b-7v8bzqgo1m] {
    text-decoration: underline;
}

.legal-table-wrap[b-7v8bzqgo1m] {
    margin: 0 0 1rem;
    overflow-x: auto;
}

.legal-table[b-7v8bzqgo1m] {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.92rem;
}

.legal-table th:first-child[b-7v8bzqgo1m],
.legal-table td:first-child[b-7v8bzqgo1m] {
    width: 34%;
}

.legal-table th:last-child[b-7v8bzqgo1m],
.legal-table td:last-child[b-7v8bzqgo1m] {
    width: 22%;
}

.legal-table th[b-7v8bzqgo1m],
.legal-table td[b-7v8bzqgo1m] {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #efeee9;
    text-align: left;
    vertical-align: top;
}

.legal-table th[b-7v8bzqgo1m] {
    color: #1a1917;
    font-weight: 700;
    white-space: nowrap;
}

.legal-table td[b-7v8bzqgo1m] {
    color: #5f5b54;
}

.legal-table code[b-7v8bzqgo1m] {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: #f3f2ee;
    color: #1a1917;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    /* minmax(0, …), never a bare 1fr: 1fr's minimum is the content's, and a table's min-width
       would widen the whole page instead of scrolling inside .legal-table-wrap. */
    .legal-layout[b-7v8bzqgo1m] {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-side[b-7v8bzqgo1m] {
        position: static;
    }
}
/* /Components/Pages/DemoLanding.razor.rz.scp.css */
/* The demo index.

   One row of filter chips over a grid of tiles, where the tile IS the link. Surfaces, text and
   hairlines lean on MudBlazor palette tokens so light and dark both work; the only fixed colour is
   the brand azure, and the icon wash is mixed against the live surface so it follows the theme. */

.demo-index[b-msble685dk] {
    --demo-accent: #2a4bd1;
    --demo-accent-ink: color-mix(in srgb, var(--demo-accent) 72%, var(--mud-palette-text-primary));

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

.demo-index__inner[b-msble685dk] {
    max-width: 1180px;
    margin: 0 auto;
}

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

/* ── Head ──────────────────────────────────────────────── */
.demo-index__head[b-msble685dk] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 26px;
}

.demo-index__eyebrow[b-msble685dk] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--demo-accent-ink);
}

.demo-index__title[b-msble685dk] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
}

.demo-index__sub[b-msble685dk] {
    margin: 0;
    max-width: 62ch;
    font-size: 1.03rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* ── Filter chips ──────────────────────────────────────── */
.demo-index__filters[b-msble685dk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.demo-chip[b-msble685dk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.demo-chip:hover[b-msble685dk] {
    border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent);
}

.demo-chip.is-selected[b-msble685dk] {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: #fff;
}

.demo-chip__count[b-msble685dk] {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.demo-chip.is-selected .demo-chip__count[b-msble685dk] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ── Tiles ─────────────────────────────────────────────── */
.demo-grid[b-msble685dk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 14px;
}

.demo-tile[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 13px 15px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 13px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(26, 25, 23, 0.04);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.demo-tile:hover[b-msble685dk] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent);
    box-shadow: 0 12px 26px -18px rgba(42, 75, 209, 0.75);
}

.demo-tile__icon[b-msble685dk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--demo-accent) 10%, var(--mud-palette-surface));
    color: var(--demo-accent);
}

.demo-tile__text[b-msble685dk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.demo-tile__name[b-msble685dk] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.demo-tile__venue[b-msble685dk] {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.demo-index__foot[b-msble685dk] {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

/* ── Closer ────────────────────────────────────────────── */
.demo-index__closer[b-msble685dk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 48px;
    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);
}

.demo-index__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);
}

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

.demo-index__closer-actions[b-msble685dk] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.demo-index__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;
}

.demo-index__closer-cta:hover[b-msble685dk] {
    transform: translateY(-2px);
}

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

.demo-index__closer-link:hover[b-msble685dk] {
    color: var(--mud-palette-text-primary);
}

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

.demo-index__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);
}

.demo-index__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;
}

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

.demo-index__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;
}

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

/* ── Dark mode ─────────────────────────────────────────── */
/* Everything else rides the palette tokens; only the azure-on-azure pieces need a nudge so they
   stay legible against a dark ground. */
body.eventrika-dark .demo-index[b-msble685dk] {
    --demo-accent: #93adf6;
    --demo-accent-ink: #93adf6;
}

body.eventrika-dark .demo-index__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%);
}

body.eventrika-dark .demo-chip.is-selected[b-msble685dk] {
    color: #151f44;
}

body.eventrika-dark .demo-chip.is-selected .demo-chip__count[b-msble685dk] {
    color: #151f44;
    background: rgba(21, 31, 68, 0.18);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
    .demo-index[b-msble685dk] {
        padding: 36px 16px 64px;
    }

    .demo-grid[b-msble685dk] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .demo-tile[b-msble685dk] {
        min-height: 64px;
        padding: 11px 13px;
    }

    .demo-index__closer[b-msble685dk] {
        padding: 24px 22px;
    }
}
/* /Components/Pages/FeeModeComparison.razor.rz.scp.css */
/* Two receipts for one ticket price, one per fee mode (homepage pricing band, /pricing). Shares
   b-fr-marketing; tokens only, so the .fr-home dark flip in app.css covers it. */

.fr-compare[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fr-compare__card[b-fr-marketing] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--fr-lift-shadow);
}

/* Accent edge on the named feature; never coral (rationed to on-sale energy). */
.fr-compare__card--poster[b-fr-marketing] {
    border-color: color-mix(in srgb, var(--fr-accent-text) 50%, var(--fr-border));
    box-shadow: inset 0 3px 0 var(--fr-accent-text), var(--fr-lift-shadow);
}

.fr-compare__mode[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--fr-ink);
}

.fr-compare__sub[b-fr-marketing] {
    margin: 3px 0 12px;
    font-size: 13px;
    color: var(--fr-muted);
}

.fr-compare__row[b-fr-marketing] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    color: var(--fr-body);
    border-bottom: 1px dashed var(--fr-border);
    font-variant-numeric: tabular-nums;
}

.fr-compare__row--total[b-fr-marketing] {
    font-weight: 700;
    color: var(--fr-ink);
    border-bottom-style: solid;
}

.fr-compare__you[b-fr-marketing] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--fr-check-bg);
    color: var(--fr-check-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .fr-compare[b-fr-marketing] {
        grid-template-columns: 1fr;
    }
}
/* /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: #5f5b54; /* the intro's muted ink; the old grey was 3.88:1 on white, under AA */
}

.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 */
/* ================================================================
   The homepage: find events near a city or ZIP code (owner's
   "Homepage Redesign" design, 2026-09-29).

   It sits in the marketing pages' CssScope (b-fr-marketing), so the
   .fr-home tokens — and their dark flip in app.css — come from
   Organizers.razor.css. The few colors the design adds are the --dh-*
   tokens below; their dark twins are the `body.eventrika-dark .dh`
   block in app.css. MudIcon renders its own <svg>, outside this
   component's scope, so icon rules go through ::deep.
   ================================================================ */
.dh[b-fr-marketing] {
    /* Filled buttons keep the light azure in both themes (white on #2A4BD1 clears AA; the dark
       theme's lighter primary would not), matching .fr-btn--primary. */
    --dh-fill: #2A4BD1;
    --dh-fill-hover: #223CAB;
    --dh-fill-shadow: 0 2px 8px rgba(42, 75, 209, .22);
    --dh-fill-shadow-hover: 0 6px 18px rgba(42, 75, 209, .3);
    /* Accent text on tinted surfaces (the date tile, chips, the typeset card). */
    --dh-link-strong: #223CAB;
    --dh-typeset-ink: #1E2F6D;
    --dh-line: rgba(26, 25, 23, .12);
    --dh-tint-border: #DCE4FD;
    --dh-placeholder: #85817A;
    --dh-shadow-search: 0 18px 44px rgba(26, 25, 23, .10);
    --dh-shadow-menu: 0 20px 48px rgba(26, 25, 23, .16);
    --dh-shadow-toolbar: 0 14px 34px rgba(26, 25, 23, .08);
    --dh-shadow-card: 0 1px 2px rgba(26, 25, 23, .05);
    --dh-shadow-card-hover: 0 22px 48px rgba(26, 25, 23, .14);
    --dh-shadow-tab: 0 1px 0 rgba(26, 25, 23, .08), 0 6px 16px rgba(26, 25, 23, .08);
    --dh-warn-bg: #FEF6E7;
    --dh-warn-border: #FBD9A0;
    --dh-warn-ink: #92580A;
    padding-bottom: 8px;
}

.dh[b-fr-marketing]  .dh-link-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ── Hero: the location search over a full-bleed photo ──────────── */
/* The owner's "fullbleed" hero (2026-10-03): a concert photo behind the heading and the search,
   the same dark band in both themes, so its words are white in both. The hero breaks out of
   MainLayout's gutters, and up through its top padding so the photo meets the app bar (keep these
   margins in step with .layout-body's padding). It never clips: the suggestion list hangs out of
   its bottom edge, so the photo is clipped by the backdrop instead. */
.dh-hero[b-fr-marketing] {
    --dh-hero-bg: #14161C;
    --dh-hero-ink: #FFFFFF;
    --dh-hero-body: #E7E6E2;
    position: relative;
    margin: -1.35rem -1.25rem 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    z-index: 5;
}

/* MainLayout's gutter and top padding drop to 0.8rem / 0.9rem here. */
@media (max-width: 900px) {
    .dh-hero[b-fr-marketing] {
        margin: -0.9rem -0.8rem 0;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

/* Past the 1440px layout cap the band carries on in the photo's dark, painted with the .fr-band
   trick (a box-shadow spread kept to the band's height by clip-path), which never scrolls sideways. */
.dh-hero__backdrop[b-fr-marketing] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--dh-hero-bg);
    box-shadow: 0 0 0 100vmax var(--dh-hero-bg);
    clip-path: inset(0 -100vmax);
}

/* Past the cap the photo ends before the screen does, so its right edge fades into the band's dark
   instead of stopping in a hard line: over twice the gap beside the band, up to 320px, and not at
   all while the band fills the screen (the 20px absorbs a classic scrollbar, which 100vw counts).
   Its left edge is under the darkest scrim already. */
.dh-hero__photo[b-fr-marketing] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - clamp(0px, (100vw - 100% - 20px) * 2, 320px)), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - clamp(0px, (100vw - 100% - 20px) * 2, 320px)), transparent);
}

/* The scrim, darkest under the words and opening toward the stage, plus a darker foot under the
   links. The design's stops are percentages of the band, but the words are a column of fixed
   width, so the .78 stop is held at least 560px out (it only moves below a ~1330px band). With
   the design's 42%, a tablet's subtitle fell to 4.9:1 at its worst pixel, a hair over AA. */
.dh-hero__backdrop[b-fr-marketing]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 22, 28, .94) 0%, rgba(20, 22, 28, .78) max(42%, 560px), rgba(20, 22, 28, .18) 100%),
        linear-gradient(0deg, rgba(20, 22, 28, .7) 0%, transparent 45%);
}

/* On a phone the words span the whole band, over the stage's brightest beams: the design's scrim
   left the subtitle at 2:1 there. An even wash keeps it near 6:1 at its worst pixel (5.9 to
   7.1 from 360px to 620px) and still lets the stage show. */
@media (max-width: 639.98px) {
    .dh-hero__backdrop[b-fr-marketing]::after {
        background:
            linear-gradient(90deg, rgba(20, 22, 28, .9) 0%, rgba(20, 22, 28, .7) 100%),
            linear-gradient(0deg, rgba(20, 22, 28, .7) 0%, transparent 45%);
    }
}

.dh-hero__inner[b-fr-marketing] {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
}

.dh-hero__h1[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.8vw, 72px);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--dh-hero-ink);
    margin: clamp(24px, 5vw, 64px) 0 16px;
    max-width: 14ch;
    text-wrap: balance;
}

.dh-hero__sub[b-fr-marketing] {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--dh-hero-body);
    max-width: 46ch;
    margin: 0 0 clamp(22px, 3vw, 32px);
}

.dh-search[b-fr-marketing] {
    position: relative;
    max-width: 800px;
}

.dh-search__row[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 68px;
    padding: 8px 8px 8px 18px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border-strong);
    border-radius: 18px;
    box-shadow: var(--dh-shadow-search);
}

.dh-search__row:focus-within[b-fr-marketing] {
    border-color: var(--fr-accent-text);
}

.dh-search__field[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.dh[b-fr-marketing]  .dh-search__pin {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--fr-accent-text);
    flex: none;
}

.dh-search__input[b-fr-marketing] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 18px;
    color: var(--fr-ink);
    padding: 0 6px;
}

.dh-search__input[b-fr-marketing]::placeholder,
.dh-textsearch__input[b-fr-marketing]::placeholder {
    color: var(--dh-placeholder);
    opacity: 1;
}

.dh-search__locate[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--fr-accent-text);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.dh-search__locate:hover:not(:disabled)[b-fr-marketing] {
    background: var(--fr-tile);
}

.dh-search__locate:disabled[b-fr-marketing] {
    cursor: progress;
}

.dh[b-fr-marketing]  .dh-search__locate-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.dh-search__go[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: var(--dh-fill);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--dh-fill-shadow);
}

.dh-search__go:hover[b-fr-marketing] {
    background: var(--dh-fill-hover);
    box-shadow: var(--dh-fill-shadow-hover);
}

.dh-search__locate:focus-visible[b-fr-marketing],
.dh-search__go:focus-visible[b-fr-marketing] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

.dh-suggest[b-fr-marketing] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    box-shadow: var(--dh-shadow-menu);
    padding: 6px;
    overflow: hidden;
}

.dh-suggest--empty[b-fr-marketing] {
    padding: 14px 16px;
    font-size: 14.5px;
    color: var(--fr-muted);
}

.dh-suggest__option[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.dh-suggest__option.is-active[b-fr-marketing],
.dh-suggest__option:hover[b-fr-marketing] {
    background: var(--fr-tile);
}

.dh[b-fr-marketing]  .dh-suggest__icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--dh-placeholder);
    flex: none;
}

.dh-suggest__text[b-fr-marketing] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.dh-suggest__label[b-fr-marketing] {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--fr-ink);
}

.dh-suggest__detail[b-fr-marketing] {
    font-size: 13px;
    color: var(--fr-muted);
}

.dh-notice[b-fr-marketing] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 800px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--dh-warn-bg);
    border: 1px solid var(--dh-warn-border);
}

.dh[b-fr-marketing]  .dh-notice__icon {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: var(--dh-warn-ink);
    flex: none;
}

.dh-notice__text[b-fr-marketing] {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--fr-body);
}

.dh-notice__text strong[b-fr-marketing] {
    color: var(--fr-ink);
}

.dh-hero__links[b-fr-marketing] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 clamp(24px, 5vw, 64px);
    font-size: 14px;
    color: var(--dh-hero-body);
}

/* On the photo the links are white; Find my tickets keeps an underline to read as a link. */
.dh-hero__links .dh-hero__browse[b-fr-marketing],
.dh-hero__links .dh-inline-link[b-fr-marketing] {
    color: var(--dh-hero-ink);
}

.dh-hero__links .dh-inline-link[b-fr-marketing] {
    text-decoration: underline;
}

/* The page's azure focus ring is ~2.4:1 on the band's dark; white is ~18:1. */
.dh-hero__links a:focus-visible[b-fr-marketing] {
    outline: 2px solid var(--dh-hero-ink);
    outline-offset: 2px;
}

.dh-hero__browse[b-fr-marketing],
.dh-see-all[b-fr-marketing],
.dh-organizers__link[b-fr-marketing],
.dh-demo__link[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fr-accent-text);
    font-weight: 700;
    text-decoration: none;
}

.dh-see-all[b-fr-marketing],
.dh-organizers__link[b-fr-marketing] {
    gap: 4px;
    font-size: 14.5px;
}

.dh-inline-link[b-fr-marketing] {
    color: var(--fr-accent-text);
    font-weight: 700;
    text-decoration: none;
}

.dh-hero__browse:hover[b-fr-marketing],
.dh-see-all:hover[b-fr-marketing],
.dh-organizers__link:hover[b-fr-marketing],
.dh-demo__link:hover[b-fr-marketing],
.dh-inline-link:hover[b-fr-marketing] {
    text-decoration: underline;
}

/* ── Sections and rails ──────────────────────────────────────── */
.dh-section[b-fr-marketing] {
    max-width: 1160px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

/* Under the photo band the design's 8px left "Coming up" pressed against its edge. */
.dh-hero + .dh-section[b-fr-marketing] {
    padding-top: clamp(24px, 3vw, 32px);
}

.dh-section--rail[b-fr-marketing] {
    margin-top: 36px;
    padding: 0;
}

.dh-section__head[b-fr-marketing] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dh-section__title[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -.02em;
    color: var(--fr-ink);
    margin: 0;
}

.dh-section__title--sm[b-fr-marketing] {
    font-size: clamp(20px, 2.2vw, 24px);
}

.dh-section__sub[b-fr-marketing] {
    margin: 4px 0 0;
    font-size: 14.5px;
    color: var(--fr-muted);
}

.dh-fees-note[b-fr-marketing] {
    font-weight: 600;
    color: var(--fr-body);
}

/* A horizontal rail: at least ~290px a card, snapping, scrolling past the fourth. Capped at a
   quarter of the row, so one or two cards stay card-sized instead of stretching across it (a lone
   1fr card was 1160px wide with a 650px photo). */
.dh-rail[b-fr-marketing] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(290px, 82%), calc((100% - 48px) / 4));
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 18px;
    margin: 0 -2px;
}


.dh-rail__item[b-fr-marketing] {
    scroll-snap-align: start;
    min-width: 0;
}

/* ── Located: heading, toolbar, results ──────────────────────── */
.dh-located[b-fr-marketing] {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px) 0 0;
}

.dh-located__row[b-fr-marketing] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.dh-located__heading[b-fr-marketing] {
    min-width: 0;
}

.dh-eyebrow[b-fr-marketing] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fr-accent-text);
    margin-bottom: 8px;
}

.dh-located__title[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--fr-ink);
    margin: 0;
    text-wrap: balance;
}

.dh-pill-button[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--fr-border-strong);
    border-radius: 999px;
    background: var(--fr-surface);
    color: var(--fr-ink);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.dh-pill-button:hover[b-fr-marketing] {
    border-color: var(--fr-accent-text);
    color: var(--dh-link-strong);
}

.dh[b-fr-marketing]  .dh-pill-button__icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--fr-accent-text);
}

/* Sticks just under the 48px app bar while the results scroll. */
.dh-toolbar-wrap[b-fr-marketing] {
    position: sticky;
    top: 56px;
    z-index: 20;
    max-width: 1160px;
    margin: 18px auto 0;
}

.dh-toolbar[b-fr-marketing] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--dh-line);
    border-radius: 18px;
    background: var(--fr-surface);
    box-shadow: var(--dh-shadow-toolbar);
}

.dh-toolbar__filters[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

.dh-radius[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--fr-border-strong);
    border-radius: 999px;
    background: var(--fr-bg2);
    font-size: 14px;
    font-weight: 700;
    color: var(--fr-ink);
    flex: none;
    white-space: nowrap;
}

.dh[b-fr-marketing]  .dh-radius__icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--fr-accent-text);
}

.dh-radius__select[b-fr-marketing] {
    height: 32px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: var(--dh-link-strong);
    cursor: pointer;
    outline: none;
}

.dh-radius:focus-within[b-fr-marketing] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

.dh-when[b-fr-marketing] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dh-line) 60%, transparent);
    overflow-x: auto;
    max-width: 100%;
    flex: none;
}

.dh-when__tab[b-fr-marketing] {
    appearance: none;
    border: 0;
    padding: 0 14px;
    height: 32px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: var(--fr-muted);
}

.dh-when__tab.is-active[b-fr-marketing] {
    background: var(--fr-surface);
    color: var(--fr-ink);
    box-shadow: var(--dh-shadow-tab);
}

.dh-when__tab:focus-visible[b-fr-marketing],
.dh-pill-button:focus-visible[b-fr-marketing],
.dh-sort:focus-visible[b-fr-marketing] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

.dh-toolbar__search[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 300px;
    justify-content: flex-end;
    min-width: 0;
}

.dh-textsearch[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--fr-border-strong);
    border-radius: 10px;
    background: var(--fr-surface);
    flex: 1 1 200px;
    min-width: 0;
    max-width: 320px;
}

.dh-textsearch:focus-within[b-fr-marketing] {
    border-color: var(--fr-accent-text);
}

.dh[b-fr-marketing]  .dh-textsearch__icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--dh-placeholder);
}

.dh-textsearch__input[b-fr-marketing] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--fr-ink);
}

.dh-sort[b-fr-marketing] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--fr-border-strong);
    border-radius: 10px;
    background: var(--fr-surface);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fr-ink);
    cursor: pointer;
    flex: none;
}

.dh-results[b-fr-marketing] {
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 0 40px;
}

.dh-summary[b-fr-marketing] {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fr-muted);
}

.dh-group__title[b-fr-marketing] {
    margin: 22px 0 12px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fr-muted);
}

.dh-grid[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
    gap: 16px;
}

/* ── "That's everything for now" ─────────────────────────────── */
.dh-few[b-fr-marketing] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--fr-tint);
    border: 1px solid var(--dh-tint-border);
}

.dh-few__icon[b-fr-marketing],
.dh-demo__icon[b-fr-marketing],
.dh-buying__icon[b-fr-marketing] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--fr-accent-text);
}

.dh-few__icon[b-fr-marketing] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--fr-surface);
    border: 1px solid var(--dh-tint-border);
}

.dh-few__title[b-fr-marketing] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--fr-ink);
}

.dh-few__text[b-fr-marketing] {
    margin: 5px 0 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fr-muted);
    max-width: 62ch;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.dh-button[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.dh-button--sm[b-fr-marketing] {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14.5px;
}

.dh-button--primary[b-fr-marketing] {
    border: 0;
    background: var(--dh-fill);
    color: #FFFFFF;
}

.dh-button--primary:hover[b-fr-marketing] {
    background: var(--dh-fill-hover);
}

.dh-button--secondary[b-fr-marketing] {
    border: 1px solid var(--fr-border-strong);
    background: var(--fr-surface);
    color: var(--fr-ink);
}

.dh-button--secondary:hover[b-fr-marketing] {
    background: var(--fr-hover);
}

.dh-button:focus-visible[b-fr-marketing],
.dh-chip:focus-visible[b-fr-marketing] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

/* ── Empty states ────────────────────────────────────────────── */
.dh-panel[b-fr-marketing] {
    padding: 34px clamp(20px, 4vw, 40px);
    border-radius: 22px;
    background: var(--fr-surface);
    border: 1px solid var(--dh-line);
}

.dh[b-fr-marketing]  .dh-panel__icon {
    font-size: 30px;
    width: 30px;
    height: 30px;
    color: var(--dh-placeholder);
}

.dh-panel__title[b-fr-marketing] {
    margin: 10px 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 26px);
    letter-spacing: -.02em;
    color: var(--fr-ink);
    text-wrap: balance;
}

.dh-panel__text[b-fr-marketing] {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fr-muted);
    max-width: 56ch;
}

.dh-panel__actions[b-fr-marketing],
.dh-chips[b-fr-marketing] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dh-empty[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 24px;
    background: var(--fr-surface);
    border: 1px solid var(--dh-line);
}

.dh-empty .dh-eyebrow[b-fr-marketing] {
    margin-bottom: 12px;
}

.dh-empty__title[b-fr-marketing] {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--fr-ink);
    text-wrap: balance;
}

.dh-empty__text[b-fr-marketing] {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fr-muted);
    max-width: 48ch;
}

.dh-chip[b-fr-marketing] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--fr-border-strong);
    border-radius: 999px;
    background: var(--fr-surface);
    color: var(--fr-ink);
    font: inherit;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
}

.dh-chip:hover[b-fr-marketing] {
    border-color: var(--fr-accent-text);
    color: var(--dh-link-strong);
    background: var(--fr-tile);
}

.dh[b-fr-marketing]  .dh-chip__icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--fr-accent-text);
}

.dh-demo[b-fr-marketing] {
    padding: 22px;
    border-radius: 18px;
    background: var(--fr-bg2);
    border: 1px solid var(--fr-border);
}

.dh-demo__icon[b-fr-marketing] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--fr-tile);
    margin-bottom: 12px;
}

.dh-demo__title[b-fr-marketing] {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--fr-ink);
}

.dh-demo__text[b-fr-marketing] {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fr-muted);
}

.dh-demo__link[b-fr-marketing] {
    font-size: 15px;
}

/* ── Buying on Eventrika ─────────────────────────────────────── */
.dh-buying[b-fr-marketing] {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px) 0;
    border-top: 1px solid var(--fr-border);
}

.dh-results .dh-buying[b-fr-marketing] {
    margin-top: 40px;
}

.dh-buying__title[b-fr-marketing] {
    margin: 0 0 20px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fr-muted);
}

.dh-buying__grid[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 22px 28px;
}

.dh-buying__item[b-fr-marketing] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dh-buying__icon[b-fr-marketing] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--fr-tile);
}

.dh-buying__item h3[b-fr-marketing] {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16.5px;
    color: var(--fr-ink);
}

.dh-buying__item p[b-fr-marketing] {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--fr-muted);
}

/* ── The quiet organizer line ────────────────────────────────── */
.dh-organizers[b-fr-marketing] {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 0 8px;
    border-top: 1px solid var(--fr-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    font-size: 14.5px;
    color: var(--fr-muted);
}

/* ── Phones: the search stacks, "Find events" last ─────────────── */
@media (max-width: 639.98px) {
    .dh-search__row[b-fr-marketing] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        height: auto;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dh-search__field[b-fr-marketing] {
        /* flex: none, or the column's flex-basis wins over the height and the box collapses. */
        flex: none;
        height: 58px;
        padding: 0 14px;
        gap: 8px;
        background: var(--fr-surface);
        border: 1px solid var(--fr-border-strong);
        border-radius: 16px;
        box-shadow: 0 12px 30px rgba(26, 25, 23, .08);
    }

    .dh-search__field:focus-within[b-fr-marketing] {
        border-color: var(--fr-accent-text);
    }

    .dh-search__input[b-fr-marketing] {
        font-size: 17px;
        padding: 0;
    }

    .dh-search__locate[b-fr-marketing] {
        justify-content: center;
        gap: 8px;
        border: 1px solid var(--fr-border-strong);
        border-radius: 14px;
        background: var(--fr-surface);
        color: var(--fr-ink);
        font-size: 16px;
    }

    .dh[b-fr-marketing]  .dh-search__locate-icon {
        color: var(--fr-accent-text);
    }

    /* Stacked, the buttons sit on the photo, so their focus ring is white like the links'. */
    .dh-search__locate:focus-visible[b-fr-marketing],
    .dh-search__go:focus-visible[b-fr-marketing] {
        outline-color: var(--dh-hero-ink);
    }

    /* A real button, not just the keyboard's Enter: on a phone, typing a ZIP code and then hunting
       for a way to submit it felt broken (owner, 2026-09-30). The field's enterkeyhint says Search too. */
    .dh-search__go[b-fr-marketing] {
        justify-content: center;
        border-radius: 14px;
        font-size: 16px;
    }

    /* Under the field itself, over the location button. */
    .dh-suggest[b-fr-marketing] {
        top: 66px;
    }

    /* Wrapped onto three rows the toolbar is ~190px: sticky, that's a quarter of a phone screen
       covering the results. It scrolls away here instead. */
    .dh-toolbar-wrap[b-fr-marketing] {
        position: static;
    }

    .dh-toolbar__search[b-fr-marketing] {
        flex-basis: 100%;
    }

    .dh-textsearch[b-fr-marketing] {
        max-width: none;
    }
}
/* /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/OrderTickets.razor.rz.scp.css */
/* Variable-driven like TicketView, so the dark flip in app.css only redefines four values. */
.order-page[b-ce8ux28og0] {
    --order-accent: #0e7490;
    --order-line: #e7e6e2;
    --order-ink: #1a1917;
    --order-muted: #5f5b54;
    display: grid;
    gap: 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem;
}

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

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

.order-header-card h1[b-ce8ux28og0],
.order-state-card h1[b-ce8ux28og0] {
    margin: 0;
    color: var(--order-ink);
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    line-height: 1.05;
}

.order-state-card h2[b-ce8ux28og0] {
    margin: 0;
    color: var(--order-ink);
    font-size: 1.25rem;
}

.order-meta[b-ce8ux28og0],
.order-count[b-ce8ux28og0],
.order-state-card p[b-ce8ux28og0],
.order-footnote[b-ce8ux28og0] {
    color: var(--order-muted);
    margin: 0.55rem 0 0;
}

.order-count[b-ce8ux28og0] {
    font-weight: 700;
    color: var(--order-ink);
}

.order-demo-flag[b-ce8ux28og0] {
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: #fff4e5;
    border: 1px solid #f59e0b;
    color: #7a4a08;
    font-size: 0.9rem;
    font-weight: 600;
}

.order-state-card.is-refunded[b-ce8ux28og0] {
    border-color: #f59e0b;
}

.order-ticket-list[b-ce8ux28og0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.order-ticket[b-ce8ux28og0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
}

.order-ticket-main[b-ce8ux28og0] {
    min-width: 0;
}

.order-seat[b-ce8ux28og0] {
    margin: 0;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--order-ink);
}

.order-number[b-ce8ux28og0] {
    margin: 0.2rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--order-muted);
}

.order-badge[b-ce8ux28og0] {
    display: inline-block;
    margin: 0.4rem 0.35rem 0 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.12);
    color: var(--order-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.order-badge.is-used[b-ce8ux28og0] {
    background: rgba(245, 158, 11, 0.16);
    color: #92660a;
}

.order-transferred[b-ce8ux28og0] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--order-muted);
}

.order-ticket.is-transferred .order-seat[b-ce8ux28og0] {
    color: var(--order-muted);
}

.order-ticket-actions[b-ce8ux28og0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.order-button[b-ce8ux28og0] {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--order-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.order-button:hover[b-ce8ux28og0],
.order-button:focus-visible[b-ce8ux28og0] {
    filter: brightness(1.08);
}

.order-wallet-link[b-ce8ux28og0],
.order-secondary-link[b-ce8ux28og0] {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--order-line);
    color: var(--order-ink);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.order-wallet-link:hover[b-ce8ux28og0],
.order-wallet-link:focus-visible[b-ce8ux28og0],
.order-secondary-link:hover[b-ce8ux28og0],
.order-secondary-link:focus-visible[b-ce8ux28og0] {
    border-color: var(--order-accent);
    color: var(--order-accent);
}

.order-state-actions[b-ce8ux28og0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.order-footnote a[b-ce8ux28og0] {
    color: var(--order-accent);
}

.order-addon-list[b-ce8ux28og0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    color: var(--order-ink);
    font-weight: 700;
}

/* Phones: the action cluster drops under the seat rather than squeezing beside it. */
@media (max-width: 30rem) {
    .order-ticket[b-ce8ux28og0] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Organizers.razor.rz.scp.css */
/* ================================================================
   The "Front Row" marketing design (from the owner's Eventrika Home
   comp): tokens, full-bleed bands, type, buttons, hero, feature grid,
   steps and the closing CTA — then the /organizers page's own rules.
   /organizers is where the pitch lives now; /pricing and the homepage
   share these rules through one CssScope (b-fr-marketing in
   Ticketr.csproj), so they are written once, here. They moved from
   Home.razor.css when the homepage became the buyers' event search.

   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-fr-marketing] {
    --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-fr-marketing] {
    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-fr-marketing] { --fr-band-bg: var(--fr-bg2); }
.fr-band--tint[b-fr-marketing] { --fr-band-bg: var(--fr-tint); }
.fr-band--surface[b-fr-marketing] { --fr-band-bg: var(--fr-surface); }

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

/* ── Shared type & buttons ───────────────────────────────────── */
.fr-eyebrow[b-fr-marketing] {
    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-fr-marketing] { color: #F5623C; }

.fr-h2[b-fr-marketing] {
    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;
    text-wrap: balance;
}

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

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

.fr-lede--gap[b-fr-marketing] { margin-bottom: 24px; }

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

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

.fr-btn[b-fr-marketing] {
    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-fr-marketing] {
    font-size: 16px;
    padding: 14px 26px;
}

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

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

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

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

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

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

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

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

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

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

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

.fr-hero__glow[b-fr-marketing] {
    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-fr-marketing] {
    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;
    /* Top-aligned, not centered: the copy column is the shorter of the two, so centering hung a
       band of dead space above the headline once the eyebrow pill came out. Sharing a top edge
       with the hero visual reads as intent rather than as a gap. */
    align-items: start;
}

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

.fr-hero__h1[b-fr-marketing] {
    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;
    text-wrap: balance;
}

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

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

.fr-hero__visual[b-fr-marketing] {
    position: relative;
    animation: fr-fade-b-fr-marketing .7s ease both;
}

/* ── Feature grid ─────────────────────────────────────────────── */
.fr-feature-grid[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fr-feature[b-fr-marketing] {
    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-fr-marketing] {
    transform: translateY(-3px);
    box-shadow: var(--fr-lift-shadow);
    border-color: var(--fr-border-strong);
}

.fr-fi[b-fr-marketing] {
    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-fr-marketing] { display: block; }

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

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

/* ── Two-column band + checklist ──────────────────────────────── */
.fr-seating__inner[b-fr-marketing] {
    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-fr-marketing] {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
}

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

.fr-check__mark[b-fr-marketing] {
    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;
}

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

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

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

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

.fr-step__num[b-fr-marketing] {
    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-fr-marketing] { background: #E04A22; }

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

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

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

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

.fr-cta__panel[b-fr-marketing] {
    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-fr-marketing] {
    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-fr-marketing] { position: relative; }

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

.fr-cta__h2[b-fr-marketing] {
    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-fr-marketing] {
    font-size: 17px;
    line-height: 1.6;
    color: #B7B2A6;
    margin: 0 auto 30px;
    max-width: 52ch;
}

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

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

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

    .fr-feature[b-fr-marketing] {
        transition: none;
    }

    .fr-feature:hover[b-fr-marketing] {
        transform: none;
    }
}

/* ── Shared responsive rules ──────────────────────────────────── */
/* MainLayout's gutter drops to 0.8rem here; breaking out further scrolls the page sideways. */
@media (max-width: 900px) {
    .fr-band[b-fr-marketing] {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

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

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

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

    .fr-seating__inner[b-fr-marketing] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

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

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

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

    .fr-how[b-fr-marketing],
    .fr-seating__inner[b-fr-marketing] {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .fr-feature-grid[b-fr-marketing] { grid-template-columns: 1fr; }
    .fr-cta__h2 br[b-fr-marketing] { display: none; }
}

/* ================================================================
   /organizers
   ================================================================ */

.fr-org-section[b-fr-marketing] {
    padding-top: 80px;
    padding-bottom: 80px;
}

.fr-org-note[b-fr-marketing] {
    font-size: 13.5px;
    color: var(--fr-muted);
    margin: 0;
}

/* ── Hero receipt ─────────────────────────────────────────────── */
.fr-receipt[b-fr-marketing] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 20px;
    box-shadow: var(--fr-card-shadow);
    padding: 26px 28px;
    max-width: 440px;
    margin-left: auto;
}

.fr-receipt__head[b-fr-marketing] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fr-subtle);
    margin-bottom: 14px;
}

.fr-receipt__row[b-fr-marketing] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    font-size: 15.5px;
    color: var(--fr-body);
    border-bottom: 1px dashed var(--fr-border);
    font-variant-numeric: tabular-nums;
}

.fr-receipt__row--total[b-fr-marketing] {
    font-weight: 700;
    color: var(--fr-ink);
    border-bottom-style: solid;
}

.fr-receipt__row--you[b-fr-marketing] {
    margin-top: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--fr-check-bg);
    color: var(--fr-check-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
}

.fr-receipt__caption[b-fr-marketing] {
    max-width: 440px;
    margin: 12px 0 0 auto;
    font-size: 12.5px;
    color: var(--fr-subtle);
    text-align: right;
}

/* ── Pricing ──────────────────────────────────────────────────── */
.fr-org-pricing[b-fr-marketing] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.fr-price-table[b-fr-marketing] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.fr-price-table th[b-fr-marketing],
.fr-price-table td[b-fr-marketing] {
    padding: 14px 20px;
    text-align: right;
    font-size: 15.5px;
    color: var(--fr-body);
    border-bottom: 1px solid var(--fr-border-soft);
}

.fr-price-table th:first-child[b-fr-marketing] {
    text-align: left;
}

.fr-price-table thead th[b-fr-marketing] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fr-subtle);
    background: var(--fr-bg2);
}

.fr-price-table tbody th[b-fr-marketing] {
    font-weight: 600;
    color: var(--fr-ink);
}

.fr-price-table tbody tr:last-child th[b-fr-marketing],
.fr-price-table tbody tr:last-child td[b-fr-marketing] {
    border-bottom: 0;
}

.fr-price-table td.fr-price-table__you[b-fr-marketing] {
    font-weight: 700;
    color: var(--fr-check-ink);
}

.fr-org-callout[b-fr-marketing] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 24px;
}

.fr-org-callout h3[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--fr-ink);
    margin: 0 0 8px;
}

.fr-org-callout p[b-fr-marketing] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fr-muted);
    margin: 0;
}

.fr-org-callout .fr-eyebrow[b-fr-marketing] {
    margin-bottom: 8px;
}

.fr-org-callout__link[b-fr-marketing] {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--fr-accent-text);
    text-decoration: none;
}

.fr-org-callout__link:hover[b-fr-marketing] {
    text-decoration: underline;
}

.fr-org-callout__link:focus-visible[b-fr-marketing] {
    outline: 2px solid #2A4BD1;
    outline-offset: 2px;
    border-radius: 4px;
}

.fr-org-fine[b-fr-marketing] {
    max-width: 78ch;
    margin: 22px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fr-muted);
}

/* ── Features: Material icons in the feature tiles ────────────── */
.fr-fi--icon[b-fr-marketing] {
    color: var(--fr-accent-text);
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.fr-org-faq[b-fr-marketing] {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.fr-faq[b-fr-marketing] {
    border-top: 1px solid var(--fr-border);
}

.fr-faq details[b-fr-marketing] {
    border-bottom: 1px solid var(--fr-border);
}

.fr-faq summary[b-fr-marketing] {
    cursor: pointer;
    list-style: none;
    padding: 18px 32px 18px 0;
    position: relative;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--fr-ink);
}

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

.fr-faq summary[b-fr-marketing]::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--fr-subtle);
}

.fr-faq details[open] summary[b-fr-marketing]::after {
    content: "−";
}

.fr-faq summary:focus-visible[b-fr-marketing] {
    outline: 2px solid #2A4BD1;
    outline-offset: 2px;
    border-radius: 4px;
}

.fr-faq p[b-fr-marketing] {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fr-muted);
}

.fr-faq a[b-fr-marketing] {
    color: var(--fr-accent-text);
}

.fr-cta__body .fr-cta__small[b-fr-marketing] {
    font-size: 14px;
    margin: 22px auto 0;
}

.fr-cta__small a[b-fr-marketing] {
    color: #F3F1EC;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .fr-receipt[b-fr-marketing],
    .fr-receipt__caption[b-fr-marketing] {
        margin-left: auto;
        margin-right: auto;
    }

    .fr-receipt__caption[b-fr-marketing] {
        text-align: center;
    }
}

@media (max-width: 840px) {
    .fr-org-pricing[b-fr-marketing],
    .fr-org-faq[b-fr-marketing] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .fr-org-section[b-fr-marketing] {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .fr-price-table th[b-fr-marketing],
    .fr-price-table td[b-fr-marketing] {
        padding: 12px 14px;
        font-size: 14.5px;
    }

    .fr-receipt[b-fr-marketing] {
        padding: 22px;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* The /pricing page. Shares the b-fr-marketing scope with Organizers.razor.css, which holds the shared
   fr- rules (Ticketr.csproj), so every fr- class from there applies here, and the dark flip is the
   .fr-home token block in app.css — tokens only below, never a literal that would need a dark twin. */

/* ── Hero rate card ───────────────────────────────────────────── */
.fr-rate-card[b-fr-marketing] {
    position: relative;
    overflow: hidden;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 20px;
    box-shadow: var(--fr-card-shadow);
    padding: 32px 32px 28px;
    max-width: 440px;
    margin-left: auto;
}

.fr-rate-card[b-fr-marketing]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--fr-accent-text);
}

.fr-rate-card__label[b-fr-marketing] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fr-subtle);
    margin-bottom: 12px;
}

.fr-rate-card__rate[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 58px;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--fr-ink);
    white-space: nowrap;
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
}

.fr-rate-card__plus[b-fr-marketing] {
    color: var(--fr-subtle);
    font-weight: 500;
}

.fr-rate-card__list[b-fr-marketing] {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--fr-border-soft);
    display: grid;
    gap: 12px;
}

.fr-rate-card__list li[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    color: var(--fr-body);
}

/* ── Included ─────────────────────────────────────────────────── */
.fr-included[b-fr-marketing] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fr-included li[b-fr-marketing] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--fr-body);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .fr-rate-card[b-fr-marketing] {
        margin-right: auto;
    }
}

@media (max-width: 840px) {
    .fr-included[b-fr-marketing] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fr-included[b-fr-marketing] {
        grid-template-columns: 1fr;
    }

    .fr-rate-card[b-fr-marketing] {
        padding: 28px 22px 24px;
    }

    .fr-rate-card__rate[b-fr-marketing] {
        font-size: 46px;
    }
}
/* /Components/Pages/PricingCalculator.razor.rz.scp.css */
/* The /pricing calculator — an interactive island on a static page. Shares b-fr-marketing, and its
   colors are the .fr-home tokens it inherits from the page around it (dark flip: app.css). */

.fr-calc[b-fr-marketing] {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr);
    gap: 16px;
    align-items: stretch;
}

/* ── Input ────────────────────────────────────────────────────── */
.fr-calc__input[b-fr-marketing] {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 24px;
}

.fr-calc__label[b-fr-marketing] {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fr-subtle);
    margin-bottom: 10px;
}

.fr-calc__field[b-fr-marketing] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--fr-bg2);
    border: 1px solid var(--fr-border-strong);
    border-radius: 12px;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.fr-calc__field:focus-within[b-fr-marketing] {
    border-color: var(--fr-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent-text) 22%, transparent);
}

.fr-calc__currency[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    color: var(--fr-subtle);
}

.fr-calc__field input[b-fr-marketing] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fr-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -.02em;
    padding: 12px 0;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fr-calc__field input[b-fr-marketing]::-webkit-outer-spin-button,
.fr-calc__field input[b-fr-marketing]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fr-calc__chips[b-fr-marketing] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}

.fr-calc__chip[b-fr-marketing] {
    min-height: 38px;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--fr-body);
    background: var(--fr-surface);
    border: 1px solid var(--fr-border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.fr-calc__chip:hover[b-fr-marketing] {
    background: var(--fr-hover);
}

.fr-calc__chip.is-active[b-fr-marketing] {
    color: #fff;
    background: #2A4BD1;
    border-color: #2A4BD1;
}

.fr-calc__chip:focus-visible[b-fr-marketing] {
    outline: 2px solid #2A4BD1;
    outline-offset: 2px;
}

.fr-calc__hint[b-fr-marketing] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fr-muted);
}

/* ── Results ──────────────────────────────────────────────────── */
.fr-calc__results[b-fr-marketing] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fr-calc__card[b-fr-marketing] {
    display: flex;
    flex-direction: column;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 22px;
}

/* Poster Price is the feature being sold on this page: an accent edge, never coral (coral is
   rationed to on-sale energy in the Front Row system). */
.fr-calc__card--poster[b-fr-marketing] {
    border-color: color-mix(in srgb, var(--fr-accent-text) 50%, var(--fr-border));
    box-shadow: inset 0 3px 0 var(--fr-accent-text);
}

.fr-calc__mode[b-fr-marketing] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--fr-ink);
}

.fr-calc__sub[b-fr-marketing] {
    margin: 4px 0 16px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--fr-muted);
}

.fr-calc__lines[b-fr-marketing] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.fr-calc__lines > div[b-fr-marketing] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.fr-calc__lines dt[b-fr-marketing] {
    font-size: 14.5px;
    color: var(--fr-body);
}

.fr-calc__lines dd[b-fr-marketing] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.01em;
    color: var(--fr-ink);
    font-variant-numeric: tabular-nums;
}

.fr-calc__lines > .fr-calc__you[b-fr-marketing] {
    margin-top: 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--fr-check-bg);
}

.fr-calc__you dt[b-fr-marketing],
.fr-calc__you dd[b-fr-marketing] {
    color: var(--fr-check-ink);
}

.fr-calc__note[b-fr-marketing] {
    margin: auto 0 0;
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fr-muted);
}

/* Below Poster Price's floor there are no figures, so the note takes their place under the heading. */
.fr-calc__note--floor[b-fr-marketing] {
    margin-top: 0;
    padding-top: 2px;
    font-size: 14.5px;
    color: var(--fr-body);
}

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

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

    .fr-calc__input[b-fr-marketing],
    .fr-calc__card[b-fr-marketing] {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-calc__field[b-fr-marketing],
    .fr-calc__chip[b-fr-marketing] {
        transition: none;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Shared by Terms, Privacy and Cookies: keep the three files identical. Dark-mode remaps live in
   app.css ("Legal pages"), since scoped CSS can't reach body.eventrika-dark. */
.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-hero .legal-updated[b-kmw7i7xvtf] {
    font-size: 0.86rem;
    font-weight: 700;
}

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

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

.legal-content section[b-kmw7i7xvtf] {
    scroll-margin-top: 5.5rem;
}

/* Reading width for text; tables get the whole card. */
.legal-content h2[b-kmw7i7xvtf],
.legal-content h3[b-kmw7i7xvtf],
.legal-content p[b-kmw7i7xvtf],
.legal-content ul[b-kmw7i7xvtf] {
    max-width: 72ch;
}

.legal-content section + section[b-kmw7i7xvtf] {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid #efeee9;
}

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

.legal-content h3[b-kmw7i7xvtf] {
    margin: 1.1rem 0 0.3rem;
    color: #1a1917;
    font-size: 1rem;
}

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

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

.legal-content ul[b-kmw7i7xvtf] {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.legal-content li[b-kmw7i7xvtf] {
    margin: 0 0 0.45rem;
    color: #5f5b54;
}

.legal-content a[b-kmw7i7xvtf] {
    color: #223cab;
}

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

.legal-toc[b-kmw7i7xvtf] {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    padding: 0;
    list-style: none;
}

.legal-toc a[b-kmw7i7xvtf] {
    color: #223cab;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.legal-toc a:hover[b-kmw7i7xvtf],
.legal-toc a:focus-visible[b-kmw7i7xvtf] {
    text-decoration: underline;
}

.legal-table-wrap[b-kmw7i7xvtf] {
    margin: 0 0 1rem;
    overflow-x: auto;
}

.legal-table[b-kmw7i7xvtf] {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.92rem;
}

.legal-table th:first-child[b-kmw7i7xvtf],
.legal-table td:first-child[b-kmw7i7xvtf] {
    width: 34%;
}

.legal-table th:last-child[b-kmw7i7xvtf],
.legal-table td:last-child[b-kmw7i7xvtf] {
    width: 22%;
}

.legal-table th[b-kmw7i7xvtf],
.legal-table td[b-kmw7i7xvtf] {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #efeee9;
    text-align: left;
    vertical-align: top;
}

.legal-table th[b-kmw7i7xvtf] {
    color: #1a1917;
    font-weight: 700;
    white-space: nowrap;
}

.legal-table td[b-kmw7i7xvtf] {
    color: #5f5b54;
}

.legal-table code[b-kmw7i7xvtf] {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: #f3f2ee;
    color: #1a1917;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    /* minmax(0, …), never a bare 1fr: 1fr's minimum is the content's, and a table's min-width
       would widen the whole page instead of scrolling inside .legal-table-wrap. */
    .legal-layout[b-kmw7i7xvtf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-side[b-kmw7i7xvtf] {
        position: static;
    }
}
/* /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;
}

/* The organizer's poster leads the hero. Posters are often portrait, so it's capped by height and never cropped. */
.public-event-poster[b-h6h37woeul] {
    display: block;
    max-width: min(100%, 420px);
    max-height: 360px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 16px;
}

.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/PublicEventSeries.razor.rz.scp.css */
/* The series page shares PublicOrganization's CSS scope (CssScope in Ticketr.csproj), so every
   .landing-* rule there — the hero, the brand looks, the stat row — already applies here. This file
   holds only what the series page adds, all prefixed series- so nothing here can land on the
   organization page. Colors come from the --landing-* variables, which app.css re-maps for dark
   mode and the brand looks re-map per organization; no literal colors, so no dark overrides. */

.series-eyebrow-link[b-org-landing] {
    text-decoration: none;
}

.series-eyebrow-link:hover[b-org-landing],
.series-eyebrow-link:focus-visible[b-org-landing] {
    text-decoration: underline;
}

.series-hero-venue[b-org-landing] {
    margin: 0.55rem 0 0;
    color: var(--landing-subtle);
    font-size: 1rem;
    font-weight: 600;
}

.series-description[b-org-landing] {
    /* Organizers write these with line breaks; keep them. */
    white-space: pre-line;
}

.landing-look-bold .series-hero-venue[b-org-landing] {
    color: color-mix(in srgb, var(--brand-hero-ink) 85%, transparent);
}

.series-heading[b-org-landing] {
    margin: 0.5rem 0 0;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    letter-spacing: -0.02em;
    color: var(--landing-heading);
}

.series-price-note[b-org-landing] {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--landing-subtle);
}

.series-days[b-org-landing] {
    display: grid;
    gap: 0.25rem;
}

.series-day-title[b-org-landing] {
    margin: 1.6rem 0 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--landing-subtle);
}

.series-list[b-org-landing] {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-row[b-org-landing] {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--landing-line);
    border-radius: 18px;
    background: var(--landing-surface);
    color: inherit;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.series-row:hover[b-org-landing] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--landing-accent) 38%, var(--landing-line));
    box-shadow: 0 14px 32px rgba(26, 25, 23, 0.1);
}

.series-row:focus-visible[b-org-landing] {
    border-color: color-mix(in srgb, var(--landing-accent) 58%, var(--landing-line));
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--landing-accent) 22%, transparent);
    outline: none;
}

/* A show with a poster gets a small thumbnail beside its time, like the organization page's cards. */
.series-row.has-poster[b-org-landing] {
    grid-template-columns: 6.25rem 7rem minmax(0, 1fr) auto;
}

.series-row-poster[b-org-landing] {
    display: block;
    width: 7rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    background: color-mix(in srgb, var(--landing-accent) 8%, transparent);
}

.series-row.is-past .series-row-poster[b-org-landing] {
    opacity: 0.7;
}

.series-row-time[b-org-landing] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.series-row-clock[b-org-landing] {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--landing-heading);
    white-space: nowrap;
}

.series-row-zone[b-org-landing] {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--landing-subtle);
}

.series-row-body[b-org-landing] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.series-row-name[b-org-landing] {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--landing-heading);
}

.series-row-meta[b-org-landing] {
    color: var(--landing-subtle);
    font-size: 0.93rem;
}

.series-row-description[b-org-landing] {
    color: var(--landing-subtle);
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-row-side[b-org-landing] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    text-align: right;
}

.series-row-status[b-org-landing] {
    display: inline-flex;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--landing-subtle);
    border: 1px solid var(--landing-line);
}

/* Heading ink, not the accent: a brand's text tone is only guaranteed 4.5:1 against the plain
   surface (BrandPaletteBuilder), and on its own tint a mid-tone brand color drops under AA at this
   size. The tint carries the brand here; the call to action beside it carries the color. */
.series-row-status.is-on-sale[b-org-landing] {
    color: var(--landing-heading);
    border-color: transparent;
    background: color-mix(in srgb, var(--landing-accent) 13%, transparent);
}

.series-row-status.is-sold-out[b-org-landing] {
    color: var(--landing-heading);
    border-color: color-mix(in srgb, var(--landing-heading) 35%, transparent);
}

.series-row-cta[b-org-landing] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--landing-accent-deep);
    font-weight: 700;
    font-size: 0.93rem;
    white-space: nowrap;
}

.series-row.is-past[b-org-landing] {
    background: transparent;
}

.series-row.is-past .series-row-clock[b-org-landing],
.series-row.is-past .series-row-name[b-org-landing] {
    color: var(--landing-subtle);
}

.series-row.is-past .series-row-cta[b-org-landing] {
    color: var(--landing-subtle);
}

.series-past[b-org-landing] {
    margin-top: 2.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--landing-line);
}

.series-past summary[b-org-landing] {
    cursor: pointer;
    width: fit-content;
    font-weight: 700;
    color: var(--landing-subtle);
}

.series-past summary:hover[b-org-landing] {
    color: var(--landing-heading);
}

@media (max-width: 720px) {
    .series-row[b-org-landing] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem 1rem;
        padding: 0.9rem 1rem;
    }

    .series-row-time[b-org-landing] {
        min-width: 4.5rem;
    }

    /* On a phone the thumbnail moves to the end of the first line, so the name keeps its width. */
    .series-row.has-poster[b-org-landing] {
        grid-template-columns: auto minmax(0, 1fr) 4.5rem;
    }

    .series-row-poster[b-org-landing] {
        grid-column: 3;
        grid-row: 1;
        width: 4.5rem;
        border-radius: 8px;
    }

    .series-row-side[b-org-landing] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}
/* /Components/Pages/PublicOrganization.razor.rz.scp.css */
/* Shared CSS scope: this file and PublicEventSeries.razor.css are both compiled under the fixed
   scope id "b-org-landing" (CssScope in Ticketr.csproj), so the series page wears this page's hero,
   brand looks and --landing-* variables without a copy. Series-only rules live in that file, all
   prefixed series-, so nothing there lands here.

   Build gotcha: the scoped-CSS rewrite is timestamp-incremental and ignores metadata, so changing a
   file's CssScope does NOT re-scope an unchanged .razor.css on an incremental build — the component
   markup picks up the new id while the old rewritten CSS stays in obj/, and the page renders
   unstyled. Edit the .css file too (as this comment did), or clean. */

.landing-page[b-org-landing] {
    --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-org-landing] {
    width: min(720px, calc(100vw - 3rem));
    margin: 4rem auto;
    text-align: center;
    color: var(--landing-subtle, #5f5b54);
}

.landing-state-empty h1[b-org-landing] {
    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-org-landing] {
    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-org-landing],
.landing-body[b-org-landing] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
}

.landing-hero[b-org-landing] {
    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-org-landing] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
}

.landing-hero-logo[b-org-landing] {
    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-org-landing] {
    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-org-landing] {
    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-org-landing] {
    margin: 0.6rem 0 0;
    color: var(--landing-subtle);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 56ch;
}

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

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

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

.landing-hero-stats span[b-org-landing] {
    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-org-landing] {
    margin-top: 1.5rem;
}

.landing-toolbar[b-org-landing] {
    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-org-landing] {
    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-org-landing] {
    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-org-landing] {
    color: var(--landing-heading);
}

.landing-tab-active[b-org-landing],
.landing-tab-active:hover[b-org-landing] {
    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-org-landing] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

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

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

.landing-empty-events[b-org-landing] {
    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-org-landing] {
    margin: 0 0 0.4rem;
    color: var(--landing-heading);
    font-size: 1.15rem;
}

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

.landing-clear-filters[b-org-landing] {
    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-org-landing] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.landing-event-card[b-org-landing] {
    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-org-landing] {
    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-org-landing] {
    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;
}

/* The organizer's poster sits above the date tile; cards without one keep the old three rows. */
.landing-event-card.has-poster[b-org-landing] {
    grid-template-rows: auto auto 1fr auto;
}

.landing-event-poster[b-org-landing] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    background: color-mix(in srgb, var(--landing-accent) 8%, transparent);
}

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

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

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

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

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

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

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

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

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

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

.landing-event-date[b-org-landing] {
    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-org-landing] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

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

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

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

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

/* "Sold out" / "On sale Oct 3, 10:00 AM": why the card says View details instead of Buy now. */
.landing-event-status[b-org-landing] {
    margin: 0.4rem 0 0;
    color: var(--landing-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.landing-event-tag[b-org-landing] {
    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-org-landing] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--landing-accent);
    font-weight: 700;
    font-size: 0.95rem;
}

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

.landing-pager[b-org-landing] {
    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-org-landing] {
    border-color: color-mix(in srgb, var(--landing-accent) 40%, var(--landing-line));
}

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

.landing-pager-info[b-org-landing] {
    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-org-landing] {
    --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-org-landing] {
    color: var(--brand-accent-text);
}

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

.landing-branded .landing-hero-logo[b-org-landing] {
    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-org-landing] {
    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-org-landing] {
    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-org-landing] {
    background: linear-gradient(130deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);
    border-color: transparent;
}

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

.landing-look-bold .landing-tagline[b-org-landing],
.landing-look-bold .landing-hero-stats span[b-org-landing] {
    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-org-landing] {
    background: color-mix(in srgb, var(--brand-hero-ink) 16%, transparent);
    color: var(--brand-hero-ink);
}

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

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

    /* Stacked into a column the toolbar is ~175-225px: sticky, that's a third of a phone screen
       covering the events. It scrolls away here instead, like the homepage's. */
    .landing-toolbar[b-org-landing] {
        flex-direction: column;
        align-items: stretch;
        position: static;
    }

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

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

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

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

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

    .landing-event-year[b-org-landing] {
        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);
}

/* Cloudflare's widget, between the message and the Send button; the space is held (as on Find my
   tickets) so the button doesn't jump when the widget arrives. */
.support-turnstile[b-yjw5zo88tx] {
    margin: 0.35rem 0 0.9rem;
    min-height: 70px;
}

.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;
}

/* Focused by code after each send, never tabbed to; the margin keeps it clear of the app bar. */
.support-verdict[b-yjw5zo88tx] {
    scroll-margin-top: 5rem;
}

.support-verdict:focus[b-yjw5zo88tx] {
    outline: none;
}

.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] {
    color: #5f5b54;
}

@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 */
/* Shared by Terms, Privacy and Cookies: keep the three files identical. Dark-mode remaps live in
   app.css ("Legal pages"), since scoped CSS can't reach body.eventrika-dark. */
.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] {
    margin: 0.7rem 0 0;
    max-width: 50rem;
    color: #5f5b54;
}

.legal-hero .legal-updated[b-yb8z0raent] {
    font-size: 0.86rem;
    font-weight: 700;
}

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

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

.legal-content section[b-yb8z0raent] {
    scroll-margin-top: 5.5rem;
}

/* Reading width for text; tables get the whole card. */
.legal-content h2[b-yb8z0raent],
.legal-content h3[b-yb8z0raent],
.legal-content p[b-yb8z0raent],
.legal-content ul[b-yb8z0raent] {
    max-width: 72ch;
}

.legal-content section + section[b-yb8z0raent] {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid #efeee9;
}

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

.legal-content h3[b-yb8z0raent] {
    margin: 1.1rem 0 0.3rem;
    color: #1a1917;
    font-size: 1rem;
}

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

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

.legal-content ul[b-yb8z0raent] {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.legal-content li[b-yb8z0raent] {
    margin: 0 0 0.45rem;
    color: #5f5b54;
}

.legal-content a[b-yb8z0raent] {
    color: #223cab;
}

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

.legal-toc[b-yb8z0raent] {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    padding: 0;
    list-style: none;
}

.legal-toc a[b-yb8z0raent] {
    color: #223cab;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.legal-toc a:hover[b-yb8z0raent],
.legal-toc a:focus-visible[b-yb8z0raent] {
    text-decoration: underline;
}

.legal-table-wrap[b-yb8z0raent] {
    margin: 0 0 1rem;
    overflow-x: auto;
}

.legal-table[b-yb8z0raent] {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.92rem;
}

.legal-table th:first-child[b-yb8z0raent],
.legal-table td:first-child[b-yb8z0raent] {
    width: 34%;
}

.legal-table th:last-child[b-yb8z0raent],
.legal-table td:last-child[b-yb8z0raent] {
    width: 22%;
}

.legal-table th[b-yb8z0raent],
.legal-table td[b-yb8z0raent] {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #efeee9;
    text-align: left;
    vertical-align: top;
}

.legal-table th[b-yb8z0raent] {
    color: #1a1917;
    font-weight: 700;
    white-space: nowrap;
}

.legal-table td[b-yb8z0raent] {
    color: #5f5b54;
}

.legal-table code[b-yb8z0raent] {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: #f3f2ee;
    color: #1a1917;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    /* minmax(0, …), never a bare 1fr: 1fr's minimum is the content's, and a table's min-width
       would widen the whole page instead of scrolling inside .legal-table-wrap. */
    .legal-layout[b-yb8z0raent] {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-side[b-yb8z0raent] {
        position: static;
    }
}
/* /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%;
    }
}

/* Tap to enlarge works at every width: above 640px (tablets, a phone held sideways) the tap used to
   flip the state with nothing changing on screen. */
.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, 94vh, 34rem);
}

.ticket-demo-flag[b-w7svpgm9j9] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: #fff4e5;
    border: 1px solid #f59e0b;
    color: #7a4a08;
    font-size: 0.9rem;
    font-weight: 600;
}

@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;
}

.ticket-transfer-confirm[b-w7svpgm9j9] {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    background: #fff4e5;
}

.ticket-transfer-confirm-text[b-w7svpgm9j9] {
    margin: 0;
    color: #1a1917;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.ticket-transfer-actions[b-w7svpgm9j9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

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

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

.ticket-transfer-suggestion[b-w7svpgm9j9] {
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: #223cab;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* 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/ChoiceCard.razor.rz.scp.css */
/* Layout only; the look is .tr-choice-card in app.css (dark mode lives there too). MudBlazor's
   button reset centers flex content, so both axes are set back to the top left. */
.choice-card[b-f2xwuty2v9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 16px;
}

/* Tall enough for the Selected chip, so picking a card never changes its height. On a phone the
   chips wrap under the title instead of squeezing it onto three lines. */
.choice-card-head[b-f2xwuty2v9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 28px;
}

.choice-card-head[b-f2xwuty2v9]  .mud-chip {
    margin: 0;
}

.choice-card-title[b-f2xwuty2v9] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.choice-card-body[b-f2xwuty2v9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/Shared/DemoSwitchBar.razor.rz.scp.css */
/* The demo bar and its "Switch demo" menu.

   Surfaces, text and hairlines lean on MudBlazor palette tokens, and the azure wash is mixed
   against the live surface colour, so light and dark both work without a single override in
   app.css. The only fixed colour is the brand azure itself. */

.demo-bar[b-iyhskma1o6] {
    --demo-accent: #2a4bd1;
    --demo-wash: color-mix(in srgb, var(--demo-accent) 8%, var(--mud-palette-surface, #fff));
    --demo-ink: color-mix(in srgb, var(--demo-accent) 72%, var(--mud-palette-text-primary, #1a1917));
    --demo-line: color-mix(in srgb, var(--demo-accent) 24%, transparent);

    position: relative;
    background: var(--demo-wash);
    border-bottom: 1px solid var(--demo-line);
}

.demo-bar__inner[b-iyhskma1o6] {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-bar__mark[b-iyhskma1o6] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--demo-accent);
}

.demo-bar__label[b-iyhskma1o6] {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--demo-ink);
    flex-shrink: 0;
}

.demo-bar__what[b-iyhskma1o6] {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--demo-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.demo-bar__venue[b-iyhskma1o6] {
    font-size: 14.5px;
    color: var(--demo-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-bar__rule[b-iyhskma1o6] {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background: var(--demo-line);
}

.demo-bar__note[b-iyhskma1o6] {
    font-size: 14px;
    color: var(--demo-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-bar__spacer[b-iyhskma1o6] {
    flex-grow: 1;
}

.demo-bar__all[b-iyhskma1o6] {
    font-size: 14px;
    font-weight: 500;
    color: var(--demo-ink);
    text-decoration: none;
    flex-shrink: 0;
}

.demo-bar__all:hover[b-iyhskma1o6] {
    text-decoration: underline;
}

.demo-bar__switch[b-iyhskma1o6] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--demo-accent) 40%, transparent);
    background: var(--mud-palette-surface, #fff);
    color: var(--demo-ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.demo-bar__switch:hover[b-iyhskma1o6] {
    border-color: var(--demo-accent);
}

.demo-bar__switch.is-open[b-iyhskma1o6] {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: #fff;
}

.demo-bar__chevron[b-iyhskma1o6] {
    transition: transform 0.15s ease;
}

.demo-bar__switch.is-open .demo-bar__chevron[b-iyhskma1o6] {
    transform: rotate(180deg);
}

/* ── The menu ──────────────────────────────────────────── */

/* Transparent on a pointer-and-room screen: its whole job there is to catch the click that
   dismisses the menu. It dims only when the menu becomes a sheet (phone, below). */
.demo-menu__scrim[b-iyhskma1o6] {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: none;
    padding: 0;
    background: transparent;
    cursor: default;
}

.demo-menu[b-iyhskma1o6] {
    position: absolute;
    z-index: 41;
    top: calc(100% + 8px);
    right: 24px;
    width: 384px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(26, 25, 23, 0.16);
    overflow: hidden;
}

.demo-menu__head[b-iyhskma1o6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 10px 11px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.demo-menu__title[b-iyhskma1o6] {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    flex-grow: 1;
}

.demo-menu__count[b-iyhskma1o6] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.demo-menu__close[b-iyhskma1o6] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.demo-menu__body[b-iyhskma1o6] {
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
}

.demo-menu__status[b-iyhskma1o6] {
    margin: 0;
    padding: 18px 12px;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.demo-menu__group-label[b-iyhskma1o6] {
    padding: 10px 10px 4px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.demo-menu__row[b-iyhskma1o6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.demo-menu__row:hover[b-iyhskma1o6] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.demo-menu__row.is-current[b-iyhskma1o6] {
    background: color-mix(in srgb, var(--demo-accent) 10%, transparent);
}

.demo-menu__row-icon[b-iyhskma1o6] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--demo-accent);
}

.demo-menu__row-text[b-iyhskma1o6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-grow: 1;
    min-width: 0;
}

.demo-menu__row-name[b-iyhskma1o6] {
    font-size: 14.5px;
    font-weight: 600;
}

.demo-menu__row-venue[b-iyhskma1o6] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-menu__row.is-current .demo-menu__row-name[b-iyhskma1o6],
.demo-menu__row.is-current .demo-menu__row-venue[b-iyhskma1o6] {
    color: var(--demo-ink);
}

.demo-menu__check[b-iyhskma1o6] {
    flex-shrink: 0;
    color: var(--demo-accent);
}

.demo-menu__foot[b-iyhskma1o6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    font-size: 14px;
    font-weight: 600;
    color: var(--demo-ink);
    text-decoration: none;
}

.demo-menu__foot:hover[b-iyhskma1o6] {
    text-decoration: underline;
}

/* ── Dark mode ─────────────────────────────────────────── */

/* The ink formula (azure mixed toward the body text colour) lands at a mid blue on a dark wash —
   measured 4.0:1 against it, under AA for 14px. On dark the azure itself is the legible ink. */
body.eventrika-dark .demo-bar[b-iyhskma1o6] {
    --demo-accent: #93adf6;
    --demo-ink: #c2cffb;
    --demo-line: color-mix(in srgb, #93adf6 26%, transparent);
}

/* ...and white on that light azure is not legible either, so the pressed button flips to ink. */
body.eventrika-dark .demo-bar__switch.is-open[b-iyhskma1o6] {
    color: #151f44;
}

/* ── Narrow ────────────────────────────────────────────── */

/* The reassurance line is the first thing to go: on a phone the bar has to stay one line, and
   "Demo · Basketball" plus a Switch control is the part that has to survive. */
@media (max-width: 900px) {
    .demo-bar__note[b-iyhskma1o6],
    .demo-bar__rule[b-iyhskma1o6],
    .demo-bar__all[b-iyhskma1o6] {
        display: none;
    }
}

@media (max-width: 700px) {
    /* The venue goes before the scenario name does: "Basketball" alone still tells you where you
       are, and the bar keeps to one line without a mid-word ellipsis. */
    .demo-bar__venue[b-iyhskma1o6] {
        display: none;
    }
}

@media (max-width: 640px) {
    .demo-bar__inner[b-iyhskma1o6] {
        padding: 0 16px;
        gap: 8px;
        min-height: 48px;
    }

    .demo-bar__switch[b-iyhskma1o6] {
        height: 34px;
        padding: 0 10px;
    }

    .demo-bar__switch-text[b-iyhskma1o6] {
        font-size: 13.5px;
    }

    /* The menu becomes a bottom sheet — a 384px popover pinned to the top of a phone screen
       would put its rows under the thumb's blind spot and off the bottom of the viewport. */
    .demo-menu[b-iyhskma1o6] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 72vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 44px rgba(26, 25, 23, 0.22);
    }

    .demo-menu__scrim[b-iyhskma1o6] {
        background: rgba(26, 25, 23, 0.4);
    }

    .demo-menu__head[b-iyhskma1o6] {
        padding: 12px 8px 10px 18px;
    }

    .demo-menu__title[b-iyhskma1o6] {
        font-size: 17px;
    }

    .demo-menu__close[b-iyhskma1o6] {
        display: inline-flex;
    }

    .demo-menu__body[b-iyhskma1o6] {
        max-height: none;
        padding: 6px 10px;
    }

    .demo-menu__row[b-iyhskma1o6] {
        min-height: 52px;
        padding: 8px;
        border-radius: 12px;
    }

    .demo-menu__row-name[b-iyhskma1o6] {
        font-size: 15.5px;
    }

    .demo-menu__row-venue[b-iyhskma1o6] {
        font-size: 13px;
    }

    .demo-menu__foot[b-iyhskma1o6] {
        justify-content: center;
        min-height: 52px;
        font-size: 15px;
    }
}
/* /Components/Shared/DiscoveryEventCard.razor.rz.scp.css */
/* The homepage card (design: EventCard.dc.html). Every color is a token from the page — --fr-* from
   the shared marketing block, --dh-* from Home.razor.css — so app.css's dark flip of those two blocks
   is the whole dark mode; nothing here needs its own dark rule. */

.dc[b-52h72juvam] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--dh-line);
    border-radius: 20px;
    background: var(--fr-surface);
    color: var(--fr-ink);
    overflow: hidden;
    box-shadow: var(--dh-shadow-card);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.dc:hover[b-52h72juvam] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dh-fill) 38%, var(--dh-line));
    box-shadow: var(--dh-shadow-card-hover);
}

/* The keyboard focus ring sits on the whole card: the stretched title link is what has focus. */
.dc:has(.dc__link:focus-visible)[b-52h72juvam] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

.dc__media[b-52h72juvam] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fr-hover);
    flex: none;
}

.dc__image[b-52h72juvam] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dc__typeset[b-52h72juvam] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px 22px 64px;
    background: var(--fr-tile);
    border-bottom: 1px solid var(--dh-tint-border);
    overflow: hidden;
}

.dc__typeset-venue[b-52h72juvam] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dh-link-strong);
}

.dc__typeset-name[b-52h72juvam] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--dh-typeset-ink);
    margin-top: 6px;
    max-width: 16ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc__badge[b-52h72juvam] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(20, 22, 28, .82);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.dc__badge[b-52h72juvam]  .dc__badge-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.dc__tile[b-52h72juvam] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 7px 11px 8px;
    border-radius: 12px;
    background: var(--fr-surface);
    box-shadow: 0 4px 14px rgba(26, 25, 23, .16);
    line-height: 1;
}

.dc__tile-month[b-52h72juvam] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--dh-link-strong);
}

.dc__tile-days[b-52h72juvam] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.02em;
    color: var(--fr-ink);
    margin-top: 3px;
    white-space: nowrap;
}

.dc__body[b-52h72juvam] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    flex: 1;
}

.dc__name[b-52h72juvam] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--fr-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc__link[b-52h72juvam] {
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* The block link: the title's hit area covers the card. */
.dc__link[b-52h72juvam]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dc__when[b-52h72juvam] {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--fr-body);
}

.dc__place[b-52h72juvam] {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--fr-muted);
}

.dc__chips[b-52h72juvam] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

/* Above the stretched link, so a date opens that show directly. */
.dc__chip[b-52h72juvam] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--fr-border);
    border-radius: 999px;
    background: var(--fr-bg2);
    color: var(--fr-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dc__chip:hover[b-52h72juvam] {
    border-color: var(--dh-fill);
    background: var(--fr-tile);
    color: var(--dh-link-strong);
}

.dc__chip:focus-visible[b-52h72juvam] {
    outline: 2px solid var(--fr-accent-text);
    outline-offset: 2px;
}

.dc__more[b-52h72juvam] {
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dh-link-strong);
}

/* Wraps rather than truncates: a price is never cut to "From $32.…", and a long on-sale date may
   take two lines. The CTA keeps to the right on a line of its own. */
.dc__foot[b-52h72juvam] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 14px;
}

.dc__status[b-52h72juvam] {
    min-width: 0;
}

.dc__status--price[b-52h72juvam] {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fr-ink);
    white-space: nowrap;
}

.dc__status--sold-out[b-52h72juvam],
.dc__status--later[b-52h72juvam] {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fr-ink);
}

.dc__status--sold-out[b-52h72juvam] {
    border: 1px solid color-mix(in srgb, var(--fr-ink) 35%, transparent);
}

.dc__status--later[b-52h72juvam] {
    background: color-mix(in srgb, var(--dh-fill) 13%, transparent);
}

.dc__cta[b-52h72juvam] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin-left: auto;
    color: var(--fr-accent-text);
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
}

.dc__cta[b-52h72juvam]  .dc__cta-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .dc[b-52h72juvam] {
        transition: none;
    }

    .dc:hover[b-52h72juvam] {
        transform: none;
    }
}
/* /Components/Shared/DoorKioskBar.razor.rz.scp.css */
.door-kiosk-bar[b-tg4aea5dhs] {
    max-width: 1440px;
    margin: 0 auto 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--tr-card, #fff);
    color: var(--tr-ink, #1a1917);
    border: 1px solid var(--tr-line, #e7e5e0);
    border-radius: 14px;
    box-sizing: border-box;
}

.door-kiosk-title[b-tg4aea5dhs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.door-kiosk-title strong[b-tg4aea5dhs] {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.door-kiosk-eyebrow[b-tg4aea5dhs] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tr-muted, #6b6862);
}

.door-kiosk-pin[b-tg4aea5dhs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.door-kiosk-pin label[b-tg4aea5dhs] {
    font-weight: 700;
    font-size: 0.9rem;
}

.door-kiosk-pin input[b-tg4aea5dhs] {
    width: 5.5rem;
    min-height: 44px;
    padding: 0 0.6rem;
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    border: 1px solid var(--tr-line, #e7e5e0);
    border-radius: 10px;
    background: var(--tr-card, #fff);
    color: inherit;
}

.door-kiosk-button[b-tg4aea5dhs] {
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--tr-primary, #1e5fd6);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.door-kiosk-button:disabled[b-tg4aea5dhs] {
    opacity: 0.6;
    cursor: default;
}

.door-kiosk-link[b-tg4aea5dhs] {
    min-height: 44px;
    padding: 0 0.75rem;
    border: 0;
    background: none;
    color: var(--tr-muted, #6b6862);
    font-weight: 700;
    cursor: pointer;
}

.door-kiosk-error[b-tg4aea5dhs] {
    flex-basis: 100%;
    color: var(--tr-danger, #b42318);
    font-weight: 600;
}
/* /Components/Shared/DoorSalesSettings.razor.rz.scp.css */
.door-method-option[b-d4mjyw0hxj] {
    margin-top: 0.25rem;
}

/* The help line sits under its checkbox's label, not under the box. */
.door-method-option[b-d4mjyw0hxj]  .door-method-help {
    display: block;
    margin: -0.4rem 0 0 2.6rem;
}
/* /Components/Shared/DoorTicketCodes.razor.rz.scp.css */
.door-ticket-codes[b-1md1xpqlcf] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.door-ticket-code[b-1md1xpqlcf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid var(--tr-line, #e7e5e0);
    border-radius: 12px;
    text-align: center;
}

/* White behind the code in both themes: a scanner reads dark on light. */
.door-ticket-qr[b-1md1xpqlcf] {
    width: 100%;
    max-width: 200px;
    background: #fff;
    border-radius: 8px;
    line-height: 0;
}

.door-ticket-qr[b-1md1xpqlcf]  svg {
    width: 100%;
    height: auto;
}

.door-ticket-facts[b-1md1xpqlcf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.door-ticket-admitted[b-1md1xpqlcf] {
    font-weight: 700;
    color: var(--tr-success, #067647);
}
/* /Components/Shared/EventTimeZoneExplainer.razor.rz.scp.css */
.tz-explainer-details[b-o97n7g9u0s] {
    margin-top: 0.3rem;
}

.tz-explainer-details summary[b-o97n7g9u0s] {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
}

.tz-explainer-details[open] summary[b-o97n7g9u0s] {
    margin-bottom: 0.25rem;
}

.tz-explainer-details[b-o97n7g9u0s]  .mud-typography + .mud-typography {
    margin-top: 0.35rem;
}
/* /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/VenueLocationHint.razor.rz.scp.css */
.venue-location-hint[b-wntt8nqaei] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: -8px;
}

.venue-location-hint[b-wntt8nqaei]  .mud-icon-root {
    flex: none;
    margin-top: 1px;
}
/* /Components/Shared/VenueSummaryCard.razor.rz.scp.css */
.venue-summary[b-ibmgq3yjnp] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 12px 14px;
}

.venue-summary-grid[b-ibmgq3yjnp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    gap: 16px;
    align-items: start;
}

/* Phones: the map goes under the facts. */
@media (max-width: 640px) {
    .venue-summary-grid[b-ibmgq3yjnp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .venue-summary-map[b-ibmgq3yjnp] {
        max-width: 360px;
    }
}

.venue-summary-facts[b-ibmgq3yjnp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.venue-summary-fact[b-ibmgq3yjnp] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.venue-summary-fact[b-ibmgq3yjnp]  .mud-icon-root {
    flex: none;
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
}

.venue-summary-fact[b-ibmgq3yjnp]  .venue-summary-address {
    overflow-wrap: anywhere;
}

/* The wizard's override button wraps on phones; keep it reading like the line above it. */
.venue-summary-zone[b-ibmgq3yjnp]  .mud-button-root {
    text-align: start;
}

.venue-summary-zone[b-ibmgq3yjnp]  .mud-button-label {
    justify-content: flex-start;
}

.venue-summary-categories[b-ibmgq3yjnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    font-size: 0.8125rem;
}

.venue-summary-categories li[b-ibmgq3yjnp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
}

.venue-summary-swatch[b-ibmgq3yjnp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(26, 25, 23, 0.25);
    flex: none;
}

.venue-summary-links[b-ibmgq3yjnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding-left: 28px;
    font-size: 0.875rem;
    font-weight: 600;
}

.venue-summary-links a[b-ibmgq3yjnp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.venue-summary-links a:hover[b-ibmgq3yjnp] {
    text-decoration: underline;
}

.venue-summary-links[b-ibmgq3yjnp]  .mud-icon-root {
    font-size: 1rem;
}

.venue-summary-map[b-ibmgq3yjnp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Purely a picture: the links above open the real chart. */
    pointer-events: none;
}

.venue-summary-chart-name[b-ibmgq3yjnp] {
    text-align: center;
}