/* ============================================================================
 * portal-shell.css — WebOké client-area ontwerpsysteem (nieuwe portaal-shell).
 * Tokens + sidebar + pagina-primitieven, 1-op-1 uit de design-handoff
 * (design_handoff_mijn_domeinen: tokens.css + Client Area Prototype).
 * Typografie volgt sinds 2026-08-03 het "vriendelijke dialect" uit
 * docs/typografie-bestelflow.md: systeemstack zonder webfont (Bunny Fonts
 * vervallen), basis 15px, geen mono in klant-UI (cijfers via tabular-nums),
 * ondergrens 12,5px, gewichten 400/600/700/800, sentence case. De
 * --font-mono-var bestaat nog maar wijst naar de sans-stack, zodat alle
 * bestaande gebruikers automatisch meegaan. Alleen voor de ingelogde
 * /mijn*-schermen; de publieke site gebruikt dit niet.
 * ========================================================================== */

:root {
  --brand-primary:#1062fe; --brand-primary-lighter:#009aff; --brand-primary-darker:#003cb2; --brand-secondary:#083fbf;
  --grad-start:#152a80; --grad-end:#1d65af;
  --hero-gradient:linear-gradient(90deg,#152a80,#1d65af);
  --cta-gradient:linear-gradient(135deg,#1062fe 0%,#083fbf 100%);
  --brand-success:#36c055; --brand-success-dark:#1b7d34;
  --brand-warning:#ffaa00; --brand-warning-dark:#9c6a00;
  --brand-danger:#d92632; --brand-danger-dark:#b02129; --accent-yellow:#ffd166;
  --gray-darker:#17191c; --gray-base:#5e636e; --gray-lighter:#979ba4; --gray-lighter-4:#e9eaec;
  --body-bg:#f7f8fa; --surface:#ffffff;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-pill:50px;
  --shadow-card:0 1px 3px rgba(23,25,28,.04),0 8px 24px rgba(23,25,28,.06);
  --shadow-lift:0 2px 8px rgba(23,25,28,.06),0 24px 48px rgba(23,25,28,.12);
  --shadow-primary:0 8px 30px rgba(16,98,254,.25);
  --shadow-hero:0 40px 80px -20px rgba(10,15,30,.55),0 15px 30px -10px rgba(10,15,30,.25),0 2px 4px rgba(10,15,30,.08);
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  --font-mono:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.15s;--dur-base:.25s;--dur-slow:.45s;
  /* Knop- + vlak-tokens uit het design-prototype (waren hardcoded literals). */
  --btn-primary:#1d65af;--btn-primary-hover:#1a5a9c;
  --sbt:#152a80;--txs:#5e636e;
  --grad:linear-gradient(90deg,#1a4a9c,#1d65af);
  --i1:#f4f6fa;--i2:#f0f2f6;--tog:var(--gray-lighter-4,#e9eaec);--bds:#c9cdd6;
  --b04:rgba(16,98,254,.04);--b05:rgba(16,98,254,.05);--b06:rgba(16,98,254,.06);--b08:rgba(16,98,254,.08);--b09:rgba(16,98,254,.09);--b10:rgba(16,98,254,.1);--b12:rgba(16,98,254,.12);--b16:rgba(16,98,254,.16);
}

.wp-body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.5;background:var(--body-bg);color:var(--gray-darker);-webkit-font-smoothing:antialiased}
.wp-body *,.wp-body *::before,.wp-body *::after{box-sizing:border-box}
.wp-body [hidden]{display:none!important}
@keyframes wpToastUp{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes wpFlyIn{from{transform:translateX(-6px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes wpModalIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---- Shell ---- */
.wp-shell{display:flex;min-height:100vh;background:var(--body-bg)}
.wp-main{flex:1;min-width:0;overflow-x:hidden}
.wp-main-in{max-width:1060px;margin:0 auto;padding:30px 36px 80px}

/* ---- Sidebar ---- */
/* De website-header staat er sticky bovenop; de sidebar plakt daaronder en
   houdt zijn eigen hoogte binnen de resterende viewport. */
/* overflow: visible (niet auto) zodat de flyouts die op left:100% buiten de
   sidebar uitsteken NIET worden afgeknipt. overflow-y:auto zou overflow-x
   impliciet op auto zetten en de submenu's verbergen. De sidebar-inhoud past
   normaal in de vensterhoogte; bij hoge zoom scrollt de pagina zelf. */
.wp-side{width:238px;flex:none;background:var(--surface);border-right:1px solid var(--gray-lighter-4);display:flex;flex-direction:column;padding:22px 14px 16px;position:sticky;top:var(--wp-header-h,56px);height:calc(100vh - var(--wp-header-h,56px));overflow:visible;z-index:20}
.wp-side-logo{height:24px;width:auto;align-self:flex-start;margin:0 8px 26px}
.wp-side-eyebrow{font-size:12.5px;font-weight:700;color:var(--gray-lighter);padding:0 11px;margin-bottom:8px}
.wp-side nav{display:flex;flex-direction:column;gap:2px}
.wp-side-div{height:1px;background:var(--gray-lighter-4);margin:14px 11px}
.wp-nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--gray-base);text-decoration:none;transition:background .12s,color .12s}
.wp-nav:hover{background:rgba(16,98,254,.05);color:var(--gray-darker)}
.wp-nav svg{flex:none}
.wp-nav.actief{background:rgba(16,98,254,.08);color:#1062fe;font-weight:700}
.wp-nav.actief svg{color:#1062fe}
.wp-nav-nieuw{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-primary-darker,#003cb2);background:var(--accent-yellow,#ffd166);border-radius:50px;padding:2px 7px}
.wp-nav-badge{margin-left:auto;background:var(--brand-warning);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;border-radius:50px;padding:1px 7px}
/* Na een badge geen tweede auto-marge op de chevron, anders zweeft de badge halverwege. */
.wp-nav-badge~svg:last-child{margin-left:2px!important}
/* Sectie zonder subuser-permissie: gedimd met slotje; klikken legt uit waarom. */
.wp-nav-uit{opacity:.45}
.wp-nav-uit:hover{background:rgba(16,98,254,.05);color:var(--gray-base);opacity:.6}
.wp-nav-ext{margin-left:auto;opacity:.55}
.wp-side-item{position:relative}
/* De chevron in het hoofd-item (a) staat rechts (design). */
.wp-side-item>.wp-nav>svg:last-child{margin-left:auto;opacity:.6}
/* De chevron-knop is een onzichtbaar klik/-focusdoel OVER de chevron, zodat de
   flyout ook met toetsenbord/touch te openen is zonder ongeldig button-in-anchor. */
.wp-fly-toggle{position:absolute;top:0;right:0;width:34px;height:36px;background:none;border:0;cursor:pointer;color:transparent;padding:0;z-index:2}
.wp-fly-toggle svg{width:0;height:0;opacity:0}
/* Flyout (desktop hover met intent + toetsenbord/touch via .open) */
.wp-fly{position:absolute;left:100%;top:-6px;margin-left:6px;width:224px;background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:12px;box-shadow:var(--shadow-lift);padding:7px;z-index:50;visibility:hidden;opacity:0;transition:opacity .12s var(--ease-standard),visibility 0s linear .28s}
.wp-side-item:hover .wp-fly,.wp-side-item.open .wp-fly{visibility:visible;opacity:1;transition-delay:.15s,.15s;animation:wpFlyIn .15s var(--ease-standard)}
.wp-fly a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--gray-darker);text-decoration:none}
.wp-fly a:hover{background:rgba(16,98,254,.06)}
.wp-fly a svg{color:var(--brand-primary);flex:none}
/* Onderblok: account + mini-links + donkere modus */
.wp-side-onder{margin-top:auto;padding-top:12px;border-top:1px solid var(--gray-lighter-4)}
.wp-side-acc{display:flex;align-items:center;gap:10px;padding:2px 6px 8px}
.wp-side-avatar{width:32px;height:32px;border-radius:50%;background:rgba(16,98,254,.1);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.wp-side-acc-naam{font-size:13.5px;font-weight:700;color:var(--gray-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-side-acc-bedrijf{font-size:12.5px;color:var(--gray-lighter);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-side-mini{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-base);text-decoration:none;background:none;border:0;width:100%;cursor:pointer;text-align:left;font-family:inherit}
.wp-side-mini svg{flex:none}
.wp-side-mini:hover{background:rgba(16,98,254,.06);color:var(--brand-primary)}
.wp-side-uit:hover{background:rgba(233,74,74,.07);color:var(--brand-danger)}
/* Accountwissel (details-uitklap onder Inloggegevens): summary oogt als
   wp-side-mini, de lijst als compacte accountknopjes; actief account gedimd
   met een vinkstreepje-kleur. */
.wp-side-wissel summary{list-style:none}
.wp-side-wissel summary::-webkit-details-marker{display:none}
.wp-side-wissel[open] summary{background:rgba(16,98,254,.06);color:var(--brand-primary);border-radius:8px}
.wp-side-wissel-lijst{display:flex;flex-direction:column;gap:2px;margin:4px 0 4px 22px}
.wp-side-wissel-lijst form{margin:0}
.wp-side-wissel-acc{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;background:none;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--gray-base);text-align:left}
.wp-side-wissel-acc:hover{background:rgba(16,98,254,.06);color:var(--brand-primary)}
.wp-side-wissel-acc.actief{color:var(--brand-primary);cursor:default}
.wp-side-wissel-acc.actief:hover{background:none}
.wp-side-wissel-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-side-wissel-id{flex:none;font-size:11px;color:var(--gray-lighter)}
/* Uit-stand in --bds: --gray-lighter-4 was op de witte sidebar vrijwel onzichtbaar (zelfde fix als .wp-toggle). */
.wp-side-switch{margin-left:auto;display:inline-flex;width:30px;height:18px;border-radius:50px;position:relative;flex:none;background:var(--bds,#c9cdd6);transition:background .2s}
.wp-side-switch .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .2s}
.wp-side-mini[aria-checked="true"] .wp-side-switch{background:var(--brand-primary)}
.wp-side-mini[aria-checked="true"] .wp-side-switch .knob{left:14px}
/* Skip-link + focusring (WCAG 2.2 AA) */
.wp-skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand-primary);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;font-size:13.5px}
.wp-skiplink:focus{left:0}
.wp-body a:focus-visible,.wp-body button:focus-visible,.wp-body input:focus-visible,.wp-body select:focus-visible,.wp-body textarea:focus-visible,.wp-body [tabindex]:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.wp-body *,.wp-body *::before,.wp-body *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---- Donkere modus ---- (blauw-alpha's + knop meegenomen zodat contrast klopt) */
/* Nacht: warme oranje accenten op donker blauwgrijs (gebruikerswens 2026-08-11);
   knoppen oranje met donkere tekst voor contrast, alpha-tinten in amber. */
.wp-body[data-night="1"]{--body-bg:#0d1220;--surface:#151c2e;--gray-lighter-4:#27304a;--gray-darker:#e9ecf4;--gray-base:#a9b1c4;--gray-lighter:#6f7a92;--brand-primary:#ffa45c;--brand-primary-darker:#ffc79a;--brand-success-dark:#63d886;--brand-warning-dark:#ffc45c;--brand-danger-dark:#ff8d95;--hero-gradient:linear-gradient(90deg,#0f2a54,#123f6e);--grad:linear-gradient(90deg,#0f2a54,#123f6e);--btn-primary:#e07b1f;--btn-primary-hover:#f08a2e;--sbt:#ffd9b3;--txs:#a9b1c4;--i1:#0d1220;--i2:#242e49;--tog:#39425c;--bds:#4a5573;--b04:rgba(255,164,92,.07);--b05:rgba(255,164,92,.09);--b06:rgba(255,164,92,.11);--b08:rgba(255,164,92,.14);--b09:rgba(255,164,92,.15);--b10:rgba(255,164,92,.17);--b12:rgba(255,164,92,.21);--b16:rgba(255,164,92,.27);color-scheme:dark}
.wp-body[data-night="1"] .wp-nav.actief{background:rgba(255,164,92,.16);color:var(--brand-primary,#ffa45c)}
.wp-body[data-night="1"] .wp-nav.actief svg{color:var(--brand-primary,#ffa45c)}
.wp-body[data-night="1"] .wp-btn-primary,.wp-body[data-night="1"] .wp-btn-primary:hover{color:#231303}
.wp-body[data-night="1"] .wp-btn-primary .pijl{stroke:#231303}
.wp-body[data-night="1"] .wp-btn-secondary{color:#ffc79a;background:rgba(255,164,92,.12)}
.wp-body[data-night="1"] .wp-btn-stil{background:#242e49;color:#a9b1c4}
.wp-body[data-night="1"] .nm-logo{filter:brightness(0) invert(1)}
/* Tabbladen in nacht: segmented — het spoor volgt --i2, maar --surface is dan
   donkerder dan het spoor; het actieve blokje krijgt daarom de lichtere
   toggle-tint. Map-variant: lichte overlay op inactieve mapjes + zwaardere
   schaduw (dag-tintje/schaduw zijn op donker onzichtbaar). */
.wp-body[data-night="1"] .wp-tab.actief{background:var(--tog,#39425c);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.wp-body[data-night="1"] .wp-tabs.map .wp-tab:not(.actief){background:rgba(255,255,255,.045)}
.wp-body[data-night="1"] .wp-tabs.map .wp-tab:not(.actief):hover{background:var(--b08)}
.wp-body[data-night="1"] .wp-tabs.map .wp-tab.actief{background:var(--surface);box-shadow:0 -2px 7px rgba(0,0,0,.45)}

/* ---- Mobiel: sidebar als linker lade achter de hamburger ----
   Lagen: de sticky portaal-header staat op z 70. De burger moet DAARBOVEN
   (z 85, hij staat visueel in de headerstrook), de open lade (z 95) en de
   dimlaag (z 90) schuiven over header én inhoud heen; met z-waarden onder
   de 70 stond de knop onzichtbaar achter de dekkende header. */
.wp-burger{display:none;position:fixed;top:7px;left:14px;z-index:85;width:42px;height:42px;border-radius:10px;border:1px solid var(--gray-lighter-4);background:var(--surface,#fff);color:var(--gray-darker);align-items:center;justify-content:center;cursor:pointer}
.wp-overlay{display:none;position:fixed;inset:0;background:rgba(13,18,38,.4);z-index:90}
@media(max-width:900px){
  .wp-burger{display:flex}
  .wp-side{position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:95;transform:translateX(-100%);transition:transform .22s var(--ease-standard);box-shadow:var(--shadow-lift);overflow-y:auto;overscroll-behavior:contain}
  .wp-shell.open .wp-side{transform:translateX(0)}
  .wp-shell.open .wp-overlay{display:block}
  .wp-main-in{padding:22px 18px 60px}
  /* Ingelogd op mobiel: links naar de publieke site (winkelwagen +
     "Naar de website") uit de headerstrook; de lade dekt het portaal. */
  .wp-ph-cart,.wp-ph-site{display:none}
  /* Mobiel: flyouts als inline accordeon (niet naast de sidebar), open via de
     chevron-knop. De hover-versie (left:100%) valt buiten het scherm. */
  .wp-fly{position:static;left:auto;margin:2px 0 4px 26px;width:auto;box-shadow:none;border:0;border-left:2px solid var(--gray-lighter-4);border-radius:0;padding:2px 0 2px 8px;display:none;visibility:visible;opacity:1;transition:none}
  .wp-side-item.open .wp-fly{display:block;animation:none}
  .wp-side-item:hover .wp-fly{display:none}
  .wp-side-item.open:hover .wp-fly{display:block}
  .wp-fly-toggle{width:40px;height:38px}
}

/* ---- Publieke website-header bovenaan het portaal (altijd zichtbaar) ---- */
.wp-website-header{position:sticky;top:0;z-index:70;background:var(--surface);box-shadow:0 1px 0 var(--gray-lighter-4)}
/* ---- Minimale portaal-header (met bescheiden website-menu) ---- */
.wp-ph{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 24px;max-width:none}
.wp-ph-logo{display:flex;align-items:center}
.wp-ph-logo img{height:30px;width:auto;display:block}
.wp-ph-logo .wp-ph-logo-nacht{display:none}
.wp-body[data-night="1"] .wp-ph-logo .wp-ph-logo-dag{display:none}
.wp-body[data-night="1"] .wp-ph-logo .wp-ph-logo-nacht{display:block}
.wp-ph-rechts{display:flex;align-items:center;gap:4px;margin-left:auto}
.wp-ph-link{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-base);text-decoration:none}
.wp-ph-link:hover{background:rgba(16,98,254,.06);color:var(--brand-primary)}
.wp-ph-uit:hover{background:rgba(233,74,74,.07);color:var(--brand-danger)}
/* Taalkiezer met vlaggetjes: de knop toont de huidige taal, hover/focus opent
   de keuzelijst. */
/* Winkelwagen in de portaal-header: zelfde rustige linkstijl, geen onderstreping. */
.wp-ph-cart .s-tp-cart{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-base);text-decoration:none}
.wp-ph-cart .s-tp-cart:hover{background:rgba(16,98,254,.06);color:var(--brand-primary);text-decoration:none}
.wp-ph-vlag{width:21px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(10,15,30,.14);flex:none}
.wp-ph-taal{position:relative}
.wp-ph-taalknop{border:0;background:none;cursor:pointer;font:inherit}
/* Geen display:none maar visibility+opacity met een sluit-vertraging, plus een
   onzichtbare brug over de strook tussen knop en menu: zo overleeft de hover
   een niet-perfecte muisbeweging. */
.wp-ph-taalmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:172px;background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:12px;box-shadow:var(--shadow-lift);padding:7px;z-index:60;visibility:hidden;opacity:0;transition:opacity .12s var(--ease-standard),visibility 0s linear .35s}
.wp-ph-taalmenu::before{content:"";position:absolute;left:-10px;right:-10px;top:-10px;height:12px}
.wp-ph-taal:hover .wp-ph-taalmenu,.wp-ph-taal:focus-within .wp-ph-taalmenu{visibility:visible;opacity:1;transition-delay:0s,0s}
.wp-ph-taalmenu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-darker);text-decoration:none}
.wp-ph-taalmenu a:hover{background:rgba(16,98,254,.06);color:var(--brand-primary)}
.wp-ph-taalmenu a.actief{background:rgba(16,98,254,.08);color:#1d65af}
/* Onder 1300px de tekstlabels rechts (Winkelwagen/Website/taal/Uitloggen) naar
   icoon-only: logo + DB-menu + zoekbalk-minimum + volle labels passen samen
   pas vanaf ~1230px, en het menu blijft tot 1000px zichtbaar. */
@media(max-width:1300px){.wp-ph-lbl{display:none}}
/* Zodra de burger in de headerstrook staat (<=900px) ruimte links vrijhouden,
   anders valt hij over het logo. */
@media(max-width:900px){.wp-ph{padding:0 16px 0 66px}}
/* Bescheiden website-menu tussen logo en snelkoppelingen */
.wp-phm{display:flex;align-items:center;gap:2px;margin-left:14px;min-width:0}
.wp-phm-item{position:relative}
.wp-phm-knop{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:0;background:none;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--gray-base);cursor:pointer;text-decoration:none;white-space:nowrap}
.wp-phm-knop:hover,.wp-phm-item.open .wp-phm-knop{background:rgba(16,98,254,.06);color:var(--brand-primary)}
.wp-phm-drop{position:absolute;left:0;top:calc(100% + 6px);min-width:215px;background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:12px;box-shadow:var(--shadow-lift);padding:7px;z-index:60;display:none}
.wp-phm-item.open .wp-phm-drop{display:block}
.wp-phm-drop a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-darker);text-decoration:none}
.wp-phm-drop a:hover{background:rgba(16,98,254,.07);color:var(--brand-primary)}
@media(max-width:1000px){.wp-phm{display:none}}

/* ---- Paginakop ---- */
.wp-h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1}
.wp-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.wp-eyebrow{font-size:12.5px;font-weight:600;color:var(--gray-lighter);margin-bottom:6px}

/* ---- Sub-tabbalk op de pagina: segmented control ---- */
/* Alle tabs samen in één afgerond grijs spoor; de actieve tab is een wit
   blokje met een subtiele schaduw. Het spoor is zo breed als de inhoud en
   scrollt horizontaal op smalle schermen. */
.wp-tabs{display:flex;gap:3px;background:var(--i2,#eceef2);border:1px solid var(--gray-lighter-4);border-radius:12px;padding:4px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.wp-tabs::-webkit-scrollbar{display:none}
.wp-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--gray-base);text-decoration:none;white-space:nowrap;border:0;border-radius:9px;background:none}
.wp-tab:hover{color:var(--gray-darker)}
.wp-tab.actief{color:var(--brand-primary);font-weight:700;background:var(--surface);box-shadow:0 1px 3px rgba(23,25,28,.12)}
.wp-tab.actief:hover{background:var(--surface)}
.wp-tab svg{flex:none}
/* Map-variant (.map): klassieke mapjes-tabs die vastzitten aan het vlak
   eronder (gebruikt door de DNS-tab: subtabs bovenop het records-venster).
   De balklijn is een background-lijntje (een kind kan nooit de border van
   zijn scroll-container afdekken; een background wél). */
.wp-tabs.map{background:none;border:0;border-radius:0;padding:6px 0 0;width:auto;max-width:none;gap:4px;background-image:linear-gradient(var(--gray-lighter-4),var(--gray-lighter-4));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%}
.wp-tabs.map .wp-tab{border:1px solid var(--gray-lighter-4);border-radius:10px 10px 0 0;background:rgba(23,25,28,.035);margin-top:5px;padding:10px 14px}
.wp-tabs.map .wp-tab:hover{background:var(--b06);color:var(--gray-darker)}
.wp-tabs.map .wp-tab.actief{color:var(--brand-primary);background:var(--surface);border-bottom-color:var(--surface);border-top:2px solid var(--brand-primary);margin-top:0;box-shadow:0 -4px 10px rgba(23,25,28,.05)}
.wp-tabs.map .wp-tab.actief:hover{background:var(--surface)}

/* ---- Knoppen ---- */
/* Knoppenstandaard (docs/knoppen-bestelflow.md): drie maten (groot 15/15-28,
   standaard 14/11-20, klein 13/8-15), alles 700; client area = radius 8px. */
.wp-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:8px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:0;font-family:inherit;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s}
/* Primair = effen #1d65af (de lichtste gradientkleur), conform het design en
   de project-CLAUDE.md (knopstijl 8a). NIET #152a80: dat is de donkere
   gradient-start / secundaire-knoptekst (--sbt). */
.wp-btn-primary{color:#fff;background:var(--btn-primary,#1d65af);box-shadow:0 1px 3px rgba(29,101,175,.35)}
.wp-btn-primary:hover{background:var(--btn-primary-hover,#1a5a9c);color:#fff}
.wp-btn-primary .pijl{stroke:var(--accent-yellow);margin-left:0}
.wp-btn-secondary{color:#1d65af;background:rgba(16,98,254,.08)}
.wp-btn-secondary:hover{background:rgba(16,98,254,.14);color:#1d65af}
.wp-btn-danger{color:#fff;background:var(--brand-danger)}
.wp-btn-danger:hover{background:#b81f2a;color:#fff}
.wp-btn-sm{padding:8px 15px;font-size:13px}
.wp-btn-lg{padding:15px 28px;font-size:15px}
.wp-btn-lg.wp-btn-primary{box-shadow:0 4px 12px rgba(29,101,175,.35)}
.wp-btn-stil{background:#f0f2f6;color:var(--gray-base,#5e636e)}
.wp-btn-stil:hover{background:#e8eaef;color:var(--gray-darker,#17191c)}
.wp-btn:disabled,.wp-btn.wp-btn-uit{background:#eceef2;color:#9aa0aa;box-shadow:none;cursor:not-allowed}
.wp-btn:disabled svg,.wp-btn.wp-btn-uit svg{stroke:#b3b7bf}
.wp-link{color:var(--brand-primary);font-weight:700;cursor:pointer;text-decoration:none}

/* ---- Kaarten ---- */
.wp-card{background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.wp-card-pad{padding:20px 22px}
.wp-card-kop{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--gray-darker);margin-bottom:14px}
.wp-card-kop svg{color:var(--brand-primary);flex:none}
.wp-card-kop .rechts{margin-left:auto}

/* ---- Statuschips / dots ---- */
.wp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:var(--radius-pill);padding:3px 10px;white-space:nowrap}
.wp-chip-dot{width:6px;height:6px;border-radius:50%;flex:none}
.wp-chip.ok{color:var(--brand-success-dark);background:rgba(54,192,85,.1)} .wp-chip.ok .wp-chip-dot{background:var(--brand-success)}
.wp-chip.warn{color:var(--brand-warning-dark);background:rgba(255,170,0,.1)} .wp-chip.warn .wp-chip-dot{background:var(--brand-warning)}
.wp-chip.gray{color:var(--gray-base,#5e636e);background:var(--i2,#f0f1f3)} .wp-chip.gray .wp-chip-dot{background:var(--gray-lighter)}
.wp-chip.info{color:#152a80;background:rgba(16,98,254,.09)} .wp-chip.info .wp-chip-dot{background:var(--brand-primary)}
.wp-chip.fout{color:var(--brand-danger-dark);background:rgba(217,38,50,.1)} .wp-chip.fout .wp-chip-dot{background:var(--brand-danger)}
.wp-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- Kaartlijst: rijen als losse compacte kaartjes (met ruimte ertussen)
   i.p.v. één vlak met scheidingslijntjes. De rijen houden hun eigen
   kolomraster zodat een slanke kopregel erboven blijft uitlijnen én het
   klik-sorteren (portaal-ui.js) gewoon werkt. ---- */
.wp-kaartlijst{display:flex;flex-direction:column;gap:10px}
.wp-kaartlijst .wp-tabel-rij,.wp-kaartlijst .mnd-tabelrij{border-bottom:0}
.wp-rij-klik{cursor:pointer;transition:background .12s}
.wp-rij-klik:hover{background:rgba(16,98,254,.03)}
.wp-rijkaart-ico{width:28px;height:28px;flex:none;border-radius:8px;background:rgba(16,98,254,.08);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:12px}
.wp-rijkaart-tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.wp-rijkaart-naam{font-size:13.5px;font-weight:700;color:var(--gray-darker);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.wp-rijkaart-naam:hover{color:var(--brand-primary)}
.wp-rijkaart-sub{font-size:12px;color:var(--gray-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Toggle (auto-verlenging) ---- */
/* Uit-stand in --bds (stevig grijs): --gray-lighter-4 was op een witte kaart
   vrijwel onzichtbaar (wit knopje op bijna-wit spoor). */
.wp-toggle{display:inline-flex;width:30px;height:18px;border-radius:50px;position:relative;cursor:pointer;transition:background .2s;background:var(--bds,#c9cdd6);border:0;padding:0;flex:none}
.wp-toggle.aan{background:var(--brand-success)}
.wp-toggle.disabled{opacity:.5;cursor:not-allowed}
.wp-toggle .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .2s}
.wp-toggle.aan .knob{left:14px}

/* ---- Tabel ---- */
.wp-tabel-kop{display:grid;gap:10px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--gray-lighter-4);font-size:12.5px;font-weight:700;color:var(--gray-lighter)}
.wp-tabel-rij{display:grid;gap:10px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--gray-lighter-4)}
.wp-tabel-rij:last-child{border-bottom:0}
/* Kolomcellen: past de inhoud niet, dan afkappen met ellipsis; portaal-ui.js
   toont bij hover automatisch de volledige inhoud als tooltip. Actie-cellen
   en meerregelige cellen zetten dit per pagina terug op normal/visible. */
.wp-tabel-kop>span,.wp-tabel-rij>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sorteerbare kolomkoppen (portaal-ui.js): klik = sorteren, pijl = richting. */
.wp-tabel-kop>span[data-sorteer],.mnd-tabelkop>span[data-sorteer],.mnd-dnskop>span[data-sorteer]{cursor:pointer;user-select:none}
.wp-tabel-kop>span[data-sorteer]:hover,.mnd-tabelkop>span[data-sorteer]:hover,.mnd-dnskop>span[data-sorteer]:hover{color:var(--brand-primary)}
.wp-tabel-kop>span[data-sorteer]:focus-visible,.mnd-tabelkop>span[data-sorteer]:focus-visible,.mnd-dnskop>span[data-sorteer]:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;border-radius:4px}
.wp-tabel-kop>span[aria-sort=ascending]::after,.mnd-tabelkop>span[aria-sort=ascending]::after,.mnd-dnskop>span[aria-sort=ascending]::after{content:" \2191";color:var(--brand-primary)}
.wp-tabel-kop>span[aria-sort=descending]::after,.mnd-tabelkop>span[aria-sort=descending]::after,.mnd-dnskop>span[aria-sort=descending]::after{content:" \2193";color:var(--brand-primary)}
/* Rand in --bds (stevig grijs): --gray-lighter-4 was op een witte kaart
   vrijwel onzichtbaar (zelfde fix als .wp-toggle/.wp-side-switch). */
.wp-checkbox{width:17px;height:17px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;border:1.6px solid var(--bds,#c9cdd6);background:var(--surface,#fff)}
.wp-checkbox:hover{border-color:var(--gray-lighter)}
.wp-checkbox.aan{background:#1062fe;border-color:#1062fe}
.wp-openweb{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:rgba(16,98,254,.09);border-radius:6px;color:#152a80;text-decoration:none;flex:none}
.wp-openweb:hover{background:rgba(16,98,254,.16)}

/* ---- Zoekveld ---- */
.wp-zoek{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:9px;padding:0 13px}
.wp-zoek input{flex:1;border:none;outline:none;background:transparent;padding:10px 0;font-size:14px;font-family:var(--font-sans);color:var(--gray-darker)}

/* ---- Bulk-balk ---- */
.wp-bulk{background:var(--grad,linear-gradient(90deg,#1a4a9c,#1d65af));border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.wp-bulk-tel{font-size:13.5px;font-weight:700;color:#fff}
.wp-bulk a{font-size:13px;font-weight:700;white-space:nowrap;border-radius:7px;padding:6px 12px;cursor:pointer;text-decoration:none}

/* ---- Info-box ---- */
.wp-box{display:flex;gap:13px;align-items:flex-start;border-radius:var(--radius-md);padding:14px 18px;margin-bottom:14px}
.wp-box .ico{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.wp-box.info{background:rgba(16,98,254,.06);border:1px solid rgba(16,98,254,.2)} .wp-box.info .ico{background:rgba(16,98,254,.12);color:#152a80}
.wp-box.warn{background:rgba(255,170,0,.07);border:1px solid rgba(255,170,0,.4)} .wp-box.warn .ico{background:rgba(255,170,0,.15);color:var(--brand-warning-dark)}
.wp-box.ok{background:rgba(54,192,85,.08);border:1px solid rgba(54,192,85,.35)} .wp-box.ok .ico{background:rgba(54,192,85,.15);color:var(--brand-success-dark)}
.wp-box-titel{font-size:14px;font-weight:700;color:var(--gray-darker)}
.wp-box-tekst{font-size:13px;color:var(--gray-base);line-height:1.55;margin-top:2px}

/* ---- Stat-kaart (dashboard) ---- */
.wp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wp-stat{background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:var(--radius-lg);padding:18px 18px 15px;display:block;cursor:pointer;text-decoration:none;transition:all .25s var(--ease-standard)}
.wp-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(16,98,254,.3)}
.wp-stat-ico{width:38px;height:38px;border-radius:11px;background:rgba(16,98,254,.08);color:var(--brand-primary);display:flex;align-items:center;justify-content:center}
.wp-stat-getal{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--gray-darker);line-height:1}
.wp-stat-label{font-size:14px;font-weight:600;color:var(--gray-base);margin-top:5px}
.wp-stat-sub{font-size:12.5px;color:var(--gray-lighter);margin-top:2px}
@media(max-width:820px){.wp-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wp-stats{grid-template-columns:1fr}}

/* ---- Lege staat ---- */
.wp-leeg{background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:var(--radius-lg);padding:52px 30px;display:flex;flex-direction:column;align-items:center;text-align:center}
.wp-leeg-ico{width:52px;height:52px;border-radius:16px;background:rgba(16,98,254,.08);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.wp-leeg h3{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--gray-darker);margin:0 0 5px}
.wp-leeg p{font-size:13.5px;color:var(--gray-base);line-height:1.6;max-width:380px;margin:0 0 18px}

/* ---- Modal ---- */
.wp-modal{border:0;border-radius:16px;padding:0;max-width:460px;width:92%;box-shadow:var(--shadow-hero);animation:wpModalIn .18s var(--ease-standard);max-height:calc(100vh - 32px);overflow-y:auto}
.wp-modal::backdrop{background:rgba(13,18,38,.5)}
.wp-modal-kop{display:flex;align-items:center;gap:12px;padding:20px 22px 4px}
.wp-modal-kop .ico{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center}
.wp-modal-kop .ico.warn{background:rgba(255,170,0,.14);color:var(--brand-warning-dark)}
.wp-modal-kop .ico.danger{background:rgba(217,38,50,.12);color:var(--brand-danger)}
.wp-modal-kop .ico.info{background:rgba(16,98,254,.1);color:#152a80}
.wp-modal-titel{font-size:15px;font-weight:800;color:var(--gray-darker)}
.wp-modal-body{padding:10px 22px 18px;font-size:13.5px;color:var(--gray-base);line-height:1.6;white-space:pre-wrap}
.wp-modal-body-form{white-space:normal}
.wp-modal-body .veld{margin:12px 0}
.wp-modal-body label{display:block;font-weight:600;font-size:13px;color:var(--gray-darker);margin-bottom:5px}
/* Vulling in --body-bg: de popup is zelf wit, dus zonder vulling zijn de
   velden wit-op-wit onzichtbaar; bij focus wordt het veld wit (huispatroon). */
.wp-modal-body input,.wp-modal-body select,.wp-modal-body textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--gray-lighter-4);border-radius:9px;font:inherit;font-size:14px;background:var(--body-bg);color:var(--gray-darker)}
.wp-modal-body input:focus,.wp-modal-body select:focus,.wp-modal-body textarea:focus{border-color:var(--brand-primary);background:var(--surface)}
.wp-modal-vt{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--gray-lighter-4);background:var(--body-bg,#fafbfc)}
.opzeg-reden-keuzes{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.opzeg-reden-knop{border:1.5px solid var(--gray-lighter-4);background:var(--body-bg,#fafbfc);color:var(--gray-darker);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}
.opzeg-reden-knop[aria-pressed="true"]{border-color:var(--brand-primary);background:color-mix(in srgb, var(--brand-primary) 12%, var(--surface));color:var(--brand-primary);font-weight:600}
.wp-modal-sluit{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--gray-lighter);line-height:1}

/* ---- Toast ---- */
.wp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#17191c;color:#fff;font-size:14px;font-weight:600;border-radius:10px;padding:12px 18px;z-index:200;animation:wpToastUp .25s var(--ease-standard);box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:min(92vw,420px);text-align:center}
/* Toast binnen een geopende modal: verankerd onderin de dialog (die staat al in
   de top layer, dus bovenop), niet onderaan het scherm — zo blijft de melding
   leesbaar en binnen het popup-venster. */
.wp-toast-in-modal{position:absolute;bottom:16px;z-index:10;max-width:calc(100% - 32px)}
/* Fout-toast: rood, blijft staan tot hij met de sluitknop wordt weggeklikt. */
.wp-toast-fout{background:#b3261e;display:flex;align-items:flex-start;gap:12px;text-align:left}
.wp-toast-sluit{background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;opacity:.85;flex:0 0 auto}
.wp-toast-sluit:hover,.wp-toast-sluit:focus{opacity:1}

/* ---- Definitielijst ---- */
.wp-dl{display:grid;grid-template-columns:180px 1fr;gap:0}
.wp-dl dt{padding:10px 0;color:var(--gray-base);font-size:14px;border-bottom:1px solid var(--gray-lighter-4)}
.wp-dl dd{padding:10px 0;margin:0;font-weight:600;color:var(--gray-darker);border-bottom:1px solid var(--gray-lighter-4)}
@media(max-width:560px){.wp-dl{grid-template-columns:1fr}.wp-dl dt{border-bottom:0;padding-bottom:2px}}

/* ---- Kaartraster ---- */
.wp-kaartraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}

/* ---- Command palette (Cmd/Ctrl+K) ---- */
.wp-cmd{width:min(560px,94vw);max-height:70vh;border:0;border-radius:14px;padding:0;box-shadow:var(--shadow-hero);background:var(--surface);color:var(--gray-darker)}
.wp-cmd::backdrop{background:rgba(13,18,38,.5)}
.wp-cmd-zoek{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--gray-lighter-4)}
.wp-cmd-zoek input{flex:1;border:0;outline:none;background:transparent;font:inherit;font-size:15px;color:var(--gray-darker)}
.wp-cmd-esc{font-size:12.5px;font-weight:600;color:var(--gray-lighter);background:var(--body-bg);border:1px solid var(--gray-lighter-4);border-radius:5px;padding:2px 6px}
.wp-cmd-lijst{list-style:none;margin:0;padding:7px;max-height:52vh;overflow-y:auto}
.wp-cmd-item{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--gray-darker);cursor:pointer}
.wp-cmd-item.actief{background:var(--b08,rgba(16,98,254,.08));color:var(--brand-primary)}

/* --- Admin-impersonatiebalk (Ingelogd als admin namens klant) --------------- */
.wp-adminbalk{position:sticky;top:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--grad-start);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;text-align:center}
.wp-adminbalk a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700;white-space:nowrap}
.wp-adminbalk a:hover{color:var(--brand-primary-lighter)}

/* Knop die eruitziet als een tekstlink (toegankelijk alternatief voor <a onclick>) */
.wp-linkknop{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--brand-primary);text-decoration:underline;text-underline-offset:2px}
.wp-bulk .wp-linkknop{color:#fff;opacity:.85;font-size:13px}

/* ---- Globale zoekbalk in de portaal-header (altijd in beeld) ---- */
/* In de flex-flow tussen menu en rechterblok (niet absoluut: het menu komt uit
   de database en varieert in breedte, dus een gecentreerd-zwevende balk viel
   er op middenbreedtes overheen). margin:auto centreert in de restruimte;
   position:relative is het anker voor het resultatenpaneel. */
.wp-ph{position:relative}
.wp-topzoek{position:relative;flex:1 1 200px;min-width:140px;max-width:460px;margin:0 auto;z-index:5}
.wp-topzoek-in{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--bds,#c9cdd6);border-radius:50px;padding:9px 17px;box-shadow:var(--shadow-card)}
.wp-topzoek-in:focus-within{border-color:var(--brand-primary);background:var(--surface);box-shadow:0 0 0 3px var(--b12,rgba(16,98,254,.12))}
.wp-topzoek-in>i{color:var(--brand-primary);flex:none;font-size:14px}
.wp-topzoek input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--gray-darker);padding:0;min-width:0}
.wp-topzoek input::placeholder{color:var(--gray-lighter)}
.wp-topzoek-paneel{position:absolute;top:calc(100% + 10px);left:0;width:max(100%,min(480px,80vw));background:var(--surface);border:1px solid var(--gray-lighter-4);border-radius:14px;box-shadow:var(--shadow-lift);max-height:min(65vh,520px);overflow-y:auto;padding:8px;z-index:80}
.wp-topzoek-groep{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--gray-lighter);padding:10px 12px 4px}
.wp-topzoek-item{display:flex;align-items:baseline;gap:9px;padding:8px 12px;border-radius:8px;text-decoration:none;font-size:13.5px;font-weight:600;color:var(--gray-darker)}
.wp-topzoek-item:hover,.wp-topzoek-item:focus{background:var(--b06,rgba(16,98,254,.06));outline:none}
.wp-topzoek-item .sub{font-size:12px;font-weight:400;color:var(--gray-lighter);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-topzoek-leeg{padding:12px;font-size:13px;color:var(--gray-lighter);text-align:center}
@media(max-width:640px){.wp-topzoek{margin:0 2px}.wp-topzoek-paneel{width:100%}}
/* Focus hoort op de HELE balk (focus-within-ring hierboven), niet op het veld
   erbinnen: de globale focus-outline zou anders een tweede ring ín de pill
   tekenen. De balk zelf blijft een duidelijke indicator. */
.wp-topzoek input:focus,.wp-topzoek input:focus-visible{outline:none}
/* Mobiel: modal-invoer >= 16px, anders zoomt iOS Safari in bij focus. */
@media(max-width:640px){.wp-modal-body input,.wp-modal-body select,.wp-modal-body textarea{font-size:16px}}
.wp-toast-blijvend{display:flex;align-items:flex-start;gap:12px;text-align:left}

/* Affiliate-programma: vaste plek in de sidebar boven de account-voet. */
.wp-side-aff{display:flex;gap:10px;align-items:flex-start;margin:auto 0 12px;padding:10px 12px;border:1px solid var(--gray-lighter-4);border-radius:12px;text-decoration:none;color:var(--gray-darker)}
.wp-side-aff:hover,.wp-side-aff.actief{border-color:var(--brand-primary)}
.wp-side-aff + .wp-side-onder{margin-top:0}
.wp-side-aff svg{flex:none;color:var(--brand-primary);margin-top:1px}
.wp-side-aff-naam{display:block;font-size:13px;font-weight:700;line-height:1.3}
.wp-side-aff-sub{display:block;font-size:11.5px;color:var(--gray-base);line-height:1.35;margin-top:2px}

/* IP-blokkade-balk (Ben ik geblokkeerd) */
.wp-ipblok-balk{background:#fff3cd;color:#5a4300;padding:10px 16px;font-size:14px;text-align:center}
.wp-ipblok-balk a{color:inherit;font-weight:700;text-decoration:underline}