/* ==========================================================================
   Aanvraagformulier — Fluent Forms in de vormgeving van het ontwerp.

   Fluent Forms levert zijn eigen opmaak (.ff-el-*). In plaats van die
   markup na te bouwen, mappen we hem hier op de klassen uit
   Designs/tasmeem.it Landing.html. Zo blijft de plugin verantwoordelijk
   voor validatie, nonces en verzending, en wij alleen voor het uiterlijk.

   Wordt alleen ingeladen op pagina's waar het formulier staat.
   ========================================================================== */

/* De eigen stijlen van de plugin uitschakelen waar ze in de weg zitten. */
.frm-fluent-form fieldset{border:0;margin:0;padding:0;min-width:0}
.frm-fluent-form .ff-el-group{margin-bottom:16px}
.frm-fluent-form .ff-el-group:last-child{margin-bottom:0}

/* ---- labels -------------------------------------------------------------- */
.frm-fluent-form .ff-el-input--label label{font-size:15px;font-weight:500;color:var(--ink-2);margin-bottom:7px;display:block;line-height:1.4}
/* Het sterretje van de plugin weg: het ontwerp gebruikt het niet, en de
   melding onder de stap zegt al wat er ontbreekt. */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.frm-fluent-form .ff-el-is-required.asterisk-left label::before,
.frm-fluent-form .ff-el-is-required label::after,
.frm-fluent-form .ff-el-input--label.ff-el-is-required::after{display:none;content:none}

/* ---- tekstvelden --------------------------------------------------------- */
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="url"],
.frm-fluent-form input[type="number"],
.frm-fluent-form textarea,
.frm-fluent-form select{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;width:100%;line-height:1.5;box-shadow:none;
}
.frm-fluent-form textarea{min-height:120px;resize:vertical;line-height:1.55}
.frm-fluent-form input:focus,
.frm-fluent-form textarea:focus,
.frm-fluent-form select:focus{outline:0;border-color:var(--accent);background:var(--surface);box-shadow:none}
.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder{color:var(--mute)}

/* ---- keuzevakjes en keuzerondjes ----------------------------------------- */
/*
   Het ontwerp toont deze als klikbare kaartjes in twee kolommen. Met elf
   opties in één kolom wordt stap 1 een lijst waar je doorheen moet
   scrollen voordat je de knop ziet; in twee kolommen past hij in beeld.

   :has() zou hier korter zijn, maar de container krijgt geen eigen klasse
   van Fluent Forms, dus we hangen het aan het formulier zelf. Dat werkt
   ook in browsers zonder :has().
*/
.frm-fluent-form .ff-el-form-check{margin:0}
.frm-fluent-form .ff-el-input--content{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Velden die geen keuzelijst zijn, blijven één kolom. */
.frm-fluent-form .ff-el-input--content:not(:has(.ff-el-form-check)){display:block}
@supports not selector(:has(*)){
  .frm-fluent-form .ff-el-input--content{display:block}
  .frm-fluent-form .ff-el-form-check{margin-bottom:10px}
}
@media(max-width:640px){.frm-fluent-form .ff-el-input--content{grid-template-columns:1fr}}

/* Iets compacter, zodat de langere keuzes op één regel blijven. De
   vakjes staan bovenaan uitgelijnd: bij een keuze van twee regels stond
   het vakje anders midden naast de tekst, en dat leest scheef. */
.frm-fluent-form .ff-el-form-check-label{
  position:relative;display:flex;align-items:flex-start;gap:11px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:13px 15px;cursor:pointer;font-size:15.5px;color:var(--ink);margin:0;line-height:1.35;
  height:100%;transition:border-color .18s var(--soepel),background .18s var(--soepel);
}
/* De keuze vult de hele rastercel.
   Zonder deze regels krimpt het label tot de breedte van zijn tekst, en
   dan krijg je een rommelige rand van blokjes in verschillende maten. */
.frm-fluent-form .ff-el-form-check{display:flex;width:100%}
.frm-fluent-form .ff-el-form-check-label{width:100%}
/* Vakje en tekst op dezelfde regel uitlijnen.
   Fluent Forms zet zelf `position:relative;top:-2px` op het invoerveld en
   gooit onze marge weg. Daardoor stond het vakje drie pixels boven het
   midden van de tekst, en dat zie je: het leest als een blokje dat is
   losgeschoten van zijn regel. We halen die verschuiving weg en laten
   het vakje gewoon in de regel meelopen. */
.frm-fluent-form .ff-el-form-check-label input.ff-el-form-check-input{position:static;top:auto;margin:0}
.frm-fluent-form .ff-el-form-check-label:hover{border-color:var(--ink-3)}
.frm-fluent-form .ff-el-form-check-label:has(input:checked){border-color:var(--accent);background:var(--surface)}
.frm-fluent-form .ff-el-form-check-label:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* Het echte vakje vervangen door het vinkje uit het ontwerp. */
.frm-fluent-form .ff-el-form-check-input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;
  border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);
  display:grid;place-content:center;cursor:pointer;
  transition:background .15s var(--soepel),border-color .15s var(--soepel);
}
.frm-fluent-form .ff-el-form-check-radio{border-radius:50%}
/* Het vinkje als achtergrondafbeelding.
   Eerst stond hier een pseudo-element met een clip-path in de vorm van een
   vink. Dat gaf in de praktijk een dichte blauwe vlek zonder zichtbaar
   vinkje: de vorm valt bij twintig pixels vrijwel weg. Een SVG tekent
   dezelfde vink wél scherp, op elk scherm. */
.frm-fluent-form .ff-el-form-check-input:checked{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--accent);
}
/* Het keuzerondje krijgt een stip in plaats van een vink. */
.frm-fluent-form .ff-el-form-check-radio:checked{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Het privacy-akkoord is één lange regel, niet een kaartje in een raster.
   Let op: hier stond eerst :last-of-type. Dat sloeg ook op de elf opties
   in stap 1, want dat is in die pane ook de laatste div. Nu op het veld
   zelf, zodat het alleen dit vinkje raakt. */
.frm-fluent-form .ff-el-input--content:has(input[name="privacy[]"]){grid-template-columns:1fr}

/* Label verbergen waar de kop van de stap dezelfde vraag al stelt. De
   tekst blijft in de HTML staan, zodat een schermlezer de groep wel een
   naam houdt. */
.tasmeem-label-verbergen > .ff-el-input--label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px}
.frm-fluent-form .ff-el-form-check-label span{flex:1}

/* ---- foutmeldingen van de plugin ----------------------------------------- */
.frm-fluent-form .error-text,
.frm-fluent-form .ff-el-is-error .text-danger,
.frm-fluent-form .ff_submit_error{color:#B02D1D;font-size:13.5px;margin-top:8px}
.frm-fluent-form .ff-el-is-error input,
.frm-fluent-form .ff-el-is-error textarea{border-color:#B02D1D}

/* ---- verzendknop --------------------------------------------------------- */
/* De eigen knop van Fluent Forms is normaal onzichtbaar, maar zónder
   JavaScript is dít de knop die de bezoeker gebruikt. Hij krijgt daarom
   dezelfde vormgeving als de rest — inclusief het donkerdere blauw, want
   wit op #3979F3 haalt 4.04:1 en dat is te weinig voor 16px tekst. */
.frm-fluent-form .ff-btn-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 26px;border-radius:var(--r-btn);border:1px solid transparent;
  background:var(--accent-sterk);color:#fff;font:500 16px/1 var(--sans);
  white-space:nowrap;cursor:pointer;box-shadow:none;
}
.frm-fluent-form .ff-btn-submit:hover{filter:brightness(1.07);color:#fff}

/* De eigen knop van de plugin blijft in het document staan zodat zijn
   afhandeling werkt, maar is onzichtbaar: de zichtbare knop is die van
   de stapnavigatie. aanvraag.js zet er tabindex="-1" op, zodat hij ook
   niet met de tabtoets te bereiken is — een onzichtbare knop die wél
   focus krijgt is een val voor toetsenbordgebruikers. */
.tasmeem-verborgen-submit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---- stappen ------------------------------------------------------------- */
/* Zolang de JS niet gedraaid heeft, staat alles gewoon onder elkaar en is
   het formulier bruikbaar. Pas als de indeling actief is, verbergen we
   de niet-zichtbare panes. */
.tasmeem-stappen-actief .pane{display:none}
.tasmeem-stappen-actief .pane.on{display:block;animation:fade .3s cubic-bezier(.2,.7,.2,1)}
.tasmeem-stappen-actief .pane > h3{font-size:23px;line-height:1.18;margin-bottom:8px;font-weight:600;letter-spacing:-.03em}
.tasmeem-stappen-actief .pane > .sub{color:var(--ink-3);font-size:15.5px;margin-bottom:22px}

/* ---- bijlagen ------------------------------------------------------------ */
/* Het verborgen veld waar de sleutels in komen hoeft niemand te zien. */
.frm-fluent-form .ff-el-group:has(> [name="bijlagen"]){display:none}
/* Sleepvlak in plaats van een kale bestandskiezer. Het echte
   invoerveld ligt onzichtbaar over het hele vlak, zodat klikken werkt
   zonder dat we een knop hoeven na te bouwen. Met de tabtoets krijgt het
   vlak een duidelijke rand. */
.tasmeem-bijlagen{margin-bottom:18px}
.tasmeem-dropzone{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:30px 24px;min-height:150px;
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:var(--field);
  transition:border-color .18s var(--soepel),background .18s var(--soepel);cursor:pointer;
}
.tasmeem-dropzone:hover{border-color:var(--ink-3)}
.tasmeem-dropzone.sleep{border-color:var(--accent-sterk);background:var(--tint)}
.tasmeem-dropzone:focus-within{outline:2px solid var(--accent-sterk);outline-offset:3px}
.tasmeem-dropzone input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tasmeem-dropzone svg{width:26px;height:26px;stroke:var(--ink-3);stroke-width:1.6;fill:none}
.tasmeem-dropzone b{font-weight:500;font-size:16px;color:var(--ink)}
.tasmeem-dropzone span{font-size:14px;color:var(--ink-3)}
.tasmeem-bijlagen .hint{margin-top:10px}
.tasmeem-bijlagelijst{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tasmeem-bijlagelijst li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 14px}
.tasmeem-bijlage-weg{margin-left:auto;background:none;border:0;color:var(--ink-3);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:2px 4px}
.tasmeem-bijlage-weg:hover{color:#B02D1D}

/* ---- bevestiging --------------------------------------------------------- */
.frm-fluent-form .ff-message-success,
.ff-message-success,
.tasmeem-bevestiging{
  text-align:center;padding:34px 0 10px;color:var(--ink-3);font-size:17px;
  border:0!important;background:none!important;box-shadow:none;margin:0;
  max-width:44ch;margin-inline:auto;line-height:1.6;
}
.ff-message-success::before{
  content:"";display:block;width:62px;height:62px;border-radius:50%;
  margin:0 auto 22px;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/26px no-repeat;
}

/* ---- laatste stap in twee kolommen ---------------------------------------- */
/*
   Naam en telefoon staan in het ontwerp naast elkaar (.two). Fluent Forms
   free heeft geen kolomveld, dus we leggen het raster over de groepen van
   die stap. Op smalle schermen valt alles terug op één kolom.
*/
@media(min-width:641px){
  /* .on erbij: zonder die klasse zou display:grid de pane weer zichtbaar
     maken en zou stap 5 altijd in beeld staan. */
  .tasmeem-stappen-actief .pane.on[data-step="5"]{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start}
  .tasmeem-stappen-actief .pane.on[data-step="5"] > h3,
  .tasmeem-stappen-actief .pane.on[data-step="5"] > .sub,
  .tasmeem-stappen-actief .pane.on[data-step="5"] > .review{grid-column:1 / -1}
  /* Alles standaard over de volle breedte, en alleen naam en telefoon
     naast elkaar. Eerst stond hier nth-of-type(n+3), maar het
     samenvattingsblok telt als eerste div mee; daardoor stond naam alleen
     in de linkerkolom en liep telefoon over de hele breedte. */
  .tasmeem-stappen-actief .pane.on[data-step="5"] > *{grid-column:1 / -1}
  .tasmeem-stappen-actief .pane.on[data-step="5"] > .ff-el-group:has([name="naam"]),
  .tasmeem-stappen-actief .pane.on[data-step="5"] > .ff-el-group:has([name="telefoon"]){grid-column:span 1}
}

/* ---- hoog contrast in Windows ------------------------------------------- */
/*
   In deze stand haalt de browser achtergrondafbeeldingen weg. Het vinkje
   en het bolletje in dit formulier zijn achtergrondafbeeldingen, dus die
   zouden verdwijnen: een aangevinkt hokje zou er dan precies zo uitzien
   als een leeg hokje. Met forced-color-adjust:none houden we voor deze
   twee elementen onze eigen kleuren, en zetten we ze op de systeemkleur
   voor selectie zodat ze in elk kleurenschema opvallen.
*/
@media (forced-colors: active){
  .frm-fluent-form .ff-el-form-check-input,
  .frm-fluent-form .ff-el-form-check-radio{
    forced-color-adjust:none;
    border:1px solid CanvasText;
    background:Canvas;
  }

  .frm-fluent-form .ff-el-form-check-input:checked,
  .frm-fluent-form .ff-el-form-check-radio:checked{
    background-color:Highlight;
    border-color:Highlight;
  }

  .frm-fluent-form .ff-el-form-check-label:has(input:checked){
    outline:2px solid Highlight;
    outline-offset:1px;
  }

  .frm-fluent-form input,.frm-fluent-form textarea,.frm-fluent-form select{
    border:1px solid CanvasText;
  }
}

/* ---- melding onder een veld ---------------------------------------------- */
/*
   Eén melding per veld, direct eronder, in de foutkleur. De melding zegt
   wat er moet gebeuren en niet wat er mis is: "Vul een telefoonnummer in
   waarop we je kunnen bereiken" in plaats van "ongeldige invoer".

   Rood alleen is niet genoeg, want dat ziet niet iedereen. Er staat ook
   tekst, het veld krijgt een rode rand, en aria-invalid vertelt een
   schermlezer dat er iets mis is met dít veld.
*/
.tasmeem-veldfout{
  margin:7px 0 0;
  font-size:14px;
  line-height:1.45;
  color:#B02D1D;
}

.frm-fluent-form [aria-invalid="true"]{
  border-color:#B02D1D;
}

.frm-fluent-form [aria-invalid="true"]:focus-visible{
  outline-color:#B02D1D;
}