/**
 * SlideTabs — een pil met tabbladen waarin een donkere schuif meeglijdt naar
 * de tab waar je op komt (en terugvalt naar de gekozen tab als je weggaat);
 * de tekst is in difference-blend zodat hij op de schuif omkeert. Voor een
 * korte navigatie of een keuze tussen vier à zes dingen.
 *
 * Geoogst uit 21st.dev Slide Tabs (minhxthanh): framer animate op
 * left/width (layout per frame) → één schuif-element met `layoutId`
 * (FLIP via transform) op de snappy-token, border-black/bg-white →
 * --foreground/--background, vaste Engelse tabs → `items`, gekozen tab via
 * value/onChange. Toetsenbord via echte knoppen (usePress) en tablist-aria.
 */

"use client";

import { useState } from "react";
import type * as React from "react";
import { LayoutGroup, motion, useReducedMotion } from "framer-motion";
import { useSpringTransition } from "../motion";
import { usePress } from "./press";

export interface SlideTab {
  value: string;
  label: string;
}

export interface SlideTabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  items: readonly SlideTab[];
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  size?: "sm" | "md";
  label?: string;
}

function Tab({ item, actief, onPress, onHover }: { item: SlideTab; actief: boolean; onPress: () => void; onHover: () => void }) {
  const { pressed, pressProps } = usePress({ onPress });
  return (
    <button {...pressProps} type="button" role="tab" aria-selected={actief} tabIndex={actief ? 0 : -1} className="fp-slidetabs__tab" data-pressed={pressed ? "" : undefined} onMouseEnter={onHover} onFocus={onHover}>
      {item.label}
    </button>
  );
}

export function SlideTabs({ items, value, defaultValue, onChange, size = "md", label = "Navigatie", className, ...rest }: SlideTabsProps) {
  const [eigen, setEigen] = useState(defaultValue ?? items[0]?.value ?? "");
  const gekozen = value ?? eigen;
  const [zweef, setZweef] = useState<string | null>(null);
  const reduced = useReducedMotion() ?? false;
  const veer = useSpringTransition("snappy");
  const schuif = zweef ?? gekozen;
  const kies = (v: string) => {
    if (value === undefined) setEigen(v);
    onChange?.(v);
  };
  const toets = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const i = items.findIndex((t) => t.value === gekozen);
    const naar = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : null;
    if (naar === null) return;
    e.preventDefault();
    const doel = items[(naar + items.length) % items.length];
    if (doel) {
      kies(doel.value);
      (e.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]')[(naar + items.length) % items.length])?.focus();
    }
  };

  return (
    <LayoutGroup>
      <div {...rest} role="tablist" aria-label={label} className={["fp-slidetabs", `fp-slidetabs--${size}`, className].filter(Boolean).join(" ")} onMouseLeave={() => setZweef(null)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setZweef(null); }} onKeyDown={toets}>
        {items.map((t) => (
          <span key={t.value} className="fp-slidetabs__vak">
            {schuif === t.value && <motion.span className="fp-slidetabs__schuif" layoutId="fp-slidetabs-schuif" transition={reduced ? { duration: 0 } : veer} aria-hidden="true" />}
            <Tab item={t} actief={gekozen === t.value} onPress={() => kies(t.value)} onHover={() => setZweef(t.value)} />
          </span>
        ))}
      </div>
    </LayoutGroup>
  );
}

/**
 * Laag-1 primitives — stylesheet.
 * Uitsluitend tokens uit tokens/CONTRACT.md (contract v1): geen letterlijke
 * kleuren, fonts of radii. Structurele geometrie (padding, greep, marges)
 * staat in rem en is gedocumenteerd als aanname in de manifests.
 * Vereist tokens/motion.css naast dit bestand.
 */

/* ── Button ─────────────────────────────────────────────────────────────── */

.fp-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.625rem 1rem;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform var(--motion-instant-duration) var(--motion-instant),
    opacity var(--motion-instant-duration) var(--motion-instant),
    background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-btn:disabled { cursor: default; opacity: 0.5; }
.fp-btn:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
/* Touch-down zonder vertraging; usePress zet data-pressed, ook bij terugslepen. */
.fp-btn[data-pressed] { transform: scale(0.96); }

.fp-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.fp-btn--primary:hover:not(:disabled) { opacity: 0.9; }

.fp-btn--ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.fp-btn--ghost:hover:not(:disabled) { background: var(--muted); }

/* ── Field / Input ──────────────────────────────────────────────────────── */

.fp-field { display: flex; flex-direction: column; gap: 0.375rem; }
.fp-field__label { font-size: 0.8125rem; font-weight: 500; color: var(--foreground); }

.fp-input {
  appearance: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5625rem 0.75rem;
  transition:
    border-color var(--motion-instant-duration) var(--motion-instant),
    background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-input::placeholder { color: var(--muted-foreground); }
/* Rij met trailing-slot: het veld vult de rij, het slot hangt rechts erin. */
.fp-field__row { position: relative; display: flex; }
.fp-field__row .fp-input { width: 100%; }
.fp-input--met-trailing { padding-right: 2.75rem; }
.fp-field__trailing { position: absolute; inset: 0 0.5rem 0 auto; display: flex; align-items: center; color: var(--muted-foreground); }
.fp-input--met-leading { padding-left: 2.25rem; }
.fp-field__leading { position: absolute; inset: 0 auto 0 0.75rem; display: flex; align-items: center; color: var(--muted-foreground); pointer-events: none; }
/* type=search zonder browser-kruisje; type=file met de bestandsknop als deel van het veld. */
.fp-input[type="search"]::-webkit-search-cancel-button,
.fp-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fp-input[type="file"] { padding: 0 0.75rem 0 0; color: var(--muted-foreground); font-style: italic; }
.fp-input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.5625rem 0.75rem;
  border: 0; border-right: 1px solid var(--border);
  background: transparent; color: var(--foreground);
  font: inherit; font-size: 0.875rem; font-weight: 500; font-style: normal; cursor: pointer;
}
.fp-input:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-input[aria-invalid] { border-color: var(--danger); }

.fp-field__description { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }
.fp-field__error { margin: 0; font-size: 0.75rem; color: var(--danger); }

/* ── Popover ────────────────────────────────────────────────────────────── */

.fp-popover-anchor { position: relative; display: inline-block; }

.fp-popover {
  position: absolute;
  z-index: 30;
  min-width: 12rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: 0.3125rem;
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--motion-pop-duration) var(--motion-pop),
    opacity var(--motion-pop-duration) var(--motion-pop),
    visibility 0s linear var(--motion-pop-duration);
}
.fp-popover[data-open] {
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--motion-pop-duration) var(--motion-pop),
    opacity var(--motion-pop-duration) var(--motion-pop);
}

/* Plaatsing + groeirichting: altijd vanuit het anker (transform-origin). */
.fp-popover--bottom-start { top: calc(100% + 0.5rem); left: 0; transform-origin: top left; transform: scale(0.96) translateY(-0.25rem); }
.fp-popover--bottom-end { top: calc(100% + 0.5rem); right: 0; transform-origin: top right; transform: scale(0.96) translateY(-0.25rem); }
.fp-popover--top-start { bottom: calc(100% + 0.5rem); left: 0; transform-origin: bottom left; transform: scale(0.96) translateY(0.25rem); }
.fp-popover--top-end { bottom: calc(100% + 0.5rem); right: 0; transform-origin: bottom right; transform: scale(0.96) translateY(0.25rem); }
.fp-popover[data-open] { transform: scale(1) translateY(0); }

/* ── DateRangeCalendar ──────────────────────────────────────────────────── */

.fp-cal {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.fp-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fp-cal__title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.fp-cal__nav { display: flex; gap: 0.25rem; }
.fp-cal__navbtn {
  appearance: none; cursor: pointer; font: inherit; line-height: 1;
  width: 1.75rem; height: 1.75rem;
  background: transparent; color: var(--foreground);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  transition: background-color var(--motion-instant-duration) var(--motion-instant),
              transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-cal__navbtn:hover:not(:disabled) { background: var(--muted); }
.fp-cal__navbtn:active:not(:disabled) { transform: scale(0.94); }
.fp-cal__navbtn:disabled { opacity: 0.3; cursor: default; }
.fp-cal__navbtn:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }

.fp-cal__hint {
  margin: 0 0 0.875rem; padding: 0.5rem 0.75rem;
  font-size: 0.75rem; color: var(--foreground);
  background: var(--muted); border-radius: calc(var(--radius) - 2px);
}

.fp-cal__months { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) {
  .fp-cal__months[data-months="2"] { grid-template-columns: 1fr 1fr; }
}
.fp-cal__monthlabel {
  margin: 0 0 0.75rem; text-align: center; text-transform: capitalize;
  font-size: 0.8125rem; font-weight: 500;
}
.fp-cal__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.25rem;
  font-size: 0.6875rem; color: var(--muted-foreground); text-align: center;
}
.fp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.25rem; }

.fp-cal__day {
  appearance: none; font: inherit; font-size: 0.75rem; line-height: 1;
  width: 2.25rem; height: 2.25rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--foreground);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color var(--motion-instant-duration) var(--motion-instant),
              color var(--motion-instant-duration) var(--motion-instant),
              transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-cal__day:active:not(:disabled) { transform: scale(0.92); }
.fp-cal__day:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-cal__day:hover:not(:disabled) { background: var(--muted); }
.fp-cal__day[data-status="past"] { color: var(--muted-foreground); opacity: 0.4; cursor: default; }
.fp-cal__day[data-status="unavailable"] { color: var(--danger); text-decoration: line-through; cursor: not-allowed; }
.fp-cal__day[data-status="pending"] {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning); cursor: not-allowed;
}
.fp-cal__day[data-status="selected-start"],
.fp-cal__day[data-status="selected-end"] {
  background: var(--primary); color: var(--primary-foreground); font-weight: 600;
}
.fp-cal__day[data-status="selected-middle"],
.fp-cal__day[data-status="selecting"] { background: var(--muted); }

.fp-cal__legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted-foreground);
}
.fp-cal__legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.fp-cal__dot { width: 0.75rem; height: 0.75rem; border-radius: 999px; }
.fp-cal__dot--selected { background: var(--primary); }
.fp-cal__dot--pending { background: color-mix(in srgb, var(--warning) 40%, transparent); }
.fp-cal__strike { color: var(--danger); font-size: 0.7rem; }
.fp-cal__footnote { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* ── Sheet ──────────────────────────────────────────────────────────────── */

.fp-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-sheet-scrim[data-open] { opacity: 1; pointer-events: auto; }

.fp-sheet {
  position: fixed;
  z-index: 51;
  left: 50%;
  bottom: 0;
  width: min(35rem, calc(100% - 1.5rem));
  translate: -50% 0; /* centrering los van de y-animatie (transform is van de spring) */
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-overlay);
  padding: 0.625rem 1.375rem 1.75rem;
  touch-action: none;
}
.fp-sheet:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

.fp-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: calc(var(--radius) / 4);
  background: var(--border);
  margin: 0.25rem auto 1rem;
}

/* ── Gedeeld: alleen voor schermlezers ──────────────────────────────────── */

.fp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── FolderStack ────────────────────────────────────────────────────────── */

.fp-folder {
  position: relative;
  display: block;
  width: 20rem;
  height: 13rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.fp-folder:focus-visible {
  outline: 2px solid var(--ring, var(--info));
  outline-offset: 6px;
  border-radius: var(--radius);
}

.fp-folder__back {
  position: relative;
  width: 87.5%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fp-folder__sheet {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  margin-left: -4rem; /* halve breedte: centreren los van de waaier-transform */
  width: 8rem;
  height: 9.5rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

.fp-folder__lines { display: flex; flex-direction: column; gap: 0.5rem; }
.fp-folder__row { display: flex; gap: 0.5rem; }
.fp-folder__line {
  flex: 1;
  height: 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-foreground) 22%, transparent);
}
.fp-folder__line--head { width: 100%; }

.fp-folder__flap {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 3;
  height: 11rem;
  transform-origin: bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-folder__shape { width: 100%; height: 100%; overflow: visible; }

/* Het labelvlak op de klep: twee ogen en een mond, meer heeft het niet nodig. */
.fp-folder__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  pointer-events: none;
}
.fp-folder__dots { display: flex; gap: 2.75rem; margin-bottom: 0.625rem; }
.fp-folder__dot {
  width: 0.625rem; height: 0.625rem; border-radius: 999px;
  background: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}
.fp-folder__bar {
  width: 2.25rem; height: 0.25rem; border-radius: 999px;
  background: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}

/* ── TextReveal ─────────────────────────────────────────────────────────── */

.fp-reveal { color: inherit; }
.fp-reveal__group { display: inline-block; white-space: nowrap; vertical-align: baseline; }
/* Bewust geen CSS-transition: de scrub is hier de enige motor (§2.6). */
.fp-reveal__unit { display: inline-block; vertical-align: baseline; }

/* ── TaskSteps ──────────────────────────────────────────────────────────── */

.fp-steps { width: 100%; }
.fp-steps ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.125rem;
}
.fp-steps li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 1.75rem;
  padding: 0 0.25rem;
}

.fp-steps__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 1rem; height: 1rem;
  flex-shrink: 0;
}
.fp-steps__mark > * { grid-area: 1 / 1; }

.fp-steps__badge {
  display: grid;
  place-items: center;
  width: 1rem; height: 1rem;
  border-radius: calc(var(--radius) / 2);
}
.fp-steps__badge--klaar {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.fp-steps__badge--fout {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.fp-steps__spin { color: var(--muted-foreground); display: grid; place-items: center; }
.fp-steps__pip {
  width: 0.3125rem; height: 0.3125rem;
  border-radius: calc(var(--radius) / 4);
  background: var(--border);
}

.fp-steps__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: color var(--motion-instant-duration) var(--motion-instant);
}
.fp-steps li[data-status="klaar"] .fp-steps__label { color: color-mix(in srgb, var(--foreground) 70%, var(--muted-foreground)); }
.fp-steps li[data-status="bezig"] .fp-steps__label { color: var(--foreground); font-weight: 500; }
.fp-steps li[data-status="fout"] .fp-steps__label { color: var(--danger); font-weight: 500; }

/* De loopband op de actieve regel: licht dat over de tekst trekt. */
.fp-steps__label--loopt {
  font-weight: 500;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--muted-foreground) 38%,
    var(--foreground) 50%,
    var(--muted-foreground) 62%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.fp-steps__meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity var(--motion-instant-duration) var(--motion-instant);
}
.fp-steps li[data-status="klaar"] .fp-steps__meta { opacity: 1; }

/* ── PressDepth ─────────────────────────────────────────────────────────── */

.fp-depth {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.fp-depth:disabled { cursor: default; opacity: 0.5; }

.fp-depth__base {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 100%;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--foreground) 18%, var(--muted));
}

.fp-depth__cap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}
.fp-depth:focus-visible .fp-depth__cap {
  outline: 2px solid var(--ring, var(--info));
  outline-offset: 2px;
}

/* Bolling: licht van boven, schaduw van onder — weg zodra hij inzakt. */
.fp-depth__sheen {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--card) 70%, var(--background)),
    inset 0 -1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* ── ReorderList ────────────────────────────────────────────────────────── */

.fp-reorder { width: 100%; }
.fp-reorder ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.375rem;
}
.fp-reorder li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  outline: none;
  touch-action: pan-x;
  transition:
    border-color var(--motion-instant-duration) var(--motion-instant),
    background-color var(--motion-instant-duration) var(--motion-instant),
    box-shadow var(--motion-instant-duration) var(--motion-instant);
}
.fp-reorder li[data-lifted] { z-index: 1; cursor: grabbing; box-shadow: var(--shadow-overlay); }
.fp-reorder li[data-held] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
.fp-reorder li:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

.fp-reorder__grip {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--border);
  transition: color var(--motion-instant-duration) var(--motion-instant);
}
.fp-reorder li[data-lifted] .fp-reorder__grip,
.fp-reorder li:hover .fp-reorder__grip { color: var(--muted-foreground); }

.fp-reorder__body { flex: 1; min-width: 0; }

/* ── ProgressBar ────────────────────────────────────────────────────────── */

.fp-progress { width: 100%; }
.fp-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }

.fp-progress__label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 500; color: var(--foreground);
}

/* Beide waarden liggen in hetzelfde vak: de kop verspringt niet bij het wisselen. */
.fp-progress__value { display: grid; justify-items: end; flex-shrink: 0; }
.fp-progress__value-face {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-size: 0.75rem; font-weight: 500; line-height: 1.25rem;
  color: var(--muted-foreground);
}
.fp-progress__value-face--num { font-variant-numeric: tabular-nums; }

.fp-progress__track {
  margin-top: 0.5rem;
  padding: 2px;
  border-radius: calc(var(--radius) / 2);
  background: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent);
}
.fp-progress__rail {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: calc(var(--radius) / 3);
}
.fp-progress__fill {
  position: absolute; inset: 0;
  display: block;
  transform-origin: left;
  border-radius: calc(var(--radius) / 3);
  background: var(--primary);
}
.fp-progress__shuttle {
  position: absolute; inset-block: 0; left: 0;
  display: block;
  width: 40%;
  border-radius: calc(var(--radius) / 3);
  background: var(--primary);
}

/* ── OtpInput ───────────────────────────────────────────────────────────── */

.fp-otp { display: inline-flex; flex-direction: column; }
.fp-otp__row { position: relative; display: flex; gap: 0.5rem; }

.fp-otp__cell { position: relative; width: 2.5rem; height: 3rem; }
.fp-otp__cell[data-gap] { margin-left: 0.75rem; }

/* De input is doorzichtig; het zichtbare teken is een eigen laag erboven. */
.fp-otp__input {
  width: 100%; height: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 7%, transparent);
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 0.9375rem;
  text-align: center;
  outline: none;
  transition:
    background-color var(--motion-instant-duration) var(--motion-instant),
    border-color var(--motion-instant-duration) var(--motion-instant),
    box-shadow var(--motion-instant-duration) var(--motion-instant);
}
.fp-otp__input::selection { background: transparent; }
.fp-otp__input:disabled { opacity: 0.5; }
.fp-otp__input[data-gevuld] { background: var(--card); border-color: color-mix(in srgb, var(--border) 60%, var(--foreground)); box-shadow: none; }
.fp-otp__input[data-actief] { background: var(--card); border-color: var(--ring, var(--info)); box-shadow: none; }
.fp-otp__input[data-status="fout"] { border-color: var(--danger); background: var(--card); box-shadow: none; }
.fp-otp__input[data-status="goed"] { border-color: var(--success); background: var(--card); box-shadow: none; }

.fp-otp__glass {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.fp-otp__char {
  grid-area: 1 / 1;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.fp-otp__caret {
  grid-area: 1 / 1;
  display: block;
  width: 1.5px; height: 1.0625rem;
  border-radius: 999px;
  background: var(--foreground);
}

.fp-otp__status { display: grid; height: 1rem; margin-top: 0.5rem; }
.fp-otp__message {
  grid-area: 1 / 1;
  font-size: 0.71875rem; line-height: 1rem;
  color: var(--muted-foreground);
}
.fp-otp__message[data-status="fout"] { color: var(--danger); }
.fp-otp__message[data-status="goed"] { color: var(--success); }

/* ── PasswordStrength ───────────────────────────────────────────────────── */

.fp-pw { width: 100%; }
.fp-pw__meter { display: grid; gap: 0.375rem; }
.fp-pw__slot {
  position: relative;
  height: 0.375rem;
  overflow: hidden;
  border-radius: calc(var(--radius) / 4);
  background: var(--muted);
}
.fp-pw__bar {
  position: absolute; inset: 0;
  transform-origin: left;
  border-radius: calc(var(--radius) / 4);
  background: var(--border);
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-pw[data-tone="gevaar"] .fp-pw__bar { background: var(--danger); }
.fp-pw[data-tone="let-op"] .fp-pw__bar { background: var(--warning); }
.fp-pw[data-tone="veilig"] .fp-pw__bar { background: var(--success); }

.fp-pw__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  height: 1.25rem; margin-top: 0.5rem;
}
/* Alle woorden in één vak: "Zwak" → "Sterk" verschuift niets. */
.fp-pw__labels { display: inline-grid; }
.fp-pw__label {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-size: 0.78125rem; font-weight: 500; line-height: 1.25rem;
  color: var(--muted-foreground);
  transition: color var(--motion-instant-duration) var(--motion-instant);
}
.fp-pw[data-tone="gevaar"] .fp-pw__label { color: var(--danger); }
.fp-pw[data-tone="let-op"] .fp-pw__label { color: var(--warning); }
.fp-pw[data-tone="veilig"] .fp-pw__label { color: var(--success); }

.fp-pw__warn {
  white-space: nowrap;
  font-size: 0.71875rem; line-height: 1.25rem;
  color: var(--warning);
}

.fp-pw__rules { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.375rem; }
.fp-pw__rules li { display: flex; align-items: center; gap: 0.5rem; }

.fp-pw__box {
  position: relative;
  display: grid; place-items: center;
  width: 0.875rem; height: 0.875rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) / 3);
  color: var(--background);
}
.fp-pw__box-fill {
  position: absolute; inset: 0;
  border-radius: calc(var(--radius) / 4);
  background: var(--success);
}
.fp-pw__tick { position: relative; width: 0.5625rem; height: 0.5625rem; }

.fp-pw__rule-label {
  font-size: 0.78125rem; line-height: 1.25rem;
  color: var(--muted-foreground);
  transition: color var(--motion-instant-duration) var(--motion-instant);
}
.fp-pw__rules li[data-voldaan] .fp-pw__rule-label { color: var(--foreground); }

/* ── ExpandingNav ───────────────────────────────────────────────────────── */

.fp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }

.fp-nav__item {
  --fp-nav-from: var(--primary);
  --fp-nav-to: var(--primary);
  width: 3.75rem;
  height: 3.75rem;
}
/* De maat springt; Framer interpoleert hem met transforms (FLIP), niet per frame layout. */
.fp-nav__item[data-open] { width: 11.25rem; }

.fp-nav__button {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font: inherit;
  cursor: pointer;
  outline: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: var(--shadow-overlay);
  transition: box-shadow var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-nav__button:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 3px; }
.fp-nav__item[data-open] .fp-nav__button { box-shadow: none; }

.fp-nav__wash,
.fp-nav__glow {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(45deg, var(--fp-nav-from), var(--fp-nav-to));
  opacity: 0;
  transition: opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-nav__wash { inset: 0; }
.fp-nav__glow { inset-inline: 0; top: 0.625rem; height: 100%; filter: blur(15px); z-index: -1; }
.fp-nav__item[data-open] .fp-nav__wash { opacity: 1; }
.fp-nav__item[data-open] .fp-nav__glow { opacity: 0.5; }

.fp-nav__icon { position: relative; display: inline-flex; font-size: 1.5rem; line-height: 1; }
.fp-nav__label {
  position: absolute;
  white-space: nowrap;
  color: var(--primary-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── NeonButton ─────────────────────────────────────────────────────────── */

.fp-neon {
  --fp-neon: var(--primary);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-weight: 500; line-height: 1.2;
  color: var(--foreground);
  border: 1px solid transparent; border-radius: 999px;
  transition:
    background-color var(--motion-instant-duration) var(--motion-instant),
    border-color var(--motion-instant-duration) var(--motion-instant),
    color var(--motion-instant-duration) var(--motion-instant),
    transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-neon--sm { padding: 0.25rem 1rem; font-size: 0.8125rem; }
.fp-neon--md { padding: 0.5rem 1.75rem; font-size: 0.875rem; }
.fp-neon--lg { padding: 0.75rem 2.5rem; font-size: 1rem; }

.fp-neon--outline {
  background: color-mix(in srgb, var(--fp-neon) 6%, transparent);
  border-color: color-mix(in srgb, var(--fp-neon) 22%, transparent);
}
.fp-neon--outline:hover { background: transparent; }
.fp-neon--solid { background: var(--fp-neon); color: var(--primary-foreground); }
.fp-neon--solid:hover { border-color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.fp-neon--ghost { background: transparent; }
.fp-neon--ghost:hover { border-color: var(--border); background: color-mix(in srgb, var(--foreground) 8%, transparent); }

.fp-neon[data-pressed] { transform: scale(0.97); }
.fp-neon:disabled { opacity: 0.5; cursor: default; }
.fp-neon:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* De lichtlijnen: 1px, driekwart breed, gecentreerd; alleen opacity beweegt. */
.fp-neon__line {
  position: absolute; left: 12.5%; right: 12.5%; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--fp-neon), transparent);
  opacity: 0;
  transition: opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-neon__line--top { top: -1px; }
.fp-neon__line--bottom { bottom: -1px; }
.fp-neon:hover .fp-neon__line--top,
.fp-neon:focus-visible .fp-neon__line--top,
.fp-neon[data-pressed] .fp-neon__line--top { opacity: 1; }
.fp-neon:hover .fp-neon__line--bottom,
.fp-neon:focus-visible .fp-neon__line--bottom,
.fp-neon[data-pressed] .fp-neon__line--bottom { opacity: 0.3; }

/* ── GradientButton ─────────────────────────────────────────────────────── */

/* Geregistreerde properties: alleen zo kan de browser een verloop-positie
   interpoleren. Dit is verf, geen layout. */
@property --fp-grad-x { syntax: "<percentage>"; inherits: false; initial-value: 11.14%; }
@property --fp-grad-y { syntax: "<percentage>"; inherits: false; initial-value: 140%; }
@property --fp-grad-sx { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
@property --fp-grad-sy { syntax: "<percentage>"; inherits: false; initial-value: 180.06%; }
@property --fp-grad-s1 { syntax: "<percentage>"; inherits: false; initial-value: 37.35%; }
@property --fp-grad-s2 { syntax: "<percentage>"; inherits: false; initial-value: 61.36%; }
@property --fp-grad-s3 { syntax: "<percentage>"; inherits: false; initial-value: 78.42%; }
@property --fp-grad-s4 { syntax: "<percentage>"; inherits: false; initial-value: 89.52%; }
@property --fp-grad-s5 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --fp-grad-hoek { syntax: "<angle>"; inherits: false; initial-value: 20deg; }

.fp-grad {
  --fp-grad-1: var(--primary);
  --fp-grad-2: color-mix(in srgb, var(--primary) 70%, var(--info));
  --fp-grad-3: color-mix(in srgb, var(--primary) 40%, var(--info));
  --fp-grad-4: color-mix(in srgb, var(--info) 80%, var(--background));
  --fp-grad-5: color-mix(in srgb, var(--info) 55%, var(--background));
  --fp-grad-rand-1: color-mix(in srgb, var(--primary) 70%, transparent);
  --fp-grad-rand-2: color-mix(in srgb, var(--info) 40%, transparent);
  --fp-grad-x: 11.14%; --fp-grad-y: 140%;
  --fp-grad-sx: 150%; --fp-grad-sy: 180.06%;
  --fp-grad-s1: 37.35%; --fp-grad-s2: 61.36%; --fp-grad-s3: 78.42%; --fp-grad-s4: 89.52%; --fp-grad-s5: 100%;
  --fp-grad-hoek: 20deg;

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 8.25rem; padding: 1rem 2.25rem;
  appearance: none; cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-weight: 600; line-height: 1.2;
  color: var(--primary-foreground);
  border: 2px solid transparent; border-radius: var(--radius);
  background:
    radial-gradient(
      var(--fp-grad-sx) var(--fp-grad-sy) at var(--fp-grad-x) var(--fp-grad-y),
      var(--fp-grad-1) var(--fp-grad-s1),
      var(--fp-grad-2) var(--fp-grad-s2),
      var(--fp-grad-3) var(--fp-grad-s3),
      var(--fp-grad-4) var(--fp-grad-s4),
      var(--fp-grad-5) var(--fp-grad-s5)
    ) padding-box,
    linear-gradient(var(--fp-grad-hoek), var(--fp-grad-rand-1), var(--fp-grad-rand-2)) border-box;
  transition:
    --fp-grad-x var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-y var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-sx var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-sy var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-s1 var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-s2 var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-s3 var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-s4 var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-s5 var(--motion-smooth-duration) var(--motion-smooth),
    --fp-grad-hoek var(--motion-smooth-duration) var(--motion-smooth),
    transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-grad:hover, .fp-grad:focus-visible, .fp-grad[data-pressed] {
  --fp-grad-x: 0%; --fp-grad-y: 91.51%;
  --fp-grad-sx: 120.24%; --fp-grad-sy: 103.18%;
  --fp-grad-s1: 0%; --fp-grad-s2: 8.8%; --fp-grad-s3: 21.44%; --fp-grad-s4: 71.34%; --fp-grad-s5: 85.76%;
  --fp-grad-hoek: 190deg;
}
.fp-grad[data-pressed] { transform: scale(0.97); }
.fp-grad:disabled { opacity: 0.5; cursor: default; }
.fp-grad:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* Verloop op de tekstkleur — voor lichte vlakken waar de merkkleur te luid is. */
.fp-grad--contrast {
  --fp-grad-1: var(--foreground);
  --fp-grad-2: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground));
  --fp-grad-3: color-mix(in srgb, var(--foreground) 55%, var(--muted-foreground));
  --fp-grad-4: var(--muted-foreground);
  --fp-grad-5: color-mix(in srgb, var(--muted-foreground) 70%, var(--background));
  --fp-grad-rand-1: color-mix(in srgb, var(--foreground) 60%, transparent);
  --fp-grad-rand-2: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
  color: var(--background);
}

/* ── HoverRevealButton ──────────────────────────────────────────────────── */

.fp-hreveal {
  position: relative;
  display: inline-grid; place-items: center; overflow: hidden;
  min-width: 8rem; padding: 0.5rem 1.25rem 0.5rem 2.125rem;
  appearance: none; cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-weight: 600; line-height: 1.4;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border); border-radius: 999px;
  transition: transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-hreveal:disabled { opacity: 0.5; cursor: default; }
.fp-hreveal:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* De stip is een cirkel zo breed als de knop, links van het woord; groeien = schalen, niet meten. */
.fp-hreveal__dot {
  position: absolute; left: 1.25rem; top: 50%;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%) scale(0.06);
  pointer-events: none;
  transition: transform var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-hreveal:hover .fp-hreveal__dot,
.fp-hreveal:focus-visible .fp-hreveal__dot,
.fp-hreveal[data-pressed] .fp-hreveal__dot { transform: translate(-50%, -50%) scale(2.2); }

.fp-hreveal__rust {
  position: relative; display: inline-block;
  transform: translateX(0.25rem);
  transition:
    transform var(--motion-smooth-duration) var(--motion-smooth),
    opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-hreveal:hover .fp-hreveal__rust,
.fp-hreveal:focus-visible .fp-hreveal__rust,
.fp-hreveal[data-pressed] .fp-hreveal__rust { transform: translateX(3rem); opacity: 0; }

.fp-hreveal__onthuld {
  position: absolute; inset: 0; padding-left: 0.875rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--primary-foreground);
  transform: translateX(3rem); opacity: 0;
  transition:
    transform var(--motion-smooth-duration) var(--motion-smooth),
    opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-hreveal:hover .fp-hreveal__onthuld,
.fp-hreveal:focus-visible .fp-hreveal__onthuld,
.fp-hreveal[data-pressed] .fp-hreveal__onthuld { transform: translateX(-0.25rem); opacity: 1; }

/* ── LiquidMetalButton ──────────────────────────────────────────────────── */

.fp-metal {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  height: 2.875rem; min-width: 2.875rem; padding: 0 1.5rem;
  appearance: none; border: 0; background: transparent;
  cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-size: 0.875rem; line-height: 1;
  color: var(--muted-foreground);
  border-radius: 999px; overflow: hidden;
}
.fp-metal--icon { width: 2.875rem; padding: 0; }
.fp-metal:disabled { opacity: 0.5; cursor: default; }
.fp-metal:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* De rand: een afgeknipt vlak met daarin een te groot draaiend vierkant. */
.fp-metal__ring {
  position: absolute; inset: 0; z-index: -2;
  border-radius: 999px; overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--foreground) 14%, transparent),
    var(--shadow-overlay);
  transition: box-shadow var(--motion-instant-duration) var(--motion-instant);
}
.fp-metal[data-pressed] .fp-metal__ring {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 24%, transparent);
}
.fp-metal__sheen {
  position: absolute; left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    var(--muted-foreground),
    var(--foreground),
    var(--muted),
    color-mix(in srgb, var(--foreground) 70%, var(--muted-foreground)),
    var(--muted-foreground),
    var(--card),
    var(--foreground),
    var(--muted-foreground)
  );
}
/* Het gezicht: van paneel naar bodem, drukt 1px in. */
.fp-metal__face {
  position: absolute; inset: 2px; z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card), var(--background));
  transition:
    transform var(--motion-instant-duration) var(--motion-instant),
    box-shadow var(--motion-instant-duration) var(--motion-instant);
}
.fp-metal[data-pressed] .fp-metal__face {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 4px color-mix(in srgb, var(--foreground) 10%, transparent);
}
.fp-metal__label {
  position: relative; display: inline-flex; align-items: center; gap: 0.375rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--background) 60%, transparent);
}
.fp-metal__ripple-plek { position: absolute; width: 0; height: 0; pointer-events: none; }
.fp-metal__ripple {
  position: absolute; left: -0.625rem; top: -0.625rem;
  display: block; width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--foreground) 40%, transparent) 0%, transparent 70%);
}

/* ── LiquidGlassButton ──────────────────────────────────────────────────── */

.fp-glass {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  appearance: none; border: 0; background: transparent;
  cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-weight: 500; line-height: 1;
  color: var(--foreground);
  border-radius: 999px;
  transition: transform var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-glass--md { height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }
.fp-glass--lg { height: 2.75rem; padding: 0 1.5rem; font-size: 0.9375rem; }
.fp-glass--xl { height: 3.5rem; padding: 0 2.5rem; font-size: 1rem; }
.fp-glass:hover { transform: scale(1.05); }
.fp-glass[data-pressed] { transform: scale(0.98); }
.fp-glass:disabled { opacity: 0.5; cursor: default; }
.fp-glass:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* Lichtval: binnenschaduwen op de tekstkleur — licht op donker, donker op licht. */
.fp-glass__rand {
  position: absolute; inset: 0; z-index: -1;
  border-radius: 999px;
  box-shadow:
    0 0 6px color-mix(in srgb, var(--foreground) 3%, transparent),
    0 2px 6px color-mix(in srgb, var(--foreground) 8%, transparent),
    inset 3px 3px 0.5px -3px color-mix(in srgb, var(--foreground) 90%, transparent),
    inset -3px -3px 0.5px -3px color-mix(in srgb, var(--foreground) 85%, transparent),
    inset 1px 1px 1px -0.5px color-mix(in srgb, var(--foreground) 60%, transparent),
    inset -1px -1px 1px -0.5px color-mix(in srgb, var(--foreground) 60%, transparent),
    inset 0 0 6px 6px color-mix(in srgb, var(--foreground) 12%, transparent),
    inset 0 0 2px 2px color-mix(in srgb, var(--foreground) 6%, transparent),
    0 0 12px color-mix(in srgb, var(--background) 15%, transparent);
}
/* De breking; zonder SVG-backdrop (Safari/Firefox) blijft deze blur staan. */
.fp-glass__laag {
  position: absolute; inset: 0; z-index: -2;
  border-radius: 999px; overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fp-glass__inhoud { position: relative; pointer-events: none; }
.fp-glass__filter { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── DancingLetters ─────────────────────────────────────────────────────── */

.fp-dance {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  perspective: 1000px;
  user-select: none;
  color: inherit; font: inherit; font-weight: 700;
}
.fp-dance__letter {
  position: relative; display: inline-block;
  transform-style: preserve-3d;
  cursor: pointer; white-space: pre;
}
.fp-dance__letter[data-bezig] { z-index: 1; }

/* ── ShiningText ────────────────────────────────────────────────────────── */

.fp-shine {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(110deg, var(--muted-foreground) 35%, var(--foreground) 50%, var(--muted-foreground) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Marquee ────────────────────────────────────────────────────────────── */

.fp-marquee {
  --fp-marquee-gap: 2rem;
  display: flex; width: 100%; overflow: hidden;
}
.fp-marquee--verticaal { flex-direction: column; }
.fp-marquee__band {
  display: flex; flex-shrink: 0;
  gap: var(--fp-marquee-gap);
  padding-right: var(--fp-marquee-gap); /* zodat de naad tussen kopie A en B dezelfde ruimte heeft */
  will-change: transform;
}
.fp-marquee--verticaal .fp-marquee__band { flex-direction: column; padding-right: 0; padding-bottom: var(--fp-marquee-gap); }
.fp-marquee__item { display: flex; flex-shrink: 0; align-items: center; }
.fp-marquee--verticaal .fp-marquee__item { width: 100%; }

/* ── ImagesBadge ────────────────────────────────────────────────────────── */

.fp-badge {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-overlay);
  color: var(--foreground);
  user-select: none; cursor: default;
}
.fp-badge--tapbaar { cursor: pointer; }
.fp-badge--tapbaar:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-badge--sm { height: 2.25rem; padding: 0 0.875rem 0 0.5rem; gap: 0.5rem; font-size: 0.6875rem; }
.fp-badge--md { height: 2.75rem; padding: 0 1rem 0 0.625rem; gap: 0.625rem; font-size: 0.75rem; }
.fp-badge--lg { height: 3.5rem; padding: 0 1.25rem 0 0.75rem; gap: 0.75rem; font-size: 0.875rem; }

.fp-badge__strook { position: relative; flex-shrink: 0; }
.fp-badge__kaart {
  position: absolute; top: 0.375rem; left: 0;
  width: var(--fp-badge-px); height: var(--fp-badge-px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--card);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 18%, transparent);
  background: var(--muted);
}
.fp-badge__kaart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-badge__kaart--circle, .fp-badge__kaart--teller { border-radius: 50%; }
.fp-badge__kaart--rounded { border-radius: var(--radius); }
.fp-badge__kaart--square { border-radius: calc(var(--radius) / 3); }
.fp-badge__rest { font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fp-badge__label { white-space: nowrap; font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--foreground) 80%, transparent); }

/* ── Timeline ───────────────────────────────────────────────────────────── */

.fp-timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  color: var(--foreground);
}
.fp-timeline--compact { gap: 0.5rem; }
.fp-timeline--default { gap: 1rem; }
.fp-timeline--spacious { gap: 2rem; }
.fp-timeline--horizontal { flex-direction: row; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; }

.fp-timeline__item { position: relative; display: flex; gap: 0.75rem; padding-bottom: 0.5rem; }
.fp-timeline--horizontal .fp-timeline__item { flex-direction: column; min-width: 16rem; flex-shrink: 0; }

/* De lijn naar de volgende stap draagt de status van deze stap. */
.fp-timeline__lijn { position: absolute; background: var(--border); }
.fp-timeline--vertical .fp-timeline__lijn { left: 0.75rem; top: 2.25rem; bottom: -1rem; width: 1px; }
.fp-timeline--horizontal .fp-timeline__lijn { top: 0.75rem; left: 2rem; right: -1rem; height: 1px; }
.fp-timeline__item[data-status="klaar"] .fp-timeline__lijn,
.fp-timeline__item[data-status="bezig"] .fp-timeline__lijn { background: var(--primary); }
.fp-timeline__item[data-status="wacht"] .fp-timeline__lijn { background: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }
.fp-timeline__item[data-status="fout"] .fp-timeline__lijn { background: var(--danger); }

.fp-timeline__stip-vak { position: relative; z-index: 1; display: flex; flex-shrink: 0; }
.fp-timeline__stip {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--border);
  background: var(--background); color: var(--muted-foreground);
  font-size: 0.75rem; font-weight: 500;
}
.fp-timeline__stipje { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.fp-timeline__item[data-status="klaar"] .fp-timeline__stip { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.fp-timeline__item[data-status="bezig"] .fp-timeline__stip { border-color: var(--primary); color: var(--primary); }
.fp-timeline__item[data-status="wacht"] .fp-timeline__stip { border-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }
.fp-timeline__item[data-status="fout"] .fp-timeline__stip { border-color: var(--danger); background: var(--danger); color: var(--primary-foreground); }

.fp-timeline__inhoud { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; flex: 1; }
.fp-timeline__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.fp-timeline__titel { margin: 0; font: inherit; font-weight: 500; line-height: 1.25; }
.fp-timeline__tekst { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); }
.fp-timeline__tijd { flex-shrink: 0; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fp-timeline__extra { margin-top: 0.375rem; }

/* ── Accordion ──────────────────────────────────────────────────────────── */

.fp-acc { width: 100%; color: var(--foreground); }
.fp-acc__item { border-bottom: 1px solid var(--border); }
.fp-acc__kop { margin: 0; font: inherit; }
.fp-acc__knop {
  display: flex; align-items: flex-start; gap: 1rem; width: 100%;
  padding: 1rem 0;
  appearance: none; background: transparent; border: 0;
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: color var(--motion-default-duration) var(--motion-default);
}
.fp-acc__knop:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-acc__titel { flex: 1; }
.fp-acc__vak { overflow: hidden; }
.fp-acc__inhoud { padding: 0 0 1.5rem; color: var(--muted-foreground); line-height: 1.6; }

/* display: de bron — genummerd, kapitalen, gedempt tot je hem opent. */
.fp-acc--display .fp-acc__knop { padding: 1.25rem 0 1.25rem 1.5rem; color: color-mix(in srgb, var(--foreground) 22%, transparent); }
.fp-acc--display .fp-acc__knop:hover { color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.fp-acc--display .fp-acc__item[data-open] .fp-acc__knop { color: var(--primary); }
.fp-acc--display .fp-acc__nummer { font-size: 0.75rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.fp-acc--display .fp-acc__titel { text-transform: uppercase; font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; }
.fp-acc--display .fp-acc__inhoud { padding: 0 0 1.5rem 3.5rem; }
@media (min-width: 768px) {
  .fp-acc--display .fp-acc__knop { padding-left: 3.5rem; }
  .fp-acc--display .fp-acc__inhoud { padding: 0 5rem 1.5rem; }
}

/* plain: lijstje met chevron. */
.fp-acc--plain .fp-acc__knop { align-items: center; font-weight: 500; }
.fp-acc--plain .fp-acc__knop:hover { color: var(--primary); }
.fp-acc__chevron { flex-shrink: 0; transition: transform var(--motion-default-duration) var(--motion-default); }
.fp-acc__item[data-open] .fp-acc__chevron { transform: rotate(180deg); }

/* ── LinkPreview ────────────────────────────────────────────────────────── */

.fp-lpreview { position: relative; display: inline-block; }
.fp-lpreview__link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.15em; }
.fp-lpreview__link:hover { text-decoration-color: currentColor; }
.fp-lpreview__link:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; border-radius: calc(var(--radius) / 3); }
/* Het kaartje hangt boven de link, gecentreerd; transform-origin onderaan zodat het uit de link groeit. */
.fp-lpreview__kaart {
  position: absolute; bottom: calc(100% + 0.625rem); left: 50%;
  margin-left: calc(var(--fp-lpreview-w, 200px) / -2 - 0.25rem);
  z-index: 20;
  display: block; padding: 0.25rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  transform-origin: bottom center;
  pointer-events: none;
  font-size: 0;
}
.fp-lpreview__kaart img { display: block; border-radius: calc(var(--radius) - 0.25rem); object-fit: cover; }

/* ── RadioGlider ────────────────────────────────────────────────────────── */

.fp-glider { position: relative; display: flex; flex-direction: column; padding-left: 0.75rem; color: var(--foreground); }
.fp-glider__optie { position: relative; z-index: 2; padding: 0.25rem 0; }
.fp-glider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; appearance: none; }
.fp-glider__input:disabled { cursor: default; }
.fp-glider__label {
  display: block; padding: 0.5rem 0.25rem; cursor: pointer;
  font-size: 1.25rem; color: var(--muted-foreground);
  transition: color var(--motion-default-duration) var(--motion-default);
}
.fp-glider__input:checked + .fp-glider__label { color: var(--primary); }
.fp-glider__input:disabled + .fp-glider__label { opacity: 0.5; cursor: default; }
.fp-glider__input:focus-visible + .fp-glider__label { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; border-radius: calc(var(--radius) / 2); }

/* De rail links: 1px, vervagend naar boven en onder; de streep is 1/n hoog. */
.fp-glider__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.fp-glider__streep {
  position: relative; display: block; width: 100%;
  height: calc(100% / var(--fp-glider-n, 3));
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  transition: transform var(--motion-playful-duration) var(--motion-playful);
}
.fp-glider__gloed {
  position: absolute; top: 50%; left: 0; width: 300%; height: 60%;
  transform: translateY(-50%);
  background: var(--primary); filter: blur(10px);
}
.fp-glider__waas {
  position: absolute; left: 0; top: 0; height: 100%; width: 9rem;
  background: linear-gradient(to right, color-mix(in srgb, var(--primary) 10%, transparent), transparent);
}

/* ── Toggle ─────────────────────────────────────────────────────────────── */

.fp-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  appearance: none; cursor: pointer; user-select: none; touch-action: manipulation;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--foreground); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  transition:
    background-color var(--motion-instant-duration) var(--motion-instant),
    color var(--motion-instant-duration) var(--motion-instant),
    border-color var(--motion-instant-duration) var(--motion-instant),
    transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-toggle--sm { height: 2.25rem; padding: 0 0.625rem; }
.fp-toggle--md { height: 2.5rem; padding: 0 0.75rem; }
.fp-toggle--lg { height: 2.75rem; padding: 0 1.25rem; }
.fp-toggle--outline { border-color: var(--border); }
.fp-toggle:hover { background: var(--muted); color: var(--muted-foreground); }
.fp-toggle[data-on] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--foreground); }
.fp-toggle[data-pressed] { transform: scale(0.96); }
.fp-toggle:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.fp-toggle:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-toggle-groep { display: inline-flex; align-items: center; gap: 0.25rem; }
.fp-toggle-groep--vertical { flex-direction: column; align-items: stretch; }
.fp-toggle-groep--vertical .fp-toggle { width: 100%; }

/* ── FileDropzone ───────────────────────────────────────────────────────── */

.fp-drop { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; color: var(--foreground); }
.fp-drop__vak {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem; cursor: pointer; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--muted-foreground) 25%, transparent);
  border-radius: var(--radius);
  transition:
    border-color var(--motion-default-duration) var(--motion-default),
    background-color var(--motion-default-duration) var(--motion-default);
}
.fp-drop__vak:hover { border-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); background: color-mix(in srgb, var(--muted) 30%, transparent); }
.fp-drop__vak[data-boven] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.fp-drop__vak[aria-disabled] { opacity: 0.5; pointer-events: none; }
.fp-drop__vak:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-drop__icoon { display: block; margin-bottom: 0.75rem; color: var(--muted-foreground); transition: color var(--motion-default-duration) var(--motion-default); }
.fp-drop__vak[data-boven] .fp-drop__icoon { color: var(--primary); }
/* De tekst wisselt in één vak: geen sprong bij "sleep" → "laat los". */
.fp-drop__tekst-vak { display: grid; }
.fp-drop__tekst { grid-area: 1 / 1; font-size: 0.875rem; font-weight: 500; }
.fp-drop__sub { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.fp-drop__fout { margin: 0; font-size: 0.875rem; color: var(--danger); }
.fp-drop__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fp-drop__rij {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.75);
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.fp-drop__rij-icoon { display: flex; color: var(--muted-foreground); }
.fp-drop__rij-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fp-drop__naam { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-drop__maat { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fp-drop__verwijder {
  display: flex; flex-shrink: 0; padding: 0.25rem;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); border-radius: calc(var(--radius) / 2);
  transition:
    background-color var(--motion-instant-duration) var(--motion-instant),
    color var(--motion-instant-duration) var(--motion-instant),
    transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-drop__verwijder:hover { background: var(--muted); color: var(--foreground); transform: scale(1.1); }
.fp-drop__verwijder[data-pressed] { transform: scale(0.9); }
.fp-drop__verwijder:focus-visible { outline: 2px solid var(--ring, var(--info)); }

/* ── ColorPicker ────────────────────────────────────────────────────────── */

.fp-picker { position: relative; display: grid; place-items: center; width: 16rem; height: 16rem; }
.fp-picker__ring { position: absolute; inset: 0; border-radius: 50%; }
.fp-picker__schijf { position: absolute; inset: 0; border-radius: 50%; background: var(--card); }
.fp-picker__vlak { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.fp-picker__stip {
  position: absolute; left: 50%; top: 50%;
  width: 0.875rem; height: 0.875rem; margin: -0.4375rem 0 0 -0.4375rem;
  appearance: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 20%, transparent);
}
.fp-picker__stip:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-picker__stip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--foreground); }
.fp-picker__stip-ring {
  position: absolute; inset: -0.25rem; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  transition: opacity var(--motion-instant-duration) var(--motion-instant);
}
.fp-picker__stip:hover .fp-picker__stip-ring { opacity: 0.4; }

/* ── Combobox ───────────────────────────────────────────────────────────── */

.fp-combo { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; max-width: 20rem; }
.fp-combo .fp-popover-anchor { display: block; }
.fp-combo__knop { width: 100%; justify-content: space-between; gap: 0.5rem; font-weight: 400; }
.fp-combo__knop svg { flex-shrink: 0; color: var(--muted-foreground); }
.fp-combo__waarde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-combo__waarde--leeg { color: var(--muted-foreground); }
.fp-combo .fp-popover { width: 100%; padding: 0; }
.fp-combo__paneel { display: flex; flex-direction: column; }
.fp-combo__zoekrij { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.fp-combo__zoek {
  flex: 1; min-width: 0; height: 2.5rem;
  appearance: none; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 0.875rem; color: var(--foreground);
}
.fp-combo__zoek::placeholder { color: var(--muted-foreground); }
.fp-combo__lijst { list-style: none; margin: 0; padding: 0.25rem; max-height: 18rem; overflow-y: auto; }
.fp-combo__optie {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.375rem 0.5rem; cursor: pointer;
  font-size: 0.875rem; color: var(--foreground);
  border-radius: calc(var(--radius) / 2);
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-combo__optie[data-actief], .fp-combo__optie:hover { background: var(--muted); }
.fp-combo__optie[aria-disabled] { opacity: 0.5; pointer-events: none; }
.fp-combo__optie-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-combo__optie svg { flex-shrink: 0; color: var(--primary); }
.fp-combo__leeg { padding: 1.5rem 0; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

/* ── Calendar (één datum) ───────────────────────────────────────────────── */

.fp-cal1 { display: inline-flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; color: var(--foreground); }
.fp-cal1__kop { display: flex; align-items: center; gap: 0.25rem; }
.fp-cal1__titel { flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.fp-cal1__label { padding: 0 0.25rem; }
.fp-cal1__select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--foreground);
  background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) / 2);
  padding: 0.25rem 1.5rem 0.25rem 0.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.8rem) 55%, calc(100% - 0.55rem) 55%;
  background-size: 0.25rem 0.25rem; background-repeat: no-repeat;
}
.fp-cal1__select:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-cal1__pijl {
  display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); border-radius: calc(var(--radius) / 2);
  transition: background-color var(--motion-instant-duration) var(--motion-instant), color var(--motion-instant-duration) var(--motion-instant), transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-cal1__pijl:hover { background: var(--muted); color: var(--foreground); }
.fp-cal1__pijl[data-pressed] { transform: scale(0.92); }
.fp-cal1__pijl:disabled { opacity: 0.3; cursor: default; }
.fp-cal1__pijl:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-cal1__raster { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: 0.125rem; }
.fp-cal1__dagnaam { display: flex; align-items: center; justify-content: center; height: 2rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.fp-cal1__dag {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.875rem; color: var(--foreground);
  border-radius: calc(var(--radius) / 2);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--motion-instant-duration) var(--motion-instant), color var(--motion-instant-duration) var(--motion-instant), transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-cal1__dag:hover { background: var(--muted); }
.fp-cal1__dag[data-pressed] { transform: scale(0.94); }
.fp-cal1__dag[data-buiten] { color: var(--muted-foreground); opacity: 0.55; }
.fp-cal1__dag:disabled { opacity: 0.3; cursor: default; text-decoration: line-through; }
.fp-cal1__dag[data-gekozen] { background: var(--primary); color: var(--primary-foreground); }
/* Vandaag: een stip onder het cijfer; op de gekozen dag in de tegenkleur. */
.fp-cal1__dag[data-vandaag]::after { content: ""; position: absolute; bottom: 0.25rem; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--primary); transform: translateX(-50%); }
.fp-cal1__dag[data-vandaag][data-gekozen]::after { background: var(--primary-foreground); }
.fp-cal1__dag:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; z-index: 1; }

/* ── Kbd ────────────────────────────────────────────────────────────────── */

.fp-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.25rem; min-width: 1.25rem; padding: 0 0.25rem;
  font: inherit; font-size: 0.6875rem; font-weight: 500; line-height: 1;
  color: var(--muted-foreground); background: var(--muted);
  border: 1px solid var(--border); border-radius: calc(var(--radius) / 2);
  pointer-events: none; user-select: none;
}
.fp-kbd-groep { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ── SearchField ────────────────────────────────────────────────────────── */

.fp-search { width: 100%; }
.fp-search--label-verborgen .fp-field__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fp-search .fp-input--met-trailing { padding-right: 4.25rem; }

/* ── TextRoll ───────────────────────────────────────────────────────────── */

.fp-roll { position: relative; display: inline-block; overflow: hidden; line-height: 0.85; padding-bottom: 0.08em; cursor: pointer; }
.fp-roll__laag { display: block; white-space: pre; }
.fp-roll__laag--onder { position: absolute; inset: 0; }
.fp-roll__letter { display: inline-block; will-change: transform; }

/* ── Menubar ────────────────────────────────────────────────────────────── */

.fp-mbar {
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 2.5rem; padding: 0.25rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.fp-mbar__popover .fp-popover { min-width: 12rem; padding: 0.25rem; }
.fp-mbar__trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  appearance: none; border: 0; background: transparent; cursor: default;
  font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--foreground);
  border-radius: calc(var(--radius) / 2); user-select: none;
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-mbar__trigger:hover, .fp-mbar__trigger[data-open], .fp-mbar__trigger:focus-visible { background: var(--muted); outline: none; }
.fp-mbar__menu { list-style: none; margin: 0; padding: 0; }
.fp-mbar__item {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem; cursor: default; user-select: none;
  font-size: 0.875rem; border-radius: calc(var(--radius) / 2);
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-mbar__item--vink { padding-left: 2rem; }
.fp-mbar__item:hover, .fp-mbar__item[data-actief] { background: var(--muted); }
.fp-mbar__item[aria-disabled] { opacity: 0.5; pointer-events: none; }
.fp-mbar__vink { position: absolute; left: 0.5rem; display: flex; width: 0.875rem; height: 0.875rem; align-items: center; justify-content: center; }
.fp-mbar__stip { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.fp-mbar__icoon { display: flex; width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.fp-mbar__label { flex: 1; }
.fp-mbar__sneltoets { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--muted-foreground); }
.fp-mbar__scheiding { height: 1px; margin: 0.25rem -0.25rem; background: var(--border); }
.fp-mbar__kopje { padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }

/* ── ReadingProgress ────────────────────────────────────────────────────── */

.fp-lees { display: flex; align-items: center; gap: 0.75rem; width: 100%; color: var(--foreground); }
.fp-lees__rail {
  flex: 1; min-width: 0; padding: 2px;
  background: var(--muted); border-radius: calc(var(--radius) / 2);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 7%, transparent);
}
.fp-lees__vul { display: block; height: 3px; width: 100%; transform-origin: left; background: var(--primary); border-radius: calc(var(--radius) / 4); }
/* Drie teksten in één vak: "nog 4 min" → "Einde · 6 min" verspringt niets. */
.fp-lees__tekst { display: grid; justify-items: end; flex-shrink: 0; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.fp-lees__tekst > * { grid-area: 1 / 1; white-space: nowrap; }
.fp-lees__meet { visibility: hidden; display: flex; align-items: center; gap: 0.25rem; }
.fp-lees__over { color: var(--muted-foreground); }
.fp-lees__klaar { display: flex; align-items: center; gap: 0.25rem; color: var(--foreground); }
.fp-lees__vinkvak { display: inline-block; width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

/* ── PhoneMockup ────────────────────────────────────────────────────────── */

.fp-phone {
  --fp-phone-frame: var(--foreground);
  --fp-phone-screen: var(--background);
  display: inline-block; box-sizing: border-box;
  /* De schaal is een transform; de layout-maat schaalt mee zodat er geen leeg vlak overblijft. */
  width: calc(var(--fp-phone-w) * var(--fp-phone-scale, 1)); height: calc(var(--fp-phone-h) * var(--fp-phone-scale, 1));
}
.fp-phone__lijst { transform: scale(var(--fp-phone-scale, 1)); transform-origin: top left; }
.fp-phone__lijst {
  position: relative; box-sizing: border-box; overflow: hidden;
  width: var(--fp-phone-w); height: var(--fp-phone-h); padding: var(--fp-phone-bezel);
  border-radius: calc(var(--fp-phone-r) + var(--fp-phone-bezel));
  background: linear-gradient(135deg, color-mix(in srgb, var(--fp-phone-frame) 92%, var(--background)) 0%, var(--fp-phone-frame) 40%, color-mix(in srgb, var(--fp-phone-frame) 86%, var(--background)) 100%);
}
.fp-phone--schaduw .fp-phone__lijst { box-shadow: var(--shadow-overlay); }
.fp-phone__scherm {
  position: relative; overflow: hidden; width: 100%; height: 100%;
  border-radius: var(--fp-phone-r);
  background: var(--fp-phone-screen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-phone-frame) 6%, transparent), inset 0 10px 20px color-mix(in srgb, var(--fp-phone-frame) 25%, transparent);
}
.fp-phone__wallpaper { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; }
.fp-phone__uitsnede {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
  width: var(--fp-phone-cut-w); height: var(--fp-phone-cut-h); border-radius: var(--fp-phone-cut-r);
  background: var(--fp-phone-frame);
}
.fp-phone__uitsnede--island { top: 12px; }
.fp-phone__uitsnede--notch { top: 8px; border-top-left-radius: 0; border-top-right-radius: 0; }
.fp-phone__inhoud { position: absolute; inset: var(--fp-phone-top) 0 var(--fp-phone-bottom) 0; overflow: hidden; z-index: 1; display: flex; flex-direction: column; }
.fp-phone__thuis {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 34%; max-width: 140px; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 60%, transparent); pointer-events: none;
}

/* ── HoverExpandGallery ─────────────────────────────────────────────────── */

.fp-hgal { display: flex; align-items: stretch; justify-content: center; gap: 0.25rem; width: 100%; }
.fp-hgal__strook {
  position: relative; flex: 1 1 0; min-width: 2.5rem; overflow: hidden;
  appearance: none; border: 0; padding: 0; cursor: pointer;
  border-radius: calc(var(--radius) * 2); background: var(--muted);
}
.fp-hgal__strook[data-open] { flex: 6 1 0; }
.fp-hgal__strook:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-hgal__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-hgal__waas {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--background) 60%, transparent), transparent 50%);
}
.fp-hgal__onderschrift { font-size: 0.75rem; color: color-mix(in srgb, var(--foreground) 70%, transparent); }

/* ── HoverPreviewList ───────────────────────────────────────────────────── */

.fp-hpl { position: relative; width: 100%; overflow: hidden; color: var(--foreground); background: var(--card); }
.fp-hpl__lijst { position: relative; z-index: 3; list-style: none; margin: 0; padding: 0; }
.fp-hpl__rij {
  display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1rem;
  padding: 0.75rem 1.5rem; cursor: default;
  transition: color var(--motion-default-duration) var(--motion-default);
}
.fp-hpl__rij[data-actief] { color: var(--background); }
.fp-hpl__rij[role="button"] { cursor: pointer; }
.fp-hpl__rij:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: -2px; }
.fp-hpl__cel { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* De balk onder de tekst: tekstkleur, schuift met y; hoogte is de gemeten rijhoogte. */
.fp-hpl__balk { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: var(--fp-hpl-rij, 0px); background: var(--foreground); pointer-events: none; }
.fp-hpl__beelden { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: difference; }
.fp-hpl__beeld {
  position: absolute; left: 35%; top: 50%; transform: translateY(-50%);
  width: calc(19.5rem * var(--fp-hpl-schaal, 1)); height: calc(22.5rem * var(--fp-hpl-schaal, 1));
  will-change: clip-path, opacity;
}
.fp-hpl__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Touch: gewone lijst met beeld ernaast. */
.fp-hpl--touch { list-style: none; margin: 0; padding: 0; }
.fp-hpl__kaart { display: flex; border-bottom: 1px solid var(--border); }
.fp-hpl__kaart-tekst { display: flex; flex-direction: column; gap: 0.25rem; width: 50%; padding: 1rem; }
.fp-hpl__kaart .fp-hpl__titel { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; }
.fp-hpl__kaart .fp-hpl__meta { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--muted-foreground); }
.fp-hpl__kaart .fp-hpl__tekst { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }
.fp-hpl__kaart-beeld { width: 50%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ── InfiniteSlider ─────────────────────────────────────────────────────── */

.fp-slider { position: relative; width: 100%; overflow: hidden; background: var(--background); color: var(--foreground); touch-action: none; }
.fp-slider__reeks { position: absolute; inset: 0; }
.fp-slider__kaart { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; overflow: hidden; will-change: transform; }
.fp-slider__kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); will-change: transform; }
.fp-slider__minimap { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display: none; gap: 1rem; height: 250px; }
@media (min-width: 900px) { .fp-slider__minimap { display: flex; } }
.fp-slider__minimap-beelden { position: relative; width: 160px; height: 250px; overflow: hidden; border-radius: var(--radius); }
.fp-slider__minimap-beeld { position: absolute; inset: 0 auto auto 0; width: 100%; height: 250px; overflow: hidden; will-change: transform; }
.fp-slider__minimap-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); will-change: transform; }
.fp-slider__minimap-info { position: relative; width: 200px; height: 250px; overflow: hidden; }
.fp-slider__info { position: absolute; inset: 0 auto auto 0; width: 100%; height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; will-change: transform; }
.fp-slider__info-rij { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--foreground) 80%, transparent); }
.fp-slider__info-rij:first-child { font-weight: 600; color: var(--foreground); }

/* ── TextConvergence ────────────────────────────────────────────────────── */

/* De hoge sectie; het podium plakt erin. De lengte komt van de component (vh). */
.fp-converge { position: relative; width: 100%; min-height: var(--fp-converge-lengte, 650vh); background: var(--background); color: var(--foreground); }
.fp-converge__podium { position: sticky; top: 0; display: flex; align-items: center; width: 100%; height: var(--fp-converge-podium, 100dvh); overflow: hidden; }
/* De regel: begint één podiumbreedte rechts (padding) en is zo breed als zijn tekst. */
.fp-converge__regel {
  position: relative; display: flex; width: max-content; margin: 0; padding-left: 100%;
  white-space: nowrap; font: inherit; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  font-size: clamp(2.25rem, 9vw, 8rem); will-change: transform;
}
.fp-converge__char { display: inline-block; will-change: transform; }
.fp-converge__spatie { display: inline-block; width: 0.35em; }

/* ── HoverStack ─────────────────────────────────────────────────────────── */

.fp-hstack { position: relative; width: var(--fp-hstack-w); height: var(--fp-hstack-h); margin: 0 auto; max-width: 100%; }
.fp-hstack__kaart {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between;
  width: var(--fp-hstack-kaart-w); height: var(--fp-hstack-kaart-h); padding: 1.5rem; box-sizing: border-box;
  background: var(--card); color: var(--card-foreground, var(--foreground));
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: calc(var(--radius) * 3);
  transform-origin: center; will-change: transform; cursor: default; user-select: none; outline: none;
  transition: transform var(--motion-smooth-duration) var(--motion-smooth), box-shadow var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-hstack__kaart[data-actief] { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent), 0 24px 48px -24px var(--shadow-overlay); }
.fp-hstack__kaart:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.fp-hstack__citaat { margin: 0; flex: 1; display: flex; align-items: center; max-width: 95%; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.03em; }
.fp-hstack__voet { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; }
.fp-hstack__nummer { font-variant-numeric: tabular-nums; opacity: 0.55; }
.fp-hstack__tag { opacity: 0.8; }
/* Touch: geen waaier maar een kolom kaarten. */
.fp-hstack--lijst { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; height: auto; }
.fp-hstack__kaart--los { position: relative; width: 100%; min-height: 62vw; height: auto; transform: none; transition: none; }

/* ── ShaderBackground ───────────────────────────────────────────────────── */

.fp-shader { display: block; width: 100%; height: 100%; }

/* ── BlurReveal ─────────────────────────────────────────────────────────── */

.fp-blurreveal { position: relative; overflow: hidden; width: 100%; height: 100%; color: var(--foreground); }
.fp-blurreveal__beeld { display: block; width: 100%; height: 100%; object-fit: var(--fp-blurreveal-fit, cover); }
/* Met aanwijzer: de foto zelf wordt de matte laag (iets vergroot tegen de blur-rand), het canvas tekent het scherpe spoor. */
.fp-blurreveal--actief .fp-blurreveal__beeld { filter: blur(var(--fp-blurreveal-blur, 22px)) saturate(0.9); transform: scale(1.06); }
.fp-blurreveal__doek { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── Select ─────────────────────────────────────────────────────────────── */

.fp-select { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; max-width: 20rem; }
.fp-select .fp-popover-anchor { display: block; }
.fp-select__knop { width: 100%; justify-content: space-between; gap: 0.5rem; font-weight: 400; }
.fp-select__knop svg { flex-shrink: 0; color: var(--muted-foreground); }
.fp-select__waarde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-select__waarde--leeg { color: var(--muted-foreground); }
.fp-select .fp-popover { width: 100%; padding: 0; }
.fp-select__lijst { list-style: none; margin: 0; padding: 0.25rem; max-height: 18rem; overflow-y: auto; outline: none; }
.fp-select__optie {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: calc(var(--radius) * 0.75);
  font-size: 0.875rem; cursor: pointer; user-select: none; color: var(--foreground);
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-select__optie[data-actief], .fp-select__optie:hover { background: var(--muted); }
.fp-select__optie[aria-disabled] { opacity: 0.5; pointer-events: none; }
.fp-select__vink { display: inline-flex; width: 1rem; justify-content: center; color: var(--primary); }
.fp-select__optie-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Textarea ───────────────────────────────────────────────────────────── */

.fp-textarea__veld {
  display: block; width: 100%; resize: vertical; line-height: 1.5; padding-top: 0.5rem; padding-bottom: 0.5rem;
  min-height: var(--fp-textarea-min, 3lh); max-height: var(--fp-textarea-max, 10lh);
  field-sizing: content; overflow: auto;
}
.fp-textarea__onder { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.fp-textarea__teller { flex-shrink: 0; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ── RadioFluid ─────────────────────────────────────────────────────────── */

.fp-fluid { position: relative; display: flex; flex-direction: column; width: 18rem; max-width: 100%; user-select: none; color: var(--foreground); }
.fp-fluid__rij { position: relative; z-index: 1; }
.fp-fluid__vlak { position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.75); pointer-events: none; }
.fp-fluid__vlak--gekozen { background: var(--muted); z-index: 0; }
.fp-fluid__vlak--hover { background: color-mix(in srgb, var(--muted) 55%, transparent); z-index: 0; }
.fp-fluid__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; appearance: none; }
.fp-fluid__input:disabled { cursor: default; }
.fp-fluid__label { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 0.625rem; pointer-events: none; }
.fp-fluid--compact .fp-fluid__label { min-height: 1.75rem; padding: 0 0.5rem; gap: 0.5rem; }
.fp-fluid__rondje {
  position: relative; display: inline-flex; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid var(--border);
  transition: border-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-fluid--compact .fp-fluid__rondje { width: 0.875rem; height: 0.875rem; }
.fp-fluid__rij[data-actief] .fp-fluid__rondje { border-color: var(--muted-foreground); }
.fp-fluid__rij[data-gekozen] .fp-fluid__rondje { border-color: transparent; }
.fp-fluid__stip { position: absolute; inset: 0; margin: auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--foreground); }
.fp-fluid--compact .fp-fluid__stip { width: 0.4375rem; height: 0.4375rem; }
.fp-fluid__tekst { display: flex; flex-direction: column; min-width: 0; }
.fp-fluid__naam { font-size: 0.875rem; color: var(--muted-foreground); transition: color var(--motion-instant-duration) var(--motion-instant); }
.fp-fluid__rij[data-actief] .fp-fluid__naam, .fp-fluid__rij[data-gekozen] .fp-fluid__naam { color: var(--foreground); }
.fp-fluid__rij[data-gekozen] .fp-fluid__naam { font-weight: 600; }
.fp-fluid__uitleg { font-size: 0.75rem; color: var(--muted-foreground); }
.fp-fluid__input:focus-visible + .fp-fluid__label { box-shadow: 0 0 0 2px var(--ring); border-radius: calc(var(--radius) * 0.75); }
.fp-fluid__input:disabled + .fp-fluid__label { opacity: 0.5; }

/* ── CouponReveal ───────────────────────────────────────────────────────── */

.fp-coupon {
  position: relative; display: block; width: 100%; max-width: 17.5rem; height: 3rem; padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--foreground); cursor: pointer; outline: none; overflow: visible; user-select: none;
  transition: transform var(--motion-instant-duration) var(--motion-instant);
}
.fp-coupon[data-pressed] { transform: scale(0.98); }
.fp-coupon:focus-visible .fp-coupon__onder { box-shadow: 0 0 0 2px var(--ring); }
/* Onderlaag: gestippelde rand in de primaire kleur; na kopiëren in succes. */
.fp-coupon__onder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
  border: 2px dashed var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
  transition: border-color var(--motion-default-duration) var(--motion-default), color var(--motion-default-duration) var(--motion-default), background-color var(--motion-default-duration) var(--motion-default);
}
.fp-coupon[data-gekopieerd] .fp-coupon__onder { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.fp-coupon__code-rij, .fp-coupon__achter {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.75rem; font-weight: 600; opacity: 0;
  transition: opacity var(--motion-default-duration) var(--motion-default);
}
.fp-coupon__code-rij[data-zichtbaar], .fp-coupon__achter[data-zichtbaar] { opacity: 1; }
.fp-coupon__code { padding: 0.125rem 0.5rem; border-radius: calc(var(--radius) * 0.5); font: inherit; font-size: 0.75rem; letter-spacing: 0.08em; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Stickerlaag: geknipt langs de vouw (clip-path is verf). */
.fp-coupon__sticker {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); pointer-events: none;
  background: var(--primary); color: var(--primary-foreground); font-weight: 600; box-shadow: 0 2px 6px var(--shadow-overlay);
  transition: clip-path var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-coupon__voor { padding: 0 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Het omgekrulde hoekje schuift met een transform mee met de vouw en verdwijnt na de pel. */
.fp-coupon__flap {
  position: absolute; top: -0.25rem; left: 0; width: 48px; height: 56px; pointer-events: none; color: var(--primary); transform-origin: bottom left;
  transform: translateX(var(--fp-coupon-flap-x, 0px));
  filter: drop-shadow(-3px 4px 5px var(--shadow-overlay));
  transition: transform var(--motion-smooth-duration) var(--motion-smooth), opacity var(--motion-default-duration) var(--motion-default);
}
.fp-coupon[data-gepeld] .fp-coupon__flap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fp-coupon__sticker, .fp-coupon__flap { transition: none; } }

/* ── LogoStrip ──────────────────────────────────────────────────────────── */

.fp-logos { width: 100%; padding: 3rem 1.5rem; box-sizing: border-box; background: var(--background); color: var(--foreground); }
.fp-logos__kicker { margin: 0 0 2rem; text-align: center; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.fp-logos__rij { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; }
@media (min-width: 40rem) { .fp-logos__rij { column-gap: 3.5rem; } }
.fp-logos__item { display: inline-flex; --fp-logo-h: 1.5rem; }
@media (min-width: 40rem) { .fp-logos__item { --fp-logo-h: 1.75rem; } }
.fp-logos__beeld, .fp-logos__item > svg {
  display: block; height: var(--fp-logo-h); width: auto; opacity: 0.5;
  transition: opacity var(--motion-instant-duration) var(--motion-instant), filter var(--motion-instant-duration) var(--motion-instant);
}
.fp-logos--grijs .fp-logos__beeld, .fp-logos--grijs .fp-logos__item > svg { filter: grayscale(1); }
.fp-logos--invert .fp-logos__beeld { filter: grayscale(1) invert(1); }
.fp-logos__item:hover .fp-logos__beeld, .fp-logos__item:hover > svg { opacity: 0.9; }

/* ── TraceTimeline ──────────────────────────────────────────────────────── */

/* De tijdas: --t (0–1) op de wortel drijft de afspeelkop, --p per rij de vulling — alleen transforms. */
.fp-trace {
  --fp-trace-pad: 0.75rem; --fp-trace-gutter: 6rem; --fp-trace-meta: 3.75rem;
  width: 100%; overflow: hidden; container-type: inline-size;
  background: var(--card); color: var(--card-foreground, var(--foreground)); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 1px 2px var(--shadow-overlay); font-variant-numeric: tabular-nums;
}
@container (min-width: 20rem) { .fp-trace { --fp-trace-gutter: 8.25rem; --fp-trace-meta: 5rem; } }
@container (min-width: 28rem) { .fp-trace { --fp-trace-gutter: var(--fp-trace-label-w, 200px); --fp-trace-meta: 9rem; } }
.fp-trace__kop { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.fp-trace__stip { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted-foreground) 40%, transparent); transition: background-color var(--motion-default-duration) var(--motion-default); }
.fp-trace[data-run="running"] .fp-trace__stip { background: var(--primary); }
.fp-trace__run { font-size: 0.8125rem; font-weight: 500; line-height: 1; }
.fp-trace__sub { font-size: 0.75rem; line-height: 1; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-trace__status { margin-left: auto; flex-shrink: 0; padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); }
.fp-trace__lichaam { position: relative; }
/* Eén baan voor liniaal, lijnen, kop en scrub: tussen de naamkolom en de resultaatkolom. */
.fp-trace__baan { position: absolute; left: calc(var(--fp-trace-gutter) + var(--fp-trace-pad)); right: calc(var(--fp-trace-meta) + var(--fp-trace-pad)); top: 0; bottom: 0; }
.fp-trace__liniaal { position: relative; height: 1.75rem; border-bottom: 1px solid var(--border); cursor: ew-resize; touch-action: none; user-select: none; }
@container (max-width: 24rem) { .fp-trace__liniaal, .fp-trace__baan--lijnen { display: none; } }
.fp-trace__tik { position: absolute; top: 0.5rem; left: var(--fp-trace-x); transform: translateX(-50%); font-size: 0.625rem; line-height: 1; color: var(--muted-foreground); }
.fp-trace__rijen { position: relative; padding: 0.25rem 0; }
.fp-trace__baan--lijnen { pointer-events: none; }
.fp-trace__lijn { position: absolute; top: 0; bottom: 0; left: var(--fp-trace-x); width: 1px; background: color-mix(in srgb, var(--border) 60%, transparent); }
.fp-trace__lijst { list-style: none; margin: 0; padding: 0; position: relative; }
.fp-trace__rij {
  position: relative; display: flex; align-items: center; height: var(--fp-trace-rij, 34px); padding: 0 var(--fp-trace-pad);
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-trace__rij[data-selected] { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.fp-trace__rij[data-state="running"] { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.fp-trace__gidsen { position: absolute; top: 0; bottom: 0; left: var(--fp-trace-pad); pointer-events: none; }
.fp-trace__gids { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); left: calc(var(--fp-trace-gids) * 12px + 11px); }
.fp-trace__naam {
  display: flex; align-items: center; gap: 0.375rem; width: var(--fp-trace-gutter); flex-shrink: 0; padding: 0.25rem 0.5rem 0.25rem calc(var(--fp-trace-diepte, 0) * 12px + 4px);
  border: 0; border-radius: calc(var(--radius) * 0.75); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none;
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-trace__naam:hover, .fp-trace__naam[data-pressed] { background: var(--muted); }
.fp-trace__naam:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.fp-trace__icoon { display: inline-flex; width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--muted-foreground); transition: color var(--motion-default-duration) var(--motion-default); }
.fp-trace__icoon svg { width: 100%; height: 100%; }
.fp-trace__rij[data-accent][data-state="done"] .fp-trace__icoon, .fp-trace__rij[data-accent][data-state="running"] .fp-trace__icoon { color: var(--primary); }
.fp-trace__rij[data-state="queued"] .fp-trace__icoon { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
.fp-trace__label { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--motion-default-duration) var(--motion-default); }
.fp-trace__rij[data-state="queued"] .fp-trace__label { color: var(--muted-foreground); }
.fp-trace__poging { flex-shrink: 0; padding: 0 0.25rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.5); font-size: 0.625rem; line-height: 1rem; color: var(--muted-foreground); }
.fp-trace__spoor { position: relative; flex: 1; height: 100%; }
.fp-trace__balk { position: absolute; top: 50%; height: 0.5rem; min-width: 3px; transform: translateY(-50%); overflow: hidden; border-radius: 999px; left: var(--fp-trace-links); width: var(--fp-trace-breedte); }
.fp-trace__spook { position: absolute; inset: 0; background: color-mix(in srgb, var(--foreground) 10%, transparent); }
.fp-trace__vulling { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 1)); background: color-mix(in srgb, var(--foreground) 50%, transparent); }
.fp-trace__rij[data-accent] .fp-trace__vulling { background: var(--primary); }
.fp-trace__rij[data-status="cached"] .fp-trace__vulling { background: color-mix(in srgb, var(--foreground) 25%, transparent); }
.fp-trace__rij[data-status="error"] .fp-trace__vulling { background: var(--danger); }
.fp-trace__resultaat { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; width: var(--fp-trace-meta); flex-shrink: 0; padding-left: 0.5rem; transition: opacity var(--motion-default-duration) var(--motion-default); }
.fp-trace__rij[data-state="queued"] .fp-trace__resultaat { opacity: 0; }
.fp-trace__fout-icoon { display: inline-flex; align-items: center; justify-content: center; width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 1.5px solid var(--danger); color: var(--danger); font-size: 0.625rem; font-weight: 700; line-height: 1; }
.fp-trace__cache-icoon { font-size: 0.6875rem; color: var(--muted-foreground); }
.fp-trace__meta { display: none; font-size: 0.6875rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 28rem) { .fp-trace__meta { display: inline; } }
.fp-trace__duur { flex-shrink: 0; font-size: 0.6875rem; color: color-mix(in srgb, var(--foreground) 70%, transparent); }
.fp-trace__rij[data-status="error"] .fp-trace__duur { color: var(--danger); }
/* Afspeelkop: één transform met --t */
.fp-trace__baan--kop { pointer-events: none; }
.fp-trace__kop-lijn { position: relative; height: 100%; width: 100%; transform: translateX(calc(var(--t, 0) * 100%)); }
.fp-trace__kop-lijn::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--primary) 70%, transparent); }
.fp-trace__kop-lijn::after { content: ""; position: absolute; top: 0; width: 0.375rem; height: 0.375rem; transform: translateX(-2.5px) rotate(45deg); background: var(--primary); }
.fp-trace__scrub { cursor: ew-resize; touch-action: none; user-select: none; }
/* Transport */
.fp-trace__transport { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); }
.fp-trace__play {
  position: relative; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground); cursor: pointer; outline: none; box-shadow: 0 1px 2px var(--shadow-overlay);
  transition: transform var(--motion-instant-duration) var(--motion-instant), box-shadow var(--motion-instant-duration) var(--motion-instant);
}
.fp-trace__play::before { content: ""; position: absolute; inset: -0.25rem; }
.fp-trace__play[data-pressed] { transform: scale(0.96); }
.fp-trace__play:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.fp-trace__rail { position: relative; flex: 1; height: 2.25rem; border-radius: var(--radius); cursor: ew-resize; touch-action: none; user-select: none; outline: none; }
.fp-trace__rail:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.fp-trace__rail-spoor { position: absolute; left: 0.375rem; right: 0.375rem; top: 50%; height: 0.25rem; transform: translateY(-50%); overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 10%, transparent); }
.fp-trace__rail-vulling { height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--t, 0)); background: var(--primary); }
.fp-trace__rail-knop-baan { position: absolute; top: 0; bottom: 0; left: 0.375rem; right: 0.375rem; pointer-events: none; }
.fp-trace__rail-knop-lijn { position: relative; height: 100%; width: 100%; transform: translateX(calc(var(--t, 0) * 100%)); }
.fp-trace__rail-knop { position: absolute; top: 50%; width: 0.75rem; height: 0.75rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--primary); border: 2px solid var(--card); box-shadow: 0 1px 2px var(--shadow-overlay); }
.fp-trace__klok { width: 7rem; flex-shrink: 0; text-align: right; font-size: 0.6875rem; color: var(--muted-foreground); }

/* ── DotGlobe ───────────────────────────────────────────────────────────── */

.fp-globe {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 100%; overflow: hidden; color: var(--foreground);
  --fp-globe-stip: var(--muted-foreground); --fp-globe-bol: color-mix(in srgb, var(--muted) 60%, transparent); --fp-globe-rand: var(--border);
}
.fp-globe__doek { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.fp-globe__doek:active { cursor: grabbing; }
.fp-globe__markers { position: absolute; inset: 0; pointer-events: none; }
.fp-globe__marker {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; outline: none;
  pointer-events: auto; will-change: transform, opacity; transition: opacity var(--motion-default-duration) var(--motion-default);
}
.fp-globe__stip { display: block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.fp-globe__marker img { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 2px 6px var(--shadow-overlay); }
.fp-globe__marker[data-pressed] .fp-globe__stip, .fp-globe__marker[data-pressed] img { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 45%, transparent); }
.fp-globe__marker:focus-visible .fp-globe__stip, .fp-globe__marker:focus-visible img { box-shadow: 0 0 0 3px var(--ring); }
.fp-globe__label { font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.375rem; border-radius: 999px; background: var(--card); color: var(--card-foreground, var(--foreground)); border: 1px solid var(--border); white-space: nowrap; }

/* ── LaptopMockup ───────────────────────────────────────────────────────── */

.fp-laptop {
  --fp-laptop-frame: var(--foreground);
  --fp-laptop-screen: var(--background);
  display: inline-block; box-sizing: border-box;
  /* De schaal is een transform; de layout-maat schaalt mee zodat er geen leeg vlak overblijft. */
  width: calc(var(--fp-laptop-voet-w) * var(--fp-laptop-scale, 1));
  height: calc((var(--fp-laptop-h) + var(--fp-laptop-voet-h)) * var(--fp-laptop-scale, 1));
}
.fp-laptop__lijst {
  position: relative; box-sizing: border-box;
  width: var(--fp-laptop-voet-w); height: calc(var(--fp-laptop-h) + var(--fp-laptop-voet-h));
  transform: scale(var(--fp-laptop-scale, 1)); transform-origin: top left;
  perspective: 2400px;
}
/* De klep: scharniert onderaan; open 1 = recht, 0 = dichtgeklapt (het scherm valt naar achteren). */
.fp-laptop__deksel {
  position: absolute; left: 50%; top: 0; box-sizing: border-box; overflow: hidden;
  width: var(--fp-laptop-w); height: var(--fp-laptop-h); padding: var(--fp-laptop-bezel);
  border-radius: var(--fp-laptop-r) var(--fp-laptop-r) 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fp-laptop-frame) 90%, var(--background)) 0%, var(--fp-laptop-frame) 45%, color-mix(in srgb, var(--fp-laptop-frame) 84%, var(--background)) 100%);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotateX(calc((1 - var(--fp-laptop-open, 1)) * -88deg));
  transition: transform var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-laptop--schaduw .fp-laptop__deksel { box-shadow: var(--shadow-overlay); }
.fp-laptop__scherm {
  position: relative; overflow: hidden; width: 100%; height: 100%;
  border-radius: calc(var(--fp-laptop-r) - var(--fp-laptop-bezel)) calc(var(--fp-laptop-r) - var(--fp-laptop-bezel)) 0 0;
  background: var(--fp-laptop-screen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-laptop-frame) 8%, transparent);
}
.fp-laptop__wallpaper { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; }
.fp-laptop__uitsparing {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  width: var(--fp-laptop-cut-w); height: var(--fp-laptop-cut-h);
  border-radius: 0 0 var(--fp-laptop-cut-r) var(--fp-laptop-cut-r);
  background: var(--fp-laptop-frame);
}
.fp-laptop__uitsparing::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--fp-laptop-frame) 60%, var(--background));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--background) 30%, transparent);
}
.fp-laptop__inhoud { position: absolute; inset: var(--fp-laptop-top) 0 0 0; overflow: hidden; z-index: 1; display: flex; flex-direction: column; }
/* De voet: breder dan de klep, dunne band met scharnier bovenaan en een lichte vingerinkeping in het midden. */
.fp-laptop__voet {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--fp-laptop-voet-h); overflow: hidden;
  border-radius: 0 0 calc(var(--fp-laptop-voet-h) * 0.7) calc(var(--fp-laptop-voet-h) * 0.7) / 0 0 100% 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fp-laptop-frame) 78%, var(--background)) 0%, color-mix(in srgb, var(--fp-laptop-frame) 92%, var(--background)) 55%, var(--fp-laptop-frame) 100%);
}
.fp-laptop--schaduw .fp-laptop__voet { box-shadow: var(--shadow-overlay); }
.fp-laptop__scharnier {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(var(--fp-laptop-w) + var(--fp-laptop-bezel) * 4); height: var(--fp-laptop-scharnier);
  background: color-mix(in srgb, var(--fp-laptop-frame) 70%, var(--background));
}
.fp-laptop__inkeping {
  position: absolute; top: var(--fp-laptop-scharnier); left: 50%; transform: translateX(-50%);
  width: 11%; height: 6px; border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--fp-laptop-frame) 55%, var(--background));
}

/* ── BrowserMockup ──────────────────────────────────────────────────────── */

.fp-browser {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 2);
  background: var(--card); color: var(--card-foreground, var(--foreground));
}
.fp-browser--schaduw { box-shadow: var(--shadow-overlay); }
.fp-browser__balk {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem;
  background: var(--muted); border-bottom: 1px solid var(--border);
}
.fp-browser__stippen { display: inline-flex; gap: 0.4rem; flex: 0 0 auto; }
.fp-browser__stip { display: block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.fp-browser__stip--1 { background: var(--danger); }
.fp-browser__stip--2 { background: var(--warning); }
.fp-browser__stip--3 { background: var(--success); }
.fp-browser--neutraal .fp-browser__stip { background: color-mix(in srgb, var(--foreground) 22%, transparent); }
.fp-browser__knoppen { display: inline-flex; gap: 0.6rem; color: var(--muted-foreground); flex: 0 0 auto; }
.fp-browser__adres {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  height: 1.5rem; max-width: 28rem; margin: 0 auto; padding: 0 0.75rem; box-sizing: border-box;
  border-radius: calc(var(--radius) * 0.75); background: color-mix(in srgb, var(--foreground) 7%, transparent);
  font: inherit; font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden;
}
.fp-browser__url { overflow: hidden; text-overflow: ellipsis; }
.fp-browser__herlaad { position: absolute; right: 0.5rem; display: inline-flex; }
.fp-browser__rechts { width: 1rem; flex: 0 0 auto; }
.fp-browser__vlak { position: relative; aspect-ratio: var(--fp-browser-ratio, 16 / 10); overflow: hidden; background: var(--background); }
.fp-browser__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.fp-browser--minimal .fp-browser__adres { justify-content: flex-start; }
@media (max-width: 30rem) {
  .fp-browser__knoppen { display: none; }
}

/* ── VideoPlayer ────────────────────────────────────────────────────────── */

.fp-video {
  position: relative; width: 100%; overflow: hidden; box-sizing: border-box;
  border-radius: calc(var(--radius) * 2); background: var(--foreground); color: var(--card-foreground, var(--foreground));
  outline: none;
}
.fp-video:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring, var(--info)); }
.fp-video__film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }
/* Grote knop in het midden: glas op de kaartkleur, verdwijnt met de balk. */
.fp-video__midden {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: opacity var(--motion-default-duration) var(--motion-default);
}
.fp-video__midden .fp-video__knop { pointer-events: auto; }
.fp-video__knop {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
  appearance: none; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer;
  font-size: 1rem; transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-video__knop:hover { background: color-mix(in srgb, var(--card-foreground, var(--foreground)) 10%, transparent); }
.fp-video__knop[data-pressed] { background: color-mix(in srgb, var(--card-foreground, var(--foreground)) 18%, transparent); }
.fp-video__knop:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-video__knop--groot {
  width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.5rem;
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-overlay);
}
.fp-video__knop--groot:hover { background: color-mix(in srgb, var(--card) 85%, transparent); }
/* De balk: glas op --card, onderin; vervaagt na drie seconden spelen. */
.fp-video__balk {
  position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.35rem; padding: 0.6rem 0.75rem; box-sizing: border-box;
  border-radius: calc(var(--radius) * 1.5); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity var(--motion-default-duration) var(--motion-default), transform var(--motion-default-duration) var(--motion-default);
}
.fp-video--verborgen .fp-video__balk { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }
.fp-video--verborgen .fp-video__midden { opacity: 0; }
.fp-video--verborgen { cursor: none; }
.fp-video__tijdlijn { display: flex; align-items: center; gap: 0.6rem; }
.fp-video__tijd { font: inherit; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted-foreground); min-width: 2.5rem; text-align: center; }
.fp-video__spoor { position: relative; flex: 1 1 auto; height: 0.25rem; border-radius: 999px; background: color-mix(in srgb, var(--card-foreground, var(--foreground)) 18%, transparent); }
.fp-video__vulling { position: absolute; inset: 0; border-radius: 999px; background: var(--primary); transform-origin: left center; transform: scaleX(var(--fp-video-p, 0)); }
.fp-video__vulling--volume { transform: scaleX(var(--fp-video-vol, 1)); }
/* De native range ligt onzichtbaar over het spoor: muis, vinger en toetsenbord werken gewoon. */
.fp-video__range { position: absolute; inset: -0.5rem 0; width: 100%; height: 1.25rem; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.fp-video__range::-webkit-slider-thumb { appearance: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); box-shadow: var(--shadow-overlay); }
.fp-video__range::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); }
.fp-video__range:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; border-radius: 999px; }
.fp-video__knoppen { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fp-video__groep { display: inline-flex; align-items: center; gap: 0.25rem; }
.fp-video__volume { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.25rem; }
.fp-video__spoor--volume { width: 4.5rem; flex: 0 0 auto; }
@media (max-width: 30rem) {
  .fp-video__spoor--volume { display: none; }
  .fp-video__balk { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
}

/* ── VoiceBubble ────────────────────────────────────────────────────────── */

.fp-voice {
  --fp-voice-bel: var(--card);
  --fp-voice-inkt: var(--card-foreground, var(--foreground));
  display: inline-flex; align-items: center; gap: 0.75rem; max-width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: calc(var(--radius) * 2.5);
  background: var(--fp-voice-bel); color: var(--fp-voice-inkt);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); box-shadow: var(--shadow-overlay);
}
.fp-voice--eigen { --fp-voice-bel: var(--primary); --fp-voice-inkt: var(--primary-foreground); border-color: transparent; }
.fp-voice__knop {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0;
  appearance: none; border: 1px solid color-mix(in srgb, var(--fp-voice-inkt) 20%, transparent); border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--fp-voice-inkt) 8%, transparent); color: inherit; font-size: 0.9rem;
  transition: background-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-voice__knop:hover { background: color-mix(in srgb, var(--fp-voice-inkt) 14%, transparent); }
.fp-voice__knop[data-pressed] { background: color-mix(in srgb, var(--fp-voice-inkt) 22%, transparent); }
.fp-voice__knop:focus-visible, .fp-voice__golf:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
/* De golf: twee identieke lagen streepjes; de bovenste (vol) wordt met een clip op de voortgang gezet. */
.fp-voice__golf { position: relative; width: 9.5rem; height: 1.5rem; flex: 1 1 auto; cursor: pointer; touch-action: none; border-radius: var(--radius); }
.fp-voice__streepjes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 1px; }
.fp-voice__streepjes i { display: block; width: 2px; flex: 0 0 2px; height: calc(var(--h, 0.5) * 100%); border-radius: 999px; background: color-mix(in srgb, var(--fp-voice-inkt) 32%, transparent); }
.fp-voice__streepjes--vol { clip-path: inset(0 calc((1 - var(--fp-voice-p, 0)) * 100%) 0 0); }
.fp-voice__streepjes--vol i { background: var(--fp-voice-inkt); }
.fp-voice__duur { font: inherit; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--fp-voice-inkt) 75%, transparent); flex: 0 0 auto; }

/* ── AvatarCircles ──────────────────────────────────────────────────────── */

.fp-avatars { display: inline-flex; align-items: center; }
.fp-avatars__portret, .fp-avatars__meer {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
  width: var(--fp-avatars-maat, 2.5rem); height: var(--fp-avatars-maat, 2.5rem); border-radius: 50%;
  border: 2px solid var(--background); object-fit: cover; background: var(--muted); color: var(--muted-foreground);
  font: inherit; font-size: calc(var(--fp-avatars-maat, 2.5rem) * 0.32); font-weight: 600; letter-spacing: 0.02em;
}
.fp-avatars > * + * { margin-left: calc(var(--fp-avatars-maat, 2.5rem) * var(--fp-avatars-overlap, 0.4) * -1); }
.fp-avatars--grijs .fp-avatars__portret { filter: grayscale(1); transition: filter var(--motion-instant-duration) var(--motion-instant); }
.fp-avatars--grijs:hover .fp-avatars__portret { filter: none; }
.fp-avatars__meer { position: relative; z-index: 1; background: var(--foreground); color: var(--background); text-decoration: none; }
.fp-avatars__meer--knop { appearance: none; padding: 0; cursor: pointer; transition: background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-avatars__meer--knop:hover { background: color-mix(in srgb, var(--foreground) 80%, var(--background)); }
.fp-avatars__meer--knop[data-pressed] { background: color-mix(in srgb, var(--foreground) 65%, var(--background)); }
.fp-avatars__meer--knop:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }

/* ── LogoGrid ───────────────────────────────────────────────────────────── */

/* Het raster zelf is de rand: --border als achtergrond, 1px naden tussen tegels op --background. */
.fp-logogrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; max-width: 48rem; margin: 0 auto; box-sizing: border-box;
  padding: 1px; border-radius: calc(var(--radius) * 1.5); background: var(--border); box-shadow: var(--shadow-overlay); overflow: hidden;
}
@media (min-width: 48rem) { .fp-logogrid { grid-template-columns: repeat(var(--fp-logogrid-kolommen, 4), minmax(0, 1fr)); } }
.fp-logogrid__tegel { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--background); color: var(--foreground); }
.fp-logogrid__tegel:first-child { border-top-left-radius: calc(var(--radius) * 1.5 - 1px); }
.fp-logogrid__tegel:last-child { border-bottom-right-radius: calc(var(--radius) * 1.5 - 1px); }
.fp-logogrid__logo { display: block; height: var(--fp-logogrid-h, 1.25rem); width: auto; max-width: 100%; user-select: none; pointer-events: none; }
@media (min-width: 48rem) { .fp-logogrid__logo { height: var(--fp-logogrid-h, 1.5rem); } }
.fp-logogrid--grijs .fp-logogrid__tegel { filter: grayscale(1); opacity: 0.7; transition: filter var(--motion-instant-duration) var(--motion-instant), opacity var(--motion-instant-duration) var(--motion-instant); }
.fp-logogrid--grijs .fp-logogrid__tegel:hover { filter: none; opacity: 1; }
.fp-logogrid--invert .fp-logogrid__logo { filter: brightness(0) invert(1); }

/* ── DotPattern ─────────────────────────────────────────────────────────── */

.fp-dots {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  fill: var(--fp-dots-kleur, currentColor); opacity: var(--fp-dots-dekking, 0.35);
}
.fp-dots--vervaagd {
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
}

/* ── TextRotate ─────────────────────────────────────────────────────────── */

.fp-rotate { display: inline-flex; flex-wrap: wrap; white-space: pre-wrap; vertical-align: bottom; }
.fp-rotate__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp-rotate__tekst { display: inline-flex; flex-wrap: wrap; }
.fp-rotate--regels .fp-rotate__tekst { flex-direction: column; width: 100%; }
.fp-rotate__woord { display: inline-flex; overflow: hidden; padding-bottom: 0.08em; }
.fp-rotate__teken { display: inline-block; }
.fp-rotate__spatie { white-space: pre; }

/* ── ScrollConverge ─────────────────────────────────────────────────────── */

.fp-converge { position: relative; width: 100%; min-height: var(--fp-converge-lengte, 210vh); background: var(--background); color: var(--foreground); }
.fp-converge__podium {
  position: sticky; top: 0; height: var(--fp-converge-podium, 100dvh); overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vw; padding: 2vw;
}
.fp-converge__kop { margin: 0; font: inherit; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; text-align: center; }
.fp-converge__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; max-width: 56rem; perspective: 500px; }
.fp-converge--text .fp-converge__rij { gap: 0; font: inherit; font-weight: 700; font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--primary); text-align: center; }
.fp-converge__teken { display: inline-block; white-space: pre; }
.fp-converge__icoon { display: inline-flex; width: 4rem; height: 4rem; flex: 0 0 auto; transform-origin: center; }
.fp-converge__icoon > * { width: 100%; height: 100%; object-fit: contain; }

/* ── HoverPreview ───────────────────────────────────────────────────────── */

.fp-hpreview { position: relative; }
.fp-hpreview__link { position: relative; display: inline-block; color: var(--foreground); font-weight: 700; cursor: pointer; text-decoration: none; }
.fp-hpreview__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-default-duration) var(--motion-default);
}
.fp-hpreview__link:hover::after, .fp-hpreview__link:focus-visible::after { transform: scaleX(1); }
.fp-hpreview__link:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 3px; border-radius: var(--radius); }
/* De kaart: vast aan het venster, positie via translate (per muisbeweging). */
.fp-hpreview__kaart {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0;
  transition: opacity var(--motion-pop-duration) var(--motion-pop);
}
.fp-hpreview__kaart--open { opacity: 1; }
.fp-hpreview__binnen {
  overflow: hidden; padding: 0.5rem; border-radius: calc(var(--radius) * 2);
  background: var(--card); color: var(--card-foreground, var(--foreground));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); box-shadow: var(--shadow-overlay);
  transform: translateY(10px) scale(0.95); transition: transform var(--motion-pop-duration) var(--motion-pop);
}
.fp-hpreview__kaart--open .fp-hpreview__binnen { transform: none; }
.fp-hpreview__binnen img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) * 1.25); }
.fp-hpreview__titel { padding: 0.75rem 0.5rem 0.25rem; font: inherit; font-size: 0.85rem; font-weight: 600; }
.fp-hpreview__sub { padding: 0 0.5rem 0.5rem; font: inherit; font-size: 0.75rem; color: var(--muted-foreground); }

/* ── TiltCard ───────────────────────────────────────────────────────────── */

.fp-tilt {
  --fp-tilt-x: 50%; --fp-tilt-y: 50%; --fp-tilt-rx: 0deg; --fp-tilt-ry: 0deg; --fp-tilt-s: 1;
  position: relative; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transform: perspective(1000px) rotateX(var(--fp-tilt-rx)) rotateY(var(--fp-tilt-ry)) scale(var(--fp-tilt-s));
  transition: transform var(--motion-smooth-duration) var(--motion-smooth);
}
/* Twee lagen licht die de aanwijzer volgen: een brede in de merkkleur (overlay), een kleine felle. */
.fp-tilt__gloed, .fp-tilt__vlek { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--motion-default-duration) var(--motion-default); }
.fp-tilt__gloed { z-index: 20; mix-blend-mode: overlay; background: radial-gradient(circle at var(--fp-tilt-x) var(--fp-tilt-y), color-mix(in srgb, var(--primary) 35%, transparent) 0%, transparent 80%); }
.fp-tilt__vlek { z-index: 21; background: radial-gradient(circle 90px at var(--fp-tilt-x) var(--fp-tilt-y), color-mix(in srgb, var(--background) 12%, transparent), transparent 70%); }
.fp-tilt:hover .fp-tilt__gloed, .fp-tilt[data-touch] .fp-tilt__gloed, .fp-tilt:hover .fp-tilt__vlek, .fp-tilt[data-touch] .fp-tilt__vlek { opacity: 1; }

/* ── GlowCard ───────────────────────────────────────────────────────────── */

.fp-glow {
  --fp-glow-kleur: var(--primary);
  --fp-glow-x: -999px; --fp-glow-y: -999px;
  position: relative; box-sizing: border-box;
  border: var(--fp-glow-rand, 2px) solid color-mix(in srgb, var(--foreground) 12%, transparent); border-radius: calc(var(--radius) * 2);
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--card-foreground, var(--foreground));
  box-shadow: var(--shadow-overlay); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  /* Zachte vlek in de merkkleur die de aanwijzer volgt, ook naast de kaart. */
  background-image: radial-gradient(var(--fp-glow-maat, 200px) var(--fp-glow-maat, 200px) at var(--fp-glow-x) var(--fp-glow-y), color-mix(in srgb, var(--fp-glow-kleur) 12%, transparent), transparent);
}
/* De rand: alleen de ring licht op (masker padding-box ⊕ border-box), met een blur-echo eromheen. */
.fp-glow__rand, .fp-glow__lijn {
  content: ""; position: absolute; inset: calc(var(--fp-glow-rand, 2px) * -1); pointer-events: none;
  border: var(--fp-glow-rand, 2px) solid transparent; border-radius: calc(var(--radius) * 2);
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(black, black);
  mask: linear-gradient(transparent, transparent), linear-gradient(black, black);
  -webkit-mask-clip: padding-box, border-box; mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor; mask-composite: intersect;
}
.fp-glow__rand { background-image: radial-gradient(calc(var(--fp-glow-maat, 200px) * 0.75) calc(var(--fp-glow-maat, 200px) * 0.75) at calc(var(--fp-glow-x) + var(--fp-glow-rand, 2px)) calc(var(--fp-glow-y) + var(--fp-glow-rand, 2px)), var(--fp-glow-kleur), transparent 100%); filter: brightness(1.6); }
.fp-glow__lijn { background-image: radial-gradient(calc(var(--fp-glow-maat, 200px) * 0.5) calc(var(--fp-glow-maat, 200px) * 0.5) at calc(var(--fp-glow-x) + var(--fp-glow-rand, 2px)) calc(var(--fp-glow-y) + var(--fp-glow-rand, 2px)), var(--background), transparent 100%); }
.fp-glow__inhoud { position: relative; height: 100%; }

/* ── MagneticButton ─────────────────────────────────────────────────────── */

.fp-magnet {
  --fp-magnet-gloed: linear-gradient(90deg, var(--primary), var(--info), var(--primary));
  --fp-magnet-x: 50%; --fp-magnet-y: 50%;
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  appearance: none; cursor: pointer; user-select: none; box-sizing: border-box;
  font: inherit; font-weight: 600; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--foreground) 92%, var(--background)); color: var(--background);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: calc(var(--radius) * 2);
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 25%, transparent);
  transition: box-shadow var(--motion-default-duration) var(--motion-default), opacity var(--motion-instant-duration) var(--motion-instant);
}
.fp-magnet[data-hover] { box-shadow: 0 0 35px color-mix(in srgb, var(--primary) 45%, transparent); }
.fp-magnet:disabled { opacity: 0.5; cursor: not-allowed; }
.fp-magnet:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-magnet--sm { height: 2.25rem; padding: 0 1rem; font-size: 0.75rem; gap: 0.375rem; border-radius: calc(var(--radius) * 1.5); }
.fp-magnet--md { height: 2.75rem; padding: 0 1.5rem; font-size: 0.875rem; gap: 0.5rem; }
.fp-magnet--lg { height: 3.25rem; padding: 0 2rem; font-size: 1rem; gap: 0.625rem; }
.fp-magnet--xl { height: 4rem; padding: 0 2.5rem; font-size: 1.125rem; gap: 0.75rem; border-radius: calc(var(--radius) * 3); }
/* Lagen: lichtvlek, draaiende lichtrand (ambient), donkere kern, spot, rimpels, inhoud. */
.fp-magnet__vlek { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--motion-smooth-duration) var(--motion-smooth); background: radial-gradient(var(--fp-magnet-straal, 160px) circle at var(--fp-magnet-x) var(--fp-magnet-y), color-mix(in srgb, var(--background) 18%, transparent), transparent 80%); }
.fp-magnet__ring { position: absolute; inset: -150%; z-index: 0; pointer-events: none; opacity: 0; filter: blur(4px); transition: opacity var(--motion-smooth-duration) var(--motion-smooth); }
.fp-magnet__ring-kleur { display: block; width: 100%; height: 100%; background: var(--fp-magnet-gloed); animation: fp-magnet-draai calc(var(--motion-smooth-duration) * 8) linear infinite; }
@keyframes fp-magnet-draai { to { transform: rotate(360deg); } }
.fp-magnet__kern { position: absolute; inset: 1px; z-index: 1; border-radius: inherit; background: color-mix(in srgb, var(--foreground) 95%, var(--background)); pointer-events: none; }
.fp-magnet__spot { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--motion-default-duration) var(--motion-default); background: radial-gradient(120px circle at var(--fp-magnet-x) var(--fp-magnet-y), color-mix(in srgb, var(--background) 40%, transparent), transparent 70%); }
.fp-magnet[data-hover] .fp-magnet__vlek { opacity: 1; }
.fp-magnet[data-hover] .fp-magnet__ring { opacity: 0.6; }
.fp-magnet[data-hover] .fp-magnet__spot { opacity: 0.3; }
.fp-magnet__rimpels { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.fp-magnet__rimpel { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--background) 80%, transparent) 0%, transparent 70%); }
.fp-magnet__inhoud { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.fp-magnet__icoon { display: inline-flex; flex: 0 0 auto; }
.fp-magnet__spinner { animation: fp-magnet-draai calc(var(--motion-smooth-duration) * 2) linear infinite; }
@media (prefers-reduced-motion: reduce) { .fp-magnet__ring-kleur { animation: none; } }

/* ── StepTimeline ───────────────────────────────────────────────────────── */

.fp-steps { display: grid; list-style: none; margin: 0; padding: 0; color: var(--foreground); }
.fp-steps__item { display: grid; align-items: center; column-gap: 0.5rem; color: var(--muted-foreground); }
.fp-steps[data-positions="left"] .fp-steps__item { grid-template-columns: 0 min-content 1fr; }
.fp-steps[data-positions="right"] .fp-steps__item { grid-template-columns: 1fr min-content; }
.fp-steps[data-positions="center"] .fp-steps__item { grid-template-columns: 1fr min-content 1fr; }
.fp-steps__item[data-status="done"] { color: var(--primary); }
.fp-steps__stip { grid-column: 2 / 3; grid-row: 1 / 1; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; color: inherit; }
.fp-steps__stip[data-status="current"] .fp-steps__kern { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; }
.fp-steps__stip[data-status="done"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.fp-steps__stip[data-status="error"] { background: var(--danger); border-color: var(--danger); color: var(--background); }
.fp-steps__inhoud { grid-row: 2 / 2; padding-bottom: 2rem; font: inherit; font-size: 0.9375rem; line-height: 1.5; color: var(--muted-foreground); }
.fp-steps__inhoud[data-side="right"] { grid-column: 3 / 4; margin-right: auto; text-align: left; }
.fp-steps__inhoud[data-side="left"] { grid-column: 1 / 2; margin-left: auto; text-align: right; }
.fp-steps__kop { grid-row: 1 / 1; margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
.fp-steps__kop[data-side="right"] { grid-column: 3 / 4; margin-right: auto; text-align: left; }
.fp-steps__kop[data-side="left"] { grid-column: 1 / 2; margin-left: auto; text-align: right; }
.fp-steps__kop[data-variant="primary"] { font-size: 1rem; font-weight: 500; color: var(--primary); }
.fp-steps__kop[data-variant="secondary"] { font-size: 0.875rem; font-weight: 300; color: var(--muted-foreground); }
.fp-steps__kop[data-tone="danger"] { color: var(--danger); }
.fp-steps__lijn { grid-column: 2 / 3; grid-row: 2 / 2; width: 2px; min-height: 4rem; height: 100%; margin: 0 auto; border: 0; border-radius: 999px; background: var(--muted); }
.fp-steps__lijn[data-done] { background: var(--primary); }

/* ── OrderTracking ──────────────────────────────────────────────────────── */

.fp-order { width: 100%; max-width: 28rem; color: var(--foreground); }
.fp-order__lijst { list-style: none; margin: 0; padding: 0; }
.fp-order__stap { display: flex; gap: 0.75rem; }
.fp-order__spoor { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.fp-order__stip { flex: 0 0 auto; color: var(--muted-foreground); }
.fp-order__stap[data-done] .fp-order__stip { color: color-mix(in srgb, var(--primary) 70%, transparent); }
.fp-order__lijn { flex: 1 1 auto; width: 1.5px; background: var(--muted-foreground); }
.fp-order__stap[data-next-done] .fp-order__lijn { background: color-mix(in srgb, var(--primary) 70%, transparent); }
.fp-order__tekst { display: flex; flex-direction: column; padding-bottom: 1.5rem; }
.fp-order__stap:last-child .fp-order__tekst { padding-bottom: 0; }
.fp-order__naam { font: inherit; font-size: 0.875rem; font-weight: 500; }
.fp-order__tijd { font: inherit; font-size: 0.875rem; color: var(--muted-foreground); }
.fp-order__leeg { margin: 0; font: inherit; font-size: 0.875rem; color: color-mix(in srgb, var(--foreground) 80%, transparent); }

/* ── FieldLayout ────────────────────────────────────────────────────────── */

.fp-fieldset { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0; border: 0; min-width: 0; color: var(--foreground); }
.fp-fieldlegend { margin: 0 0 0.75rem; padding: 0; font: inherit; font-weight: 500; }
.fp-fieldlegend[data-variant="legend"] { font-size: 1rem; }
.fp-fieldlegend[data-variant="label"] { font-size: 0.875rem; }
.fp-fieldgroup { display: flex; flex-direction: column; gap: 1.75rem; width: 100%; container-type: inline-size; }
.fp-fieldgroup .fp-fieldgroup { gap: 1rem; }
.fp-fieldgroup--dicht { gap: 0.75rem; }
.fp-fieldrow { display: flex; gap: 0.75rem; width: 100%; }
.fp-fieldrow[data-orientation="vertical"] { flex-direction: column; }
.fp-fieldrow[data-orientation="vertical"] > * { width: 100%; }
.fp-fieldrow[data-orientation="horizontal"] { flex-direction: row; align-items: center; }
.fp-fieldrow[data-orientation="horizontal"] > .fp-fieldlabel { flex: 1 1 auto; }
.fp-fieldrow[data-orientation="horizontal"]:has(> .fp-fieldcontent) { align-items: flex-start; }
.fp-fieldrow[data-orientation="responsive"] { flex-direction: column; }
.fp-fieldrow[data-orientation="responsive"] > * { width: 100%; }
@container (min-width: 28rem) {
  .fp-fieldrow[data-orientation="responsive"] { flex-direction: row; align-items: center; }
  .fp-fieldrow[data-orientation="responsive"] > * { width: auto; }
  .fp-fieldrow[data-orientation="responsive"] > .fp-fieldlabel { flex: 1 1 auto; }
}
.fp-fieldrow[data-invalid] { color: var(--danger); }
.fp-fieldrow[data-disabled] .fp-fieldlabel, .fp-fieldrow[data-disabled] .fp-fieldtitle { opacity: 0.5; }
.fp-fieldcontent { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.375rem; line-height: 1.4; }
.fp-fieldlabel { display: flex; gap: 0.5rem; width: fit-content; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.4; cursor: pointer; }
.fp-fieldlabel--kaart { width: 100%; flex-direction: column; padding: 1rem; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); transition: background-color var(--motion-instant-duration) var(--motion-instant), border-color var(--motion-instant-duration) var(--motion-instant); }
.fp-fieldlabel--kaart:has(:checked) { background: color-mix(in srgb, var(--primary) 6%, transparent); border-color: var(--primary); }
.fp-fieldtitle { display: flex; align-items: center; gap: 0.5rem; width: fit-content; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.fp-fielddescription { margin: 0; font: inherit; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--muted-foreground); }
.fp-fielddescription a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.fp-fielddescription a:hover { color: var(--primary); }
.fp-fieldseparator { position: relative; display: flex; align-items: center; justify-content: center; height: 1.25rem; margin: -0.5rem 0; font: inherit; font-size: 0.875rem; }
.fp-fieldseparator__lijn { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.fp-fieldseparator__tekst { position: relative; padding: 0 0.5rem; background: var(--background); color: var(--muted-foreground); }
.fp-fielderror { font: inherit; font-size: 0.875rem; color: var(--danger); }
.fp-fielderror__lijst { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
/* Vinkjes van het project (native) kleuren mee. */
.fp-fieldrow input[type="checkbox"], .fp-fieldrow input[type="radio"] { accent-color: var(--primary); width: 1rem; height: 1rem; margin: 0.125rem 0 0; flex: 0 0 auto; }

/* ── StepIndicator ──────────────────────────────────────────────────────── */

.fp-stepper { width: 100%; color: var(--foreground); }
.fp-stepper__lijst { list-style: none; margin: 0; padding: 0; display: flex; }
.fp-stepper--horizontal .fp-stepper__lijst { flex-direction: row; align-items: center; justify-content: space-between; }
.fp-stepper--vertical .fp-stepper__lijst { flex-direction: column; gap: 1rem; }
.fp-stepper__item { position: relative; display: flex; align-items: center; }
.fp-stepper--horizontal .fp-stepper__item:not(:last-child) { flex: 1 1 0; }
.fp-stepper--vertical .fp-stepper__item { align-items: flex-start; }
.fp-stepper__trigger { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0; appearance: none; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); font: inherit; }
.fp-stepper__trigger:disabled { cursor: default; }
.fp-stepper__trigger:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 3px; }
.fp-stepper__rondje {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--border); background: var(--muted); color: var(--muted-foreground); font: inherit; font-size: 0.875rem; font-weight: 600;
  transition: background-color var(--motion-instant-duration) var(--motion-instant), border-color var(--motion-instant-duration) var(--motion-instant), color var(--motion-instant-duration) var(--motion-instant);
}
.fp-stepper__item[data-state="complete"] .fp-stepper__rondje, .fp-stepper__item[data-state="current"] .fp-stepper__rondje { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.fp-stepper__trigger[data-pressed] .fp-stepper__rondje { transform: scale(0.94); }
.fp-stepper__tekst { display: flex; flex-direction: column; }
.fp-stepper__titel { font: inherit; font-size: 0.875rem; font-weight: 600; }
.fp-stepper__sub { font: inherit; font-size: 0.75rem; color: var(--muted-foreground); }
.fp-stepper__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp-stepper__lijn { background: var(--border); }
.fp-stepper--horizontal .fp-stepper__lijn { flex: 1 1 auto; height: 2px; margin: 0 0.75rem; }
.fp-stepper--horizontal.fp-stepper--labels .fp-stepper__lijn { align-self: flex-start; margin-top: calc(1rem - 1px); }
.fp-stepper--vertical .fp-stepper__lijn { position: absolute; left: calc(1rem - 1px); top: 2rem; width: 2px; height: calc(100% + 1rem - 2rem); }
.fp-stepper__item[data-state="complete"] .fp-stepper__lijn { background: var(--primary); }

/* ── ProgressRing ───────────────────────────────────────────────────────── */

.fp-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); }
.fp-ring__svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.fp-ring__svg--boog { transform: none; }
.fp-ring__spoor { stroke: var(--muted); }
.fp-ring__vulling { stroke: var(--fp-ring-kleur, var(--primary)); transition: stroke-dashoffset var(--motion-default-duration) var(--motion-default); }
.fp-ring__inhoud { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 0.875rem; font-weight: 500; text-align: center; }
.fp-ring__getal { font: inherit; font-size: 1.125rem; font-weight: 700; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.fp-tabs { color: var(--foreground); }
.fp-tabs__lijst { display: flex; align-items: center; flex-shrink: 0; gap: 0.5rem; }
.fp-tabs__lijst[data-variant="default"] { padding: 0.25rem; background: var(--muted); border-radius: var(--radius); }
.fp-tabs__lijst[data-variant="default"][data-size="lg"] { padding: 0.375rem; gap: 0.625rem; }
.fp-tabs__lijst[data-variant="default"][data-size="sm"], .fp-tabs__lijst[data-variant="default"][data-size="xs"] { gap: 0.25rem; }
.fp-tabs__lijst[data-variant="line"] { border-bottom: 1px solid var(--border); gap: 2rem; }
.fp-tabs__lijst[data-variant="line"][data-size="sm"], .fp-tabs__lijst[data-variant="line"][data-size="xs"] { gap: 1rem; }
.fp-tabs__lijst[data-shape="pill"], .fp-tabs__lijst[data-shape="pill"] .fp-tabs__tab { border-radius: 999px; }
.fp-tabs__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-shrink: 0; white-space: nowrap; cursor: pointer;
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  padding: 0.375rem 0.75rem; border-radius: calc(var(--radius) * 0.75);
  transition: color var(--motion-instant-duration) var(--motion-instant), background-color var(--motion-instant-duration) var(--motion-instant), box-shadow var(--motion-instant-duration) var(--motion-instant), border-color var(--motion-instant-duration) var(--motion-instant);
}
.fp-tabs__tab svg { flex-shrink: 0; width: 1em; height: 1em; color: var(--muted-foreground); }
.fp-tabs__tab:hover, .fp-tabs__tab:hover svg, .fp-tabs__tab[data-state="active"] svg { color: var(--primary); }
.fp-tabs__tab:disabled { opacity: 0.5; pointer-events: none; }
.fp-tabs__tab:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-tabs__lijst[data-size="lg"] .fp-tabs__tab { padding: 0.625rem 1rem; }
.fp-tabs__lijst[data-size="sm"] .fp-tabs__tab { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.fp-tabs__lijst[data-size="xs"] .fp-tabs__tab { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.fp-tabs__lijst[data-variant="default"] .fp-tabs__tab:hover { color: var(--foreground); }
.fp-tabs__lijst[data-variant="default"] .fp-tabs__tab[data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-overlay); }
.fp-tabs__lijst[data-variant="button"] .fp-tabs__tab { padding: 0.625rem 0.75rem; border-radius: var(--radius); color: var(--foreground); }
.fp-tabs__lijst[data-variant="button"] .fp-tabs__tab[data-state="active"] { background: var(--muted); }
.fp-tabs__lijst[data-variant="line"] .fp-tabs__tab { padding: 0.625rem 0; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fp-tabs__lijst[data-variant="line"] .fp-tabs__tab[data-state="active"] { color: var(--primary); border-bottom-color: var(--primary); }
.fp-tabs__paneel { margin-top: 0.625rem; }
.fp-tabs__paneel:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; border-radius: var(--radius); }

/* ── SlideTabs ──────────────────────────────────────────────────────────── */

.fp-slidetabs { position: relative; display: inline-flex; width: fit-content; padding: 0.25rem; border: 2px solid var(--foreground); border-radius: 999px; background: var(--background); }
.fp-slidetabs__vak { position: relative; display: inline-flex; }
/* De schuif zit onder de tekst; de tekst keert om via difference-blend. */
.fp-slidetabs__schuif { position: absolute; inset: 0; border-radius: 999px; background: var(--foreground); }
.fp-slidetabs__tab {
  position: relative; z-index: 1; display: inline-flex; appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 0.375rem 0.75rem; font: inherit; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--background); mix-blend-mode: difference;
}
.fp-slidetabs--md .fp-slidetabs__tab { padding: 0.75rem 1.25rem; font-size: 1rem; }
.fp-slidetabs__tab:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; border-radius: 999px; }

/* ── Toast ──────────────────────────────────────────────────────────────── */

.fp-toaster { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; width: min(26.25rem, calc(100vw - 2rem)); pointer-events: none; }
.fp-toaster__stapel { position: relative; width: 100%; pointer-events: auto; }
.fp-toast {
  position: absolute; right: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 1rem; height: fit-content;
  border-radius: calc(var(--radius) * 1.5); border: 1px solid var(--border); background: var(--card); color: var(--card-foreground, var(--foreground)); box-shadow: var(--shadow-overlay);
  font: inherit; font-size: 0.875rem; line-height: 1.5;
  transition: transform var(--motion-smooth-duration) var(--motion-smooth), opacity var(--motion-smooth-duration) var(--motion-smooth);
}
.fp-toast[data-kind="success"] { background: var(--info); color: var(--background); border-color: transparent; }
.fp-toast[data-kind="warning"] { background: var(--warning); color: var(--foreground); border-color: transparent; }
.fp-toast[data-kind="error"] { background: var(--danger); color: var(--background); border-color: transparent; }
.fp-toast[data-verborgen] { opacity: 0; pointer-events: none; }
.fp-toast__rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fp-toast__tekst { flex: 1 1 auto; }
.fp-toast__tekst a { color: inherit; text-decoration: underline; font-weight: 500; }
.fp-toast__knoppen { display: inline-flex; gap: 0.25rem; }
.fp-toast__icoonknop { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; appearance: none; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-toast__icoonknop:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.fp-toast__icoonknop[data-pressed] { background: color-mix(in srgb, currentColor 18%, transparent); }
.fp-toast__icoonknop:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-toast__acties { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* ── ChannelList ────────────────────────────────────────────────────────── */

.fp-channels { width: 100%; max-width: 20rem; color: var(--foreground); }
.fp-channels__kop { margin: 0 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); font: inherit; font-size: 0.875rem; font-weight: 600; }
.fp-channels__lijst { list-style: none; margin: 0; padding: 0; }
.fp-channels__item { border-bottom: 1px solid var(--border); }
.fp-channels__item:last-child { border-bottom: 0; }
.fp-channels__label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; cursor: pointer; }
.fp-channels__label[data-uit] { cursor: not-allowed; opacity: 0.5; }
.fp-channels__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Het vinkje: leeg vakje in de merkkleurrand, gevuld zodra de native input aanstaat. */
.fp-channels__vinkje { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.125rem; box-sizing: border-box; border: 1px solid var(--primary); border-radius: calc(var(--radius) * 0.4); color: var(--primary-foreground); background: transparent; transition: background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-channels__vinkje svg { opacity: 0; }
.fp-channels__label[data-aan] .fp-channels__vinkje { background: var(--primary); }
.fp-channels__label[data-aan] .fp-channels__vinkje svg { opacity: 1; }
.fp-channels__native:focus-visible + .fp-channels__vinkje { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-channels__tegel { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 50%, transparent); color: var(--muted-foreground); font-size: 0.875rem; transition: background-color var(--motion-instant-duration) var(--motion-instant), border-color var(--motion-instant-duration) var(--motion-instant), color var(--motion-instant-duration) var(--motion-instant); }
.fp-channels__label[data-aan] .fp-channels__tegel { border-color: color-mix(in srgb, var(--primary) 20%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.fp-channels__tekst { display: flex; flex-direction: column; gap: 0.125rem; padding-top: 0.125rem; }
.fp-channels__naam { font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.2; }
.fp-channels__sub { font: inherit; font-size: 0.75rem; color: var(--muted-foreground); }

/* ── FeedbackBar ────────────────────────────────────────────────────────── */

.fp-feedback { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); background: var(--background); color: var(--foreground); font: inherit; font-size: 0.875rem; }
.fp-feedback__vraag { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0 0.75rem 1rem; }
.fp-feedback__icoon { display: inline-flex; color: var(--primary); }
.fp-feedback__titel { font-weight: 500; }
.fp-feedback__duimen { display: flex; align-items: center; gap: 0.125rem; padding: 0 0.75rem; }
.fp-feedback__duim, .fp-feedback__sluit { display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: var(--radius); transition: color var(--motion-instant-duration) var(--motion-instant), background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-feedback__duim { width: 2rem; height: 2rem; align-self: center; }
.fp-feedback__duim:hover, .fp-feedback__sluit:hover { color: var(--foreground); }
.fp-feedback__duim[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.fp-feedback__duim[data-pressed], .fp-feedback__sluit[data-pressed] { background: var(--muted); }
.fp-feedback__duim:focus-visible, .fp-feedback__sluit:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 1px; }
.fp-feedback__sluitvak { display: flex; align-items: center; border-left: 1px solid var(--border); }
.fp-feedback__sluit { padding: 0.75rem; }

/* ── AreaChart ──────────────────────────────────────────────────────────── */

.fp-chart { position: relative; width: 100%; color: var(--foreground); }
.fp-chart__svg { display: block; overflow: visible; outline: none; }
.fp-chart__svg:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 4px; border-radius: var(--radius); }
.fp-chart__hulplijn { stroke: var(--border); stroke-dasharray: 3 3; }
.fp-chart__as { font: inherit; font-size: 0.6875rem; fill: var(--muted-foreground); }
.fp-chart__markering line { stroke: color-mix(in srgb, var(--foreground) 30%, transparent); stroke-dasharray: 3 3; }
.fp-chart__markering circle { stroke: var(--background); stroke-width: 2; }
.fp-chart__tooltip { position: absolute; top: 0.5rem; z-index: 1; display: grid; gap: 0.25rem; padding: 0.5rem 0.75rem; transform: translateX(var(--fp-chart-links, 0%)); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--card-foreground, var(--foreground)); box-shadow: var(--shadow-overlay); font: inherit; font-size: 0.75rem; pointer-events: none; white-space: nowrap; }
.fp-chart__tooltip-kop { font-weight: 600; }
.fp-chart__tooltip-rij { display: flex; align-items: center; gap: 0.5rem; }
.fp-chart__tooltip-rij i, .fp-chart__legenda i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.fp-chart__tooltip-rij strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.fp-chart__legenda { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font: inherit; font-size: 0.75rem; color: var(--muted-foreground); }
.fp-chart__legenda li { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ── data-table ────────────────────────────────────────────────────────── */
.fp-table { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); background: var(--card); color: var(--card-foreground, var(--foreground)); }
.fp-table__tabel { width: 100%; border-collapse: separate; border-spacing: 0; font: inherit; font-size: 0.875rem; }
.fp-table__caption { padding: 0.75rem 1rem; text-align: left; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); caption-side: bottom; border-top: 1px solid var(--border); }
.fp-table__th { padding: 0.625rem 0.75rem; text-align: left; font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 60%, transparent); border-bottom: 1px solid var(--border); white-space: nowrap; }
.fp-table__th[data-align="end"], .fp-table__cel[data-align="end"] { text-align: right; }
.fp-table__th[data-align="center"], .fp-table__cel[data-align="center"] { text-align: center; }
.fp-table__kopwoord { display: inline-block; }
.fp-table__sorteer { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; appearance: none; border: 0; border-radius: calc(var(--radius) * 0.5); background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; transition: color var(--motion-instant-duration) var(--motion-instant); }
.fp-table__sorteer:hover, .fp-table__sorteer[data-actief] { color: var(--foreground); }
.fp-table__sorteer:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-table__pijl { opacity: 0; transform: rotate(0deg); transition: opacity var(--motion-instant-duration) var(--motion-instant), transform var(--motion-default-duration) var(--motion-default); }
.fp-table__sorteer:hover .fp-table__pijl { opacity: 0.5; }
.fp-table__sorteer[data-actief] .fp-table__pijl { opacity: 1; }
.fp-table__sorteer[data-actief="desc"] .fp-table__pijl { transform: rotate(180deg); }
.fp-table__rij { position: relative; background: var(--card); transition: background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-table__rij:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.fp-table__rij[data-gekozen] { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fp-table__rij[data-getild] { z-index: 1; cursor: grabbing; box-shadow: var(--shadow-overlay); }
.fp-table__cel { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fp-table__body tr:last-child .fp-table__cel { border-bottom: 0; }
.fp-table__cel--greep, .fp-table__cel--vink { width: 2.5rem; padding-left: 0.5rem; padding-right: 0.25rem; text-align: center; }
.fp-table__greep { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; appearance: none; border: 0; border-radius: calc(var(--radius) * 0.5); background: transparent; color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); cursor: grab; touch-action: none; transition: color var(--motion-instant-duration) var(--motion-instant), background-color var(--motion-instant-duration) var(--motion-instant); }
.fp-table__greep:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
.fp-table__greep:disabled { cursor: not-allowed; opacity: 0.4; }
.fp-table__greep:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-table__rij[data-getild] .fp-table__greep { cursor: grabbing; }
.fp-table__vink { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); cursor: pointer; }
.fp-table__vink:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 2px; }
.fp-table__leeg { padding: 2rem 1rem; text-align: center; font: inherit; font-size: 0.875rem; color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) { .fp-table__pijl { transition-duration: 0s; } }

/* ── image-cropper ─────────────────────────────────────────────────────── */
.fp-crop { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 24rem; color: var(--foreground); }
.fp-crop .fp-drop { width: 100%; }
.fp-crop__editor, .fp-crop__resultaat { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.fp-crop__kader { position: relative; width: var(--fp-crop-maat, 208px); height: var(--fp-crop-maat, 208px); overflow: hidden; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 1px var(--border), 0 0 0 0.5rem color-mix(in srgb, var(--primary) 10%, transparent); cursor: grab; touch-action: none; user-select: none; }
.fp-crop[data-vorm="square"] .fp-crop__kader { border-radius: calc(var(--radius) * 1.5); }
.fp-crop__kader:active { cursor: grabbing; }
.fp-crop__kader:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 4px; }
.fp-crop__beeld { position: absolute; top: 50%; left: 50%; max-width: none; transform-origin: center; pointer-events: none; }
.fp-crop__kader--klaar { cursor: default; overflow: visible; }
.fp-crop__uitvoer { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.fp-crop__vink { position: absolute; right: 0.25rem; bottom: 0.25rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--success); color: var(--background); box-shadow: 0 0 0 3px var(--background); }
.fp-crop__zoomrij { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 16rem; }
.fp-crop__zoomlabel { font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.fp-crop__zoom { flex: 1 1 auto; margin: 0; accent-color: var(--primary); cursor: pointer; }
.fp-crop__zoom:focus-visible { outline: 2px solid var(--ring, var(--info)); outline-offset: 4px; }
.fp-crop__acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }