/* Bootplein — keuzelijsten (dropdowns). Zie assets/keuzelijst.js.
 * Het dichte veld: eigen pijltje, geen browserknopje — voor de echte <select> (op aanraakschermen)
 * en voor de knop die keuzelijst.js eroverheen zet. De maat en rand komen van de klasse die het veld
 * al had (form-input, zoek-select, …); hier alleen wat elk veld gemeen heeft.
 */
select, .kl-knop {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a829c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px !important;
  padding-right: 34px !important; cursor: pointer;
}
/* :where() = geen gewicht: lettergrootte, marge en kleur van de veldklasse (zoek-select, form-input…) gaan voor. */
:where(.kl-knop) {
  display: flex; align-items: center; text-align: left; font: inherit; color: inherit; line-height: 1.2;
  white-space: nowrap; overflow: hidden; margin: 0;
}
.kl-knop .kl-waarde { overflow: hidden; text-overflow: ellipsis; }
.kl-knop:focus-visible { outline: 2px solid #1a7fd4; outline-offset: 1px; }
.kl-knop:disabled { opacity: .5; cursor: not-allowed; }
.kl.open .kl-knop { border-color: #1a7fd4; background-color: #fff; }

.kl { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; min-width: 0; }
.kl.kl-blok { display: block; }
.kl > .kl-knop { width: 100%; }
/* De echte <select> blijft onzichtbaar in de opmaak staan, zonder hoogte: zo bepaalt hij nog steeds de breedte
   (zo breed als de langste keuze), net als voorheen. */
.kl-echt { display: block !important; visibility: hidden; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; overflow: hidden; pointer-events: none; }

.kl-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 300; min-width: 100%; max-width: min(340px, 90vw);
  max-height: 290px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid #e8eef6; border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 40, 80, .16); padding: 6px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left;
}
.kl.omhoog .kl-menu { top: auto; bottom: calc(100% + 6px); }
.kl.rechts .kl-menu { left: auto; right: 0; }
.kl-optie {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #15293e; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kl-optie.actief { background: #f5f8fc; color: #16508c; }
.kl-optie.gekozen { background: #e9f4ff; color: #16508c; font-weight: 700; }
.kl-optie.uit { color: #a9b6c4; cursor: default; }
.kl-groep { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6a829c; }