/* ============================================================
   Stuurlijn - aanvraag-wizard (bouwt op tokens uit style.css)
   ============================================================ */

/* deze pagina heeft één nav-link en geen burger: het offcanvas-menu van de
   hoofdsite uitschakelen zodat "Terug naar de site" ook op mobiel in beeld staat */
.pg-aanvraag .nav-links{position:static;inset:auto;flex-direction:row;background:none;transform:none;visibility:visible;font-size:.9rem}
.pg-aanvraag .nav-links a{font-size:.9rem}

.wmain{position:relative;z-index:1;padding:132px var(--gut) 80px}
.wwrap{max-width:820px;margin:0 auto}
.whead h1{font-size:clamp(2rem,4.5vw,3.2rem);margin-top:10px}
.whead .lead{margin-top:12px;font-size:1.05rem}

/* ---------- voortgang: uitzetlijn met stippen ---------- */
.wsteps{list-style:none;display:flex;justify-content:space-between;position:relative;margin:38px 0 26px;padding:0}
.wline{position:absolute;left:10px;right:10px;top:7px;height:1px;background:var(--line-solid)}
.wfill{height:100%;width:0;background:var(--orange);transition:width .45s var(--ease-in-out)}
.wsteps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;flex:0 0 auto;cursor:default}
.wsteps .stip{width:15px;height:15px;border-radius:50%;background:var(--ink-elevated);border:1px solid var(--line-solid);transition:background .3s,border-color .3s,box-shadow .3s}
.wsteps .lab{font-family:var(--font-d);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);transition:color .3s}
.wsteps li.on .stip{background:var(--dot);border-color:var(--dot);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.wsteps li.on .lab{color:var(--text-hi)}
.wsteps li.done .stip{background:var(--orange);border-color:var(--orange)}
.wsteps li.done .lab{color:var(--text-mid)}
.wsteps li.done{cursor:pointer}

/* ---------- panelen ---------- */
#wizard{position:relative}
.wpanel{display:none;background:var(--ink-surface);border:1px solid var(--line-hair);border-radius:var(--rc);padding:clamp(24px,4vw,40px);margin:0}
.wpanel.active{display:block;animation:pin .35s var(--ease-out)}
@keyframes pin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ptitle{font-family:var(--font-d);font-weight:600;font-size:1.3rem;padding:0 0 4px}
.pnote{color:var(--text-mid);font-size:.92rem;margin:6px 0 22px}
.pnote b{color:var(--text-hi);font-weight:600}
/* paneel zonder toelichtingsregel: de ruimte die .pnote gaf zelf terugzetten */
.ptitle+.fgrid,.ptitle+.fblok,.ptitle+.zones,.ptitle+.plan{margin-top:26px}

/* ---------- velden ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--wide{grid-column:1/-1}
.flab{font-family:var(--font-d);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid)}
.flab b{color:var(--orange);font-weight:500}
.flab i{color:var(--text-low);font-style:normal;text-transform:none;letter-spacing:.02em}
input[type=text],input[type=email],input[type=tel],input[type=time],select,textarea{
  background:var(--ink-base);border:1px solid var(--line-solid);border-radius:var(--r);color:var(--text-hi);
  /* MINIMAAL 16px. iOS Safari zoomt de hele pagina automatisch in zodra een veld met
     kleinere letters focus krijgt, en zoomt daarna niet terug uit. Op .98rem was dat
     15,68px - net eronder. Het verschil is optisch verwaarloosbaar. */
  font:inherit;font-size:1rem;padding:12px 14px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
input.bad,select.bad,textarea.bad{border-color:#e0483c}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239AA4B2' fill='none' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
textarea{resize:vertical;min-height:64px}
.fblok{margin:20px 0}
.fblok>.flab{display:block;margin-bottom:12px}

/* checkboxen als kaartjes */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;gap:12px;align-items:flex-start;background:var(--ink-base);border:1px solid var(--line-solid);border-radius:var(--r);padding:13px 14px;cursor:pointer;transition:border-color .2s var(--ease)}
.chk:hover{border-color:var(--text-low)}
.chk input{accent-color:var(--orange);margin-top:3px;flex:none}
.chk span{font-size:.93rem;line-height:1.4}
.chk em{display:block;font-style:normal;color:var(--text-low);font-size:.8rem}
.chk:has(input:checked){border-color:var(--orange)}
.chk--privacy{margin-top:18px}
.chk--privacy b{color:var(--orange)}

/* ---------- upload-zones ---------- */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zone{border:1px dashed var(--line-solid);border-radius:var(--rc);background:var(--ink-base);padding:16px;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.zone:hover,.zone.drag{border-color:var(--orange);background:rgba(255,91,26,.04)}
.zhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.zt{font-family:var(--font-d);font-weight:500;font-size:.95rem}
.zx{font-size:.62rem;letter-spacing:.08em;color:var(--text-low)}
.zone>p{color:var(--text-low);font-size:.85rem;margin:2px 0 0}
.zone u{color:var(--text-mid);text-underline-offset:3px}
.zlist{list-style:none;margin:0;padding:0}
.zlist:not(:empty){margin-top:12px;border-top:1px solid var(--line-hair)}
.zlist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-hair);font-size:.85rem}
.zlist .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zlist .fs{color:var(--text-low);font-family:var(--font-d);font-size:.72rem;flex:none}
.zlist .zdel{position:static;background:none;border:0;color:var(--text-low);cursor:pointer;font-size:1rem;line-height:1;padding:2px 6px;flex:none;pointer-events:auto}
.zlist .zdel:hover{color:#e0483c}
.zlist li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none}

/* ---------- afspraak-keuze ---------- */
.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.pcard{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--ink-base);border:1px solid var(--line-solid);border-radius:var(--rc);padding:16px;cursor:pointer;transition:border-color .2s var(--ease)}
.pcard:hover{border-color:var(--text-low)}
.pcard input{position:absolute;opacity:0;pointer-events:none}
.pcard .pt{font-family:var(--font-d);font-weight:500;font-size:.98rem;padding-left:22px;position:relative}
.pcard .pt::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;border:1px solid var(--text-low);transition:all .2s var(--ease)}
.pcard .pd{color:var(--text-mid);font-size:.82rem;line-height:1.45;padding-left:22px}
.pcard:has(input:checked){border-color:var(--orange)}
.pcard:has(input:checked) .pt::before{background:var(--dot);border-color:var(--dot);box-shadow:inset 0 0 0 3px var(--ink-base)}
.agenda{border:1px solid var(--line-hair);border-radius:var(--rc);background:var(--ink-base);margin-bottom:16px;overflow:hidden}
.aghead{padding:12px 16px;border-bottom:1px solid var(--line-hair);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid)}

/* ---------- eigen agenda: gewenst projectmoment ---------- */
.kal{padding:16px 16px 18px;color-scheme:dark} /* color-scheme: native tijd-kiezers in donker */
.kal__mode{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.kmode{position:relative;display:inline-flex;align-items:center;background:var(--ink-surface);border:1px solid var(--line-solid);border-radius:999px;padding:7px 15px;cursor:pointer;font-family:var(--font-d);font-size:.8rem;color:var(--text-mid);transition:border-color .2s var(--ease),color .2s var(--ease)}
.kmode:hover{border-color:var(--text-low)}
.kmode input{position:absolute;opacity:0;pointer-events:none}
.kmode:has(input:checked){border-color:var(--orange);color:var(--text-hi)}
.kal__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.kal__maand{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-hi)}
.kal__nav{background:var(--ink-surface);border:1px solid var(--line-solid);border-radius:var(--r);color:var(--text-mid);width:36px;height:32px;cursor:pointer;font-size:.95rem;line-height:1;transition:border-color .2s var(--ease),color .2s var(--ease)}
.kal__nav:hover{border-color:var(--orange);color:var(--orange)}
.kal__nav[disabled]{opacity:.35;cursor:default;pointer-events:none}
.kal__week,.kal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kal__week span{text-align:center;font-family:var(--font-d);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);padding:4px 0 6px}
.kal__grid{user-select:none;-webkit-user-select:none}
.kdag{background:var(--ink-surface);border:1px solid var(--line-hair);border-radius:var(--r);color:var(--text-mid);font-family:var(--font-d);font-size:.85rem;font-variant-numeric:tabular-nums;padding:10px 0;cursor:pointer;position:relative;transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.kdag:hover{border-color:var(--text-low);color:var(--text-hi)}
.kdag--leeg{visibility:hidden;pointer-events:none}
.kdag[disabled]{color:var(--text-low);opacity:.35;cursor:default;pointer-events:none;background:transparent}
.kdag--vandaag::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--text-low);transform:translateX(-50%)}
.kdag--in{background:rgba(255,91,26,.13);border-color:rgba(255,91,26,.4);color:var(--text-hi)}
.kdag--rand{background:var(--orange);border-color:var(--orange);color:var(--ink-void);font-weight:600}
.kdag--rand.kdag--vandaag::after{background:var(--ink-void)}
.kal__hint{color:var(--text-low);font-size:.8rem;margin:12px 0 0}
.kal__sum{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;background:var(--ink-surface);border:1px solid var(--line-solid);border-radius:var(--r)}
.kal__sumtxt b{font-family:var(--font-d);font-weight:600;display:block;font-size:.95rem}
.kal__sumtxt span{color:var(--text-low);font-size:.8rem}
.kal__wis{background:none;border:0;color:var(--text-low);cursor:pointer;font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;flex:none}
.kal__wis:hover{color:#ff7a70}
.kal__tijden{margin-top:14px;border-top:1px solid var(--line-hair);padding-top:14px}
.kal__tijdrijen{max-height:238px;overflow:auto;margin-top:10px}
.ktijd{display:flex;align-items:center;gap:10px;padding:5px 0}
.ktijd .kd{flex:1;font-family:var(--font-d);font-size:.82rem;color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktijd input[type=time]{width:116px;padding:8px 10px;font-size:1rem;flex:none}
.ktijd .tot{color:var(--text-low);font-size:.8rem;flex:none}
.kalle{background:none;border:1px solid var(--line-solid);border-radius:var(--r);color:var(--text-mid);font-family:var(--font-d);font-size:.7rem;letter-spacing:.04em;padding:7px 10px;cursor:pointer;white-space:nowrap;flex:none;transition:border-color .2s var(--ease),color .2s var(--ease)}
.kalle:hover{border-color:var(--orange);color:var(--orange)}
/* zichtbare toetsenbordfocus, in lijn met de oranje focusring van de invoervelden */
.pcard:has(input:focus-visible),.kmode:has(input:focus-visible){border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
.kdag:focus-visible,.kal__nav:focus-visible,.kalle:focus-visible,.kal__wis:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}

/* honeypot: buiten beeld, niet display:none (bots) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- fouten, footer, bevestiging ---------- */
.perr{color:#ff7a70;font-size:.88rem;min-height:1.3em;margin:14px 0 0}
.upstatus{color:var(--orange);font-size:.8rem;letter-spacing:.04em;margin:14px 0 0}
.btn[disabled]{opacity:.55;pointer-events:none}
#turnstile-slot iframe{margin:14px 0 4px}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.trustline{color:var(--text-low);font-size:.8rem;margin-top:16px;text-align:center}
.wdone{text-align:center;padding:clamp(40px,7vw,72px)}
.wpanel.wdone:not([hidden]){display:block;animation:pin .35s var(--ease-out)}
.bigstip{display:block;width:22px;height:22px;border-radius:50%;background:var(--dot);margin:0 auto 22px;box-shadow:0 0 0 8px rgba(255,255,255,.07),0 0 40px rgba(255,255,255,.25)}
.refnr{color:var(--orange);font-size:1.05rem;letter-spacing:.08em;margin-top:10px}
.footer--slim{padding-block:28px;margin-top:40px}
.footer--slim .fine{margin:0;padding:0;border:0}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .wmain{padding-top:104px}
  .fgrid,.checks,.zones{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
  /* agenda: daglabel op eigen regel zodat tijdvelden + knop altijd passen */
  .ktijd{flex-wrap:wrap}
  .ktijd .kd{flex:1 1 100%}
  .ktijd input[type=time]{flex:1;min-width:96px;width:auto}
  .wsteps .lab{display:none}
  .wsteps li{position:static}
  .wsteps li.on .lab{display:block;position:absolute;top:26px;left:0;right:0;text-align:center;white-space:nowrap}
  .wsteps{margin-bottom:44px}
}
@media(prefers-reduced-motion:reduce){
  .wpanel.active{animation:none}
  .wfill{transition:none}
}