/* ============================================================
   Renli — bestill.css
   Renli booking wizard styles — geometry rebuilt 1:1 from the
   measured reference flow (docs/freska-measured-spec.md):
   660px column + 410px fixed-height sidebar, 468px inner column,
   35px card headings, 62.35px fields, 104px option cards,
   pill CTAs 45px høye. Colors ONLY via the spec's mapping table
   to Renli tokens; all text unchanged.
   Loads AFTER css/tokens.css and css/style.css — reuses their tokens:
   --primary, --primary-cta, --card-bg (#3D445D), --wizard-green,
   --cta-green, --link, --font-head, --font-body, .brand, .btn system.
   The --wz-* block lives in css/tokens.css (single :root source).
   ============================================================ */

/* Steps have different heights — reserve the scrollbar gutter so the
   centered layout never shifts sideways between steps. */
html {
  scrollbar-gutter: stable;
}

body.wizard-page {
  background: var(--wz-page);
}

/* Some wizard components set display:flex/grid — keep [hidden] winning. */
.wizard-page [hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   BRAND — absolute top-left (målt: logoblokk ved (32,32));
   skjules når layouten kollapser til én kolonne
   ============================================================ */
.wtop-brand {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 10;
  color: var(--heading);
  font-size: var(--fs-brand);
}

.wtop-brand:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ============================================================
   PROGRESS TABS — inne i hovedkolonnen (målt: 468px indre bredde,
   faner 700 20/28, spor 4px med 1/3-fyll per steg)
   ============================================================ */
.wprogress {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--wz-inner-w), 100%);
  margin: 8px auto 0;
  /* 24px luft + 4px spor under etikettene */
  padding: 0 0 28px;
}

/* ::before = track, ::after = fill (paints on top). scaleX, not width —
   composites only, and one named transition property.
   Fyllet er --wizard-green per fargekartet (wizard progress-rollen). */
.wprogress::before,
.wprogress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
}

.wprogress::before {
  background: var(--wz-border);
}

.wprogress::after {
  background: var(--wizard-green);
  transform: scaleX(0.333);
  transform-origin: left center;
  /* Målt: width 0.2s ease-in — samme kurve/varighet, komposittvennlig */
  transition: transform 200ms ease-in;
}

.wprogress[data-progress="2"]::after {
  transform: scaleX(0.667);
}

.wprogress[data-progress="3"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .wprogress::after {
    transition: none;
  }
}

.wprog-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-lead);
  line-height: 1.4;
  letter-spacing: 0.19px;
  color: var(--wz-gray-2);
  padding: 0;
}

.wprog-step.is-active {
  color: var(--text-1);
}

/* Fullførte steg: dempet etikett — haken bærer signalet, og den står
   ETTER etiketten som i referansen. */
.wprog-check {
  display: none;
  order: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cta-green);
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wprog-step.is-done .wprog-check {
  display: inline-flex;
}

/* Tabs that can be jumped to get role="button" from JS */
.wprog-step[role="button"] {
  cursor: pointer;
}

.wprog-step[role="button"]:focus-visible {
  outline: 2px solid var(--wizard-green);
  outline-offset: 2px;
}

.wprog-step[role="button"]:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ============================================================
   MOBILE SUMMARY BAR — mørk topplinje med tjenestenavn og
   sammendrags-pille (målt: pille 8x16-polstring, radius 200,
   lys flate som blir hvit når skuffen er åpen). Skjult på desktop.
   ============================================================ */
.wbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  height: var(--wz-bar-h);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.wbar:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wbar-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.wbar-service {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--on-slate-1);
}

.wbar-total {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-figure);
  color: var(--on-slate-1);
  white-space: nowrap;
}

.wbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-fine);
  line-height: 1.4;
  color: var(--text-1);
  background: var(--wz-page);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  box-shadow: var(--elev-card);
  transition: background-color 150ms ease;
}

.wbar[aria-expanded="true"] .wbar-pill {
  background: #FFFFFF;
}

.wbar-chev {
  color: var(--text-1);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.wbar[aria-expanded="true"] .wbar-chev {
  transform: rotate(180deg);
}

/* ============================================================
   LAYOUT — 660px kolonne + 410px sidefelt, 24px mellomrom,
   sentrert (målt). Sidefeltet er alltid full høyde med egen
   rulling — det følger aldri sidens scroll.
   ============================================================ */
.wmain {
  padding: var(--wz-page-pad-top) 24px 72px;
}

.wlayout {
  display: grid;
  grid-template-columns: var(--wz-col-w) var(--wz-aside-w);
  justify-content: center;
  align-items: start;
  gap: 24px;
}

.wcol {
  min-width: 0;
}

.wcontent {
  min-width: 0;
}

/* Soft entrance when a step is revealed (hidden-toggle restarts it) */
@media (prefers-reduced-motion: no-preference) {
  .wstep {
    animation: wstep-in 400ms ease-out;
  }

  @keyframes wstep-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

/* ============================================================
   CARDS + TYPOGRAPHY (målt: kort 660 bred, polstring 64x96,
   radius 20, skygge 0 7px 14px; h2 700 35/35; underlinje 17/24)
   ============================================================ */
.wcard {
  background: #FFFFFF;
  border-radius: var(--wz-radius-card);
  box-shadow: var(--elev-card);
  padding: var(--wz-card-pad);
  overflow-wrap: break-word;
}

/* Kort skilles med 32px; første kort ligger 48px under fanesporet (målt:
   sporets underkant 103 → kortflatens topp 152). De to avstandene er
   ulike i referansen og har derfor hvert sitt token. */
.wstep > * + .wcard {
  margin-top: var(--wz-gap-card);
}

.wstep > .wcard:first-child,
.wstep > .wstep-head:first-child {
  margin-top: var(--wz-gap-card-first);
}

.wtitle {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-title);
  line-height: 1;
  letter-spacing: -0.29px;
  color: var(--text-1);
  text-align: center;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0 0 32px;
}

/* Ved stegbytte flytter JS fokus hit (tabindex="-1") slik at skjermlesere
   leser den nye overskriften. Den er ikke en kontroll — Chromes fokusring
   ville tegnet en hard svart ramme rundt tittelen. Ringene på ekte
   interaktive elementer (:focus-visible) er urørt. */
.wtitle:focus {
  outline: none;
}

.wsub {
  font-size: var(--fs-body);
  line-height: 1.41;
  letter-spacing: 0.18px;
  color: var(--text-1);
  text-align: center;
  text-wrap: balance;
  /* Underlinjen løper over hele den indre kolonnen (målt). Ingen negativ
     topp: h2 → underlinje er 32px i referansen (tittelens egen bunnmarg),
     samme rytme som .wcal-intro allerede har. */
  margin: 0 auto 24px;
}

.wstep-head {
  margin-bottom: 0;
}

.wstep-head .wsub {
  margin-bottom: 0;
}

/* ============================================================
   FIELDS (målt: felt 468 x 62.35, ramme 0.8px, radius 8,
   polstring 16, verdi 400 20/28.75)
   ============================================================ */
.wfieldset {
  border: none;
  margin: 0 0 var(--wz-gap-block);
  padding: 0;
  min-width: 0;
}

/* Seksjonsetiketter = versallinje-apparatet (Ubuntu 700 12/16, ls 1px,
   versaler, sentrert — målt «overline»-stil) */
.wlegend {
  display: block;
  width: 100%;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-1);
  -webkit-hyphens: auto;
  hyphens: auto;
  padding: 0;
  margin: 0 0 var(--wz-gap-overline);
}

.wfield {
  margin-bottom: var(--gap-field);
}

/* Kun rene feltetiketter — de peker alltid på inputen sin med [for].
   Kontroll-etiketter (.wswitch, .wcheckrow, fremtidige) OMSLUTTER inputen
   og har aldri [for]; de holdes utenfor strukturelt, ikke via unntaksliste. */
.wfield > label[for] {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--text-2);
  margin-bottom: var(--gap-label);
}

.wfield input[type="text"],
.wfield input[type="email"],
.wfield input[type="tel"],
.wfield input[type="date"],
.wfield textarea,
.wfield select {
  width: 100%;
  min-height: var(--wz-ctl-h);
  font-family: var(--font-body);
  font-size: var(--wz-fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.4375; /* 28.75/20 (målt) */
  color: var(--text-2);
  background: var(--ctl-bg);
  border: var(--wz-ctl-border-w) solid var(--wz-border);
  border-radius: var(--wz-radius);
  padding: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Peker-affordans på feltrammen. Selektoren holdes på samme spesifisitet
   som :focus-visible, :disabled og .is-invalid under — de står senere i
   kilden og vinner derfor uavgjort. */
@media (hover: hover) and (pointer: fine) {
  .wfield input:hover,
  .wfield textarea:hover,
  .wfield select:hover {
    border-color: var(--ink-300);
  }
}

::placeholder {
  color: var(--text-4);
  opacity: 1;
}

.wfield input:focus-visible,
.wfield textarea:focus-visible,
.wfield select:focus-visible {
  outline: none;
  border-color: var(--wizard-green);
  box-shadow: var(--ring-focus);
}

/* Deaktivert kontroll: uten -webkit-text-fill-color tegner iOS Safari
   teksten med ~40 % alfa oppå fargen under. */
.wfield input:disabled,
.wfield textarea:disabled,
.wfield select:disabled {
  background: var(--ctl-bg-disabled);
  border-color: var(--ink-200);
  color: var(--text-4);
  -webkit-text-fill-color: var(--text-4);
}

.wfield select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234A5155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* ---------- Autofyll — de blå rektanglene ----------
   To ATSKILTE regler. Slås de sammen, forkaster en nettleser som ikke
   kjenner :-webkit-autofill hele selektorlisten, og Firefox mister sin.
   background-clip: text er den ekte fiksen; box-shadow-innsatsen er
   fallback for eldre Chromium. 100000s hindrer at blåfargen kommer
   tilbake på :focus/:hover. */
.wfield input:-webkit-autofill,
.wfield input:-webkit-autofill:hover,
.wfield input:-webkit-autofill:focus,
.wfield input:-webkit-autofill:active,
.wfield textarea:-webkit-autofill,
.wfield select:-webkit-autofill,
.wstepper input.wstepper-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-2);
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: 0 0 0 1000px var(--ctl-bg) inset;
  caret-color: var(--text-2);
  border-radius: var(--wz-radius);
  font-family: var(--font-body);
  font-size: var(--wz-fs-lead);
  transition: background-color 100000s ease 0s, color 100000s ease 0s;
}

.wfield input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--ctl-bg) inset, var(--ring-focus);
}

.wfield input:autofill,
.wfield textarea:autofill,
.wfield select:autofill {
  background-color: var(--ctl-bg);
  color: var(--text-2);
  filter: none;
}

/* ---------- Flytende feltetiketter (steg 2 + skjemagrupper) ----------
   Målt mønster: hviletikett 400 20/28.75 inne i feltet; ved fokus/innhold
   krymper den (scale .75) til toppbåndet, og verdien ligger i feltets
   nedre bånd (polstring 26/16/6). Ren CSS via :has() + placeholder=" ".
   Kontroll-etiketter uten [for] (kjæledyr-raden) berøres ikke. */
.wstep[data-step="2"] .wfield,
.wgroup--form .wfield {
  position: relative;
  margin-bottom: 16px;
}

.wstep[data-step="2"] .wfield > label[for],
.wgroup--form .wfield > label[for] {
  position: absolute;
  top: 16.8px;
  left: 16.8px;
  z-index: 1;
  max-width: calc(100% - 33.6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--wz-fs-lead);
  line-height: 1.4375;
  color: var(--wz-gray-2);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 200ms ease;
}

/* Krympet: skalaen 0.75 frigjør plass — 133 % kompenserer slik at
   etiketten ikke trunkeres i sin egen (uskalerte) boksbredde */
.wstep[data-step="2"] .wfield:has(input:focus) > label[for],
.wstep[data-step="2"] .wfield:has(input:not(:placeholder-shown)) > label[for],
.wstep[data-step="2"] .wfield:has(select) > label[for],
.wgroup--form .wfield:has(input:focus) > label[for],
.wgroup--form .wfield:has(input:not(:placeholder-shown)) > label[for],
.wgroup--form .wfield:has(select) > label[for] {
  transform: translateY(-10.8px) scale(0.75);
  max-width: calc(133% - 44.8px);
}

/* Egen regel: autofylte felt skal også krympe etiketten */
.wstep[data-step="2"] .wfield:has(input:-webkit-autofill) > label[for],
.wgroup--form .wfield:has(input:-webkit-autofill) > label[for] {
  transform: translateY(-10.8px) scale(0.75);
}

/* Verdien bor i nedre bånd — konstant polstring, tomme felt viser
   uansett bare etiketten */
.wstep[data-step="2"] .wfield input[type="text"],
.wstep[data-step="2"] .wfield input[type="email"],
.wstep[data-step="2"] .wfield input[type="tel"],
.wstep[data-step="2"] .wfield input[type="date"],
.wgroup--form .wfield input[type="text"],
.wgroup--form .wfield input[type="email"],
.wgroup--form .wfield input[type="tel"] {
  padding: 26px 16px 6px;
}

.wstep[data-step="2"] .wfield select,
.wgroup--form .wfield select {
  padding: 26px 44px 6px 16px;
}

/* Kjæledyr-raden: grå innfelt boks (referansens mønster for raden) */
.wstep[data-step="2"] .wfield:has(.wcheckrow) {
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 10px 16px;
}

.wfield--short {
  max-width: none;
}

/* Adresse-rad: gate 302 + 16 + postnummer 150 = 468 (målt) */
.waddr-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 16px;
}

.wfield-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Input with unit suffix (m²) — full indre bredde (målt) */
.winput-suffix {
  position: relative;
}

.winput-suffix input {
  padding-right: 52px;
}

.wsuffix {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-weight: var(--fw-regular);
  font-size: var(--wz-fs-lead);
  line-height: 1.4;
  color: var(--wz-gray-2);
  pointer-events: none;
}

.whint {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: var(--gap-hint) 0 0;
}

/* Inline validation errors — created by js/bestill.js */
.wfield-error {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--danger-text);
  margin: var(--gap-hint) 0 0;
}

.wfield input.is-invalid,
.wfield select.is-invalid {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 3px rgba(196, 59, 30, 0.14);
  background: var(--danger-bg);
}

/* Oslo warning */
.wwarn {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--warn-text);
  background: #FBF0E5;
  border-radius: var(--wz-radius);
  padding: 10px 14px;
  margin: 0 0 16px;
}

/* ---------- Utstyrsboks (målt: mint flate, radius 10, polstring 8x16,
   ikonkolonne 24 + 12, melding 400 14/18.9) ---------- */
.winfo {
  display: flex;
  align-items: flex-start;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-1);
  background: var(--wz-green-tint);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0 0 20px;
}

.winfo-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 7px 12px 7px 0;
  color: var(--wizard-green);
}

.winfo-text {
  padding: 6px 0;
  margin-top: 4px;
}

.winfo--neutral {
  color: var(--text-2);
  background: var(--wz-page);
}

/* ============================================================
   SERVICE CHIPS (step 1) — vårt ekstra blokk, stylet i samme
   valgkort-grammatikk: 1.6px ramme, valgt = oransje ramme + fet
   ============================================================ */
/* Fire likeverdige valg skal lese som ÉN matrise, ikke som en linje som
   tok slutt: flyt-varianten brøt 3+1 og lot «Vindusvask» stå alene på rad
   to, venstrestilt i et ellers strengt sentrert kort. To kolonner med lik
   bredde (1fr i en fit-content-boks løser begge til den bredeste pillen)
   gir 2+2 med samme kant på begge akser, sentrert i kortets midtakse —
   samme akse som versallinjen og de 468px brede kontrollene. */
.wservices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: fit-content;
  margin-inline: auto;
}

.wservice input[type="radio"],
.wchoice input[type="radio"],
.wslot input[type="radio"],
.wplan-card input[type="radio"],
.wpay input[type="radio"],
.wswitch input[type="checkbox"],
.waddon input[type="checkbox"],
.wcheckrow input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wservice {
  display: inline-flex;
  cursor: pointer;
}

.wservice-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-1);
  background: #FFFFFF;
  border: var(--wz-ctl-border-w-sel) solid var(--wz-border);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  box-shadow: var(--elev-card);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wservice:active .wservice-face {
  transform: scale(0.97);
  opacity: 0.85;
}

.wservice:has(input:checked) .wservice-face {
  border-color: var(--primary);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
}

.wservice:has(input:focus-visible) .wservice-face {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wservice:hover .wservice-face {
    border-color: var(--ink-300);
  }
}

/* ============================================================
   RADIO / CHECK PRIMITIVES (målt: 24px ikoner; avkrysset = mørk
   blekk per fargekartet — radio/checkbox checked → ink-900)
   ============================================================ */
.wradio {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--wz-gray-2);
  border-radius: 50%;
  background: #FFFFFF;
}

label:has(input:checked) > .wradio {
  border-color: var(--text-1);
}

label:has(input:checked) > .wradio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--text-1);
}

label:has(input:focus-visible) > .wradio {
  box-shadow: var(--ring-focus);
}

.wcheck {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 2px solid var(--wz-gray-2);
  border-radius: 4px;
  background: #FFFFFF;
  transition: border-color 150ms ease, background-color 150ms ease;
}

label:has(input:checked) > .wcheck {
  background: var(--text-1);
  border-color: var(--text-1);
}

label:has(input:checked) > .wcheck::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

label:has(input:focus-visible) > .wcheck {
  box-shadow: var(--ring-focus);
}

/* ============================================================
   FREQUENCY CHOICE CARDS (målt: 468x104, ramme 1.6px, radius 8,
   polstring 12, 8px stabelavstand; valgt = oransje ramme + fet
   tittel; SPAR-blokk høyre; bånd forankret oppe til høyre)
   ============================================================ */
.wtrust {
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 24px;
}

.wchoices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wchoice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  background: #FFFFFF;
  border: var(--wz-ctl-border-w-sel) solid var(--wz-border);
  border-radius: var(--wz-radius);
  padding: 12px;
  box-shadow: var(--elev-card);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wchoice:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wchoice:has(input:checked) {
  border-color: var(--primary);
}

.wchoice:has(input:focus-visible) {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wchoice:hover {
    border-color: var(--ink-300);
  }
}

/* Referansekortene har ingen synlig radiosirkel — valget vises med
   ramme + vektsprang. Kun én-gangs-raden beholder sirkelen. */
.wchoice:not(.wchoice--plain) .wradio {
  display: none;
}

/* Tekstblokken: tittel + underlinje stablet, ~349 bred (målt).
   12 polstring + 1.6 ramme + 12 = 25.6px innrykk fra kortkanten (målt) */
.wchoice-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 12px;
}

.wchoice-title {
  font-size: var(--wz-fs-lead);
  line-height: 1.4;
  color: var(--text-1);
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-left: 0;
}

/* Underlinjen (målt 400 14/18.9 i sekundærgrå) — andre valgt-signal:
   fargen skifter til ink når kortet er valgt, i takt med vektspranget */
.wchoice-sub {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  -webkit-hyphens: auto;
  hyphens: auto;
  transition: color 150ms ease;
}

.wchoice:has(input:checked) .wchoice-title {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
}

.wchoice:has(input:checked) .wchoice-sub {
  color: var(--text-1);
}

/* SPAR-blokk: lite versalord over stor prosent, høyrejustert (målt) */
.wsave {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  padding: 0 12px;
  color: var(--text-1);
}

.wsave-word {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
}

.wsave-num {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-lead);
  line-height: 1.4;
  white-space: nowrap;
}

/* Bånd: forankret i kortets øvre høyre hjørne, radius 0 8 (TR/BL) — målt */
.wchoice-ribbon {
  position: absolute;
  top: -1.6px;
  right: -1.6px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--on-slate-1);
  background: var(--card-bg);
  border-radius: 0 var(--wz-radius);
  padding: 2px 16px;
}

/* «Kun én gang»: enkel radiorad, 42 høy, ikon 24, etikett 400 17 (målt) */
.wchoice--plain {
  min-height: 42px;
  margin-top: 8px; /* 8 stabel + 8 = 16px fra tredje kort (målt) */
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

/* Målt (§3): «Kun én gang»-radioen er tegnet i referansens aksentfarge, ikke
   i sekundærgrå — fargekartet fører den aksenten til --ink-900 (= --text-1).
   Sekundærgrå (--wz-gray-2) gjelder avkryssingsbokser i av-tilstand (§5.1),
   som er en annen kontroll. */
.wchoice--plain .wradio {
  width: 24px;
  height: 24px;
  border-color: var(--text-1);
}

label.wchoice--plain:has(input:checked) > .wradio::after {
  inset: 4px;
}

.wchoice--plain .wchoice-title {
  font-size: var(--fs-body);
  line-height: 1.4;
  margin-left: 12px;
}

/* Radiosirkelen er indikatoren — tittelen står i normalvekt også valgt */
.wchoice--plain:has(input:checked) .wchoice-title {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
}

.wchoice--plain:has(input:checked) {
  border-color: transparent;
  box-shadow: none;
}

.wchoice--plain:has(input:focus-visible) {
  box-shadow: none;
}

/* ============================================================
   STEPPER
   ============================================================ */
.wstepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--wz-ctl-border-w) solid var(--wz-border);
  border-radius: var(--wz-radius);
  overflow: hidden;
}

.wstepper-btn {
  width: 44px;
  flex-shrink: 0;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card-title);
  line-height: 1;
  color: var(--text-1);
  background: var(--wz-page);
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.wstepper-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wstepper-btn:hover {
    background: var(--wz-green-tint);
  }
}

/* Scoped to out-specify `.wfield input[type="text"]` above */
.wstepper input.wstepper-input {
  width: 58px;
  min-height: 44px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-input);
  color: var(--text-2);
  text-align: center;
  background: var(--ctl-bg);
  border: none;
  border-left: var(--wz-ctl-border-w) solid var(--wz-border);
  border-right: var(--wz-ctl-border-w) solid var(--wz-border);
  border-radius: 0;
  padding: 0;
}

.wstepper input.wstepper-input:focus-visible {
  outline: 2px solid var(--wizard-green);
  outline-offset: -2px;
  border-color: var(--wz-border);
  box-shadow: none;
}

/* ============================================================
   SWITCH (møblert / sprosser) — avkrysset = mørk blekk, som
   checkbox-rollen i fargekartet
   ============================================================ */
.wswitch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.wswitch:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* Av-tilstanden er en komponentgrense (WCAG 1.4.11): --ink-400 = 3.02:1 */
.wswitch-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: var(--ink-400);
  border-radius: 50px;
  transition: background-color 200ms ease;
}

.wswitch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.25);
  transition: transform 200ms ease;
}

.wswitch:has(input:checked) .wswitch-track {
  background: var(--text-1);
}

.wswitch:has(input:checked) .wswitch-track::after {
  transform: translateX(20px);
}

.wswitch:has(input:focus-visible) .wswitch-track {
  box-shadow: var(--ring-focus);
}

.wswitch-label {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-1);
}

/* ============================================================
   ADDONS (flyttevask) — avkrysningsrader i 17px-systemet
   ============================================================ */
.waddon {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--wz-hairline);
  cursor: pointer;
}

.waddons .waddon:last-of-type {
  border-bottom: none;
}

.waddon:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.waddon-name {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-1);
}

.waddon-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-ctl);
  background: var(--ink-050);
  color: var(--text-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.waddon-ico svg {
  width: 24px;
  height: 24px;
}

.waddon:has(input:checked) .waddon-ico {
  background: var(--wz-green-tint);
  color: var(--wz-green-deep);
}

.waddon-price {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-helper);
  color: var(--wz-gray-2);
  white-space: nowrap;
}

.waddon-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px 14px 88px;
  border-bottom: 1px solid var(--wz-hairline);
}

.waddon-qty > label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
  color: var(--text-2);
}

/* ============================================================
   CTA-PILLER (målt: høyde 45, polstring 12x28, radius 200,
   etikett 700 15/21, auto bredde HØYREJUSTERT mot kortkanten,
   32px under kortet; skygge = kortskyggen)
   Fylte flater bruker --primary-cta: kartets --primary (#EC683B)
   er 3.18:1 under hvit 15px-tekst og er per tokens.css ikke
   lovlig knappeflate — --primary-cta ER Renlis oransje CTA-flate.
   ============================================================ */
.wcta {
  display: block;
  width: fit-content;
  margin: var(--wz-gap-card) 0 0 auto;
  min-height: 45px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: 1.4; /* 21/15 (målt) */
  color: var(--on-dark-1);
  background: var(--primary-cta);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: var(--elev-card);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wcta:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wcta:disabled {
  opacity: 0.7;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .wcta:hover:not(:disabled) {
    background: var(--primary-cta-hover);
  }
}

/* «Sjekk tilgjengelighet»: sentrert i kortet; låst = grå flate (målt
   deaktivert-farge → --wz-gray-3), uten skygge-glorie */
.wcta--check {
  margin: 6px auto 0;
}

.wcta--check:disabled {
  background: var(--wz-gray-3);
  box-shadow: none;
  opacity: 1;
}

/* Network error under the step-3 pay CTA */
.wsubmit-error {
  margin: 10px 0 0;
  text-align: center;
}

/* Samme flate som rolig varsel (prisliste oppdatert) — blekk, ikke rødt */
.wsubmit-error.is-notice {
  color: var(--text-1);
}

/* Ghost back button — hvit pille, blekk-tekst, ingen ramme (målt) */
.wback {
  min-height: 45px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--text-1);
  background: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: var(--elev-card);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wback:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wback:hover {
    background: var(--ink-050);
  }
}

/* Nav-rad: Tilbake venstre, Neste høyre, 32px under siste kort (målt) */
.wnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: var(--wz-gap-card);
}

.wnav .wcta {
  margin: 0;
}

/* ============================================================
   STEP 2 — CALENDAR (per-dag-seksjoner)
   Åpen dag: versal-overskrift over 1.6px blekkstrek (målt),
   dagens serverte starttider som chips under (71px-kolonner,
   8px-gutter, 48 høye). Stengte dager er én dempet linje.
   ============================================================ */
.wcal-set {
  margin-bottom: 0;
}

.wcal-intro {
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 24px;
}

/* ---------- Dagsiderer (målt: pille 154.8 x 35.6, polstring 8/16,
   radius 200, fylt flate + hvit 700 14/19.6, venstrestilt, 24px ned
   til daglisten) ---------- */
.wcal-pager-row {
  display: none;
  margin: 0 0 24px;
}

/* Vises kun når det finnes en dag nummer 8 å bla til */
.wcal-set:has(.wcal-days > .wcal-day:nth-child(8)) .wcal-pager-row {
  display: flex;
}

.wcal-pager {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 154.8px;
  min-height: 35.6px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.4;
  color: var(--on-dark-1);
  background: var(--primary-cta);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: var(--elev-card);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wcal-pager:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wcal-pager:has(.wcal-pager-input:focus-visible) {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wcal-pager:hover {
    background: var(--primary-cta-hover);
  }
}

.wcal-pager-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wcal-pager-next,
.wcal-pager-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Side 1: dag 1–7 synlig, pillen peker framover */
.wcal-set:not(:has(.wcal-pager-input:checked)) .wcal-pager-prev,
.wcal-set:has(.wcal-pager-input:checked) .wcal-pager-next {
  display: none;
}

.wcal-set:not(:has(.wcal-pager-input:checked)) .wcal-days > .wcal-day:nth-child(n + 8) {
  display: none;
}

/* Side 2: dag 8–14 synlig, pillen peker tilbake */
.wcal-set:has(.wcal-pager-input:checked) .wcal-days > .wcal-day:nth-child(-n + 7) {
  display: none;
}

.wcal-days {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wcal-day-head {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  text-align: left;
  color: var(--text-1);
  border-bottom: var(--wz-ctl-border-w-sel) solid var(--text-1);
  padding: 0 0 12px;
  margin: 0 0 8px;
}

/* Stengt dag — samme versal-dagdel, resten dempet, ingen strek (målt) */
.wcal-day--closed {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  padding: 4px 0;
  margin: 0;
}

.wcal-day--closed .wcal-day-name {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
}

/* Time slots — auto-fill på 71px gir 6 per rad i 468-kolonnen og
   4 per rad på mobil (begge målt) */
.wcal-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(71px, 1fr));
  gap: 8px;
}

.wslot {
  display: flex;
  cursor: pointer;
}

.wslot-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 6px 4px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-1);
  background: #FFFFFF;
  border: var(--wz-ctl-border-w) solid var(--wz-border-light);
  border-radius: var(--wz-radius);
  box-shadow: var(--elev-card);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Tid = det man velger (nøytral blekk); pris = konsekvensen (heatmap-farge
   settes inline av bestill.js). Prisen er mindre — den underordner seg tiden. */
.wslot-time {
  font-size: var(--fs-body);
  line-height: 1.2;
}

.wslot-price {
  font-size: var(--fs-fine);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  transition: color 150ms ease;
}

.wslot-price:empty {
  display: none;
}

.wslot:active .wslot-face {
  transform: scale(0.97);
  opacity: 0.85;
}

/* Valgt chip: 1.6px oransje ramme (0.8 ramme + 0.8 innfelt ring — ingen
   layoutforskyvning), fet etikett, hvit flate (målt mønster) */
.wslot:has(input:checked) .wslot-face {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 0.8px var(--primary), var(--elev-card);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
}

.wslot:has(input:focus-visible) .wslot-face {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wslot:hover .wslot-face {
    border-color: var(--ink-300);
  }
}

/* ---------- Kalenderens tomtilstand (målt: varsel 17/24 sentrert,
   illustrasjon 104x104, 24px luft) ---------- */
.wcal-empty {
  display: flex;
  flex-direction: column-reverse; /* teksten over illustrasjonen (målt) */
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 0 0 24px;
}

.wcal-empty-icon {
  color: var(--ink-300);
}

.wcal-empty-text {
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  max-width: 44ch;
  margin: 0;
}

.wcal-loading {
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--wz-gray-2);
  text-align: center;
  margin: 18px 0;
}

/* Prisforklaring under rutenettet — vises kun når prisene faktisk spriker
   (bestill.js styrer [hidden]). Liten grønn prikk speiler heatmapets
   «grønt = rimeligst». */
.wcal-pricehint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: 16px 0 0;
}

.wcal-pricehint::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--heat-cheap);
}

/* ---------- Leveringsvindu-forklaring ---------- */
.wcal-note {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: 16px 0 0;
}

/* ============================================================
   STEP 2 — RESCUE-BOKS (referansens hasteboks: grå flate i
   kalenderkortet — polstring 24x32, radius 10, versal-overskrift,
   14px brødtekst, liten pille høyrejustert)
   ============================================================ */
.wrescue {
  background: var(--wz-page);
  border-radius: 10px;
  padding: 24px 32px;
  margin-top: 16px;
}

.wrescue-heading {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--text-1);
  margin: 0 0 4px;
}

.wrescue-sub {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-1);
  margin: 0 0 8px;
}

/* Steg 1 (teaser): liten pille, høyrejustert i boksen (målt) */
.wrescue-expand {
  display: block;
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.4;
  color: var(--on-dark-1);
  background: var(--primary-cta);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: var(--elev-card);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wrescue-expand:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wrescue-expand:hover {
    background: var(--primary-cta-hover);
  }
}

/* Steg 2 (utvidet skjema) — myk entré, samme bevegelse som stegene */
@media (prefers-reduced-motion: no-preference) {
  .wrescue-fields {
    animation: wstep-in 300ms ease-out;
  }
}

.wrescue-fields {
  margin-top: 16px;
}

.wrescue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.wrescue-btn {
  display: block;
  width: fit-content;
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.4;
  color: var(--on-dark-1);
  background: var(--primary-cta);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: var(--elev-card);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wrescue-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wrescue-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .wrescue-btn:hover:not(:disabled) {
    background: var(--primary-cta-hover);
  }
}

.wrescue-privacy {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-4);
  text-align: right;
  margin: 10px 0 0;
}

.wrescue-success {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--success-text);
  margin: 0;
}

/* ---------- Forventningslinje før kontaktkortet ----------
   Referansen har ingen tekst her — der står kortene 32px fra hverandre (§9).
   Linjen er vår egen konverteringsenhet og beholdes, men den skal koste minst
   mulig av kortrytmen: 8 over + 8 under er samme luftbånd som mobilen bruker,
   og linjen selv bærer resten av avstanden i stedet for å legge seg oppå den.
   Med 16 + 16 målte båndet 70px mot spekens 32 — to tekstlinjer (37,8px) kan
   ikke bo inne i 32px, så luften er det eneste som kan gi etter.
   Uten regelen under vinner kortets egen 32px-marg margin-collapse. */
.wexpect {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-2);
  text-align: center;
  max-width: 52ch;
  margin: 8px auto;
}

/* :not([hidden]) — for kontorrenhold er linjen skjult, og da skal kortet
   beholde sine fulle 32px mot kortet over. */
.wstep > .wexpect:not([hidden]) + .wcard {
  margin-top: 8px;
}

/* Vårt journey-hint under steg-1-innholdet — 14px-hjelpetekst i systemet */
.wjourney {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-2);
  text-align: center;
  margin: 24px 0 0;
}

/* Steg-1-CTA: kort variant på smale skjermer (godkjent fallback) */
.wcta-short {
  display: none;
}

@media (max-width: 430px) {
  .wcta-long {
    display: none;
  }

  .wcta-short {
    display: inline;
  }
}

/* ============================================================
   STEP 2 — CHECK ROWS / CONSENTS (målt: rader 42 høye, ikon 24,
   etikett 400 17, stables rett på hverandre)
   ============================================================ */
.wcheckrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 42px;
  padding: 4px 0;
  cursor: pointer;
}

.wcheckrow:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wcheckrow .wcheck {
  margin-top: 4px;
}

.wcheckrow-label {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-1);
  -webkit-hyphens: auto;
  hyphens: auto;
}

.wconsents {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

/* ---------- Rabattkode (kontaktkortet) — understreket lenke i
   lenkefargen (kartet: understreket tekst → --link) ---------- */
.wrabatt {
  margin-top: 16px;
}

.wrabatt-toggle {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--link);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.wrabatt-toggle:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wrabatt-toggle:hover {
    color: var(--link-hover);
  }
}

.wrabatt-box {
  margin-top: 14px;
}

.wrabatt-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wrabatt-row .wfield {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.wrabatt-btn {
  flex-shrink: 0;
  min-height: var(--wz-ctl-h);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--text-1);
  background: #FFFFFF;
  border: var(--wz-ctl-border-w) solid var(--wz-border);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.wrabatt-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wrabatt-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .wrabatt-btn:hover:not(:disabled) {
    border-color: var(--ink-300);
    background: var(--wz-page);
  }
}

.wrabatt-ok {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--success-text);
  margin: 10px 0 0;
}

/* ============================================================
   STEP 3 — PAYMENT PLAN (recurring fastvask) — valgkort-grammatikken:
   1.6px ramme, radius 8, kortskygge, valgt = oransje ramme
   ============================================================ */
.wplan-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 4px;
}

.wplan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: var(--wz-ctl-border-w-sel) solid var(--wz-border);
  border-radius: var(--wz-radius);
  overflow: hidden; /* bunnbanneret følger kortets radius */
  box-shadow: var(--elev-card);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wplan-card:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wplan-card:has(input:checked) {
  border-color: var(--primary);
}

.wplan-card:has(input:focus-visible) {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wplan-card:hover {
    border-color: var(--ink-300);
  }
}

.wplan-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
}

.wplan-eyebrow {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--text-1);
}

.wplan-figure {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-figure-lg);
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
  color: var(--text-1);
}

.wplan-unit {
  font-size: var(--fs-card-sub);
  letter-spacing: var(--ls-normal);
}

.wplan-year {
  font-size: var(--fs-fine);
  color: var(--text-4);
}

/* Spar-merke — mint pille forankret oppe til høyre (positiv tint) */
.wplan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-fine);
  line-height: 1;
  color: var(--success-text);
  background: var(--wz-green-tint);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  white-space: nowrap;
}

.wplan-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--wz-hairline);
}

.wplan-list li {
  position: relative;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  text-align: left;
  padding: 3px 0 3px 22px;
}

.wplan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: solid var(--wizard-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Populær-banner — mørk stripe i bunnen av månedspris-kortet */
.wplan-banner {
  display: block;
  margin-top: auto;
  background: var(--card-bg);
  color: var(--on-slate-1);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.35;
  text-align: center;
  padding: 9px 12px;
}

/* Plan-kortene stables under 560px */
@media (max-width: 559px) {
  .wplan-pair {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STEP 3 — SAMMENDRAG (grå innfelt boks: polstring 24x28,
   radius 8; rader i 17px-systemet)
   ============================================================ */
.wsummary {
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 24px 28px;
}

.wsum-heading {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--text-1);
  text-align: left;
  margin: 0 0 10px;
}

.wsum-desc {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  margin: 0 0 12px;
}

/* Row shape appended by JS into [data-out="sumRows"] / [data-out="klRows"] */
.wsum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--wz-gray-2);
  padding: 4px 0;
}

.wsum-row span:last-child {
  color: var(--text-1);
  white-space: nowrap;
}

.wsum-totalrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-top: 2px solid var(--text-1);
  margin-top: 12px;
  padding-top: 12px;
}

.wsum-total-label {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.wsum-total-value {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-figure-lg);
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
  color: var(--text-1);
}

.wsum-fine {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-4);
  margin: 14px 0 0;
}

/* Anker- og rabattrader i sammendraget */
.wsum-row--anchor span:last-child {
  color: var(--success-text);
  font-weight: var(--fw-semibold);
}

.wsum-row--rabatt span:last-child,
.wsb-price-row--rabatt span:last-child {
  color: var(--success-text);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ============================================================
   STEP 3 — PAYMENT METHODS — valgkort-grammatikken
   ============================================================ */
.wpays {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.wpay {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  background: #FFFFFF;
  border: var(--wz-ctl-border-w-sel) solid var(--wz-border);
  border-radius: var(--wz-radius);
  padding: 12px 16px;
  box-shadow: var(--elev-card);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpay:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wpay--method:has(input:checked) {
  border-color: var(--primary);
}

.wpay:has(input:focus-visible) {
  box-shadow: var(--ring-focus), var(--elev-card);
}

@media (hover: hover) and (pointer: fine) {
  .wpay--method:hover {
    border-color: var(--ink-300);
  }
}

.wpay-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wpay-name {
  font-size: var(--wz-fs-lead);
  line-height: 1.4;
  color: var(--text-1);
}

.wpay--method:has(input:checked) .wpay-name {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
}

.wpay-sub {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
}

.wpay--method:has(input:checked) .wpay-sub {
  color: var(--text-1);
}

.wpay-marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.wmark {
  display: block;
}

/* Klarna-merke — rosa badge med mørk tekst */
.wklarna-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  background: #FFB3C7;
  color: #17120F;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-fine);
  line-height: 1;
}

/* Vipps — stor oransje pille, hele raden er radioen */
.wpay--vipps {
  background: var(--primary-cta);
  border-color: var(--primary-cta);
  border-radius: var(--radius-pill);
  justify-content: center;
  min-height: 56px;
}

.wpay--vipps:has(input:checked) {
  box-shadow: 0 0 0 3px rgba(236, 104, 59, 0.28);
}

.wpay--vipps:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(236, 104, 59, 0.28), 0 0 0 6px rgba(78, 202, 34, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .wpay--vipps:hover {
    background: var(--primary-cta-hover);
    border-color: var(--primary-cta-hover);
  }
}

.wpay-vipps-face {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  color: var(--on-dark-1);
}

/* ---------- Midlertidig stengte betalingsmåter (founder 2026-10-26) ----------
   Vipps, kort og Klarna står synlige, men deaktivert (input[disabled]):
   dempet flate, ingen hover- eller trykkrespons, og et merke som sier
   hvorfor. Faktura er eneste aktive valg. Fjernes når betaling åpner. */
.wpay--disabled {
  cursor: not-allowed;
  background: var(--ctl-bg-disabled);
  box-shadow: none;
}

.wpay--disabled:active {
  transform: none;
  opacity: 1;
}

.wpay--disabled .wpay-name,
.wpay--disabled .wpay-sub,
.wpay--disabled .wpay-marks,
.wpay--disabled .wradio {
  opacity: 0.55;
}

.wpay--vipps.wpay--disabled {
  flex-wrap: wrap;
  gap: 4px 12px;
  border-color: var(--wz-border);
}

.wpay--vipps.wpay--disabled .wpay-vipps-face {
  color: var(--text-4);
}

@media (hover: hover) and (pointer: fine) {
  .wpay--method.wpay--disabled:hover {
    border-color: var(--wz-border);
  }

  .wpay--vipps.wpay--disabled:hover {
    background: var(--ctl-bg-disabled);
    border-color: var(--wz-border);
  }
}

.wpay-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 2px;
  padding: 2px 10px;
  border: 1px solid var(--wz-border);
  border-radius: var(--radius-pill);
  background: var(--ctl-bg);
  font-size: var(--fs-fine);
  line-height: 1.4;
  color: var(--text-3);
  white-space: nowrap;
}

.wpay--vipps .wpay-badge {
  align-self: center;
  margin-top: 0;
}

/* ---------- Logg inn med Vipps (steg 2, øverst i kontaktkortet) ----------
   Vipps offisiell merkevarefarge (--vipps-orange), ikke Renlis egen CTA-oransje
   — en betalingsleverandør-innlogging skal bære Vipps' eget merke slik brukeren
   kjenner det igjen. «Vipps» er tyngre enn resten. */
.wvipps-login {
  margin-bottom: 24px;
}

.wvipps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  background: var(--vipps-orange);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
  font-size: var(--fs-btn);
  line-height: 1.2;
  color: var(--on-dark-1);
  text-decoration: none;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.wvipps-word {
  font-weight: var(--fw-bold);
  margin-left: 0.35em;
}

.wvipps-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(78, 202, 34, 0.35);
}

.wvipps-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wvipps-btn:hover {
    background: var(--vipps-orange-hover);
  }
}

.wvipps-help {
  margin: 10px 0 0;
  font-size: var(--fs-helper);
  line-height: 1.4;
  color: var(--wz-gray-2);
  text-align: center;
}

.wvipps-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-helper);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.wvipps-check {
  flex-shrink: 0;
  color: var(--primary-cta);
}

/* ---------- Kortbetaling — grå innfelt boks (24x28, radius 8) ---------- */
.wkort {
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 24px 28px;
}

.wkort-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.wkort-heading {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--text-1);
}

.wkort-intro {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: 0 0 14px;
}

.wkort-note {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-1);
  margin: 14px 0 0;
}

/* Hva som skjer videre — delt av kort- og Klarna-panelet.
   Hvit gruppert liste på grå panelflate. */
.wpay-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: var(--wz-ctl-border-w) solid var(--wz-border);
  border-radius: var(--wz-radius);
  overflow: hidden;
}

.wpay-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--wz-hairline);
}

.wpay-step:last-child {
  border-bottom: none;
}

.wpay-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--wz-page);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-fine);
  line-height: 1;
  color: var(--text-1);
}

.wpay-step-text {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
}

/* ---------- Klarna — grå innfelt boks ---------- */
.wklarna {
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 24px 28px;
}

.wkl-heading {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--text-1);
  margin: 0 0 4px;
}

.wkl-intro {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: 0 0 14px;
}

/* Understreket tekst i løpende tekst → lenkefargen (kartet) */
.wsum-fine a,
.wlegal a {
  color: var(--link);
  text-decoration: underline;
  transition: color 150ms ease;
}

.wsum-fine a:active,
.wlegal a:active {
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wsum-fine a:hover,
  .wlegal a:hover {
    color: var(--link-hover);
  }
}

/* Beløpet som reserveres */
.wkl-amount {
  border-top: 1px solid var(--wz-border);
  margin-top: 16px;
  padding-top: 12px;
}

.wkl-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card-sub);
  color: var(--text-1);
}

.wkl-amount-row strong {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-figure-sm);
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-heading);
}

.wkl-amount-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

.wkl-mva {
  font-size: var(--fs-fine);
  color: var(--text-4);
}

.wkl-details-toggle {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-fine);
  /* --link måler 4.40:1 på --wz-page — under AA for 13px; --link-hover 5.8:1 */
  color: var(--link-hover);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.wkl-details-toggle:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wkl-details-toggle:hover {
    color: var(--text-1);
  }
}

.wkl-details {
  margin-top: 8px;
}

.wkl-details .wsum-row {
  font-size: var(--fs-fine);
}

/* Betal-CTA arver hovedpillen (oransje, høyrejustert, 45 høy) */

/* Legal + secure lines */
.wlegal {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-4);
  text-align: center;
  margin: 20px 0 12px;
}

.wsecure {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-4);
  text-align: center;
  margin: 12px 0 0;
}

.wsecure-lock {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--text-4);
}

/* ============================================================
   CONFIRMATION
   ============================================================ */
.wconfirm {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 32px;
}

.wconfirm-card {
  text-align: center;
  padding: 44px 32px 40px;
}

.wconfirm-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cta-green);
  color: #FFFFFF;
  margin-bottom: 18px;
}

.wconfirm-card .wsub {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.wconfirm-card .wcta {
  margin: 0 auto 12px;
}

.wconfirm-ref {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 14px 20px;
  margin: 0 0 24px;
}

.wconfirm-ref-label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-fine);
  color: var(--wz-gray-2);
}

.wconfirm-ref-value {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-figure-sm);
  color: var(--text-1);
  letter-spacing: var(--ls-eyebrow);
}

.wconfirm-ref-note {
  max-width: 38ch;
  margin: 10px auto 0;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
}

.wconfirm-error {
  margin: 10px 0 0;
}

/* ============================================================
   SIDEBAR (målt: 410 reservert; panel hvitt med radius 0 0 20 20 —
   flukter med toppen av visningsfeltet; mørk topp 64 høy (24x40);
   rader 17px med 40px sidepolstring; grå innfelte bokser 24x28
   med 12px sidemarg; sjekkliste på den grå flaten under panelet)
   ============================================================ */
/* Referansens sidefelt ruller ALLTID (overflow-y: scroll), så rullefeltet
   spiser 15.2px av de 410 reserverte: 410 − 16 − 16 − 15.2 = panelbredden
   362.8 (§4). Vår rulling er `auto` og reserverer ingenting, så gutteret
   settes eksplisitt — uten det måler panelet 378 og 40px-innrykket innenfor
   det peker på feil tekstkant (362.8 − 2 × 40 = 282.8 = målt radbredde). */
.wsidebar {
  padding: 0 calc(var(--wz-aside-w) - var(--wz-sb-panel-w) - 16px) 0 16px;
}

.wsb-panel {
  background: #FFFFFF;
  border-radius: 0 0 var(--wz-radius-card) var(--wz-radius-card);
  box-shadow: var(--elev-card);
  overflow: hidden;
  margin-bottom: 32px;
}

.wsb-head {
  display: flex;
  align-items: center;
  min-height: 64px;
  background: var(--card-bg);
  padding: 24px 40px;
}

.wsb-service {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--on-slate-1);
}

.wsb-body {
  background: #FFFFFF;
  padding: 12px 40px 24px;
}

.wsb-rows {
  display: flex;
  flex-direction: column;
}

/* Målt rad 1: frekvens venstre + varighet høyre på samme linje (mb 8) */
.wsb-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  margin-bottom: 8px;
}

/* Hele linjen bort når begge verdiradene er skjult (JS setter [hidden]
   per .wsb-row) — ellers står «Endre» alene igjen */
.wsb-line:not(:has(.wsb-row:not([hidden]))) {
  display: none;
}

.wsb-line .wsb-row {
  padding: 0;
}

.wsb-row--end {
  margin-left: auto;
}

.wsb-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}

/* Målt adresserad: nål + fet verdi, ~32px under inkludert-raden
   (24 marg + 8 radpolstring) */
.wsb-row--address {
  gap: 16px;
  margin-top: 24px;
}

.wsb-row--address .wsb-cell {
  flex: 1;
}

.wsb-row--address .wsb-value {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
}

.wsb-pin {
  flex-shrink: 0;
  color: var(--text-1);
}

.wsb-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wsb-label {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--wz-gray-2);
}

.wsb-value {
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* <button> reset — keeps the old link look */
.wsb-edit {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-helper);
  color: var(--wz-gray-2);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.wsb-edit:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wsb-edit:hover {
    color: var(--link);
  }
}

/* Verdianker — målt rad 2: hake + tekst (400 17/23.97) på HVIT flate,
   info-glyf 24x24 ytterst til høyre. Ikke lenger grå boks. */
.wsb-anchor {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--text-1);
  margin: 8px 0 0;
}

/* Haken er panelets aksentglyf, ikke et positivt varselikon: fargekartet gir
   aksentrollen --ink-900 (= --text-1), samme blekk som adressenålen i samme
   panel. --wz-green-deep står ikke i kartet for denne rollen. */
.wsb-anchor-check {
  flex-shrink: 0;
  color: var(--text-1);
}

.wsb-anchor-text {
  flex: 1;
  min-width: 0;
}

.wsb-anchor-info {
  flex-shrink: 0;
  color: var(--wz-gray-3);
}

.wsb-anchor-note {
  color: var(--text-4);
  font-size: var(--fs-fine);
  white-space: nowrap;
}

.wsb-prices {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

/* Prisrader finnes først på steg 3 — JS tømmer containeren med
   textContent = '' på steg 1–2. Uten dette blir flex-boksen stående igjen
   som en tom 8px-stripe (2 × 4px polstring) midt i panelet. */
.wsb-prices:empty {
  display: none;
}

/* Row shape appended by JS into [data-out="sbPriceRows"] */
.wsb-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--fs-helper);
  color: var(--wz-gray-2);
  padding: 5px 0;
}

.wsb-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-top: 2px solid var(--text-1);
  margin-top: 6px;
  padding: 12px 0 2px;
}

/* Barn-kombinator, ikke etterkommer: totalbeløpet ligger i en span INNE i
   <strong>, og en bred `.wsb-total span` ville satt tallet til etikettens
   størrelse mens «kr» ble stående på tallstørrelsen. */
.wsb-total > span {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.wsb-total strong {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-figure-lg);
  line-height: var(--lh-figure);
  letter-spacing: var(--ls-display);
  color: var(--text-1);
}

.wsb-quote-badge {
  font-weight: var(--fw-bold);
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--success-text);
  background: var(--wz-green-tint);
  border-radius: var(--wz-radius);
  padding: 24px 28px;
  margin: 16px -28px 0;
}

.wsb-note {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--text-2);
  background: var(--wz-page);
  border-radius: var(--wz-radius);
  padding: 24px 28px;
  margin: 16px -28px 0;
}

/* ---------- Sjekklisten — på den grå flaten UNDER panelet (målt:
   versal-overskrift, rader 400 17 uten skillelinjer, 40px rytme) ---------- */
.wsb-checklist {
  /* 40px sidepolstring = samme tekstkant som panelkroppen over (målt §4).
     Summary-radene bærer margin: 0 -8px som nuller deres egen 8px
     trykkpolstring, så etikettene lander eksakt på 40. */
  padding: 0 40px 56px;
}

.wsb-heading {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--wz-fs-overline);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  color: var(--wz-gray-2);
  margin: 0;
  padding: 8px 0;
}

.wacc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  min-height: 40px;
  font-size: var(--fs-body);
  line-height: 1.41;
  color: var(--wz-gray-2);
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: var(--wz-radius);
  cursor: pointer;
  transition: background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .wacc summary:hover {
    background: var(--ink-050);
  }
}

.wacc summary::-webkit-details-marker {
  display: none;
}

.wacc summary:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.wacc-chev {
  flex-shrink: 0;
  color: var(--wz-gray-3);
  transition: transform 200ms ease;
}

.wacc[open] .wacc-chev {
  transform: rotate(180deg);
}

.wacc-note {
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  margin: 0 0 6px;
}

.wacc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
}

.wacc-list li {
  position: relative;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-2);
  padding: 3px 0 3px 24px;
}

.wacc-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid var(--wizard-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* "Ikke inkludert" — neutral dash markers instead of green checks */
.wacc--not .wacc-list li::before {
  width: 10px;
  height: 0;
  border: none;
  border-top: 2px solid var(--ink-300);
  top: 12px;
  left: 1px;
  transform: none;
}

/* ============================================================
   FOOTER-RAD (målt: polstring 16, høyrejustert, lenker 400 14/18.9,
   tertiærgrå, «·»-skille, understrek ved hover)
   ============================================================ */
.wfooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  font-size: var(--fs-helper);
  line-height: 1.35;
  color: var(--wz-gray-3);
}

/* KI-opplysningen er en egen full rad under lenkeraden. Selektoren har
   høyere spesifisitet enn mobilens «.wfooter span { display: none }»,
   så linjen vises på alle bredder. */
.wfooter .wfooter-ai {
  display: block;
  flex-basis: 100%;
  text-align: right;
}

.wfooter a {
  color: var(--wz-gray-3);
  text-decoration: none;
  transition: text-decoration-color 150ms ease;
}

.wfooter a:active {
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .wfooter a:hover {
    text-decoration: underline;
  }
}

/* ============================================================
   DESKTOP-SIDEFELT: alltid full høyde med privat rulling —
   panelet flukter med toppen av visningsfeltet (målt oppførsel)
   ============================================================ */
@media (min-width: 1200px) {
  .wsidebar {
    position: sticky;
    top: 0;
    margin-top: calc(-1 * var(--wz-page-pad-top));
    height: 100vh;
    overflow-y: auto;
  }
}

/* ============================================================
   RESPONSIVE — under 1200 kollapser layouten til én kolonne:
   mørk topplinje + skuff erstatter sidefeltet
   ============================================================ */
@media (max-width: 1199px) {
  .wtop-brand {
    display: none;
  }

  .wbar {
    display: flex;
  }

  .wmain {
    padding: 24px 16px 56px;
  }

  .wlayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .wcol {
    max-width: var(--wz-col-w);
    margin-inline: auto;
    width: 100%;
  }

  .wsidebar {
    display: none;
  }

  /* Skuffen: hele flaten under den mørke toppen, egen rulling (målt).
     Panelets egen mørke topp skjules — toppen ER linjen med pillen. */
  .wsidebar.is-open {
    display: block;
    position: fixed;
    top: var(--wz-bar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--wz-page);
    overflow-y: auto;
    padding: 0 16px 32px;
  }

  .wsidebar.is-open .wsb-head {
    display: none;
  }
}

@media (max-width: 640px) {
  .wprogress {
    width: auto;
    margin: 12px 24px 0;
  }

  .wprog-step {
    font-size: var(--fs-helper);
    line-height: 1.4;
  }

  .wmain {
    padding: 0 0 48px;
  }

  /* Kort: full-bleed, polstring 32x24, radius 10, 16px rytme (målt) */
  .wcard {
    border-radius: var(--wz-radius-card-sm);
    padding: var(--wz-card-pad-sm);
  }

  .wstep > * + .wcard {
    margin-top: 16px;
  }

  /* Målt på 380: sporets underkant 132 → kortflatens topp 152 */
  .wstep > .wcard:first-child,
  .wstep > .wstep-head:first-child {
    margin-top: 20px;
  }

  /* Steg-CTA: full bredde innenfor kortets indre marger (målt 316.8).
     width:auto strekker ikke en <button> — eksplisitt calc må til.
     Målt på 380: kortets underkant 1446 → pillens overkant 1471 = 24px. */
  .wstep > .wcta {
    width: calc(100% - 48px);
    margin: 24px 24px 0;
  }

  .wcta--check {
    width: 100%;
    margin: 6px 0 0;
  }

  .wnav {
    flex-direction: column-reverse;
    align-items: stretch;
    margin: 16px 16px 0;
  }

  .wnav .wcta,
  .wnav .wback {
    width: 100%;
  }

  .wexpect,
  .wlegal,
  .wsecure,
  .wsubmit-error {
    margin-left: 24px;
    margin-right: 24px;
  }

  /* Samme regel som på desktop: båndet rundt forventningslinjen skal være
     nøyaktig ett kortmellomrom — 8 + 8 = mobilens målte 16px. */
  .wexpect {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .wstep > .wexpect:not([hidden]) + .wcard {
    margin-top: 8px;
  }

  .wservices {
    gap: 8px;
  }

  .wservice-face {
    min-height: 44px;
    font-size: var(--fs-card-sub);
    padding: 8px 14px;
  }

  .waddr-row,
  .wfield-row,
  .wrescue-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wrescue {
    padding: 20px 16px;
  }

  .wrabatt-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .wrabatt-btn {
    width: 100%;
  }

  .wconfirm {
    padding: 16px 16px 0;
  }

  .wfooter {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
  }

  .wfooter span {
    display: none;
  }

  /* Firmaopplysningene (juridisk linje) skal, som KI-linjen, aldri
     skjules av span-regelen over — høyere spesifisitet vinner. */
  .wfooter .wfooter-req {
    display: block;
    text-align: center;
  }

  .wfooter .wfooter-ai {
    text-align: center;
  }
}

/* ≤380px: valgkortene får bryte — 20px tittel + SPAR-blokken kan
   trenge to linjer. Felthøyden holdes på målt 62.35 også her. */
@media (max-width: 380px) {
  .wchoice {
    flex-wrap: wrap;
  }
}

/* ---------- Autoskroll — pusterom over målene ----------
   scroll-margin styrer landingspunktet for scrollIntoView(block:'start').
   På mobil ligger den mørke topplinjen øverst — målene må lande
   under den, ikke bak den. */
.wcard,
.wnav,
.wcta {
  scroll-margin-top: 16px;
}

@media (max-width: 1199px) {
  .wcard,
  .wnav,
  .wcta {
    scroll-margin-top: calc(var(--wz-bar-h) + 12px);
  }
}

/* ============================================================
   STEG 1 SOM SPØRSMÅLSKOLONNE — sentrert versallinje over hver
   kontroll, 48px blokkrytme (målt seksjonsrytme).
   `.wfield > label[for]` utelukker kontroll-etiketter strukturelt
   (.wswitch/.wcheckrow/.wservice/.wchoice/.waddon bærer aldri [for]),
   så versalene kan ikke lekke ned på en avkryssingstekst.
   Unntaksklassen .wgroup--form (kontor) bruker flytende etiketter.
   ============================================================ */
.wstep[data-step="1"] .wgroup:not(.wgroup--form) > .wfield > label[for],
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wlegend,
.wstep[data-step="1"] > .wcard > .wfieldset > .wlegend {
  display: block;
  font-family: var(--font-head);
  font-size: var(--wz-fs-overline);
  font-weight: var(--fw-bold);
  line-height: 16px;
  letter-spacing: var(--wz-ls-overline);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-1);
  margin: 0 0 var(--wz-gap-overline);
}

/* Utstyrsseksjonens versallinje står 24px over mint-boksen (målt), ikke 16
   som kontroll-versalene. Samme spesifisitet som regelen over + senere i
   kilden = vinner uavgjort uten vektoverstyring. */
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wlegend--info {
  margin-bottom: 24px;
}

.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wfield {
  margin-bottom: var(--wz-gap-block);
}

.wstep[data-step="1"] .wgroup:not(.wgroup--form) .winput-suffix,
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wfield--short,
.wstep[data-step="1"] .wgroup:not(.wgroup--form) > .wfield > select {
  margin-inline: auto;
}

/* .wstepper er inline-flex — margin-inline:auto er inert på en inline-boks.
   display:flex + width:fit-content gjør sentreringen ekte. Scopet til
   `> .wfield >` slik at .waddon-qty-raden holdes utenfor. */
.wstep[data-step="1"] .wgroup:not(.wgroup--form) > .wfield > .wstepper {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* .wswitch er inline-flex — justify-content på en shrink-to-fit-boks
   sentrerer ingenting; flex gjør sentreringen ekte. */
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wswitch {
  display: flex;
  justify-content: center;
}

.wstep[data-step="1"] .wgroup:not(.wgroup--form) .whint,
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .wtrust {
  text-align: center;
}

/* Referansens steg 1 går versallinje → kontroll → neste versallinje. En
   sentrert hjelpelinje i 14px-rampen blir en fjerde takt i den kadensen.
   Den flyttes derfor til finskriftrampen (13/17.5, --text-4 = 5.4:1 på
   hvitt) og legges tett inntil kontrollen den forklarer — innholdet står
   uansett i kontrollen selv: timevalget merker anbefalingen «(anbefalt)». */
.wstep[data-step="1"] .wgroup:not(.wgroup--form) .whint {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--text-4);
  margin-top: var(--sp-1);
}

.wstep[data-step="1"] .wgroup + .wgroup {
  margin-top: var(--wz-gap-block);
}