/* ==========================================================================
   Fluent Forms in de stijl van het thema (het sollicitatieformulier in het
   contactblok; zie evc_sollicitatieformulier()). De standaardopmaak van
   Fluent Forms staat uit (evconsult-core); alleen de basis-CSS voor
   kolommen, voorwaardelijke velden en uploads laadt nog. Die komt later in
   de pagina, dus alles hier begint met .evc-ff .fluentform.
   Zelfde velden als het contactformulier (.veld in components.css).
   ========================================================================== */
.evc-ff .fluentform { color: var(--navy); }
.evc-ff .fluentform fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.evc-ff .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.evc-ff .frm-fluent-form .ff-t-container { gap: 1rem; }
.evc-ff .frm-fluent-form .ff-t-container .ff-el-group { margin-bottom: 1.1rem; }
.evc-ff .frm-fluent-form .ff-t-container { margin-bottom: 0; }

/* --- Labels en hulptekst ------------------------------------------------ */
.evc-ff .fluentform .ff-el-input--label { display: block; margin-bottom: .4rem; }
.evc-ff .fluentform .ff-el-input--label label {
  margin: 0;
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.evc-ff .fluentform .ff-el-help-message {
  margin-top: .4rem;
  color: var(--tekst-zacht);
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: 1.45;
}

/* --- Invoervelden ------------------------------------------------------- */
.evc-ff .fluentform .ff-el-form-control {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: .8rem 1rem;
  border: 1.5px solid var(--lijn-veld);
  border-radius: var(--r-sm);
  background: var(--wit);
  color: var(--navy);
  font: inherit;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.evc-ff .fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.evc-ff .fluentform .ff-el-form-control::placeholder { color: var(--tekst-zacht); opacity: .75; }
.evc-ff .fluentform .ff-el-form-control:hover { border-color: var(--tekst-zacht); }
.evc-ff .fluentform .ff-el-form-control:focus,
.evc-ff .fluentform .ff-el-form-control:focus-visible {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgba(10, 125, 250, .25);
}

/* --- Keuze "Wat wil je?": twee tegels ----------------------------------- */
.evc-ff .fluentform .evc-ff-keuze .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check { margin: 0; }
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  min-height: 56px;
  margin: 0;
  padding: .75rem 1rem;
  border: 1.5px solid var(--lijn-veld);
  border-radius: var(--r-sm);
  background: var(--wit);
  color: var(--navy);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check-label:hover { border-color: var(--tekst-zacht); }
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check-label:has(input:checked) {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  background: var(--grijs-licht);
}
.evc-ff .fluentform .evc-ff-keuze .ff-el-form-check-label:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 3px rgba(10, 125, 250, .35); }
.evc-ff .fluentform .ff-el-form-check-label .ff-el-form-check-input {
  top: 0;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--navy);
}

/* --- Bestanden: een stippelvlak als knop, daaronder de lijst ------------ */
.evc-ff .fluentform .ff_upload_btn.ff-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 64px;
  padding: 1rem 1.25rem;
  border: 1.5px dashed var(--lijn-veld);
  border-radius: var(--r-sm);
  background: var(--wit);
  color: var(--navy);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.evc-ff .fluentform .ff_upload_btn.ff-btn::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4M3 13v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4M3 13v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.evc-ff .fluentform .ff_upload_btn.ff-btn:hover,
.evc-ff .fluentform .ff_upload_btn.ff-btn:focus-visible {
  border-color: var(--blauw);
  background: var(--grijs-licht);
  outline: none;
}
.evc-ff .fluentform .ff-uploaded-list { margin-top: .5rem; }
.evc-ff .fluentform .ff-upload-preview {
  margin-top: .5rem;
  border: 1px solid var(--lijn);
  border-radius: var(--r-sm);
  background: var(--wit);
}
.evc-ff .fluentform .ff-upload-thumb { background: var(--grijs-licht); }
.evc-ff .fluentform .ff-upload-details { padding: .6rem 2.25rem .6rem .85rem; border-left-color: var(--lijn); }
.evc-ff .fluentform .ff-upload-filename { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.evc-ff .fluentform .ff-upload-details .ff-inline-block,
.evc-ff .fluentform .ff-upload-details .ff-upload-error { font-size: var(--fs-xs); color: var(--tekst-zacht); }
.evc-ff .fluentform .ff-upload-remove { top: 50%; right: .5rem; color: var(--navy); font-size: 1.25rem; transform: translateY(-50%); }
.evc-ff .fluentform .ff-upload-remove:hover { color: var(--navy); text-shadow: none !important; }
.evc-ff .fluentform .ff-el-progress { height: .5rem; border-radius: var(--r-pill); background: var(--grijs); }
.evc-ff .fluentform .ff-el-progress-bar { border-radius: inherit; background: var(--blauw); }
.evc-ff .fluentform .ff-el-progress-bar span { display: none; }

/* --- Privacy: vinkje met tekst ------------------------------------------ */
.evc-ff .fluentform .ff-el-tc { display: block; }
.evc-ff .fluentform .ff-el-tc label.ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  cursor: pointer;
}
.evc-ff .fluentform .ff-el-tc label.ff_tc_label > span { display: block; width: auto; padding-top: .15rem !important; }
.evc-ff .fluentform .ff-el-tc label.ff_tc_label > div { display: block; }
.evc-ff .fluentform .ff-el-tc a { color: var(--blauw-link); font-weight: var(--fw-medium); }

/* --- Fouten: roze accent met navy tekst (zoals .melding--fout) ---------- */
.evc-ff .fluentform .ff-el-is-error .ff-el-form-control,
.evc-ff .fluentform .ff-el-is-error .ff_upload_btn.ff-btn,
.evc-ff .fluentform .ff-el-is-error.evc-ff-keuze .ff-el-form-check-label {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--roze);
}
.evc-ff .fluentform .ff-el-is-error .ff-el-form-check-label,
.evc-ff .fluentform .ff-el-is-error .ff-el-form-check-label a { color: var(--navy); }
.evc-ff .fluentform .text-danger,
.evc-ff .fluentform .ff-el-is-error .text-danger {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .45rem;
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.evc-ff .fluentform .text-danger::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--roze);
  box-shadow: 0 0 0 1.5px var(--navy);
  transform: translateY(-.05em);
}

/* --- Verzenden ---------------------------------------------------------- */
.evc-ff .fluentform .ff_submit_btn_wrapper { margin: 1.5rem 0 0; }
.evc-ff .fluentform .ff-btn-submit.btn { font-family: inherit; cursor: pointer; }
.evc-ff .fluentform .ff-btn-submit.btn:disabled,
.evc-ff .fluentform .ff-btn-submit.btn.disabled { opacity: .65; cursor: progress; transform: none; }
@media (max-width: 479.98px) {
  .evc-ff .fluentform .ff-btn-submit.btn { width: 100%; }
}

/* --- Bevestiging na verzenden (zoals .melding) -------------------------- */
.evc-ff .ff-message-success {
  position: relative;
  margin: 0;
  padding: 1rem 1.25rem 1rem 3.1rem;
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--blauw);
  border-radius: var(--r-sm);
  background: var(--wit);
  box-shadow: none;
  color: var(--navy);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.evc-ff .ff-message-success::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: calc(1rem + (1.5em - 1.25rem) / 2);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--blauw);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.2 6.3a1 1 0 0 0-1.4 0L8.7 10.4 7.2 8.9a1 1 0 1 0-1.4 1.4l2.2 2.2a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.2 6.3a1 1 0 0 0-1.4 0L8.7 10.4 7.2 8.9a1 1 0 1 0-1.4 1.4l2.2 2.2a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.evc-ff .ff-message-success p { margin: 0; }
.evc-ff .ff-message-success p + p { margin-top: .4rem; font-weight: var(--fw-regular); }
/* Na verzenden staat alleen de bevestiging in de kaart: kop is dan overbodig */
.b-contact-blok__kaart:has(.ff-message-success) .b-contact-blok__kaartkop { display: none; }
@media (forced-colors: active) {
  .evc-ff .ff-message-success::before,
  .evc-ff .fluentform .ff_upload_btn.ff-btn::before { background: CanvasText; forced-color-adjust: none; }
}

/* --- Nieuwsbrief in de footer (donker): veld en knop op één rij ---------- */
.site-footer__nieuwsbrief .evc-ff { margin-top: 1.25rem; }
.evc-ff--donker .fluentform { color: var(--wit); }
.evc-ff--donker .fluentform .ff-el-group { margin-bottom: 0; }
.evc-ff--donker .fluentform .ff-el-input--label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 480px) {
  .evc-ff--donker .fluentform fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
  .evc-ff--donker .fluentform fieldset > :not(.ff-el-group):not(.ff_submit_btn_wrapper) { grid-column: 1 / -1; }
}
.evc-ff--donker .fluentform .ff-el-form-control {
  min-width: 0;
  min-height: 52px;
  padding: .8rem 1.1rem;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  color: var(--wit);
}
.evc-ff--donker .fluentform .ff-el-form-control::placeholder { color: var(--tekst-op-donker-zacht); opacity: 1; }
.evc-ff--donker .fluentform .ff-el-form-control:hover { border-color: rgba(255, 255, 255, .5); }
.evc-ff--donker .fluentform .ff-el-form-control:focus,
.evc-ff--donker .fluentform .ff-el-form-control:focus-visible { border-color: var(--roze); box-shadow: 0 0 0 3px rgba(255, 160, 230, .35); }
.evc-ff--donker .fluentform .ff_submit_btn_wrapper { margin: 0; }
.evc-ff--donker .fluentform .error,
.evc-ff--donker .fluentform .text-danger { color: var(--roze); }
@media (max-width: 479.98px) {
  .evc-ff--donker .fluentform .ff_submit_btn_wrapper { margin-top: .75rem; }
}
.evc-ff--donker .ff-message-success { border-color: var(--navy-80); background: var(--navy-90); color: var(--wit); }
.evc-ff--donker .ff-message-success::before { background: var(--groen); }

/* Whitepaper: downloadknop onder de bevestiging */
.evc-ff .ff-message-success .whitepaper-download { margin-top: 1rem; }