/* =============================================================================
   POPsCOOL — Calculated Fields Form thema  (class: .cp_cff_pop)
   Compact, mobielvriendelijk (≈80% mobiel), POPsCOOL huisstijl.
   Afgeleid van de proefles-wizard (plugin trial-form.css):
     dark-blue #223a89 structuur/labels · brand-blue #36A9E1 accent ·
     oranje #f1851f CTA · Typewriter-koppen · pill-vormen · zachte kaarten.
   Zelfstandig: bundelt het Typewriter-lettertype in deze map.
   ============================================================================= */

@font-face{
  font-family:'PopscoolTypewriter';
  font-display:swap;
  src:url('typewriter.ttf') format('truetype');
}

.cp_cff_pop{
  --f-blue:#223a89;      /* structuur / labels          */
  --f-sky:#36A9E1;       /* accent / focus              */
  --f-orange:#f1851f;    /* primaire CTA                */
  --f-orange-d:#d9740f;
  --f-purple:#7C216C;    /* koppen (zoals paginatitels) */
  --f-muted:#8a93a6;     /* kleine uppercase labels     */
  --f-line:#d7dce6;      /* randen                      */
  --f-ink:#1a2340;       /* invoertekst                 */
  --f-soft:#f4f6fb;      /* zachte vlakken              */
  --f-err:#e0483d;
  --f-ok:#3bb27a;
}

/* ---------- Kaart-wrapper ---------- */
.cp_cff_pop #fbuilder{
  background:#fff;
  border:1px solid #e6e9f1;
  border-radius:18px;
  box-shadow:0 10px 34px rgba(20,26,46,.10);
  padding:22px 22px 26px;
}
.cp_cff_pop #fbuilder *{box-sizing:border-box}
.cp_cff_pop #fbuilder,
.cp_cff_pop #fbuilder input,
.cp_cff_pop #fbuilder select,
.cp_cff_pop #fbuilder textarea,
.cp_cff_pop #fbuilder button{font-family:inherit}
.cp_cff_pop #fbuilder .fform{margin:0}

/* ---------- Veld-cel: compacte verticale ritme ---------- */
.cp_cff_pop #fbuilder .fields:not(.cff-container-field){padding:7px 0}
.cp_cff_pop #fbuilder .fields.section_breaks{padding:0}

/* ---------- Labels: klein, dark-blue ---------- */
.cp_cff_pop #fbuilder .fields > label{
  display:block;margin:0 0 5px;
  font-size:13.5px;font-weight:700;color:var(--f-blue);line-height:1.25;
}
.cp_cff_pop #fbuilder .r{color:var(--f-orange);margin-left:2px}

/* ---------- Inputs: 16px (geen iOS-zoom), 12px radius, zachte focus ---------- */
.cp_cff_pop #fbuilder input[type="text"],
.cp_cff_pop #fbuilder input[type="password"],
.cp_cff_pop #fbuilder input[type="email"],
.cp_cff_pop #fbuilder input[type="date"],
.cp_cff_pop #fbuilder input[type="datetime"],
.cp_cff_pop #fbuilder input[type="tel"],
.cp_cff_pop #fbuilder input[type="number"],
.cp_cff_pop #fbuilder input[type="search"],
.cp_cff_pop #fbuilder input[type="time"],
.cp_cff_pop #fbuilder input[type="url"],
.cp_cff_pop #fbuilder textarea,
.cp_cff_pop #fbuilder select{
  width:100%;background:#fff;
  border:1.5px solid var(--f-line);border-radius:12px;
  color:var(--f-ink);font-size:16px;line-height:1.3;
  padding:12px 14px;height:auto;margin:0;
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;appearance:none;
}
.cp_cff_pop #fbuilder input::placeholder,
.cp_cff_pop #fbuilder textarea::placeholder{color:#aab2c2}
.cp_cff_pop #fbuilder textarea{min-height:88px;resize:vertical}
.cp_cff_pop #fbuilder select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23223a89' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.cp_cff_pop #fbuilder input:focus,
.cp_cff_pop #fbuilder textarea:focus,
.cp_cff_pop #fbuilder select:focus{
  outline:none;border-color:var(--f-sky);
  box-shadow:0 0 0 3px rgba(54,169,225,.18);
}

/* ---------- Kolom-containers: echte tussenruimte (fdiv ÉN fieldset) ----------
   Echte DOM: een container (.cff-div-field of .cff-fieldset-field) heeft een
   binnen-wrapper #fieldnameXX_1 met .columnN velden (50%-breed, gefloat,
   gutter 0). Fieldsets hebben die wrapper ín <fieldset> (na de <legend>).
   Maak die wrapper flex met een kolom-gap; geneste fieldsets met columns:2
   krijgen zo óók de juiste tussenruimte. */
.cp_cff_pop #fbuilder :is(
    .cff-div-field.cff-container-field > div:not(.clearer),
    .cff-fieldset-field.cff-container-field > fieldset > div:not(.clearer)){
  display:flex;flex-wrap:wrap;gap:0 18px;align-items:flex-start;
}
.cp_cff_pop #fbuilder :is(
    .cff-div-field.cff-container-field > div,
    .cff-fieldset-field.cff-container-field > fieldset > div) > .clearer{display:none}
.cp_cff_pop #fbuilder :is(
    .cff-div-field.cff-container-field > div:not(.clearer),
    .cff-fieldset-field.cff-container-field > fieldset > div:not(.clearer)) > .column2{
  flex:1 1 calc(50% - 9px);width:auto;float:none;clear:none;
}
.cp_cff_pop #fbuilder :is(
    .cff-div-field.cff-container-field > div:not(.clearer),
    .cff-fieldset-field.cff-container-field > fieldset > div:not(.clearer)) > .column1{
  flex:1 1 100%;width:auto;float:none;clear:none;
}
@media screen and (max-width:599px){
  .cp_cff_pop #fbuilder :is(
      .cff-div-field.cff-container-field > div:not(.clearer),
      .cff-fieldset-field.cff-container-field > fieldset > div:not(.clearer)) > .column2{flex-basis:100%}
}

/* ---------- Veldbreedtes (CFF large/medium/small) ---------- */
.cp_cff_pop #fbuilder .large{width:100%}
@media screen and (min-width:600px){
  .cp_cff_pop #fbuilder .fields.medium{width:50%;vertical-align:top;padding-right:14px}
  .cp_cff_pop #fbuilder .fields.small{width:33.333%;vertical-align:top;padding-right:14px}
  .cp_cff_pop #fbuilder .medium,
  .cp_cff_pop #fbuilder .small{width:100%}
}
@media screen and (max-width:599px){
  .cp_cff_pop #fbuilder .fields.medium,
  .cp_cff_pop #fbuilder .fields.small{width:100%;padding-right:0}
}

/* ---------- Sectiekoppen: strak, Typewriter, POPsCOOL-paars met onderlijn ----------
   Geen achtergrond / geen oranje linkerbalk. Paars (#7C216C) = zelfde tint als
   de paginatitels. */
.cp_cff_pop #fbuilder .fields.section_breaks{margin:24px 0 10px}
.cp_cff_pop #fbuilder .fields.section_breaks:first-child{margin-top:2px}
.cp_cff_pop #fbuilder .fields.section_breaks .section_break{display:none} /* lege spacer-div */
.cp_cff_pop #fbuilder .fields.section_breaks > label{
  display:block;
  font-family:'PopscoolTypewriter','Courier New',monospace;
  font-size:23px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--f-purple);
  padding:0 0 8px;margin:0;border:0;
  border-bottom:2px solid rgba(124,33,108,.20);
  background:none;
}

/* ---------- Fieldsets: subtiele kaders zodat (geneste) groepen leesbaar zijn ----------
   Niveau 1 (top): licht kader + afronding. Niveau 2 (genest, CFF-klasse .level2 /
   .level3): zacht getint blok i.p.v. kader, zodat de nesting zichtbaar is. */
.cp_cff_pop #fbuilder fieldset{
  display:flow-root;                     /* bevat de gefloate legend */
  border:1px solid #e4e8f1;border-radius:12px;
  padding:14px 16px;margin:8px 0 2px;
}
.cp_cff_pop #fbuilder :is(.level2,.level3) > fieldset{
  border:0;background:#f5f8fc;border-radius:10px;
  padding:13px 14px;margin:2px 0;
}

/* Legend als normale in-flow kop (float-truc voorkomt de 'straddle' over de
   fieldset-rand). Inhoud eronder klaart de float. */
.cp_cff_pop #fbuilder fieldset > legend{
  float:left;width:100%;
  display:flex;align-items:center;gap:9px;
  font-family:'PopscoolTypewriter','Courier New',monospace;
  letter-spacing:.04em;text-transform:uppercase;color:var(--f-blue);
  border:0;background:none;padding:0;margin:0 0 12px;
}
.cp_cff_pop #fbuilder fieldset > legend + *{clear:left}

/* Niveau 1: 17px + oranje ruit-marker */
.cp_cff_pop #fbuilder fieldset > legend{font-size:17px}
.cp_cff_pop #fbuilder fieldset > legend::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:2px;
  background:var(--f-orange);transform:rotate(45deg);
}
/* Niveau 2 (genest): 15px + blauwe stip-marker */
.cp_cff_pop #fbuilder :is(.level2,.level3) > fieldset > legend{font-size:15px;margin-bottom:10px}
.cp_cff_pop #fbuilder :is(.level2,.level3) > fieldset > legend::before{
  width:7px;height:7px;border-radius:50%;background:var(--f-sky);transform:none;
}
/* Geneste fieldsets zonder titel: lege legend niet tonen */
.cp_cff_pop #fbuilder fieldset > legend:empty{display:none;margin:0}

/* Inklapbare fieldset (.cff-collapsible): onze flex-regel (display:flex) had
   CFF's `display:none` bij ingeklapt overschreven → toggle werkte niet meer.
   Forceer verbergen bij ingeklapt. */
.cp_cff_pop #fbuilder .cff-collapsible.cff-collapsed > fieldset > div{display:none !important}

/* ---------- Koppen binnen het formulier normaliseren ----------
   O.a. de samenvatting op pagina 2 rendert titels als <h2> → thema erft de
   veel te grote site-h2 (±35px). Terugbrengen naar leesbare maten. */
.cp_cff_pop #fbuilder h1,
.cp_cff_pop #fbuilder h2,
.cp_cff_pop #fbuilder h3,
.cp_cff_pop #fbuilder h4{
  line-height:1.25;margin:0 0 8px;color:var(--f-blue);font-weight:700;
}
.cp_cff_pop #fbuilder h1{font-size:22px}
.cp_cff_pop #fbuilder h2{font-size:18px}
.cp_cff_pop #fbuilder h3{font-size:16px}
.cp_cff_pop #fbuilder h4{font-size:15px}

/* ---------- Helptekst ---------- */
.cp_cff_pop #fbuilder span.uh{
  display:block;margin-top:5px;font-size:13px;color:#7a8296;font-style:normal;line-height:1.35;
}

/* ---------- Radio als segmented pill-toggle ----------
   Echte CFF-DOM: .cff-radiobutton-field .dfield > .one_column > label > input + span
   (input zit ín het label, dus :has() i.p.v. + label). */
.cp_cff_pop #fbuilder .cff-radiobutton-field .dfield{display:flex;flex-wrap:wrap;gap:8px}
.cp_cff_pop #fbuilder .cff-radiobutton-field .dfield > .clearer{display:none}
.cp_cff_pop #fbuilder .cff-radiobutton-field .dfield > span.uh{flex:1 0 100%}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column{display:inline-flex;margin:0;width:auto}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label{
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border:1.5px solid var(--f-line);border-radius:999px;
  font-size:14.5px;font-weight:600;color:#4a5468;background:#fff;
  transition:.15s;line-height:1;margin:0;
}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label:hover{border-color:var(--f-sky)}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label:has(input:checked){
  background:var(--f-blue);border-color:var(--f-blue);color:#fff;
  box-shadow:0 4px 12px rgba(34,58,137,.24);
}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(54,169,225,.35)}

/* ---------- Berekend bedrag: prominente oranje money-box ----------
   Veld staat als size:small ingesteld → forceer leesbare volle breedte. */
.cp_cff_pop #fbuilder .fields:has(> .dfield > .codepeoplecalculatedfield){width:100%}
.cp_cff_pop #fbuilder input.codepeoplecalculatedfield{
  width:100%;border:1.5px solid #f4c48a !important;background:#fff7ee !important;
  color:var(--f-orange-d) !important;font-weight:400;font-size:24px;
  font-family:'PopscoolTypewriter','Courier New',monospace;letter-spacing:1px;
  border-radius:12px;padding:14px 16px;
}

/* ---------- Acceptatie (CFF-toggle .cff-switch-container): tapbare kaart ----------
   Echte DOM: .cff-switch-container .dfield > .one_column > label >
              input[checkbox] + span.cff-switch + span(tekst) */
.cp_cff_pop #fbuilder .cff-switch-container .dfield{
  padding:14px 16px;background:var(--f-soft);
  border:1.5px solid #e2e6ee;border-radius:12px;
}
.cp_cff_pop #fbuilder .cff-switch-container .one_column > label{
  display:flex;align-items:center;gap:12px;cursor:pointer;margin:0;
  font-size:15px;line-height:1.4;color:#3a4763;
}

/* ---------- Gewone checkboxes (.cff-checkbox-field, geen switch) ----------
   Echte DOM: .one_column > label > input[checkbox] + span(tekst). Consistente
   maat, ruimere tussenruimte en een custom vinkje in merk-blauw. */
.cp_cff_pop #fbuilder .cff-checkbox-field:not(.cff-switch-container) .one_column > label{
  display:flex;align-items:center;gap:10px;margin:5px 0;cursor:pointer;
  font-size:15px;line-height:1.35;color:#3a4763;
}
.cp_cff_pop #fbuilder .cff-checkbox-field:not(.cff-switch-container) input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;margin:0;
  width:20px;height:20px;border:1.5px solid #b9c1d4;border-radius:5px;background:#fff;
  cursor:pointer;position:relative;transition:.15s;
}
.cp_cff_pop #fbuilder .cff-checkbox-field:not(.cff-switch-container) input[type="checkbox"]:checked{
  background:var(--f-sky);border-color:var(--f-sky);
}
.cp_cff_pop #fbuilder .cff-checkbox-field:not(.cff-switch-container) input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.cp_cff_pop #fbuilder .cff-checkbox-field:not(.cff-switch-container) input[type="checkbox"]:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(54,169,225,.30);
}
/* recolor CFF's native switch naar merk-blauw wanneer aan */
.cp_cff_pop #fbuilder .cff-switch-container input:checked + .cff-switch{
  background:var(--f-sky) !important;border-color:var(--f-sky) !important;
}
.cp_cff_pop #fbuilder .cff-switch-container:has(input.cpefb_error) .dfield{
  border-color:var(--f-err);background:#fff6f5;
}

/* ---------- Comment / uitleg-tekst ---------- */
.cp_cff_pop #fbuilder .fields.dfielddesc,
.cp_cff_pop #fbuilder .comment-area{font-size:14px;color:#6b7488;line-height:1.45}

/* ---------- Info-/success-blokken (.bg-info / .bg-success) ----------
   Utility-klassen uit het formulier; kregen padding 5-7px 0 en radius 0.
   Nette padding + afronding, met een subtiele accentrand. */
.cp_cff_pop #fbuilder .fields.bg-info,
.cp_cff_pop #fbuilder .fields.bg-success{
  padding:14px 16px !important;border-radius:12px;margin:8px 0;
}
.cp_cff_pop #fbuilder .fields.bg-info{background:#eaf6fc;border:1px solid #cfe9f6}
.cp_cff_pop #fbuilder .fields.bg-success{background:#eaf7ea;border:1px solid #cfe9cf}

/* ---------- Verzend-knop: full-width oranje ---------- */
.cp_cff_pop #fbuilder .cff-form-buttons-container{margin-top:12px}
.cp_cff_pop #fbuilder .pbSubmit,
.cp_cff_pop #fbuilder input[type=submit]{
  display:block;width:100%;color:#fff;text-align:center;
  background:linear-gradient(180deg,#ff9a33,var(--f-orange));
  border:0;border-radius:14px;cursor:pointer;
  font-weight:800;letter-spacing:.03em;font-size:17px;text-transform:uppercase;
  padding:16px 24px;
  box-shadow:0 8px 20px rgba(241,133,31,.34);transition:.15s;
}
.cp_cff_pop #fbuilder .pbSubmit:hover,
.cp_cff_pop #fbuilder input[type=submit]:hover{
  background:linear-gradient(180deg,#ff9a33,var(--f-orange));
  transform:translateY(-1px);box-shadow:0 11px 24px rgba(241,133,31,.42);
}
.cp_cff_pop #fbuilder .pbSubmit:active{transform:translateY(0)}

/* Multi-page navigatie (indien gebruikt) */
.cp_cff_pop #fbuilder .pbreak .pbPrevious,
.cp_cff_pop #fbuilder .pbreak .pbNext{
  color:#fff;background:var(--f-blue);border:0;border-radius:12px;
  padding:13px 22px;cursor:pointer;font-weight:700;
}
.cp_cff_pop #fbuilder .pbreak .pbPrevious{background:#8a93a6}
.cp_cff_pop #fbuilder .pbEnd .pbNext,
.cp_cff_pop #fbuilder .pb0 .pbPrevious{display:none}

/* ---------- Validatie (echte CFF-classes) ---------- */
.cp_cff_pop #fbuilder input.cpefb_error:not(.message),
.cp_cff_pop #fbuilder textarea.cpefb_error,
.cp_cff_pop #fbuilder select.cpefb_error,
.cp_cff_pop #fbuilder .dfield:has(> .cpefb_error) input:not([type="checkbox"]):not([type="radio"]),
.cp_cff_pop #fbuilder .dfield:has(> .cpefb_error) select{
  border-color:var(--f-err);background:#fff6f5;
}
.cp_cff_pop #fbuilder input.cpefb_error:focus,
.cp_cff_pop #fbuilder textarea.cpefb_error:focus,
.cp_cff_pop #fbuilder select.cpefb_error:focus{box-shadow:0 0 0 3px rgba(224,72,61,.18)}
/* CFF injecteert de foutmelding als position:absolute ín de .uh-helptekst
   (top:72px) → hij zweeft over het volgende veld. Terug naar normale flow,
   geen rode bubble, geen CFF-driehoek (we tonen ons eigen !-icoon). */
.cp_cff_pop #fbuilder div.cpefb_error,
.cp_cff_pop #fbuilder div.cpefb_error.message{
  position:static !important;top:auto !important;left:auto !important;
  display:flex;align-items:center;gap:7px;width:auto;
  margin:6px 0 0 !important;padding:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  color:#c8372c;font-size:13px;font-weight:700;line-height:1.3;text-shadow:none;
  white-space:normal;z-index:auto;
}
.cp_cff_pop #fbuilder div.cpefb_error::after{display:none !important;} /* CFF-driehoek weg */
.cp_cff_pop #fbuilder div.cpefb_error::before{
  content:"!";flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:var(--f-err);color:#fff;font-weight:800;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.cp_cff_pop #fbuilder input.valid:not(.message):not(.codepeoplecalculatedfield),
.cp_cff_pop #fbuilder select.valid,
.cp_cff_pop #fbuilder textarea.valid{border-color:var(--f-ok);background:#f5fbf7}
.cp_cff_pop #fbuilder .cff-radiobutton-field .one_column > label:has(input.cpefb_error){border-color:var(--f-err);color:#c8372c}

/* ---------- Slider (indien gebruikt) ---------- */
.cp_cff_pop #fbuilder .ui-slider-handle{background:var(--f-blue);border:0;border-radius:15px;height:.9em;width:.9em}
.cp_cff_pop #fbuilder .slider{background:#e7ebf3;border-radius:10px;border:0;height:.35em}
.cp_cff_pop #fbuilder .ui-slider-range{background:var(--f-sky)}

/* ---------- Tijdsloten ---------- */
.cp_cff_pop #fbuilder .cff-timeslot[data-selected="1"],
.cp_cff_pop #fbuilder .cff-timeslot-selected{border-color:var(--f-sky);background:var(--f-sky);color:#fff;text-shadow:none}
.cp_cff_pop #fbuilder .cff-timeslot[data-active="1"][data-selected="0"]:hover{border-color:var(--f-sky)}

/* ---------- Foutmelding-popup (samenvatting bij verzenden) ----------
   CFF voegt bij verzenden altijd een `div.cff-error-dlg` toe (position:fixed,
   gecentreerd, klik = sluiten). Wordt aan het form gehangen dat de klasse
   cp_cff_pop draagt, dus scoping via `.cp_cff_pop .cff-error-dlg` werkt. */
.cp_cff_pop.cff-error-dlg,
.cp_cff_pop .cff-error-dlg{
  background:#fff !important;color:var(--f-ink) !important;
  border:0 !important;border-top:5px solid var(--f-err) !important;
  border-radius:16px !important;
  padding:22px 24px 22px !important;width:440px !important;max-width:92% !important;
  box-shadow:0 22px 60px rgba(20,26,46,.30) !important;
  font-family:inherit !important;font-size:14.5px !important;line-height:1.65 !important;
}
/* veldnamen (de <b>-labels) in dark-blue */
.cp_cff_pop.cff-error-dlg b,
.cp_cff_pop .cff-error-dlg b{color:var(--f-blue);font-weight:700}
/* nette ronde sluitknop i.p.v. de kale 'X' */
.cp_cff_pop.cff-error-dlg::before,
.cp_cff_pop .cff-error-dlg::before{
  content:"\00D7" !important;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--f-soft);color:var(--f-blue);
  font-size:20px;font-weight:700;line-height:1;
  top:14px !important;right:14px !important;opacity:1 !important;
}
.cp_cff_pop.cff-error-dlg:hover::before,
.cp_cff_pop .cff-error-dlg:hover::before{background:#e9edf5}