/* ServerWeb specific CSS
 * Customer-facing styles: hero banners, event cards, public UI, seat map cursors.
 * Seating checkout layout → seating-checkout section below (global allowlist).
 * Seat map canvas → seat-map-viewer.css (SharedUI).
 */

.sr-only {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* Header search panel. Global rather than scoped to SiteHeader: MudMenu renders its content in
   the popover provider at the document root, outside the header's DOM subtree. */
.site-header-search {
    min-width: 300px;
    padding: 12px;
}

.home-page-container {
    /* One rhythm for the whole frontpage. Every section reads this instead of setting its own
       top margin, so the vertical spacing cannot drift between components again. Inherited, so
       the scoped CSS of each section component can use it directly. */
    --home-section-gap: clamp(2.5rem, 5vw, 4rem);

    max-width: none;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2rem;
}

.home-hero-loading,
.home-hero-empty {
    min-height: 360px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 24px;
}

.event-search-form {
    width: 100%;
}

.event-search-input-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0 1rem 0 1.5rem;
}

.event-search-icon {
    flex: 0 0 auto;
    color: var(--bs-color-text-secondary);
    font-size: 1.5rem;
}

.event-search-native-input {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    outline: none;
}

.event-search-native-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}













.event-search-panel {
    position: relative;
    z-index: 2;
    margin: -1.5rem auto 1.75rem;
    width: min(93%, 1230px);
    border-radius: 28px;
    background: var(--bs-color-surface-default);

    box-shadow: 0 4px 8.5px 5px rgba(0, 0, 0, 0.05);

    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
}

.event-search-stack {
    min-height: 64px;
}

.event-search-input {
    flex: 1 1 360px;
    min-width: 240px;
}

.event-search-input .mud-input-root {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.event-search-input .mud-input-root::before,
.event-search-input .mud-input-root::after {
    display: none;
}

/* Short rule centred in the panel rather than a full-height edge-to-edge line. */
.event-search-divider {
    width: 1px;
    align-self: center;
    height: 42px;
    margin: 0 1.25rem;
    background: var(--bs-color-border-subtle);
}

.event-search-filter {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    justify-content: center;
    min-width: 160px;
    padding-right: 2.5rem;
}

.event-search-filter-label {
    color: color-mix(in srgb, var(--bs-color-text-primary) 40%, transparent);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.event-search-filter-value {
    color: var(--bs-color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    /* A chosen date is longer than "Vælg dato"; wrapping it would make the block two lines tall
       and push the panel out of shape. */
    white-space: nowrap;
}

.event-search-filter-icon {
    position: absolute;
    right: 0;
    top: 50%;
    color: var(--bs-color-text-secondary);
    transform: translateY(-50%);
}

/* The label, value and arrow above are the design. The MudBlazor control that owns the interaction
   sits in this transparent layer stretched across the whole block, so clicking anywhere on the
   block — the arrow included — opens its dropdown or calendar, and nothing about the panel's
   appearance comes from MudBlazor's input chrome. The popover itself renders in the popover
   provider at the document root, so it is not affected by the opacity here.

   The layer is our own element rather than the MudBlazor control's Class: MudSelect puts Class on
   an inner element and keeps a positioned wrapper of its own around it, so positioning through
   Class collapses the control to nothing. */
.event-search-filter-control {
    position: absolute;
    inset: 0;
    display: flex;
    margin: 0;
    opacity: 0;
    /* Keeps MudBlazor's own negative margins from spilling the invisible control out over the
       neighbouring blocks, where it would swallow their clicks. */
    overflow: hidden;
}

/* MudBlazor's input chrome is several nested elements deep, and the click handler sits on one of
   the inner ones. Every level has to fill the layer, or a click near the block's edge lands behind
   the control and nothing happens. */
.event-search-filter-control > *,
.event-search-filter-control .mud-input-control,
.event-search-filter-control .mud-input-control-input-container,
.event-search-filter-control .mud-input,
.event-search-filter-control .mud-picker,
.event-search-filter-control input {
    flex: 1 1 auto;
    height: 100%;
    cursor: pointer;
}

/* Transparent controls take MudBlazor's focus styling with them, so the block draws the ring
   instead — keyboard users have to be able to see which filter they are on.

   Gated on the input modality rather than on :focus-visible. The two dropdowns focus a div and
   behave, but the date filter's trigger is a readonly text input, and browsers grant
   :focus-visible to text inputs however they were focused — so on that block alone a mouse click
   left a ring behind. data-nav comes from input-modality.js. */
:root[data-nav="keyboard"] .event-search-filter:focus-within {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
    border-radius: var(--bs-radius-sm);
}

/* Region options name the region and the postal codes it covers, so the grouping is something the
   visitor can read rather than guess at. */
.event-search-filter-popover .event-search-option-label {
    display: block;
}

.event-search-filter-popover .event-search-option-hint {
    display: block;
    color: var(--bs-color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Frontpage CTAs are styled by our tokens alone. MudBlazor's stock button chrome still leaked
   through: the button typography's letter-spacing, a 64px min-width floor, and the uppercase
   transform. Stripped here so nothing but our own rules decides how these look. Ripple is turned
   off at the component (Ripple="false") rather than clipped. */
.event-search-button,
.home-marketing-cta-primary,
.home-marketing-cta-secondary,
.home-promo-cta,
.home-hero-cta {
    letter-spacing: normal;
    min-width: 0;
    text-transform: none;
}

.event-search-button {
    flex: 0 0 auto;
    margin-left: 1.5rem;
    margin-right: 1rem;
    min-width: 116px;
    border-radius: var(--bs-radius-md);
    font-weight: 800;
    /* Ours, not MudBlazor's — the markup says "Søg" and the design shows "SØG". */
    text-transform: uppercase;
}

.home-featured-section {
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
}

.home-featured-header {
    margin-bottom: 1rem;
}

.home-featured-title {
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.home-featured-all-button {
    border-radius: 999px;
    font-weight: 700;
    text-transform: none;
}

.home-featured-card {
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    background: var(--mud-palette-white);
}

.home-featured-card-image,
.home-featured-card-image .mud-card-media {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.home-featured-card-image-placeholder {
    height: 280px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.home-featured-card-content {
    min-height: 148px;
}

.home-featured-card-title {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    line-height: 1.15;
}

.home-featured-card-meta {
    display: block;
    margin-top: 0.35rem;
    color: var(--mud-palette-text-secondary);
}

.home-featured-card-cta {
    margin-top: 1rem;
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
}

.home-fallback-all-events {
    width: min(91%, 1120px);
    margin: 1rem auto 0;
}

@media (max-width: 960px) {

    .event-search-panel {
        margin-top: 1rem;
    }

    .event-search-stack {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* The three filter blocks need the panel's full desktop width to read as separate controls.
       Below it they collapse into stacked rows the design has no answer for, so the small-screen
       panel is the search field and the button — which is the whole search on their own. */
    .event-search-divider,
    .event-search-filter {
        display: none;
    }

    .event-search-button {
        flex: 1 1 100%;
    }

    .home-featured-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }
}

.home-featured-event-card-shell {
    cursor: pointer;
    display: block;
    outline: none;
}

.home-featured-event-card-shell:focus-visible .home-featured-event-card {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.quickpay-json {
    font-family: monospace;
    font-size: 0.875rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Hero banner image styling - customer site */
body.web .hero-banner-image {
    width: 100%;
    height: clamp(240px, 45vh, 440px);
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
}

body.web .hero-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: white;
}

.events-browse-scroll-sentinel {
    height: 1px;
    width: 100%;
}

/* Events list. Deliberately the frontpage's measurements: same container rhythm, same panel, same
   section header and card grid, so moving from the frontpage to a search result does not feel like
   moving to another site. */
.events-browse-page {
    --home-section-gap: clamp(2.5rem, 5vw, 4rem);

    max-width: none;
    padding: 0 0 2rem;
}

.events-browse-title {
    color: var(--bs-color-text-primary);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    margin: 2.5rem auto 1.5rem;
    width: min(91%, 1120px);
}

/* The frontpage panel hangs off the bottom of the hero. There is no hero here, so it sits in the
   flow instead — everything else about it stays identical. */
.event-search-panel--standalone {
    margin-top: 0;
}

.events-browse-results {
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
}

/* Same weight as the frontpage's section links, which is what it sits next to in the header row. */
.events-browse-clear {
    background: none;
    border: 0;
    color: var(--bs-color-text-secondary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
}

.events-browse-clear:hover {
    color: var(--bs-color-text-primary);
    text-decoration: underline;
}

.events-browse-clear:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

.events-browse-empty {
    align-items: center;
    background: var(--bs-color-surface-subtle);
    border-radius: var(--bs-radius-lg);
    display: flex;
    flex-direction: column;
    padding: 3rem 1.5rem;
    text-align: center;
}

body.web .seat-area-clickable,
body.web .seat-clickable,
body.web .seat-clickable rect,
body.web .seat-clickable text,
body.web .seat-clickable tspan {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.web .seat-clickable text,
body.web .seat-clickable tspan {
    pointer-events: none;
}

/* Layout utilities */
.web-page-loading {
    min-height: 60vh;
}

.web-basket-drawer {
    --mud-drawer-width: 380px;
}

.web-flex-wrap {
    flex-wrap: wrap;
}

.web-event-details-description {
    height: 100%;
}

/* Matches SiteHeader.razor.css height breakpoints — used for sticky offsets below the fixed header. */
body.web {
    --site-header-sticky-offset: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 8);
}

@media (min-width: 0px) and (orientation: landscape) {
    body.web {
        --site-header-sticky-offset: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4);
    }
}

@media (min-width: 600px) {
    body.web {
        --site-header-sticky-offset: var(--mud-appbar-height, 64px);
    }
}

.web-event-booking-sticky {
    position: sticky;
    top: calc(var(--site-header-sticky-offset, var(--mud-appbar-height, 64px)) + var(--bs-space-4, 1rem));
    z-index: 5;
}

.event-landing-sidebar-column {
    align-self: start;
}

.event-landing-mobile-booking-bar {
    display: none;
}

@media (max-width: 959px) {
    .event-landing-page {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    .event-landing-mobile-booking-bar {
        align-items: center;
        backdrop-filter: blur(12px);
        background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
        border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
        bottom: 0;
        box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
        display: flex;
        gap: 0.75rem;
        left: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        position: fixed;
        right: 0;
        z-index: 30;
    }

    .event-landing-mobile-from-price {
        flex: 1 1 auto;
        font-weight: 700;
        min-width: 0;
    }

    .event-landing-mobile-booking-button {
        flex: 1 1 11rem;
        max-width: 14rem;
    }
}

.event-landing-page {
    background-color: var(--mud-palette-background);
}

.event-landing-loading {
    min-height: 50vh;
}

.event-landing-title {
    font-weight: 700;
}

.event-landing-hero-card {
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
}

.event-landing-hero-image {
    width: 100%;
    height: clamp(220px, 42vw, 420px);
    object-fit: cover;
    display: block;
}

.event-landing-panel,
.event-landing-sidebar-card,
.event-landing-expansion,
.event-landing-expansion .mud-expand-panel {
    border-radius: var(--mud-default-borderradius);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    background: var(--mud-palette-surface);
}

.event-landing-sidebar-stack {
    width: 100%;
}

.event-landing-info-block {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.event-landing-info-divider {
    opacity: 0.65;
}

.event-landing-primary-cta {
    font-weight: 600;
    text-transform: none;
}

.event-landing-payment-methods .accepted-payment-method-logo,
.event-landing-payment-methods .event-landing-payment-logo {
    height: 20px;
    width: auto;
    max-width: none;
    min-height: 20px;
    min-width: 1px;
    object-fit: contain;
    display: block;
}

.checkout-price-overview-row {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.checkout-price-overview-labels,
.checkout-price-overview-amounts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.checkout-price-overview-amounts {
    flex-shrink: 0;
    text-align: right;
}

.checkout-price-overview-ticket,
.checkout-price-overview-price {
    font-weight: 700;
}

.checkout-price-overview-fee-label,
.checkout-price-overview-fee {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent);
}

.seating-checkout-accepted-payment-methods {
    width: 100%;
}

.accepted-payment-methods-logos .accepted-payment-method-logo {
    height: 20px;
    width: auto;
    max-width: none;
    min-height: 20px;
    min-width: 1px;
    object-fit: contain;
    display: block;
}

.event-landing-rich-text a {
    color: var(--mud-palette-primary);
}

/* Status / outcome pages */
.web-status-icon-lg {
    font-size: 96px;
}

.web-status-icon-xl {
    font-size: 6rem;
}

.web-alert-narrow {
    max-width: 500px;
}

.web-action-stack {
    width: 100%;
    max-width: 400px;
}


/* Seating checkout layout */
.seating-checkout-page {
    --seating-accent: var(--mud-palette-secondary);
    --seating-accent-strong: var(--mud-palette-secondary-darken);
    --seating-subtle-surface: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    --seating-subtle-border: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);

    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    margin: 0 auto;
    max-width: none;
    padding: 1.25rem 0 2rem;
    width: 100%;
}

.seating-checkout-loading {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 56vh;
}

.seating-checkout-layout {
    align-items: flex-start;
    margin: 0 auto;
    max-width: none;
    width: 100%;
}

.seating-checkout-back-link {
    align-self: flex-start;
    margin-bottom: 0.6rem;
}

.seating-checkout-main-column {
    padding: 0;
}

.seating-checkout-main-stack {
    max-width: none;
}

.seating-checkout-intro {
    border-radius: 1rem;
    padding: 1.05rem 1.2rem 1.15rem;
}

.seating-checkout-intro-header {
    margin-bottom: 0.95rem;
}

.seating-checkout-intro-title {
    font-size: clamp(1.7rem, 2.25vw, 2.55rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    margin-bottom: 0.65rem;
}

.seating-checkout-restore-removal-notice {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    line-height: 1.45;
}

.seating-checkout-restore-removal-notice .mud-alert-message {
    color: var(--mud-palette-text-primary);
}

.seating-checkout-intro-venue {
    margin-bottom: 0;
}

.seating-checkout-description {
    font-size: 0.98rem;
    line-height: 1.65;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.seating-checkout-description :where(p, ul, ol) {
    margin: 0 0 0.9rem;
}

.seating-checkout-description :where(p:last-child, ul:last-child, ol:last-child) {
    margin-bottom: 0;
}

.seating-checkout-description :where(span, strong, em) {
    color: inherit;
}

.seating-checkout-intro-meta {
    margin-top: 1rem;
}

.seating-checkout-intro-meta-line {
}

.seating-checkout-target-select {
    margin-top: 1.15rem;
    max-width: 28rem;
}

.seating-checkout-workspace {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    padding: 0;
}

.seating-checkout-map-section {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.seating-checkout-map-legend {
    margin-top: var(--bs-space-4, 1rem);
    max-width: 22rem;
    width: 100%;
}

.seating-checkout-ticket-column {
    display: flex;
    flex-direction: column;
    gap: var(--bs-space-4, 1rem);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.seating-checkout-map-legend.mud-paper,
.seating-checkout-ticket-column .seating-checkout-card.mud-paper,
.seating-checkout-ticket-column .seating-checkout-ticket-card.mud-paper {
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    border-radius: var(--bs-radius-lg, var(--mud-default-borderradius));
    color: var(--mud-palette-text-primary);
    padding: 1.25rem 1.5rem;
}

.seating-checkout-map-legend .mud-typography-h6,
.seating-checkout-map-legend .mud-typography-body2,
.seating-checkout-ticket-column .seating-checkout-card .mud-typography-h6,
.seating-checkout-ticket-column .seating-checkout-card .mud-typography-subtitle2,
.seating-checkout-ticket-column .seating-checkout-card .mud-typography-body2 {
    color: var(--mud-palette-text-primary);
}

.seating-checkout-ticket-column .seating-checkout-price-card {
    background: var(--mud-palette-surface);
}

.seating-checkout-ticket-column .seating-checkout-promotion-accordion,
.seating-checkout-ticket-column .seating-checkout-promotion-accordion .mud-expand-panel {
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    border-radius: var(--bs-radius-lg, var(--mud-default-borderradius));
    color: var(--mud-palette-text-primary);
}

.seating-checkout-ticket-column [data-testid="checkout-order-discount-section"] {
    width: 100%;
}

.seating-checkout-ticket-column [data-testid="checkout-order-discount-section"] > .mud-typography-body2 {
    color: var(--mud-palette-primary);
    cursor: pointer;
    font-weight: 600;
}

.seating-checkout-ticket-column [data-testid="checkout-discount-code-panel"] {
    background: var(--seating-subtle-surface);
    border-color: var(--seating-subtle-border);
    border-radius: var(--bs-radius-md, var(--mud-default-borderradius));
    margin-bottom: 0;
}

.seating-checkout-ticket-column [data-testid="checkout-discount-code-panel"] .checkout-discount-code-row-sidebar {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.seating-checkout-ticket-column [data-testid="checkout-discount-code-panel"] .checkout-discount-code-field {
    flex: 1 1 auto;
    min-width: 0;
}

.seating-checkout-ticket-column [data-testid="checkout-discount-code-panel"] .checkout-discount-code-apply-button {
    flex-shrink: 0;
    height: 2.5rem;
    margin-top: 0;
    min-width: 5.5rem;
}

.seating-checkout-sidebar-step-navigation {
    margin-top: 0 !important;
}

.seating-checkout-sidebar-step-navigation .mud-button-root {
    font-weight: 700;
    min-height: 3rem;
    text-transform: none;
}

.seating-checkout-sidebar-step-navigation .mud-button-filled-primary {
    background-color: var(--bs-color-action-primary) !important;
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-on-action-primary, #fff) !important;
}

.seating-checkout-sidebar-step-navigation .mud-button-filled-primary:hover {
    background-color: var(--bs-color-action-primary-hover) !important;
}

.seating-checkout-sidebar-step-navigation .mud-button-filled-secondary {
    background-color: var(--bs-color-action-primary) !important;
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-on-action-primary, #fff) !important;
}

.seating-checkout-sidebar-step-navigation .mud-button-filled-secondary:hover {
    background-color: var(--bs-color-action-primary-hover) !important;
}

.checkout-buyer-info-next-button.mud-button-filled-secondary {
    background-color: var(--bs-color-action-primary) !important;
    color: var(--bs-color-text-on-action-primary, #fff) !important;
}

.checkout-buyer-info-next-button.mud-button-filled-secondary:hover {
    background-color: var(--bs-color-action-primary-hover) !important;
}

/* Checkout tail steps (buyer info + extras + payment) — global layout; scoped .razor.css does not apply across components */
.checkout-buyer-info-layout {
    align-items: start;
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    margin-inline: auto;
    width: 100%;
}

.checkout-buyer-info-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.checkout-buyer-info-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--seating-subtle-border, color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent));
    border-radius: var(--bs-radius-lg, var(--mud-default-borderradius));
    padding: 1.35rem 1.5rem;
}

.checkout-buyer-info-heading {
    font-size: 1.05rem;
    font-weight: 700;
}

.checkout-order-summary-sidebar {
    align-self: start;
    position: sticky;
    top: 1rem;
}

.checkout-order-summary-sidebar-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--seating-subtle-border, color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent));
    border-radius: var(--bs-radius-lg, var(--mud-default-borderradius));
    padding: 1.25rem 1.35rem;
}

.checkout-order-summary-sidebar-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.checkout-order-summary-sidebar-divider {
    margin: 0.75rem 0;
}

.checkout-order-summary-sidebar-total-label,
.checkout-order-summary-sidebar-total-amount {
    font-size: 1.05rem;
}

.checkout-order-summary-sidebar-payment-methods {
    padding-inline: 0.15rem;
}

.checkout-addon-select-all-button {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    min-width: auto;
    text-transform: none;
}

.checkout-addon-options-list {
    border-top: 1px solid var(--seating-subtle-border, color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent));
    margin-top: 0.35rem;
}

.checkout-addon-option-section {
    border-bottom: 1px solid var(--seating-subtle-border, color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent));
    padding: 1.15rem 0;
}

.checkout-addon-option-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.checkout-addon-option-header {
    gap: 1rem;
}

.checkout-addon-option-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.checkout-addon-option-price {
    color: var(--mud-palette-text-primary);
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.checkout-addon-option-description {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 68%, transparent);
    line-height: 1.45;
    margin-top: 0.45rem;
    max-width: 42rem;
}

.checkout-addon-toggle-group {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.95rem;
}

.checkout-addon-toggle {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    border-radius: var(--bs-radius-pill, 999px);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.92rem;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.55rem 0.85rem;
    text-align: center;
}

.checkout-addon-toggle-yes-selected {
    background: color-mix(in srgb, #6f8f3a 16%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, #6f8f3a 42%, transparent);
    font-weight: 600;
}

.checkout-addon-toggle-no-selected {
    background: color-mix(in srgb, #c62828 8%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, #c62828 32%, transparent);
    font-weight: 600;
}

.checkout-addon-toggle-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.checkout-addon-toggle-dot {
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 0.6rem;
    width: 0.6rem;
}

.checkout-addon-toggle-dot-yes {
    background: #6f8f3a;
}

.checkout-addon-toggle-dot-no {
    background: #c62828;
}

.checkout-addon-phone-field {
    margin-top: 0.95rem;
    max-width: 20rem;
}

.checkout-addon-phone-field-row {
    align-items: flex-end;
    display: flex;
    gap: 0.65rem;
}

.checkout-addon-phone-field-row .checkout-addon-phone-flag {
    margin-bottom: 0.35rem;
}

.checkout-addon-phone-flag {
    border-radius: 2px;
    display: block;
    height: 14px;
    width: 20px;
}

.checkout-order-summary-primary-action {
    border-radius: var(--bs-radius-pill, 999px);
    font-weight: 700;
    min-height: 3rem;
    text-transform: none;
}

.seating-checkout-page .mud-stepper,
.seating-checkout-page .mud-stepper-content,
.seating-checkout-page .mud-stepper-panel,
.seating-checkout-page .mud-stepper-wrapper {
    max-width: none;
    width: 100%;
}

.seating-checkout-page .checkout-host-step-navigation {
    margin-top: 0.75rem;
}

@media (max-width: 991.98px) {
    .checkout-buyer-info-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-order-summary-sidebar {
        position: static;
    }

    .checkout-addon-toggle-group {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checkout-order-summary-primary-action.mud-button-filled-secondary {
    background-color: var(--bs-color-action-primary) !important;
    color: var(--bs-color-text-on-action-primary, #fff) !important;
}

.checkout-order-summary-primary-action.mud-button-filled-secondary:hover {
    background-color: var(--bs-color-action-primary-hover) !important;
}

.checkout-payment-section + .checkout-payment-section {
    border-top: 1px solid var(--seating-subtle-border, color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent));
    margin-top: 0.35rem;
    padding-top: 1.15rem;
}

.checkout-payment-section-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}

.checkout-payment-section-caption {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 68%, transparent);
    line-height: 1.45;
    margin-top: 0.35rem;
}

.checkout-payment-email-value {
    margin-top: 0.65rem;
}

.checkout-payment-method-panel {
    margin-top: 0.85rem;
}

.checkout-payment-redirect-hint {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 68%, transparent);
}

.checkout-status-page {
    background-color: var(--mud-palette-background);
}

.checkout-status-page-actions {
    margin-top: 0.35rem;
}

.checkout-status-page-secondary-action {
    font-weight: 600;
    text-transform: none;
}

.checkout-status-page-tip {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 68%, transparent);
    text-align: center;
}

.seating-checkout-reset-reservations-button {
    border-radius: var(--bs-radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
    min-height: 3rem;
    text-transform: uppercase;
}

.seating-checkout-price-chip-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.75rem 0.75rem 0.55rem;
}

.seating-checkout-price-chip {
    border-radius: 0.4rem;
    font-weight: 700;
}

.seating-checkout-map-frame {
    background: #11161f;
    border: 1px solid #E1E1E1;
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    min-height: 34rem;
    height: clamp(30rem, 62vh, 44rem);
    overflow: hidden;
    padding: 0;
}

.seating-checkout-map-frame .seat-map-viewer,
.seating-checkout-map-frame .seat-map-viewer-stretch,
.seating-checkout-map-frame .seat-map-canvas-shell {
    flex: 1;
    height: 100%;
    min-height: 0;
}

.seating-checkout-map-frame:focus-within {
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent);
}

.seating-checkout-focused-area-summary,
.seating-checkout-large-venue-panel {
    background: var(--seating-subtle-surface);
    border-color: var(--seating-subtle-border);
}

.seating-checkout-card {
    border-radius: 1rem;
}

.seating-checkout-ticket-card > .mud-typography-h6,
.seating-checkout-ticket-card > #selected-seats-panel-title {
    margin: 0;
}

.seating-checkout-summary-chip-row {
    display: flex;
    flex-wrap: wrap !important;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.seating-checkout-summary-chip-row .mud-chip {
    align-self: flex-start;
    border: 1px solid var(--seating-subtle-border);
    font-weight: 700;
    height: auto;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.7rem;
    white-space: normal;
}

.seating-checkout-summary-chip-row .mud-chip-content {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.seating-checkout-summary-chip-row .mud-chip.mud-chip-color-info {
    border-color: rgba(96, 165, 250, 0.26);
}

.seating-checkout-summary-chip-row .seating-checkout-capacity-chip {
    width: 100%;
}

.seating-checkout-summary-chip-row .seating-checkout-capacity-chip .mud-chip-content {
    width: 100%;
}

.seating-checkout-summary-chip-row .mud-chip.mud-chip-color-success {
    background: var(--mud-palette-secondary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 72%, transparent);
    color: var(--mud-palette-secondary-text) !important;
}

.seating-checkout-selection-summary-list {
    margin-top: 0.35rem;
    padding: 0;
}

.seating-checkout-order-summary-list {
    margin-top: 0.75rem;
}

.seating-checkout-order-summary-item + .seating-checkout-order-summary-item,
.seating-checkout-selection-summary-item + .seating-checkout-selection-summary-item {
    border-top: 1px solid var(--seating-subtle-border);
}

.seating-checkout-order-summary-line-row {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.seating-checkout-order-summary-line-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.seating-checkout-order-summary-line-title {
    font-weight: 700;
    line-height: 1.35;
}

.seating-checkout-order-summary-line-location {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent);
    line-height: 1.35;
}

.seating-checkout-order-summary-divider {
    margin: 1rem 0 0.75rem;
}

.seating-checkout-order-summary-totals {
    padding-top: 0.15rem;
}

.seating-checkout-order-summary-fee-icon {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
    font-size: 1rem;
}

.seating-checkout-order-summary-total-label,
.seating-checkout-order-summary-total-amount {
    font-weight: 700;
}

.seating-checkout-selection-summary-meta {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.seating-checkout-reservation-expiry {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 48%, transparent);
    border-radius: 0.75rem;
    display: flex;
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
}

.seating-checkout-reservation-expiry-label {
    color: var(--mud-palette-text-primary);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.25;
}

.seating-checkout-selection-summary-item {
    list-style: none;
}

.seating-checkout-order-summary-item {
    padding-top: 0;
}

.seating-checkout-selection-summary-content {
    gap: 0.35rem;
}

.seating-checkout-selection-summary-label {
    font-weight: 600;
    line-height: 1.35;
}

.seating-checkout-selection-summary-list .mud-list-item {
    align-items: flex-start;
}

.seating-checkout-selection-summary-meta {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-width: 0;
}

.seating-checkout-selection-summary-line {
    flex: 1;
    min-width: 0;
}

.seating-checkout-remove-reservation-button {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.seating-checkout-selection-summary-status,
.seating-checkout-selection-summary-line {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    line-height: 1.35;
}

.seating-checkout-selection-summary-resale.mud-typography-caption {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent);
}

.seating-checkout-selection-summary-item[data-seat-summary-pending="true"] .seating-checkout-selection-summary-line {
    opacity: 0.82;
}

.seating-checkout-map-first-hint-summary {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 88%, transparent);
    line-height: 1.5;
}

#selected-seats-accessibility-summary {
    line-height: 1.5;
}

.seating-checkout-seat-fallback-list {
    background: var(--seating-subtle-surface);
    border: 1px solid var(--seating-subtle-border);
    border-radius: 0.75rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.55rem;
}

.seating-checkout-seat-fallback-item {
    list-style: none;
}

.seating-checkout-seat-fallback-button {
    justify-content: flex-start;
    padding: 0.55rem 0.2rem;
    text-align: left;
    text-transform: none;
}

.seating-checkout-seat-fallback-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-secondary) 90%, transparent);
    outline-offset: 2px;
}

.seating-checkout-active-panel-stack {
    gap: 0.65rem;
}

.seating-checkout-active-panel-stack > .mud-typography-subtitle2:first-child {
    letter-spacing: 0.01em;
    font-weight: 700;
}

.seating-checkout-active-panel-stack :where(
    [data-testid="pending-seat-selection-summary"],
    [data-testid="pending-standing-selection-summary"],
    [data-testid="seat-fallback-summary"],
    #active-selection-panel-guidance
) {
    background: var(--seating-subtle-surface);
    border: 1px solid var(--seating-subtle-border);
    border-radius: 0.75rem;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
}

.seating-checkout-active-panel-stack .mud-button-root {
    text-transform: none;
}

.seating-checkout-swatch {
    align-items: center;
    border-radius: 0.45rem;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    width: 1.5rem;
}

.seating-checkout-ticket-cta-row {
    display: flex;
    padding-top: 0.1rem;
}

.seating-checkout-cta-button:not(:disabled) {
    background: var(--bs-color-action-primary) !important;
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-on-action-primary, #fff) !important;
    font-size: 1.15rem;
    font-weight: 700;
    min-height: 3.65rem;
    min-width: 100%;
    padding: 0.45rem 1.7rem;
    text-transform: none;
}

.seating-checkout-cta-button:not(:disabled):hover {
    background: var(--bs-color-action-primary-hover) !important;
}

.seating-checkout-cta-button:disabled {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-action-disabled) !important;
}

.seating-checkout-best-available-button {
    transition: box-shadow 120ms ease, outline-color 120ms ease;
}

.seating-checkout-best-available-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-secondary) 90%, transparent);
    outline-offset: 2px;
}

.seating-checkout-mobile-sticky-shell {
    display: none;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .seating-checkout-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
    }

    .seating-checkout-map-legend {
        max-width: 16rem;
    }
}

@media (max-width: 640px) {
    .seating-checkout-main-column {
        padding: 0;
    }

    .seating-checkout-workspace {
        grid-template-columns: 1fr;
    }

    .seating-checkout-map-section,
    .seating-checkout-ticket-column {
        grid-column: 1;
        grid-row: auto;
    }

    .seating-checkout-map-legend {
        max-width: none;
    }

    .seating-checkout-map-frame {
        min-height: 26rem;
        height: 60vh;
    }

    .seating-checkout-cta-button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .seating-checkout-page {
        padding-bottom: 7.5rem;
        padding-top: 0.75rem;
    }

    .seating-checkout-ticket-cta-row {
        display: none;
    }

    .seating-checkout-intro-title {
        font-size: 2rem;
    }

    .seating-checkout-map-frame {
        min-height: 22rem;
        height: 52vh;
    }

    .seating-checkout-description {
        font-size: 1rem;
    }

    .seating-checkout-mobile-sticky-shell {
        align-items: center;
        backdrop-filter: blur(12px);
        background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
        border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
        bottom: 0;
        box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
        display: flex;
        justify-content: flex-end;
        left: 0;
        padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
        position: sticky;
        right: 0;
        z-index: 20;
    }

    .seating-checkout-mobile-sticky-button {
        background-color: var(--bs-color-action-primary) !important;
        border-radius: var(--bs-radius-pill);
        color: var(--bs-color-text-on-action-primary, #fff) !important;
        flex-shrink: 0;
        min-width: 9rem;
        text-transform: none;
    }
}

/* The single definition of a section header. It used to live here *and* be redeclared inside
   HomeCategoryTiles/HomeCityCards scoped CSS, where the copies added a font-size the global rule
   lacked — which is why "Kategorier" and "Events i din by" rendered at 32px while "Udvalgte
   events" and "Kommende events" sat at 21px. One definition, one size.

   Named for the frontpage, where it started; the events list uses it too, so its result grid gets
   the heading treatment the frontpage rows have. */

.home-section-header {
    align-items: center;
    display: flex;
    gap: var(--bs-space-4);
    justify-content: space-between;
    margin-bottom: var(--bs-space-4);
}

.home-section-title {
    color: var(--bs-color-text-primary);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    margin: 0;
}

.home-section-link {
    align-items: center;
    color: var(--bs-color-text-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    gap: var(--bs-space-1);
    text-decoration: none;
}

.home-section-link:hover {
    text-decoration: underline;
}

.home-section-link:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* One size for every "Se alle"/"Læs mere" arrow. Sized in em off the link's own text so the
   arrow reads as part of the label instead of competing with it. Two classes, so this beats
   MudBlazor's own .mud-icon-size-* font-size. */
.home-section-link .mud-icon-root,
.home-marketing-card-link .mud-icon-root {
    font-size: 1.1em;
}