/* ==========================================================================
   Vantera — betaalschermen
   Eén stylesheet voor alle schermen. Geen build-stap, geen framework,
   geen externe lettertypen of afbeeldingen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kleuren, maten en schaduwen
   -------------------------------------------------------------------------- */
:root {
  /* Merk */
  --vt-oranje:          #E8501F;  /* primaire knop, accenten */
  --vt-oranje-hover:    #D8480F;  /* muis erover */
  --vt-oranje-actief:   #C2410C;  /* ingedrukt */
  --vt-oranje-zacht:    #FFF7ED;  /* zacht vlak */
  --vt-oranje-rand:     #FBD9C9;  /* rand op zacht vlak */

  /* Neutraal */
  --vt-inkt:            #0F172A;  /* koppen, bedragen */
  --vt-tekst:           #475569;  /* lopende tekst */
  --vt-grijs:           #64748B;  /* secundaire tekst */
  --vt-grijs-licht:     #94A3B8;  /* meta, datums */
  --vt-rand:            #E2E8F0;  /* randen */
  --vt-rand-zacht:      #F1F5F9;  /* scheidingslijnen */
  --vt-vlak:            #F8FAFC;  /* achtergrondvlak */
  --vt-wit:             #FFFFFF;

  /* Status */
  --vt-groen:           #047857;  /* betaald / gelukt */
  --vt-groen-vlak:      #ECFDF5;
  --vt-groen-rand:      #A7F3D0;
  --vt-geel:            #B45309;  /* in verwerking / let op */
  --vt-geel-vlak:       #FEF7E0;
  --vt-geel-rand:       #FDE68A;
  --vt-rood:            #B3261E;  /* verlopen / fout */
  --vt-rood-vlak:       #FEF2F2;
  --vt-rood-rand:       #FECACA;

  /* Maten */
  --vt-radius:          14px;
  --vt-radius-klein:    10px;
  --vt-radius-pil:      999px;
  --vt-raak:            48px;     /* minimale hoogte aanraakvlak (>= 44px) */
  --vt-max:             1080px;   /* maximale paginabreedte */

  /* Schaduwen */
  --vt-schaduw:         0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .05);
  --vt-schaduw-hoog:    0 14px 34px rgba(15, 23, 42, .12);
  --vt-schaduw-knop:    0 6px 16px rgba(232, 80, 31, .30);
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vt-vlak);
  color: var(--vt-tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--vt-inkt); letter-spacing: -.02em; margin: 0; }
h1 { font-size: 22px; font-weight: 800; }
h2 { font-size: 16px; font-weight: 800; }
h3 { font-size: 14px; font-weight: 700; }
p  { margin: 0; }

a { color: var(--vt-oranje); text-decoration: none; }
a:hover { color: var(--vt-oranje-hover); text-decoration: underline; }

/* Zichtbare focus voor toetsenbordgebruik */
:focus-visible { outline: 3px solid rgba(232, 80, 31, .45); outline-offset: 2px; border-radius: 8px; }

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

/* --------------------------------------------------------------------------
   3. Koptekst
   -------------------------------------------------------------------------- */
.kop {
  background: var(--vt-wit);
  border-bottom: 1px solid var(--vt-rand);
}

.kop__binnen {
  max-width: var(--vt-max);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.kop__merk { display: flex; align-items: center; gap: 10px; }

.kop__logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #F58A5C 0%, var(--vt-oranje) 48%, #B23A0B 100%);
  color: var(--vt-wit);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(232, 80, 31, .32);
}

.kop__naam { font-size: 15px; font-weight: 800; color: var(--vt-inkt); letter-spacing: -.01em; }
.kop__sub  { display: block; font-size: 11px; font-weight: 600; color: var(--vt-grijs-licht); letter-spacing: .04em; text-transform: uppercase; }
.kop__klant { font-size: 12.5px; color: var(--vt-grijs); text-align: right; }
.kop__klant strong { display: block; color: var(--vt-inkt); font-size: 13px; }

/* --------------------------------------------------------------------------
   4. Paginaraamwerk
   -------------------------------------------------------------------------- */
.pagina { max-width: var(--vt-max); margin: 0 auto; padding: 20px 18px 40px; }

.pagina__titel { margin-bottom: 4px; }
.pagina__uitleg { font-size: 13.5px; color: var(--vt-grijs); margin-bottom: 18px; }

/* Twee kolommen vanaf 900px; daaronder onder elkaar (mobiel eerst) */
.kolommen { display: grid; gap: 16px; }

@media (min-width: 900px) {
  .kolommen { grid-template-columns: minmax(0, 1fr) 356px; align-items: start; gap: 20px; }
}

/* --------------------------------------------------------------------------
   5. Kaart
   -------------------------------------------------------------------------- */
.kaart {
  background: var(--vt-wit);
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius);
  box-shadow: var(--vt-schaduw);
  overflow: hidden;
}

.kaart__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vt-rand-zacht);
}

.kaart__body { padding: 16px 18px; }

/* --------------------------------------------------------------------------
   6. Meldingen (fout, let op, informatie)
   -------------------------------------------------------------------------- */
.melding {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--vt-wit);
}

.melding__icoon {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--vt-radius-pil);
  display: grid; place-items: center;
  background: var(--vt-rand-zacht); color: var(--vt-grijs);
}

.melding__titel { font-size: 14px; font-weight: 800; color: var(--vt-inkt); }
.melding__tekst { font-size: 13px; color: var(--vt-tekst); margin-top: 2px; }

.melding--fout          { background: var(--vt-rood-vlak); border-color: var(--vt-rood-rand); }
.melding--fout .melding__icoon { background: #FEE2E2; color: var(--vt-rood); }
.melding--fout .melding__titel { color: var(--vt-rood); }

.melding--letop         { background: var(--vt-geel-vlak); border-color: var(--vt-geel-rand); }
.melding--letop .melding__icoon { background: #FDE9C8; color: var(--vt-geel); }
.melding--letop .melding__titel { color: var(--vt-geel); }

.melding--info          { background: var(--vt-vlak); }

/* Lijst met al gemelde facturen binnen een waarschuwing */
.gemeld-lijst { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }

.gemeld-lijst li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: rgba(255, 255, 255, .70);
  border: 1px solid var(--vt-geel-rand);
  border-radius: var(--vt-radius-klein);
  padding: 8px 11px;
}

.gemeld-lijst__nr   { font-size: 12.5px; font-weight: 800; color: var(--vt-inkt); }
.gemeld-lijst__datum{ font-size: 11.5px; color: var(--vt-geel); }

/* --------------------------------------------------------------------------
   7. Factuurregels
   -------------------------------------------------------------------------- */
.facturen { display: block; }

.factuur {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: var(--vt-raak);
  padding: 14px 18px;
  border-top: 1px solid var(--vt-rand-zacht);
  cursor: pointer;
  transition: background .15s ease;
}

.factuur:first-child { border-top: 0; }
.factuur:hover { background: var(--vt-vlak); }
.factuur:active { background: var(--vt-rand-zacht); }

/* Aangevinkt: zachte oranje markering (werkt zonder JS) */
.factuur:has(.factuur__vink:checked) { background: var(--vt-oranje-zacht); }
.factuur:has(.factuur__vink:checked):hover { background: #FFF1E7; }

.factuur__vink {
  width: 22px; height: 22px;
  accent-color: var(--vt-oranje);
  cursor: pointer;
  margin: 0;
}

.factuur__info { min-width: 0; }

.factuur__titel {
  font-size: 14.5px; font-weight: 700; color: var(--vt-inkt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.factuur__meta {
  font-size: 12px; color: var(--vt-grijs-licht);
  margin-top: 2px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

.factuur__bedrag {
  font-size: 15px; font-weight: 800; color: var(--vt-inkt);
  white-space: nowrap; text-align: right;
}

.factuur--uit { opacity: .62; }
.factuur--uit .factuur__vink { cursor: not-allowed; }

/* Statuslabel: "In verwerking", "Verlopen" of niets */
.label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--vt-rand-zacht); color: var(--vt-grijs);
}

.label--verwerking { background: var(--vt-geel-vlak); color: var(--vt-geel); }
.label--verlopen   { background: var(--vt-rood-vlak); color: var(--vt-rood); }
.label--betaald    { background: var(--vt-groen-vlak); color: var(--vt-groen); }

/* --------------------------------------------------------------------------
   8. Betaalmethodes (geen banklijst — bank kiest de klant bij iDEAL zelf)
   -------------------------------------------------------------------------- */
.methodes { display: grid; gap: 10px; }

.methode {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: var(--vt-raak);
  padding: 14px 16px;
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius);
  background: var(--vt-wit);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.methode:hover { border-color: var(--vt-inkt); }
.methode:active { background: var(--vt-vlak); }

.methode__radio { width: 20px; height: 20px; accent-color: var(--vt-oranje); margin: 1px 0 0; cursor: pointer; }

/* Gekozen methode */
.methode:has(.methode__radio:checked) {
  border-color: var(--vt-oranje);
  background: var(--vt-oranje-zacht);
  box-shadow: 0 0 0 1px var(--vt-oranje) inset;
}

.methode__regel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.methode__naam { font-size: 14.5px; font-weight: 800; color: var(--vt-inkt); }
.methode__uitleg { font-size: 12.5px; color: var(--vt-grijs); margin-top: 3px; }
.methode__extra { font-size: 12px; color: var(--vt-grijs); margin-top: 8px; display: flex; align-items: center; gap: 8px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--vt-radius-pil);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}

.badge--gratis { background: var(--vt-groen-vlak); color: var(--vt-groen); }
.badge--kosten { background: var(--vt-geel-vlak); color: var(--vt-geel); }

/* Enige methode: geen keuze, alleen tonen wat er gebeurt */
.methode--enig {
  grid-template-columns: 34px minmax(0, 1fr);
  border-color: var(--vt-oranje-rand);
  background: var(--vt-oranje-zacht);
  cursor: default;
}

.methode--enig:hover { border-color: var(--vt-oranje-rand); }
.methode--enig:active { background: var(--vt-oranje-zacht); }

.methode__icoon {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--vt-radius-klein);
  background: var(--vt-wit); color: var(--vt-oranje);
  display: grid; place-items: center;
  border: 1px solid var(--vt-oranje-rand);
}

/* Plek voor het officiële iDEAL-merkteken (los SVG-bestand van iDEAL zelf) */
.merk-ideal {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 46px; padding: 0 8px;
  border: 1px solid var(--vt-rand); border-radius: 6px;
  background: var(--vt-wit);
  font-size: 11px; font-weight: 800; color: var(--vt-inkt); letter-spacing: -.02em;
}

.merk-ideal__logo { height: 18px; width: auto; display: block; }
.merk-ideal__terugval { display: none; }

.merk-ideal--groot { height: 44px; min-width: 92px; padding: 0 12px; border-radius: 10px; font-size: 15px; }
.merk-ideal--groot .merk-ideal__logo { height: 30px; }

/* Het officiële iDEAL | Wero-merkteken heeft een eigen geel vlak met rand.
   Staat dat in ons kadertje, dan zie je twee randen om elkaar heen; de
   merkregels vragen bovendien vrije ruimte rondom. Deze variant laat het
   kader dus weg. Valt het logo weg (bestand ontbreekt), dan haalt de
   onerror-afhandeling deze klasse eraf en verschijnt het kader met tekst. */
.merk-ideal--beeld { height: auto; min-width: 0; padding: 0; border: 0; background: none; }
.merk-ideal--groot.merk-ideal--beeld .merk-ideal__logo { height: 40px; }

/* --------------------------------------------------------------------------
   9. Samenvatting (plakt mee op breed scherm)
   LET OP: geef geen enkele ouder van .samenvatting een `transform`,
   `filter` of `perspective` — dan werkt `position: sticky` niet meer.
   Gebruik hier ook nooit `position: fixed`: het blok hoort mee te schuiven.
   -------------------------------------------------------------------------- */
.samenvatting { position: static; }

@media (min-width: 900px) {
  .samenvatting { position: sticky; top: 20px; }
}

.som { display: grid; gap: 9px; }

.som__regel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.som__label { color: var(--vt-grijs); }
.som__waarde { font-weight: 700; color: var(--vt-inkt); white-space: nowrap; }
.som__toelichting { font-size: 11.5px; color: var(--vt-grijs-licht); margin-top: -4px; }

.som__streep { height: 1px; background: var(--vt-rand-zacht); margin: 3px 0; }

.som__totaal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.som__totaal .som__label { font-size: 13.5px; font-weight: 700; color: var(--vt-inkt); }
.som__totaal .som__waarde { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }

/* Ontvangergegevens onder de knop */
.ontvanger {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--vt-rand);
  font-size: 12px; color: var(--vt-grijs); line-height: 1.6;
}

.ontvanger__naam { font-weight: 800; color: var(--vt-inkt); font-size: 12.5px; }
.ontvanger__rij { display: flex; justify-content: space-between; gap: 10px; }
.ontvanger__rij span:last-child { color: var(--vt-tekst); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Knoppen — alle toestanden
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--vt-raak);
  padding: 0 18px;
  border: 1px solid var(--vt-rand);
  border-radius: 12px;
  background: var(--vt-wit);
  color: var(--vt-inkt);
  font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.knop:hover { border-color: var(--vt-inkt); box-shadow: 0 6px 16px rgba(15, 23, 42, .10); text-decoration: none; }
.knop:active { transform: translateY(1px); box-shadow: none; }

.knop--vol { width: 100%; }

.knop--primair {
  border-color: transparent;
  background: var(--vt-oranje);
  color: var(--vt-wit);
  box-shadow: var(--vt-schaduw-knop);
}

.knop--primair:hover { background: var(--vt-oranje-hover); box-shadow: 0 8px 22px rgba(232, 80, 31, .38); }
.knop--primair:active { background: var(--vt-oranje-actief); }

.knop--stil { border-color: transparent; background: transparent; color: var(--vt-grijs); }
.knop--stil:hover { background: var(--vt-rand-zacht); border-color: var(--vt-rand); color: var(--vt-inkt); box-shadow: none; }
.knop--stil:active { background: #E9EEF4; transform: translateY(1px); }
.knop--stil:focus-visible { outline: 2px solid var(--vt-oranje); outline-offset: 2px; }

/* Uitgeschakeld */
.knop:disabled,
.knop[aria-disabled="true"] {
  background: var(--vt-rand-zacht);
  border-color: var(--vt-rand);
  color: var(--vt-grijs-licht);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Laadt — na de klik, voorkomt dubbel klikken */
.knop.is-laden { pointer-events: none; opacity: .92; }
.knop.is-laden .knop__tekst { opacity: .85; }

.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: var(--vt-wit);
  border-radius: var(--vt-radius-pil);
  animation: draai .7s linear infinite;
}

.spinner--donker { border-color: rgba(15, 23, 42, .20); border-top-color: var(--vt-inkt); }

@keyframes draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  * { transition-duration: .01ms !important; }
}

.knoprij { display: flex; flex-wrap: wrap; gap: 10px; }
.knoprij .knop { flex: 1 1 180px; }

/* --------------------------------------------------------------------------
   11. QR-scherm
   -------------------------------------------------------------------------- */
.qr-blok { display: grid; gap: 16px; }

@media (min-width: 760px) {
  .qr-blok { grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
}

.qr__kader {
  background: var(--vt-wit);
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius);
  padding: 14px;
  box-shadow: var(--vt-schaduw);
  display: grid; gap: 10px; justify-items: center;
}

.qr__code { width: 100%; max-width: 204px; height: auto; display: block; border-radius: 4px; }
.qr__hint { font-size: 11.5px; color: var(--vt-grijs-licht); text-align: center; }

.gegevens { display: grid; gap: 8px; }

.gegeven {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px;
  padding: 9px 12px;
  background: var(--vt-vlak);
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius-klein);
}

.gegeven__label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-grijs-licht); }
.gegeven__waarde { font-size: 14px; font-weight: 700; color: var(--vt-inkt); letter-spacing: .01em; }
.gegeven__waarde--groot { font-size: 17px; }

.kopieer {
  min-height: 40px; min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--vt-rand);
  border-radius: 9px;
  background: var(--vt-wit);
  font: inherit; font-size: 12px; font-weight: 700; color: var(--vt-inkt);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}

.kopieer:hover { border-color: var(--vt-inkt); }
.kopieer:active { background: var(--vt-vlak); }
.kopieer.is-gekopieerd { border-color: var(--vt-groen-rand); background: var(--vt-groen-vlak); color: var(--vt-groen); }

/* --------------------------------------------------------------------------
   12. Uitkomstschermen (gelukt / in verwerking / bedankt)
   -------------------------------------------------------------------------- */
.uitkomst { max-width: 560px; margin: 0 auto; text-align: center; }

.uitkomst__icoon {
  width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: var(--vt-radius-pil);
  display: grid; place-items: center;
  background: var(--vt-rand-zacht); color: var(--vt-grijs);
}

.uitkomst__icoon--gelukt { background: var(--vt-groen-vlak); color: var(--vt-groen); box-shadow: 0 0 0 8px rgba(4, 120, 87, .06); }
.uitkomst__icoon--wacht  { background: var(--vt-geel-vlak); color: var(--vt-geel); box-shadow: 0 0 0 8px rgba(180, 83, 9, .06); }
.uitkomst__icoon--dank   { background: var(--vt-oranje-zacht); color: var(--vt-oranje); box-shadow: 0 0 0 8px rgba(232, 80, 31, .06); }

.uitkomst h1 { font-size: 24px; }
.uitkomst__tekst { font-size: 14.5px; color: var(--vt-tekst); margin-top: 8px; }

.bon { margin-top: 20px; text-align: left; }
.bon__regel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--vt-rand-zacht); font-size: 13.5px; }
.bon__regel:first-child { border-top: 0; }
.bon__label { color: var(--vt-grijs); }
.bon__waarde { font-weight: 700; color: var(--vt-inkt); text-align: right; }

.stappen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }

.stappen li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--vt-tekst); }

.stappen__nr {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--vt-radius-pil);
  background: var(--vt-inkt); color: var(--vt-wit);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800;
}

/* --------------------------------------------------------------------------
   13. Doorstuurscherm
   -------------------------------------------------------------------------- */
.doorsturen { max-width: 460px; margin: 40px auto; text-align: center; }
.doorsturen__balk { height: 4px; border-radius: var(--vt-radius-pil); background: var(--vt-rand); overflow: hidden; margin: 20px 0 14px; }
.doorsturen__voortgang { height: 100%; width: 40%; border-radius: var(--vt-radius-pil); background: var(--vt-oranje); animation: schuif 1.4s ease-in-out infinite; }

@keyframes schuif {
  0%   { transform: translateX(-100%); width: 40%; }
  50%  { width: 62%; }
  100% { transform: translateX(260%); width: 40%; }
}

/* --------------------------------------------------------------------------
   14. Lege toestand
   -------------------------------------------------------------------------- */
.leeg { text-align: center; padding: 34px 20px; max-width: 460px; margin: 0 auto; }
.leeg__icoon { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: var(--vt-radius-pil); background: var(--vt-groen-vlak); color: var(--vt-groen); display: grid; place-items: center; }
.leeg__tekst { font-size: 14px; color: var(--vt-grijs); margin-top: 8px; }

/* --------------------------------------------------------------------------
   15. Voettekst — vertrouwen, voorwaarden en privacy
   -------------------------------------------------------------------------- */
.voet {
  max-width: var(--vt-max);
  margin: 0 auto;
  padding: 22px 18px 40px;
  display: grid; gap: 12px;
  justify-items: center;
  text-align: center;
}

.veilig {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--vt-grijs);
  background: var(--vt-wit);
  border: 1px solid var(--vt-rand);
  border-radius: var(--vt-radius-pil);
  padding: 8px 14px;
  white-space: nowrap;
}

.veilig strong { color: var(--vt-inkt); font-weight: 800; }

.voet__links { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; align-items: center; font-size: 12.5px; color: var(--vt-grijs-licht); }
.voet__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--vt-grijs); }
.voet__links a:hover { color: var(--vt-oranje); }
.voet__adres { font-size: 11.5px; color: var(--vt-grijs-licht); }

/* --------------------------------------------------------------------------
   16. Smalle schermen (390px als ondergrens)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .pagina { padding: 16px 14px 32px; }
  .kop__binnen { padding: 12px 14px; }
  .kop__klant { display: none; }
  h1 { font-size: 20px; }
  .factuur { padding: 13px 14px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; }
  .factuur__bedrag { font-size: 14.5px; }
  .kaart__body { padding: 14px; }
  .som__totaal .som__waarde { font-size: 21px; }
  .knoprij .knop { flex: 1 1 100%; }
}

/* Tekstlink in het doorstuurscherm: zonder duidelijke hover voelt hij dood aan. */
.qr__hint a { color: var(--vt-oranje); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; }
.qr__hint a:hover { border-bottom-color: currentColor; }

/* Knoppen die eigenlijk een link zijn: de algemene a:hover-regel (regel 77)
   heeft meer gewicht dan .knop--primair en kleurde de tekst oranje — op een
   oranje knop verdween hij daarmee volledig. Hier zetten we dat recht. */
a.knop, a.knop:hover, a.knop:focus { text-decoration: none; }
a.knop:hover { color: var(--vt-inkt); }
a.knop--primair, a.knop--primair:hover, a.knop--primair:focus { color: var(--vt-wit); }
a.knop--stil { color: var(--vt-grijs); }
a.knop--stil:hover { color: var(--vt-inkt); }

/* --------------------------------------------------------------------------
   17. Tekstpagina's (privacyverklaring)
   Leesbreedte boven alles: 68 tekens per regel, ruime tussenkoppen.
   -------------------------------------------------------------------------- */
.doc { max-width: 780px; }
.doc__body { padding: 26px 30px 32px; }
.doc__body p { margin: 0 0 12px; }
.doc__body p:last-child { margin-bottom: 0; }
.doc__intro { font-size: 15.5px; color: var(--vt-tekst); }

.doc__kop {
  margin: 30px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--vt-rand-zacht);
  font-size: 15px;
}
.doc__body > .doc__kop:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc__ul { margin: 0 0 12px; padding-left: 20px; }
.doc__ul li { margin-bottom: 7px; }

.doc__lijst { margin: 0 0 12px; }
.doc__lijst dt { font-weight: 700; color: var(--vt-inkt); font-size: 14px; margin-top: 14px; }
.doc__lijst dt:first-child { margin-top: 0; }
.doc__lijst dd { margin: 3px 0 0; padding-left: 14px; border-left: 2px solid var(--vt-rand); }

.doc__terug { margin-top: 18px; text-align: center; font-size: 13.5px; }

@media (max-width: 420px) {
  .doc__body { padding: 18px 16px 24px; }
  .doc__kop { margin-top: 24px; }
}