/* ==========================================================================
 * Wizard — "Wat vier jij?" en de per-dienst-varianten.
 *
 * Eigen laag, bewust los van main.css: die is een gepurgede Tailwind-build,
 * dus nieuwe utility-klassen bestaan daar niet. Alles hier heeft het prefix
 * wz- en leunt nergens op Tailwind.
 *
 * Stijlregels van het thema: scherpe hoeken (nergens border-radius), donker
 * (#0A0A0A / #101010), brand-oranje #DD6015 als enige accent, geen zwevende
 * kaartjes met schaduw — vlakken staan plat op de achtergrond.
 * Typografie volgt de verkleinde schaal: sectiekop 30-36, body 16.
 * ========================================================================== */

.wz {
  --wz-brand: #DD6015;
  --wz-brand-dim: rgba(221, 96, 21, .12);
  --wz-lijn: rgba(255, 255, 255, .14);
  --wz-lijn-sterk: rgba(255, 255, 255, .3);
  --wz-vlak: #101010;
  --wz-vlak-hover: #161616;
  --wz-tekst: #fff;
  --wz-tekst-zacht: rgba(255, 255, 255, .62);

  position: relative;
  max-width: 760px;
  color: var(--wz-tekst);
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
}

.wz *, .wz *::before, .wz *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- voortgang */

.wz-voortgang { margin-bottom: 28px; }

.wz-balk {
  height: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.wz-balk-vulling {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wz-brand);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.wz-stapnr {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

/* -------------------------------------------------------------------- stap */

.wz-stap { animation: wz-in .26s cubic-bezier(.4, 0, .2, 1) both; }
.wz-stap:focus { outline: none; }

@keyframes wz-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.wz-vraag {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); /* 24 -> 34 */
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.01em;
}

.wz-hulp {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wz-tekst-zacht);
}

.wz-veldgroep { margin-top: 26px; }

/* ------------------------------------------------------------ keuzekaarten */

.wz-kaarten {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .wz-kaarten { grid-template-columns: 1fr 1fr; }
}

.wz-kaart {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 16px 18px;
  border: 1px solid var(--wz-lijn);
  border-left: 3px solid transparent;
  background: var(--wz-vlak);
  color: var(--wz-tekst);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.wz-kaart:hover { background: var(--wz-vlak-hover); border-color: rgba(221, 96, 21, .5); }
.wz-kaart:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 2px; }

.wz-kaart[aria-pressed="true"],
.wz-kaart[aria-checked="true"] {
  border-color: rgba(221, 96, 21, .55);
  border-left-color: var(--wz-brand);
  background: var(--wz-brand-dim);
}

.wz-kaart-icoon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--wz-brand); }
.wz-kaart-tekst { flex: 1 1 auto; }

.wz-kaart-sub {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .5);
}

/* Vinkje voor meerkeuze: klein vierkant, scherp, links van de tekst. */
.wz-vink {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--wz-lijn-sterk);
  position: relative;
}

.wz-kaart[aria-pressed="true"] .wz-vink { border-color: var(--wz-brand); background: var(--wz-brand); }

.wz-kaart[aria-pressed="true"] .wz-vink::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------- chips */

.wz-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.wz-chip {
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid var(--wz-lijn);
  background: var(--wz-vlak);
  color: var(--wz-tekst);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.wz-chip:hover { background: var(--wz-vlak-hover); border-color: rgba(221, 96, 21, .5); }
.wz-chip:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 2px; }

.wz-chip[aria-checked="true"] {
  border-color: var(--wz-brand);
  background: var(--wz-brand);
  color: #fff;
}

/* ------------------------------------------------------------------ velden */

.wz-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* 16px is geen smaak maar een eis: onder de 16px zoomt iOS het veld in. */
.wz-invoer,
.wz-tekstvak {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--wz-lijn);
  background: #0C0C0C;
  color: var(--wz-tekst);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}

.wz-invoer::placeholder,
.wz-tekstvak::placeholder { color: rgba(255, 255, 255, .32); }

.wz-invoer:focus,
.wz-tekstvak:focus { outline: none; border-color: var(--wz-brand); }

.wz-tekstvak { min-height: 150px; resize: vertical; }

/* Datumveld: Safari/iOS geeft een eigen knop; die mag niet wit oplichten. */
.wz-invoer[type="date"] { min-height: 54px; }
.wz-invoer[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
.wz-invoer[type="date"]::-webkit-date-and-time-value { text-align: left; }

.wz-velden { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wz-velden-2 { grid-template-columns: 1fr 1fr; } }

/* Extra vrije velden onder een vraag: tijd en plaats bij de datum, de
   beursnaam bij een stand, exacte maten bij de standruimte. */
.wz-extras {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .wz-extras { grid-template-columns: 1fr 1fr; }
  .wz-extra-breed { grid-column: 1 / -1; }
}

/* Vrij-invoerveld onder een gekozen "Iets anders"-kaart. */
.wz-vrij { margin-top: 12px; }
.wz-vrij[hidden] { display: none; }

/* Selectievakje "datum staat nog niet vast". */
.wz-check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--wz-lijn);
  background: var(--wz-vlak);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s;
}

.wz-check:hover { border-color: rgba(221, 96, 21, .5); }

.wz-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--wz-brand);
  cursor: pointer;
}

/* Budget op het contactscherm — kleinere chips, want dit is een bijvraag en
   geen kruispunt. */
.wz-budget { margin-top: 4px; }

.wz-budget-hulp {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .5);
}

.wz-budget .wz-chip {
  min-height: 46px;
  padding: 12px 18px;
  font-size: 15px;
}

/* ------------------------------------------------------------------ acties */

.wz-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.wz-knop {
  min-height: 54px;
  padding: 16px 34px;
  border: 0;
  background: var(--wz-brand);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}

.wz-knop:hover { background: #C4530F; }
.wz-knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wz-knop[disabled] { opacity: .5; cursor: not-allowed; }

.wz-knop-terug {
  min-height: 54px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
}

.wz-knop-terug:hover { color: #fff; }
.wz-knop-terug:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 2px; }

.wz-overslaan {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font-family: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wz-overslaan:hover { color: rgba(255, 255, 255, .75); }

/* Toetsenbord-hint: alleen tonen waar een toetsenbord is. */
.wz-hint {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .32);
}

@media (pointer: coarse) { .wz-hint { display: none; } }

/* ------------------------------------------------------------------ status */

.wz-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--wz-brand);
  background: var(--wz-brand-dim);
  font-size: 15px;
  line-height: 1.55;
}

.wz-status[hidden] { display: none; }

/* --------------------------------------------------------------- bevestiging */

.wz-klaar { animation: wz-in .3s cubic-bezier(.4, 0, .2, 1) both; }

.wz-klaar-vink {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border: 2px solid var(--wz-brand);
  color: var(--wz-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wz-klaar-kop {
  margin: 0 0 14px;
  font-size: clamp(1.625rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
}

.wz-klaar-tekst { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }

.wz-klaar-lijst {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.wz-klaar-lijst li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}

.wz-klaar-nr {
  flex: 0 0 auto;
  width: 26px;
  font-weight: 800;
  color: var(--wz-brand);
}

/* ------------------------------------------------------- samenvatting-lint */

/* De antwoorden tot nu toe, als bescheiden lint boven de vraag: bewijs dat we
   meeluisteren. Klikbaar — dan spring je terug naar die stap. */
.wz-lint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.wz-lint:empty { display: none; }

.wz-lint-item {
  padding: 7px 12px;
  border: 0;
  border-left: 2px solid var(--wz-brand);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}

.wz-lint-item:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.wz-lint-item:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 2px; }

/* ---------------------------------------------------------- ontsnappingsluik */

/* De uitweg onder de wizard: wie liever belt, appt, mailt of typt hoeft de
   vragen niet af te maken. Staat in de tekststroom, onder de stap — niet
   vastgeplakt aan de onderkant van het scherm; zie de toelichting verderop
   bij .wz--pagina .wz-luik waarom dat laatste eraf is. */
.wz-luik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
}

.wz-luik-label { color: rgba(255, 255, 255, .42); }

/* min-height 44: een duim wil 44 px en deze stonden op 23,5 — de hoogte van
   één regel tekst, meer niet. Dat mag voor een link in een lopende zin, maar
   dit zijn de vier uitwegen, en sinds de chatknop bij de wizard opzij stapt is
   "Liever even typen met iemand?" op een telefoon de énige manier om te gaan
   typen. Dan is het geen afwerking meer maar het pad dat je overhoudt.

   De ruimte komt eronder en erboven vanzelf goed: inline-flex met
   align-items:center houdt de tekst in het midden, en het luik lijnt de items
   op hun basislijn uit, dus ze blijven netjes op één lijn met het labeltje. */
.wz-luik a,
.wz-luik-chat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.wz-luik a:hover,
.wz-luik-chat:hover { color: var(--wz-brand); border-bottom-color: var(--wz-brand); }
.wz-luik svg { width: 16px; height: 16px; color: var(--wz-brand); flex: 0 0 auto; }

/* De chatuitweg is een knop, geen link: dus de knopstijl van de browser eruit. */
.wz-luik-chat {
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.wz-luik-chat:focus-visible { outline: 2px solid var(--wz-brand); outline-offset: 3px; }

/* Het luik plakte op de eigen pagina onderin: `position: sticky; bottom: 0`
   met een matte achtergrond eroverheen. Dat is eraf, en wel overal.

   Een balk die aan de onderkant van het scherm vastzit, ligt over de kolom
   die eronderdoor scrolt — daar is geen maatvoering tegen bestand. Gemeten op
   1280x800: de balk stond vastgepind op y 710-800 en pakte het midden van
   kaart 5 en 6 (scrollpositie 0) en van kaart 7 en 8 (scrollpositie 110).
   Vier van de acht keuzes, precies dezelfde klacht als bij de zwevende
   chatknop, alleen was de dader hier de eigen balk van de wizard.

   Onder 700 px stond hij al los, en de toelichting daarbij zei waarom: de
   balk schoof over de Volgende-knop heen. Dat argument houdt niet op bij
   701 px; die grens verplaatste het probleem alleen naar schermen waar
   niemand keek. De sectie-variant (/contact/, de dienstpagina's, het
   landingssjabloon) plakte sowieso nergens, dus los stond allang in de
   meerderheid.

   Wat het kost: op 1280 stond de uitweg de eerste ~240 px scroll in beeld
   die hij nu onder de vouw staat. Dat is de prijs, en hij is lager dan vier
   onaantikbare kaarten. Bovendien hangt dit samen met de 44 px hierboven:
   met hogere tikdoelen zou een plakkende balk juist méér kaarten opeten. */
.wz--pagina .wz-luik {
  margin-top: 48px;
}

@media (max-width: 700px) {
  .wz--pagina .wz-luik { margin-top: 28px; }
}

/* ------------------------------------------------ de zwevende chatknop weg

   De knop van chat.js staat `position: fixed` rechtsonder en ligt daar over
   de keuzekaarten heen: op 390 px beslaat hij x 183-366, terwijl de kaarten
   van 24 tot 366 lopen. Een duim die het midden van een kaart raakt, opende
   dus de chat in plaats van de keuze te maken — en omdat de knop meescrolt
   en de kaarten niet, was het telkens een andere kaart.

   Hier stond een vaste regel: onder 700 px de knop weg, en alleen op
   `body:has(.wz--pagina)`. Die miste de sectie-variant (/contact/, de
   dienstpagina's, het landingssjabloon) en het gat tussen 700 px en de
   breedte waarop de twee elkaar echt loslaten. Nu meet wizard.js of de twee
   rechthoeken elkaar raken en zet dan deze klasse op <body>; zie de
   toelichting bij chatOntwijking() in assets/js/wizard.js.

   Van buitenaf en omkeerbaar: geen regel in chat.css, geen mes in de chat.

   Bewust `visibility` en niet `display`, want een knop op display:none heeft
   geen rechthoek meer. Dan meet de volgende ronde geen botsing, komt de knop
   terug, botst weer, en knippert hij zich suf. */
body.wz-chat-in-de-weg .me-chat-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

/* --------------------------------------------------------------- geen JS */

.wz-geenjs {
  padding: 22px;
  border: 1px solid var(--wz-lijn);
  background: var(--wz-vlak);
  font-size: 16px;
  line-height: 1.65;
}

/* ------------------------------------------------------------------- rust */

@media (prefers-reduced-motion: reduce) {
  .wz-stap, .wz-klaar { animation: none; }
  .wz-balk-vulling { transition: none; }
}