:root {
  --ink: #1f2430; --ink-soft: #5c6478; --line: #dfe2ea; --paper: #f4f4f7; --card: #fff;
  --brand: #1f5fbf; --brand-deep: #174a96; --brand-soft: #e6eefb; --error: #b42318; --ok: #1a7f4b;
  --radius: 0.75rem; --field-radius: 0.5rem; --btn-radius: 0.5rem; --btn: var(--brand); --btn-ink: #fff; --btn-deep: var(--brand-deep);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-text-size-adjust: 100%; min-height: 100vh; }
/* achtergrondafbeelding (thema): vast, gevuld, licht geblurd zodat de kaart en
   tekst er scherper bovenuit springen, met optionele donkere waas voor
   leesbaarheid. Blur staat op een eigen laag (::before), niet op body zelf,
   anders vervaagt de hele pagina inclusief het formulier. `inset: -0.25rem`
   verbergt de lichte halo die blur() aan de randen van de laag geeft. */
body.has-bg { background: var(--paper); }
body.has-bg::before { content: ''; position: fixed; inset: -0.25rem; background: var(--bg-image) center top / cover no-repeat; filter: blur(2px); z-index: -2; pointer-events: none; }
body.has-bg::after { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / var(--bg-overlay, 0)); pointer-events: none; z-index: -1; }
.sheet { position: relative; z-index: 1; }
body.has-bg .sheet-head, body.has-bg .grid, body.has-bg .thanks, body.has-bg .gate { box-shadow: 0 0.25rem 0.5rem rgb(87 100 126 / 0.21), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.35); }
.sheet { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.sheet-head { background: var(--card); border: 1px solid var(--line); border-top: 0.375rem solid var(--brand); border-radius: var(--radius); padding: 1.75rem 2rem; margin-bottom: 1rem; }
h1 { color: var(--brand); }
h1 { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.2; }
.lead { margin: 0.5rem 0 0; color: var(--ink-soft); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 2rem; }
.w-full { grid-column: 1 / -1; }
.field[hidden], .heading[hidden] { display: none; }
/* Velden naast elkaar: label bovenaan, invoervak onderaan, zodat een hulptekst bij
   het ene veld het vak van het andere niet hoger of lager zet. */
.field { display: flex; flex-direction: column; }
.field > input, .field > textarea, .field > .money, .field > .select, .field > .choices, .field > .computed, .field > .rep, .field > .choice-single { margin-top: auto; }
.field > .error { margin-top: 0.35rem; }
.field > .help { margin-bottom: 0.4rem; }
.heading { margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.heading h2 { margin: 0; font-size: 1.05rem; color: var(--brand); }
.heading p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.help { display: block; color: var(--ink-soft); font-size: 0.8rem; margin: -0.2rem 0 0.4rem; }
.req { color: var(--error); margin-left: 0.15rem; }
input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
  width: 100%; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--field-radius); padding: 0.65rem 1rem; min-height: 2.75rem;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.is-invalid input, .is-invalid textarea, .is-invalid select, .is-invalid .choices { border-color: var(--error); }
.is-invalid .choices { border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--error); }
.money { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--field-radius); background: #fff; overflow: hidden; }
.money span { padding: 0 0.75rem; color: var(--ink-soft); border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; background: #fafbfe; }
.money input { border: 0; border-radius: 0; }
.money:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.money input:focus { outline: none; }
.select { position: relative; }
.select select { appearance: none; padding-right: 2.5rem; }
.select::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.choices { display: grid; gap: 0.4rem; }
.choice { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: var(--field-radius); cursor: pointer; background: #fff; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--brand); flex: none; }
.choice-single { font-weight: 600; }
.computed { display: block; padding: 0.65rem 1rem; background: var(--brand-soft); border-radius: var(--field-radius); font-weight: 700; font-size: 1.15rem; color: var(--brand-deep); }
.error { color: var(--error); font-size: 0.8rem; margin: 0.35rem 0 0; }
.error[hidden] { display: none; }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; opacity: 0; }
.actions { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.note { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }
.btn { font: inherit; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: var(--btn-radius); border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; min-height: 2.75rem; }
.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-deep); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.gate { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 1rem; }
.gate-row { display: flex; gap: 0.5rem; }
.gate-row input { flex: 1; }
.thanks { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem 1.75rem; text-align: center; }
.thanks[hidden] { display: none; }
.thanks-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: #e3f5ea; color: var(--ok); font-size: 1.75rem; font-weight: 700; display: grid; place-items: center; }
.thanks h2 { margin: 0 0 0.25rem; }
.thanks p { color: var(--ink-soft); margin: 0 0 1.25rem; }
.closed { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--ink-soft); }
form[hidden] { display: none; }
@media (max-width: 40rem) {
  .grid { grid-template-columns: 1fr; padding: 1.25rem 1rem; }
  .w-half { grid-column: 1 / -1; }
  .sheet-head { padding: 1.25rem 1rem; }
}

/* ---- stappen ----
   Alleen het label van de actieve stap toont tekst; de rest is alleen het
   cijfer. Dat is precies compact genoeg om altijd binnen de kaart (max ~42rem)
   te passen, op elke schermbreedte — geen viewport-media-query nodig. (De
   vorige versie liet alle vijf labels tonen, wat nooit paste: hetzij de tekst
   kromp naar 0px, hetzij de balk moest scrollen met een opvallende scrollbar.)
   `overflow-x: auto` blijft staan als vangnet voor een uitzonderlijk lang label
   op een heel smal scherm; de scrollbar is dan dun en onopvallend. */
.progress { list-style: none; margin: 0 0 1rem; padding: 0.2rem; display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.progress::-webkit-scrollbar { height: 0.25rem; }
.progress::-webkit-scrollbar-track { background: transparent; }
.progress::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.progress li { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--field-radius); background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; }
.progress li.is-current { border-color: var(--brand); color: var(--ink); font-weight: 600; }
.progress li.is-done { color: var(--ok); cursor: pointer; }
.progress-n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-weight: 700; font-size: 0.75rem; }
.progress li.is-current .progress-n { background: var(--brand); color: #fff; }
.progress li.is-done .progress-n { background: var(--ok); color: #fff; }
.progress-t { display: none; overflow: hidden; text-overflow: ellipsis; }
.progress li.is-current .progress-t { display: inline; }
.step { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
.step[hidden] { display: none; }
.has-steps .heading { margin-top: 0; padding-top: 0; border-top: 0; }
.actions-row { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.actions-row #prev { margin-right: auto; }
.actions-row [hidden] { display: none; }

/* ---- herhaalbare groepen ---- */
.rep-rows { display: grid; gap: 0.6rem; }
.rep-row { border: 1px solid var(--line); border-radius: var(--field-radius); padding: 0.6rem 0.9rem 0.75rem; background: color-mix(in srgb, var(--card) 70%, #fff); }
.rep-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.rep-title { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.rep-remove { border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; padding: 0.2rem 0.4rem; border-radius: 0.3rem; }
.rep-remove:hover { background: var(--error); color: #fff; }
.rep-remove[hidden] { display: none; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.rep-grid .field.sub { margin: 0; }
.rep-grid .field.sub .label { font-size: 0.8rem; margin-bottom: 0.25rem; }
.btn-add { margin-top: 0.6rem; width: 100%; border-style: dashed; color: var(--brand); }
.btn-add[hidden] { display: none; }
@media (max-width: 40rem) {
  .rep-grid { grid-template-columns: 1fr; }
}


/* ---- restaurantmenu (picker) ----
   Actief zodra een keuzeveld routeSlug heeft: /f/<slug> toont dit menu i.p.v.
   het formulier, /f/<slug>/<optie> gaat direct door met die keuze al vastgezet
   (verborgen). Stijl leunt bewust op vv-horecagroep.nl zelf: crème kaarten met
   1rem radius, Cormorant Garamond voor de naam, zachte hover-lift — zodat het
   menu bij hun eigen huisstijl past, los van het kleurthema van dit formulier. */
.sheet-wide { max-width: 56rem; }
.picker-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem; }
.picker-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; box-shadow: 0 0.5rem 1.5rem -1.1rem rgb(0 0 0 / 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.picker-tile:hover, .picker-tile:focus-visible { transform: translateY(-0.2rem); box-shadow: 0 1rem 2rem -1.1rem rgb(0 0 0 / 0.4); border-color: var(--brand); outline: none; }
.picker-tile-media { aspect-ratio: 4 / 3; background-color: var(--brand-soft); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.picker-tile-fallback { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2rem; color: var(--brand); }
.picker-tile-name { padding: 0.85rem 0.75rem; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.15rem; text-align: center; color: var(--ink); }
@media (max-width: 40rem) {
  /* Eén kolom i.p.v. twee smalle tegels: op een telefoon is een volle-breedte
     kaart per restaurant makkelijker te raken en de foto komt beter tot zijn recht. */
  .picker-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .picker-card { padding: 1.25rem; }
}

/* ---- foto-upload ----
   Bestandskiezer + kleine voorbeeldminiatuur; de daadwerkelijke data-URI (na
   compressie in form.js) staat in de verborgen .photo-value, niet in het
   bestandsveld zelf — een <input type=file> kan zijn waarde niet programmatisch
   krijgen, dus die hidden input is de enige die echt meegaat in de inzending. */
.photo { display: grid; gap: 0.5rem; }
.photo-file { padding: 0.45rem 0.6rem; }
.photo-preview { display: flex; align-items: center; gap: 0.75rem; }
.photo-preview img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--field-radius); border: 1px solid var(--line); background: #fff; }
.photo-remove { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 999px; width: 1.75rem; height: 1.75rem; line-height: 1; cursor: pointer; }
.photo-remove:hover { background: var(--error); color: #fff; border-color: var(--error); }
.photo-status { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.photo-status:empty { display: none; }