/* Gekopieerd uit NorthByte Lab, effect E414 (lab/effecten/E414-schuifregelaar-met-waardebel, 04-10-2026). */
/* ==========================================================================
   E414 · Schuifregelaar met waardebel
   Een schuifregelaar met een belletje boven het bolletje dat de waarde toont
   (in euro's of een aantal). Het belletje volgt de duim, groeit even als je
   sleept en de baan kleurt mee tot het bolletje. Onder de motorkap een gewoon
   <input type="range">, dus pijltjestoetsen en schermlezers werken.
   Alleen transform en opacity bewegen.
   Instellen op .e414 met CSS-variabelen:
     --e414-accent   kleur van baan, duim en bel  (standaard #c8a45c)
     --e414-baan     kleur van de lege baan        (standaard rgba(255,255,255,.18))
     --e414-duim     grootte van het bolletje      (standaard 28px)
   ========================================================================== */

.e414 { display: grid; gap: 10px; }
.e414-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.e414-kop label { font-weight: 600; }
.e414-waarde { font-weight: 700; font-variant-numeric: tabular-nums; }
.js .e414-waarde { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.e414-regel { position: relative; padding-top: 46px; }
html:not(.js) .e414-regel { padding-top: 0; }
.e414-bel-baan { position: absolute; left: calc(var(--e414-duim, 28px) / 2); right: calc(var(--e414-duim, 28px) / 2); top: 0; height: 40px; pointer-events: none; }
.e414-bel { position: absolute; left: 0; bottom: 6px; transform: translate3d(0, 0, 0); }
.e414-bel-in {
  position: relative; display: block; padding: 6px 11px; border-radius: 10px; white-space: nowrap; transform-origin: 50% 100%;
  background: var(--e414-accent, #c8a45c); color: var(--e414-bel-tekst, #1a140a); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.e414-bel-in::after {
  content: ""; position: absolute; left: calc(50% + var(--e414-pijl, 0px)); bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
html:not(.js) .e414-bel-baan { display: none; }

.e414-invoer {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--e414-duim, 28px); margin: 0; background: transparent; cursor: pointer;
  --e414-p: 0;
}
.e414-invoer:focus { outline: none; }
.e414-invoer::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--e414-accent, #c8a45c) calc(var(--e414-p) * 100%), var(--e414-baan, rgba(255, 255, 255, .18)) 0);
}
.e414-invoer::-moz-range-track { height: 8px; border-radius: 8px; background: var(--e414-baan, rgba(255, 255, 255, .18)); }
.e414-invoer::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--e414-accent, #c8a45c); }
.e414-invoer::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--e414-duim, 28px); height: var(--e414-duim, 28px); margin-top: calc((8px - var(--e414-duim, 28px)) / 2);
  border-radius: 50%; background: #fff; border: 3px solid var(--e414-accent, #c8a45c);
}
.e414-invoer::-moz-range-thumb { width: calc(var(--e414-duim, 28px) - 6px); height: calc(var(--e414-duim, 28px) - 6px); border-radius: 50%; background: #fff; border: 3px solid var(--e414-accent, #c8a45c); }
.e414-invoer:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--e414-accent, #c8a45c); outline-offset: 3px; }
.e414-invoer:focus-visible::-moz-range-thumb { outline: 3px solid var(--e414-accent, #c8a45c); outline-offset: 3px; }

.e414-schaal { display: flex; justify-content: space-between; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
.e414.is-actief .e414-bel-in { transform: translate3d(0, -4px, 0) scale(1.12); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e414-bel-in { transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); }
  html:not([data-rm]) .e414-bel.e414-glij { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
}