/*
 * KLAGESKJEMAET — det som er felles
 * ════════════════════════════════════════════════════════════════════════
 *
 * Feltene, knappene og kvitteringen ser like ut på pc og mobil. Det som
 * skiller sidene er hvordan de er satt opp — én spalte mot to, hvor stort
 * bildet får være, hvor mye luft det er.
 *
 * Det ligger i pc.css og mobil.css. Alt annet står her, én gang.
 */

:root {
    --blaa: #123a6b;
    --blaa-mork: #0c2949;
    --blaa-lys: #2f6fb5;
    --tekst: #16202b;
    --dempet: #5d6b7a;
    --kant: #d8e0e8;
    --feil: #a5231d;
    --ok: #17603a;
    --flate: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--tekst);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #eef2f6;
}

/*
 * KUNDESERVICE-BILDET, BAK HELE SIDA
 * ════════════════════════════════════════════════════════════════════
 *
 * Per-Arne, 24. september 2026: «så kan vi legge kunde service bildet
 * som bakgrunn».
 *
 * Bildet lå her fra før, men bare som et bånd øverst og under et teppe
 * på 78–88 % svart. Da var det ikke et bilde, det var en mørk stripe.
 * Resten av sida var flat grå.
 *
 * Nå står det bak hele sida, som på flybuss-, bedrifts- og
 * sjåførsidene: én fast flate, ett slør over, og kortene oppå.
 *
 * ── Tre utsnitt, ett ark ──────────────────────────────────────────
 *
 * Samme bilde skåret tre ganger, fordi ett utsnitt ikke kan være både
 * stående og bredt. Skiftene ligger på 700 og 1100 px, de samme som
 * resten av systemet bruker.
 *
 * `fixed` gjør at bildet står stille mens skjemaet ruller. Skjemaet er
 * langt, og et bilde som ruller med ville vært borte etter første kort.
 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--blaa-mork) center center / cover no-repeat;
    background-image: url('klage-smal.jpg');
}

@media (min-width: 700px) {
    body::before { background-image: url('klage-midt.jpg'); }
}

@media (min-width: 1100px) {
    body::before {
        background-image: url('klage-brei.jpg');

        /*
         * Forankret i toppen, ikke i midten.
         *
         * Sky-Router-merket staar oeverst paa veggen. Med `center` spiste
         * `cover` toppen av et breitt vindu, og merket ble halshugget
         * midt i ordet.
         */
        background-position: center top;
    }
}

/*
 * Sløret.
 *
 * Toppen er nesten tett med vilje. Sky-Router-merket står malt på
 * veggen der, og overskriften vår la seg rett oppå det — to merker i
 * samme flate, slik taxiskiltet la seg bak overskriften på sjåførdøra.
 *
 * Så bildet trer fram først ved 34 %, omtrent der det øverste kortet
 * begynner. Over det er flaten nesten ensfarget og teksten står rolig;
 * under det er kortene hvite med egen bakgrunn, og sløret trengs bare
 * for å holde bildet fra å slåss med skjemaet.
 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(10, 28, 48, .93) 0%,
        rgba(10, 28, 48, .90) 20%,
        rgba(10, 28, 48, .72) 34%,
        rgba(12, 30, 50, .88) 100%);
}

/*
 * Toppen.
 *
 * Den bærer ikke lenger sitt eget bilde — det står bak hele sida nå, se
 * `body::before`. Her er det bare teksten som skal leses, og den står
 * hvit mot sløret.
 */
.bakgrunn {
    position: relative;
    color: #fff;
}

/*
 * KORTENE SKAL LIGGE OVER TOPPEN, IKKE UNDER
 * ════════════════════════════════════════════════════════════════════
 *
 * Begge oppsettene trekker skjemaet opp i toppbildet — 54 px på pc,
 * 18 px på mobil — så det øverste kortet legger seg over nedre kant.
 * Det er med vilje; kanten skal ikke være en strek tvers over sida.
 *
 * Men `.bakgrunn` er `position: relative`, og `.ramme` var `static`.
 * Da maler nettleseren hele toppen i laget for POSISJONERTE elementer,
 * altså etter — og over — alt som ikke er posisjonert. Overlappen
 * havnet feil vei: 24. september 2026 sto overskriften «Hvor var
 * turen?» bak bildet og var ikke til å lese.
 *
 * Det holder å løfte ramma inn i samme lag. `z-index: 1` gjør ikke noe
 * annet enn å avgjøre denne ene rekkefølgen.
 */
.ramme {
    position: relative;
    z-index: 1;
}

.bakgrunn h1 {
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.bakgrunn .ingress {
    margin: 0;
    color: #cfdcea;
    max-width: 46em;
}

.merke {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9fbcdc;
    margin-bottom: 14px;
}

.merke img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

/* ── kortet med skjemaet ───────────────────────────────────────────── */
.kort {
    background: var(--flate);
    border: 1px solid var(--kant);
    border-radius: 14px;
    padding: 22px;
}

.kort h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.kort .hjelp {
    margin: 0 0 16px;
    color: var(--dempet);
    font-size: 14px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dempet);
    margin-bottom: 5px;
}

input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--kant);
    border-radius: 9px;
    font: inherit;
    background: #fff;
    color: var(--tekst);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blaa-lys);
    box-shadow: 0 0 0 3px rgba(47, 111, 181, .16);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

.felt { margin-bottom: 14px; }

.par {
    display: flex;
    gap: 12px;
}

.par > * { flex: 1 1 0; min-width: 0; }

/* ── vedlegg ───────────────────────────────────────────────────────── */
.slipp {
    border: 2px dashed var(--kant);
    border-radius: 11px;
    padding: 18px;
    text-align: center;
    color: var(--dempet);
    font-size: 14px;
    cursor: pointer;
}

.slipp:hover { border-color: var(--blaa-lys); background: #f7fafd; }
.slipp input { display: none; }

.fil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--kant);
    border-radius: 9px;
    margin-top: 8px;
    font-size: 14px;
}

.fil .filnavn {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fil .filstorrelse { color: var(--dempet); font-size: 13px; white-space: nowrap; }

.fil .filbort {
    border: none;
    background: none;
    color: var(--feil);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 5px;
}

/* ── knapp og svar ─────────────────────────────────────────────────── */
.send {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--blaa);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 17px;
    padding: 15px;
    cursor: pointer;
}

.send:hover { background: var(--blaa-mork); }
.send:disabled { background: #8a9bad; cursor: default; }

.svar {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    min-height: 20px;
}

.svar.feil { color: var(--feil); }
.svar.ok { color: var(--ok); }

.kvittering { text-align: center; padding: 26px 10px; }
.kvittering h2 { font-size: 22px; margin: 0 0 10px; }

.kvittering .ref {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--blaa);
    font-variant-numeric: tabular-nums;
    margin: 6px 0 14px;
}

.kvittering .liten { color: var(--dempet); font-size: 14px; }

/* ── bunn ──────────────────────────────────────────────────────────── */
.bunn {
    text-align: center;
    color: var(--dempet);
    font-size: 13px;
    padding: 22px 16px 40px;
}

.bunn a { color: var(--blaa); }

/* Står tom til et område er valgt. Se klage.js. */
.ringoss:empty { display: none; }

.personvern {
    color: var(--dempet);
    font-size: 13px;
    line-height: 1.55;
    border-top: 1px solid var(--kant);
    margin-top: 16px;
    padding-top: 14px;
}