/* ==========================================================================
   event_register.css — offentlig påmeldingsside (event_register.php)
   Bygger på landing.css (navbar, bakgrunn, fade-up, neon-power-on) og
   events.css (salkart). Retning A «subtil polish».
   ========================================================================== */

.event-register-body {
    padding-bottom: 180px; /* God plass til handlekurv-panelet */
    display: block; /* Overstyrer landing-body sin flex-column — cart-panel er fixed */
}

/* --- 70/30-layout --- */
.register-layout {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    align-items: flex-start;
}
.map-section {
    flex: 1;
    min-width: 0;
}

/* --- Info-sidebar (glassmorphism + tenneffekt, som login-boksen) --- */
.info-sidebar {
    width: 350px;
    flex-shrink: 0;
    position: sticky;
    top: 30px;
    background: rgba(var(--card-bg-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.8);
    overflow: hidden;
    box-shadow:
        0 0 20px rgba(var(--brand-primary-rgb), 0.30),
        0 0 50px rgba(var(--brand-primary-rgb), 0.18);
}
/* Banner-ramma er 1,91:1 (som og:image), ikke fast høyde: sidebaren er 350 px på desktop men full
   bredde på mobil/nettbrett, og en fast høyde ga opp mot 5:1 der — logoene i kanten forsvant.
   Et 1,91:1-bilde vises nå helt på alle bredder (ADR-0071 steg 0). */
.info-banner {
    aspect-ratio: 1.91 / 1;
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--brand-primary);
}
.info-content { padding: 30px; }
.info-content h1 {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--brand-primary);
    font-size: 1.8em;
    text-transform: uppercase;
}
.org-badge {
    display: inline-block;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75em;
    margin-bottom: 15px;
}
.event-times {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
}
.event-times strong {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    display: block;
}
.event-times i { color: var(--brand-primary); width: 20px; }
.event-address {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.event-address-label {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 6px;
}
.event-address-label i { color: var(--brand-primary); width: 20px; }
.event-address-line { color: var(--text-main); }
.event-address-directions {
    color: var(--text-muted);
    font-size: 0.85em;
    font-style: italic;
    margin-top: 4px;
}
.event-address-directions i { color: var(--brand-primary); }
.event-address-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85em;
    border: 1px solid var(--brand-primary);
    padding: 6px 12px;
    border-radius: 6px;
    transition: 0.2s;
}
.event-address-map:hover { background: var(--brand-primary); color: var(--bg-main); }
.welcome-quote {
    border-left: 3px solid var(--brand-primary);
    padding-left: 15px;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 20px;
}
/* Konkurranser på salgssiden (ADR-0029 flate 3).
   Speiler `.event-address` sitt uttrykk — samme slags «fakta om arrangementet»-blokk,
   ikke en reklamekasse. Alle farger fra Theme Engine. */
.event-compos {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.event-compos-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: var(--brand-primary);
    margin-bottom: 10px;
}
.event-compos-list { list-style: none; margin: 0; padding: 0; }
.event-compos-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}
.event-compos-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* «Flere kan komme til» (ROADMAP 1.4). Dempet med vilje: den er en fotnote til lista, ikke
   et punkt i den — derfor over linja, mindre skrift og `--text-muted`. Blir den like tung
   som konkurransenavnene, konkurrerer et løfte om framtid med det som faktisk finnes. */
.event-compos-more {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8em;
    line-height: 1.45;
    color: var(--text-muted);
}
.event-compos-more i {
    color: var(--brand-primary);
    margin-right: 5px;
}

.compo-name {
    display: block;
    color: var(--text-main);
    font-weight: bold;
    font-size: 0.95em;
    line-height: 1.35;
}
.compo-kind {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-primary);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: 4px;
    padding: 1px 7px;
}
.compo-blurb {
    display: block;
    margin-top: 5px;
    font-size: 0.82em;
    line-height: 1.4;
    color: var(--text-muted);
}

.sidebar-hint {
    color: var(--text-muted);
    font-size: 0.85em;
    text-align: center;
    border-top: 1px dashed rgba(var(--brand-primary-rgb), 0.3);
    padding-top: 20px;
    margin-top: 10px;
}
.sidebar-hint i { color: var(--brand-primary); }

@media (max-width: 999px) {
    .register-layout { flex-direction: column; }
    .info-sidebar { width: 100%; position: relative; top: 0; order: -1; }
    .map-section { width: 100%; order: 1; }
}

/* --- Mobil-snarvei: diskré «hopp ned til påmelding»-knapp. Skjult på desktop;
   på mobil ligger info øverst (order:-1), så denne sender deg forbi teksten. --- */
.mobile-jump-hint { display: none; }
@media (max-width: 999px) {
    .mobile-jump-hint {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* Nærmere navnet (h1 har 20px margin-bottom), mer luft ned til tidene. */
        margin-top: -8px;
        margin-bottom: 22px;
        padding: 8px 16px;
        border: 1px solid rgba(var(--brand-primary-rgb), 0.5);
        border-radius: 20px;
        background: rgba(var(--brand-primary-rgb), 0.06);
        color: var(--brand-primary);
        font-family: inherit;
        font-size: 0.8em;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .mobile-jump-hint:hover,
    .mobile-jump-hint:active { background: rgba(var(--brand-primary-rgb), 0.15); }
    .mobile-jump-hint i { color: var(--brand-primary); }
    #register-action { scroll-margin-top: 16px; }
}

/* --- Salkart-boksen: glassmorphism + neon-ring (matcher info-sidebaren).
   Scopet til .event-register-body — backstage (events.css) påvirkes ikke.
   Sete-fargene er bevisst URØRT (de er riktige per behov). --- */
.event-register-body .seating-wrapper {
    background: rgba(var(--card-bg-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.8);
    border-radius: 16px;
    box-shadow:
        0 0 20px rgba(var(--brand-primary-rgb), 0.30),
        0 0 50px rgba(var(--brand-primary-rgb), 0.18);
}
.event-register-body .legend-box {
    background: rgba(var(--card-bg-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 12px;
}

/* --- Salkartet på mobil (≤999px, samme bruddpunkt som layouten over) — kart-delen av ADR-0064.
   Deltakeren har ingen benk og ingen skuff; handlekurven er alt et fast panel. Det som er likt
   backstage: setene ruller under en HARD kant, radetikettene er en frossen kolonne, ingen fade.
   Etikettene tas ut av flyten med position:absolute + top:auto (naturlig høyde i raden) og `left`
   målt mot .seating-map-container. ⚠️ Glass-effekten (backdrop-filter) flyttes fra scroll-boksen
   til beholderen: backdrop-filter lager en containing block for posisjonerte etterkommere, og
   på scroll-boksen ville den festet etikettene til det som ruller — og klippet dem.
   44 px seter, ikke 40 som backstage: førstegangsbrukere på egen telefon, og setevalget er hele
   handlingen på sida. --- */
.kart-hint { display: none; }
@media (max-width: 999px) {
    .event-register-body .seating-map-container {
        position: relative;
        padding: 12px 0;
        background: rgba(var(--card-bg-rgb), 0.5);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(var(--brand-primary-rgb), 0.8);
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.30), 0 0 50px rgba(var(--brand-primary-rgb), 0.18);
    }
    .event-register-body .seating-wrapper {
        width: auto; margin-left: 64px; padding: 0 !important;
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .event-register-body .seating-grid { gap: 6px; padding: 6px 12px 2px 8px; } /* 8 px venstre: sete 1 skal stå fritt fra den harde kanten i startposisjon */
    .event-register-body .seat-row { gap: 6px; }
    .event-register-body .row-label {
        position: absolute; left: 0; top: auto; width: 64px; height: 44px; margin: 0;
        padding: 0 6px 0 12px; box-sizing: border-box; display: flex; align-items: center;
        text-align: left; font-size: 0.72em; letter-spacing: 0.5px; white-space: nowrap;
        border-right: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    }
    .event-register-body .seat { width: 44px; height: 44px; font-size: 0.9em; border-radius: 7px; }
    .event-register-body .seat.available:hover { transform: none; } /* ingen hover-hopp på touch */
    /* Én linje over kartet: «10 rader · 20 seter per rad · dra sidelengs» — kort nok til 375 px
       også med tosifrede tall (skjemaets standard er 10×20). Skjult på desktop der hele kartet synes. */
    .kart-hint {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin: 0 0 10px; font-size: 0.82em; color: var(--text-muted); white-space: nowrap;
    }
    .kart-hint i { color: var(--brand-primary); }
}

/* --- Salkart: hover/valg-tilstander --- */
.seat { transition: 0.2s transform, 0.2s border-color, 0.2s box-shadow; }
.seat.available:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.5);
    transform: scale(1.1);
    cursor: pointer;
}
.seat.selected {
    background: var(--brand-primary);
    color: var(--bg-main);
    border-color: var(--text-main);
    box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.8);
    transform: scale(1.1);
}
.seat.locked {
    background: var(--brand-purple, var(--purple));
    color: var(--text-main);
    border-color: var(--text-main);
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- «Salg stengt» / «Åpen inngang» --- */
.closed-box {
    text-align: center;
    padding: 60px 20px;
    background: rgba(var(--card-bg-rgb), 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px dashed var(--status-warning);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    box-sizing: border-box;
}
.closed-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 170, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border: 2px solid var(--status-warning);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.3);
}
.closed-icon i { color: var(--status-warning); }
.closed-box h2 {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: var(--status-warning);
    margin: 0 0 15px;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.closed-box p { color: var(--text-muted); font-size: 1.1em; max-width: 400px; line-height: 1.6; margin: 0; }
.closed-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    width: 100%;
    max-width: 300px;
}
.open-entry-box {
    text-align: center;
    padding: 50px;
    background: rgba(var(--card-bg-rgb), 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px dashed var(--brand-primary);
}
/* Kun hero-ikonet (direkte barn) — ikke ikoner nøstet i knapper/labels inni boksen */
.open-entry-box > i { color: var(--brand-primary); margin-bottom: 20px; }
.open-entry-box p { color: var(--text-muted); }

/* Plasstaket (events.capacity). Nøytral så lenge det er god plass; `.er-stram` slår inn
   først under terskelen i EventKapasitet, så knappheten betyr noe når den vises. */
/* `display: flex` + `width: fit-content` + auto-marger: pillen hugger fortsatt teksten sin,
   men er BLOKK-nivå og får sin egen linje. `inline-flex` gjorde den inline-nivå, så den fløt
   sammen med det neste elementet — og når `max_tickets_per_user = 1` skjules antall-velgeren,
   er det neste elementet «Meld meg på»-knappen. Da sto taket ved siden av knappen i stedet for
   over den (Morten, prod 2026-09-08). Feilen var usynlig lokalt fordi testeventet hadde maks
   > 1: den blokk-nivå antall-velgeren sto imellom og skjulte den. */
.kapasitet-linje {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    /* Samme vertikale rytme som `.seatless-qty` (25px): pillen skal ha luft på BEGGE sider.
       Med `margin-bottom: 0` klistret den seg til «Meld meg på» når antall-velgeren er skjult
       (maks = 1) — da er knappen nabo. Der velgeren finnes, kollapser disse 25px mot dens
       egne 25px topp, så avstanden blir den samme i begge greinene. */
    margin: 25px auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(var(--card-bg-rgb), 0.5);
    font-size: 0.9em;
}
/* Kanten bærer status-fargen, TEKSTEN bærer blekk-fargen: `--status-warning` er ment for
   flater og kanter, og er i lyst tema #dd6b20 — for lys som tekst. `--ink-warning` (#9a4a08)
   finnes nettopp til dette (Copilot på PR #318). Samme deling som `.dw-kapasitet`. */
.open-entry-box p.kapasitet-linje.er-stram {
    border-color: var(--status-warning);
    color: var(--ink-warning);
    font-weight: bold;
}
.kapasitet-linje.er-stram i { color: var(--ink-warning); }

/* --- Seteløs påmelding: antall-velger + CTA --- */
.seatless-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 25px 0;
}
.seatless-qty label {
    font-size: 0.8em;
    color: var(--brand-primary);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
.qty-stepper {
    display: flex;
    align-items: center;
    gap: 20px;
}
.qty-stepper button {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--brand-primary);
    background: transparent;
    color: var(--brand-primary);
    font-size: 1em;
    cursor: pointer;
    transition: 0.2s;
}
.qty-stepper button:hover { background: var(--brand-primary); color: #000; }
.qty-stepper #seatlessQtyDisplay {
    font-family: monospace;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--text-main);
    min-width: 40px;
    text-align: center;
}
.seatless-cta {
    max-width: 320px;
    margin: 10px auto 0;
    /* inline-flex, ikke flex: en <button> beholder fit-content-bredde, så margin:auto
       resolver til 0 (venstrestilt). Inline-nivå sentreres av text-align på .open-entry-box,
       mens flex sentrerer ikon + tekst inni knappen. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- Kvittering etter fullført bestilling (rendres av event_register_logic.js) --- */
.order-confirmation {
    background: rgba(var(--card-bg-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--status-success);
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.20), 0 0 50px rgba(0, 255, 0, 0.10);
    padding: 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    animation: landing-fade-up 0.6s ease both;
}
.order-confirmation > i { color: var(--status-success); margin-bottom: 20px; }
.order-confirmation h2 {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--status-success);
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.order-codes {
    background: var(--bg-main);
    padding: 25px;
    font-family: monospace;
    color: var(--brand-primary);
    display: inline-block;
    text-align: left;
    margin: 20px auto;
    border-radius: 8px;
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--brand-primary-rgb), 0.12);
    max-width: 100%;
    overflow-x: auto;
}
.order-code-row { margin-bottom: 10px; }
.order-code-row:last-child { margin-bottom: 0; }
.order-code-row span { color: var(--text-main); }
.order-code-row b { letter-spacing: 2px; font-size: 1.2em; }
.order-email-note { color: var(--text-muted); font-size: 0.9em; }
.order-home-link {
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
    line-height: 50px;
}

/* --- Kvittering: «På e-post får du nå» + verdiboks (ROADMAP 2.11 fase 2, ADR-0029) --- */

.order-inbox {
    text-align: left;
    max-width: 420px;
    margin: 0 auto 22px;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(var(--card-bg-rgb), 0.45);
}
.order-inbox h4 {
    margin: 0 0 8px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.order-inbox ul { margin: 0; padding: 0; list-style: none; }
.order-inbox li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: var(--text-main);
}
.order-inbox li:last-child { margin-bottom: 0; }
.order-inbox li::before { content: "→"; position: absolute; left: 0; color: var(--text-muted); }

.order-value {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 10px 10px 0;
    background: rgba(var(--card-bg-rgb), 0.6);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.order-value h4 {
    margin: 0;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
}
.order-value ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.order-value li {
    position: relative;
    padding-left: 20px;
    font-size: 0.92em;
    line-height: 1.45;
    color: var(--text-main);
}
.order-value li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
}

/* Frittstående, IKKE bygget på `.btn-checkout`.
   `.btn-checkout` er handlekurvens knapp: `height: 50px` + `padding: 0 25px` + `white-space:
   nowrap`. Alt dette slåss mot en knapp hvis tekst varierer med arrangementet — den faste
   høyden gjorde at teksten la seg i toppen i stedet for å sentreres, og nowrap klippet den
   lange varianten.

   Speiler i stedet `.login-box button` i landing.css: det er nøyaktig knappen brukeren møter
   i neste steg på account_invite.php («Lag konto & koble billett»). Samme font, samme
   sperring, samme radius — så de to stegene leses som ett system. */
.order-value-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background: var(--brand-primary);
    color: var(--bg-main);
    border: none;
    border-radius: 8px;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.order-value-cta:hover {
    background: var(--text-main);
    box-shadow: 0 0 18px rgba(var(--brand-primary-rgb), 0.7);
}
.order-value-multi {
    margin: 0;
    font-size: 0.88em;
    color: var(--text-muted);
    line-height: 1.45;
}
.order-value-read {
    display: block;
    text-align: center;
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 0.88em;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.order-value-read:hover { border-color: var(--brand-primary); }

/* Den ærlige utgangen (ADR-0029). Dempet, men fullt klikkbar — den skal være lett å
   finne for den som har bestemt seg, uten å konkurrere med hovedhandlingen. */
.order-value-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.84em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px;
}
.order-value-skip:hover { color: var(--text-main); }
.order-value-skip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 4px; }

.order-value-done { margin: 0; color: var(--text-muted); font-size: 0.92em; text-align: center; }
.order-value-done i { color: var(--status-success); }

/* --- Handlekurv-panel (fast bunn) --- */
.cart-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 20, 25, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--brand-primary);
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 -1px 18px rgba(var(--brand-primary-rgb), 0.18);
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cart-panel.active { transform: translateY(0); }
.cart-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cart-seats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-grow: 1;
    margin-top: 5px;
}
.cart-seat-badge {
    background: rgba(var(--brand-primary-rgb), 0.1);
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-seat-badge i {
    cursor: pointer;
    color: var(--status-danger);
    transition: 0.2s;
}
.cart-seat-badge i:hover { transform: scale(1.2); }
.cart-form { display: flex; gap: 10px; align-items: stretch; }
.cart-input {
    flex: 1 1 250px;
    min-width: 250px;
    height: 50px;
    padding: 0 15px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 1em;
    font-family: inherit;
    line-height: 50px;
    outline: none;
    transition: 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.cart-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.25);
}
.btn-checkout {
    height: 50px;
    background: var(--brand-primary);
    color: var(--bg-main);
    font-weight: bold;
    padding: 0 25px;
    margin: 0;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.1em;
    letter-spacing: 1px;
    transition: 0.2s;
    white-space: nowrap;
    box-sizing: border-box;
}
.btn-checkout:hover {
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.7);
    background: var(--text-main);
}
.btn-checkout:disabled {
    background: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Kasse-sidepanel --- */
#panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 9998;
}
#panel-backdrop.active { display: block; }
.side-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 100%;
    max-width: 450px;
    height: 100dvh;
    background: rgba(15, 20, 25, 0.98);
    border-left: 2px solid var(--brand-primary);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.side-panel.open { right: 0; }
.side-panel h2 { font-family: 'Rajdhani', 'Segoe UI', sans-serif; font-weight: 700; }

/* --- Wizard-animasjoner (kjører ved stegbytte, ikke evig) --- */
@keyframes stepForward {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepBackward {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
.anim-step-forward { animation: stepForward 0.3s ease-out forwards; }
.anim-step-backward { animation: stepBackward 0.3s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
    .info-sidebar { animation: none; }
    .anim-step-forward, .anim-step-backward { animation: none; }
    .cart-panel, .side-panel, .seat { transition: none; }
}

@media (max-width: 800px) {
    .event-register-body { padding-bottom: 350px; } /* Sikrer scroll helt i bunn på mobil */
    .cart-container { flex-direction: column; align-items: stretch; }
    .cart-form { flex-direction: column; align-items: stretch; }
    .cart-input { flex: 1 1 auto; width: 100%; min-width: 100%; box-sizing: border-box; }
}

/* ── Innlogget kjøp (ADR-0028) ────────────────────────────────────────────────
   Vises kun når kjøperen er innlogget i EVENTETS org. Avkrysningen skjules av JS
   når ordren har mer enn én billett — da tas valget på «Billettene mine». */
.buyer-loggedin {
    background: rgba(var(--brand-primary-rgb), 0.07);
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 15px;
}
.buyer-loggedin-who {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--text-muted);
}
.buyer-loggedin-who i { color: var(--brand-primary); margin-right: 6px; }
.buyer-loggedin-who strong { color: var(--text-main); }

.buyer-claim-own {
    /* Kassen har en global `label { text-transform: uppercase }` for felt-etiketter.
       Denne etiketten er en hel setning, ikke en feltoverskrift — versaler gjør den
       ropende og tyngre å lese. Nullstilles derfor eksplisitt. */
    text-transform: none;
    display: flex;              /* JS bytter mellom flex og none */
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--text-main);
}
.buyer-claim-own input { margin-top: 3px; flex-shrink: 0; }

/* ── Reservasjonskoden (ADR-0039) — diskré verktøylinje over kartet ────────
   Ingen egen boks: raden skal leses som et verktøy på kartlinja, ikke som et
   banner. Vises kun når eventet har ubrukte holdte plasser (server-side).
   NB: events.css setter margin-bottom på alle inputs globalt — nullstilles her,
   ellers kommer felt og knapp ut av vater. */
.res-code-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}
.res-code-row label {
    color: var(--text-muted);
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
.res-code-row label i { color: rgba(var(--brand-primary-rgb), 0.7); margin-right: 4px; }
.res-code-row input {
    width: 160px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    background: rgba(var(--card-bg-rgb), 0.5);
    color: var(--text-main);
    font-size: 0.9em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.res-code-row input:focus {
    outline: none;
    background: var(--bg-main);
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.25);
}
.res-code-row button {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: 8px;
    background: transparent;
    color: var(--brand-primary);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.res-code-row button:hover {
    background: rgba(var(--brand-primary-rgb), 0.12);
    box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), 0.35);
}
.res-code-row button:disabled { opacity: 0.5; cursor: wait; }
.res-code-msg { color: var(--status-danger); font-size: 0.82em; }
.res-code-msg:empty { display: none; }

/* Opplåst tilstand: en stille pill på samme plass — «du er inne». */
.res-code-active {
    color: var(--text-muted);
    font-size: 0.9em;
    padding: 7px 14px;
    width: fit-content;
    margin-left: auto;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 20px;
    background: rgba(var(--card-bg-rgb), 0.5);
}
.res-code-active i { color: var(--brand-primary); }
.res-code-active strong { color: var(--brand-primary); }

.res-mine {
    /* Sesjonens opplåste holdte sete: klikkbart som et ledig sete, men merket som ditt. */
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), 0.6);
    color: var(--brand-primary);
    font-weight: bold;
}