/* ==========================================================================
   components.css · herbruikbare UI-componenten
   Inhoud:
   1.  Buttons            .btn + modifiers
   2.  Badge & tag        .badge  .tag
   3.  Stappenbalk        .steps
   4.  Tabs               .tabs
   5.  Kaart              .card
   6.  Formulieren        .field  .hint  (input/select/textarea globaal)
   7.  Checklist          .checklist
   8.  Productlijst       .products  .product  .qty  .counter
   9.  Pakketkeuze        .packages  .package
   10. Callout            .callout
   11. Meldingen          .alert
   12. Key/value-lijst    .kv
   13. Overzichtspaneel   .summary
   14. Contactblok        .contact
   15. Keuzekaart         .choice
   ========================================================================== */


/* 1. Buttons ------------------------------------------------------------- */
.btn {
  --_bg: transparent;
  --_fg: var(--c-ink);
  --_bd: var(--c-ink);
  --_content: 1cap;          /* hoogte van de inhoud (tekst of icoon) */
  --icon-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(15px - (1em - var(--_content)) / 2) 20px;
  border: 2px solid var(--_bd);
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font: 700 var(--fs-body)/1 var(--font-body);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, filter .15s;
}
.btn:hover { filter: brightness(.92); }

.btn--primary       { --_bg: var(--c-red);  --_bd: var(--c-red);  --_fg: var(--c-white); }
.btn--blue          { --_bg: var(--c-blue); --_bd: var(--c-blue); --_fg: var(--c-white); }
.btn--outline       { --_bd: var(--c-ink);  --_fg: var(--c-ink); }
.btn--outline-red   { --_bd: var(--c-red);  --_fg: var(--c-red); }
.btn--outline-blue  { --_bd: var(--c-blue); --_fg: var(--c-blue); }
.btn--outline:hover,
.btn--outline-red:hover,
.btn--outline-blue:hover { filter: none; background: rgb(0 0 0 / .04); }

.btn--sm    { font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

/* Pijl-iconen: .btn--next (pijl rechts) en .btn--back (pijl links) */
.btn--next,
.btn--back { --_content: var(--icon-size); }
.btn--next::after,
.btn--back::before {
  content: "";
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background: currentColor;
  mask: var(--icon-arrow-right) center / contain no-repeat;
}
.btn--back::before { mask-image: var(--icon-arrow-left); }

/* "Toevoegen" in productlijsten */
.btn--add {
  --_bg: var(--c-white);
  --_bd: #000;
  padding: calc(12px - (1em - 1cap) / 2) 20px;
  text-transform: none;
}

/* Uitgeschakeld */
.btn:disabled,
.btn[aria-disabled="true"] {
  --_bg: var(--c-chip);
  --_bd: var(--c-border);
  --_fg: var(--c-muted);
  filter: none;
  cursor: not-allowed;
}
/* disabled: echt uit. aria-disabled: ziet er uit maar blijft klikbaar,
   zodat een klik de ontbrekende velden kan tonen. */
.btn:disabled { pointer-events: none; }

.btn-group {
  display: flex;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}


/* 2. Badge & tag --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  padding: calc(10px - (1em - 1cap) / 2) 20px;
  border-radius: var(--radius-pill);
  background: var(--badge-bg, var(--c-red));
  color: var(--c-white);
  font: 700 var(--fs-sm)/1 var(--font-body);
  white-space: nowrap;
}
.badge--blue { --badge-bg: var(--c-blue); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-green-soft);
  color: var(--c-green-dark);
  font: 700 var(--fs-sm)/12px var(--font-body);
  text-transform: none;
  white-space: nowrap;
}
.tag--veg::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--icon-leaf) center / contain no-repeat;
}
.tag--spicy {
  background: var(--c-red-tint);
  color: var(--c-red);
}


/* 3. Stappenbalk --------------------------------------------------------- */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  --_badge-bg: transparent;
  --_badge-bd: var(--c-muted);
  --_badge-fg: var(--c-muted);
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-muted);
  font: 700 var(--fs-body)/1 var(--font-body);
  text-transform: uppercase;
  white-space: nowrap;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--_badge-bd);
  border-radius: 50%;
  background: var(--_badge-bg);
  color: var(--_badge-fg);
  font-size: 12px;
  line-height: 14px;
}
.steps .is-done {
  --_badge-bg: var(--c-green);
  --_badge-bd: var(--c-green);
  --_badge-fg: var(--c-white);
  border-width: 1px;
  background: var(--c-chip);
  color: #000;
}
.steps [aria-current="step"] {
  --_badge-bd: var(--c-white);
  --_badge-fg: var(--c-white);
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
}


/* Bijschrift "Stap x van 3" alleen op mobiel (zie layout.css) */
.progress__caption { display: none; }


/* 4. Tabs (Pakketten / À la carte) -------------------------------------- */
.tabs {
  display: flex;
  gap: 10px;
}
.tabs a {
  flex: 1;
  padding: calc(15px - (1em - 1cap) / 2) 20px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font: 700 var(--fs-body)/1 var(--font-body);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.tabs a[aria-current="page"] {
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
}


/* 5. Kaart --------------------------------------------------------------- */
.card {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: grid;
  gap: var(--space-md);
}
.card__header--tight { gap: var(--space-xs); }

/* Formulier in 2 kolommen: velden met .field--half staan naast elkaar */
.card--form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
.card--form > * { grid-column: 1 / -1; }
.card--form > .field--half { grid-column: auto; }
.card--form__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: inherit;
  column-gap: inherit;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.card--form__group[hidden] { display: none; }
.card--form__group > * { grid-column: 1 / -1; }
.card--form__group > .field--half { grid-column: auto; }

/* Checkbox met label ernaast */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}
.field--check > input {
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 2px solid var(--c-muted);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  cursor: pointer;
}
.field--check > input:checked {
  border-color: var(--c-red);
  background: var(--c-red) var(--icon-check-radio) center / 30px no-repeat;
}
.field--check > input:focus-visible { outline: 3px solid rgb(27 21 18 / .12); outline-offset: 2px; }
.field--check > label { cursor: pointer; }

/* Kaart met lijst (productsecties) */
.card--list {
  gap: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card--list > .card__header {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.card--list > .card__header > p:not(.counter) { grid-column: 1 / -1; }

/* Kaart met live locatie van de kar (statuspagina op de dag zelf) */
.status-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 240px;
  max-height: 420px;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-chip);
  overflow: hidden;
}


/* 6. Formulieren --------------------------------------------------------- */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
.field > label {
  color: var(--c-ink);
  font: 700 var(--fs-body)/24px var(--font-body);
  text-transform: uppercase;
}
.field:has(:required) > label::after { content: " *"; color: var(--c-red); }

:where(input:not([type="radio"], [type="checkbox"], [type="range"], [type="hidden"]), select, textarea) {
  width: 100%;
  height: 45px;
  padding: 0 13px;                   /* 15px incl. 2px rand */
  border: var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
:where(input, select, textarea)::placeholder { color: var(--c-placeholder); opacity: 1; }
:where(input, select, textarea):focus-visible {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgb(27 21 18 / .12);
}
:where(textarea) {
  height: 150px;
  padding-block: 11px;
  line-height: 24px;
  resize: vertical;
}
:where(select) {
  appearance: none;
  padding-right: 40px;
  background: var(--c-white) var(--icon-chevron-down) right 15px center / 14px no-repeat;
  cursor: pointer;
}
:where(input[type="date"]) {
  background: var(--c-white) var(--icon-calendar) right 15px center / 14px no-repeat;
}
/* Vastgezet door CS (betaallink): zichtbaar, niet te wijzigen */
input.is-locked {
  border-color: var(--c-border);
  background: var(--c-chip);
  color: var(--c-muted);
  cursor: not-allowed;
}
input.is-locked:focus-visible { border-color: var(--c-border); box-shadow: none; }
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  opacity: 0;
  cursor: pointer;
}

.field__inline {
  display: flex;
  gap: var(--space-xs);
}
.field__inline > input { flex: 1; min-width: 0; }
.field__inline > .btn { flex: none; }

.hint {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 20px;
}

/* Status: ongeldig (aria-invalid) en geldig (.is-valid) */
.field [aria-invalid="true"] { border-color: var(--c-red); }
.field:has([aria-invalid="true"]) .hint { color: var(--c-red); font-weight: 700; }

.field.is-valid :is(input, select) {
  border-color: var(--c-green);
  padding-right: 40px;
  background: var(--c-white) var(--icon-check-valid) right 15px center / 14px no-repeat;
}
.field.is-valid .hint { color: var(--c-green-dark); font-weight: 600; }

/* Status: info (bv. "Minder dan 80 gasten?") */
.field.is-info :is(input, select) { border-color: var(--c-blue); }
.field.is-info .hint { color: var(--c-blue); font-weight: 700; }


/* 7. Checklist ----------------------------------------------------------- */
.checklist {
  --check-bg: var(--c-green-soft);
  --check-fg: var(--c-green-dark);
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
  color: var(--c-ink);
  font-size: var(--fs-sm);
}
.checklist li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.checklist li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--check-bg);
}
.checklist li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4.5px;
  width: 11px;
  height: 11px;
  translate: 0 -50%;
  background: var(--check-fg);
  mask: var(--icon-check-sm) center / contain no-repeat;
}
.checklist--red  { --check-bg: var(--c-red-tint);  --check-fg: var(--c-red); }
.checklist--blue { --check-bg: var(--c-blue-soft); --check-fg: var(--c-blue); }


/* 8. Productlijst -------------------------------------------------------- */
.counter {
  color: var(--c-muted);
  font: 500 22px/1.4 var(--font-body);
  white-space: nowrap;
}
.counter strong { color: var(--c-red); font-weight: 700; }

.products {
  padding: 0;
  list-style: none;
}
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name price action"
    "desc price action";
  align-items: center;
  gap: 15px 20px;
  padding: 20px 30px 20px 35px;
  border-top: 1px solid var(--c-border);
}
.product:last-child { padding-bottom: 30px; }
.product.is-selected {
  padding-left: 30px;
  border-left: 5px solid var(--c-red);
  background: var(--c-red-soft);
}
.product__name {
  grid-area: name;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: 700 var(--fs-h4)/1 var(--font-body);
}
.product__desc { grid-area: desc; }
.product__price {
  grid-area: price;
  color: var(--c-ink);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.product > :is(.qty, .btn) { grid-area: action; }

/* Aantal-stepper */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--c-red);
  border-radius: var(--radius-pill);
  background: var(--c-white);
}
.qty button {
  width: 16px;
  height: 16px;
  background: var(--c-red);
  mask: var(--icon-minus) center / contain no-repeat;
}
.qty button[value="plus"] { mask-image: var(--icon-plus); }
.qty input {
  width: 30px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  appearance: textfield;
}
.qty input::-webkit-inner-spin-button,
.qty input::-webkit-outer-spin-button { appearance: none; margin: 0; }


/* 9. Pakketkeuze --------------------------------------------------------- */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.package {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  transition: border-color .15s;
}
.package > * { grid-column: 1 / -1; }
.package > :is(input, .badge) { grid-column: auto; grid-row: 1; }
.package > .badge { align-self: center; }
.package:has(:checked) { border-color: var(--c-red); }
.package:hover { border-color: var(--c-muted); }
.package:has(:checked):hover { border-color: var(--c-red); }

.package input {
  appearance: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 2px solid var(--c-muted);
  border-radius: 50%;
  cursor: pointer;
}
.package input:checked {
  border-color: var(--c-red);
  background: var(--c-red) var(--icon-check-radio) center / 30px no-repeat;
}
.package label {
  color: var(--c-ink);
  font: 900 var(--fs-h4)/25px var(--font-body);
  text-transform: uppercase;
  cursor: pointer;
}
.package label::after {           /* maakt de hele kaart klikbaar */
  content: "";
  position: absolute;
  inset: 0;
}
.package__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 500;
}
.package__price strong {
  color: var(--c-red);
  font: 900 28px/34px var(--font-body);
}
.package .checklist {
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
}


/* 10. Callout ------------------------------------------------------------ */
.callout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px 20px;
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--c-panel);
}
.callout h3 {
  font: 700 var(--fs-h4)/26px var(--font-body);
}
.callout p { grid-column: 1; line-height: 24px; }
.callout .btn { grid-column: 2; grid-row: 1 / span 2; --icon-size: 14px; }


/* 11. Meldingen ---------------------------------------------------------- */
.alert {
  --alert-color: var(--c-red);
  --alert-bg: var(--c-red-soft);
  --alert-icon: 36px;
  --alert-glyph: var(--icon-alert);
  display: grid;
  grid-template-columns: var(--alert-icon) minmax(0, 1fr);
  align-items: center;
  gap: 18px 14px;
  padding: 28px;
  border: 3px solid var(--alert-color);
  border-radius: var(--radius-lg);
  background: var(--alert-bg);
  box-shadow: var(--shadow);
  font-size: 17px;
}
.alert::before {
  content: "";
  grid-area: 1 / 1;
  width: var(--alert-icon);
  height: var(--alert-icon);
  border-radius: 50%;
  background: var(--alert-glyph) center / var(--alert-glyph-size, 100%) no-repeat, var(--alert-color);
}
.alert > h2 {
  grid-column: 2;
  font-size: var(--fs-h3);
  line-height: 32px;
}
.alert > :not(h2) { grid-column: 1 / -1; }
.alert .btn { --icon-size: 12px; }

/* Nieuw verschenen meldingen komen rustig binnen */
.alert.is-new { animation: alert-in .25s ease-out; }
@keyframes alert-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .alert.is-new { animation: none; } }

.alert--info { --alert-color: var(--c-blue); --alert-bg: var(--c-blue-soft); }

.alert--success {
  --alert-color: var(--c-green);
  --alert-bg: var(--c-green-bg);
  --alert-icon: 50px;
  --alert-glyph: var(--icon-check-lg);
  --alert-glyph-size: 28px;
  gap: var(--space-lg) var(--space-md);
  padding: var(--space-lg);
  border-width: 2px;
  font-size: var(--fs-body);
}

/* Compact: icoon links naast titel + tekst (foutsamenvatting) */
.alert--compact {
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-width: 2px;
  font-size: var(--fs-body);
}
.alert--compact::before { grid-row: 1 / span 2; }
.alert--compact > :not(h2) { grid-column: 2; }
.alert--compact > h2 { align-self: end; }


/* 12. Key/value-lijst ---------------------------------------------------- */
.kv {
  display: grid;
  gap: var(--space-md);
}
.kv > div {
  display: grid;
  grid-template-columns: fit-content(60%) minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
}
.kv dd {
  color: var(--c-ink);
  font-weight: 700;
  text-align: right;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.kv dd.kv__note {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-align: left;
}
.kv dd.is-muted { color: var(--c-muted); font-weight: 500; }
.kv dd.is-error { color: var(--c-red); }

.kv--compact { gap: var(--space-xs); padding-block: var(--space-xs); }
.kv--compact dd { color: var(--c-muted); font-weight: 500; }


/* 13. Overzichtspaneel ---------------------------------------------------
   <aside class="summary">
     <div class="summary__panel"> …overzicht + CTA… </div>
     [a.btn--back]  [.contact]
   </aside>
   Desktop: kolom rechts, sticky. Mobiel: panel wordt een kaart (layout.css). */
.summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-2xl) clamp(20px, 2.9vw, 44px) var(--space-2xl) clamp(20px, 2.1vw, 32px);
  border-left: 4px solid var(--c-red);
  background: var(--c-panel);
  box-shadow: var(--shadow);
}
.summary > * { width: 100%; }
.summary > .btn--back { width: auto; margin-top: calc(var(--space-md) - var(--space-lg)); }
.summary__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.summary .btn { white-space: normal; }
.summary__panel > h2 { font-size: var(--fs-h2-sm); line-height: 30px; }
.summary h3 {
  color: #000;
  font: 700 var(--fs-body)/1.4 var(--font-body);
  text-transform: none;
}
.summary__swap { display: contents; }
.summary__cart { display: grid; gap: var(--space-md); }
.summary__cart .kv--compact { margin-top: calc(var(--space-xs) - var(--space-md)); }
.summary__cart dd { color: #000; }
.summary__cart .kv--compact dd { color: var(--c-muted); }

.summary .rule-strong { border-top: 2px solid var(--c-ink); }

.summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--c-ink);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.summary__total strong {
  color: var(--c-red);
  font: 900 36px/40px var(--font-body);
}
.summary__total--sm strong { font-size: 28px; }
.summary__total + .summary__note { margin-top: calc(15px - var(--space-lg)); }
.summary__note { font-size: var(--fs-sm); }
.summary__message { font-size: var(--fs-sm); text-align: center; }


/* 14. Contactblok -------------------------------------------------------- */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 24px;
  text-align: center;
}
.contact--stacked > p { flex-basis: 100%; }


/* 15. Keuzekaart (startscherm) ------------------------------------------ */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 535px));
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.choice {
  --choice-color: var(--c-red);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 588px;
  padding: 22px;
  border: 2px solid var(--choice-color);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.choice--blue { --choice-color: var(--c-blue); }
.choice img {
  width: 100%;
  height: 175px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.choice p { line-height: 24px; }
.choice .checklist { gap: 8px; font-size: 15px; }
.choice .btn { margin-top: auto; }

/* Losse knop in een kaart: niet uitrekken */
.card > .btn { justify-self: start; }
.kv--narrow { max-width: 406px; }

/* Gekozen smaken: gast · pizza · actie */
.kv--picks { max-width: 640px; }
.kv--picks > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: baseline;
}
.kv--picks dd { text-align: left; }
.kv--picks dd:last-child:not(:nth-child(2)) { text-align: right; }

.link-action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-red);
  font: 500 var(--fs-sm)/1.3 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.link-action:hover { text-decoration-thickness: 2px; }
.link-action:disabled { color: var(--c-muted); cursor: default; }

@media (max-width: 640px) {
  .kv--picks > div { grid-template-columns: minmax(0, 1fr) auto; }
  .kv--picks dd:nth-child(2) { text-align: right; }
  .kv--picks dd:nth-child(3) { grid-column: 1 / -1; text-align: left; }
}

/* Formulier-details ------------------------------------------------------ */
/* Lege select (placeholder-optie) en lege datum in placeholderkleur */
select:has(option[value=""]:checked) { color: var(--c-placeholder); }
input[type="date"]:invalid::-webkit-datetime-edit { color: var(--c-placeholder); }
/* Geen spinners in getalvelden (zoals in het ontwerp) */
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
/* Autofill van de browser: wit houden */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-ink);
  box-shadow: 0 0 0 100px var(--c-white) inset;
  transition: background-color 9999s;
}