/* =====================================================================
   Svart/hvitt-rytme (sept. 2026)

   Siden er bygget lys-først i Astro, og så gjort mørk med en overstyring
   til slutt i _slug_.css. Denne fila lastes sist på alle sider.

   Fargene veksler annenhver seksjon. Toppmenyen er alltid hvit,
   toppbildet/sidebanneret og footeren alltid svart:

     forside    : hvit meny · S hero · H biler · S innbytte (skjema)
                  · H hvorfor · S kontakt (skjema) · H om oss · S footer
     biler      : S banner · H biler · S footer
     innbytte   : S banner · H skjema · S footer
     kontakt    : S banner · H kontakt · S footer
     om-oss     : S banner · H om oss · S hvorfor · S footer
     send-inn   : S banner · H steg · S skjema · S footer
     personvern : S banner · H tekst · S footer

   Hvit seksjon = klassen section--paper, svart = section--dark, satt i
   HTML-en. På forsiden står skjemaene i svarte seksjoner; på undersidene
   står de som svarte kort på hvite seksjoner. Denne fila retter bare
   det som er hardkodet i Astro: toppmenyen, skjemakortene, faktaboksen,
   tallene i «hvorfor» og filterknappene.

   «html body» foran hver regel er med vilje: Astro-reglene har
   [data-astro-cid-…] på hvert ledd og må slås på spesifisitet.
   ===================================================================== */


/* ---------- 1. Toppmenyen ---------------------------------------- */
html body .site-header[data-header]{
  --bg: var(--c-white-warm);
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-soft);
  --line: rgba(22, 23, 25, .12);
  --line-strong: rgba(22, 23, 25, .28);
  --surface: #ffffff;
  --focus: var(--c-ink);
  color-scheme: light;
  background: var(--c-white-warm);
  color: var(--c-ink);
  border-bottom-color: rgba(22, 23, 25, .12);
}
html body .site-header[data-header] .site-nav__list a{ color: var(--c-ink); }
html body .site-header[data-header] .site-header__phone{ color: var(--c-ink); }

html body .site-header[data-header] .site-header__call,
html body .site-header[data-header] .menu__button{
  color: var(--c-ink);
  border-color: rgba(22, 23, 25, .28);
}
html body .site-header[data-header] .site-header__call:hover,
html body .site-header[data-header] .menu__button:hover{ border-color: var(--c-ink); }

html body .site-header[data-header] .site-header__cta{
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white-warm);
  --btn-bg-hover: var(--c-graphite-2);
}

/* mobilmenyen som ruller ned fra toppmenyen */
html body .site-header[data-header] .menu__panel{
  background: var(--c-white-warm);
  color: var(--c-ink);
  border-top-color: rgba(22, 23, 25, .12);
}
html body .site-header[data-header] .menu__list a{ border-bottom-color: rgba(22, 23, 25, .12); }
html body .site-header[data-header] .menu__list a[aria-current=page]{ color: var(--c-ink-soft); }
html body .site-header[data-header] .menu__contact .eyebrow{ color: var(--c-ink-soft); }
html body .site-header[data-header] .menu__btn{
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white-warm);
  --btn-bg-hover: var(--c-graphite-2);
}
html body .site-header[data-header] .menu__btn--light{
  --btn-bg: #ffffff;
  --btn-fg: var(--c-ink);
  --btn-border: rgba(22, 23, 25, .28);
  --btn-bg-hover: var(--c-silver-light);
}


/* ---------- 2. Skjemaene: svart kort på hvit bakgrunn ---------- */
/* Seksjonen er hvit, men selve skjemakortet er svart med det originale
   mørke skjemautseendet. Mørke variabler settes på kortet, så alt inni
   (valg, fremdriftslinje, felt, feilmeldinger) bruker Astro sine
   originale mørke farger. */
html body .section--paper .contact__form,
html body .section--paper .tradein__form{
  --bg: var(--c-graphite);
  --fg: var(--c-white-warm);
  --fg-muted: var(--c-silver-dim);
  --line: rgba(190, 194, 199, .16);
  --line-strong: rgba(190, 194, 199, .4);
  --surface: var(--c-graphite-2);
  --focus: var(--c-silver-light);
  color-scheme: dark;
  background: var(--c-graphite);
  color: var(--c-white-warm);
  border-color: var(--c-graphite);
  box-shadow: 0 26px 50px -32px rgba(11, 11, 13, .6);
}
/* «Neste»/«Send»: mørk knapp ville forsvunnet på det svarte kortet */
html body .section--paper .contact__form .btn--primary,
html body .section--paper .tradein__form .btn--primary{
  --btn-bg: var(--c-silver-light);
  --btn-fg: var(--c-ink);
  --btn-bg-hover: #ffffff;
}


/* ---------- 2b. «Enkelt å kjøpe bil» på hvit bakgrunn ------------ */
/* Tallene 01–04 er sølvgrå, laget for svart bakgrunn — for svake på hvitt */
html body .section--paper .why__num{ color: var(--c-ink-soft); }


/* ---------- 3. «Fakta om selskapet» ------------------------------ */
html body .about .about__facts{
  --bg: #ffffff;
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-soft);
  --line: rgba(22, 23, 25, .12);
  color-scheme: light;
  border: 1px solid rgba(22, 23, 25, .12);
  box-shadow: 0 18px 40px -30px rgba(11, 11, 13, .35);
}


/* ---------- 4. «Biler og båter til salgs» ------------------------ */
/* aktiv filterknapp: lys på mørk bakgrunn → mørk på lys bakgrunn */
html body .section--paper .lot-chip.is-active{
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white-warm);
}
html body .section--paper .lot-chip.is-active span{ color: var(--c-silver); }
html body .section--paper .car-card{ box-shadow: 0 14px 34px -28px rgba(11, 11, 13, .4); }


/* ---------- 5. Åpningstider -------------------------------------- */
/* «Alle dager - Etter avtale» på én linje med én bindestrek, og hele
   linjen i samme dempede skrift. :nth-child(n) er bare for å slå
   Astro-reglene på spesifisitet. */
html body .contact .contact__hours > li:nth-child(n),
html body .site-footer .site-footer__hours > div:nth-child(n){
  justify-content: flex-start;
  align-items: baseline;
  gap: .45rem;
  max-width: none;
}
html body .contact .contact__hours > li:nth-child(n)::before,
html body .site-footer .site-footer__hours > div:nth-child(n)::before{
  content: "-";
  order: 1;
  flex: 0 0 auto;
}
html body .contact .contact__hours > li:nth-child(n) > span:first-child,
html body .site-footer .site-footer__hours > div:nth-child(n) > dt{ order: 0; }
html body .contact .contact__hours > li:nth-child(n) > span:last-child,
html body .site-footer .site-footer__hours > div:nth-child(n) > dd{
  order: 2;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* samme dempede farge som overskriften og «Alle dager» */
html body .contact .contact__hours > li:nth-child(n){ color: var(--fg-muted); }
html body .site-footer .site-footer__hours > div:nth-child(n){ color: var(--c-silver-dim); }
html body .contact .contact__hours > li:nth-child(n) > span,
html body .site-footer .site-footer__hours > div:nth-child(n) > dt,
html body .site-footer .site-footer__hours > div:nth-child(n) > dd{ color: inherit; }


/* ---------- 6. Bunnlinjen i footeren ----------------------------- */
html body .site-footer .site-footer__bottom{ align-items: flex-start; }
html body .site-footer .site-footer__orgnr{ display: block; }
html body .site-footer .site-footer__legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.1rem;
}
html body .site-footer .site-footer__legal a{ text-decoration: none; }
html body .site-footer .site-footer__legal a:hover{ text-decoration: underline; }
html body .site-footer .site-footer__totop{ white-space: nowrap; }


/* ---------- 7. Forsiden: «Se alle biler og båter» (v23) ---------- */
html body .lots__more{ display: flex; justify-content: center; margin-top: 1.75rem; }
html body .car-card__media > .car-card__placeholder{ height: 100%; }


/* ---------- 8. Bil fra Statens vegvesen i innbytteskjemaet (v25) --- */
/* Lyst kort inni det svarte skjemakortet, så bilillustrasjonen (laget for
   lys bakgrunn) og mørke biler synes. */
.bo-slot:empty{ display: none; }
.bo-slot{ margin: .25rem 0 1rem; }
.bo-car{
  background: var(--c-white-warm); color: var(--c-ink);
  border-radius: var(--r-2); overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.7);
}
.bo-demo{ margin: 0; padding: .55rem 1rem; background: #fff4d6; color: #6b4e00; font-size: .78rem; font-weight: 600; line-height: 1.4; }
.bo-top{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem .25rem; }
.bo-id{ min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.bo-q{ display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1f7a45; white-space: nowrap; }
.bo-q svg{ width: 14px; height: 14px; }
.bo-name{ font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.bo-meta{ font-size: .88rem; color: var(--c-ink-soft); }
.bo-stage{ flex: none; width: 210px; margin: -.4rem -.4rem -.6rem 0; }
.bo-stage svg{ display: block; width: 100%; height: auto; }
.bo-specs{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(22,23,25,.12); border-top: 1px solid rgba(22,23,25,.12); border-bottom: 1px solid rgba(22,23,25,.12); margin-top: .6rem; }
.bo-spec{ background: #fff; padding: .55rem .8rem; display: flex; flex-direction: column; min-width: 0; }
.bo-spec span{ font-family: var(--font-display); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7079; }
.bo-spec b{ font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-eu{ display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .7rem 1.1rem; background: #fff; border-bottom: 1px solid rgba(22,23,25,.12); font-size: .9rem; }
.bo-eu > svg{ flex: none; width: 18px; height: 18px; color: var(--c-ink); }
.bo-badge{ padding: .15rem .5rem; border-radius: 999px; background: #fff1c2; color: #6b4e00; font-size: .75rem; font-weight: 600; }
.bo-badge--bad{ background: #fde2e2; color: #9b1c1c; }
.bo-foot{ display: flex; gap: .45rem; margin: 0; padding: .7rem 1.1rem .2rem; background: #fff; font-size: .82rem; color: var(--c-ink-soft); }
.bo-foot svg{ flex: none; width: 15px; height: 15px; margin-top: 2px; }
.bo-src{ margin: 0; padding: 0 1.1rem .75rem 2.55rem; background: #fff; font-size: .72rem; color: #8a8f97; }
.bo-miss, .bo-loading{ display: flex; align-items: flex-start; gap: .55rem; padding: .75rem .9rem; border: 1px dashed var(--line-strong); border-radius: var(--r-2); font-size: .88rem; color: var(--fg-muted); }
.bo-miss svg{ flex: none; width: 16px; height: 16px; margin-top: 2px; }
.bo-spin{ flex: none; width: 15px; height: 15px; margin-top: 2px; border: 2px solid var(--line-strong); border-top-color: var(--fg); border-radius: 50%; animation: bo-spin .8s linear infinite; }
@keyframes bo-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .bo-spin{ animation: none; } }
@media (max-width: 560px){
  .bo-top{ flex-direction: column; align-items: stretch; gap: .2rem; padding: .9rem .9rem .2rem; }
  .bo-stage{ width: 82%; max-width: 280px; align-self: center; margin: .2rem 0 0; }
  .bo-specs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bo-eu, .bo-foot{ padding-left: .9rem; padding-right: .9rem; }
  .bo-src{ padding-left: 2.35rem; }
}


/* ---------- 9. Innbytteveiviseren på /innbytte/ (v26) ------------- */
/* Samme oppsett som timebestillingen på breilibil.no og AutoCare:
   hvitt stegkort til venstre, «Ditt innbytte» til høyre. Breili-farger:
   svart/hvitt, Archivo i titler. */
.ib-section{ padding-top: clamp(2rem, 4vw, 3.5rem); }
.ib-layout{ display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px){ .ib-layout{ grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; } .ib-aside{ position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.ib-card, .ib-sum-card{ background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(11,11,13,.04), 0 14px 34px -24px rgba(11,11,13,.35); }
.ib-card{ padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.ib-progress p{ margin: 0 0 .6rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.ib-bar{ height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 1.75rem; }
.ib-bar span{ display: block; height: 100%; background: var(--c-ink); transition: width var(--t-slow) var(--ease); }
.ib-title{ display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.ib-title:focus{ outline: none; }
.ib-num{ flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-silver-light); color: var(--fg-muted); font-family: var(--font-display); font-size: .85rem; font-weight: 600; }
.ib-num--on{ background: var(--c-ink); color: #fff; }
.ib-num--done{ background: #e8f3ec; color: #1f7a45; }
.ib-num svg{ width: 14px; height: 14px; }
.ib-lead{ margin: 0 0 1.25rem; color: var(--fg-muted); max-width: 60ch; }
.ib-step--open{ padding-bottom: 1.5rem; }
.ib-step--done, .ib-step--todo{ display: flex; align-items: center; gap: .75rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.ib-step--todo{ color: #9a9da2; font-family: var(--font-display); font-weight: 500; }
.ib-step--done + .ib-step--open, .ib-step--open + .ib-step--todo{ border-top: 1px solid var(--line); }
.ib-step--done + .ib-step--open{ padding-top: 1.25rem; }
.ib-done-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-done-text b{ font-family: var(--font-display); font-size: .95rem; }
.ib-done-text span{ font-size: .88rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-link{ background: none; border: 0; padding: .35rem 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ib-link:hover{ text-decoration-thickness: 2px; }
.ib-alt{ margin: .5rem 0 1rem; }

/* felt */
.ib-fields{ display: grid; gap: 1rem 1.25rem; }
@media (min-width: 640px){ .ib-fields{ grid-template-columns: 1fr 1fr; } .ib-field--full{ grid-column: 1 / -1; } }
.ib-field{ display: grid; gap: .4rem; margin-bottom: 1rem; min-width: 0; }
.ib-fields .ib-field{ margin-bottom: 0; }
.ib-field--half{ max-width: 340px; }
.ib-field label{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.ib-field label span{ font-family: var(--font-body); font-weight: 400; color: var(--fg-muted); font-size: .88rem; }
.ib-field input, .ib-field textarea{ width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: #fff; color: var(--c-ink); font: inherit; font-size: 1rem; }
.ib-field textarea{ min-height: 96px; resize: vertical; }
.ib-field input:focus, .ib-field textarea:focus{ outline: 2px solid var(--c-ink); outline-offset: 1px; border-color: var(--c-ink); }
.ib-suffix{ position: relative; }
.ib-suffix input{ padding-right: 3rem; }
.ib-suffix span{ position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--fg-muted); font-size: .92rem; }
.ib-err{ margin: 0; min-height: 0; font-size: .85rem; color: #9b1c1c; }
.ib-err:empty{ display: none; }

/* skiltet */
.ib-plate{ position: relative; display: flex; align-items: stretch; max-width: 460px; border: 3px solid var(--c-ink); border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #fff, 0 6px 18px -12px rgba(0,0,0,.5); }
.ib-plate:focus-within{ box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(22,23,25,.18); }
.ib-plate-flag{ flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 52px; background: #003399; border-radius: 6px 0 0 6px; color: #fff; }
.ib-plate-flag svg{ width: 26px; height: 19px; }
.ib-plate-flag b{ font-family: var(--font-display); font-size: .9rem; }
.ib-field .ib-plate-input{ min-height: 64px; border: 0; border-radius: 0; outline: none; }
.ib-field .ib-plate-input{ flex: 1; min-width: 0; border: 0; background: transparent; padding: .4rem 1rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); letter-spacing: .08em; color: var(--c-ink); text-transform: uppercase; }
.ib-field .ib-plate-input:focus{ outline: none; border: 0; }
.ib-plate-input::placeholder{ color: #c4c7cb; }
.ib-plate-ok{ position: absolute; top: -10px; right: -10px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1f7a45; color: #fff; box-shadow: 0 0 0 3px #fff; }
.ib-plate-ok svg{ width: 14px; height: 14px; }
.ib-plate.ok .ib-plate-ok{ display: grid; }
.ib-car{ max-width: 560px; margin-top: .9rem; }
.ib-car:empty{ display: none; }
.ib-car .bo-car{ border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(11,11,13,.45); }
.ib-car .bo-miss, .ib-car .bo-loading{ color: var(--fg-muted); }

/* svarvalg */
.ib-q{ margin: 0 0 1.35rem; }
.ib-q-title{ margin: 0 0 .65rem; font-weight: 600; }
.ib-q-title small{ display: block; font-weight: 400; font-size: .88rem; color: var(--fg-muted); margin-top: .1rem; }
.ib-pills{ display: flex; flex-wrap: wrap; gap: .5rem; }
.ib-pill{ display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1rem .55rem .7rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--c-ink); font: inherit; font-size: .95rem; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ib-pill:hover{ border-color: var(--c-ink); }
.ib-pill-box{ flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #b9bcc1; color: transparent; }
.ib-pill-box svg{ width: 12px; height: 12px; }
.ib-pill.on{ border-color: var(--c-ink); background: #f1f1ee; font-weight: 600; }
.ib-pill.on .ib-pill-box{ background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ib-cars{ display: grid; gap: .5rem; }
@media (min-width: 640px){ .ib-cars{ grid-template-columns: 1fr 1fr; } }
.ib-carpick{ display: flex; align-items: center; gap: .75rem; padding: .5rem; border: 1.5px solid var(--line); border-radius: var(--r-3); background: #fff; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.ib-carpick:hover{ border-color: var(--line-strong); }
.ib-carpick.on{ border-color: var(--c-ink); background: #f1f1ee; }
.ib-carpick img, .ib-carpick-ph{ flex: none; width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-2); background: var(--c-silver-light); }
.ib-carpick-ph{ display: grid; place-items: center; font-family: var(--font-display); color: var(--fg-muted); }
.ib-carpick b{ display: block; font-family: var(--font-display); font-size: .92rem; line-height: 1.25; }
.ib-carpick small{ display: block; font-size: .82rem; color: var(--fg-muted); }

/* knapper og hjelp */
.ib-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.ib-next{ display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1.5rem; border: 0; border-radius: var(--r-1); background: var(--c-ink); color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.ib-next:hover{ background: var(--c-graphite-2); }
.ib-next svg{ width: 16px; height: 16px; }
.ib-next[aria-disabled="true"]{ background: #c9cbcf; color: #fff; }
@media (max-width: 560px){ .ib-next{ width: 100%; justify-content: center; } }
.ib-status{ margin: 1rem 0 0; padding: .75rem .9rem; border-radius: var(--r-2); background: #fde2e2; color: #7a1414; font-size: .92rem; }
.ib-consent{ margin: 1rem 0 0; font-size: .85rem; color: var(--fg-muted); }
.ib-help{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.ib-help p{ margin: 0; font-size: .9rem; color: var(--fg-muted); }
.ib-help a{ display: inline-flex; align-items: center; gap: .5rem; margin: .3rem 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--c-ink); text-decoration: none; }
.ib-help a svg{ width: 18px; height: 18px; }

/* oppsummering */
.ib-sum-card{ padding: 1.4rem 1.5rem; }
.ib-sum-card h2{ margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.15rem; }
.ib-sum-row{ padding: .8rem 0; border-top: 1px solid var(--line); }
.ib-sum-row:first-child{ border-top: 0; padding-top: 0; }
.ib-sum-row > span{ display: block; margin-bottom: .35rem; font-family: var(--font-display); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.ib-sum-row p{ margin: 0; font-size: .92rem; }
.ib-sum-car{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; }
.ib-sum-car b{ font-family: var(--font-display); }
.ib-sum-sub{ color: var(--fg-muted); font-size: .86rem !important; margin-top: .25rem !important; }
.ib-sum-empty{ margin: 0; font-size: .92rem; color: var(--fg-muted); }
.ib-mini-plate{ display: inline-flex; align-items: center; border: 1.5px solid var(--c-ink); border-radius: 4px; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: .92rem; letter-spacing: .06em; }
.ib-mini-plate i{ font-style: normal; align-self: stretch; display: grid; place-items: center; padding: 0 .3rem; background: #003399; color: #fff; font-size: .62rem; }
.ib-mini-plate{ padding-right: .45rem; gap: .4rem; }
.ib-trust{ list-style: none; margin: 1.1rem 0 0; padding: 0 .25rem; display: grid; gap: .75rem; }
.ib-trust li{ display: flex; gap: .6rem; font-size: .9rem; color: var(--fg-muted); }
.ib-trust li svg{ flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--c-ink); }
.ib-trust b{ display: block; color: var(--c-ink); font-weight: 600; }

/* kvittering */
.ib-done{ padding: 1rem 0; }
.ib-done:focus{ outline: none; }
.ib-done-check{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e8f3ec; color: #1f7a45; margin-bottom: 1rem; }
.ib-done-check svg{ width: 26px; height: 26px; }
.ib-done h2{ margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.8rem; }
.ib-done p{ color: var(--fg-muted); max-width: 52ch; }
.ib-preview{ padding: .6rem .8rem; border: 1px dashed var(--line-strong); border-radius: var(--r-1); font-size: .85rem; }
.ib-done-btns{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.ib-done-btns .btn--primary{ --btn-bg: var(--c-ink); --btn-fg: #fff; --btn-bg-hover: var(--c-graphite-2); }
.ib-done-btns .btn--ghost-dark{ --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--line-strong); --btn-bg-hover: rgba(22,23,25,.06); }
@media (max-width: 559px){ .ib-card{ border-radius: 10px; } .ib-plate-flag{ width: 44px; } }