/* ═══════════════════════════════════════════════════════════════════
   Montisoro — forms.css  ·  gedeelde formstijl (de "canon")
   ───────────────────────────────────────────────────────────────────
   Eén bron van waarheid voor tekstvelden, focus, fouten, knoppen en
   het privacy-akkoord. Twee lagen:
     1) .m-form*  → canonieke component voor NIEUWE formulieren.
     2) Harmonisatie → trekt de BESTAANDE formulieren (.cf-, #bfFlow)
        op dezelfde focus-ring, foutkleur en knop-recept.
   Laad dit ALS LAATSTE (ná de pagina-<style>) zodat de overrides winnen.
   Tokens leunen op de bestaande site-variabelen (--orange, --border-l…).
═══════════════════════════════════════════════════════════════════ */
:root{
  --form-radius:10px;
  --form-border-col:rgba(0,0,0,0.12);
  --form-focus:0 0 0 3px var(--orange-dim, rgba(232,89,43,0.10));
  --form-err:#c0392b;
  --form-err-tint:#fdf3f1;
}

/* ── 1 · CANON — component voor nieuwe formulieren ──────────────── */
.m-form{display:flex;flex-direction:column;gap:16px;}
.m-form .m-field{display:flex;flex-direction:column;gap:6px;}
.m-form .m-field.full{grid-column:1/-1;}
.m-form label{font-size:12px;font-weight:600;color:var(--ink,#1a1512);letter-spacing:.01em;}
.m-form label .req{color:var(--orange);}
.m-form input,.m-form textarea,.m-form select{
  font-family:inherit;font-size:14px;color:#1a1512;background:#fff;
  border:1px solid var(--form-border-col);border-radius:var(--form-radius);
  padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s;}
.m-form input:focus,.m-form textarea:focus,.m-form select:focus{
  outline:none;border-color:var(--orange);box-shadow:var(--form-focus);}
.m-form textarea{resize:vertical;min-height:74px;line-height:1.5;}
.m-form .m-field.is-error input,.m-form .m-field.is-error textarea{
  border-color:var(--form-err);background:var(--form-err-tint);}
.m-form .m-err{font-size:11.5px;color:var(--form-err);font-weight:500;}

/* Primaire knop — pill, oranje, géén hoofdletters */
.m-form-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--orange);border:1.5px solid var(--orange);
  border-radius:100px;padding:13px 26px;cursor:pointer;
  transition:background .2s,border-color .2s;}
.m-form-btn:hover:not(:disabled){background:var(--orange-hover,#d04d22);border-color:var(--orange-hover,#d04d22);}
.m-form-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Privacy-akkoord — verplicht op élk formulier dat persoonsgegevens verzamelt */
.m-consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;
  color:var(--text-muted,#5c534b);line-height:1.55;cursor:pointer;}
.m-consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--orange);cursor:pointer;}
.m-consent a{color:var(--orange);text-decoration:underline;}
.m-consent.is-error{color:var(--form-err);}
.m-consent.is-error input{outline:2px solid var(--form-err);outline-offset:1px;}

/* ── 2 · HARMONISATIE — bestaande formulieren op de canon ──────────
   (tot ze de .m-form-component overnemen)                            */

/* "Stuur ons een bericht" (.cf-) — focus-ring toevoegen + foutkleur gelijk */
.cf-row input:focus,.cf-row textarea:focus{box-shadow:var(--form-focus);}
.cf-row input.is-error,.cf-row textarea.is-error{border-color:var(--form-err);background:var(--form-err-tint);}
.cf-err{color:var(--form-err);}
.cf-consent.is-error{color:var(--form-err);}
.cf-consent.is-error input{outline-color:var(--form-err);}

/* Boekingsflow (#bfFlow) — foutkleur + knop-recept gelijktrekken */
#bfFlow .field.is-error input{border-color:var(--form-err);}
#bfFlow .bf-err{color:var(--form-err);}
#bfFlow .bf-btn-primary{font-size:13px;font-weight:700;}

/* Booking-consent: zelfde rij als de canon, volle breedte in het grid */
#bfFlow .m-consent{grid-column:1/-1;margin-top:2px;}

/* ── Fit check (.fc-) — donkere vragenlijst; alleen gedeelde taal gelijk ──
   Knop-recept: pill blijft, maar géén hoofdletters meer (canon) + zelfde gewicht. */
.fc-next{text-transform:none;letter-spacing:.02em;font-weight:700;}
/* Gate-/lead-velden in het resultaatpaneel: zelfde oranje focus-gloed */
.fcp-rcard input:focus,.fcp-rcard textarea:focus,.fcp-right input:focus,.fcp-right textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:var(--form-focus);}

/* ── Calculator (.b-) — wizard; gedeelde taal gelijk ──
   Foutrood gelijk aan de canon (calculator gebruikte --bad). */
.b-numfield.is-error{border-color:var(--form-err);}
.b-numfield.is-error:focus-within{border-color:var(--form-err);box-shadow:0 0 0 3px rgba(192,57,43,.22);}
.b-field-err{color:var(--form-err);}
.b-form .f-input.is-error{border-color:var(--form-err)!important;box-shadow:0 0 0 3px rgba(192,57,43,.18);}
.b-form .f-input.is-error svg{color:var(--form-err);}
.b-consent.is-error{color:var(--form-err);}
.b-consent.is-error input{outline-color:var(--form-err);}
/* Knopvorm gelijk: pill (kleur blijft de bewuste WCAG-AA oranje #CC4A1E). */
.b-submit{border-radius:100px;}

/* ── iOS Safari auto-zoom fix ──────────────────────────────────────
   Safari (iPhone) zoomt automatisch in zodra een invoerveld font-size
   <16px heeft, en zoomt niet terug uit. 16px op mobiel voorkomt dat —
   geldt voor ALLE formulieren site-breed (calculator/contact/fit-check/
   boekingsflow). Desktop blijft op de ontwerpgrootte. */
@media (max-width: 820px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* Optioneel-veld hint (audit #6 — telefoon optioneel) */
.opt-hint{color:#9a938b;font-weight:400;font-size:.82em;letter-spacing:.01em;}