/* Hårsveisen – felles uttrykk: grafitt og bærrosa. Ingen gult eller grønt. Fontene ligger lokalt (ingen Google-kall). */
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url('/fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('/fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url('/fonts/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 700; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }

:root {
  --ink: #17151A;
  --ink-2: #5E5763;
  --linje: #E7E3E8;
  --linje-2: #D6D0D8;
  --grunn: #FBFAFB;
  --flate: #FFFFFF;
  --dempet: #F1EEF2;
  --baer: #B0124F;
  --baer-mork: #8A0E3E;
  --baer-lys: #F8E6EE;
  --baer-tekst: #5A0A2A;
  --lilla-lys: #EFEBF5;
  --lilla: #2D2A52;
  --lilla-2: #4B4785;
  --rosa-pa-mork: #F27AA8;
  --skygge: 0 6px 20px rgba(176, 18, 79, 0.10);
  --radius: 18px;
  --display: 'Bricolage', 'Figtree', system-ui, sans-serif;
  --tekst: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grunn); color: var(--ink); font: 16px/1.45 var(--tekst); }
a { color: var(--baer); }
a:hover { color: var(--baer-mork); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--baer); outline-offset: 2px; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- kundeflyten ---------- */
.kunde { min-height: 100vh; background: var(--grunn); }
@media (min-width: 560px) {
  body.kunde-side { background: var(--dempet); }
  .kunde { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 1px var(--linje), 0 30px 80px rgba(23, 21, 26, 0.08); }
}
.topp { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.ordmerke { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.ordmerke span { color: var(--baer); }
.rund { width: 44px; height: 44px; border-radius: 22px; background: var(--dempet); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; cursor: pointer; flex-shrink: 0; }
.rund:hover { color: var(--ink); background: var(--linje); }
.steg { width: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fremdrift { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 4px 20px 0; }
.fremdrift i { height: 4px; border-radius: 2px; background: var(--linje); }
.fremdrift i.pa { background: var(--baer); }
.hode { padding: 26px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.overtittel { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--baer); font-weight: 700; }
h1.stor { margin: 0; font-family: var(--display); font-size: clamp(30px, 8.5vw, 34px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; }
.ingress { margin: 0; font-size: 15px; color: var(--ink-2); }
.innhold { padding: 4px 20px 140px; display: flex; flex-direction: column; gap: 22px; }
.gruppe { display: flex; flex-direction: column; gap: 10px; }
.gruppe h2, .seksjon { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; }

.valg { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border: 1.5px solid var(--linje); background: var(--flate); border-radius: var(--radius); cursor: pointer; }
.valg:hover { border-color: var(--linje-2); }
.valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valg:has(input:checked) { border: 2px solid var(--baer); padding: 13.5px 15.5px; box-shadow: var(--skygge); }
.valg:has(input:focus-visible) { outline: 3px solid var(--baer); outline-offset: 2px; }
.valg .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.valg .navn { font-size: 17px; font-weight: 600; }
.valg .meta { font-size: 13px; color: var(--ink-2); }
.merke { width: 30px; height: 30px; border-radius: 15px; border: 1.5px solid #CFC8D1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.valg:has(input:checked) .merke { background: var(--baer); border-color: var(--baer); color: #fff; }
.merke .hake { display: none; }
.valg:has(input:checked) .merke .hake { display: block; }
.valg:has(input:checked) .merke .pluss { display: none; }
.ikon-sirkel { width: 52px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--lilla-lys); color: var(--lilla); }
.ikon-sirkel.baer { background: var(--baer-lys); color: var(--baer); }
.brikke { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--lilla-lys); color: var(--lilla); font-size: 12px; font-weight: 600; }
.skille { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.08em; }
.skille::before, .skille::after { content: ''; flex: 1; height: 1px; background: var(--linje); }

.bunn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--flate); border-top: 1px solid #ECE8ED; }
@media (min-width: 560px) { .bunn { max-width: 480px; margin: 0 auto; } }
.bunn .sammendrag { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bunn .sammendrag b { font-size: 15px; }
.bunn .sammendrag span { font-size: 13px; color: var(--ink-2); }
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 27px; background: var(--baer); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; white-space: nowrap; }
.knapp:hover { background: var(--baer-mork); color: #fff; }
.knapp[disabled], .knapp[aria-disabled='true'] { background: #CFC8D1; cursor: not-allowed; }
.knapp.bred { width: 100%; }
.knapp.lys { background: var(--flate); color: var(--ink); border: 1.5px solid var(--linje-2); }
.knapp.lys:hover { background: var(--dempet); color: var(--ink); }
.knapp.liten { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 22px; }

.uke-topp { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 10px; }
.uke-topp b { font-size: 16px; }
.uke-topp nav { display: flex; gap: 8px; }
.rund.kant { background: var(--flate); border: 1.5px solid var(--linje); }
.rund[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }
.uke { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 20px 18px; }
.dag { height: 64px; border-radius: 16px; border: 1.5px solid var(--linje); background: var(--flate); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; }
.dag small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.dag b { font-size: 17px; }
.dag:hover { border-color: var(--linje-2); color: var(--ink); }
.dag.valgt { background: var(--baer); border-color: var(--baer); color: #fff; }
.dag.valgt small { color: #FBDCE8; }
.dag.tom { background: transparent; color: #A9A1AC; border-style: dashed; pointer-events: none; }
.dag.tom small { color: #A9A1AC; }
.tider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tid { height: 48px; border-radius: 14px; border: 1.5px solid var(--linje); background: var(--flate); font-size: 16px; font-weight: 600; cursor: pointer; }
.tid:hover { border: 2px solid var(--baer); background: var(--baer-lys); color: var(--baer-mork); }
.info { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--lilla-lys); color: var(--lilla); font-size: 14px; }
.info svg { flex-shrink: 0; margin-top: 1px; }
.info b { display: block; font-size: 15px; margin-bottom: 4px; }
.feilmelding { padding: 14px 16px; border-radius: 14px; background: var(--baer-lys); color: var(--baer-tekst); font-weight: 600; font-size: 15px; }

.oppsummering { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--flate); border: 1px solid #ECE8ED; }
.oppsummering .ikon { width: 40px; height: 40px; border-radius: 12px; background: var(--baer-lys); color: var(--baer); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oppsummering .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oppsummering .tekst span { font-size: 13px; color: var(--ink-2); }
.felt { display: flex; flex-direction: column; gap: 6px; }
.felt label { font-size: 14px; font-weight: 600; }
.felt label small { font-weight: 500; color: var(--ink-2); font-size: 14px; }
.felt input, .felt select, .felt textarea { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--linje-2); background: var(--flate); padding: 0 14px; font-size: 17px; width: 100%; }
.felt textarea { padding: 12px 14px; min-height: 90px; resize: vertical; }
.felt input:focus, .felt select:focus, .felt textarea:focus { border: 2px solid var(--ink); outline: none; padding: 0 13.5px; }
.felt .hjelp { font-size: 12px; color: var(--ink-2); }
.mobilfelt { display: flex; align-items: stretch; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--linje-2); background: var(--flate); overflow: hidden; }
.mobilfelt:focus-within { border: 2px solid var(--ink); }
.mobilfelt span { padding: 0 12px 0 14px; font-size: 16px; font-weight: 600; color: var(--ink-2); border-right: 1px solid var(--linje); display: flex; align-items: center; }
.mobilfelt input { border: 0 !important; min-height: 0; flex: 1; outline: none; padding: 0 14px !important; }
.avkrysning { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; }
.avkrysning input { width: 22px; height: 22px; margin: 0; accent-color: var(--baer); flex-shrink: 0; }

.kvittering-hode { background: var(--ink); color: #fff; padding: 22px 24px 72px; display: flex; flex-direction: column; gap: 26px; border-radius: 0 0 36px 36px; }
.kvittering-hode .ordmerke { color: #fff; }
.kvittering-hode .ordmerke span { color: var(--rosa-pa-mork); }
.kvittering-hode .rund { background: rgba(255, 255, 255, 0.10); color: #fff; }
.hake-stor { width: 64px; height: 64px; border-radius: 32px; background: var(--baer); display: flex; align-items: center; justify-content: center; }
.hake-stor.avlyst { background: #4B4652; }
.kvittering-hode h1 { margin: 0; font-family: var(--display); font-size: 38px; line-height: 1.02; letter-spacing: -0.03em; }
.kvittering-hode p { margin: 10px 0 0; font-size: 15px; color: #D9D3DB; }
.kort { margin: -44px 20px 0; padding: 20px; border-radius: 22px; background: var(--flate); border: 1px solid #ECE8ED; box-shadow: 0 14px 40px rgba(23, 21, 26, 0.10); display: flex; flex-direction: column; gap: 16px; position: relative; }
.kort .rad { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kort .dato { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.kort .klokke { font-size: 22px; font-weight: 700; color: var(--baer); }
.kort hr { border: 0; height: 1px; background: #ECE8ED; margin: 0; }
.fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fakta div { display: flex; flex-direction: column; gap: 3px; }
.fakta small { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }
.fakta span { font-size: 15px; font-weight: 600; }
.handlinger { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kontakt { margin: 24px 20px 30px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--dempet); }
.kontakt .ikon { width: 40px; height: 40px; border-radius: 20px; background: var(--flate); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kontakt div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.kontakt b { font-size: 14px; color: var(--ink); }
.tom-side { padding: 40px 24px; display: flex; flex-direction: column; gap: 14px; }
.fot { padding: 0 20px 30px; font-size: 12px; color: var(--ink-2); text-align: center; }
.fot a { color: var(--ink-2); }

/* hjelpeklasser (CSP tillater ikke style-attributter) */
.plass { width: 44px; flex-shrink: 0; }
.innhold.tett { gap: 12px; }
.ingress.liten { font-size: 13px; }
.ingress.mini { font-size: 12px; }
.midt { text-align: center; }
.avkrysning.fet { margin-top: 6px; font-weight: 700; font-size: 14px; }
.bunn.kolonne { flex-direction: column; align-items: stretch; gap: 10px; }
.mellom { display: flex; align-items: center; justify-content: space-between; }
.knapp.start { align-self: flex-start; }
.hode h1.stor + .ingress { margin-top: 0; }
#detaljer { padding-bottom: 170px; }