/* Checkout. Nieuw scherm: de statische versie had geen formulier, dus deze
   stijl is nieuw. Wel op dezelfde tokens en registers als de rest — mono voor
   invoer en labels, blackletter alleen voor koppen, geen afgeronde hoeken en
   geen schaduw. */

.checkout{ padding:0 0 90px; }
.checkout .cols{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }

fieldset.blok{ border:0; margin:0 0 30px; padding:0; }
fieldset.blok legend{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.24em;
  font-size:10px; color:var(--dim); padding:0; margin-bottom:12px;
}

.veld{ margin-bottom:14px; }
.veld label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--bone); text-transform:uppercase; margin-bottom:6px;
}
.veld input{
  width:100%; background:transparent; color:var(--white);
  border:1px solid var(--line-2); padding:11px 12px;
  font-family:var(--mono); font-size:14px;
}
.veld input:focus{ outline:none; border-color:var(--white); }
.veld .fout{
  display:block; margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--blood-tekst);
}
/* Zonder eigen kleur gebruikt de browser zijn grijs (#757575), en dat haalt
   op beide canvassen net geen 4,5:1 (review 8.2). */
.veld input::placeholder{ color:var(--dim); }
.veld input[aria-invalid="true"]{ border-color:var(--blood); }

/* leverwijze — twee knoppen naast elkaar, zelfde taal als de maatkeuze */
.keuze{ display:flex; gap:8px; margin-bottom:16px; }
.keuze button{
  flex:1; min-height:46px; padding:0 12px;
  border:1px solid var(--line-2); background:transparent; color:var(--white);
  font-family:var(--gothic); font-weight:400; font-size:18px; cursor:pointer;
}
.keuze button[aria-pressed="true"]{ background:var(--white); color:var(--ink); border-color:var(--white); }

.punten{ display:flex; flex-direction:column; gap:8px; }
.punten label{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line-2); padding:12px;
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--bone);
}
.punten label:has(input:checked){ border-color:var(--white); color:var(--white); }
.punten .plaats{ display:block; color:var(--dim); }

/* samenvatting */
.samenvatting{ border:1px solid var(--line-2); padding:20px; }
.samenvatting .regel,
.samenvatting .totaal{
  display:flex; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--bone); padding:6px 0;
}
.samenvatting .totaal{
  border-top:1px solid var(--line-2); margin-top:10px; padding-top:12px;
  color:var(--white); font-size:14px;
}
.samenvatting .leeg{ font-family:var(--mono); font-size:12px; color:var(--dim); }

/* De btw-regel hoort visueel bij het totaal, niet bij de artikelen: kleiner en
   dimmer, direct onder de streep. Het is een toelichting op het bedrag erboven,
   geen post die meetelt. */
.samenvatting .btwregel{
  font-size:11px; color:var(--dim); padding-top:2px;
}

.melding{
  border:1px solid var(--blood); padding:12px;
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--white);
  margin-bottom:20px;
}
/* Testmodus-stempel. Alleen zichtbaar zolang MOLLIE_API_KEY een testsleutel is
   (isTestmodus() in src/payments/mollie.ts); zodra de live-sleutel erin gaat
   verdwijnt hij vanzelf, want de pagina is force-dynamic en leest de env per
   request. Gestippelde rand en bewust géén --blood: dit is geen fout maar een
   staande toestand, en --blood is op deze pagina al de foutmelding. Kleuren zijn
   --white en --line-2, dus hij kantelt met het thema mee. */
.testmodus{
  border:1px dashed var(--line-2); padding:12px;
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--white);
  margin-bottom:20px;
}
.testmodus b{ letter-spacing:.14em; text-transform:uppercase; }

.noot{
  font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--dim); margin-top:14px;
}
.noot.retournoot{ margin-top:18px; color:var(--bone); }
.noot.retournoot a{ color:var(--white); text-underline-offset:3px; }

@media (max-width:760px){
  .checkout .cols{ grid-template-columns:1fr; gap:30px; }
}

/* Postcode, huisnummer en toevoeging naast elkaar (25-08).
   Ze horen bij elkaar en zijn alle drie kort; onder elkaar zouden ze drie
   volle regels kosten voor samen twaalf tekens. De verhouding volgt de
   inhoud: postcode is het breedst, toevoeging het smalst. */
.veld-rij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.veld-rij > .veld:nth-child(1) { flex: 1.3 1 0; }
.veld-rij > .veld:nth-child(2) { flex: 1 1 0; }
.veld-rij > .veld:nth-child(3) { flex: 1 1 0; }

/* "optioneel" naast het label: kleiner en gedimd, zodat het als bijschrift
   leest en niet als deel van de veldnaam. */
.optioneel {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Was opacity .55 op de labelkleur: 4,19:1 op zwart en 2,89:1 op wit
     (review 8.2). --dim geeft hetzelfde gedimde grijs en haalt 4,5:1. */
  color: var(--dim);
}

@media (max-width: 560px) {
  /* Op smal scherm zakt de toevoeging eronder: drie velden naast elkaar
     worden daar te smal om nog een postcode in te kunnen lezen. */
  .veld-rij { flex-wrap: wrap; }
  .veld-rij > .veld:nth-child(1) { flex: 1 1 55%; }
  .veld-rij > .veld:nth-child(2) { flex: 1 1 35%; }
  .veld-rij > .veld:nth-child(3) { flex: 1 1 100%; }
}