/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 03 2026 | 20:40:42 */
/* ==========================================================
   Fluent Forms – sectiekaarten met witte scheidingsbanden
   Alleen voor een formulier met Form CSS Class "ff-cards"
   (Instellingen → Formulierinstellingen). Bouwt voort op de
   basis-snippet; zonder de class blijft het de basis.

   Opbouw: elk direct onderdeel van de fieldset is grijs. Boven
   elke sectiekop (behalve de eerste) zit een transparante band,
   zodat de witte wrapper erdoorheen schijnt. De drop-shadow
   volgt de werkelijke vorm en geeft elke sectie een eigen
   schaduw.

   Ruimte: de afstand tussen velden is een bovenruimte
   (--field-gap). De onderruimte van een kaart (--card-pad)
   wordt getekend door de volgende sectiekop of de knopwrapper.
   De sectiekop bevat zelf de lijn en de ruimte eronder, dus
   het eerste veld na een kop krijgt geen extra ruimte.
   ========================================================== */

/* 1. Wrapper wit: dit is wat door de band heen schijnt */
.fluentform:has(> form.ff-cards) {
  background-color: #fff !important;
}

/* 2. Variabelen en schaduw */
form.frm-fluent-form.ff-cards {
  --card-bg: #f4f5f7;
  --card-line: #dcdfe4;
  --card-pad: clamp(0.875rem, 2.5vw, 1.5rem);
  --band-height: 1.25rem;
  --field-gap: 16px;
  --head-gap: 0.5rem; /* ruimte tussen koptekst en lijn */

  background: none;
  box-shadow: none;
  padding: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

/* 3. Grijs vlak: velden en containers
   Elk direct onderdeel krijgt de veldafstand als padding-top,
   zodat het grijs doorloopt en een helptekst de rij niet
   extra hoog maakt. */
form.frm-fluent-form.ff-cards fieldset > :is(
    .ff-el-group,
    .ff-field_container,
    .ff-name-address-wrapper,
    .ff-column-container
  ):not(.ff-hpsf-container, .ff-el-section-break, .ff_submit_btn_wrapper) {
  background-color: var(--card-bg);
  margin: 0;
  padding: var(--field-gap) var(--card-pad) 0;
}

/* Direct na een sectiekop: de kop levert zelf de ruimte */
form.frm-fluent-form.ff-cards fieldset > .ff-el-section-break + :is(
    .ff-el-group,
    .ff-field_container,
    .ff-name-address-wrapper,
    .ff-column-container
  ) {
  padding-top: 0;
}

/* 4. Sectiekoppen
   Gradient van boven naar beneden: grijs (onderruimte van de
   kaart erboven), transparante band, grijs voor de kop zelf.
   Daarbovenop een lijn van 1px, --field-gap boven de onderrand. */
form.frm-fluent-form.ff-cards fieldset > .ff-el-section-break {
  margin: 0;
  padding: calc(2 * var(--card-pad) + var(--band-height)) var(--card-pad)
           calc(var(--head-gap) + var(--field-gap)) !important;
  background:
    linear-gradient(var(--card-line), var(--card-line))
      left 0 bottom var(--field-gap) / 100% 1px no-repeat,
    linear-gradient(
      to bottom,
      var(--card-bg) var(--card-pad),
      transparent var(--card-pad),
      transparent calc(var(--card-pad) + var(--band-height)),
      var(--card-bg) calc(var(--card-pad) + var(--band-height))
    );
}

/* Eerste sectiekop: geen eerdere sectiekop als broer, dus geen band */
form.frm-fluent-form.ff-cards fieldset > .ff-el-section-break:not(.ff-el-section-break ~ .ff-el-section-break) {
  padding: var(--card-pad) var(--card-pad)
           calc(var(--head-gap) + var(--field-gap)) !important;
  background:
    linear-gradient(var(--card-line), var(--card-line))
      left 0 bottom var(--field-gap) / 100% 1px no-repeat,
    var(--card-bg);
  border-radius: 3px 3px 0 0;
}

/* Koptekst zelf: geen eigen marges, die zitten in de kop */
form.frm-fluent-form.ff-cards fieldset .ff-el-section-title {
  margin: 0 !important;
  padding: 0;
  border: 0;
}

/* 5. Container met sectiekop (Pasfoto)
   De container tekent de band; de kop erin tekent de lijn en
   loopt met negatieve zijmarge over de volle kaartbreedte. */
form.frm-fluent-form.ff-cards fieldset > .ff-column-container:has(.ff-el-section-break) {
  margin-top: 0;
  padding: calc(2 * var(--card-pad) + var(--band-height)) var(--card-pad) 0;
  background: linear-gradient(
    to bottom,
    var(--card-bg) var(--card-pad),
    transparent var(--card-pad),
    transparent calc(var(--card-pad) + var(--band-height)),
    var(--card-bg) calc(var(--card-pad) + var(--band-height))
  );
}

form.frm-fluent-form.ff-cards fieldset > .ff-column-container .ff-el-section-break {
  margin: 0 calc(-1 * var(--card-pad));
  padding: 0 var(--card-pad) calc(var(--head-gap) + var(--field-gap)) !important;
  background: linear-gradient(var(--card-line), var(--card-line))
    left 0 bottom var(--field-gap) / 100% 1px no-repeat;
}

/* 6. Ruimte binnen containers
   Velden in cellen hebben zelf geen marge. Alleen een tweede
   rij (adresveld) krijgt de veldafstand erboven. */
form.frm-fluent-form.ff-cards fieldset .ff-t-cell > .ff-el-group:not(.ff-el-section-break),
form.frm-fluent-form.ff-cards fieldset .ff-t-container,
form.frm-fluent-form.ff-cards fieldset .ff-field_container,
form.frm-fluent-form.ff-cards fieldset .ff-name-address-wrapper,
form.frm-fluent-form.ff-cards fieldset .ff-column-container {
  margin-top: 0;
  margin-bottom: 0;
}

form.frm-fluent-form.ff-cards fieldset .ff-name-address-wrapper .ff-t-container + .ff-t-container {
  margin-top: var(--field-gap);
}

/* 7. Verzendknop: los onder de kaarten, op wit
   De bovenkant tekent de onderruimte van de laatste kaart. */
form.frm-fluent-form.ff-cards fieldset > .ff_submit_btn_wrapper {
  margin: 0;
  padding: calc(var(--card-pad) + var(--band-height)) var(--card-pad) 0;
  background: linear-gradient(
    to bottom,
    var(--card-bg) var(--card-pad),
    transparent var(--card-pad)
  );
}

form.frm-fluent-form.ff-cards fieldset > .ff_submit_btn_wrapper .ff-btn-submit {
  margin-top: 0;
}

/* Velden onder elkaar in één cel (bijv. voorwaardelijke details):
   veldafstand tussen de velden. Bij containers met twee kolommen
   verandert er niets, want daar staat één veld per cel. */
form.frm-fluent-form.ff-cards fieldset .ff-column-container:not(:has(.ff-el-section-break)) .ff-t-cell > .ff-el-group + .ff-el-group {
  margin-top: var(--field-gap);
}

/* Introtekst (Custom HTML) hoort bij het veld eronder: kleinere afstand */
form.frm-fluent-form.ff-cards fieldset .ff-column-container:not(:has(.ff-el-section-break)) .ff-t-cell > .ff-custom_html + .ff-el-group {
  margin-top: 14px;
}