/* ==========================================================================
   Kinderplezier — Account portal (/account/)
   Depends on shared.css (design tokens, fonts). Component CSS ported from
   the Willem-review mockup (tmp/mijn-account/mijn-account.html), remapped
   from its invented --kp-* tokens onto the theme's real tokens and
   reprefixed kpap- (kp-account-portal) throughout — see the Phase-2 handoff
   for the full 1:1 mapping. Mobile breakpoint matches the site convention
   (767px, see landing.css).
   ========================================================================== */

body.kpap-body {
    margin: 0;
    background: var(--color-bg);
    /* ⭐ AV9 (Willem 2026-08-11, "Mobiel"): "Breedte van pagina's moet altijd juiste
       breedte hebben. Nu kan ik soms horizontaal scrollen ... bij heen en weer
       klikken." Defensieve klem: geen enkel paneel of control mag de pagina breder
       maken dan het scherm. De off-canvas nav-drawer is position:fixed en valt hier
       buiten, dus die blijft gewoon in-/uitschuiven. */
    overflow-x: hidden;
}

/* ── Verlopen / no session ────────────────────────────────────────────── */
.kpap-expired {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--color-bg);
}
.kpap-expired__inner {
    max-width: 420px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.kpap-expired__logo img { max-width: 220px; height: auto; }
.kpap-expired__inner h1 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin: 0;
    color: var(--color-text);
    line-height: 1.3;
}
.kpap-expired__inner p {
    margin: 0;
    color: var(--color-grey-mid);
    font-family: var(--font-body);
    font-size: 15px;
}

/* ── App shell ─────────────────────────────────────────────────────────── */
/* 2026-08-03 (Dick): "fit it in the site template, not full screen" — now
   sits between shared-header.php/shared-footer.php (templates/account-portal.php),
   so constrained to the site's normal content width, same pattern every other
   page section uses (max-width: var(--max-width); margin: 0 auto;). */
.kpap-app {
    display: grid;
    grid-template-columns: 236px 1fr;
    /* ⭐ lay1/lay2 (Willem 2026-08-22): "Als ik van overzicht naar abonnement/facturen
       klik springt de menubalk naar rechts ... blokken moeten altijd dezelfde breedte
       hebben." De oorzaak: dit is een flex-kind van .kph-page met `margin:0 auto` op de
       kruis-as; auto-marges op die as ZETTEN align-items:stretch buiten werking, dus de
       grid kromp naar zijn INHOUD (het actieve paneel) en verschilde per tab — gecentreerd,
       dus de zijbalk verschoof mee. `width:100%` dwingt elke tab naar dezelfde volle
       max-width; de zijbalk staat daardoor op ELKE tab op exact dezelfde plek en breedte. */
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 15px;
    --kpap-ok-bg: #e6f5ec;   --kpap-ok-ink: #04703c;
    --kpap-due-bg: #fdeceb;  --kpap-due-ink: #a2231d;
    /* W4 (Willem 2026-08-07): "Creditnota is nu 'hard' geel. Dat mag veel zachter
       zoals het rood en groen dat ook zijn." Dus een derde paar in DEZELFDE familie
       — zacht vlak, donkere inkt — en niet langer de volle merk-accentkleur. */
    --kpap-credit-bg: #fdf3d8; --kpap-credit-ink: #6d5205;
}

.kpap-nav-backdrop { display: none; }

/* Zijbalk (desktop) */
.kpap-side {
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    padding: 26px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.kpap-brand {
    font-family: var(--font-heading);
    font-size: 27px;
    line-height: 1;
    color: var(--color-primary);
    padding: 0 24px;
}
.kpap-brand small {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--color-grey-mid);
    margin-top: 7px;
}
.kpap-nav { display: flex; flex-direction: column; }
.kpap-nav button {
    display: flex; align-items: center; gap: 12px;
    border: 0; background: none;
    font: inherit; font-size: 15px; color: var(--color-text);
    text-align: left; cursor: pointer;
    padding: 12px 24px; border-left: 3px solid transparent; line-height: 1.3;
}
.kpap-nav button:hover { background: var(--color-bg); }
.kpap-nav button svg {
    width: 19px; height: 19px; flex: none;
    stroke: var(--color-grey-mid); stroke-width: 1.7; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
/* W1 (Willem 2026-08-07): "Als highligt waar je bent, niet oranje maken maar
   zwart en bold. Ook het verticale streepje ervoor." */
.kpap-nav button[aria-current="page"] {
    background: var(--color-bg); color: var(--color-black);
    font-weight: 700; border-left-color: var(--color-black);
}
.kpap-nav button[aria-current="page"] svg { stroke: var(--color-black); }

/* Bovenbalk (mobiel) */
.kpap-topbar {
    display: none;
    align-items: center; gap: 13px;
    background: var(--color-primary); color: #fff;
    padding: 14px 17px;
}
.kpap-topbar .kpap-burger { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.kpap-topbar svg {
    width: 22px; height: 22px; stroke: #fff; stroke-width: 1.9; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.kpap-topbar h2 {
    font-family: var(--font-body); font-size: 17px; font-weight: 700;
    margin: 0; flex: 1; line-height: 1.3; color: #fff;
}

/* Hoofdgebied */
.kpap-main { padding: 30px 34px 44px; min-width: 0; }
.kpap-page-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; margin-bottom: 24px;
}
/* ⭐ lay4 (Willem 2026-08-22): "Het lettertype van de koppen ... lijken minder goed
   leesbaar, de spatiëring lijkt anders." Oorzaak: --font-heading (PeachyKeenJF) heeft
   ALLEEN een 400-gewicht (@font-face font-weight:400). font-weight:700 dwong de browser
   tot een SYNTHETISCHE vetdruk (faux-bold) — vervormde letters + andere spatiëring. De
   rest van de site zet die koppen op 400 (hun ontworpen gewicht). 700 → 400 = gelijk. */
.kpap-page-head h3 { font-family: var(--font-heading); font-size: 23px; font-weight: 400; margin: 0 0 2px; line-height: 1.2; }
.kpap-page-head p { margin: 0; color: var(--color-grey-mid); font-size: 14.5px; }
.kpap-whoami { display: flex; align-items: center; gap: 14px; flex: none; }
.kpap-whoami div { text-align: right; font-size: 13.5px; line-height: 1.45; }
.kpap-whoami b { display: block; font-weight: 700; }
.kpap-whoami span { color: var(--color-grey-mid); }
/* W3 (Willem 2026-08-07): "Alle icoontjes zwart/wit maken … en ook het uitloggen
   icoon. (overal waar dit voorkomt)" */
/* ⭐ ico1 (Willem 2026-08-24, "ook uitloggen"): het uitlog-icoon was een zwarte cirkel
   met witte pijl; nu een witte cirkel met zwarte rand en zwarte pijl — zelfde inversie
   als de koptegels en het kind-icoontje. box-sizing houdt de 42px-cirkel op maat. */
.kpap-logout {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-white); border: 2px solid var(--color-black); box-sizing: border-box; cursor: pointer;
    display: grid; place-items: center; flex: none;
}
.kpap-logout svg {
    width: 19px; height: 19px; stroke: var(--color-black); stroke-width: 1.9; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Zichtbare tooltip bij het uitlog-icoon (Willem 2026-08-05, item L2).
   Alleen [data-kpap-tip] krijgt hem, dus geen enkel ander element in het portaal
   verandert. Absoluut gepositioneerd en pointer-events:none => het icoon zelf
   verschuift niet en blijft even klikbaar als daarvoor. Ook op :focus-visible,
   zodat toetsenbordgebruikers hem ook zien. */
[data-kpap-tip] { position: relative; }
[data-kpap-tip]::after {
    content: attr(data-kpap-tip);
    position: absolute; top: calc(100% + 7px); right: 0;
    background: var(--color-black); color: #fff;
    font-family: var(--font-body); font-size: 12.5px; line-height: 1; font-weight: 600;
    white-space: nowrap; padding: 6px 9px; border-radius: 5px;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
    pointer-events: none; z-index: 20;
}
[data-kpap-tip]:hover::after,
[data-kpap-tip]:focus-visible::after { opacity: 1; visibility: visible; }

/* Kaartraster */
.kpap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* ⭐ lay7 (Willem 2026-08-24, "Re: Feedback"): "ik vind nu de blokken te breed
   wanneer er maar 1 kolom is." Volgt op lay1/lay2 (`df56fd1e`, width:100% op
   .kpap-app): dat lijnde de tabs uit, maar liet een 1-koloms tab (Abonnement,
   Facturen) de volle contentbreedte (~1022px) beslaan. Een max-width kapt alleen
   de ÉÉN-koloms staat af tot een comfortabele leesbreedte; linksuitgelijnd (geen
   auto-marges), dus de linkerrand blijft op dezelfde plek als de paginakop en de
   twee-koloms tabs. ⛔ Raakt de twee-koloms `.kpap-grid` NIET — die blijft exact
   zoals nu. Mobiel (≤767px, 1 kolom by design) blijft vol breed: zie de reset in
   het mobiele blok onderaan. */
.kpap-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
/* Rij 15 (Willem 2026-08-07): "Graag tekst binnen groen vlak houden en onder
   Financiële gegevens positioneren." Twee kaarten die als ÉÉN gridcel meelopen,
   zodat de tweede altijd onder de eerste staat in plaats van door te stromen
   naar de andere kolom. ⛔ Bewust geen `grid-column: 2` — dat breekt op mobiel,
   waar het grid één kolom telt. De tussenruimte volgt de grid-gap, ook in het
   mobiele blok hieronder. */
.kpap-col { display: flex; flex-direction: column; gap: 20px; align-self: start; }

/* Kaart */
.kpap-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 22px 24px 20px;
    display: flex; flex-direction: column; gap: 16px;
}
/* W6/W31 (Willem 2026-08-07): "Achtergrondkleur blok Domiciliëring zacht groen
   maken (overal waar dit voorkomt)". Deze klasse draagt alleen de twee
   domiciliëringskaarten (Overzicht + Facturen) — gecontroleerd, geen andere
   gebruikers — dus de wijziging raakt precies wat hij noemt. Zelfde zachte groen
   als de 'betaald'-pill, geen vierde groen erbij. */
.kpap-card--highlight { background: var(--kpap-ok-bg); border-color: #b9dcc8; }
.kpap-card-head { display: flex; align-items: center; gap: 13px; }
/* lay4 — zelfde faux-bold-oorzaak als de paginakop: expliciet --font-heading @ 400,
   gelijk aan de rest van de site. font-family stond hier niet, dus de kop viel terug op
   een globale h4-stack (…"Comic Sans MS", cursive) als PeachyKeenJF ooit niet laadt. */
.kpap-card-head h4 { font-family: var(--font-heading); font-size: 17.5px; font-weight: 400; margin: 0; flex: 1; line-height: 1.25; }
/* W3/W5/W8/W11/W28/W34 (Willem 2026-08-07): de koptegels zijn zwart/wit. Dat geldt
   ook voor --warm, de domiciliëringstegel, die hij apart noemt ("icoontje voor
   koptekst zwart maken"). ⛔ Geen tweede tegelkleur ernaast zetten: hij zegt
   "overal waar dit voorkomt", dus de basis verandert en de variant volgt. */
/* ⭐ ico1 (Willem 2026-08-24): "net als bij de icoontjes van de kinderen bij Abonnement,
   de icoontjes overal andersom zwart/wit maken. Dus zwarte rand en zwarte afbeelding op
   witte achtergrond. Op alle plekken waar dit voorkomt (ook uitloggen)." De koptegels
   waren een zwart vlak met wit icoon; nu een witte tegel met zwarte rand en zwart icoon,
   exact het patroon van .kpap-avatar (het kind-icoontje). Eén plek voor ALLE koptegels —
   de --warm-variant volgt de basis, zodat het niet per scherm kan afwijken. box-sizing
   houdt de 2px-rand binnen de 41px, zodat de kaartkoppen niet verspringen. */
.kpap-tile {
    width: 41px; height: 41px; border-radius: 11px;
    background: var(--color-white); border: 2px solid var(--color-black); box-sizing: border-box;
    display: grid; place-items: center; flex: none;
}
.kpap-tile--warm { background: var(--color-white); }
.kpap-tile--sm { width: 34px; height: 34px; border-radius: 9px; }
.kpap-tile svg {
    width: 21px; height: 21px; stroke: var(--color-black); stroke-width: 1.75; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
/* W9/W13 (Willem 2026-08-07): "Icoontje wijzigen -> Oranje maken en oranje
   omranden (zoals 'bekijk' button op overzicht)". De Bekijk-knop is
   .kpap-btn--ghost: transparant vlak, primaire kleur, primaire rand — diezelfde
   drie waarden staan hier, zodat de twee besturingen niet uit elkaar lopen. */
.kpap-icon-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-primary);
    background: var(--color-white); cursor: pointer; display: grid; place-items: center; flex: none;
}
.kpap-icon-btn:hover { border-color: var(--color-primary); background: #fff7f2; }
.kpap-icon-btn svg {
    width: 16px; height: 16px; stroke: var(--color-primary); stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.kpap-icon-btn:hover svg { stroke: var(--color-primary); }

/* ⭐ lay5 (Willem 2026-08-22): klein oranje label "Wijzigen" onder de oranje wijzig-pen.
   De wrapper stapelt pen + label verticaal en blijft flex:none in de kaartkop, zodat de
   uitlijning van de kop niet verandert. Het label draagt de bestaande oranje merk-token. */
.kpap-edit-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.kpap-edit-toggle__label { font-size: 11px; font-weight: 700; line-height: 1; color: var(--color-primary); }

/* Gegevensrijen */
.kpap-rows { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.kpap-rows > div { display: grid; grid-template-columns: minmax(120px, .85fr) 1.15fr; gap: 14px; font-size: 14.5px; align-items: baseline; }
/* ⭐ M3 (Willem 2026-08-12): grid-cellen mogen krimpen — anders duwt een breed
   control (date-input, select) de kolom en dus de pagina breder dan het scherm. */
.kpap-rows > div > * { min-width: 0; }
.kpap-rows dt { color: var(--color-grey-mid); margin: 0; }
/* ⭐ t1 (Willem 2026-08-18): verplicht-markering bij een verplicht veld (Telefoon).
   Zelfde vorm als het bestelformulier (.kp-consent-req): accent-kleurige asterisk. */
.kpap-req { color: var(--color-accent); font-weight: 700; }
.kpap-rows dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
/* ⭐ [WILLEM SAID IT, 2026-08-14]: het adres links uitlijnen, "op dezelfde plek
   beginnen als alle andere gegevens" — dat is de standaard <dd>-uitlijning, dus
   er is GEEN aparte adresregel meer. De vorige AV10/M5-rechtsuitlijning (klasse
   kpap-row--align-right) is verwijderd; die klasse wordt nergens meer gezet. */

/* Lijstjes op Overzicht */
.kpap-mini { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.kpap-mini > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-grey-warm); }
.kpap-mini > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kpap-mini b { font-weight: 500; }
.kpap-mini span { color: var(--color-grey-mid); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* Statuspil */
.kpap-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 11px; border-radius: var(--radius-btn); white-space: nowrap; }
.kpap-pill--ok { background: var(--kpap-ok-bg); color: var(--kpap-ok-ink); }
.kpap-pill--due { background: var(--kpap-due-bg); color: var(--kpap-due-ink); }
/* Creditnota (Willem, mail portal-testronde 2026-08-05, item F8: "Die zou een
   gele kleur kunnen krijgen"). Geen nieuw kleurensysteem: --color-accent is de
   bestaande merkgele token die deze panelen al dragen (.kpap-tile--warm,
   .kpap-card--highlight), met de gewone tekstkleur erop voor contrast. */
.kpap-pill--credit { background: var(--kpap-credit-bg); color: var(--kpap-credit-ink); }
.kpap-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kpap-chat-status { margin-left: auto; }

/* Betaald + betaaldatum (Willem: "Achter groen veld Betaald in kleiner font
   'betaling ontvangen op ...'"). Desktop: on ONE line, after the pill. Mobile
   is handled in the max-width:767px block — "in klein eronder en ook wat
   dichter tegen groen veld Betaald zodat het daar echt bij hoort". */
.kpap-paid { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.kpap-paid__note { font-size: 12px; color: var(--color-grey-mid); }

/* De niet-klikbare domiciliëringspil staat tussen de knoppen, dus krijgt hun
   verticale ritme — een <span>, dus per constructie niet aanklikbaar. */
.kpap-pill--act { align-self: center; padding: 7px 15px; }

/* Knoppen */
.kpap-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.kpap-acts--right { justify-content: flex-end; }
.kpap-btn {
    font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px 22px;
    border-radius: var(--radius-btn); cursor: pointer; border: 2px solid transparent;
    line-height: 1.3; text-align: center; transition: background .15s, color .15s, border-color .15s;
    text-decoration: none; display: inline-block;
}
.kpap-btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.kpap-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.kpap-btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.kpap-btn--ghost:hover { background: #fff2ea; }
.kpap-btn--quiet { background: transparent; color: var(--color-grey-mid); border-color: var(--color-border); }
.kpap-btn--quiet:hover { color: var(--color-text); border-color: var(--color-grey-mid); }

/* Kinderkiezer op Abonnement */
.kpap-picker { display: flex; flex-direction: column; gap: 0; }
.kpap-picker > button {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: 0; border-top: 1px solid var(--color-grey-warm); background: none; font: inherit;
    padding: 14px 2px; cursor: pointer;
}
.kpap-picker > button:first-child { border-top: 0; padding-top: 4px; }
.kpap-picker > button:hover { background: var(--color-bg); }
.kpap-picker b { display: block; font-size: 15.5px; font-weight: 700; }
.kpap-picker em { display: block; font-style: normal; font-size: 13.5px; color: var(--color-grey-mid); margin-top: 2px; }
.kpap-picker .kpap-chev { margin-left: auto; flex: none; }
.kpap-picker .kpap-chev svg {
    width: 17px; height: 17px; stroke: var(--color-primary); stroke-width: 2.2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.kpap-picker > button[aria-pressed="true"] { background: #fff5ef; }
/* W12 (Willem 2026-08-07): "Mijn abonnement icoontjes met letters, zwart/wit maken"
   ⭐ W4 (rij 4), zelfde dag, verfijnd: "Rand en letter zwart, van binnen wit."
   ⇒ omgekeerd van de eerste ronde: geen zwarte vulling met witte letter meer,
   maar een witte cirkel met een zwarte rand en een zwarte letter.
   ⛔ De maat blijft 38px: hij vroeg om de kleuren, niet om een ander formaat. De
   rand valt binnen dezelfde 38px (border-box hieronder), zodat de kiezerregels
   niet verspringen. */
.kpap-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--color-white); border: 2px solid var(--color-black); box-sizing: border-box;
    display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none;
    color: var(--color-black);
}
.kpap-hint { font-size: 13.5px; color: var(--color-grey-mid); margin: 0; }
.kpap-hint--dark { font-size: 14.5px; color: var(--color-text); max-width: 60ch; }

/* Willem, aanpassingen.docx: "Blok Domiciliëring; ... Op desktop de tekst op
   1 regel zetten zodat het blok minder hoog wordt." Desktop only, on purpose
   — mobile keeps its normal wrap (unaffected, verified). */
@media (min-width: 768px) {
    .kpap-hint--domicilie { white-space: nowrap; max-width: none; }
}

.kpap-child-detail { display: none; }
.kpap-child-detail.is-active { display: flex; }

/* Chatpaneel
   ⛔ GEEN min-height. De 270px hier hoorde bij het demo-gesprek (drie bubbels +
   invoerregel) dat op 2026-08-06 uit panel-klantenservice.php verdween; met de
   ene overgebleven regel liet hij ±180px leeg staan. Een te ruim bemeten blok is
   een defect (Viewport Rule: dichtheid uit strakke spacing, nooit uit kleinere
   letters) — de tegel meet zich nu naar zijn eigen inhoud. Wordt de chat ooit
   bedraad, dan geeft de inhoud zelf de hoogte, niet een getal hier. */
.kpap-chat {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden;
    display: flex; flex-direction: column;
}
.kpap-chat-top { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid var(--color-grey-warm); }
.kpap-chat-top b { font-size: 16px; }
.kpap-chat-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--color-bg); }
.kpap-bubble { max-width: 74%; padding: 11px 15px; border-radius: 15px; font-size: 14.5px; background: var(--color-white); border: 1px solid var(--color-border); }
.kpap-bubble--me { align-self: flex-end; background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.kpap-chat-foot { padding: 13px 16px; border-top: 1px solid var(--color-grey-warm); display: flex; gap: 10px; align-items: center; }
.kpap-fake-input {
    flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-btn);
    padding: 9px 16px; color: var(--color-grey-mid); font-size: 14px; background: var(--color-white);
}
.kpap-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpap-tile-btn {
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: 20px 18px; text-align: left; font: inherit; cursor: pointer;
    display: flex; flex-direction: column; gap: 9px; text-decoration: none;
}
.kpap-tile-btn:hover { border-color: var(--color-primary); }
.kpap-tile-btn b { font-size: 15.5px; }
.kpap-tile-btn span { font-size: 13.5px; color: var(--color-grey-mid); line-height: 1.45; }

/* Jaarkiezer facturen */
.kpap-yearsel {
    display: inline-flex; align-items: center; gap: 11px; background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: 13px 19px; font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 18px;
}
.kpap-yearsel svg { width: 16px; height: 16px; stroke: var(--color-grey-mid); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.kpap-panel { display: none; }
.kpap-panel.is-active { display: block; }

/* ── Mobile (≤767px) ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .kpap-app { grid-template-columns: 1fr; min-height: 100vh; }

    .kpap-side {
        position: fixed; inset: 0 auto 0 0; z-index: 100;
        width: 82vw; max-width: 300px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-card);
    }
    .kpap-side.is-open { transform: translateX(0); }

    .kpap-nav-backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 99;
        background: rgba(0, 0, 0, .4);
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .kpap-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    .kpap-topbar { display: flex; }
    .kpap-page-head { display: none; }
    .kpap-main { padding: 18px 15px 34px; }
    .kpap-grid { grid-template-columns: 1fr; gap: 15px; }
    /* lay7 — op mobiel blijft de ééń-koloms staat vol breed (de desktop-max-width
       van 680px mag hier niet knijpen); byte-identiek aan vóór lay7. */
    .kpap-grid--one { max-width: none; }
    .kpap-col  { gap: 15px; } /* rij 15 — dezelfde tussenruimte als het grid */
    .kpap-card { padding: 18px 17px 17px; border-radius: 14px; }
    .kpap-rows > div { grid-template-columns: minmax(104px, 1fr) 1.1fr; gap: 10px; }
    /* Zie components.php: rij krijgt de volle kaartbreedte zodat een lang
       pakketlabel + leeftijd op mobiel op 1 regel past (Willem). */
    .kpap-rows > div.kpap-row--wide { grid-template-columns: 1fr; gap: 2px; }

    /* Willem: "Op mobiel in klein eronder en ook wat dichter tegen groen veld
       Betaald zodat het daar echt bij hoort" — onder de pil, kleiner, en een
       kleinere tussenruimte dan de 8px van desktop zodat het bij de pil hoort
       en niet bij de volgende regel. */
    .kpap-paid { flex-direction: column; align-items: flex-start; gap: 3px; }
    .kpap-paid__note { font-size: 11.5px; }

    .kpap-acts { flex-direction: column; align-items: stretch; }
    /* De pil vult de knopbreedte niet: hij is geen knop en moet er ook geen
       lijken. */
    .kpap-pill--act { align-self: flex-start; }
    .kpap-tiles { grid-template-columns: 1fr; }
}

/* --- Inline edit-in-place (Dick 2026-08-04) -----------------------------
   The read view and the edit view are the SAME rows; only which child of the
   <dd> is shown changes. Reuses the existing tokens (--color-border,
   --radius-btn, --color-primary) and the existing .kpap-btn / .kpap-icon-btn
   controls — no new one-off control. Mobile-first: the input simply fills the
   value column that already exists, so the edit state adds no height beyond the
   save/cancel row and introduces no scroll the read state did not have. */
.kpap-ed { display: none; }
.kpap-card.is-editing .kpap-ed { display: inline-flex; }
/* ⭐ A value disappears in edit mode ONLY where a control takes its place
   (.kpap-row--input, set by kp_account_portal_editable_rows()). Read-only rows —
   Klantnummer, Naam, Laatste/Volgende levering — and handoff rows keep their
   value on screen: they are not being edited, and a customer who opens the edit
   state must never watch his own klantnummer and naam vanish. It read as data
   loss even though nothing is written, on a portal that had just spent two
   rounds disproving exactly that report. Scoped here at the pattern level, never
   per panel. */
.kpap-card.is-editing .kpap-row--input .kpap-ro { display: none; }
.kpap-card.is-editing .kpap-edit-acts { display: flex; }

/* ⭐ a1 (Willem 2026-08-16): een rij die ALLEEN in leesmodus (ro_only) of ALLEEN
   in wijzigmodus (ed_only) meedoet. Zo blijft "Naam" één rij met de volledige
   naam in leesmodus (byte-identiek), terwijl wijzigmodus drie eigen koppen toont:
   Voornaam, Tussenvoegsel, Achternaam — elk met zijn invoerveld in de
   waardekolom, op dezelfde hoogte als Adres/Telefoon. */
.kpap-card.is-editing .kpap-row--ro-only { display: none; }
.kpap-card:not(.is-editing) .kpap-row--ed-only { display: none; }

/* A7, Willem 2026-08-06, verbatim: "Bij wijzigen (wijzigen layout); knoppen
   Moeilijkheid aanpassen, pakketkeuze, frequentie, stoppen etc NIET tonen."
   In wijzigmodus zijn Opslaan/Annuleren de enige knoppen die iets doen; de rij
   eronder opent alleen maar dezelfde modus opnieuw of navigeert weg.
   ⛔ Bewust alleen het abonnementpaneel en alleen een DIRECT kind van de kaart:
   de knoppenrij van een dialoog (.kpap-dialog .kpap-acts) en de vaste knop op
   Financiële gegevens staan hier buiten, en die heeft hij niet genoemd. */
.kpap-panel[data-panel="abonnement"] .kpap-card.is-editing > .kpap-acts { display: none; }

/* A2, Willem 2026-08-06: "in verwerking" achter de laatste leverdatum, in
   lichtgrijs. Zelfde grijs en zelfde maatverhouding als .kpap-paid__note op
   Facturen — één noot-uiterlijk in het hele portaal, geen tweede formulering. */
/* W18 (Willem 2026-08-07): "iets minder dicht erachter zetten, beetje witruimte
   laten". De losse spatie in de markup valt weg tegen de kleinere letter. */
.kpap-note { font-size: 12px; color: var(--color-grey-mid); font-weight: 400; margin-left: 6px; }
/* ⭐ FB5 (Willem, "Feedback" 2026-08-10): "Opgezegd per [maand]" in ROOD i.p.v.
   lichtgrijs — hij wil zien hoe dat staat. Alleen deze melding (eigen modifier),
   niet de gedeelde .kpap-note. Eén regel, triviaal terug te draaien: verwijder
   deze regel + de modifier-klasse in kp_account_portal_opgezegd_note(). Rood =
   #c62828, dezelfde tint die shared.css elders al gebruikt. */
.kpap-note--opgezegd { color: #c62828; }

/* ⭐ AV2 (Willem WA6, 2026-08-11): het aantal openstaande facturen achter het
   Facturen-menu-item, in ROOD (#c62828, dezelfde tint als "Opgezegd per"). */
.kpap-nav-count { color: #c62828; font-weight: 700; }

/* ⭐ AV11/M4: het e-mailadres als LINK die de wijzig-pop-up opent — maar (M4,
   Willem 2026-08-12) ALLEEN in wijzigmodus. In leesmodus is het platte tekst
   (de .kpap-ro span); de link draagt daarom .kpap-ed en verschijnt pas als de
   kaart in wijzigmodus staat. Een <button> zonder knop-chrome, opgemaakt als
   inline link. */
.kpap-value-link {
    /* ⛔ GEEN `display` hier: de link draagt altijd .kpap-ed en moet dus in
       LEESmodus verborgen blijven (M4). `.kpap-ed { display:none }` staat eerder in
       dit bestand; een `display:inline` hier zou dat overrulen (gelijke
       specificiteit, latere regel wint) en de link tóch in leesmodus tonen — precies
       de onderstreepte, klikbare e-mail die Willem weg wilde. */
    margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: var(--color-primary-dark); text-align: left;
    text-decoration: underline; cursor: pointer;
}
.kpap-value-link:hover,
.kpap-value-link:focus-visible { text-decoration: none; }
/* In WIJZIGmodus verschijnt de e-mail-link inline (i.p.v. de default inline-flex van
   .kpap-ed), zodat de onderstreepte tekst als een natuurlijke link leest. */
.kpap-card.is-editing .kpap-ed.kpap-value-link { display: inline; }
/* ⭐ [WILLEM SAID IT, 2026-08-14]: ook in wijzigmodus lijnt het opgeslagen adres
   LINKS uit, op dezelfde plek als de andere gegevens. Het blijft een `beside`-rij
   (de bewaarde waarde staat boven de adresvinder-cluster, die op zijn eigen regel
   valt via flex-basis:100%), maar de waarde schuift niet meer naar rechts. Dit
   verving de M5-regel `.kpap-row--align-right.kpap-row--beside dd .kpap-ro`
   (margin-left:auto; text-align:right), die is verwijderd. */

/* A12, Willem 2026-08-06: "Opgezegd per [maand]" boven de rijen van een kind
   waarvan de opzegging nog niet is ingegaan. */


/* A control that stands BESIDE its value instead of replacing it
   (.kpap-row--beside, set by the same function). Volgende levering is
   FM-calculated and read-only, but Willem wants the Pauzeren dropdown right
   behind that month — so the value keeps its place and the control follows it on
   the same line, wrapping under it when the column is too narrow (mobile). */
/* A8, Willem 2026-08-06, verbatim: "Bij wijzigen; Button Pauzeren te dicht op
   tekst, mag wat meer spaties tussen." De enige plek waar de Pauzeren-besturing
   tegen tekst aan staat is precies deze rij: "juni 2026" met de dropdown
   ernaast. 8px -> 18px; de rij wrapt nog steeds op smalle kolommen. */
.kpap-card.is-editing .kpap-row--beside dd {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
}
.kpap-row--beside .kpap-input { width: auto; max-width: 100%; }

/* ⭐ M9/M10 (Willem "Re: Mobiel" 2026-08-12): Volgende levering — de MAAND links in
   de waardekolom (zelfde hoogte als de rest, niet hard rechts → M9), de
   Pauzeren-dropdown op een EIGEN regel ERONDER-RECHTS met passende breedte (niet
   achter/over de maand → M10). Doordat de dropdown niet meer de volle kolombreedte
   claimt blijft het kolom-label "Volgende levering" op één regel (M9). */
.kpap-card.is-editing .kpap-row--ctrl-below dd {
    flex-direction: column; align-items: flex-start; gap: 8px;
}
.kpap-card.is-editing .kpap-row--ctrl-below dd select.kpap-input {
    align-self: flex-end; width: auto; max-width: 100%;
}

.kpap-input {
    width: 100%; max-width: 100%;
    /* ⭐ M3/M8 (Willem "Re: Mobiel" 2026-08-12): een control mag NOOIT breder worden
       dan zijn kolom. Grid-/flexkinderen hebben van zichzelf min-width:auto = hun
       intrinsieke inhoudsbreedte; een <input type="date"> draagt een native
       min-content (dd-mm-jjjj + kalenderknop) die de kolom breder duwt dan het
       scherm → horizontaal scrollen. min-width:0 laat het veld krimpen tot de
       kolom, box-sizing houdt de padding binnen de 100%. */
    min-width: 0; box-sizing: border-box;
    border: 1px solid var(--color-border); border-radius: var(--radius-btn);
    padding: 7px 11px; font: inherit; font-size: 14.5px; background: var(--color-white);
    color: inherit;
}
.kpap-input:focus { outline: none; border-color: var(--color-primary); }
/* ⭐ M8 — de Geboortedatum (type=date) matcht de andere velden: zelfde hoogte
   (geen extra native padding), niet breder, en de kalenderknop schuift niet uit
   het vak. appearance:none haalt de intrinsieke breedte weg; height gelijk aan
   de tekstvelden (font 14.5 + 2×7px padding + 2×1px rand ≈ 33px). */
input.kpap-input[type="date"] {
    -webkit-appearance: none; appearance: none;
    height: 33px; line-height: 1.2;
}
input.kpap-input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.kpap-input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; flex: none; }

/* One row, several inputs (Adres = Address + Zipcode + Town). They stack inside
   the value column the read view already uses, so the row keeps Willem's
   combined shape instead of being split into three rows. */
.kpap-ed-group { flex-direction: column; gap: 6px; width: 100%; }

/* ⭐ W19, Willem 2026-08-07: "Er moet ook een kop Achternaam voor het invulveld
   Achternaam staan." Een kop boven zijn eigen invoerveld, in dezelfde
   labelmaat en -kleur als de <dt> ernaast — geen tweede tekststijl erbij. De
   negatieve marge trekt hem tegen zijn eigen veld aan, zodat de 6px van de
   groep tussen de VELDEN blijft staan en niet tussen kop en veld: dichtheid uit
   afstand, nooit uit kleinere letters. */
.kpap-ed-label {
    font-size: 13px; font-weight: 600; color: var(--color-grey-mid);
    margin-bottom: -3px;
}

.kpap-edit-acts { gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.kpap-ed-msg { font-size: 13.5px; color: var(--color-grey-mid); }
.kpap-ed-msg.is-error { color: var(--color-primary); }
/* Status line for an ACTION button (Pauzeren/Hervatten), which posts straight
   away instead of entering edit mode. It cannot reuse .kpap-ed-msg: that one
   lives inside .kpap-ed and is display:none unless the card is being edited, so
   a failed pause would have reported nothing at all. Same two colours, so the
   two read as one thing. */
.kpap-act-msg { font-size: 13.5px; color: var(--color-grey-mid); align-self: center; }
.kpap-act-msg.is-error { color: var(--color-primary); }

/* ⭐ A11 — de dubbele-boekenwaarschuwing (Willem 2026-08-06). Hij WAARSCHUWT en
   blokkeert niets, dus hij leest als de "niet betaald"-pil (dezelfde twee
   tokens) en niet als een foutmelding die de opslag tegenhoudt. Onder de keuze,
   volle kolombreedte, compacte regel — de dichtheid komt van de tekstgrootte
   noch van extra kaders.
   ⛔ Bewust GEEN `.kpap-ed`: die klasse wordt in wijzigmodus op display gezet en
   zou het `hidden`-attribuut overrulen, waarna de waarschuwing er altijd stond.
   De regel hieronder doet wat `.kpap-ed` zou doen — verdwijnen zodra de kaart
   uit wijzigmodus gaat — zonder dat conflict. In de pop-up (geen kaart) geldt
   alleen het `hidden`-attribuut. */
.kpap-warn {
    display: block; width: 100%; margin: 6px 0 0; padding: 7px 9px;
    font-size: 13.5px; font-weight: 500; line-height: 1.4;
    background: var(--kpap-due-bg); color: var(--kpap-due-ink);
    border-radius: var(--radius-btn);
}
.kpap-warn[hidden] { display: none; }
.kpap-card:not(.is-editing) .kpap-warn { display: none; }

/* ⭐ oo2ui — het leesbare bevestigingsblok in de Kind-toevoegen-pop-up (Willem
   2026-08-25). Zelfde vorm als .kpap-warn maar met de OK-tokens: het is een
   geslaagd-melding, geen waarschuwing. Volle kolombreedte, ruimte om te lezen. */
.kpap-notice {
    display: block; width: 100%; margin: 6px 0 0; padding: 9px 11px;
    font-size: 13.5px; font-weight: 500; line-height: 1.45;
    background: var(--kpap-ok-bg); color: var(--kpap-ok-ink);
    border-radius: var(--radius-btn);
}
.kpap-notice[hidden] { display: none; }

/* The handoff is a link into the flow that owns the field (e-mail: gated double
   opt-in; IBAN: the mandate). Never an inline input — see components.php.
   Its value stays visible like any non-input row (the rule above); it only needs
   to STACK, so a long address and the button each get the full column. */
.kpap-ed--handoff { white-space: normal; }
.kpap-card.is-editing .kpap-row--handoff dd {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}

@media (max-width: 767px) {
    .kpap-edit-acts { margin-top: 12px; }
    .kpap-edit-acts .kpap-btn { flex: 1 1 auto; }
}

/* --- Adresvinder in wijzigmodus (Willem 2026-08-05, item K3) --------------
   Het cluster staat BESIDE de waarde (.kpap-row--beside): het opgeslagen adres
   blijft leesbaar boven de zoeker, want straat + huisnummer kunnen niet
   voorgevuld worden (het parse-verbod) en lege velden zouden als dataverlies
   lezen. flex-basis 100% duwt het cluster onder die waarde in plaats van
   ernaast, zodat de zoeker de volle kolom krijgt.
   De BE-affordances (zoekregel, "Gevonden adres", handmatig-schakelaar) worden
   gestyled door de plugin z'n eigen assets/css/autofill.css, die op elke pagina
   al meekomt — hier staat dus alleen wat het portaal zelf toevoegt. */
.kpap-adres { flex-direction: column; gap: 8px; flex: 1 1 100%; width: 100%; }
/* ⭐ a1 (Willem 2026-08-16): het adres-cluster valt op zijn EIGEN volle rij ONDER
   de uitgelijnde "Adres" | waarde — het is nu een gridkind van de rij (na de
   </dd>) dat beide kolommen overspant, i.p.v. in de smalle waardekolom. Zo begint
   het adres niet meer op een losse regel en houdt de zoeker de volle kaartbreedte,
   op elk scherm. Het is een .kpap-ed, dus in leesmodus verborgen; in wijzigmodus
   krijgt het display van de .kpap-ed-regel (geblokt als gridkind → flex-kolom). */
.kpap-row--adres .kpap-adres { grid-column: 1 / -1; margin-top: 8px; }
.kpap-adres-manual { display: flex; flex-direction: column; gap: 6px; }
.kpap-adres-manual[hidden] { display: none; }
/* Wint van .kpap-row--beside .kpap-input { width: auto } — daar staat een enkel
   dropdownnetje naast een maandnaam, hier een kolom invoervelden. */
.kpap-row--beside .kpap-adres .kpap-input { width: 100%; }
/* De zoekregel is de primaire ingang: hij mag de volle breedte, net als op het
   anonieme formulier. */
.kpap-adres .kpf-leveradres-row { width: 100%; }

/* Op mobiel is de waardekolom ~250px; een zoekbalk plus vijf invoervelden staan
   daar geknepen in. In WIJZIGMODUS krijgt alleen deze rij de volle kaartbreedte,
   met het label erboven — dezelfde ingreep die .kpap-row--wide voor het lange
   pakketlabel doet, maar hier bewust NIET permanent: de LEESweergave van het
   adres past prima in twee kolommen en verandert dus niet. Dichtheid uit strakke
   spacing, nooit uit kleinere letters. */
/* ⭐ a1 (Willem 2026-08-16): de vroegere mobiele regel die de HELE adresrij op
   één kolom zette (label boven de waarde) is weg — dat was precies "het adres
   begint op een nieuwe regel". Label + waarde blijven nu 2-koloms uitgelijnd met
   de andere velden; het zoek-/handmatig-cluster valt eronder op zijn eigen volle
   rij (kpap-row--adres, grid-column:1/-1), dus het is niet meer geknepen in de
   waardekolom. */

/* --- Pop-up binnen het portaal (Willem 2026-08-05, item K4) ---------------
   Native <dialog>: de browser levert backdrop, focusval en Escape, dus hier
   staat alleen vormgeving. Hergebruikt de bestaande tokens en de bestaande
   .kpap-btn / .kpap-input / .kpap-icon-btn — geen tweede besturingsset.
   Mobile-first: vult de breedte tot 420px, en de body scrollt zelf als een
   toekomstige pop-up langer wordt dan het scherm. */
.kpap-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* ⭐ c1 (Willem 2026-08-16): "Kind toevoegen, in de pop up kun je niet
       scrollen. Dat is gek, je kunt dan niet bevestigen." De dialog was
       overflow:hidden met een vaste max-height, maar de body scrolde NIET
       (ondanks de comment hierboven, die de bedoeling beschreef maar nooit
       geïmplementeerd was). Op een korte viewport (mobiel + toetsenbord) viel de
       actierij met "Kind toevoegen" onder de vouw en was onbereikbaar.
       ⇒ De dialog wordt een flex-kolom: kop en actierij staan vast, de body
       scrollt ertussen. Raakt elke .kpap-dialog (e-mail/dupe/opzeggen/kind), wat
       de bedoelde robuustheid is; korte pop-ups blijven inhoud-gemeten (flex-grow
       verdeelt alleen VRIJE ruimte, en die is er niet zolang de inhoud past).
       ⛔ n1 (Willem 2026-08-17): display MOET op [open] staan. Een kale
       `.kpap-dialog{display:flex}` overrulet de browser-regel
       `dialog:not([open]){display:none}`, waardoor een gesloten dialog zichtbaar
       BLIJFT en `dialog.close()` (het kruisje) niets lijkt te doen. */
}
.kpap-dialog[open] { display: flex; flex-direction: column; }
/* Vaste kop + actierij; alleen de body scrollt. min-height:0 laat de flex-body
   krimpen onder zijn intrinsieke hoogte, zodat overflow-y ook echt bijt. */
.kpap-dialog__head,
.kpap-dialog__foot,
.kpap-dialog .kpap-acts { flex: 0 0 auto; }
.kpap-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* ⭐ mob1 (Willem 2026-08-24, "Mobiel"): de velden in de Kind-toevoegen-pop-up
   toonden op mobiel geknipte tekst, sterker zodra de rode "LET OP"-melding
   erbij kwam. Oorzaak: de body is een scrollbare flex-kolom (min-height:0) en
   de controls stonden op de default flex-shrink:1. WebKit/Safari geeft een
   <input type=date> met -webkit-appearance:none GEEN intrinsieke minimumhoogte,
   dus flex-shrink perste zijn vaste height:33px samen tot ~16px — de datumtekst
   viel weg. De melding maakt de body langer en verhoogt die krimpdruk, vandaar
   "sterker als de melding verschijnt". flex-shrink:0 houdt elke control op
   hoogte; de body scrollt dan i.p.v. de velden te pletten (dezelfde bedoeling
   als de c1-scrollfix hierboven). */
.kpap-dialog__body .kpap-input { flex-shrink: 0; }
/* De opzeggen-pop-up wikkelt kop/body/actierij in een .kpap-opz-view; maak DAT
   de flex-kolom zodat zijn eigen body kan scrollen. De verborgen view (hidden)
   valt met display:none vanzelf buiten de flex-flow. */
.kpap-opz-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* ⛔ n1 (Willem 2026-08-17): herstel de `hidden`-garde. De regel hierboven overrulet
   het `hidden`-attribuut, waardoor de confirm-view ("Opzegging bevestigen") tegelijk
   met de entry-view ("Stoppen met lezen?") zichtbaar bleef. */
.kpap-opz-view[hidden] { display: none; }
.kpap-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.kpap-dialog__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--color-grey-warm);
}
.kpap-dialog__head h4 {
    /* lay4 — zelfde koppenstijl als de kaartkoppen: --font-heading @ 400 (geen faux-bold). */
    font-family: var(--font-heading); font-size: 17.5px; font-weight: 400; margin: 0; flex: 1; line-height: 1.25;
}
.kpap-dialog__close { font-size: 21px; line-height: 1; color: var(--color-text); }
.kpap-dialog__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.kpap-dialog__label { font-size: 13.5px; font-weight: 600; }
.kpap-dialog .kpap-acts { padding: 0 18px 16px; }
.kpap-dialog .kpap-act-msg { flex-basis: 100%; }

@media (max-width: 767px) {
    .kpap-dialog .kpap-acts { flex-direction: column; align-items: stretch; }
}

/* --- Opzeggen pop-up "Stoppen met lezen?" (Willem 2026-08-08) -------------
   Stacked options, each a reuse button with a short explanation beneath it.
   Reuses .kpap-btn / .kpap-hint — no second control set. Tight spacing, normal
   readable font (Viewport Rule). */
.kpap-opz-option { display: flex; flex-direction: column; gap: 3px; }
.kpap-opz-option .kpap-btn { align-self: flex-start; }
.kpap-opz-option .kpap-hint { margin: 0; }
.kpap-opz-option--end {
    margin-top: 4px; padding-top: 12px;
    border-top: 1px solid var(--color-grey-warm);
}
@media (max-width: 767px) {
    .kpap-opz-option .kpap-btn { align-self: stretch; }
}

/* --- Opzegging bevestigen (O2/O3) — vinkje + voorwaardelijke tekst -------- */
.kpap-opz-confirm {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; line-height: 1.45; cursor: pointer;
}
.kpap-opz-confirm input[type="checkbox"] {
    margin-top: 3px; flex: none; width: 18px; height: 18px; cursor: pointer;
}
/* Verplicht-melding bij het vinkje (Willem 2026-08-10) — in de primaire kleur,
   direct onder het vakje. */
.kpap-opz-check-msg { margin: 4px 0 0; font-size: 13.5px; color: var(--color-primary); }
/* De lichtgrijze bevestigingsregel onderaan de pop-up stond tegen de rand
   (Willem 2026-08-10): geef hem dezelfde horizontale + onderpadding als de body. */
.kpap-opz-note { margin: 0; padding: 2px 18px 16px; }

/* --- Chat in de Klantenservice-tegel (A1/W33) ----------------------------
   Hergebruikt het kpcontact-chat-blok + chat.css. De wrap is voor de
   contactpagina bedoeld (gecentreerd, brede padding); binnen de tegel laten we
   hem de volle breedte vullen zonder eigen kader — de tegel IS al het kader. */
/* .kpap-chat is een flex-KOLOM (voor de oude statische tegel). De ingebedde
   kpc-chat is zelf al een flex-kolom met min-height op zijn berichtenlijst; in
   een flex-kolom-ouder zonder eigen hoogte klapt die naar 0 in. Zet de live-tegel
   daarom op block-layout, zodat de chat natuurlijk meet — net als op /contact/. */
.kpap-chat--live { display: block; }
.kpap-chat--live .kpap-chat-body { display: block; padding: 0; }
.kpap-chat--live .kpc-chat-wrap { max-width: none; margin: 0; padding: 0; }
.kpap-chat--live .kpc-chat { border: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 768px) {
    .kpap-chat--live .kpc-chat-wrap { padding: 0; }
}