/*
    SKYBERT FLYBUSS — BOOKINGSIDA
    ═══════════════════════════════════════════════════════════════════════

    Fargene er hentet ut av plakaten, ikke gjettet:

        #001840   nattblå — stripa nederst og skriften i overskriften
        #0054f0   Skybert-blå — ordet FLYBUSS
        #0078f0   lysere blå — gjenskinnet fra bussen
        #f8b868   gull — ordet FLYBUSS i stripa, og solnedgangen
        #fcf0c0   solnedgangen selv
        #fce4c0   varm krem — lyset i terminalbygget

    ── BILDENE KOMMER FRA OPPSETTET, IKKE HERFRA ─────────────────────────

    Tre bilder, ett per skjermslag:

        under 700 px    smal, står bak innholdet i full høyde
        700–1099 px     midt, bak et kort midt på
        1100 px og opp  brei, i sin egen spalte ved siden av skjemaet

    Et liggende bilde strukket over en telefon i stående format blir zoomet
    så hardt at bare en stripe står igjen. Derfor tre, og hver bredde
    laster bare sitt eget.

    HVILKE bilder står ikke her. De settes i
    `backend/admin/side-oppsett.php` og hentes av flybuss.js, som skriver
    dem inn i `--bilde-smal`, `--bilde-midt` og `--bilde-brei`.

    Sto filnavnene her, måtte en ny pakke bygges og lastes opp for å bytte
    en bakgrunn — og et bilde er nettopp det som skal kunne byttes uten at
    noen rører kode.

    Verdiene i `url(...)` under er reserven: det sida viser mens oppsettet
    hentes, og hvis det ikke lar seg hente. En bookingside som nekter å
    tegne seg fordi en bakgrunn mangler, er en verre feil enn den den
    melder.
    ═══════════════════════════════════════════════════════════════════════ */

:root {
    --natt:   #001840;
    --dypere: #000c26;
    --sky:    #0054f0;
    --lys:    #0078f0;
    --gull:   #f8b868;
    --sol:    #fcf0c0;
    --krem:   #fce4c0;

    --flate:  rgba(255, 255, 255, .94);
    --kant:   rgba(0, 24, 64, .12);
    --blekk:  #0b1a2e;
    --demp:   #4a5a72;

    --god:    #1b7a52;
    --vond:   #a8341f;

    --display: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
    --brod:    'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --rund:   16px;
    --skygge: 0 18px 50px -18px rgba(0, 12, 38, .55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--dypere);
    color: var(--blekk);
    font: 16px/1.55 var(--brod);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── Bakteppet ─────────────────────────────────────────────────────── */

.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--dypere) center top / cover no-repeat;
    background-image: var(--bilde-smal, url('flybuss-smal.jpg'));
}

/*
    Sløret.

    Plakaten er lys og full av detaljer, og hvit tekst over den er ikke
    lesbar noe sted. Sløret legger seg under innholdet og over bildet —
    mørkest der teksten står tettest.
*/
.scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 12, 38, .56) 0%,
            rgba(0, 12, 38, .70) 42%,
            rgba(0, 12, 38, .90) 100%);
}

/* ── Rammen ────────────────────────────────────────────────────────── */

.ramme {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 18px 72px;
}

/* ── Toppen ────────────────────────────────────────────────────────── */

.topp { text-align: center; margin-bottom: 26px; }

.merke {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(34px, 9vw, 52px);
    line-height: .95;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0;
    text-shadow: 0 3px 18px rgba(0, 12, 38, .8);
    text-wrap: balance;
}

.merke #uthevet { display: block; color: var(--gull); }
.merke #tittel[hidden], .merke #uthevet[hidden] { display: none; }

/* Det lille ordet over overskriften, når oppsettet har satt et. */
.merke-lite {
    margin: 0 0 4px;
    font-family: var(--brod);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--krem);
    text-shadow: 0 2px 10px rgba(0, 12, 38, .9);
}

.slagord {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--krem);
    text-shadow: 0 2px 10px rgba(0, 12, 38, .9);
}

/* ── Stegene ───────────────────────────────────────────────────────── */

.steg {
    background: var(--flate);
    border-radius: var(--rund);
    box-shadow: var(--skygge);
    padding: 20px;
    margin-bottom: 14px;
    animation: opp .38s cubic-bezier(.2, .8, .3, 1) both;
}

.steg[hidden] { display: none; }

@keyframes opp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .steg { animation: none; }
    * { transition-duration: .01ms !important; }
}

.steg > h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    margin: 0 0 4px;
    color: var(--natt);
}

.steg > .under {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--demp);
}

/* ── Valgkort ──────────────────────────────────────────────────────── */

.valg { display: grid; gap: 10px; }

/*
    To i bredden er trangt paa en telefon: «Til flyplassen» brakk over
    tre linjer. Under 430 px staar de under hverandre.
*/
.valg.to { grid-template-columns: 1fr 1fr; }

@media (max-width: 430px) {
    .valg.to { grid-template-columns: 1fr; }
}

.kort {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--kant);
    border-radius: 13px;
    padding: 14px 15px;
    color: var(--blekk);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color .16s, background .16s, transform .12s;
}

.kort:hover { border-color: var(--lys); transform: translateY(-1px); }
.kort:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

.kort[aria-pressed="true"] {
    border-color: var(--sky);
    background: linear-gradient(180deg, #f2f7ff, #e8f1ff);
}

.kort .ikon { font-size: 24px; line-height: 1; }
.kort .tittel { font-weight: 800; font-family: var(--display); font-size: 17px; }
.kort .bi { display: block; font-size: 13px; color: var(--demp); font-weight: 400; }

/* ── Bussen du har valgt, sammenklappet ────────────────────────────── */

.valgt-buss {
    appearance: none;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    background: #f4f8ff;
    border: 2px solid var(--kant);
    border-radius: 13px;
    padding: 12px 14px;
    color: var(--blekk);
    font: inherit;
    transition: border-color .16s, background .16s;
}

.valgt-buss[hidden] { display: none; }
.valgt-buss:hover { border-color: var(--lys); background: #eef4ff; }
.valgt-buss:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

.vb-kode {
    font-family: var(--display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .06em;
    color: #fff;
    background: var(--natt);
    border-radius: 7px;
    padding: 3px 9px;
    flex: none;
}

.vb-kode[hidden] { display: none; }

.vb-tekst { flex: 1; min-width: 0; }
.vb-tekst strong { display: block; font-family: var(--display); font-size: 17px; }
.vb-tekst small { display: block; font-size: 13px; color: var(--demp); }

.vb-bytt {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    color: var(--sky);
}

#ruteAapen[hidden] { display: none; }

/* ── Flyplassene ───────────────────────────────────────────────────── */

.finn-meg {
    appearance: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 14px;
    border: 2px solid var(--kant);
    border-radius: 12px;
    padding: 12px;
    font: 700 15px var(--brod);
    color: var(--natt);
    background: #fff;
    transition: border-color .16s, background .16s;
}

.finn-meg:hover { border-color: var(--lys); background: #f4f8ff; }
.finn-meg:disabled { opacity: .55; cursor: default; }
.finn-meg:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

.hvor {
    background: #eef3fb;
    border-left: 4px solid var(--sky);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--blekk);
}

.flyplass { margin-bottom: 14px; }
.flyplass:last-child { margin-bottom: 0; }

.flyplass-hode {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 2px 7px;
}

/*
    Koden er det kunden kjenner fra billetten sin. Derfor står den først,
    og den står tydelig — navnet er forklaringen, ikke omvendt.
*/
.flyplass-hode .kode {
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--flate);
    background: var(--natt);
    border-radius: 7px;
    padding: 2px 9px;
}

.flyplass-hode .fnavn {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--natt);
}

/*
    Linja som sier hvilken flyplass bussen går til.

    Den står i steget der kunden velger stoppet sitt, ikke i toppen:
    det er DER spørsmålet «hvor skal jeg på?» stilles, og svaret gir
    bare mening når man vet hvor bussen ender.
*/
.flyplass-linje {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 13px;
    border-radius: 11px;
    background: #eef3fb;
    border-left: 4px solid var(--sky);
    font-size: 14.5px;
    color: var(--blekk);
}

.flyplass-linje[hidden] { display: none; }
.flyplass-linje strong { color: var(--natt); }

.flyplass-linje .kode {
    font-family: var(--display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .06em;
    color: #fff;
    background: var(--natt);
    border-radius: 6px;
    padding: 1px 8px;
}

/*
    Veien tilbake til flyplassene.

    Går kunden inn i én operatørs ruter, er dette veien ut. Den står også
    når lista er snevret inn av posisjonen — ellers ville den som lander et
    annet sted enn han står, vært fanget.
*/
.bytt-flyplass {
    appearance: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 12px;
    border: 2px solid var(--kant);
    border-radius: 11px;
    padding: 10px;
    font: 700 14px var(--brod);
    color: var(--natt);
    background: #fff;
    transition: border-color .16s, background .16s;
}

.bytt-flyplass:hover { border-color: var(--lys); background: #f4f8ff; }
.bytt-flyplass:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

/* Pila som sier at raden fører videre, ikke rett inn i en rute. */
.kort .videre {
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    color: var(--demp);
    font-weight: 700;
}

.flyplass .kort { margin-bottom: 8px; }
.flyplass .kort:last-child { margin-bottom: 0; }

/* ── Båndet: ruta som grafikk ──────────────────────────────────────── */

.baand {
    position: relative;
    margin: 4px -4px 0;
    border-radius: 13px;
    background:
        radial-gradient(120% 90% at 50% 0%, #073a8a 0%, #001840 62%, #000c26 100%);
    padding: 16px 10px 12px;
    overflow: hidden;
}

/* Et svakt gjenskinn, som lyset fra terminalen i plakaten. */
.baand::before {
    content: '';
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 140px;
    background: radial-gradient(60% 100% at 50% 100%,
        rgba(248, 184, 104, .35), transparent 70%);
    pointer-events: none;
}

.baand svg { display: block; width: 100%; height: auto; position: relative; }

.vei      { fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 5;
            stroke-linecap: round; }
.vei-lys  { fill: none; stroke: url(#glo); stroke-width: 5.5;
            stroke-linecap: round;
            transition: stroke-dashoffset .5s cubic-bezier(.3, .8, .3, 1),
                        stroke-dasharray .5s cubic-bezier(.3, .8, .3, 1); }

.node     { cursor: pointer; }
.node circle.ring { fill: #001840; stroke: rgba(255, 255, 255, .45);
                    stroke-width: 2.5; transition: stroke .2s, fill .2s; }
.node circle.kjerne { fill: rgba(255, 255, 255, .55); transition: fill .2s, r .2s; }
.node text { fill: #dce8fb; font: 700 14px var(--brod); }
.node .pris { fill: var(--gull); font: 800 15px var(--brod); }

.node:hover circle.ring { stroke: var(--gull); }
.node[aria-pressed="true"] circle.ring { stroke: var(--gull); fill: var(--gull); }
.node[aria-pressed="true"] circle.kjerne { fill: #001840; }
.node[aria-pressed="true"] text { fill: #fff; }

.node:focus-visible circle.ring { stroke: #fff; stroke-width: 4; }

.ende circle.ring { fill: var(--sky); stroke: #fff; }
.ende text { fill: #fff; font-weight: 800; }
.node text.endenavn { fill: #cfe2ff; font: 800 14px var(--brod); }

/*
    Ingen overgang her.

    Bussen flyttes med `requestAnimationFrame` langs banen. La CSS-en
    ogsaa faa lov til aa animere `transform`, interpolerte den i rett
    linje mellom to bilder — og bussen svevde ved siden av veien i stedet
    for aa foelge den. To som animerer det samme blir alltid feil.
*/
.buss { transition: none; }

.baand-bunn {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    padding: 0 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    position: relative;
}

.baand-bunn strong { color: var(--sol); font-size: 15px; }

/* ── Dato og avganger ──────────────────────────────────────────────── */

.linje { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

label.felt { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; }
label.felt > span { font-size: 13px; font-weight: 700; color: var(--demp); }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"] {
    font: inherit;
    color: var(--blekk);
    background: #fff;
    border: 2px solid var(--kant);
    border-radius: 11px;
    padding: 11px 12px;
    width: 100%;
    min-height: 46px;
}

input:focus { outline: none; border-color: var(--sky); }

.avganger { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.avgang {
    appearance: none;
    font: inherit;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--kant);
    border-radius: 12px;
    padding: 11px 12px;
    text-align: left;
    color: var(--blekk);
    transition: border-color .16s, background .16s;
}

.avgang:hover { border-color: var(--lys); }
.avgang:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

.avgang[aria-pressed="true"] {
    border-color: var(--sky);
    background: linear-gradient(180deg, #f2f7ff, #e8f1ff);
}

.avgang .klokke {
    font-family: var(--display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--natt);
}

.avgang .detalj { font-size: 12.5px; color: var(--demp); }

.alltid {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--god);
    background: #e4f4ec;
    border-radius: 99px;
    padding: 2px 8px;
}

/* ── Billettene ────────────────────────────────────────────────────── */

.billetter { display: grid; gap: 10px; }

.billett {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 2px solid var(--kant);
    border-radius: 12px;
    background: #fff;
}

.billett.har { border-color: var(--sky); background: #f6faff; }

.billett .navn { flex: 1; font-weight: 700; }
.billett .navn small { display: block; font-weight: 400; font-size: 12.5px; color: var(--demp); }
.billett .stk { font-variant-numeric: tabular-nums; color: var(--demp); font-size: 14px; }

.teller { display: flex; align-items: center; gap: 4px; }

.teller button {
    appearance: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 2px solid var(--kant);
    background: #fff;
    font: 800 20px/1 var(--display);
    color: var(--sky);
}

.teller button:disabled { opacity: .35; cursor: default; }
.teller button:not(:disabled):hover { border-color: var(--sky); background: #f2f7ff; }
.teller button:focus-visible { outline: 3px solid var(--lys); outline-offset: 2px; }

.teller output {
    min-width: 30px;
    text-align: center;
    font: 800 18px var(--display);
    font-variant-numeric: tabular-nums;
}

/* ── Summen ────────────────────────────────────────────────────────── */

.sum {
    margin-top: 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--natt), #073a8a);
    color: #fff;
    padding: 15px 17px;
}

.sum .rad {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
    font-variant-numeric: tabular-nums;
}

.sum .rad.rabatt { color: var(--sol); }

.sum .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.sum .total span { font-weight: 700; }

.sum .total strong {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    color: var(--sol);
    font-variant-numeric: tabular-nums;
}

/* ── Knappen ───────────────────────────────────────────────────────── */

.bestill {
    appearance: none;
    cursor: pointer;
    width: 100%;
    margin-top: 14px;
    border: 0;
    border-radius: 13px;
    padding: 16px;
    font: 800 19px var(--display);
    color: #fff;
    background: linear-gradient(135deg, var(--sky), var(--lys));
    box-shadow: 0 10px 26px -10px rgba(0, 84, 240, .85);
    transition: transform .12s, box-shadow .2s;
}

.bestill:not(:disabled):hover { transform: translateY(-2px); }
.bestill:disabled { opacity: .5; cursor: default; box-shadow: none; }
.bestill:focus-visible { outline: 3px solid var(--gull); outline-offset: 3px; }

/* ── Meldinger ─────────────────────────────────────────────────────── */

.melding {
    margin-top: 12px;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 14.5px;
    background: #fdecea;
    border-left: 4px solid var(--vond);
    color: var(--vond);
}

.venter { text-align: center; color: var(--demp); padding: 18px 0; font-size: 14.5px; }

/* ── Kvitteringen ──────────────────────────────────────────────────── */

.kvittering { text-align: center; padding: 30px 22px; }

.kvittering .haak {
    width: 62px; height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--god), #2fa878);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 32px;
}

.kvittering h2 { font-family: var(--display); font-size: 25px; margin: 0 0 6px; color: var(--natt); }

.ref {
    display: inline-block;
    margin: 12px 0 4px;
    font: 800 20px var(--display);
    letter-spacing: .06em;
    background: #f1f5fb;
    border: 2px dashed var(--kant);
    border-radius: 11px;
    padding: 9px 16px;
    color: var(--natt);
}

.oppsummering {
    margin: 18px auto 0;
    max-width: 380px;
    text-align: left;
    border-top: 1px solid var(--kant);
}

.oppsummering div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--kant);
    font-size: 14.5px;
}

.oppsummering div span:first-child { color: var(--demp); }
.oppsummering div span:last-child { font-weight: 700; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   NETTBRETT — plakaten bak et kort midt på
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
    /*
        Plakaten skyves ned.

        Sto den midtstilt, havnet dens eget «Skybert»-skilt rett bak
        overskriften vår, og ordet sto to ganger oppå hverandre.
    */
    .scene {
        background-image: var(--bilde-midt, url('flybuss-midt.jpg'));
        background-position: center 62%;
    }

    .ramme { max-width: 680px; padding: 40px 24px 80px; }

    .steg { padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SKRIVEBORD — plakaten får sin egen spalte

   Strukket over en bred skjerm ville overskriften og stripa nederst blitt
   klipt bort. Her står den hel i sin egen spalte, og skjemaet står i sin.

   To EKTE spalter, ikke et fast venstremarg. Med fast marg ble skjemaet
   stående 720 px bredt på en 2400 px skjerm, med et halvt tusen piksler
   tomt ved siden av. Nå vokser spalta med skjermen, og skjemaet står midt
   i sin egen.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {
    body {
        display: grid;
        grid-template-columns: minmax(380px, 42%) 1fr;
        background:
            radial-gradient(90% 70% at 80% 10%, #073a8a 0%, #001840 55%, #000c26 100%);
    }

    .scene {
        position: sticky;
        inset: auto;
        top: 0;
        height: 100vh;
        background-image: var(--bilde-brei, url('flybuss-brei.jpg'));
        background-position: center center;
    }

    .scene::after {
        background: linear-gradient(90deg,
            rgba(0, 12, 38, .30) 0%,
            rgba(0, 12, 38, .10) 45%,
            rgba(0, 12, 38, .50) 100%);
    }

    .ramme {
        max-width: 700px;
        margin: 0 auto;
        padding: 52px 40px 90px;
    }

    .topp { text-align: left; }
    .merke { font-size: 46px; }
    .merke span { display: inline; }

    .steg { padding: 26px 28px; }
}

/* Godt over tusen piksler til skjemaet: la plakaten få mer av skjermen. */
@media (min-width: 1700px) {
    body { grid-template-columns: minmax(380px, 46%) 1fr; }
    .ramme { max-width: 760px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMALE SKJERMER — billettraden brekkes

   Navn, pris og teller i én rad ble for trangt: navnet brakk over tre
   linjer og tallene klemte seg mot kanten. Prisen får sin egen linje
   under navnet, og telleren står hel til høyre.

   Denne står NEDERST i fila med vilje. Første forsøk la den oppe ved
   valgkortene, og da kom `.billett { display: flex }` etter den og vant
   — like sterk velger, men senere i fila.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 430px) {
    .billett {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 1px;
    }

    .billett .navn   { grid-area: 1 / 1; }
    .billett .stk    { grid-area: 2 / 1; font-weight: 700; color: var(--natt); }
    .billett .teller { grid-area: 1 / 2 / span 2 / auto; }
}