/* /contact/: het aanvraagformulier (blok contact_form, pages/contact/_form.html).
   Overgenomen uit docs/prototype/contact.html; .opt en .st-nav staan in styles.css.
   De placeholder .ts van het prototype is weg: hier staat de echte Turnstile. */
/* aanvraag, stap 1: compacte rijen met een klein icoon en een korte titel, op elke breedte.
   De uitleg per keuze komt pas in stap 2, dus stap 1 past in één scherm. */
.wz-kinds .opt{flex-direction:row;align-items:center;gap:12px;min-height:58px;padding:9px 44px 9px 12px;border-radius:14px}
.wz-kinds .opt:hover{transform:none}
.wz-kinds .opt-ill{height:30px;width:40px;flex:none;margin:0}
.wz-kinds .opt-ill svg{width:100%}
.wz-kinds .opt-t{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.25}
.wz-kinds .opt-d{display:none}
.wz-kinds .opt-check{top:50%;translate:0 -50%;width:22px;height:22px;font-size:12px}
/* gsm: twee kolommen met alleen de titel; de gekozen rij krijgt een donkere rand */
@media (max-width:639px){
.wz-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
.wz-kinds .opt{min-height:56px;padding:8px 12px}
.wz-kinds .opt-ill,.wz-kinds .opt-check{display:none}
.wz-kinds .opt-t{font-size:15px}
.wz-kinds .opt:has(:checked){box-shadow:inset 0 0 0 1px var(--color-ink)}
}
/* kaart rechts: wie je aan de lijn krijgt */
.ct-person{display:flex;align-items:center;gap:16px}
.ct-person img{flex:none;width:84px;height:84px;border-radius:20px;object-fit:cover;object-position:50% 20%;background:var(--color-paper-2);rotate:-2deg;box-shadow:0 12px 24px -16px rgb(25 23 20 / .5)}
.ct-person figcaption{font-size:15px;line-height:1.35;color:var(--color-ink-2)}
.ct-person b{display:block;font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--color-ink)}
/* succesweergave */
.done-env{position:relative;width:120px;height:84px;margin-bottom:22px}
.done-env .b{position:absolute;inset:0;background:#fff;border-radius:6px;box-shadow:var(--shadow-soft)}
.done-env .f{position:absolute;left:0;right:0;top:0;height:50px;transform-origin:top;background:#F4EFE6;clip-path:polygon(0 0,100% 0,50% 100%);animation:flap .6s .2s cubic-bezier(.2,.8,.2,1) both}
.done-env .s{position:absolute;right:-16px;top:-14px;width:44px;height:44px;border-radius:50%;background:var(--color-ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;animation:pop .45s .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes flap{from{transform:rotateX(180deg)}to{transform:none}}
@keyframes pop{from{scale:0}to{scale:1}}

/* ---------- niet uit het prototype: werken zonder JavaScript, fouten ----------
   contact-aanvraag.js zet html.wz-js (al in de <head>, zodat niets verspringt).
   Zonder JavaScript staan alle stappen onder elkaar met één verzendknop. */
html:not(.wz-js) [data-wz-only]{display:none!important}
html:not(.wz-js) [data-wz-step]+[data-wz-step]{margin-top:56px}
html.wz-js [data-wz-step]:not(.is-active){display:none}
html.wz-js [data-voor]:not(.is-on){display:none}
html.wz-js .wz-group-legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:not(.wz-js) [data-voor]{margin-top:28px}
.wz-group-legend{font-weight:600;color:var(--color-ink)}
html:not(.wz-js) .wz-group-legend+div{margin-top:10px}
[data-wz-step] legend:focus{outline:none}
.wz-err{margin-top:6px;font-size:14px;font-weight:600;color:var(--color-accent-dark,#B8391A)}
.wz-err::before{content:"! ";font-weight:800}
.field[aria-invalid="true"]{border-color:var(--color-accent-dark,#B8391A)}
.wz-kinds.has-err .opt{border-color:var(--color-accent-dark,#B8391A)}
.wz-select{position:relative}
.wz-select select{appearance:none;padding-right:2.5rem;cursor:pointer}
.wz-select svg{position:absolute;right:1rem;top:50%;translate:0 -50%;pointer-events:none}
.wz-ts{min-height:65px}
#contact-done:focus{outline:none}

@media(max-width:379px){
 .wz-kinds{grid-template-columns:minmax(0,1fr)}
 #wizard-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #wizard-btns button{min-width:0;padding-inline:10px;font-size:13px}
 #step-hint{grid-column:1/-1;grid-row:2}
 #wizard-btns [data-wz-finish]{margin-left:0}
}

/* Fieldsets must shrink below their intrinsic form-control width. */
#contact-form fieldset{min-width:0}
@media(max-width:639px){#contact-form [data-wz-step]>.grid{grid-template-columns:minmax(0,1fr)}}
#contact-form [data-wz-step]>.grid>*{min-width:0}