/* Certus skadesanmeldelse — visuelt udtryk fra Design-mockup'en.
   Palet: Certus-blå #00427A (mørk #002E56), tekst #2C3134, dæmpet #5F676B,
   kanter #DFE3E6, baggrund #F1F3F5, advarsel #FBF7EC/#8A7429.
   Typografi: Bree Serif (overskrifter), Barlow Semi Condensed (brød) —
   web-erstatninger for designmanualens Bree Serif Semi Bold / Avenir Next
   Condensed, som fastlagt i mockup'en. */

/* Etape 8: skrifttyper fra egen server (samme filer som PDF'en bruger).
   Barlow Semi Condensed findes i vægt 400 og 600; 500 og 700 i stilarket
   falder tilbage på nærmeste (600 → 700 vises som 600). Google Fonts
   kaldes ikke længere. */
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BreeSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BarlowSemiCondensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #F1F3F5;
  color: #2C3134;
  font-family: 'Barlow Semi Condensed', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: #00427A; }
a:hover { color: #002E56; }

input, select, textarea, button { font-family: inherit; }
::placeholder { color: #A7ADB1; }

.skjult { display: none !important; }

/* ---------- Ramme ---------- */

.side-header {
  background: #fff;
  border-bottom: 3px solid #00427A;
}
.side-header .inder {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 22px) clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.side-header img { display: block; height: clamp(46px, 6vw, 58px); width: auto; }

.indhold {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 32px) 72px;
}

h1 {
  font-family: 'Bree Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.15;
  color: #00427A;
  margin: 0 0 10px;
}
.underrubrik {
  margin: 0 0 clamp(22px, 3.4vw, 32px);
  max-width: 62ch;
  font-size: 18px;
  color: #5F676B;
}

h2 {
  font-family: 'Bree Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 28px);
  color: #2C3134;
  margin: 0 0 8px;
}
.trin-intro { margin: 0 0 28px; color: #5F676B; max-width: 60ch; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #97999B;
  font-weight: 600;
}

/* ---------- Akut hjælp-panel ---------- */

.akut {
  background: #00427A;
  border-radius: 10px;
  padding: clamp(18px, 2.8vw, 26px);
  margin-bottom: clamp(22px, 3.4vw, 32px);
  color: #fff;
}
.akut .rubrik {
  margin: 0 0 12px;
  font-family: 'Bree Serif', Georgia, serif;
  font-size: 19px;
}
.akut ul {
  margin: 0 0 16px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.akut li {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  font-size: 16px;
}
.akut li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.65); flex: 0 0 auto;
}
.akut .note { margin: 0 0 14px; font-size: 16px; color: rgba(255,255,255,.85); }
.akut .fodnote { margin: 12px 0 0; font-size: 15px; color: rgba(255,255,255,.75); }

.akut-knap {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: #fff; border: none; box-shadow: 0 2px 0 rgba(0,0,0,.22);
  color: #00427A; border-radius: 6px; padding: 13px 24px;
  font-size: 17px; font-weight: 600;
}
.akut-knap:hover { background: #EDF2F7; }
.akut-knap:active { box-shadow: 0 1px 0 rgba(0,0,0,.22); transform: translateY(1px); }

.akut-kort {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  gap: 8px;
}
.akut-kort > div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 13px 15px;
  display: flex; flex-direction: column; gap: 2px;
}
.akut-kort p { margin: 0; }
.akut-kort .titel { font-weight: 600; font-size: 15px; }
.akut-kort .under { font-size: 13px; color: rgba(255,255,255,.85); }
.akut-kort .under a { color: #fff; }
.akut-kort .tlf {
  margin-top: 4px; color: #fff; font-size: 19px; font-weight: 600;
  text-decoration: none;
}
.akut-kort .tid { font-size: 13px; color: rgba(255,255,255,.82); }

/* ---------- Trin-navigation ---------- */

.trin-nav {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid #DFE3E6;
}
.trin-nav .trin { display: flex; align-items: center; gap: 9px; }
.trin-nav .kugle {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid #C9CFD3; color: #97999B;
}
.trin-nav .navn { font-size: 15px; color: #97999B; }
.trin-nav .trin.aktiv .kugle { background: #00427A; border-color: #00427A; color: #fff; }
.trin-nav .trin.aktiv .navn { font-weight: 600; color: #00427A; }
.trin-nav .trin.faerdig .kugle { background: #EDF2F7; border-color: #00427A; color: #00427A; }
.trin-nav .trin.faerdig .navn { color: #2C3134; }

/* ---------- Kortet ---------- */

.kort {
  background: #fff;
  border: 1px solid #E3E7EA;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,30,40,.04), 0 8px 24px rgba(20,30,40,.05);
  padding: clamp(22px, 4.2vw, 44px);
}

/* ---------- Felter ---------- */

.felt { margin-top: 20px; }
.felt:first-child { margin-top: 0; }

.felt-raekke {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px;
}
.felt-raekke .felt { margin-top: 0; }
.felt-raekke-smal { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

label.felt-label, p.felt-label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
}
.kraevet-markering { color: #A03123; } /* etape 5.2: rød, samme røde som fejltekster */
/* Etape 5.2: "Spørgsmål (uddybning)" — spørgsmålet fed, uddybningen på egen linje. */
.spm-uddybning {
  display: block; margin-top: 2px;
  font-size: 14px; font-weight: 400; line-height: 1.4;
  color: #6B7378;
}
.valgfri-markering { font-weight: 400; color: #97999B; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="number"], input[type="time"], input[type="password"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: #2C3134;
  background: #fff;
  border: 1px solid #DFE3E6;
  border-radius: 6px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #00427A;
  box-shadow: 0 0 0 3px rgba(0,66,122,.14);
}
textarea { line-height: 1.5; resize: vertical; }

/* Etape 5.2: datofelter. iOS Safari tegner input[type=date] med sit eget
   udseende: bredden ignoreres delvist, værdien centreres, og et tomt felt
   får en anden højde end de andre felter. Udseendet nulstilles, højden
   låses til de øvrige felters, og alle datofelter får fast maksbredde. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 220px;
  min-width: 0;
  min-height: 44px; /* samme som de øvrige felter; forhindrer at et tomt felt klapper sammen på iOS */
  text-align: left;
  background-color: #fff;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }

.felt-hjaelp { margin: 7px 0 0; font-size: 14px; color: #7E868A; }
.felt-fejl { margin: 7px 0 0; font-size: 14px; font-weight: 600; color: #A03123; }
.felt.har-fejl input, .felt.har-fejl select, .felt.har-fejl textarea,
.jn-boks.har-fejl { border-color: #A03123; }

/* Ja/Nej-bokse — renderes uden forvalgt værdi, jf. etape 1-beslutning */
.jn-boks {
  border: 1px solid #EAEDEF;
  border-radius: 8px;
  padding: 16px 18px;
}
.jn-valg { display: flex; gap: 22px; }
.jn-valg label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 16px;
}
.jn-valg input { width: 18px; height: 18px; accent-color: #00427A; }

/* Info-felt fra arket */
.info-felt {
  margin-top: 24px;
  display: flex; gap: 14px; align-items: flex-start;
  background: #EDF2F7;
  border: 1px solid #C9D3DB;
  border-radius: 8px;
  padding: 16px 18px;
}
.info-felt .ikon { background: #00427A; }
.info-felt p { margin: 0; font-size: 15px; color: #2C3134; max-width: 70ch; white-space: pre-line; }
/* Stop-felt (etape 5.3): som Info, men med kraftigere kant, fordi det er
   trinnets eneste indhold og kundens besked om at kontakte os. */
.info-felt.stop-felt { border-left: 4px solid #00427A; }

/* Advarsel (følsomme oplysninger) */
.advarsel {
  margin-top: 24px;
  display: flex; gap: 14px; align-items: flex-start;
  background: #FBF7EC;
  border: 1px solid #E7DBBB;
  border-radius: 8px;
  padding: 16px 18px;
}
.advarsel p { margin: 0; font-size: 15px; color: #5C4E22; max-width: 70ch; white-space: pre-line; }
.advarsel .ikon { background: #8A7429; }

.ikon {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ---------- Forsikringstype-kort ---------- */

.type-net {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* alle kort samme højde — også på tværs af rækker */
  gap: 12px;
}
.type-antal { margin: 0 0 10px; font-size: 14px; color: #6B7378; }
.type-knap {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  height: 100%; min-width: 0;
  text-align: left; cursor: pointer;
  padding: 16px 18px;
  border: 1px solid #DFE3E6; border-radius: 8px;
  background: #fff; color: #2C3134;
  font-size: 16px;
}
/* Kun på enheder med rigtig mus — på touch "hænger" :hover efter et tryk. */
@media (hover: hover) {
  .type-knap:hover { border-color: #00427A; background: #F7F9FB; }
}
.type-knap:focus-visible { outline: 3px solid rgba(0,66,122,.35); outline-offset: 2px; }
/* Navn øverst fed — forklaring under en tynd streg (etape 5.2). */
.type-knap .type-navn { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; }
.type-knap .type-forklaring {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #E3E7EA;
  font-size: 14px; font-weight: 400; line-height: 1.4;
  color: #6B7378; white-space: pre-line;
}
/* Valgt kort — variant B: helt Certus-blåt med hvid tekst. Samme kantbredde
   som ikke-valgt, så kortet ikke hopper. */
.type-knap.valgt,
.type-knap.valgt:hover { background: #00427A; border-color: #00427A; color: #fff; }
.type-knap.valgt .type-forklaring { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.35); }

@media (max-width: 760px) {
  .type-net { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobil: én kolonne, hvert kort kun så højt som sin tekst, og kompakt,
   så flere kort ses på skærmen på én gang og det er tydeligt, at der er
   flere muligheder længere nede. */
@media (max-width: 480px) {
  /* Datofeltet fylder hele bredden på mobil som de øvrige felter. */
  input[type="date"] { max-width: 100%; }
  .type-net { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .type-knap { padding: 12px 14px; }
  .type-knap .type-navn { font-size: 16px; }
  .type-knap .type-forklaring { margin-top: 8px; padding-top: 8px; font-size: 13.5px; }
}

.skadetype-sektion { margin-top: 30px; padding-top: 28px; border-top: 1px solid #EAEDEF; }
.skadetype-sektion select { max-width: 480px; }

/* ---------- Samtykke ---------- */

.samtykke-boks {
  border: 1px solid #EAEDEF;
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 24px;
}
.samtykke-boks .brod {
  margin: 0 0 14px;
  font-size: 15px;
  color: #3F464A;
  max-width: 75ch;
  white-space: pre-line;
}
.samtykke-boks .kryds {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.samtykke-boks .kryds input {
  width: 19px; height: 19px; accent-color: #00427A; margin-top: 1px; flex: 0 0 auto;
}

/* ---------- Knapper og fodnavigation ---------- */

.knap-raekke {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.knap {
  cursor: pointer;
  border: none; border-radius: 6px;
  padding: 13px 26px;
  font-size: 17px; font-weight: 600;
}
.knap-primaer { background: #00427A; color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.knap-primaer:hover { background: #002E56; }
.knap-primaer:active { box-shadow: 0 1px 0 rgba(0,0,0,.22); transform: translateY(1px); }
.knap-sekundaer {
  background: #fff; color: #00427A;
  border: 1px solid #C9D3DB;
}
.knap-sekundaer:hover { border-color: #00427A; background: #F7F9FB; }
.knap:focus-visible, .type-knap:focus-visible, .akut-knap:focus-visible {
  outline: 3px solid rgba(0,66,122,.4);
  outline-offset: 2px;
}

.fejl-opsummering {
  margin-top: 24px;
  border: 1px solid #E0B4AC;
  background: #FBF0EE;
  border-radius: 8px;
  padding: 14px 18px;
  color: #A03123;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Kvittering ---------- */

.kvittering { text-align: left; }
.kvittering .flueben {
  width: 52px; height: 52px; border-radius: 50%;
  background: #EDF2F7; color: #00427A;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 18px;
}
.kvittering p { max-width: 62ch; white-space: pre-line; }
.kvittering .sagsnummer {
  margin-top: 18px;
  display: inline-block;
  background: #F7F9FB;
  border: 1px solid #DFE3E6;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
}

.kvittering .hent-pdf-raekke { margin-top: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .kort { transition: opacity .15s ease; }
}

/* ============ Etape 4: filupload ============ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fil-vaelger { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; }
.fil-vaelger .knap { pointer-events: none; white-space: nowrap; flex: 0 0 auto; } /* etape 5.2: altid én linje */
.fil-vaelger-note { font-size: 14px; color: #5B6770; }
.fil-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.fil-raekke {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #DFE3E6; border-radius: 8px;
  margin-bottom: 8px; background: #fff;
}
.fil-raekke.arbejder { opacity: .7; }
.fil-navn { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.fil-status { font-size: 13px; color: #5B6770; white-space: nowrap; }
.fil-fjern {
  border: 1px solid #C7CDD2; background: #fff; color: #00427A;
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.fil-fjern:hover { background: #EDF2F7; }
.fil-taeller { margin: 12px 0 0; font-size: 14px; color: #33414D; }
.fil-taeller.over-graense { color: #A4262C; font-weight: 600; }

/* ============ Etape 4: underskrift ============ */
.underskrift-ramme {
  border: 1px dashed #9AA6B0; border-radius: 8px; background: #FBFCFD;
  overflow: hidden;
}
#underskrift-canvas {
  display: block; width: 100%; height: 180px;
  touch-action: none; /* fingeren tegner — siden må ikke scrolle imens */
  cursor: crosshair;
}
.underskrift-vaerktoej { margin-top: 8px; }
.knap-lille {
  border: 1px solid #C7CDD2; background: #fff; color: #00427A;
  border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.knap-lille:hover { background: #EDF2F7; }

/* ============ Etape 4: e-mailbekræftelsesboks ============ */
.dialog-baggrund {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16, 30, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dialog {
  background: #fff; border-radius: 12px; max-width: 520px; width: 100%;
  padding: 28px 26px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.dialog h3 { margin: 0 0 10px; font-family: "Bree Serif", serif; color: #00427A; font-size: 22px; }
.dialog p { margin: 0 0 14px; font-size: 15px; color: #33414D; max-width: 60ch; }
.dialog-email {
  font-size: 18px; font-weight: 700; color: #101E2A;
  background: #F7F9FB; border: 1px solid #DFE3E6; border-radius: 8px;
  padding: 12px 16px; overflow-wrap: anywhere; text-align: center;
}
.dialog-knapper {
  display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px;
}
/* Etape 7.3: ventetekst i stedet for knapperne, mens anmeldelsen sendes. */
.dialog-venter {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 18px;
  background: #F7F9FB; border: 1px solid #DFE3E6; border-radius: 8px; padding: 14px 16px;
}
.dialog-venter p { margin: 0; font-size: 15px; color: #101E2A; }
.spinner {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 3px solid #DFE3E6; border-top-color: #00427A; border-radius: 50%;
  animation: spinner-drej .9s linear infinite;
}
@keyframes spinner-drej { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }
/* Etape 5.2: på mobil fylder "Vælg filer …" hele bredden med noten nedenunder. */
@media (max-width: 480px) {
  .fil-vaelger { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .fil-vaelger .knap { display: block; width: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .dialog-knapper { flex-direction: column-reverse; }
  .dialog-knapper .knap { width: 100%; }
}

/* Etape 8: Turnstiles klik-felt — vises kun, når Turnstile kræver et klik. */
.bot-boks { margin-top: 14px; display: flex; justify-content: center; min-height: 0; }
.bot-boks:empty { display: none; }