/* ==========================================================================
   Bouwplanvergunning — leadformulier (BPV leadform) v1.0.1 — 09-09-2026 (Salient-overrides toegevoegd)
   Alles gescoped onder .bpv-leadform: raakt niets van Salient of andere blokken.
   Ingeladen door functions.php (child theme Bouwplan) als css/leadform.css.
   Tokens: Rajdhani/Montserrat (laadt de hero al), groen #3CAE49.
   ========================================================================== */
.bpv-leadform{
  --bpv-groen:#3CAE49;--bpv-groen-donker:#2f8c3a;--bpv-groen-licht:#EBF7EC;
  --bpv-rand:#D6D9D6;--bpv-tekst:#202421;--bpv-groen-tekst:#2A7D34;--bpv-grijs:#6B716C;--bpv-fout:#C0392B;
  --bpv-radius:8px;--bpv-focusring:0 0 0 3px rgba(60,174,73,.18);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.5;color:var(--bpv-tekst);
  max-width:560px;margin:0 auto;background:#fff;border-radius:16px;
  padding:32px 28px;box-shadow:0 12px 44px rgba(0,0,0,.16);}
.bpv-leadform *{box-sizing:border-box}
.bpv-leadform h2{margin:0 0 6px;font-family:'Rajdhani','Montserrat',sans-serif;font-weight:700;font-size:1.9rem;line-height:1.15;letter-spacing:.01em}
.bpv-leadform .bpv-intro{margin:0 0 18px;color:var(--bpv-grijs);font-size:.93rem}
.bpv-leadform .bpv-badge{display:inline-flex;align-items:center;gap:6px;background:var(--bpv-groen-licht);color:var(--bpv-groen-tekst);border:1px solid var(--bpv-groen);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;margin-bottom:10px}
.bpv-leadform label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
.bpv-leadform label .bpv-opt{color:var(--bpv-grijs);font-weight:400}
.bpv-leadform label .bpv-req{color:var(--bpv-fout)}
.bpv-leadform .bpv-hulp{font-size:.8rem;color:var(--bpv-grijs);margin:4px 0 0}
.bpv-leadform input[type=text],.bpv-leadform input[type=email],.bpv-leadform input[type=tel],.bpv-leadform textarea{width:100%;padding:12px 14px;border:1px solid var(--bpv-rand);border-radius:var(--bpv-radius);font:inherit;font-size:.95rem;background:#fff;color:inherit;transition:border-color .12s,box-shadow .12s}
.bpv-leadform textarea{min-height:74px;resize:vertical}
.bpv-leadform input::placeholder,.bpv-leadform textarea::placeholder{color:#9aa09b}
.bpv-leadform input:focus,.bpv-leadform textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--bpv-groen);box-shadow:var(--bpv-focusring)}
.bpv-leadform .bpv-veldfout{border-color:var(--bpv-fout)!important}
.bpv-leadform .bpv-foutmelding{color:var(--bpv-fout);font-size:.8rem;margin:4px 0 0;display:none}
.bpv-leadform .bpv-rij{display:flex;gap:14px}.bpv-leadform .bpv-rij>div{flex:1}
@media (max-width:520px){.bpv-leadform .bpv-rij{flex-direction:column;gap:0}}
/* toggle particulier/bedrijf — segmentcontrol zoals Figma stap 1 */
.bpv-leadform .bpv-toggle{display:inline-flex;border:1px solid var(--bpv-rand);border-radius:var(--bpv-radius);overflow:hidden;margin-bottom:4px;background:#F3F5F3}
.bpv-leadform .bpv-toggle button{font:inherit;font-weight:600;font-size:.9rem;padding:10px 22px;border:0;background:transparent;color:var(--bpv-grijs);cursor:pointer;transition:background .12s,color .12s}
.bpv-leadform .bpv-toggle button[aria-pressed=true]{background:#fff;color:var(--bpv-tekst);box-shadow:inset 0 -3px 0 var(--bpv-groen)}
.bpv-leadform .bpv-toggle button:focus-visible{outline:2px solid var(--bpv-groen);outline-offset:-2px}
/* autocomplete — suggestielijst met lichtgroene hover (Figma "Hover effect muis!") */
.bpv-leadform .bpv-ac{position:relative}
.bpv-leadform .bpv-ac-lijst{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--bpv-rand);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:240px;overflow:auto;margin:0;padding:6px;list-style:none;display:none}
.bpv-leadform .bpv-ac-lijst li{padding:10px;border-radius:8px;cursor:pointer;font-size:.92rem;display:flex;gap:8px;align-items:center}
.bpv-leadform .bpv-ac-lijst li.bpv-actief,.bpv-leadform .bpv-ac-lijst li:hover{background:var(--bpv-groen-licht)}
.bpv-leadform .bpv-ac-lijst li .bpv-sub{color:var(--bpv-grijs);font-size:.82rem;margin-left:auto}
.bpv-leadform .bpv-ac-lijst li.bpv-ac-melding{color:var(--bpv-grijs);cursor:default;background:none}
/* chips-raster (desktop; Figma "Selectie keuze"): grijs omlijnd,
   geselecteerd = lichtgroen vlak + groene rand + vinkje */
.bpv-leadform .bpv-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:900px){.bpv-leadform .bpv-chips{display:none}}
.bpv-leadform .bpv-chip{border:1px solid var(--bpv-rand);border-radius:var(--bpv-radius);background:#fff;color:var(--bpv-grijs);font:inherit;font-size:.79rem;font-weight:500;padding:10px 4px;cursor:pointer;text-align:center;line-height:1.25;transition:border-color .12s,background .12s,color .12s}
.bpv-leadform .bpv-chip:hover{border-color:var(--bpv-groen)}
.bpv-leadform .bpv-chip[aria-pressed=true]{border-color:var(--bpv-groen);color:var(--bpv-groen-tekst);background:var(--bpv-groen-licht);font-weight:600}
.bpv-leadform .bpv-chip[aria-pressed=true]::before{content:"\2713\00a0"}
.bpv-leadform .bpv-chip:focus-visible{outline:2px solid var(--bpv-groen);outline-offset:1px}
/* dropdown met vinkjes (mobiel ≤900px; Figma "Mobiel → Dropdown"/"Na selectie") */
.bpv-leadform .bpv-dd{display:none;position:relative}
@media (max-width:900px){.bpv-leadform .bpv-dd{display:block}}
.bpv-leadform .bpv-dd-knop{width:100%;text-align:left;padding:12px 40px 12px 14px;border:1px solid var(--bpv-rand);border-radius:var(--bpv-radius);background:#fff;font:inherit;font-size:.95rem;color:var(--bpv-grijs);cursor:pointer;position:relative}
.bpv-leadform .bpv-dd-knop::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--bpv-grijs);border-bottom:2px solid var(--bpv-grijs);transform:translateY(-70%) rotate(45deg);transition:transform .12s}
.bpv-leadform .bpv-dd-knop[aria-expanded=true]{border-color:var(--bpv-groen);box-shadow:var(--bpv-focusring)}
.bpv-leadform .bpv-dd-knop[aria-expanded=true]::after{transform:translateY(-30%) rotate(225deg)}
.bpv-leadform .bpv-dd-knop:focus-visible{outline:2px solid transparent;border-color:var(--bpv-groen);box-shadow:var(--bpv-focusring)}
.bpv-leadform .bpv-dd-lijst{border:1px solid var(--bpv-rand);border-radius:10px;margin-top:6px;padding:6px;display:none;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.bpv-leadform .bpv-dd-lijst label{display:flex;align-items:center;gap:10px;font-weight:400;margin:0;padding:9px 8px;font-size:.92rem;border-radius:8px;cursor:pointer}
.bpv-leadform .bpv-dd-lijst label:hover{background:var(--bpv-groen-licht)}
.bpv-leadform .bpv-dd-lijst input{width:18px;height:18px;accent-color:var(--bpv-groen);flex:none}
.bpv-leadform .bpv-dd-lijst label:has(input:checked){color:var(--bpv-groen-tekst);font-weight:600}
.bpv-leadform .bpv-dd-gekozen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bpv-leadform .bpv-dd-gekozen span{background:var(--bpv-groen-licht);color:var(--bpv-groen-tekst);border:1px solid var(--bpv-groen);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.bpv-leadform .bpv-dd-gekozen button{border:0;background:none;cursor:pointer;font-size:.9rem;color:inherit;padding:0;line-height:1}
/* pillen stap 2 — geselecteerd = groene rand + lichtgroen vlak + vinkje (Figma "Verwezen") */
.bpv-leadform .bpv-pills{display:flex;flex-wrap:wrap;gap:8px}
.bpv-leadform .bpv-pill{border:1px solid var(--bpv-rand);border-radius:999px;background:#fff;color:var(--bpv-grijs);font:inherit;font-size:.85rem;font-weight:500;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .12s,background .12s,color .12s}
.bpv-leadform .bpv-pill:hover{border-color:var(--bpv-groen)}
.bpv-leadform .bpv-pill[aria-pressed=true]{border-color:var(--bpv-groen);color:var(--bpv-groen-tekst);background:var(--bpv-groen-licht);font-weight:600}
.bpv-leadform .bpv-pill[aria-pressed=true]::before{content:"\2713"}
.bpv-leadform .bpv-pill:focus-visible{outline:2px solid var(--bpv-groen);outline-offset:1px}
/* diensten: pillen met rondje (Figma "Zoek je iets specifieks?") */
.bpv-leadform #bpv-diensten .bpv-pill::before{content:"";width:16px;height:16px;border:1.5px solid var(--bpv-rand);border-radius:50%;flex:none;background:#fff;transition:background .12s,border-color .12s}
.bpv-leadform #bpv-diensten .bpv-pill[aria-pressed=true]::before{content:"\2713";border-color:var(--bpv-groen);background:var(--bpv-groen);color:#fff;font-size:.62rem;line-height:13px;text-align:center;font-weight:700}
/* privacy-kennisgeving boven de verzendknop (geen vinkje: informatie, geen toestemming) */
.bpv-leadform .bpv-kennisgeving{margin:18px 0 0;font-size:.8rem;line-height:1.45;color:var(--bpv-grijs)}
.bpv-leadform .bpv-kennisgeving a{color:var(--bpv-groen-tekst);text-decoration:underline}
/* knoppen — Figma-formulierknop: groen vlak, radius 10px, pijl in het label */
.bpv-leadform .bpv-verstuur{width:100%;margin-top:14px;padding:14px;border:0;border-radius:10px;background:var(--bpv-groen);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:background .12s}
.bpv-leadform .bpv-verstuur:hover{background:var(--bpv-groen-donker)}
.bpv-leadform .bpv-verstuur:focus-visible{outline:2px solid var(--bpv-tekst);outline-offset:2px}
.bpv-leadform .bpv-verstuur:disabled{opacity:.6;cursor:wait}
.bpv-leadform .bpv-onder{margin-top:10px;text-align:center;font-size:.8rem;color:var(--bpv-grijs)}
.bpv-leadform .bpv-onder b{color:var(--bpv-tekst)}
/* algemene fout + succes */
.bpv-leadform .bpv-alert{display:none;margin-top:14px;padding:12px 14px;border-radius:var(--bpv-radius);font-size:.9rem}
.bpv-leadform .bpv-alert.bpv-fout{background:#fdecea;color:var(--bpv-fout)}
.bpv-leadform .bpv-alert a{color:inherit;font-weight:700;text-decoration:underline}
.bpv-leadform .bpv-alert.bpv-ok{background:var(--bpv-groen-licht);color:var(--bpv-groen-tekst)}
.bpv-leadform .bpv-verborgen{display:none!important}
/* bestandsupload (stap 2) — stippellijnvak zoals Figma */
.bpv-leadform .bpv-upload{margin-top:2px;border:2px dashed var(--bpv-rand);border-radius:10px;background:#FBFAF7;padding:26px 14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--bpv-grijs);transition:border-color .12s,background .12s}
.bpv-leadform .bpv-upload b{color:var(--bpv-tekst);font-weight:600;font-size:.9rem}
.bpv-leadform .bpv-upload span{font-size:.8rem}
.bpv-leadform .bpv-upload.bpv-sleep,.bpv-leadform .bpv-upload:hover{border-color:var(--bpv-groen);background:var(--bpv-groen-licht)}
.bpv-leadform .bpv-upload:focus-visible{outline:2px solid var(--bpv-groen);outline-offset:1px}
.bpv-leadform .bpv-upload-icoon{font-size:1.3rem;line-height:1;color:var(--bpv-groen)}
.bpv-leadform .bpv-upload-lijst{list-style:none;margin:8px 0 0;padding:0}
.bpv-leadform .bpv-upload-lijst li{display:flex;align-items:center;gap:8px;font-size:.86rem;padding:8px 10px;border:1px solid var(--bpv-rand);border-radius:8px;margin-top:6px}
.bpv-leadform .bpv-upload-lijst li .bpv-u-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpv-leadform .bpv-upload-lijst li .bpv-u-status{margin-left:auto;color:var(--bpv-grijs);font-size:.8rem;white-space:nowrap}
.bpv-leadform .bpv-upload-lijst li.bpv-u-ok .bpv-u-status{color:var(--bpv-groen-tekst)}
.bpv-leadform .bpv-upload-lijst li.bpv-u-fout{border-color:var(--bpv-fout)}
.bpv-leadform .bpv-upload-lijst li .bpv-u-x{border:0;background:none;cursor:pointer;font-size:1rem;color:var(--bpv-grijs);padding:0 2px;line-height:1}
/* Gelukt!-kaart (Figma): groene cirkel met vinkje, titel, CTA */
.bpv-leadform .bpv-klaar{text-align:center;padding:14px 0 6px}
.bpv-leadform .bpv-klaar-check{width:56px;height:56px;border-radius:50%;background:var(--bpv-groen);color:#fff;font-size:1.7rem;line-height:56px;text-align:center;margin:0 auto 14px;font-weight:700}
.bpv-leadform .bpv-klaar h2{margin-bottom:4px}
.bpv-leadform .bpv-klaar .bpv-intro{margin-bottom:6px}
/* honeypot: visueel volledig weg, niet display:none (sommige bots checken dat) */
.bpv-leadform .bpv-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   Salient-overrides (v1.0.1, 09-09-2026). Salient zet op knoppen, velden en
   alinea's eigen regels, deels met !important (ronde knoppen 200px, uppercase
   knoptekst, grijze velden zonder rand, 28px onder elke <p>, labels normaal
   gewicht). Deze regels winnen daarvan: id-selector + !important waar Salient
   zelf !important gebruikt. Alleen binnen #bpv-leadform.
   ========================================================================== */
#bpv-leadform p{padding:0!important}
#bpv-leadform .bpv-intro{margin:0 0 18px!important}
#bpv-leadform .bpv-hulp{margin:4px 0 0!important}
#bpv-leadform .bpv-foutmelding{margin:4px 0 0!important}
#bpv-leadform .bpv-kennisgeving{margin:18px 0 0!important}
#bpv-leadform .bpv-onder{margin:10px 0 0!important}
#bpv-leadform h2{color:var(--bpv-tekst)!important;letter-spacing:.01em!important;margin:0 0 6px!important;padding:0!important}
#bpv-leadform label{font-weight:600!important;font-size:.9rem!important;margin:16px 0 6px!important;padding:0!important;text-transform:none!important;letter-spacing:normal!important;line-height:1.5!important}
#bpv-leadform label .bpv-opt{font-weight:400!important}
#bpv-leadform .bpv-dd-lijst label{font-weight:400!important;font-size:.92rem!important;margin:0!important;padding:9px 8px!important}
#bpv-leadform .bpv-dd-lijst label:has(input:checked){font-weight:600!important}
#bpv-leadform input[type=text],#bpv-leadform input[type=email],#bpv-leadform input[type=tel],#bpv-leadform textarea{background-color:#fff!important;border:1px solid var(--bpv-rand)!important;border-radius:var(--bpv-radius)!important;padding:12px 14px!important;font-size:.95rem!important;font-family:inherit!important;line-height:1.5!important;height:auto!important;margin:0!important;box-shadow:none!important;color:var(--bpv-tekst)!important;width:100%!important}
#bpv-leadform textarea{min-height:74px!important}
#bpv-leadform input:focus,#bpv-leadform textarea:focus{border-color:var(--bpv-groen)!important;box-shadow:var(--bpv-focusring)!important;outline:2px solid transparent!important}
#bpv-leadform .bpv-veldfout{border-color:var(--bpv-fout)!important}
#bpv-leadform input::placeholder,#bpv-leadform textarea::placeholder{color:#9aa09b!important;opacity:1!important}
#bpv-leadform button{text-transform:none!important;letter-spacing:normal!important;height:auto!important;min-height:0!important;line-height:1.25!important;font-family:inherit!important;margin:0!important;box-shadow:none!important;transition:border-color .12s,background .12s,color .12s!important}
#bpv-leadform .bpv-toggle button{border-radius:0!important;padding:10px 22px!important;font-size:.9rem!important;font-weight:600!important;background-color:transparent!important;color:var(--bpv-grijs)!important;border:0!important}
#bpv-leadform .bpv-toggle button[aria-pressed=true]{background-color:#fff!important;color:var(--bpv-tekst)!important;box-shadow:inset 0 -3px 0 var(--bpv-groen)!important}
#bpv-leadform .bpv-chip{border-radius:var(--bpv-radius)!important;padding:10px 4px!important;font-size:.79rem!important;font-weight:500!important;background-color:#fff!important;border:1px solid var(--bpv-rand)!important;color:var(--bpv-grijs)!important;width:auto!important}
#bpv-leadform .bpv-chip:hover{border-color:var(--bpv-groen)!important}
#bpv-leadform .bpv-chip[aria-pressed=true]{border-color:var(--bpv-groen)!important;background-color:var(--bpv-groen-licht)!important;color:var(--bpv-groen-tekst)!important;font-weight:600!important}
#bpv-leadform .bpv-pill{border-radius:999px!important;padding:9px 16px!important;font-size:.85rem!important;font-weight:500!important;background-color:#fff!important;border:1px solid var(--bpv-rand)!important;color:var(--bpv-grijs)!important;line-height:1.3!important}
#bpv-leadform .bpv-pill:hover{border-color:var(--bpv-groen)!important}
#bpv-leadform .bpv-pill[aria-pressed=true]{border-color:var(--bpv-groen)!important;background-color:var(--bpv-groen-licht)!important;color:var(--bpv-groen-tekst)!important;font-weight:600!important}
#bpv-leadform .bpv-dd-knop{border-radius:var(--bpv-radius)!important;padding:12px 40px 12px 14px!important;font-size:.95rem!important;font-weight:400!important;background-color:#fff!important;border:1px solid var(--bpv-rand)!important;color:var(--bpv-grijs)!important;line-height:1.5!important;width:100%!important;text-align:left!important}
#bpv-leadform .bpv-dd-knop[aria-expanded=true]{border-color:var(--bpv-groen)!important;box-shadow:var(--bpv-focusring)!important}
#bpv-leadform .bpv-verstuur{border-radius:10px!important;padding:14px!important;font-size:1rem!important;font-weight:700!important;background-color:var(--bpv-groen)!important;color:#fff!important;border:0!important;width:100%!important;line-height:1.5!important;margin-top:14px!important}
#bpv-leadform .bpv-verstuur:hover{background-color:var(--bpv-groen-donker)!important}
#bpv-leadform .bpv-verstuur:disabled{opacity:.6!important}
#bpv-leadform .bpv-dd-gekozen button,#bpv-leadform .bpv-u-x{padding:0!important;background:none!important;border:0!important;border-radius:0!important;font-size:.9rem!important;color:inherit!important;font-weight:inherit!important;width:auto!important}
#bpv-leadform .bpv-u-x{font-size:1rem!important;color:var(--bpv-grijs)!important;padding:0 2px!important}
#bpv-leadform .bpv-dd-lijst input[type=checkbox]{width:18px!important;height:18px!important;margin:0!important;padding:0!important}
#bpv-leadform ul{margin:0!important;padding:0!important;list-style:none!important}
#bpv-leadform .bpv-ac-lijst{padding:6px!important}
#bpv-leadform .bpv-upload-lijst{margin:8px 0 0!important}
#bpv-leadform .bpv-upload-lijst li,#bpv-leadform .bpv-ac-lijst li{margin:0!important;list-style:none!important}
#bpv-leadform .bpv-upload-lijst li{margin-top:6px!important}
#bpv-leadform .bpv-hp{position:absolute!important;left:-9999px!important}