/* ============================================
   Slider-navigatie: vorige/volgende-knoppen met stippen ertussen (zoals de eigen sliders van het origineel:
   fxc2, pc-nav, feat-nav, pijn-nav …). Gebruikt door cases-carousel, cases-klassiek, kaart-slider,
   diensten-bento en de mockups op /website-laten-maken/kapsalon/.
   <div class="slider-nav"> [button.slider-nav__btn data-prev] <div class="slider-nav__dots">button.slider-nav__dot…</div> [button.slider-nav__btn data-next]
   --stippen: alleen stippen, dichter op elkaar (pijn-nav, wat-nav, opl-nav-lg van het origineel).
   ============================================ */
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding-bottom: 8px; }
.slider-nav__dots { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.slider-nav__dot {
  display: inline-block; flex-shrink: 0;
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 100px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.slider-nav__dot.is-active { width: 24px; background: var(--color-accent); }
.slider-nav__btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px;
  padding: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: 0.2s;
}
.slider-nav__btn svg { display: block; pointer-events: none; }
.slider-nav__btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) {
  .slider-nav__btn:hover:not(:disabled) { transform: scale(1.08); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
}

/* Alleen stippen: 6px ertussen, 16px erboven, geen ruimte eronder */
.slider-nav--stippen { gap: 6px; margin-top: 16px; padding-bottom: 0; }
.slider-nav--stippen .slider-nav__dots { gap: 6px; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .slider-nav__dot, .slider-nav__btn { transition: none; }
}