/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 03 2026 | 20:35:03 */
/* ==========================================================
   Fluent Forms – basis
   Geldt voor alle formulieren. De kaarten (Form CSS Class
   "ff-cards") bouwen hierop voort.
   ========================================================== */

/* ==========================================================
   0. Variabelen
   ========================================================== */

form.frm-fluent-form {
  --fluentform-primary: #07558b;  /* geselecteerde Ja/Nee, radio, checkbox */
  --fluentform-danger: #c8161d;   /* sterretje en validatiemeldingen */
  --ff-brand-dark: #053a5b;       /* knop, link bij hover */
  --ff-field-border: #c9ced6;     /* rand van invoervelden */
  --ff-placeholder: #757b86;
  --ff-help: #5f6672;
  --field-gap: 20px;              /* ruimte tussen velden */
}

/* ==========================================================
   1. Sectiekoppen
   ========================================================== */

/* Scheidingslijn (streep) en lege beschrijving weg */
form.frm-fluent-form .ff-el-section-break hr,
form.frm-fluent-form .ff-el-section-break .ff-section_break_desk:empty {
  display: none;
}

form.frm-fluent-form .ff-el-section-break {
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

/* Kopopmaak – standaard zonder bovenmarge */
form.frm-fluent-form .ff-el-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

/* Bovenmarge alleen als er zichtbare inhoud vóór de kop staat */
form.frm-fluent-form
  :not(input):not(script):not(legend):not(.akismet-fields-container)
  + .ff-el-section-break
  .ff-el-section-title {
  margin-top: 2.5rem;
}

/* Container met sectiekop (Pasfoto): kop is hier het eerste
   element, dus de bovenruimte komt van de container zelf.
   Padding in plaats van marge, zodat de ruimte niet verspringt
   bij voorwaardelijk tonen (flex-container, geen margin-collapse). */
form.frm-fluent-form .ff-column-container:has(.ff-el-section-break) {
  margin-top: 0;
  padding-top: 2.5rem;
}

/* Beschrijving, als die wél is ingevuld */
form.frm-fluent-form .ff-el-section-break .ff-section_break_desk {
  margin: 0 0 1rem;
}

form.frm-fluent-form .ff-el-section-break .ff-section_break_desk > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   2. Verticale ruimte tussen velden
   ========================================================== */

form.frm-fluent-form .ff-el-group,
form.frm-fluent-form .ff-t-cell > .ff-el-group:not(.ff-el-section-break) {
  margin-bottom: var(--field-gap);
}

form.frm-fluent-form .ff-el-section-break,
form.frm-fluent-form .ff-t-container,
form.frm-fluent-form .ff-field_container,
form.frm-fluent-form .ff-name-address-wrapper,
form.frm-fluent-form .ff-name-address-wrapper .ff-el-input--content,
form.frm-fluent-form .ff-column-container {
  margin-bottom: 0;
}

/* Cellen bovenaan uitlijnen, zodat een helptekst onder één cel
   (bijv. Tussenvoegsel) de andere velden niet naar beneden duwt */
form.frm-fluent-form .ff-t-container {
  align-items: flex-start;
}

/* Helptekst dicht bij het veld */
form.frm-fluent-form .ff-el-help-message {
  margin-top: 4px;
}

/* Mobiel: cellen staan onder elkaar, dus elke cel na de eerste
   krijgt de veldafstand erboven */
@media (max-width: 767px) {
  form.frm-fluent-form fieldset .ff-t-container > .ff-t-cell + .ff-t-cell > .ff-el-group:not(.ff-el-section-break) {
    margin-top: var(--field-gap);
  }

  /* Tweede rij van het adresveld, en containers onder elkaar */
  form.frm-fluent-form fieldset .ff-name-address-wrapper .ff-t-container + .ff-t-container {
    margin-top: var(--field-gap);
  }

  /* Naamvelden (Voornaam, Tussenvoegsel, Achternaam) in een eigen wrapper */
  form.frm-fluent-form fieldset .ff-name-field-wrapper .ff-t-cell + .ff-t-cell {
    margin-top: var(--field-gap);
  }
}

/* ==========================================================
   3. Custom HTML-tekst
   Normale regelafstand; staat na blok 2 en is specifieker,
   zodat de ondermarge van 14px wint van de veldafstand.
   ========================================================== */

form.frm-fluent-form .ff-custom_html p {
  line-height: 1.5;
  margin: 0;
}

form.frm-fluent-form .ff-custom_html p + p {
  margin-top: 0.75em;
}

form.frm-fluent-form .ff-el-group.ff-custom_html {
  margin-bottom: 14px;
}

/* ==========================================================
   4. Checkbox zonder zichtbaar label
   Gebruik: Container Class "checkbox-only" bij het veld.
   Het label blijft beschikbaar voor schermlezers; het
   verplicht-sterretje komt achter de optietekst.
   ========================================================== */

form.frm-fluent-form .checkbox-only .ff-el-input--label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

form.frm-fluent-form .checkbox-only:has(.ff-el-input--label.ff-el-is-required) .ff-el-form-check-label span::after {
  content: " *";
  margin-left: 3px;
  color: var(--fluentform-danger);
}

/* ==========================================================
   5. Checkbox- en radio-opties
   Vinkje gecentreerd op de eerste tekstregel; meerregelige
   tekst blijft ingesprongen naast het vinkje staan.

   Alles staat in px, zodat de uitlijning niet afhangt van de
   lettergrootte van het input-element (die wijkt af van de tekst).
   Afstellen: --box-offset is de verschuiving van het vinkje naar
   beneden. Staat het vinkje te hoog: verhoog (bijv. 2px). Te laag:
   verlaag (bijv. 1px). Stap: 0,5px.
   Verandert de lettergrootte van de optietekst: pas --option-line aan
   (lettergrootte × 1,35).
   ========================================================== */

form.frm-fluent-form .ff-el-form-check-label {
  --option-line: 21.6px;    /* regelhoogte van de optietekst */
  --box: 14.6667px;         /* hoogte en breedte van het vinkje */
  --box-offset: 5.5px;      /* verschuiving omlaag, afgesteld op het optische midden */

  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

form.frm-fluent-form .ff-el-form-check-label span {
  flex: 1;
  line-height: var(--option-line);
  text-wrap: pretty; /* Firefox kent pretty nog niet */
}

form.frm-fluent-form .ff-el-form-check-label input[type="checkbox"],
form.frm-fluent-form .ff-el-form-check-label input[type="radio"] {
  flex: none;
  width: var(--box) !important;
  height: var(--box) !important;
  margin: 0 !important;
  transform: translateY(var(--box-offset));
}

/* ==========================================================
   6. Invoervelden, placeholder en helptekst
   ========================================================== */

form.frm-fluent-form .ff-el-form-control {
  border-color: var(--ff-field-border);
}

form.frm-fluent-form .ff-el-form-control:focus {
  border-color: var(--fluentform-primary);
  box-shadow: 0 0 0 3px rgba(7, 85, 139, 0.15);
  outline: 0;
}

form.frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--ff-placeholder);
  opacity: 1;
}

form.frm-fluent-form .ff-el-help-message {
  color: var(--ff-help);
}

/* ==========================================================
   7. Links
   Donkerblauw met gestippelde lijn, zoals links in de content
   (snippet "link visibility fix"); de kleur met !important om
   de paletkleur van het thema te overstemmen.
   ========================================================== */

form.frm-fluent-form a {
  color: var(--fluentform-primary) !important;
  font-weight: 500;
  text-decoration: underline dotted #0b75b7;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

form.frm-fluent-form a:hover,
form.frm-fluent-form a:focus {
  color: var(--ff-brand-dark) !important;
  text-decoration: underline solid var(--ff-brand-dark);
  text-decoration-thickness: 2px;
}

/* Helptekst: dunnere lijn, ook bij hover en focus */
form.frm-fluent-form .ff-el-help-message a,
form.frm-fluent-form .ff-el-help-message a:hover,
form.frm-fluent-form .ff-el-help-message a:focus {
  text-decoration-thickness: 1px;
}

/* ==========================================================
   8. Verzendknop
   ========================================================== */

form.frm-fluent-form .ff-btn-submit {
  display: inline-block;
  white-space: nowrap;
  border-radius: 5px;
  background: var(--ff-brand-dark) !important;
  border: 0;
  border-bottom: 6px solid rgb(35, 37, 40);
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  font-family: "Titillium Web", sans-serif;
  font-weight: 500;
  font-size: inherit;
  padding: 12px;
  margin-top: 15px;
  margin-bottom: 9px;
  box-shadow: none;
  transition: none;
}

form.frm-fluent-form .ff-btn-submit:hover {
  color: #ffffff;
}

form.frm-fluent-form .ff-btn-submit:focus,
form.frm-fluent-form .ff-btn-submit:active {
  border-bottom-width: 3px;
  margin-bottom: 12px;
  transform: translateY(3px);
}