/*
 * Fluent Forms in de stijl van het thema.
 * Wordt alleen geladen op de pagina "Taxatie aanvragen" (zie functions.php).
 * Het formulier heeft ID 3. De velden worden herkend aan hun veldnaam, dus de volgorde in Fluent Forms maakt niet uit.
 * Aanpassen: pas hieronder de kleuren, de ruimte of de plaatsing aan. De kleuren komen uit de tokens van style.css.
 */

.ff-wrap{--fluentform-primary:var(--accent);--fluentform-secondary:var(--ink);margin:var(--s4) 0 0}

/* Het raster: twee kolommen, op een telefoon één */
.ff-wrap .fluentform fieldset{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0;padding:0;border:0;min-width:0}
.ff-wrap .fluentform .ff-el-group,
.ff-wrap .fluentform .ff-name-field-wrapper{margin:0;min-width:0}
.ff-wrap .fluentform .ff-name-field-wrapper{grid-column:1 / -1}
.ff-wrap .fluentform .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0}
.ff-wrap .fluentform .ff-t-cell{width:auto !important;padding:0 !important;margin:0}

/* Volgorde en breedte per veld (herkend aan de veldnaam) */
.ff-wrap .fluentform .ff-name-field-wrapper{order:1}
.ff-wrap .fluentform .ff-el-group:has([name="email"]){order:2}
.ff-wrap .fluentform .ff-el-group:has([name="phone"]){order:3}
.ff-wrap .fluentform .ff-el-group:has([name="input_text"]){order:4}
.ff-wrap .fluentform .ff-el-group:has([name="dropdown"]){order:5}
.ff-wrap .fluentform .ff-el-group:has([name="input_text_1"]){order:6}
.ff-wrap .fluentform .ff-el-group:has([name="input_text_2"]){order:7}
.ff-wrap .fluentform .ff-el-group:has([name="input_text_3"]){order:8;grid-column:1 / -1}
.ff-wrap .fluentform .ff-el-group:has([name="dropdown_1"]){order:9}
.ff-wrap .fluentform .ff-el-group:has([name="input_text_4"]){order:10}
.ff-wrap .fluentform .ff-el-group:has([name="description"]){order:11;grid-column:1 / -1}
.ff-wrap .fluentform .ff_submit_btn_wrapper{order:12;grid-column:1 / -1;margin:0}

/* Labels en velden zoals in de rest van de site */
.ff-wrap .fluentform .ff-el-input--label{margin:0 0 6px}
.ff-wrap .fluentform .ff-el-input--label label{font:400 var(--fs-small)/1.4 var(--body);color:var(--muted);margin:0}
.ff-wrap .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{color:var(--brick);margin-left:3px}
.ff-wrap .fluentform .ff-el-form-control{font:400 18px/1.4 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;height:auto;min-height:0;box-shadow:none;width:100%;box-sizing:border-box}
.ff-wrap .fluentform select.ff-el-form-control{padding-right:36px}
.ff-wrap .fluentform textarea.ff-el-form-control{min-height:140px}
.ff-wrap .fluentform .ff-el-form-control::placeholder{color:#8a928d;opacity:1}
.ff-wrap .fluentform .ff-el-form-control:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0;box-shadow:none;background:var(--surface);color:var(--ink)}

/* Foutmeldingen */
.ff-wrap .fluentform .ff-el-is-error .ff-el-form-control{border-color:#9a3b3b}
.ff-wrap .fluentform .error.text-danger,
.ff-wrap .fluentform .ff-el-is-error .error{font-size:var(--fs-small);color:#9a3b3b;margin-top:6px}

/* Verzendknop zoals de andere knoppen van het thema */
.ff-wrap .fluentform .ff-btn-submit{display:inline-block;font:600 17px/1 var(--body);color:#fff;background:var(--accent);border:0;border-radius:var(--r);padding:17px 28px;cursor:pointer;transition:background-color 160ms ease}
.ff-wrap .fluentform .ff-btn-submit:hover,
.ff-wrap .fluentform .ff-btn-submit:focus-visible{background:var(--dark);color:#fff;opacity:1}
.ff-wrap .fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Bevestiging na het versturen, zoals de meldingen elders */
.ff-wrap .ff-message-success{padding:var(--s2) var(--s3);margin:0;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);color:var(--ink);font-size:18px;line-height:1.6;box-shadow:none}

/* Telefoon en tablet */
@media (max-width:700px){
  .ff-wrap .fluentform fieldset,
  .ff-wrap .fluentform .ff-t-container{grid-template-columns:1fr}
}