/* ── Webfix design tokens ─────────────────────────────────────────────
   Kleurhiërarchie: 90% grijs · 7% groen · 2% roze · 1% blauw
────────────────────────────────────────────────────────────────────── */
:root {
  --wf-green:        #b0d136;
  --wf-green-dark:   #8aaa1e;
  --wf-green-subtle: #f3fad7;
  --wf-green-text:   #5a6e0e;
  --wf-pink:         #da176c;
  --wf-pink-dark:    #b8115a;
  --wf-blue:         #32bcee;
  --wf-title:        #a12359;
  --wf-bg:           #f5f6fa;
  --wf-surface:      #ffffff;
  --wf-border:       #e2e8f0;
  --wf-border-lt:    #f1f5f9;
  --wf-muted:        #94a3b8;
  --wf-text:         #1e293b;
  --wf-text-soft:    #475569;
  --wf-hover-bg:     #f8fafc;

  --bs-primary:             #b0d136 !important;
  --bs-primary-rgb:         176, 209, 54 !important;
  --bs-primary-bg-subtle:   rgba(176, 209, 54, 0.12) !important;
  --bs-secondary:           #da176c !important;
  --bs-secondary-rgb:       218, 23, 108 !important;
  --bs-secondary-bg-subtle: rgba(218, 23, 108, 0.10) !important;
  --bs-info:                #32bcee !important;
  --bs-info-rgb:            50, 188, 238 !important;
  --bs-info-bg-subtle:      rgba(50, 188, 238, 0.10) !important;
}

/* ── Dark mode: laat de Webfix-tokens meekleuren ──────────────────────────────
   dashboard.css gebruikt overal var(--wf-surface)/--wf-text/--wf-border met
   [data-bs-theme="dark"]-overrides die ervan uitgaan dat deze tokens in dark mode
   omklappen — maar dat tokenblok ontbrak. Hierdoor bleven kaarten wit en teksten
   onleesbaar in dark mode. Dit zet de neutrale tokens op donkere waarden (merk-
   accenten groen/roze/blauw blijven gelijk). Lost de modules-sectie én andere
   dark-mode-tekst systeembreed op. */
[data-bs-theme="dark"] {
  --wf-bg:           #1b2333;
  --wf-surface:      #2a3447;
  --wf-border:       #3a4658;
  --wf-border-lt:    #313c4f;
  --wf-muted:        #8190a8;
  --wf-text:         #e6eaf0;
  --wf-text-soft:    #9aa7bd;
  --wf-hover-bg:     rgba(255, 255, 255, 0.05);
  --wf-green-subtle: rgba(176, 209, 54, 0.16);
  --wf-green-text:   #b6dc63;
  --wf-title:        #f1a9cb;
}

.btn-wf-hero                      { background-color: #da176c !important; border-color: #da176c !important; color: #fff !important; box-shadow: 0 2px 8px rgba(218,23,108,.28); border-radius: 8px; font-weight: 600; }
.btn-wf-hero:hover                { background-color: #b8115a !important; border-color: #b8115a !important; color: #fff !important; }
.btn-secondary, .bg-secondary     { background-color: #da176c !important; border-color: #da176c !important; color: #fff !important; }
.btn-secondary:hover              { background-color: #b8115a !important; border-color: #b8115a !important; }
.text-secondary                   { color: #da176c !important; }
.border-secondary                 { border-color: #da176c !important; }
.bg-secondary-subtle              { background-color: rgba(218,23,108,.10) !important; }
.text-secondary-emphasis          { color: #da176c !important; }

.btn-info, .bg-info               { background-color: #32bcee !important; border-color: #32bcee !important; color: #fff !important; }
.btn-info:hover                   { background-color: #1a9fd0 !important; border-color: #1a9fd0 !important; }
.text-info                        { color: #32bcee !important; }
.border-info                      { border-color: #32bcee !important; }
.badge.bg-info                    { background-color: #32bcee !important; }
.bg-info-subtle                   { background-color: rgba(50,188,238,.10) !important; }
.text-info-emphasis               { color: #32bcee !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar-nav .sidebar-link                                                       { color: #1e293b !important; }
.sidebar-nav:not(.klant-sidebar-nav) .sidebar-item .sidebar-link.active,
.sidebar-nav:not(.klant-sidebar-nav) .sidebar-item .sidebar-link:hover          { color: #b0d136 !important; }
.sidebar-nav:not(.klant-sidebar-nav) .sidebar-item.selected > .sidebar-link     { color: #b0d136 !important; }

/* ── Webfix-branded sidenav hover kleuren (links→rechts sweep) ────────── */
.sidebar-nav .sidebar-link.wf-nav-green,
.sidebar-nav .sidebar-link.wf-nav-pink,
.sidebar-nav .sidebar-link.wf-nav-blue { position: relative; overflow: hidden; }

.sidebar-nav .sidebar-link.wf-nav-green::before,
.sidebar-nav .sidebar-link.wf-nav-pink::before,
.sidebar-nav .sidebar-link.wf-nav-blue::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 0 30px 30px 0;
  transform: translateX(-100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.sidebar-nav .sidebar-link.wf-nav-green::before { background: rgba(176,209,54,.18); }
.sidebar-nav .sidebar-link.wf-nav-pink::before  { background: rgba(218,23,108,.10); }
.sidebar-nav .sidebar-link.wf-nav-blue::before  { background: rgba(50,188,238,.13); }
.sidebar-nav .sidebar-link.wf-nav-green:hover::before,
.sidebar-nav .sidebar-link.wf-nav-pink:hover::before,
.sidebar-nav .sidebar-link.wf-nav-blue:hover::before { transform: translateX(0); }

.sidebar-nav .sidebar-item .sidebar-link.wf-nav-green:hover { color: #5a6e0e !important; }
.sidebar-nav .sidebar-item .sidebar-link.wf-nav-pink:hover  { color: #da176c !important; }
.sidebar-nav .sidebar-item .sidebar-link.wf-nav-blue:hover  { color: #1a7fa3 !important; }

[data-bs-theme="dark"] .sidebar-nav .sidebar-link           { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .sidebar-nav .sidebar-link.wf-nav-green::before { background: rgba(176,209,54,.14); }
[data-bs-theme="dark"] .sidebar-nav .sidebar-link.wf-nav-pink::before  { background: rgba(218,23,108,.13); }
[data-bs-theme="dark"] .sidebar-nav .sidebar-link.wf-nav-blue::before  { background: rgba(50,188,238,.12); }
[data-bs-theme="dark"] .sidebar-nav .sidebar-item .sidebar-link.wf-nav-green:hover { color: #b0d136 !important; }
[data-bs-theme="dark"] .sidebar-nav .sidebar-item .sidebar-link.wf-nav-pink:hover  { color: #f472b6 !important; }
[data-bs-theme="dark"] .sidebar-nav .sidebar-item .sidebar-link.wf-nav-blue:hover  { color: #32bcee !important; }

/* ── Zilver: tijdelijke eigen tint voor "Overstappers" (Tom, 09-10-2026) ──
   Die regel stond tussen de roze verkoopitems en viel daardoor niet op als een eigen lijst. Zelfde
   sweep-opzet als de drie hierboven, maar in een koel grijs met een verloop, zodat hij opvalt
   zonder een vierde merkkleur te introduceren. Tijdelijk: haal hem weg zodra de ronde voorbij is. */
.sidebar-nav .sidebar-link.wf-nav-zilver { position: relative; overflow: hidden; }
.sidebar-nav .sidebar-link.wf-nav-zilver::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 0 30px 30px 0;
  transform: translateX(-100%);
  transition: transform .25s ease;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(148,163,184,.26), rgba(203,213,225,.14) 55%, rgba(148,163,184,.22));
}
.sidebar-nav .sidebar-link.wf-nav-zilver:hover::before { transform: translateX(0); }
.sidebar-nav .sidebar-item .sidebar-link.wf-nav-zilver:hover { color: #475569 !important; }

/*  Het icoonvlakje ernaast in dezelfde zilveren gradient, in plaats van een vlakke Bootstrap-tint. */
.aside-icon.wf-ico-zilver {
  background: linear-gradient(135deg, #e8ecf2, #cbd5e1 52%, #dfe5ee);
  color: #475569;
  box-shadow: inset 0 0 0 1px rgba(71, 85, 105, .10);
}

[data-bs-theme="dark"] .sidebar-nav .sidebar-link.wf-nav-zilver::before {
  background: linear-gradient(100deg, rgba(203,213,225,.16), rgba(148,163,184,.09) 55%, rgba(203,213,225,.14));
}
[data-bs-theme="dark"] .sidebar-nav .sidebar-item .sidebar-link.wf-nav-zilver:hover { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .aside-icon.wf-ico-zilver {
  background: linear-gradient(135deg, #3b4454, #2b3341 52%, #39414f);
  color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Standaard tekstlink. In :where() en dus met specificiteit NUL: een kale <a> krijgt deze kleur,
   maar élke component die zelf een kleur zet (een knop, een tab, een menu-item) wint altijd — ook
   op hover. Zonder :where() verslaat `a:hover` een enkele klasse, en dan verkleurt het label van
   een knop die alleen in zijn grondregel een kleur zet. De kleuren staan ook in wf-2026-system.css
   (dat laadt hierna en is de bron); hier voor de paar schermen die dit bestand alleen laden. */
:where(a)       { color: var(--wf-link, #1A9BD1); }
:where(a:hover) { color: var(--wf-pink, #da176c); }

/* ── Globale utilities ────────────────────────────────────────────────── */
.wf-empty { text-align:center; padding:52px 24px; }
.wf-empty .wf-empty-icon {
  width:56px; height:56px; border-radius:14px;
  background:#f3fad7; display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.wf-empty .wf-empty-icon i { font-size:1.5rem; color:#b0d136; }
.wf-empty .wf-empty-title  { font-size:.95rem; font-weight:700; color:#1e293b; margin-bottom:5px; }
.wf-empty .wf-empty-sub    { font-size:.83rem; color:#94a3b8; margin-bottom:18px; }

.wf-icon-box {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.wf-icon-box.green   { background:#f3fad7; }
.wf-icon-box.green i { color:#5a6e0e; }
.wf-icon-box.blue    { background:#e6f7fd; }
.wf-icon-box.blue i  { color:#1a7fa3; }
.wf-icon-box.warn    { background:#fef9c3; }
.wf-icon-box.warn i  { color:#854d0e; }
.wf-icon-box.danger  { background:#fee2e2; }
.wf-icon-box.danger i{ color:#b91c1c; }
.wf-icon-box.neutral { background:#f1f5f9; }
.wf-icon-box.neutral i{ color:#64748b; }
.wf-icon-box i { font-size:1.25rem; }

.wf-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding:0 .75rem; flex-wrap:wrap; gap:.75rem; }
.wf-page-header h4 { font-size:1.05rem; font-weight:700; color:#1e293b; margin:0; letter-spacing:-.2px; }
.wf-page-header .breadcrumb { margin:0; }

.wf-card        { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.wf-card-header { padding:.7rem 1rem; border-bottom:1px solid #e2e8f0; font-size:.875rem; display:flex; align-items:center; background:#fff; }
.wf-card-body   { padding:1rem; }

.table > tbody > tr { transition: background .1s; }
.table > tbody > tr:hover { background: #fafbfc; }

.card { border-color: #e2e8f0 !important; }

/* ── Pagina animatie ──────────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.body-wrapper { animation: pageFadeIn .3s ease; }
.modal-backdrop { opacity: .5 !important; }

/* ── Mini-sidebar: container clippen zodat alleen het icoon zichtbaar is ───── */
[data-sidebartype=mini-sidebar] .left-sidebar { overflow: hidden; }
[data-sidebartype=mini-sidebar] .left-sidebar:hover { overflow: visible; }
[data-sidebartype=mini-sidebar] .left-sidebar .brand-logo a { overflow: hidden; width: 50px; display: block; }
[data-sidebartype=mini-sidebar] .left-sidebar:hover .brand-logo a { overflow: visible; width: auto; }

/* ── Sidenav icon animaties (Spike layout behouden) ──────────────────────── */
.sidebar-item.nav-aanvragen .sidebar-link:hover .aside-icon i { animation: wf-nudge-up 0.4s ease; }
.sidebar-item.nav-klanten   .sidebar-link:hover .aside-icon i { animation: wf-pulse-ring 0.5s ease; }
.sidebar-item.nav-sites     .sidebar-link:hover .aside-icon i { animation: wf-globe-turn 0.6s ease; }
.sidebar-item.nav-media     .sidebar-link:hover .aside-icon i { animation: wf-snap 0.55s ease; }
.sidebar-item.nav-meldingen .sidebar-link:hover .aside-icon i { animation: wf-bell-sway 0.5s ease; }
.sidebar-item.nav-gebruikers .sidebar-link:hover .aside-icon i { animation: wf-badge-pop 0.4s ease; }
.sidebar-item.nav-rapportage .sidebar-link:hover .aside-icon i { animation: wf-bar-grow 0.4s ease; }
.sidebar-item.nav-boekingen .sidebar-link:hover .aside-icon i { animation: wf-cal-pop 0.4s ease; }
.sidebar-item.nav-updates   .sidebar-link:hover .aside-icon i { animation: wf-rocket-float 0.6s ease; }
.sidebar-item.nav-nieuws    .sidebar-link:hover .aside-icon i { animation: wf-nudge-up 0.4s ease; }

.wf-logout-btn:hover i { animation: wf-escape 0.5s ease; }
@keyframes wf-escape      { 0%{transform:translateX(0) rotate(0)} 30%{transform:translateX(8px) rotate(12deg)} 55%{transform:translateX(-4px) rotate(-6deg)} 75%{transform:translateX(5px) rotate(6deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes wf-nudge-up    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes wf-pulse-ring  { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes wf-globe-turn  { 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }
@keyframes wf-snap        { 0%{transform:scale(1) rotate(0)} 15%{transform:scale(.78) rotate(-8deg);filter:brightness(1)} 35%{transform:scale(1.28) rotate(4deg);filter:brightness(2.2)} 60%{transform:scale(.96) rotate(-2deg);filter:brightness(1)} 80%{transform:scale(1.06) rotate(1deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes wf-bell-sway   { 0%,100%{transform:rotate(0)} 25%{transform:rotate(14deg)} 75%{transform:rotate(-14deg)} }
@keyframes wf-badge-pop   { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
@keyframes wf-bar-grow    { 0%{transform:scaleY(0.6)} 100%{transform:scaleY(1)} }
@keyframes wf-cal-pop     { 0%{transform:scale(0.85)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes wf-rocket-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px) rotate(6deg)} }

/* ── Klant standalone nav animaties ─────────────────────────────────── */
.sidebar-item.nav-klant-dashboard .sidebar-link:hover .aside-icon i { animation: wf-nudge-up .4s ease; }

/* ── Alle klant nav items (toplevel én sub): zelfde nudge-up animatie ── */
.sidebar-nav .sidebar-link:hover i.aside-icon { animation: wf-nudge-up .4s ease; }

/* ── Submenu open: staggered slide-in ───────────────────────────────── */
.sidebar-nav ul.first-level.in > .sidebar-item {
  animation: wf-submenu-in .22s ease both;
}
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(2) { animation-delay: .04s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(3) { animation-delay: .08s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(4) { animation-delay: .12s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(5) { animation-delay: .16s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(6) { animation-delay: .20s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(7) { animation-delay: .24s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(8) { animation-delay: .28s; }
.sidebar-nav ul.first-level.in > .sidebar-item:nth-child(9) { animation-delay: .30s; }
@keyframes wf-submenu-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

#main-wrapper { position: relative; }

/* ── Compacte dashboard-sidebar (klant) — past zonder scrollen ──────────
   Alleen de klant-dashboard-sidebar (.klant-sidebar-nav); de admin-sidebar
   blijft ongemoeid. Kleinere icoon-chips + minder regelhoogte zodat alle
   menu-items op één scherm passen. */
.klant-sidebar-nav .sidebar-link            { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 0 !important; }
.klant-sidebar-nav .sidebar-item            { margin-bottom: 0; line-height: 1.15; padding-top: 0 !important; padding-bottom: 0 !important; }
.klant-sidebar-nav .aside-icon              { padding: 0 !important; width: 27px !important; height: 27px !important; min-width: 27px !important; display: inline-flex; align-items: center; justify-content: center; }
.klant-sidebar-nav .aside-icon i            { font-size: .82rem !important; }
.klant-sidebar-nav .hide-menu               { font-size: .855rem; }
.klant-sidebar-nav .sidebar-item.mt-2       { margin-top: .25rem !important; }
.klant-sidebar-nav ul.first-level           { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Win de ongebruikte ruimte onder het menu terug (Spike reserveert ~200px),
   alleen voor de klant-dashboard-sidebar, zodat alle items zonder scrollen passen. */
.left-sidebar:has(.klant-sidebar-nav) .scroll-sidebar { height: calc(100vh - 88px) !important; }

/* ── Tablet/mobiel: backdrop achter de uitgeklapte sidebar ──────────────
   Het Spike-backdrop-element (.dark-transparent.sidebartoggler) staat in de
   layout maar krijgt in dit template geen stijl, waardoor de sidebar zónder
   dimming over de content viel. Hieronder krijgt 'ie de juiste overlay-stijl
   zodra de sidebar open is (≤1199px). Klikken sluit de sidebar (Spike-JS op
   .sidebartoggler). Gescoped op het klant-dashboard. */
@media (max-width: 1199.98px) {
  #main-wrapper.show-sidebar:has(.klant-sidebar-nav) ~ .dark-transparent.sidebartoggler {
    display: block; position: fixed; inset: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, .45); z-index: 90;
  }
}

/* ── Verwijder bevestiging overlay ────────────────────────────────────── */
#wfVerwijderOverlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.45);
  align-items: center; justify-content: center; padding: 20px;
}
#wfVerwijderOverlay.open { display: flex; }
#wfVerwijderOverlay .wf-del-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18); overflow: hidden; text-align: center;
}
#wfVerwijderOverlay .wf-del-body { padding: 32px 28px 20px; }
#wfVerwijderOverlay .wf-del-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff1f0; border: 2px solid #ffd6d3; margin-bottom: 14px;
}
#wfVerwijderOverlay .wf-del-icon i { font-size: 1.6rem; color: #e53935; }
#wfVerwijderOverlay h5 { font-weight: 700; margin: 0 0 6px; color: #0f172a; }
#wfVerwijderOverlay p  { font-size: .9rem; color: #64748b; margin: 0; }
#wfVerwijderOverlay .wf-del-footer {
  padding: 0 28px 28px; display: flex; gap: 10px; justify-content: center;
}
#wfVerwijderOverlay .wf-del-annuleer {
  background: #f1f5f9; color: #475569; border: none; border-radius: 9px;
  padding: 9px 22px; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
#wfVerwijderOverlay .wf-del-annuleer:hover { background: #e2e8f0; }
#wfVerwijderOverlay .wf-del-bevestig {
  background: #e53935; color: #fff; border: none; border-radius: 9px;
  padding: 9px 22px; font-size: .875rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s;
}
#wfVerwijderOverlay .wf-del-bevestig:hover { background: #c62828; }

/* ── Easter egg: OfferMeister sneaky peek ──────────────────────────────── */
.om-peek-wrap {
  position: fixed; right: 0; top: 47%; z-index: 9990;
  display: flex; flex-direction: row; align-items: center;
  cursor: pointer; user-select: none;
  transform: translateX(calc(100% - 5px));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.om-peek-wrap:hover { transform: translateX(0); }
.om-peek-logo {
  width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0;
  filter: drop-shadow(-6px 0 18px rgba(30,64,175,.5));
}
.om-bubble {
  background: #0d1117; color: #f1f5f9;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px; padding: 9px 14px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  margin-right: 10px; position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0; transform: translateX(8px) scale(.9);
  transition: opacity .2s .12s, transform .3s .12s cubic-bezier(.34,1.56,.64,1);
}
.om-bubble::after {
  content: ''; position: absolute; right: -7px; top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent; border-left: 7px solid #0d1117; border-right: 0;
}
.om-peek-wrap:hover .om-bubble { opacity: 1; transform: translateX(0) scale(1); }

/* ══ Webfix standaardknoppen — Bootstrap-rollen, Webfix-tinten ════════════════
   Systeembreed: elke bestaande .btn-primary/.btn-success/… krijgt automatisch de
   Webfix-kleur; views hoeven niets aan te passen. Semantiek = Bootstrap
   (primary/secondary/success/info/warning/danger/light/dark), kleuren = merk.
   1:1 uit Toms Claude-Design-ontwerp (claude-design/webfix-ai-buttons-ontwerp).
   NIET voor AI-acties — gebruik daar de Webfix AI-knop (.wf-flow-btn / _WfFlowButton).
   Toelichting + wanneer-wat: docs/stijl.md.
   NB: secondary (#da176c) en info (#32bcee) worden hierboven al gezet (regels ~56/63).
   styles.css (Spike) is beschermd, dus we overschrijven de --bs-btn-*-variabelen hier. */
.btn-primary {                        /* hoofdactie — magenta */
  --bs-btn-bg: #a12359;
  --bs-btn-border-color: #a12359;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8a1d4d;
  --bs-btn-hover-border-color: #8a1d4d;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #7a1a43;
  --bs-btn-active-border-color: #7a1a43;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #a12359;
  --bs-btn-disabled-border-color: #a12359;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 161, 35, 89;
}
.btn-outline-primary {                /* outline meelopen met de magenta filled-variant */
  --bs-btn-color: #a12359;
  --bs-btn-border-color: #a12359;
  --bs-btn-hover-bg: #a12359;
  --bs-btn-hover-border-color: #a12359;
  --bs-btn-active-bg: #a12359;
  --bs-btn-active-border-color: #a12359;
  --bs-btn-disabled-color: #a12359;
  --bs-btn-disabled-border-color: #a12359;
  --bs-btn-focus-shadow-rgb: 161, 35, 89;
}
.btn-success {                        /* gelukt — groen */
  --bs-btn-bg: #b0d136;
  --bs-btn-border-color: #b0d136;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #9cbc2d;
  --bs-btn-hover-border-color: #9cbc2d;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8ba828;
  --bs-btn-active-border-color: #8ba828;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #b0d136;
  --bs-btn-disabled-border-color: #b0d136;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 176, 209, 54;
}
.btn-warning {                        /* let op — amber */
  --bs-btn-bg: #dc9e2f;
  --bs-btn-border-color: #dc9e2f;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #c78a20;
  --bs-btn-hover-border-color: #c78a20;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b07a1c;
  --bs-btn-active-border-color: #b07a1c;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #dc9e2f;
  --bs-btn-disabled-border-color: #dc9e2f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 220, 158, 47;
}
.btn-light {                          /* subtiel vlak */
  --bs-btn-bg: #f0f0f7;
  --bs-btn-border-color: rgba(1, 16, 61, .10);
  --bs-btn-color: #000229;
  --bs-btn-hover-bg: #e4e4ee;
  --bs-btn-hover-border-color: rgba(1, 16, 61, .12);
  --bs-btn-hover-color: #000229;
  --bs-btn-active-bg: #d9d9e6;
  --bs-btn-active-border-color: rgba(1, 16, 61, .14);
  --bs-btn-active-color: #000229;
  --bs-btn-disabled-bg: #f0f0f7;
  --bs-btn-disabled-border-color: rgba(1, 16, 61, .10);
  --bs-btn-disabled-color: #000229;
  --bs-btn-focus-shadow-rgb: 1, 16, 61;
}
.btn-dark {                           /* donker vlak */
  --bs-btn-bg: #000229;
  --bs-btn-border-color: #000229;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0e1130;
  --bs-btn-hover-border-color: #0e1130;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #191d40;
  --bs-btn-active-border-color: #191d40;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #000229;
  --bs-btn-disabled-border-color: #000229;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 0, 2, 41;
}

/* Verwijder-/danger-knoppen: echt rood (#d81f25 uit het ontwerp) i.p.v. de zachte
   Spike-zalm. Ook als globale rol, zodat .text-danger/.bg-danger meelopen. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-danger: #d81f25;
  --bs-danger-rgb: 216, 31, 37;
}
.btn-danger {
  --bs-btn-bg: #d81f25;
  --bs-btn-border-color: #d81f25;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #be1a1f;
  --bs-btn-hover-border-color: #be1a1f;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a5161b;
  --bs-btn-active-border-color: #a5161b;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #d81f25;
  --bs-btn-disabled-border-color: #d81f25;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 216, 31, 37;
}
.btn-outline-danger {
  --bs-btn-color: #d81f25;
  --bs-btn-border-color: #d81f25;
  --bs-btn-hover-bg: #d81f25;
  --bs-btn-hover-border-color: #d81f25;
  --bs-btn-active-bg: #d81f25;
  --bs-btn-active-border-color: #d81f25;
  --bs-btn-disabled-color: #d81f25;
  --bs-btn-disabled-border-color: #d81f25;
  --bs-btn-focus-shadow-rgb: 216, 31, 37;
}

/* ── Logo / favicon: transparantie-ruit, tip-blok en live browser-voorbeeld ───
   Hergebruikbare helpers (geen nieuw CSS-bestand). De binnenkant van het
   browser-voorbeeld blijft bewust licht — het bootst de echte (lichte) website
   na, ongeacht het thema van het dashboard. */
.wf-checker {
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eef1f5 25%,transparent 25%),
    linear-gradient(-45deg,#eef1f5 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eef1f5 75%),
    linear-gradient(-45deg,transparent 75%,#eef1f5 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
}
[data-bs-theme="dark"] .wf-checker {
  background-color:#0f172a;
  background-image:
    linear-gradient(45deg,#1e293b 25%,transparent 25%),
    linear-gradient(-45deg,#1e293b 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1e293b 75%),
    linear-gradient(-45deg,transparent 75%,#1e293b 75%);
}

.wf-tip {
  display:flex; gap:.5rem; align-items:flex-start;
  padding:.625rem .75rem; border-radius:8px;
  background:#f8fafc; color:#64748b;
  font-size:.78rem; line-height:1.5;
}
.wf-tip i { color:#ca8a04; margin-top:1px; flex-shrink:0; }
[data-bs-theme="dark"] .wf-tip { background:rgba(148,163,184,.12); color:#94a3b8; }

/* ── Paginabalk (wf-page-bar) ──────────────────────────────────────────────
   De uniforme dashboard-bovenbalk + de ruimte eronder de header. Alle balk-
   styling staat hier bij elkaar (wf-*-klassen horen in webfix.css). Kleuren via
   de bestaande --webfix-*-tokens, zodat de uitstraling exact gelijk blijft. */
.wf-page-bar {
  background: transparent;
  border: 1px solid var(--webfix-soft-border);
  box-shadow: none;
}
.wf-page-bar .breadcrumb a {
  color: var(--webfix-magenta);
  font-weight: 600;
  text-decoration: none;
}
/* Strakkere ruimte tussen de Spike-header en de balk (Spike-default = 24px);
   de klant ziet de meekijk-balk niet, dus die witruimte mag weg. */
.page-wrapper .topbar { margin-bottom: 10px; }

@media (max-width: 767.98px) {
  .wf-page-bar .card-body { padding: 18px; }
}

/* ── Webfix AI · Smart Bubbles (/dashboard/Ai) ─────────────────────────────
   Eigen accenten bovenop de Spike-kaarten. Gebruikt de Webfix-merktokens
   (--wf-green/pink/blue) zodat het in light én dark mode klopt. Geen nieuw
   CSS-bestand: alles leeft hier. */
.wf-ai-accent-green  { --wfa:#5f9e22; --wfa-bg:rgba(125,194,66,.18);  --wfa-text:#4e8a1a; }
.wf-ai-accent-pink   { --wfa:#e6186a; --wfa-bg:rgba(230,24,106,.13);  --wfa-text:#c2185b; }
.wf-ai-accent-blue   { --wfa:#1ca6c9; --wfa-bg:rgba(30,200,222,.16);  --wfa-text:#0e8fa3; }
.wf-ai-accent-cyan   { --wfa:#1ec8de; --wfa-bg:rgba(30,200,222,.16);  --wfa-text:#0e8fa3; }
.wf-ai-accent-purple { --wfa:#8763da; --wfa-bg:rgba(135,99,218,.16);  --wfa-text:#6848b7; }
.wf-ai-accent-orange { --wfa:#e8870e; --wfa-bg:rgba(255,174,31,.18);  --wfa-text:#b06f00; }
.wf-ai-accent-teal   { --wfa:#0fb39c; --wfa-bg:rgba(19,222,185,.16);  --wfa-text:#0f9c89; }
.wf-ai-accent-amber  { --wfa:#e0a106; --wfa-bg:rgba(255,193,7,.18);   --wfa-text:#a87c00; }
.wf-ai { --wfa:#5f9e22; --wfa-bg:rgba(125,194,66,.18); --wfa-text:#4e8a1a; }

/* zacht gekleurde gloed bovenin de hero-kaart */
.wf-ai-hero { position:relative; overflow:hidden; }
.wf-ai-hero::before {
  content:""; position:absolute; inset:0 0 auto 0; height:170px; pointer-events:none;
  background:
    radial-gradient(120% 150% at 92% -30%, rgba(50,188,238,.10), transparent 55%),
    radial-gradient(120% 150% at 6% -30%, rgba(176,209,54,.12), transparent 55%),
    radial-gradient(120% 150% at 55% -60%, rgba(218,23,108,.06), transparent 50%);
}
.wf-ai-hero > .card-body { position:relative; z-index:1; }

.wf-ai-spark {
  width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:#fff;
  background:linear-gradient(135deg, var(--wf-green) 0%, var(--wf-blue) 100%);
  box-shadow:0 6px 16px rgba(50,188,238,.30);
}
.wf-ai-eyebrow { font-size:.7rem; letter-spacing:.06em; }

/* ── bubble-kaarten ── */
.wf-ai-bubble {
  display:flex; flex-direction:column; justify-content:space-between; gap:.75rem;
  background:var(--bs-card-bg, #fff); border:1px solid var(--bs-border-color, #e2e8f0);
  border-radius:14px; padding:1rem; cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.wf-ai-bubble:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(8,15,52,.10); border-color:var(--wfa); }
.wf-ai-bubble:focus-visible { outline:2px solid var(--wfa); outline-offset:2px; }
.wf-ai-bubble-title { font-size:.95rem; line-height:1.3; }
.wf-ai-bubble-desc, .wf-ai-news-body, .wf-ai-mod-desc {
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wf-ai-mod-desc { min-height:2.4em; }

.wf-ai-chip, .wf-ai-wchip {
  width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:var(--wfa); background:var(--wfa-bg); flex-shrink:0;
}
.wf-ai-pill {
  align-self:flex-start; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; color:var(--wfa-text);
  background:var(--wfa-bg); border-radius:999px; padding:.2rem .6rem;
}
.wf-ai-dot { width:7px; height:7px; border-radius:50%; background:#13c296; display:inline-block; flex-shrink:0; }

/* ── support-strip ── */
.wf-ai-support {
  background:linear-gradient(135deg, rgba(176,209,54,.10), rgba(50,188,238,.10));
  border:1px solid var(--bs-border-color, #e9edf2); border-radius:16px; padding:1rem 1.1rem;
}
.wf-ai-avatar {
  position:relative; width:50px; height:50px; border-radius:50%; color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wf-blue); box-shadow:0 4px 13px rgba(50,188,238,.34);
}
.wf-ai-online { position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:#13c296; border:2.5px solid var(--bs-card-bg, #fff); }
.wf-ai-badge-online {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:600; color:#0e9c81;
  background:rgba(19,194,150,.12); border:1px solid rgba(19,194,150,.35); border-radius:999px; padding:.15rem .55rem;
}
/* Offline: oranje i.p.v. groen — groen leest als "online". Team is offline, maar wel via e-mail bereikbaar. */
.wf-ai-badge-online.is-offline { color:#b06f00; background:rgba(255,174,31,.16); border-color:rgba(232,135,14,.35); }
.wf-ai-badge-online.is-offline .wf-ai-dot { background:#e8870e; }
.wf-ai-online.is-offline { background:#e8870e; }
[data-bs-theme="dark"] .wf-ai-badge-online.is-offline { color:#f3c06a; background:rgba(255,174,31,.14); border-color:rgba(232,135,14,.4); }

/* ── prompt-balk + chips ── */
.wf-ai-prompt {
  background:var(--wf-hover-bg, #f8fafc); border:1.5px solid var(--bs-border-color, #e2e8f0);
  border-radius:14px; padding:.35rem .35rem .35rem .75rem;
}
.wf-ai-prompt:focus-within { border-color:var(--wf-green); box-shadow:0 0 0 .2rem rgba(176,209,54,.20); }
.wf-ai-quickchip {
  background:rgba(176,209,54,.10); border:1px solid rgba(176,209,54,.30); color:var(--wf-green-text);
  border-radius:999px; padding:.35rem .8rem; font-size:.78rem; font-weight:600; cursor:pointer; transition:background .14s ease;
}
.wf-ai-quickchip:hover { background:rgba(176,209,54,.20); }

/* ── widgets ── */
.wf-ai-news-img { height:150px; border-radius:11px; background-size:cover; background-position:center; }
/* Klikbare nieuwskaart op het dashboard: subtiele lift + titel kleurt op bij hover. */
.wf-news-card { transition:transform .14s ease, box-shadow .14s ease; }
.wf-news-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(8,15,52,.10); }
.wf-news-title { color:var(--wf-text); transition:color .14s ease; }
.wf-news-title:hover { color:var(--wf-blue); }

/* ── Nieuwsdetail (/dashboard/Nieuwsbericht) ───────────────────────────────
   Banner-foto netjes bijgesneden (geen reuzenfoto meer) + lopende tekst in een
   prettige leesbreedte. Kleuren via de bestaande tokens, dus licht + donker. */
.wf-news-hero { display:block; width:100%; height:clamp(180px, 34vw, 360px); object-fit:cover; }
.wf-news-article { max-width:760px; font-size:1.0625rem; line-height:1.75; color:var(--wf-text); }
.wf-news-article > :first-child { margin-top:0; }
.wf-news-article p { margin-bottom:1rem; }
.wf-news-article h2, .wf-news-article h3, .wf-news-article h4 { font-weight:600; margin-top:1.6em; margin-bottom:.5em; }
.wf-news-article img { max-width:100%; height:auto; border-radius:10px; }
.wf-news-article ul, .wf-news-article ol { margin-bottom:1rem; padding-left:1.4rem; }
/* Rechterkolom-widgets: gap-4 verzorgt de tussenruimte; de Spike-standaard card-marge
   moet eraf, anders vult flex-grow de kolom niet helemaal en lijnt het laatste blok niet
   uit met de onderrand van de Webfix AI-kaart. */
#wfDashWidgets > .card { margin-bottom: 0; }
/* Snelmenu-blok: laatst-bewerkt-regels met hover + statistiek-placeholder. */
.wf-snel-item { color:var(--wf-text); border-radius:8px; transition:background .14s ease; }
.wf-snel-item:hover { background:var(--wf-hover-bg, rgba(8,15,52,.04)); }
.wf-snel-stats { background:var(--wf-hover-bg, #f8fafc); border:1px solid var(--bs-border-color, #e9edf2); }
.wf-ai-result-text { white-space:pre-wrap; max-height:30vh; overflow:auto; }
.wf-ai-why { background:rgba(176,209,54,.08); border:1px solid rgba(176,209,54,.22); border-radius:12px; padding:.75rem .9rem; }
.wf-ai-why i { color:var(--wf-green-dark); margin-top:2px; flex-shrink:0; }

/* ── beschikbare modules ── */
.wf-ai-modrow { scrollbar-width:thin; }
.wf-ai-modcard {
  width:214px; border:1px solid var(--bs-border-color, #e2e8f0); border-radius:12px; padding:1rem;
  background:var(--bs-card-bg, #fff); display:flex; flex-direction:column;
}

/* ── toast ── */
.wf-ai-toast {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px); z-index:1090;
  background:#1f2839; color:#fff; font-size:.85rem; font-weight:600;
  padding:.75rem 1.1rem; border-radius:12px; box-shadow:0 16px 40px rgba(20,30,55,.35);
  display:flex; align-items:center; opacity:0; transition:opacity .25s ease, transform .25s ease; max-width:420px;
}
.wf-ai-toast.show { opacity:1; transform:translate(-50%, 0); }

/* helper */
.wf-ai .min-w-0, .wf-ai-bubble .min-w-0 { min-width:0; }

/* ── dark mode ── */
[data-bs-theme="dark"] .wf-ai-bubble { background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .wf-ai-bubble:hover { box-shadow:0 10px 24px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .wf-ai-support { background:linear-gradient(135deg, rgba(176,209,54,.07), rgba(50,188,238,.07)); border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .wf-ai-prompt { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); }
[data-bs-theme="dark"] .wf-ai-modcard { background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .wf-ai-accent-blue,
[data-bs-theme="dark"] .wf-ai-accent-cyan   { --wfa-text:#7fd4f1; }
[data-bs-theme="dark"] .wf-ai-accent-green  { --wfa-text:#a7d65a; }
[data-bs-theme="dark"] .wf-ai-accent-pink   { --wfa-text:#f48fb8; }
[data-bs-theme="dark"] .wf-ai-accent-purple { --wfa-text:#b9a3ea; }
[data-bs-theme="dark"] .wf-ai-accent-orange,
[data-bs-theme="dark"] .wf-ai-accent-amber  { --wfa-text:#f3c06a; }
[data-bs-theme="dark"] .wf-ai-accent-teal   { --wfa-text:#5fd9c6; }

/* ── responsive ── */
@media (max-width: 575.98px) {
  .wf-ai-support { gap:.75rem; }
  .wf-ai-modcard { width:180px; }
  .wf-ai-prompt .btn { padding-left:.6rem; padding-right:.6rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIVE CHAT — team-inbox (.wf-ac-*)

   De klantwidget (.wf-lc-*) stond hier ook, maar is vervangen door de nieuwe
   widget in chat.css (increment 2). Die regels zijn daarom verwijderd; wat
   hieronder staat is alleen nog de inbox aan teamkant.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Team: inbox ── */
.wf-ac-list { max-height:calc(100vh - 230px); overflow-y:auto; }
.wf-ac-item {
  display:flex; align-items:flex-start; gap:.6rem; width:100%; text-align:left;
  border:0; border-bottom:1px solid var(--bs-border-color, #e9edf2);
  background:transparent; color:var(--bs-body-color); padding:.8rem 1rem; cursor:pointer;
}
.wf-ac-item:hover { background:var(--bs-secondary-bg, #f3f5f9); }
.wf-ac-item.active { background:rgba(50,188,238,.10); }
.wf-ac-item.closed { opacity:.6; }
.wf-ac-item-dot { width:9px; height:9px; border-radius:50%; margin-top:.35rem; flex-shrink:0; }
.wf-ac-item-dot.on { background:#13c296; }
.wf-ac-item-dot.off { background:#c4ccd6; }
.wf-ac-item-main { flex:1 1 auto; min-width:0; }
.wf-ac-item-top { display:flex; justify-content:space-between; gap:.5rem; }
.wf-ac-item-name { font-weight:600; }
.wf-ac-item-time { font-size:.7rem; color:var(--bs-secondary-color, #8a94a6); white-space:nowrap; }
.wf-ac-item-prev { display:block; font-size:.8rem; color:var(--bs-secondary-color, #8a94a6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-ac-badge { width:9px; height:9px; border-radius:50%; background:#dc3545; flex-shrink:0; margin-top:.35rem; }
.wf-ac-chat { min-height:calc(100vh - 230px); }
.wf-ac-empty { margin:auto; padding:3rem 1rem; }
.wf-ac-empty .bi { font-size:2.5rem; }
.wf-ac-presence { display:flex; align-items:center; gap:.35rem; color:var(--bs-secondary-color, #8a94a6); }
.wf-ac-presence .wf-ac-dot { width:8px; height:8px; border-radius:50%; background:#c4ccd6; }
.wf-ac-presence.is-online .wf-ac-dot { background:#13c296; }
.wf-ac-presence.is-online { color:#0e9c81; }
.wf-ac-presence.is-offline .wf-ac-dot { background:#f3c06a; }
.wf-ac-body { background:var(--bs-body-bg, #f6f8fb); }
.wf-ac-msg { display:flex; flex-direction:column; margin-bottom:.6rem; max-width:75%; }
.wf-ac-msg.mine { margin-left:auto; align-items:flex-end; }
.wf-ac-msg.them { margin-right:auto; align-items:flex-start; }
.wf-ac-bubble { padding:.55rem .85rem; border-radius:14px; white-space:pre-wrap; word-break:break-word; }
.wf-ac-msg.mine .wf-ac-bubble { background:var(--wf-blue, #32bcee); color:#fff; border-bottom-right-radius:4px; }
.wf-ac-msg.them .wf-ac-bubble { background:var(--bs-card-bg, #fff); border:1px solid var(--bs-border-color, #e9edf2); border-bottom-left-radius:4px; }
.wf-ac-meta { font-size:.68rem; color:var(--bs-secondary-color, #8a94a6); margin-top:.2rem; }
.wf-ac-sys { text-align:center; font-size:.74rem; color:var(--bs-secondary-color, #8a94a6); margin:.5rem 0; }
.wf-ac-agent { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; color:#0e9c81; background:rgba(19,194,150,.12); border:1px solid rgba(19,194,150,.30); border-radius:999px; padding:.1rem .55rem; }
.wf-ac-agent .wf-ac-dot { width:7px; height:7px; border-radius:50%; background:#13c296; }

/* ── dark mode ── */
[data-bs-theme="dark"] .wf-ac-msg.them .wf-ac-bubble { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
[data-bs-theme="dark"] .wf-ac-item.active { background:rgba(50,188,238,.14); }

/* ── responsive ── */
@media (max-width: 575.98px) {
  .wf-ac-list { max-height:340px; }
  .wf-ac-chat { min-height:420px; }
}

/* ── Meekijk-pil (admin kijkt mee in dashboard, in de bovenbalk) ── */
.wf-meekijk {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,174,31,.16); color:#b06f00;
  border:1px solid rgba(232,135,14,.35); border-radius:999px;
  padding:.22rem .25rem .22rem .8rem;
  font-size:.8125rem; font-weight:600; line-height:1.2; white-space:nowrap;
}
.wf-meekijk .wf-meekijk-label { display:inline-flex; align-items:center; gap:.35rem; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.wf-meekijk .wf-meekijk-label strong { font-weight:700; }
.wf-meekijk-stop {
  display:inline-flex; align-items:center; gap:.3rem;
  background:#1f2839; color:#fff !important; text-decoration:none;
  border-radius:999px; padding:.25rem .65rem; font-size:.75rem; font-weight:600;
  transition:background-color .15s ease;
}
.wf-meekijk-stop:hover { background:#000; color:#fff !important; }
[data-bs-theme="dark"] .wf-meekijk { background:rgba(255,174,31,.14); color:#f3c06a; border-color:rgba(232,135,14,.4); }
[data-bs-theme="dark"] .wf-meekijk-stop { background:#0f1626; }
[data-bs-theme="dark"] .wf-meekijk-stop:hover { background:#000; }
@media (max-width: 767.98px) {
  .wf-meekijk { font-size:.75rem; padding-left:.6rem; }
  .wf-meekijk .wf-meekijk-label { max-width:120px; }
}

/* ── Voorpagina modules (Layout website) ─────────────────────────────────────
   Kaart per gekozen module met live voorbeeld + klikbare achtergrond-swatches en
   patroon-thumbnails. Gebruikt de Webfix-tokens, dus werkt in light & dark mode. */
.wf-vpm-counter { font-size:.78rem; font-weight:600; color:var(--wf-text-soft); background:var(--wf-bg);
  border:1px solid var(--wf-border); border-radius:999px; padding:.2rem .7rem; white-space:nowrap; }
.wf-vpm-counter.is-full { color:var(--wf-pink); border-color:rgba(218,23,108,.35); background:rgba(218,23,108,.08); }

.wf-vpm-list { display:flex; flex-direction:column; gap:1rem; }
.wf-vpm-card { border:1px solid var(--wf-border); border-radius:14px; background:var(--wf-surface);
  overflow:hidden; box-shadow:0 1px 3px rgba(8,15,52,.04); transition:box-shadow .15s, border-color .15s; }
.wf-vpm-card.dragging { border-color:var(--wf-green); box-shadow:0 14px 32px rgba(8,15,52,.16); opacity:.85; }

.wf-vpm-card-head { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border-bottom:1px solid var(--wf-border-lt); }
.wf-vpm-drag { color:var(--wf-muted); cursor:grab; font-size:1.15rem; display:inline-flex; line-height:1; }
.wf-vpm-title { min-width:0; }
.wf-vpm-title .wf-vpm-name { font-weight:700; color:var(--wf-text); line-height:1.2; }
.wf-vpm-title .wf-vpm-sub { font-size:.76rem; color:var(--wf-muted); }
.wf-vpm-remove { margin-left:auto; flex-shrink:0; }

.wf-vpm-card-body { display:grid; grid-template-columns:300px minmax(0,1fr); gap:1.4rem; padding:1.1rem 1rem; }

.wf-vpm-prev-label { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--wf-muted); margin-bottom:.5rem; }
.wf-vpm-preview { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--wf-border);
  box-shadow:0 4px 14px rgba(8,15,52,.10); height:200px; display:flex; flex-direction:column; }
.wf-vpm-preview-bar { display:flex; align-items:center; gap:5px; padding:8px 11px; flex:none;
  border-bottom:1px solid rgba(128,128,128,.18); color:#2a3547; }
.wf-vpm-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.32; }
.wf-vpm-preview-body { position:relative; flex:1; padding:13px 14px; display:flex; flex-direction:column; gap:9px;
  background-position:center top; color:#2a3547; }
.wf-vpm-chip { align-self:flex-start; font-size:.62rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--wf-green-subtle); color:var(--wf-green-text); }
.wf-vpm-heading { font-size:.98rem; font-weight:700; line-height:1.2; }
.wf-vpm-rows { display:flex; flex-direction:column; gap:7px; }
.wf-vpm-row { display:flex; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(128,128,128,.10); }
.wf-vpm-bar { height:7px; border-radius:4px; background:currentColor; opacity:.38; }
.wf-vpm-rows .wf-vpm-row:nth-child(1) .wf-vpm-bar { width:85%; }
.wf-vpm-rows .wf-vpm-row:nth-child(2) .wf-vpm-bar { width:62%; }
.wf-vpm-rows .wf-vpm-row:nth-child(3) .wf-vpm-bar { width:74%; }

.wf-vpm-controls { display:flex; flex-direction:column; gap:1.1rem; }
.wf-vpm-ctl-label { font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--wf-text-soft); margin-bottom:.6rem; }
.wf-vpm-swatches { display:flex; gap:.7rem; flex-wrap:wrap; }
.wf-vpm-swatch { display:flex; flex-direction:column; align-items:center; gap:.35rem; border:none;
  background:transparent; cursor:pointer; padding:2px; }
.wf-vpm-swatch-box { width:52px; height:40px; border-radius:9px; border:1px solid var(--wf-border);
  box-shadow:0 1px 2px rgba(8,15,52,.06); display:flex; align-items:center; justify-content:center;
  background-color:var(--wf-bg); background-repeat:repeat; background-position:center; transition:box-shadow .12s; }
.wf-vpm-swatch.selected .wf-vpm-swatch-box { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); }
.wf-vpm-swatch-label { font-size:.74rem; font-weight:500; color:var(--wf-muted); }
.wf-vpm-swatch.selected .wf-vpm-swatch-label { font-weight:700; color:var(--wf-text); }
/* "Standaard"/auto-swatch: diagonale wit-grijs verloop = "module bepaalt zelf". */
.wf-vpm-swatch-box.is-auto { background:linear-gradient(135deg,#fff 0 50%,#e6e6e6 50% 100%); }

/* Eigen-kleur-swatch: het vierkantje toont de gekozen kleur; de verborgen color-input eroverheen
   opent de systeem-kleurkiezer bij een klik. Het pipetje geeft aan dat het een kiezer is. */
.wf-vpm-swatch-picker { position:relative; margin:0; }
.wf-vpm-picker-box { position:relative; overflow:hidden; color:#fff; }
.wf-vpm-picker-box .bi-eyedropper { font-size:.85rem; text-shadow:0 1px 2px rgba(0,0,0,.45); pointer-events:none; }
.wf-vpm-color-input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  border:none; opacity:0; cursor:pointer; }
/* Patroon-thumbs tonen het echte site-patroon. Op de site is het patroon bewust heel
   subtiel; in de kleine swatch zetten we een neutrale grijze achtergrond zodat het motief
   tóch herkenbaar is bij het kiezen. */
[class*="wf-vpm-pat-"] { background-color:#eef0f3; background-repeat:repeat; background-position:center; }
.wf-vpm-pat-dots       { background-image:url(/site/business1/images/wf-pattern-dots.svg); }
.wf-vpm-pat-grid       { background-image:url(/site/business1/images/wf-pattern-grid.svg); }
.wf-vpm-pat-lines      { background-image:url(/site/business1/images/wf-pattern-lines.svg); }
.wf-vpm-pat-crosshatch { background-image:url(/site/business1/images/wf-pattern-crosshatch.svg); }
.wf-vpm-pat-plus       { background-image:url(/site/business1/images/wf-pattern-plus.svg); }
.wf-vpm-pat-zigzag     { background-image:url(/site/business1/images/wf-pattern-zigzag.svg); }
.wf-vpm-pat-wave       { background-image:url(/site/business1/images/wf-pattern-wave.svg); }
.wf-vpm-pat-circles    { background-image:url(/site/business1/images/wf-pattern-circles.svg); }

/* Patroon-overlaylaag in het voorbeeld: aparte laag, zodat de sterkte (opacity) alleen het
   patroon vervaagt en niet de tekst erover — precies zoals op de echte site. */
.wf-vpm-pat-layer { position:absolute; inset:0; background-repeat:repeat; background-position:center top;
  pointer-events:none; z-index:0; }
/* Zowel de patroon- als de sfeer/effect-laag blijven áchter de tekst. */
.wf-vpm-fx-layer { position:absolute; inset:0; pointer-events:none; z-index:0; }
.wf-vpm-preview-body > :not(.wf-vpm-pat-layer):not(.wf-vpm-fx-layer) { position:relative; z-index:1; }

/* Sfeer/effect-swatches: een mini-preview van elk effect in het kleine vierkantje. */
.wf-vpm-fx-geen     { background:#eef0f3; }
.wf-vpm-fx-gradient { background:linear-gradient(135deg,#1f7ae0,#33c3b0); }
.wf-vpm-fx-beeld    { background:radial-gradient(circle at 28% 30%,#7db9e8 0 40%,transparent 60%),#eef0f3; }
.wf-vpm-fx-foto     { background:linear-gradient(135deg,#203a43,#2c5364); }
.wf-vpm-fx-vormen   { background:radial-gradient(circle at 26% 34%,rgba(31,122,224,.35) 0 6px,transparent 7px),
                                 radial-gradient(circle at 74% 68%,rgba(51,195,176,.35) 0 4px,transparent 5px),#eef0f3; }
.wf-vpm-fx-deeltjes { background:radial-gradient(rgba(20,30,55,.45) 1px,transparent 1.6px) 0 0/8px 8px,#eef0f3; }

/* Beeldkiezer: verschijnt alleen bij effect "beeld"/"foto"; data-show bepaalt welke set thumbs. */
.wf-vpm-images.is-hidden { display:none; }
.wf-vpm-images[data-show="beeld"] .wf-vpm-thumb-foto  { display:none; }
.wf-vpm-images[data-show="foto"]  .wf-vpm-thumb-beeld { display:none; }
.wf-vpm-thumbs { display:flex; gap:.55rem; flex-wrap:wrap; }
.wf-vpm-thumb { width:66px; height:42px; border-radius:9px; border:1px solid var(--wf-border);
  background-size:cover; background-position:center; background-color:#eef0f3; cursor:pointer; padding:0;
  box-shadow:0 1px 2px rgba(8,15,52,.06); transition:box-shadow .12s; }
/* Decoratieve hoekbeelden zijn vaak licht/transparant -> donkere thumb zodat ze zichtbaar zijn. */
.wf-vpm-thumb-beeld { background-color:#162340; background-size:contain; background-repeat:no-repeat; }

/* "Eigen foto"-tegel: gestreepte tegel met plus + label; toont de gekozen foto zodra die er is. */
.wf-vpm-thumb-eigen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-style:dashed; background-color:var(--wf-bg); color:var(--wf-muted); }
.wf-vpm-thumb-eigen .bi-plus-lg { font-size:.95rem; line-height:1; }
.wf-vpm-thumb-eigen-label { font-size:.55rem; font-weight:600; line-height:1; text-align:center; }
.wf-vpm-thumb-eigen[style*="background-image"] { border-style:solid; }
.wf-vpm-thumb-eigen[style*="background-image"] .bi-plus-lg,
.wf-vpm-thumb-eigen[style*="background-image"] .wf-vpm-thumb-eigen-label { display:none; }
.wf-vpm-thumb:hover { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 3px var(--wf-border); }
.wf-vpm-thumb.selected { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); }

/* Sterkte-schuif (patroon-opacity). */
.wf-vpm-strength { display:flex; align-items:center; gap:.7rem; }
.wf-vpm-strength .form-range { flex:1; margin:0; }
.wf-vpm-opacity-val { font-size:.8rem; font-weight:700; color:var(--wf-text); min-width:3.2ch; text-align:right; }

/* Sterkte + grootte samen; uitgegrijsd als er geen patroon gekozen is. */
.wf-vpm-pat-opts { display:flex; flex-direction:column; gap:1.1rem; }
.wf-vpm-pat-opts.is-off { opacity:.45; pointer-events:none; }

/* Patroon-grootte-pillen (fijn/normaal/grof). */
.wf-vpm-sizes { display:flex; gap:.5rem; flex-wrap:wrap; }
.wf-vpm-size-btn { border:1px solid var(--wf-border); background:var(--wf-surface); color:var(--wf-text-soft);
  border-radius:999px; padding:.34rem .85rem; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .12s; }
.wf-vpm-size-btn:hover { border-color:var(--wf-green); color:var(--wf-text); }
.wf-vpm-size-btn.selected { background:var(--wf-green-subtle); border-color:var(--wf-green); color:var(--wf-green-text); }

.wf-vpm-empty { border:1px dashed var(--wf-border); border-radius:12px; padding:1.5rem; text-align:center;
  color:var(--wf-muted); background:var(--wf-bg); }

/* Hulp-kaart: subtiele groen/blauw verloop, sluit aan op het ontwerp. */
.webfix-card-help { background:linear-gradient(150deg, rgba(176,209,54,.09), rgba(50,188,238,.07)) !important; }
[data-bs-theme="dark"] .webfix-card-help { background:linear-gradient(150deg, rgba(176,209,54,.10), rgba(50,188,238,.08)) !important; }

[data-bs-theme="dark"] .wf-vpm-swatch-box.is-auto { background:linear-gradient(135deg,#3a4658 0 50%,#2a3447 50% 100%); }

@media (max-width: 767.98px) {
  .wf-vpm-card-body { grid-template-columns:1fr; }
}

/* ── Voorpagina modules v2 (rustige lijst + bewerk-pop-up) ───────────────────
   Nieuw ontwerp: per blok een rij met mini live voorbeeld + Bewerken-knop; het
   bewerken gebeurt in een pop-up met stappen. Alles via de Webfix-tokens, dus
   light & dark werken mee. Prefix: wf-vpe- (de oude wf-vpm- is vervangen). */
@keyframes wfFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@keyframes wfDrift { from{ background-position:0 0 } to{ background-position:28px 28px } }
@keyframes wfPop   { from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }

.wf-vpe-counter { font-size:.78rem; font-weight:700; color:var(--wf-green-text); background:var(--wf-green-subtle);
  border:1px solid rgba(125,194,66,.35); border-radius:999px; padding:.2rem .7rem; white-space:nowrap; }
.wf-vpe-counter.is-full { color:var(--wf-pink); border-color:rgba(218,23,108,.35); background:rgba(218,23,108,.08); }

/* Module toevoegen — één kaart: kop (titel + Uitlegvideo) + twee kolommen met scheidingslijn */
.wf-vpe-addcard { overflow:hidden; }
.wf-vpe-addhead { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:1rem 1.5rem; border-bottom:1px solid var(--wf-border-lt); }
.wf-vpe-addbody { display:flex; gap:1.6rem; align-items:flex-start; flex-wrap:wrap; padding:1.25rem 1.5rem; }
.wf-vpe-addcol { flex:1.3 1 280px; min-width:280px; }
.wf-vpe-helpcol { flex:1 1 260px; min-width:260px; border-left:1px solid var(--wf-border-lt); padding-left:1.6rem; }
.wf-vpe-videobtn { display:inline-flex; align-items:center; gap:8px; padding:.5rem .9rem; border:1px solid var(--wf-border);
  border-radius:999px; background:var(--wf-surface); color:var(--wf-text); font-weight:700; font-size:.83rem; cursor:pointer; flex:none; transition:all .15s; }
.wf-vpe-videobtn:hover { border-color:var(--wf-green); color:var(--wf-green-text); background:var(--wf-green-subtle); }
.wf-vpe-videobtn-play { width:24px; height:24px; border-radius:50%; background:var(--wf-pink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; flex:none; }
@media (max-width: 767.98px) {
  .wf-vpe-helpcol { border-left:none; padding-left:0; }
  .wf-vpe-addhead, .wf-vpe-addbody { padding-left:1.1rem; padding-right:1.1rem; }
}

/* Lijst + rijen */
.wf-vpe-list { display:flex; flex-direction:column; gap:.65rem; margin-top:1rem; }
.wf-vpe-row { display:flex; align-items:center; gap:.95rem; padding:.75rem .85rem; border-radius:13px;
  border:1px solid var(--wf-border); background:var(--wf-surface); box-shadow:0 1px 2px rgba(8,15,52,.03);
  transition:box-shadow .15s, border-color .15s; }
.wf-vpe-row.dragging { border-color:var(--wf-green); box-shadow:0 14px 32px rgba(8,15,52,.16); opacity:.85; }
.wf-vpe-drag { color:var(--wf-border); cursor:grab; display:inline-flex; padding:2px; flex:none; font-size:1.1rem;
  /* On touch the browser claims a drag-from-the-grip gesture as a scroll unless we opt out here;
     without this dragula never sees the move and the page scrolls away under the finger. Only the
     grip is locked, so touching a row elsewhere still scrolls the page normally. */
  touch-action:none; -webkit-user-select:none; user-select:none; }
.wf-vpe-ico { flex:none; }
.wf-vpe-modtxt { min-width:0; flex:1; }
.wf-vpe-name { font-size:.97rem; font-weight:700; color:var(--wf-text); line-height:1.2; }
.wf-vpe-summary { font-size:.79rem; color:var(--wf-muted); margin-top:2px; display:inline-flex; align-items:center; }
.wf-vpe-editbtn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border:none; border-radius:9px;
  background:var(--wf-green); color:#fff; font-weight:700; font-size:.84rem; cursor:pointer; flex:none; transition:background .15s; }
.wf-vpe-editbtn:hover { background:#6aaa35; }
.wf-vpe-removebtn { width:38px; height:38px; border:1px solid rgba(220,53,69,.35); border-radius:9px; background:var(--wf-surface);
  color:#dc3545; cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center; transition:background .12s; }
.wf-vpe-removebtn:hover { background:rgba(220,53,69,.08); border-color:rgba(220,53,69,.55); }
.wf-vpe-empty { border:1px dashed var(--wf-border); border-radius:12px; padding:1.5rem; text-align:center;
  color:var(--wf-muted); background:var(--wf-bg); margin-top:1rem; }

/* Mini live voorbeeld in de rij */
.wf-vpe-mini { position:relative; width:104px; height:64px; flex:none; border-radius:10px; overflow:hidden;
  border:1px solid var(--wf-border); box-shadow:0 2px 6px rgba(8,15,52,.08); background:#fff; }
.wf-vpe-mini-content { position:relative; z-index:2; padding:9px 10px; display:flex; flex-direction:column; gap:5px; height:100%; }
.wf-vpe-mini-chip { align-self:flex-start; font-size:.5rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px; }
.wf-vpe-mini-bar { height:6px; border-radius:3px; border:1px solid; width:70%; }
.wf-vpe-mini-bar.w2 { width:52%; }

/* Pop-up */
.wf-vpe-noscroll { overflow:hidden; }
/*  De link-kiezer wordt ook vanuit het blok-bewerkvenster geopend (de knop "Koppelen" bij de knop-link
    van een actie-balk). Dat stapelen — venster én verduisterde achtergrond erboven — regelt
    wfModalBoven in wf-confirm.js, dus hier staat bewust geen vaste z-index meer. */

.wf-vpe-modal { position:fixed; inset:0; z-index:1090; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.46); backdrop-filter:blur(3px); }
.wf-vpe-modal.open { display:flex; }
.wf-vpe-dialog { width:min(780px,96vw); max-height:92vh; overflow-y:auto; background:var(--wf-surface); border-radius:18px;
  box-shadow:0 30px 80px rgba(8,15,52,.35); animation:wfPop .22s cubic-bezier(.22,.61,.36,1); }
.wf-vpe-modal-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem;
  background:var(--wf-surface); border-bottom:1px solid var(--wf-border-lt); border-radius:18px 18px 0 0; }
.wf-vpe-modal-title { font-size:1.05rem; font-weight:800; color:var(--wf-text); }
.wf-vpe-modal-sub { font-size:.78rem; color:var(--wf-muted); }
.wf-vpe-close { width:36px; height:36px; border:1px solid var(--wf-border); border-radius:9px; background:var(--wf-surface);
  color:var(--wf-text-soft); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.wf-vpe-close:hover { color:var(--wf-text); border-color:var(--wf-text-soft); }
.wf-vpe-modal-body { padding:1.4rem 1.25rem; }
.wf-vpe-modal-foot { display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--wf-border-lt); flex-wrap:wrap; }

/* Groot voorbeeld in de pop-up */
/*  Iets hoger dan voorheen (210px): in een actie-balk staan kop, tekst én knop onder elkaar en dan
    was het voorbeeld te krap om er iets van te zien (Tom, 21-09-2026). */
.wf-vpe-preview { position:relative; height:280px; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(8,15,52,.12); background:#fff; }
.wf-vpe-preview.is-plain { outline:1px solid var(--wf-border); outline-offset:-1px; }
.wf-vpe-preview-tag { position:absolute; top:10px; right:12px; z-index:3; display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:999px; background:rgba(255,255,255,.9); color:#5a6a85; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.wf-vpe-pv-content { position:relative; z-index:2; padding:18px 20px; display:flex; flex-direction:column; gap:10px; height:100%; }
.wf-vpe-pv-chip { align-self:flex-start; font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.wf-vpe-pv-heading { font-size:1.05rem; font-weight:700; line-height:1.2; }
.wf-vpe-pv-rows { display:flex; flex-direction:column; gap:7px; max-width:440px; }
.wf-vpe-pv-row { height:20px; border-radius:8px; border:1px solid; width:85%; }
.wf-vpe-pv-row.w2 { width:62%; }
.wf-vpe-pv-row.w3 { width:74%; }

/* Stappen */
/* Live voorbeeld: het ECHTE blok van de website, in een iframe over de nagebouwde tegel heen. Hij
   verschijnt pas als hij geladen is, zodat je tijdens het verversen de tegel blijft zien in plaats
   van een wit vlak (Tom, 21-09-2026). De muis gaat er doorheen: dit is een voorbeeld, geen website. */
.wf-vpe-previewwrap { position:relative; }
.wf-vpe-liveframe { position:absolute; inset:0; z-index:2; width:100%; height:100%; border:0; background:transparent;
  pointer-events:none; opacity:0; transition:opacity .25s ease; }
.wf-vpe-liveframe.is-klaar { opacity:1; }

/* De stap "Content invoeren" van een actie-balk: een uitklapper, zodat het venster begint bij wat de
   klant het eerst ziet -- de opmaak -- en de velden erbij komen als hij ze nodig heeft. */
/*  De uitklapper moet er als een knop uitzien, anders ziet niemand dat je erop kunt klikken
    (Tom, 21-09-2026): een randje, wat lucht eromheen en een pijl die groot genoeg is om op te vallen. */
.wf-vpe-acc { width:100%; display:flex; align-items:center; gap:.6rem; margin:0; padding:.8rem 1rem;
  border:1px solid var(--wf-border, #e2e8f0); border-radius:14px; background:var(--wf-surface, #fff);
  cursor:pointer; text-align:left; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.wf-vpe-acc:hover { border-color:rgba(192,0,111,.35); background:#fcfcfe; box-shadow:0 2px 10px rgba(1,16,61,.06); }
.wf-vpe-acc:focus-visible { outline:3px solid rgba(50,188,238,.45); outline-offset:2px; }
.wf-vpe-acc.is-open { border-color:rgba(192,0,111,.45); }
.wf-vpe-acc-note { font-weight:500; font-size:.79rem; color:var(--wf-muted); }
.wf-vpe-acc-ch { margin-left:auto; font-size:1.25rem; line-height:1; transition:transform .2s ease; color:var(--webfix-magenta, #c0006f); }
.wf-vpe-acc.is-open .wf-vpe-acc-ch { transform:rotate(180deg); }
.wf-vpe-acc-body { padding:1rem .25rem .2rem; }
.wf-vpe-hoogte { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border:1px solid var(--wf-border);
  border-radius:999px; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--wf-text); }
.wf-vpe-hoogte input { position:absolute; opacity:0; pointer-events:none; }
.wf-vpe-hoogte.selected { border-color:var(--webfix-magenta, #c0006f); color:var(--webfix-magenta, #c0006f); box-shadow:0 0 0 1px var(--webfix-magenta, #c0006f) inset; }

/* Een blok boven de pakketgrens: het staat in de lijst, maar de website toont het niet. Grijs, zodat
   je in één oogopslag ziet dat het er niet toe doet -- en met de reden ernaast (Tom, 21-09-2026). */
.vp-m.-buiten { opacity:.55; }
.vp-m.-buiten .vp-mbody b { color:var(--wf-muted); }
.vp-buiten { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px;
  background:rgba(1,16,61,.05); color:var(--wf-muted); font-size:.74rem; font-weight:700; white-space:nowrap; }

.wf-vpe-step { margin-top:1.5rem; }
.wf-vpe-step-head { display:flex; align-items:center; gap:.55rem; font-size:.94rem; font-weight:700; color:var(--wf-text); margin-bottom:.7rem; }
.wf-vpe-stepnum { width:22px; height:22px; border-radius:50%; background:var(--wf-green); color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex:none; }
.wf-vpe-step-note { font-size:.79rem; color:var(--wf-muted); margin:-.45rem 0 .8rem 1.9rem; }
.wf-vpe-hint { display:inline-flex; align-items:center; gap:.4rem; margin:.75rem 0 0 1.9rem; padding:.4rem .8rem; border-radius:999px;
  background:var(--wf-green-subtle); color:var(--wf-green-text); font-size:.79rem; font-weight:600; }

/* Achtergrond-swatches */
.wf-vpe-swatches { display:flex; gap:.7rem; flex-wrap:wrap; }
.wf-vpe-swatch { display:flex; flex-direction:column; align-items:center; gap:.35rem; border:none; background:transparent; cursor:pointer; padding:2px; margin:0; }
.wf-vpe-swatch-box { position:relative; width:54px; height:42px; border-radius:10px; border:1px solid var(--wf-border);
  box-shadow:0 1px 2px rgba(8,15,52,.06); display:flex; align-items:center; justify-content:center; background:var(--wf-bg); transition:box-shadow .12s; }
.wf-vpe-swatch.selected .wf-vpe-swatch-box { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); }
.wf-vpe-swatch-box.is-auto { background:linear-gradient(135deg,#fff 0 50%,#e6e6e6 50% 100%); }
.wf-vpe-swatch-label { font-size:.73rem; font-weight:500; color:var(--wf-muted); }
.wf-vpe-swatch.selected .wf-vpe-swatch-label { font-weight:700; color:var(--wf-text); }
.wf-vpe-picker-box { overflow:hidden; color:#fff; }
.wf-vpe-picker-box .bi-eyedropper { font-size:.85rem; text-shadow:0 1px 2px rgba(0,0,0,.45); pointer-events:none; }
.wf-vpe-color-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; cursor:pointer; }
[data-bs-theme="dark"] .wf-vpe-swatch-box.is-auto { background:linear-gradient(135deg,#3a4658 0 50%,#2a3447 50% 100%); }

/* Eigen-kleur-blokje */
.wf-vpe-eigen { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; padding:.7rem .85rem; background:var(--wf-bg);
  border:1px solid var(--wf-border); border-radius:11px; max-width:320px; }
.wf-vpe-eigen-dot { width:34px; height:30px; border-radius:8px; border:1px solid var(--wf-border); flex:none; }
.wf-vpe-eigen-title { font-size:.83rem; font-weight:700; color:var(--wf-text); }
.wf-vpe-eigen-hex { font-size:.76rem; color:var(--wf-muted); font-family:monospace; }

/* Opmaak-tegels (statische miniatuur per effect) */
.wf-vpe-fxtiles { display:flex; gap:.75rem; flex-wrap:wrap; }
.wf-vpe-fxtile { display:flex; flex-direction:column; align-items:center; gap:.4rem; border:none; background:transparent; cursor:pointer; padding:2px; width:82px; }
.wf-vpe-fxlabel { font-size:.72rem; font-weight:500; color:var(--wf-muted); text-align:center; line-height:1.25; }
.wf-vpe-fxtile.selected .wf-vpe-fxlabel { font-weight:700; color:var(--wf-text); }
.wf-vpe-fxthumb { position:relative; display:block; width:72px; height:48px; border-radius:10px; border:1px solid var(--wf-border);
  background:#eef0f3; overflow:hidden; box-shadow:0 1px 2px rgba(8,15,52,.06); transition:box-shadow .12s; }
.wf-vpe-fxtile.selected .wf-vpe-fxthumb { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); border-color:transparent; }
.wf-vpe-fx-geen { background:#eef0f3; }
.wf-vpe-fx-gradient { background:linear-gradient(135deg,#1f7ae0,#33c3b0); }
.wf-vpe-fx-beeld { background:#18294a; }
.wf-vpe-fx-beeld::after { content:""; position:absolute; right:-16%; bottom:-30%; width:60%; height:92%;
  background:radial-gradient(circle at 40% 40%,#5b8fd6,#16305e); transform:rotate(-12deg); border-radius:8px; }
.wf-vpe-fx-foto { background:linear-gradient(135deg,#203a43,#2c5364); }
.wf-vpe-fx-vormen { background:#eef0f3; }
.wf-vpe-fx-vormen::before { content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:rgba(31,122,224,.30); right:14%; top:16%; }
.wf-vpe-fx-vormen::after  { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:rgba(51,195,176,.36); left:16%; bottom:16%; }
.wf-vpe-fx-deeltjes { background:#eef0f3; background-image:radial-gradient(rgba(20,30,55,.45) 1.4px,transparent 1.6px); background-size:9px 9px; }

/* Beeld-/foto-tegels */
.wf-vpe-tiles { display:flex; gap:.6rem; flex-wrap:wrap; }
.wf-vpe-tile { position:relative; width:64px; height:46px; border-radius:10px; border:1px solid var(--wf-border);
  background-size:cover; background-position:center; background-color:#eef0f3; cursor:pointer; padding:0; box-shadow:0 1px 2px rgba(8,15,52,.06); transition:box-shadow .12s; }
.wf-vpe-tile.selected { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); }
.wf-vpe-tile-deco { background-color:#162340; background-size:contain; background-repeat:no-repeat; background-position:center; }

/* Patroon-tegels (effect "patroon"): de patronen uit de centrale lijst, met de opmaak van de website
   (site/_shared/kop-vangnet.css). Het script zet de kleur uit stap 1 op elk staaltje. */
.wf-vpe-fx-patroon { background:#1f4e8c; overflow:hidden; }
.wf-vpe-patgroep { margin:.7rem 0 .4rem; font-weight:700; font-size:12.5px; color:var(--wf-text); }
.wf-vpe-pattiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:.55rem; }
.wf-vpe-pattile { display:flex; flex-direction:column; gap:5px; padding:4px 4px 7px; border:1px solid var(--wf-border); border-radius:11px;
  background:var(--wf-surface); cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
.wf-vpe-pattile:hover { border-color:var(--wf-green); }
.wf-vpe-pattile:focus-visible { outline:2px solid var(--wf-green); outline-offset:2px; }
.wf-vpe-pattile.selected { box-shadow:0 0 0 2px var(--wf-surface), 0 0 0 4px var(--wf-green); border-color:transparent; }
.wf-vpe-patstaal { position:relative; display:block; height:48px; border-radius:8px; overflow:hidden; border:1px solid rgba(8,15,52,.08); background:#eef0f3; }
.wf-vpe-patnaam { padding:0 3px; font-size:11.5px; font-weight:600; line-height:1.25; color:var(--wf-text); }
.wf-vpe-pattile.selected .wf-vpe-patnaam { font-weight:700; }
.wf-vpe-eigenfoto { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-style:dashed;
  color:var(--wf-muted); font-size:.58rem; font-weight:700; background-color:var(--wf-bg); }
.wf-vpe-eigenfoto i { font-size:1rem; }
.wf-vpe-eigenfoto.has-img { border-style:solid; }
.wf-vpe-eigenfoto.has-img i, .wf-vpe-eigenfoto.has-img span { display:none; }

@media (prefers-reduced-motion: reduce) {
  .wf-vpe-dialog, [class*="wf-vpe-fx-"], .wf-vpe-mini [style*="animation"] { animation:none !important; }
}
@media (max-width: 640px) {
  .wf-vpe-row { flex-wrap:wrap; row-gap:.55rem; }
  .wf-vpe-mini { width:84px; height:52px; }
  .wf-vpe-modtxt { min-width:130px; }
  .wf-vpe-editbtn { flex:1 1 auto; justify-content:center; }
  .wf-vpe-modal-body { padding:1.1rem 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Financieel — klantpagina (nieuw ontwerp). Accenten exact uit het ontwerp;
   neutrale vlakken/tekst lopen via --wf-* tokens zodat dark mode meekleurt.
════════════════════════════════════════════════════════════════════════ */
.webfix-finance {
  --fin-green:      #7dc242;
  --fin-green-dark: #6aaa35;
  --fin-green-text: #598f2b;
  --fin-amber:      #c98a00;
  --fin-amber-bg:   #fff1d6;
  --fin-amber-bd:   #f6e0ae;
  --fin-cyan:       #0e97ad;
  --fin-active:     #13a65c;
  --fin-dot:        #13deb9;
  color: var(--wf-text);
}
[data-bs-theme="dark"] .webfix-finance { --fin-amber-bg: rgba(201,138,0,.16); }

/* Titelbalk */
.fin-titlebar { background:var(--wf-surface); border:1px solid var(--wf-border); border-radius:16px; box-shadow:0 1px 3px rgba(8,15,52,.03); padding:22px 26px; margin-bottom:22px; }
.fin-crumb { display:flex; align-items:center; gap:9px; font-size:.82rem; margin-bottom:6px; }
.fin-crumb .here { color:var(--wf-pink); font-weight:700; }
.fin-crumb .sep { width:4px; height:4px; border-radius:50%; background:#c2ccda; }
.fin-crumb .muted { color:var(--wf-muted); font-weight:500; }
.fin-titlebar h1 { font-size:2.1rem; font-weight:800; letter-spacing:-.025em; margin:0; color:var(--wf-text); }
.fin-titlebar p { color:var(--wf-muted); margin:6px 0 0; font-size:.95rem; }

/* Grid + kolommen */
.fin-grid { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:22px; align-items:start; }
.fin-col { display:flex; flex-direction:column; gap:22px; }

/* Kaart */
.fin-card { background:var(--wf-surface); border:1px solid var(--wf-border); border-radius:16px; box-shadow:0 1px 3px rgba(8,15,52,.04); overflow:hidden; }

/* Openstaande factuur (prominent) */
.fin-open { position:relative; overflow:hidden; background:var(--wf-surface); border:1px solid var(--fin-amber-bd); border-radius:16px; box-shadow:0 8px 22px rgba(201,138,0,.10); }
.fin-open-bar { height:4px; background:linear-gradient(90deg,#ffb72e,#ff8a3d); }
.fin-open-body { padding:22px 24px; }
.fin-open-head { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.fin-open-head h2 { font-size:1.12rem; font-weight:700; margin:0; color:var(--wf-text); }
.fin-icon-amber { width:32px; height:32px; border-radius:9px; background:var(--fin-amber-bg); color:var(--fin-amber); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.fin-pill-pay { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:#b26a00; background:var(--fin-amber-bg); border:1px solid #f6dda6; padding:4px 11px; border-radius:999px; }
.fin-open-row { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.fin-open-num { font-size:.78rem; color:var(--wf-muted); font-weight:600; }
.fin-open-amt { font-size:2.1rem; font-weight:800; color:var(--wf-text); letter-spacing:-.02em; }
.fin-open-due { font-size:.82rem; color:#d38a00; font-weight:600; }
.fin-open-acts { display:flex; align-items:center; gap:10px; }

/* Knoppen */
.fin-btn-green { display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border:none; border-radius:11px; background:var(--fin-green); color:#fff; font-size:.95rem; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(125,194,66,.32); transition:.15s; text-decoration:none; }
.fin-btn-green:hover { background:var(--fin-green-dark); box-shadow:0 9px 22px rgba(125,194,66,.42); color:#fff; }
.fin-btn-green.sm { padding:7px 13px; border-radius:8px; font-size:.78rem; box-shadow:none; }
.fin-iconbtn { width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--wf-border); border-radius:11px; background:var(--wf-surface); color:var(--wf-text-soft); cursor:pointer; font-size:1.2rem; transition:.15s; text-decoration:none; }
.fin-iconbtn.sm { width:34px; height:34px; border-radius:8px; font-size:1.05rem; }
.fin-iconbtn:hover { border-color:var(--fin-green); color:var(--fin-green-text); }
.fin-btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--wf-border); border-radius:9px; background:var(--wf-surface); color:var(--wf-text-soft); font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s; }
.fin-btn-ghost:hover { border-color:var(--fin-green); color:var(--fin-green-text); }

/* Facturen-tabel */
.fin-sec-head { display:flex; align-items:center; gap:11px; padding:20px 24px 16px; }
.fin-icon-cyan { width:34px; height:34px; border-radius:9px; background:rgba(30,200,222,.13); color:var(--fin-cyan); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.fin-sec-head h2 { font-size:1.12rem; font-weight:700; margin:0; color:var(--wf-text); }
.fin-sec-sub { font-size:.8rem; color:var(--wf-muted); margin-top:1px; }
.fin-thead { display:grid; grid-template-columns:1.3fr 1.1fr .9fr auto; gap:12px; padding:9px 24px; background:var(--wf-hover-bg); border-top:1px solid var(--wf-border-lt); border-bottom:1px solid var(--wf-border-lt); font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--wf-muted); }
.fin-thead .r { text-align:right; }
.fin-row { display:grid; grid-template-columns:1.3fr 1.1fr .9fr auto; gap:12px; padding:14px 24px; border-bottom:1px solid var(--wf-border-lt); align-items:center; transition:background .12s; }
.fin-row:last-child { border-bottom:none; }
.fin-row:hover { background:var(--wf-hover-bg); }
.fin-row .inv { display:flex; align-items:center; gap:11px; min-width:0; }
.fin-row .num { font-size:.9rem; font-weight:700; color:var(--wf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-row .per { font-size:.74rem; color:var(--wf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-row .date { font-size:.86rem; color:var(--wf-text-soft); font-weight:500; }
.fin-row .amt { font-size:.92rem; font-weight:700; color:var(--wf-text); }
.fin-row .acts { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.fin-mbox { width:34px; height:34px; flex:none; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.fin-mbox.open { background:var(--fin-amber-bg); color:var(--fin-amber); }
.fin-mbox.paid { background:rgba(125,194,66,.12); color:var(--fin-green-text); }

/* Status-pillen */
.fin-pill { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.fin-pill .pdot { width:6px; height:6px; border-radius:50%; }
.fin-pill.open { background:var(--fin-amber-bg); color:#b26a00; border:1px solid #f6dda6; }
.fin-pill.open .pdot { background:#e0a000; }
.fin-pill.paid { background:rgba(19,222,185,.12); color:var(--fin-active); border:1px solid rgba(19,222,185,.4); }
.fin-pill.paid .pdot { background:var(--fin-dot); }

/* Abonnementskaart */
.fin-sub-head { position:relative; padding:20px 22px 18px; background:linear-gradient(150deg,rgba(125,194,66,.10),rgba(30,200,222,.08)); }
.fin-sub-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fin-sub-label { font-size:.82rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--fin-green-text); display:inline-flex; align-items:center; gap:9px; }
.fin-sub-logo { width:22px; height:22px; object-fit:contain; flex:none; }
.fin-pill-active { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:var(--fin-active); background:rgba(19,222,185,.12); border:1px solid rgba(19,222,185,.4); padding:4px 11px; border-radius:999px; }
.fin-pill-active.cancelled { color:#d34663; background:rgba(211,70,99,.12); border-color:rgba(211,70,99,.4); }
.fin-pill-active .pdot { width:6px; height:6px; border-radius:50%; background:var(--fin-dot); }
.fin-pill-active.cancelled .pdot { background:#d34663; }
.fin-plan-name { margin-top:14px; font-size:1.32rem; font-weight:800; color:var(--wf-text); letter-spacing:-.01em; }
.fin-plan-price { display:flex; align-items:baseline; gap:6px; margin-top:4px; }
.fin-plan-price .amt { font-size:2rem; font-weight:800; color:var(--wf-text); letter-spacing:-.02em; }
.fin-plan-price .cyc { font-size:.9rem; color:var(--wf-muted); font-weight:600; }
.fin-sub-rows { padding:6px 22px 4px; }
.fin-sub-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--wf-border-lt); }
.fin-sub-row .lbl { display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--wf-muted); }
.fin-sub-row .lbl i { font-size:1.1rem; color:var(--wf-muted); }
.fin-sub-row .val { font-size:.88rem; font-weight:700; color:var(--wf-text); text-align:right; }
.fin-sub-block { padding:14px 22px 8px; }
.fin-sub-cap { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--wf-muted); margin-bottom:10px; }
.fin-feat { display:flex; flex-direction:column; gap:9px; }
.fin-feat-item { display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--wf-text-soft); }
.fin-feat-item i { font-size:1.1rem; color:var(--fin-green); flex:none; }
.fin-mod-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--wf-border-lt); border-radius:11px; margin-bottom:8px; background:var(--wf-surface); }
.fin-mod-item .nm { display:inline-flex; align-items:center; gap:9px; font-size:.85rem; font-weight:600; color:var(--wf-text); }
.fin-mod-item .nm i { color:var(--fin-green); font-size:1.05rem; }
.fin-mod-item .pr { font-size:.82rem; font-weight:700; color:var(--wf-text); white-space:nowrap; }
.fin-mod-empty { font-size:.82rem; color:var(--wf-muted); padding:2px 0 8px; }
.fin-sub-actions { padding:16px 22px 20px; }
.fin-btn-block { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px solid var(--wf-border); border-radius:11px; background:var(--wf-surface); color:var(--wf-text); font-size:.9rem; font-weight:700; cursor:pointer; transition:.15s; text-decoration:none; }
.fin-btn-block:hover { border-color:var(--fin-green); color:var(--fin-green-text); background:rgba(125,194,66,.04); }
.fin-cancel-wrap { text-align:center; margin-top:4px; }
.fin-cancel-link { border:none; background:transparent; color:var(--wf-muted); font-size:.8rem; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:4px 8px; }
.fin-cancel-link:hover { color:var(--wf-text-soft); }

/* Lege staat */
.fin-empty { text-align:center; color:var(--wf-muted); padding:28px 16px; }
.fin-empty i { font-size:1.8rem; display:block; margin-bottom:8px; }

/* Modal-knop varianten (Bootstrap-modal hergebruikt) */
.fin-pay-summary { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--wf-hover-bg); border:1px solid var(--wf-border-lt); border-radius:11px; }
.fin-pay-summary .amt { font-size:1.45rem; font-weight:800; color:var(--wf-text); }

/* Responsive */
@media (max-width: 991.98px) { .fin-grid { grid-template-columns:1fr; } }
@media (max-width: 575.98px) {
  .fin-thead { display:none; }
  .fin-row { grid-template-columns:1fr auto; row-gap:6px; }
  .fin-row .date { grid-column:1; }
  .fin-row .acts { grid-column:1 / -1; justify-content:flex-start; flex-wrap:wrap; }
  .fin-titlebar h1 { font-size:1.6rem; }
  .fin-open-amt { font-size:1.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Domein & E-mail — schermopmaak (Claude Design). Herbruikbare wf-dom-* klassen,
   bewust in de centrale custom CSS (geen aparte css per scherm). Iconen = Tabler
   via Iconify (in de dashboard-layout). Licht-eerst, met dark-mode-overrides onderaan.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-dom-wrap{max-width:1180px;margin:0 auto}
.wf-dom-titlebar{background:#FBFCFE;border:1px solid #E9EDF2;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.03);padding:22px 26px;margin-bottom:20px}
.wf-dom-crumbs{display:flex;align-items:center;gap:9px;font-size:.82rem;margin-bottom:6px}
.wf-dom-crumbs .act{color:#E6186A;font-weight:700}
.wf-dom-crumbs .sep{width:4px;height:4px;border-radius:50%;background:#C2CCDA}
.wf-dom-crumbs .cur{color:#7C8FAC;font-weight:500}
.wf-dom-titlebar h1{font-size:2.1rem;font-weight:800;color:#1F2733;letter-spacing:-.025em;margin:0}
.wf-dom-titlebar .lead{color:#8A98AC;margin:6px 0 0;font-size:.95rem}
.wf-dom-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(30,200,222,.08),rgba(125,194,66,.06));border:1px solid #CDEAF0;border-radius:13px;padding:13px 18px;margin-bottom:20px}
.wf-dom-banner .ic{width:30px;height:30px;flex:none;border-radius:8px;background:#fff;color:#0E97AD;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 1px 3px rgba(8,15,52,.08)}
.wf-dom-banner .txt{font-size:.88rem;color:#34607A;line-height:1.45}
.wf-dom-tabs{display:inline-flex;gap:5px;background:#EEF2F6;border-radius:12px;padding:5px;margin-bottom:22px}
.wf-dom-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:9px;cursor:pointer;font-weight:700;font-size:.9rem;background:transparent;color:#7C8FAC;transition:all .15s}
.wf-dom-tab.active{background:#fff;color:#2A3547;box-shadow:0 1px 4px rgba(8,15,52,.1)}
.wf-dom-tab .cnt{font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:999px;background:#E2E8EF;color:#9AA7B8}
.wf-dom-tab.active .cnt{background:rgba(125,194,66,.16);color:#598F2B}
.wf-dom-card{background:#fff;border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);overflow:hidden;margin-bottom:22px}
.wf-dom-sechead{display:flex;align-items:center;gap:11px;padding:20px 22px 16px;flex-wrap:wrap}
.wf-dom-sechead .ic{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(30,200,222,.13);color:#0E97AD;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}
.wf-dom-sechead .ic.mail{background:rgba(124,92,255,.12);color:#7C5CFF}
.wf-dom-sechead h2{font-size:1.12rem;font-weight:700;color:#2A3547;margin:0}
.wf-dom-sechead .sub{font-size:.8rem;color:#9AA7B8;margin-top:1px}
.wf-dom-sechead .sub strong{color:#5A6A85}
.wf-dom-search{background:#fff;border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);overflow:hidden;margin-bottom:22px}
.wf-dom-search-head{padding:24px 26px;background:linear-gradient(135deg,rgba(125,194,66,.09),rgba(30,200,222,.07))}
.wf-dom-search-row{display:flex;gap:10px;flex-wrap:wrap}
.wf-dom-search-in{position:relative;flex:1;min-width:240px}
.wf-dom-search-in > iconify-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9AA7B8;font-size:1.2rem}
.wf-dom-search-in input{width:100%;padding:14px 16px 14px 46px;border-radius:11px;border:1px solid #E5EAEF;background:#fff;font-weight:600;font-size:1rem;color:#2A3547;outline:none}
.wf-dom-btn-green{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border:none;border-radius:11px;background:#7DC242;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 6px 16px rgba(125,194,66,.3)}
.wf-dom-btn-green:hover{background:#6AAA35;color:#fff}
.wf-dom-btn-green.sm{padding:9px 16px;font-size:.82rem;box-shadow:none}
.wf-dom-tlds{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.wf-dom-tlds .lbl{font-size:.78rem;color:#9AA7B8;font-weight:600}
.wf-dom-tld{border:1px solid #E5EAEF;background:#fff;color:#5A6A85;border-radius:999px;padding:5px 13px;font-weight:600;font-size:.78rem;cursor:pointer}
.wf-dom-tld:hover{border-color:#7DC242;color:#598F2B;background:rgba(125,194,66,.05)}
.wf-dom-results-head{padding:16px 22px;border-bottom:1px solid #EEF1F5;display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;color:#2A3547}
.wf-dom-results-head .q{font-weight:700;font-size:.9rem;color:#0E97AD;background:rgba(30,200,222,.1);padding:3px 11px;border-radius:7px}
.wf-dom-result{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid #F2F5F9}
.wf-dom-result:hover{background:#FAFCFE}
.wf-dom-result .ibox{width:38px;height:38px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;background:rgba(19,222,185,.12);color:#13A65C}
.wf-dom-result .ibox.taken{background:#F2F5F9;color:#AAB4C2}
.wf-dom-result .dom{font-size:.98rem;font-weight:700;color:#2A3547}
.wf-dom-result .price{font-size:.92rem;font-weight:700;color:#2A3547}
.wf-dom-result .price small{font-size:.74rem;color:#9AA7B8;font-weight:500}
.wf-dom-domain{border:1px solid #E9EDF2;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(8,15,52,.04);margin-bottom:14px}
.wf-dom-domain-head{display:flex;align-items:center;gap:13px;padding:16px 18px;flex-wrap:wrap}
.wf-dom-domain-head .ic{width:42px;height:42px;flex:none;border-radius:11px;background:rgba(30,200,222,.13);color:#0E97AD;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem}
.wf-dom-domain-name{font-size:1.05rem;font-weight:800;color:#2A3547}
.wf-dom-domain-exp{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:.78rem;color:#9AA7B8}
.wf-dom-domain-exp strong{color:#5A6A85;font-weight:700}
.wf-dom-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.72rem;padding:4px 11px;border-radius:999px}
.wf-dom-pill .dot{width:6px;height:6px;border-radius:50%}
.wf-dom-pill.ok{background:rgba(19,222,185,.12);color:#13A65C;border:1px solid rgba(19,222,185,.4)}
.wf-dom-pill.ok .dot{background:#13DEB9}
.wf-dom-pill.pending{background:#FFF1D6;color:#B26A00;border:1px solid #F6DDA6}
.wf-dom-pill.pending .dot{background:#E0A000}
.wf-dom-pill.info{background:rgba(30,200,222,.12);color:#0E97AD;border:1px solid rgba(30,200,222,.4)}
.wf-dom-pill.info .dot{background:#1EC8DE}
.wf-dom-pill.off{background:#F2F5F9;color:#9AA7B8;border:1px solid #E5EAEF}
.wf-dom-pill.off .dot{background:#C2CCDA}
.wf-dom-pill.danger{background:#FDE7EC;color:#C2294B;border:1px solid #F6C2CE}
.wf-dom-pill.danger .dot{background:#E0436B}
.wf-dom-renew{display:flex;align-items:center;gap:8px;margin-left:auto}
.wf-dom-renew .lbl{font-size:.78rem;color:#7C8FAC;font-weight:600}
.wf-dom-toggle{position:relative;width:40px;height:23px;border-radius:999px;border:none;background:#CBD4DF;padding:0;flex:none}
.wf-dom-toggle.on{background:#7DC242}
.wf-dom-toggle .knob{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s}
.wf-dom-toggle.on .knob{left:20px}
.wf-dom-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:0 18px 18px}
.wf-dom-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border-radius:12px;background:#F8FAFC;border:1px solid #EEF1F5;text-align:center}
.wf-dom-tile.on{background:rgba(125,194,66,.05);border-color:rgba(125,194,66,.25)}
.wf-dom-tile .ic{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;background:#EEF1F5;color:#AAB4C2}
.wf-dom-tile.on .ic{background:rgba(125,194,66,.14);color:#598F2B}
.wf-dom-tile.pending .ic{background:#FFF1D6;color:#C98A00}
.wf-dom-tile .lbl{font-size:.82rem;font-weight:700;color:#2A3547}
@media(max-width:575px){.wf-dom-tiles{grid-template-columns:repeat(2,1fr)}}
.wf-dom-mail{display:flex;align-items:center;gap:15px;padding:16px 22px;border-top:1px solid #F2F5F9}
.wf-dom-mail:hover{background:#FAFCFE}
.wf-dom-mail .av{width:40px;height:40px;flex:none;border-radius:10px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.wf-dom-mail .body{flex:1;min-width:0}
.wf-dom-mail .addr{font-size:.95rem;font-weight:700;color:#2A3547;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-dom-mail .use{display:flex;align-items:center;gap:9px;margin-top:6px;max-width:300px}
.wf-dom-bar{flex:1;height:6px;border-radius:999px;background:#EEF1F5;overflow:hidden}
.wf-dom-bar > span{display:block;height:100%;border-radius:999px;background:#7DC242}
.wf-dom-bar > span.near{background:#F59E0B}
.wf-dom-mail .usetxt{font-size:.74rem;color:#9AA7B8;font-weight:600;white-space:nowrap}
.wf-dom-iconbtn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #E5EAEF;border-radius:9px;background:#fff;color:#5A6A85;cursor:pointer;font-size:1.1rem}
.wf-dom-iconbtn:hover{border-color:#7DC242;color:#598F2B}
.wf-dom-btn-ghost-pink{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid #F3C9D8;border-radius:9px;background:#fff;color:#E6186A;font-weight:600;font-size:.82rem;cursor:pointer}
.wf-dom-btn-ghost-pink:hover{background:#FDF1F6;border-color:#EBA9C2;color:#E6186A}
.wf-dom-empty{text-align:center;color:#9AA7B8;padding:34px 18px}
.wf-dom-empty iconify-icon{font-size:2rem;display:block;margin:0 auto 8px}
[data-bs-theme="dark"] .wf-dom-titlebar,[data-bs-theme="dark"] .wf-dom-card,[data-bs-theme="dark"] .wf-dom-search,[data-bs-theme="dark"] .wf-dom-domain{background:#2a3447;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-dom-titlebar h1{color:#eaeef5}
[data-bs-theme="dark"] .wf-dom-domain-name,[data-bs-theme="dark"] .wf-dom-result .dom,[data-bs-theme="dark"] .wf-dom-mail .addr,[data-bs-theme="dark"] .wf-dom-sechead h2,[data-bs-theme="dark"] .wf-dom-tile .lbl,[data-bs-theme="dark"] .wf-dom-results-head{color:#e6eaf2}
[data-bs-theme="dark"] .wf-dom-tabs{background:#222b3c}
[data-bs-theme="dark"] .wf-dom-tab.active{background:#2a3447}
[data-bs-theme="dark"] .wf-dom-tile{background:#222b3c;border-color:#384761}
[data-bs-theme="dark"] .wf-dom-search-in input{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
[data-bs-theme="dark"] .wf-dom-iconbtn,[data-bs-theme="dark"] .wf-dom-tld{background:#222b3c;border-color:#3a4a63;color:#aab6c8}
[data-bs-theme="dark"] .wf-dom-result:hover,[data-bs-theme="dark"] .wf-dom-mail:hover{background:#242e40}

/* ═══════════════════════════════════════════════════════════════════════════
   Foto / video slider — schermopmaak (Claude Design). Herbruikbare wf-sl-* klassen
   in de centrale custom CSS. Hergebruikt de wf-dom-* titelbalk/tabs waar passend.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-sl-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:991px){.wf-sl-grid{grid-template-columns:1fr}}
.wf-sl-card{background:#fff;border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);overflow:hidden}
.wf-sl-head{padding:20px 24px 0}
.wf-sl-head .top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.wf-sl-head .ic{width:36px;height:36px;border-radius:9px;background:rgba(230,24,106,.10);color:#E6186A;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
.wf-sl-head h2{font-size:1.18rem;font-weight:700;color:#2A3547;margin:0}
.wf-sl-head .sub{font-size:.85rem;color:#9AA7B8;margin-top:2px}
/* uitlegvideo-knop in de kaartkop */
.wf-sl-videobtn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #E5EAEF;border-radius:999px;background:#fff;color:#2A3547;font-weight:700;font-size:.83rem;cursor:pointer;flex:none;transition:border-color .15s,color .15s,background .15s}
.wf-sl-videobtn:hover{border-color:#7DC242;color:#598F2B;background:rgba(125,194,66,.05)}
.wf-sl-videobtn .play{width:24px;height:24px;border-radius:50%;background:#E6186A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
[data-bs-theme="dark"] .wf-sl-videobtn{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
/* Herbruikbare, consistente Uitlegvideo-knop (huisstijl): witte pill + roze play-cirkel. Overal te
   gebruiken met <button class="wf-video-btn"><span class="play"><i class="bi bi-play-fill"></i></span> Uitlegvideo</button>. */
.wf-video-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid #E5EAEF;border-radius:999px;background:#fff;color:#2A3547;font-weight:600;font-size:.9375rem;line-height:1.5;cursor:pointer;flex:none;transition:border-color .15s,color .15s,background .15s}
.wf-video-btn:hover{border-color:#7DC242;color:#598F2B;background:rgba(125,194,66,.05)}
.wf-video-btn .play{width:22px;height:22px;border-radius:50%;background:#E6186A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1}
[data-bs-theme="dark"] .wf-video-btn{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
/* advies-banner (geel) */
.wf-sl-advice{margin:18px 24px 0;display:flex;align-items:flex-start;gap:11px;background:#FFF8EC;border:1px solid #F6E6C4;border-radius:12px;padding:13px 16px}
.wf-sl-advice iconify-icon{font-size:1.2rem;color:#D99400;flex:none;margin-top:1px}
.wf-sl-advice .t{font-size:.85rem;color:#7A5E1E;line-height:1.5}
.wf-sl-info{margin:14px 24px 0;display:flex;align-items:flex-start;gap:11px;background:rgba(30,200,222,.07);border:1px solid #CDEAF0;border-radius:12px;padding:13px 16px}
.wf-sl-info iconify-icon{font-size:1.2rem;color:#0E97AD;flex:none;margin-top:1px}
.wf-sl-info .t{font-size:.85rem;color:#34607A;line-height:1.5}
/* aan/uit-rij */
.wf-sl-togglerow{margin:16px 24px 0;display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid #EEF1F5;border-radius:12px;background:#F8FAFC}
.wf-sl-togglerow .ttl{font-size:.92rem;font-weight:700;color:#2A3547}
.wf-sl-togglerow .st{font-size:.78rem;color:#9AA7B8;margin-top:1px}
.wf-sl-switch{position:relative;width:46px;height:26px;border-radius:999px;border:none;cursor:pointer;flex:none;background:#CBD4DF;padding:0;transition:background .18s}
.wf-sl-switch.on{background:#7DC242}
.wf-sl-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s}
.wf-sl-switch.on .knob{left:23px}
/* slides sectie */
.wf-sl-body{padding:18px 24px 6px}
.wf-sl-divider{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.wf-sl-divider .lbl{font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#9AA7B8}
.wf-sl-divider .line{height:1px;flex:1;background:#EEF1F5}
.wf-sl-divider .cnt{font-size:.76rem;color:#9AA7B8;font-weight:600}
.wf-sl-slide{border:1px solid #E9EDF2;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(8,15,52,.03);margin-bottom:16px}
.wf-sl-slide-head{display:flex;align-items:center;gap:11px;padding:12px 15px;background:#F8FAFC;border-bottom:1px solid #EEF1F5}
.wf-sl-slide-head .grip{color:#C2CCDA;cursor:grab;display:inline-flex}
.wf-sl-slide-head .num{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid #E5EAEF;color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.76rem}
.wf-sl-slide-head .ttl{font-size:.92rem;font-weight:700;color:#2A3547}
.wf-sl-rmbtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #F0D4D9;border-radius:8px;background:#fff;color:#D34663;font-weight:600;font-size:.78rem;cursor:pointer}
.wf-sl-rmbtn:hover{background:#FDF1F3;border-color:#E9B7C0;color:#D34663}
.wf-sl-slide-body{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 16px}
@media(max-width:575px){.wf-sl-slide-body{grid-template-columns:1fr}}
.wf-sl-mlabel{font-weight:700;font-size:.76rem;color:#5A6A85;margin-bottom:8px}
.wf-sl-thumb{position:relative;border-radius:11px;overflow:hidden;border:1px solid #E5EAEF;aspect-ratio:16/10;background:#EEF2F6;display:flex;align-items:center;justify-content:center;color:#AAB4C2}
.wf-sl-thumb img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}
.wf-sl-thumb .ph{font-size:1.7rem}
/* mode-tabjes Foto / Video */
.wf-sl-modetabs{display:inline-flex;gap:4px;background:#EEF2F6;border-radius:11px;padding:4px;margin:14px 0 2px}
.wf-sl-modetabs .nav-link{border:none;border-radius:8px;padding:8px 18px;font-weight:600;font-size:.86rem;color:#5A6A85;background:transparent;display:inline-flex;align-items:center;gap:7px}
.wf-sl-modetabs .nav-link.active{background:#fff;color:#2A3547;box-shadow:0 1px 3px rgba(8,15,52,.12)}
[data-bs-theme="dark"] .wf-sl-modetabs{background:#222b3c}
[data-bs-theme="dark"] .wf-sl-modetabs .nav-link.active{background:#2a3447;color:#e6eaf2}
/* groene aan/uit-switch via de echte Bootstrap-checkbox (form-binding intact) */
.wf-sl-togglerow .form-check-input{width:46px;height:26px;margin:0;flex:none;cursor:pointer;background-color:#CBD4DF;border-color:#CBD4DF;box-shadow:none}
.wf-sl-togglerow .form-check-input:checked{background-color:#7DC242;border-color:#7DC242}
.wf-sl-togglerow .form-check-input:focus{box-shadow:0 0 0 3px rgba(125,194,66,.18);border-color:#7DC242}
.wf-sl-mbtns{display:flex;gap:8px;margin-top:12px}
.wf-sl-mbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;white-space:nowrap;border:1px solid transparent;border-radius:10px;font-weight:600;font-size:.8rem;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.wf-sl-mbtn iconify-icon{font-size:1.05rem;flex:none}
.wf-sl-mbtn.pick{flex:1;background:#7DC242;color:#fff;border-color:#7DC242}
.wf-sl-mbtn.pick:hover{background:#6AAA35;color:#fff;border-color:#6AAA35;box-shadow:0 3px 9px rgba(125,194,66,.28)}
.wf-sl-mbtn.ai{flex:1;background:#1EC8DE;color:#fff;border-color:#1EC8DE}
.wf-sl-mbtn.ai:hover{background:#16b2c6;color:#fff;border-color:#16b2c6;box-shadow:0 3px 9px rgba(30,200,222,.26)}
/* verwijder-icoontje op de hoek van de fotothumb (zit buiten .slide-image-preview zodat de JS-innerHTML het niet wist) */
.wf-sl-thumbwrap{position:relative}
.wf-sl-thumb-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;border:none;background:rgba(255,255,255,.92);color:#D34663;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;box-shadow:0 2px 7px rgba(8,15,52,.20)}
.wf-sl-thumb-x:hover{background:#D34663;color:#fff}
/* centrale verwijder-bevestiging (wfConfirm) */
/* Het bevestigingsvenster stond op modal-sm (300px). Daar past een knoptekst als "Ja, opnieuw
   versturen" niet op een regel in, en dan breekt hij midden in de zin. Breder dan de
   Bootstrap-standaard hoeft niet: het is een vraag van twee regels met twee knoppen. */
.wf-confirm-dialog{max-width:460px}
.wf-confirm-ic{width:54px;height:54px;border-radius:50%;background:rgba(220,53,69,.10);color:#dc3545;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem}
[data-bs-theme="dark"] .wf-confirm-ic{background:rgba(220,53,69,.18)}
[data-bs-theme="dark"] .wf-sl-mbtn.pick{background:#7DC242;color:#fff;border-color:#7DC242}
[data-bs-theme="dark"] .wf-sl-mbtn.ai{background:#1EC8DE;color:#fff;border-color:#1EC8DE}
[data-bs-theme="dark"] .wf-sl-thumb-x{background:rgba(34,43,60,.92);color:#f08097}
.wf-sl-fields{display:flex;flex-direction:column;gap:14px}
.wf-sl-field label{display:block;font-weight:700;font-size:.76rem;color:#5A6A85;margin-bottom:6px}
.wf-sl-field label .opt{font-weight:500;color:#AAB4C2;text-transform:none}
.wf-sl-in,.wf-sl-ta{width:100%;padding:11px 14px;border-radius:10px;border:1px solid #E5EAEF;background:#fff;font-weight:500;font-size:.9rem;color:#2A3547;outline:none;transition:border-color .15s,box-shadow .15s}
.wf-sl-ta{resize:none;line-height:1.5}
.wf-sl-in:focus,.wf-sl-ta:focus,.wf-sl-sel:focus{border-color:#7DC242;box-shadow:0 0 0 3px rgba(125,194,66,.18)}
.wf-sl-inwrap{position:relative}
.wf-sl-inwrap > iconify-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#AAB4C2;font-size:1.05rem}
.wf-sl-inwrap .wf-sl-in{padding-left:38px}
.wf-sl-hint{font-size:.74rem;color:#AAB4C2;margin-top:5px}
/* nav-pills (taal-tabjes) binnen een slide in nieuwe stijl */
.wf-sl-slide .nav-pills .nav-link{border:1px solid #E5EAEF;border-radius:999px;padding:5px 14px;font-weight:600;font-size:.8rem;color:#5A6A85;background:#fff}
.wf-sl-slide .nav-pills .nav-link.active{background:#7DC242;border-color:#7DC242;color:#fff}
/* slide toevoegen */
.wf-sl-add{width:100%;margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:1.5px dashed #C9D5C0;border-radius:12px;background:rgba(125,194,66,.04);color:#598F2B;font-weight:700;font-size:.88rem;cursor:pointer}
.wf-sl-add:hover{background:rgba(125,194,66,.09);border-color:#7DC242}
.wf-sl-add:disabled{opacity:.5;cursor:not-allowed}
/* instellingen */
.wf-sl-settings{margin:8px 24px 0;padding:18px 0 4px;border-top:1px solid #EEF1F5}
.wf-sl-settings .cap{font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#9AA7B8;margin-bottom:14px}
.wf-sl-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:575px){.wf-sl-2col{grid-template-columns:1fr}}
.wf-sl-sel{width:100%;appearance:none;-webkit-appearance:none;padding:11px 38px 11px 14px;border-radius:10px;border:1px solid #E5EAEF;background:#fff;font-weight:500;font-size:.9rem;color:#2A3547;outline:none;cursor:pointer}
.wf-sl-selwrap{position:relative}
.wf-sl-selwrap > iconify-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#7C8FAC;font-size:1rem;pointer-events:none}
.wf-sl-range{width:100%;accent-color:#7DC242;height:24px;cursor:pointer}
.wf-sl-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 24px 22px;margin-top:14px;border-top:1px solid #EEF1F5}
.wf-sl-btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:1px solid #E5EAEF;border-radius:10px;background:#fff;color:#5A6A85;font-weight:600;font-size:.87rem;cursor:pointer;text-decoration:none}
.wf-sl-btn-ghost:hover{border-color:#C2CCDA;color:#5A6A85}
.wf-sl-btn-save{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:none;border-radius:10px;background:#7DC242;color:#fff;font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 4px 12px rgba(125,194,66,.3)}
.wf-sl-btn-save:hover{background:#6AAA35;color:#fff}
/* rechter help */
.wf-sl-aside{display:flex;flex-direction:column;gap:18px}
.wf-sl-help{background:linear-gradient(150deg,rgba(125,194,66,.08),rgba(30,200,222,.06));border:1px solid #E5EAEF;border-radius:16px;padding:22px 22px 20px}
.wf-sl-help .h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.wf-sl-help .h .ic{width:32px;height:32px;border-radius:9px;background:#fff;color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 1px 3px rgba(8,15,52,.08)}
.wf-sl-help h3{font-size:1.02rem;font-weight:700;color:#2A3547;margin:0}
.wf-sl-help p{font-size:.85rem;color:#5A6A85;margin:0 0 16px;line-height:1.55}
.wf-sl-steps{display:flex;flex-direction:column;gap:12px}
.wf-sl-step{display:flex;gap:11px}
.wf-sl-step .n{width:26px;height:26px;flex:none;border-radius:50%;background:#7DC242;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.wf-sl-step .t{font-size:.85rem;color:#3a475c;line-height:1.5;padding-top:2px}
.wf-sl-help-btn{width:100%;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1px solid rgba(30,200,222,.5);border-radius:10px;background:#fff;color:#0E97AD;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none}
.wf-sl-help-btn:hover{border-color:#1EC8DE;background:rgba(30,200,222,.06);color:#0E97AD}
.wf-sl-tip{background:#fff;border:1px solid #E5EAEF;border-radius:16px;padding:18px 20px;box-shadow:0 1px 3px rgba(8,15,52,.04)}
.wf-sl-tip .h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wf-sl-tip .h iconify-icon{font-size:1.15rem;color:#D99400}
.wf-sl-tip .h span{font-size:.9rem;font-weight:700;color:#2A3547}
.wf-sl-tip p{font-size:.84rem;color:#5A6A85;margin:0;line-height:1.55}
/* dark-mode */
[data-bs-theme="dark"] .wf-sl-card,[data-bs-theme="dark"] .wf-sl-slide,[data-bs-theme="dark"] .wf-sl-tip{background:#2a3447;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-sl-head h2,[data-bs-theme="dark"] .wf-sl-slide-head .ttl,[data-bs-theme="dark"] .wf-sl-help h3{color:#e6eaf2}
[data-bs-theme="dark"] .wf-sl-togglerow,[data-bs-theme="dark"] .wf-sl-slide-head,[data-bs-theme="dark"] .wf-sl-thumb{background:#222b3c;border-color:#384761}
[data-bs-theme="dark"] .wf-sl-in,[data-bs-theme="dark"] .wf-sl-ta,[data-bs-theme="dark"] .wf-sl-sel{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
/* slider: accordion (1 open) + vergrendeling + centrale vertaalknop */
.wf-sl-slide-head{cursor:pointer}
.wf-sl-prev{flex:1;min-width:0;font-size:.84rem;font-weight:500;color:#2A3547;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-sl-prev.muted{color:#AAB4C2;font-style:italic}
.wf-sl-chev{margin-left:8px;color:#9AA7B8;display:inline-flex;transition:transform .2s}
.wf-sl-slide.is-open .wf-sl-chev{transform:rotate(180deg)}
.wf-sl-slide.is-open .wf-sl-prev{display:none}
.wf-sl-slide:not(.is-open) > .wf-sl-slide-body{display:none}
.wf-sl-lockmsg{display:none;flex:1;min-width:0;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#B0788A}
.wf-sl-lockmsg iconify-icon{font-size:1rem}
.wf-sl-slide.is-locked .wf-sl-slide-head{cursor:not-allowed;opacity:.7}
.wf-sl-slide.is-locked .wf-sl-prev,.wf-sl-slide.is-locked .wf-sl-chev{display:none}
.wf-sl-slide.is-locked .wf-sl-lockmsg{display:inline-flex}
.wf-sl-slide.is-locked .num{background:#EEF1F5;color:#AAB4C2;border-color:#E5EAEF}
.wf-sl-translate{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid rgba(14,151,173,.4);border-radius:9px;background:rgba(14,151,173,.07);color:#0E97AD;font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap}
.wf-sl-translate:hover{background:#0E97AD;color:#fff;border-color:#0E97AD}
.wf-sl-translate:disabled{opacity:.6;cursor:not-allowed}
[data-bs-theme="dark"] .wf-sl-prev{color:#e6eaf2}
[data-bs-theme="dark"] .wf-sl-slide.is-locked .num{background:#222b3c;color:#7c8aa0;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-sl-translate{background:rgba(30,200,222,.14);color:#4fd6e8;border-color:rgba(30,200,222,.3)}
/* placeholder voor uitlegvideo (herbruikbaar) */
.wf-sl-videoph{position:relative;aspect-ratio:16/9;border-radius:12px;border:1.5px dashed #C2CCDA;background:linear-gradient(150deg,rgba(125,194,66,.06),rgba(30,200,222,.06));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#7C8FAC}
.wf-sl-videoph .play{width:52px;height:52px;border-radius:50%;background:#fff;color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 3px 10px rgba(8,15,52,.12)}
.wf-sl-videoph .lbl{font-size:.82rem;font-weight:600}
[data-bs-theme="dark"] .wf-sl-videoph{border-color:#3a4a63;color:#9fb0c7}
[data-bs-theme="dark"] .wf-sl-videoph .play{background:#222b3c;color:#9bd167}

/* ═══════════════════════════════════════════════════════════════════════════
   Lettertype-pagina (Layout website) — Claude Design-look. wf-ft-* klassen.
   Font-families worden per rij/preview via JS gezet (dynamisch), nooit inline.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-ft-card{background:#fff;border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);padding:24px 26px}
.wf-ft-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.wf-ft-head .ic{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(125,194,66,.13);color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}
.wf-ft-head h2{font-size:1.18rem;font-weight:700;color:#2A3547;margin:0}
.wf-ft-video{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #E5EAEF;border-radius:999px;background:#fff;color:#2A3547;font-weight:700;font-size:.83rem;cursor:pointer;flex:none;transition:border-color .15s,color .15s,background .15s}
.wf-ft-video:hover{border-color:#7DC242;color:#598F2B;background:rgba(125,194,66,.05)}
.wf-ft-video .play{width:24px;height:24px;border-radius:50%;background:#E6186A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.wf-ft-intro{font-size:.88rem;color:#7C8FAC;margin:0 0 18px;line-height:1.55}
/* AI-paneel */
.wf-ft-ai{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 16px;background:linear-gradient(135deg,rgba(125,194,66,.08),rgba(30,200,222,.06));border:1px solid #E5EAEF;border-radius:12px;margin-bottom:16px}
.wf-ft-ai .ic{width:34px;height:34px;flex:none;border-radius:9px;background:#fff;color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 1px 3px rgba(8,15,52,.1)}
.wf-ft-ai .txt{flex:1;min-width:160px}
.wf-ft-ai .txt .t{font-size:.95rem;font-weight:700;color:#2A3547}
.wf-ft-ai .txt .s{font-size:.83rem;color:#7C8FAC;margin-top:1px}
.wf-ft-ai-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:10px;background:#7DC242;color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;box-shadow:0 4px 12px rgba(125,194,66,.3);flex:none}
.wf-ft-ai-btn:hover{background:#6AAA35;color:#fff}
.wf-ft-ai-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
/* AI-voorstel-chips */
.wf-ft-suggest{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.wf-ft-suggest .lbl{font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#9AA7B8}
.wf-ft-chips{display:inline-flex;gap:9px;flex-wrap:wrap}
.wf-ft-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #D6EEDD;border-radius:999px;background:#F4FBF6;cursor:pointer}
.wf-ft-chip:hover{border-color:#7DC242}
.wf-ft-chip .sample{font-size:.95rem;font-weight:700;color:#598F2B}
.wf-ft-chip .nm{font-size:.85rem;font-weight:700;color:#2A3547}
/* waarschuwing */
.wf-ft-warn{display:flex;align-items:flex-start;gap:11px;background:#FFF8EC;border:1px solid #F6E6C4;border-radius:12px;padding:13px 16px;margin-bottom:20px}
.wf-ft-warn iconify-icon{font-size:1.15rem;color:#D99400;flex:none;margin-top:1px}
.wf-ft-warn span{font-size:.84rem;color:#7A5E1E;line-height:1.5}
/* twee kolommen: lijst + voorbeeld */
.wf-ft-grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:22px;align-items:stretch}
@media(max-width:767px){.wf-ft-grid{grid-template-columns:1fr}}
.wf-ft-listcol{display:flex;flex-direction:column;min-height:0}
.wf-ft-listhead{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:12px;flex:none}
.wf-ft-listhead .lbl{font-weight:700;font-size:.82rem;color:#3a475c}
.wf-ft-count{font-size:.76rem;color:#9AA7B8;font-weight:600}
.wf-ft-searchwrap{position:relative;margin-bottom:10px;flex:none}
.wf-ft-searchwrap > iconify-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#AAB4C2;font-size:1.05rem}
.wf-ft-searchin{width:100%;padding:11px 14px 11px 38px;border-radius:10px;border:1px solid #E5EAEF;background:#fff;font-weight:500;font-size:.88rem;color:#2A3547;outline:none;transition:border-color .15s,box-shadow .15s}
.wf-ft-searchin:focus{border-color:#7DC242;box-shadow:0 0 0 3px rgba(125,194,66,.15)}
.wf-ft-list{height:420px;overflow-y:auto;border:1px solid #EEF1F5;border-radius:12px;background:#FBFCFE;padding:6px;flex:none}
.wf-ft-list::-webkit-scrollbar{width:8px}
.wf-ft-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;margin-bottom:2px;background:transparent;border:1px solid transparent;transition:background .12s}
.wf-ft-row:hover{background:#F2F5F9}
.wf-ft-row.selected{background:rgba(125,194,66,.10);border-color:#9FD06B}
.wf-ft-row .ag{width:38px;height:38px;flex:none;border-radius:8px;background:#fff;border:1px solid #EEF1F5;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:#2A3547}
.wf-ft-row .nm{flex:1;min-width:0;font-size:.95rem;font-weight:600;color:#2A3547;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-ft-row .kind{font-size:.72rem;color:#AAB4C2;font-weight:600;flex:none}
.wf-ft-row .chk{font-size:1.15rem;color:#7DC242;flex:none;display:none}
.wf-ft-row.selected .chk{display:inline-flex}
.wf-ft-noresult{padding:26px 14px;text-align:center;color:#9AA7B8;font-size:.85rem}
/* voorbeeld-paneel */
.wf-ft-previewcol{display:flex;flex-direction:column;min-height:0}
.wf-ft-pvspacer{height:34px;flex:none}
@media(max-width:767px){.wf-ft-pvspacer{display:none}}
.wf-ft-preview{flex:1;display:flex;flex-direction:column;border:1px solid #EEF1F5;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(8,15,52,.05)}
.wf-ft-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #EEF1F5;background:#FBFCFE;flex:none}
.wf-ft-preview-head .ttl{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:#2A3547}
.wf-ft-preview-head .ttl iconify-icon{font-size:1.1rem;color:#598F2B}
.wf-ft-preview-head .cur{font-size:.8rem;color:#7C8FAC}
.wf-ft-preview-head .cur strong{color:#E6186A}
.wf-ft-preview-body{flex:1;padding:22px 24px 24px;background:#fff}
.wf-ft-pvlabel{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#AAB4C2;margin-bottom:10px}
.wf-ft-pvh{font-size:1.7rem;font-weight:700;color:#1F2733;letter-spacing:-.01em;margin:0 0 11px}
.wf-ft-pvtext{font-size:1rem;color:#46536A;line-height:1.7;margin:0 0 14px}
.wf-ft-pvcta{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.wf-ft-pvbtn{display:inline-flex;align-items:center;padding:10px 20px;border-radius:9px;background:#1F2733;color:#fff;font-size:.92rem;font-weight:700}
.wf-ft-pvlink{font-size:.95rem;color:#598F2B;font-weight:700}
.wf-ft-weights{margin-top:20px;padding-top:16px;border-top:1px solid #EEF1F5;display:flex;flex-wrap:wrap;gap:22px}
.wf-ft-weights .wl{font-size:.72rem;color:#AAB4C2;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.wf-ft-wheavy{font-weight:700;font-size:1.05rem;color:#2A3547}
.wf-ft-wnormal{font-weight:400;font-size:1.05rem;color:#2A3547}
/* beveiliging-notitie */
.wf-ft-secure{display:flex;align-items:flex-start;gap:11px;background:#F4FBF6;border:1px solid #D6EEDD;border-radius:12px;padding:13px 16px;margin-top:20px}
.wf-ft-secure iconify-icon{font-size:1.15rem;color:#13A65C;flex:none;margin-top:1px}
.wf-ft-secure span{font-size:.84rem;color:#2E6B45;line-height:1.5}
/* footer opslaan */
.wf-ft-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:20px;margin-top:18px;border-top:1px solid #EEF1F5}
.wf-ft-cancel{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:1px solid #E5EAEF;border-radius:10px;background:#fff;color:#5A6A85;font-weight:600;font-size:.87rem;cursor:pointer}
.wf-ft-cancel:hover{border-color:#C2CCDA}
.wf-ft-save{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:none;border-radius:999px;background:#7DC242;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 6px 16px rgba(125,194,66,.3);transition:background .2s}
.wf-ft-save:hover{background:#6AAA35;color:#fff}
.wf-ft-save.saved{background:#13A65C}
/* dark-mode */
[data-bs-theme="dark"] .wf-ft-card,[data-bs-theme="dark"] .wf-ft-preview{background:#2a3447;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-ft-head h2,[data-bs-theme="dark"] .wf-ft-pvh,[data-bs-theme="dark"] .wf-ft-row .nm,[data-bs-theme="dark"] .wf-ft-wheavy,[data-bs-theme="dark"] .wf-ft-wnormal{color:#e6eaf2}
[data-bs-theme="dark"] .wf-ft-list,[data-bs-theme="dark"] .wf-ft-preview-head,[data-bs-theme="dark"] .wf-ft-preview-body{background:#222b3c;border-color:#384761}
[data-bs-theme="dark"] .wf-ft-row .ag,[data-bs-theme="dark"] .wf-ft-searchin,[data-bs-theme="dark"] .wf-ft-video{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
[data-bs-theme="dark"] .wf-ft-row:hover{background:#2f3a4f}
[data-bs-theme="dark"] .wf-ft-pvtext{color:#aab6c8}

/* ═══════════════════════════════════════════════════════════════════════════
   Kleuren-pagina (Layout website) — Claude Design-look. Herbruikbare wf-kl-*
   klassen in de centrale custom CSS. JS-hooks (#primaryHex/.wf-color-swatch/
   #pvHeader…) en de echte "kleuren uit logo halen"-logica blijven ongewijzigd.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-kl-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:991px){.wf-kl-grid{grid-template-columns:1fr}}
.wf-kl-card{background:#fff;border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);padding:24px 26px}
.wf-kl-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.wf-kl-head .ic{width:34px;height:34px;border-radius:9px;background:rgba(230,24,106,.10);color:#E6186A;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
.wf-kl-head h2{font-size:1.18rem;font-weight:700;color:#2A3547;margin:0}
.wf-kl-intro{font-size:.88rem;color:#7C8FAC;margin:0 0 18px;line-height:1.55}
/* gedeelde uitlegvideo-knop (herbruikbaar over pagina's) */
.wf-videobtn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid #E5EAEF;border-radius:999px;background:#fff;color:#2A3547;font-weight:700;font-size:.83rem;cursor:pointer;flex:none;transition:border-color .15s,color .15s,background .15s}
.wf-videobtn:hover{border-color:#7DC242;color:#598F2B;background:rgba(125,194,66,.05)}
.wf-videobtn .play{width:24px;height:24px;border-radius:50%;background:#E6186A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
[data-bs-theme="dark"] .wf-videobtn{background:#222b3c;border-color:#3a4a63;color:#e6eaf2}
/* inner twee-kolommen (kleuren | voorbeeld) binnen één kaart */
.wf-kl-twopane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:991px){.wf-kl-twopane{grid-template-columns:1fr}}
.wf-kl-sublabel{font-weight:700;font-size:.82rem;color:#3a475c;margin-bottom:12px}
[data-bs-theme="dark"] .wf-kl-sublabel{color:#aab6c8}
/* uit logo halen */
.wf-kl-fromlogo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;background:linear-gradient(135deg,rgba(125,194,66,.07),rgba(30,200,222,.06));border:1px solid #E5EAEF;border-radius:12px;margin-bottom:24px}
.wf-kl-fromlogo-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:none;border-radius:10px;background:#fff;color:#598F2B;font-weight:700;font-size:.87rem;cursor:pointer;box-shadow:0 1px 3px rgba(8,15,52,.1);flex:none}
.wf-kl-fromlogo-btn:hover:not(:disabled){background:#F4FAEE}
.wf-kl-fromlogo-btn:disabled{opacity:.5;cursor:not-allowed}
.wf-kl-fromlogo-btn iconify-icon{font-size:1.15rem;color:#7DC242}
.wf-kl-fromlogo .hint{font-size:.83rem;color:#5A7430;line-height:1.45;flex:1;min-width:160px}
/* kleurvelden */
.wf-kl-fields{display:flex;flex-direction:column;gap:18px}
.wf-kl-field > label{display:block;font-weight:700;font-size:.82rem;color:#3a475c;margin-bottom:8px}
.wf-kl-row{display:flex;align-items:stretch;gap:10px}
.wf-kl-row .wf-color-swatch{width:64px!important;height:48px!important;min-height:48px;padding:4px!important;margin:0!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);cursor:pointer;flex:none;background:#fff}
.wf-kl-row .wf-color-swatch::-webkit-color-swatch-wrapper{padding:0}
.wf-kl-row .wf-color-swatch::-webkit-color-swatch{border:none;border-radius:6px}
.wf-kl-row .wf-color-swatch::-moz-color-swatch{border:none;border-radius:6px}
.wf-kl-hexwrap{display:flex;flex:1;max-width:300px;border:1px solid #E5EAEF;border-radius:10px;overflow:hidden;background:#fff}
.wf-kl-hexwrap .hash{display:inline-flex;align-items:center;justify-content:center;width:42px;background:#F6F9FC;border-right:1px solid #EEF1F5;color:#9AA7B8;font-weight:700;font-size:1rem}
.wf-kl-hex{flex:1;border:none;padding:12px 14px;font-weight:600;font-size:.95rem;letter-spacing:.06em;color:#2A3547;outline:none;text-transform:uppercase;background:#fff}
.wf-kl-hex:focus{box-shadow:inset 0 0 0 3px rgba(125,194,66,.18)}
.wf-kl-save{margin-top:24px;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:none;border-radius:999px;background:#7DC242;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 6px 16px rgba(125,194,66,.3);transition:background .2s}
.wf-kl-save:hover{background:#6AAA35;color:#fff}
/* rechterkolom */
.wf-kl-aside{display:flex;flex-direction:column;gap:18px}
.wf-kl-help{background:linear-gradient(135deg,rgba(125,194,66,.10),rgba(30,200,222,.09));border:1px solid #E5EAEF;border-radius:16px;box-shadow:0 1px 3px rgba(8,15,52,.04);padding:22px}
.wf-kl-help .ic{width:46px;height:46px;border-radius:12px;background:#fff;color:#598F2B;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px;box-shadow:0 1px 3px rgba(8,15,52,.08)}
.wf-kl-help h3{font-size:1.02rem;font-weight:700;color:#2A3547;margin:0 0 8px}
.wf-kl-help p{font-size:.85rem;color:#5A6A85;margin:0;line-height:1.6}
/* live voorbeeld */
.wf-kl-preview{padding:0}
.wf-kl-preview .pvhd{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wf-kl-preview .pvhd iconify-icon{font-size:1.1rem;color:#E6186A}
.wf-kl-preview .pvhd span{font-size:.95rem;font-weight:700;color:#2A3547}
.wf-kl-pvframe{border:1px solid #EEF1F5;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(8,15,52,.06)}
.wf-kl-pvhero{padding:20px;color:#fff}
.wf-kl-pvhero .t{font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.wf-kl-pvhero .s{font-size:.85rem;opacity:.82;margin-top:2px}
.wf-kl-pvbody{padding:18px;background:#fff}
.wf-kl-pvactions{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.wf-kl-pvbtn{padding:10px 22px;border:none;border-radius:9px;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer}
.wf-kl-pvlink{font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;padding-bottom:1px;border-bottom:2px solid currentColor}
.wf-kl-pvpills{display:flex;gap:9px;flex-wrap:wrap}
.wf-kl-pvpill{padding:5px 13px;border-radius:999px;color:#fff;font-weight:700;font-size:.76rem}
.wf-kl-pvnote{font-size:.76rem;color:#AAB4C2;margin-top:12px;line-height:1.45}
/* dark mode */
[data-bs-theme="dark"] .wf-kl-card{background:#2a3447;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-kl-head h2,[data-bs-theme="dark"] .wf-kl-help h3,[data-bs-theme="dark"] .wf-kl-preview .pvhd span{color:#e6eaf2}
[data-bs-theme="dark"] .wf-kl-hexwrap{background:#222b3c;border-color:#3a4a63}
[data-bs-theme="dark"] .wf-kl-hex{background:#222b3c;color:#e6eaf2}
[data-bs-theme="dark"] .wf-kl-hexwrap .hash{background:#1c2532;border-color:#384761}

/* ── Webfix AI-knop ─────────────────────────────────────────────────────────────
   DÉ knop voor élke AI-gerelateerde actie in het hele systeem. 1:1 uit
   claude-design/webfix-ai-buttons-ontwerp: een gevulde merkgradient (groen→roze→blauw) die
   rustig "leeft" (drift), met een witte diamant-chip links, optioneel een AI-label, en een
   pijl rechts. Hover licht 'm iets op en tilt 'm op; de chip en de pijl bewegen mee.

   GEBRUIK (bij voorkeur via de partial): <partial name="_WfFlowButton" model="new WfFlowButtonModel{...}" />
   of direct de markup:
     <button class="wf-flow-btn wf-flow-btn-sm" type="submit">
       <span class="wf-flow-btn-chip"><img src="~/assets/img/webfix-diamond.png" alt="Webfix AI" /></span>
       <span class="wf-flow-btn-ai"><span class="t">AI</span><span class="d"></span></span>   (optioneel)
       <span class="wf-flow-btn-body"><span>Start Webfix AI</span><i class="bi bi-arrow-right wf-flow-btn-arrow"></i></span>
     </button>
   Formaten: .wf-flow-btn-sm (44px) · standaard (50px) · .wf-flow-btn-lg (60px).
   Zet .wf-flow-btn-static om de drift-animatie uit te zetten. */
@keyframes wf-ai-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.wf-flow-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;                 /* middel (default) */
  height: 50px;
  padding: 0 26px 0 7px;
  border: none;
  border-radius: 9999px;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: 200% 100%;
  box-shadow: 0 2px 8px rgba(50, 188, 238, .15), 0 2px 8px rgba(218, 23, 108, .10);
  animation: wf-ai-drift 9s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  will-change: transform;
}
.wf-flow-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05) saturate(1.06); }
.wf-flow-btn:active { transform: translateY(0); }
.wf-flow-btn:focus-visible { outline: 3px solid rgba(50, 188, 238, .5); outline-offset: 2px; }

.wf-flow-btn-chip {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(1, 16, 61, .10), inset 0 0 0 1px rgba(1, 16, 61, .05);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.wf-flow-btn-chip img { width: 24px; height: 24px; object-fit: contain; display: block; }
.wf-flow-btn:hover .wf-flow-btn-chip { transform: scale(1.07) rotate(-4deg); }

.wf-flow-btn-ai { display: inline-flex; align-items: center; gap: 12px; }
.wf-flow-btn-ai .t { font-weight: 800; font-size: 14px; letter-spacing: .06em; color: #fff; }
.wf-flow-btn-ai .d { width: 1px; height: 18px; background: rgba(255, 255, 255, .42); }

.wf-flow-btn-body { display: inline-flex; align-items: center; gap: 9px; padding-left: 2px; }
/* Een hernoemde module op een flow-knop: de naam van de klant met onze naam heel klein eronder
   ("Woonbond" / "(Referenties)"). Beide regels passen binnen de vaste knophoogte, dus zo'n knop wordt
   niet hoger dan de rest; een te lang label valt af met een beletselteken. */
.wf-flow-btn-lbl { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.05; }
.wf-flow-btn-sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; opacity: .8; }
.wf-flow-btn-sm .wf-flow-btn-sub { margin-top: 1px; font-size: 9.5px; }
.wf-flow-btn-arrow { width: 17px; height: 17px; display: block; flex: none; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.wf-flow-btn:hover .wf-flow-btn-arrow { transform: translateX(4px); }

.wf-flow-btn-static { animation: none; }

/* Uitgeschakeld — tonen zodra een invoerveld nog leeg is of er eerst een actie
   nodig is voor men door kan. Grijze pil, ontkleurde diamant, geen drift/lift/hover
   (matcht .wfai-off uit het ontwerp). Zet in de partial Disabled = true. */
.wf-flow-btn:disabled, .wf-flow-btn.disabled {
  cursor: not-allowed;
  color: #a9adb6;
  background: linear-gradient(120deg, #ececf2, #e2e2ea);
  box-shadow: none;
  animation: none;
  transform: none;
  filter: none;
}
.wf-flow-btn:disabled .wf-flow-btn-chip, .wf-flow-btn.disabled .wf-flow-btn-chip { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06); }
.wf-flow-btn:disabled .wf-flow-btn-chip img, .wf-flow-btn.disabled .wf-flow-btn-chip img { filter: grayscale(1); opacity: .45; }
.wf-flow-btn:disabled .wf-flow-btn-ai .t, .wf-flow-btn.disabled .wf-flow-btn-ai .t { color: #b6bac2; }
.wf-flow-btn:disabled .wf-flow-btn-ai .d, .wf-flow-btn.disabled .wf-flow-btn-ai .d { background: rgba(1, 16, 61, .12); }
.wf-flow-btn:disabled .wf-flow-btn-arrow, .wf-flow-btn.disabled .wf-flow-btn-arrow { color: #c2c5cd; }
.wf-flow-btn:disabled:hover .wf-flow-btn-chip, .wf-flow-btn.disabled:hover .wf-flow-btn-chip { transform: none; }
.wf-flow-btn:disabled:hover .wf-flow-btn-arrow, .wf-flow-btn.disabled:hover .wf-flow-btn-arrow { transform: none; }

/* ── Klein (44px) ── */
.wf-flow-btn-sm { gap: 10px; height: 44px; padding: 0 20px 0 6px; font-size: 14px; box-shadow: 0 2px 8px rgba(50, 188, 238, .14), 0 2px 8px rgba(218, 23, 108, .09); }
.wf-flow-btn-sm .wf-flow-btn-chip { width: 30px; height: 30px; }
.wf-flow-btn-sm .wf-flow-btn-chip img { width: 19px; height: 19px; }
.wf-flow-btn-sm .wf-flow-btn-ai { gap: 10px; }
.wf-flow-btn-sm .wf-flow-btn-ai .t { font-size: 12.5px; }
.wf-flow-btn-sm .wf-flow-btn-ai .d { height: 15px; }
.wf-flow-btn-sm .wf-flow-btn-body { gap: 8px; padding-left: 1px; }
.wf-flow-btn-sm .wf-flow-btn-arrow { width: 15px; height: 15px; }

/* ── Groot (60px) ── */
.wf-flow-btn-lg { gap: 15px; height: 60px; padding: 0 32px 0 9px; font-size: 18px; box-shadow: 0 2px 8px rgba(50, 188, 238, .16), 0 2px 8px rgba(218, 23, 108, .11); }
.wf-flow-btn-lg .wf-flow-btn-chip { width: 46px; height: 46px; }
.wf-flow-btn-lg .wf-flow-btn-chip img { width: 28px; height: 28px; }
.wf-flow-btn-lg .wf-flow-btn-ai { gap: 15px; }
.wf-flow-btn-lg .wf-flow-btn-ai .t { font-size: 16px; }
.wf-flow-btn-lg .wf-flow-btn-ai .d { height: 22px; }
.wf-flow-btn-lg .wf-flow-btn-arrow { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) { .wf-flow-btn { animation: none; } }


/* ══ Webfix standaardknop — chip-formaat (niet-AI) ═══════════════════════════
   De "standaardknoppen" uit het ontwerp: pil met een witte cirkel-chip (met een
   passend icoon) links, label, en een pijl rechts. Zelfde beweging als de AI-knop
   (tilt op, chip draait, pijl schuift) maar zónder de levende gradient.
   1:1 uit claude-design/webfix-ai-buttons-ontwerp. Toelichting: docs/stijl.md.

   GEBRUIK (bij voorkeur via de partial):
     <partial name="_WfButton" model='new WebfixCMS.ViewModels.WfButtonModel {
         Label = "Opslaan", Variant = "primary", Icon = "bi-check-lg" }' />
   of direct de markup:
     <button class="wf-btn wf-btn-primary" type="submit">
       <span class="wf-btn-chip"><i class="bi bi-check-lg"></i></span>
       <span class="wf-btn-body"><span>Opslaan</span><i class="bi bi-arrow-right wf-btn-arrow"></i></span>
     </button>
   Formaten: .wf-btn-sm (44px) · standaard (50px) · .wf-btn-lg (60px).
   Varianten: -primary -secondary -success -info -warning -danger -light -dark. */
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;                 /* middel (default, 50px) */
  height: 50px;
  padding: 0 26px 0 7px;
  border: none;
  border-radius: 9999px;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  will-change: transform;
}
/* color meegeven op hover: anders wint de algemene a:hover-regel (donkergrijs) bij link-knoppen. */
.wf-btn:hover, .wf-btn:focus { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.wf-btn:active { transform: translateY(0); }
.wf-btn:focus-visible { outline: 3px solid rgba(50, 188, 238, .5); outline-offset: 2px; }

.wf-btn-chip {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(1, 16, 61, .10), inset 0 0 0 1px rgba(1, 16, 61, .05);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.wf-btn-chip i { display: block; }
.wf-btn:hover .wf-btn-chip { transform: scale(1.07) rotate(-4deg); }

.wf-btn-body { display: inline-flex; align-items: center; gap: 9px; padding-left: 2px; }
.wf-btn-arrow { font-size: 15px; display: inline-flex; flex: none; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.wf-btn:hover .wf-btn-arrow { transform: translateX(4px); }

/* Varianten — gradient + chip-icoonkleur (1:1 uit het ontwerp) */
.wf-btn-primary   { background: linear-gradient(120deg, #b52c68, #8a1d4d); box-shadow: 0 2px 8px rgba(161, 35, 89, .15); }
.wf-btn-primary   .wf-btn-chip i { color: #a12359; }
.wf-btn-secondary { background: linear-gradient(120deg, #e83b86, #c2135f); box-shadow: 0 2px 8px rgba(218, 23, 108, .15); }
.wf-btn-secondary .wf-btn-chip i { color: #da176c; }
.wf-btn-success   { background: linear-gradient(120deg, #bcd94e, #a3c62b); box-shadow: 0 2px 8px rgba(176, 209, 54, .16); }
.wf-btn-success   .wf-btn-chip i { color: #7d9a1f; }
.wf-btn-info      { background: linear-gradient(120deg, #3fc4f2, #26a7d6); box-shadow: 0 2px 8px rgba(50, 188, 238, .15); }
.wf-btn-info      .wf-btn-chip i { color: #1f97c4; }
.wf-btn-warning   { background: linear-gradient(120deg, #e6ad45, #cf8f22); box-shadow: 0 2px 8px rgba(220, 158, 47, .15); }
.wf-btn-warning   .wf-btn-chip i { color: #bd8420; }
.wf-btn-danger    { background: linear-gradient(120deg, #e8474c, #d81f25); box-shadow: 0 2px 8px rgba(216, 31, 37, .15); }
.wf-btn-danger    .wf-btn-chip i { color: #d81f25; }
.wf-btn-light     { background: linear-gradient(120deg, #f4f4f9, #e9e9f1); color: #000229; box-shadow: 0 2px 8px rgba(1, 16, 61, .05), inset 0 0 0 1px rgba(1, 16, 61, .10); }
.wf-btn-light, .wf-btn-light:hover, .wf-btn-light:focus { color: #000229; }
.wf-btn-light     .wf-btn-chip i { color: #5F6368; }
.wf-btn-light     .wf-btn-arrow  { color: #888B95; }
.wf-btn-dark      { background: linear-gradient(120deg, #141a3d, #000229); box-shadow: 0 2px 8px rgba(0, 2, 41, .18); }
.wf-btn-dark      .wf-btn-chip i { color: #000229; }

/* Uitgeschakeld — zelfde grijze pil als de AI-knop. */
.wf-btn:disabled, .wf-btn.disabled {
  cursor: not-allowed;
  color: #a9adb6;
  background: linear-gradient(120deg, #ececf2, #e2e2ea);
  box-shadow: none;
  transform: none;
  filter: none;
}
.wf-btn:disabled .wf-btn-chip, .wf-btn.disabled .wf-btn-chip { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06); }
.wf-btn:disabled .wf-btn-chip i, .wf-btn.disabled .wf-btn-chip i { color: #c2c5cd; }
.wf-btn:disabled .wf-btn-arrow, .wf-btn.disabled .wf-btn-arrow { color: #c2c5cd; }
.wf-btn:disabled:hover .wf-btn-chip, .wf-btn.disabled:hover .wf-btn-chip { transform: none; }
.wf-btn:disabled:hover .wf-btn-arrow, .wf-btn.disabled:hover .wf-btn-arrow { transform: none; }

/* Volle breedte: chip + label gecentreerd i.p.v. links (anders scheef). */
.wf-btn.w-100 { justify-content: center; }

/* ── Klein (44px) ── */
.wf-btn-sm { gap: 10px; height: 44px; padding: 0 20px 0 6px; font-size: 14px; }
.wf-btn-sm .wf-btn-chip { width: 30px; height: 30px; font-size: 14px; }
.wf-btn-sm .wf-btn-body { gap: 8px; padding-left: 1px; }
.wf-btn-sm .wf-btn-arrow { font-size: 13px; }

/* ── Groot (60px) ── */
.wf-btn-lg { gap: 15px; height: 60px; padding: 0 32px 0 9px; font-size: 18px; }
.wf-btn-lg .wf-btn-chip { width: 46px; height: 46px; font-size: 18px; }
.wf-btn-lg .wf-btn-arrow { font-size: 17px; }

/* ── Publiek nieuwsbriefarchief (/nieuwsbrieven) ─────────────────────────────
   Gedeelde opmaak voor élke template: de views staan in Views/Site/Shared en worden gekozen zodra een
   template geen eigen versie heeft. Kleuren komen uit de huisstijlvariabelen van de klant, zodat het
   archief er per website anders uitziet zonder dat er per template iets bij hoeft. */
.wf-nba { padding: 48px 0 72px; }
.wf-nba-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.wf-nba-leeg { color: #6b7484; }

.wf-nba-lijst { list-style: none; margin: 0; padding: 0; }
.wf-nba-item + .wf-nba-item { border-top: 1px solid rgba(0, 0, 0, .08); }
.wf-nba-link {
    display: block; padding: 18px 4px; text-decoration: none; color: inherit;
    transition: background .15s;
}
.wf-nba-link:hover { background: rgba(0, 0, 0, .02); }
.wf-nba-datum { display: block; font-size: .8rem; color: #7b8496; margin-bottom: 4px; }
.wf-nba-titel { display: block; font-size: 1.15rem; font-weight: 600; color: var(--brand-primary, #1e3a5f); }
.wf-nba-sub { display: block; margin-top: 3px; color: #6b7484; font-size: .92rem; }

.wf-nba-terug { margin: 0 0 22px; }
.wf-nba-terug a { color: var(--brand-primary, #1e3a5f); text-decoration: none; font-size: .9rem; }
.wf-nba-terug a:hover { text-decoration: underline; }

/* De nieuwsbrief zelf. Hij draagt zijn opmaak inline mee (verzendversie), dus hier alleen een kader
   eromheen — geen typografie, anders vecht de template met de nieuwsbrief. */
.wf-nba-mail {
    border: 1px solid rgba(0, 0, 0, .09); border-radius: 12px; overflow: hidden;
    background: #fff;
}
.wf-nba-mail table { max-width: 100%; }