/* Boarding-redesign (Kor 2026-06-29) — welkom-dashboard styling.

   Klein-groot-klein layout met soft size-morph + cross-fade via CSS-
   transitions. Geen JS-tween, geen view-transitions-API (browser-support).
   Kaarten staan in vaste slots (links/midden/rechts); bij wissel wordt
   alleen de variant per slot herrenderd, transitions geven de illusie
   van rustig groter/kleiner worden.

   Site-stijl j1mmy.nl: hergebruik navy + saffraan tokens uit voordeur.css
   waar mogelijk; vw-prefix om botsing met vd- te vermijden.
*/

.vw-shell {
    --vw-navy: #0C2C65;
    --vw-navy-ink: #ffffff;
    --vw-navy-deep: #08204b;
    --vw-saffraan: #E8A33A;
    --vw-saffraan-soft: rgba(232, 163, 58, 0.12);
    --vw-ink: #1a1f2c;
    --vw-ink-muted: #5a6371;
    --vw-ink-faint: #8a93a3;
    /* Voor body-tekst (hint / footer-knip) op de witte surface: #8a93a3 zit
       op ~3.8:1 — net onder WCAG AA 4.5:1. vw-ink-soft zit op ~5.1:1 en is
       de juiste keuze voor leesbare-maar-stille tekst (≤14px). */
    --vw-ink-soft: #6e7787;
    --vw-surface: #ffffff;
    --vw-surface-warm: #fbfaf6;
    --vw-surface-muted: #f6f5f1;
    --vw-border-soft: rgba(12, 44, 101, 0.08);
    --vw-border-strong: rgba(12, 44, 101, 0.14);
    /* Status-tokens — was hardcoded #2a8a4a (success-icon) en
       rgba(90,99,113,0.3) (line-through-color). Nu één plek, parallel aan
       de --vd-danger-* in voordeur.css. */
    --vw-success-text: #2a8a4a;
    --vw-line-through: rgba(90, 99, 113, 0.3);
    --vw-radius: 16px;
    --vw-radius-sm: 10px;
    --vw-shadow-soft: 0 1px 2px rgba(12, 44, 101, 0.04), 0 12px 32px rgba(12, 44, 101, 0.06);
    --vw-shadow-groot: 0 2px 4px rgba(12, 44, 101, 0.05), 0 20px 48px rgba(12, 44, 101, 0.08);

    min-height: 100vh;
    background-color: var(--vw-surface-muted);
    color: var(--vw-ink);
    font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;

    /* Voorkom dat dubbelklik op kaart-titels / status-regels per ongeluk een
       selectie geeft (dezelfde fix als op de voordeur). Inputs, knoppen,
       links en form-elementen houden hun standaard selecteer-gedrag — die
       worden hieronder expliciet uitgezonderd. */
    -webkit-user-select: none;
    user-select: none;

    /* iOS Safari tekent een lichte tap-highlight op elementen bij tap,
       óók op niet-interactieve (h1/p/span) wanneer user-select: none
       actief is. Transparent maakt 'm onzichtbaar; interactieve
       elementen krijgen hun feedback via :focus-visible verderop. */
    -webkit-tap-highlight-color: transparent;
}

.vw-shell input,
.vw-shell textarea,
.vw-shell select,
.vw-shell button,
.vw-shell a {
    -webkit-user-select: auto;
    user-select: auto;
}

/* H1-focus-suppress (van FocusOnNavigate) staat globaal in app.css —
   geen scope-specifieke regel meer nodig. De interactieve-uitzondering
   hieronder geeft inputs/buttons/links een eigen saffraan-focus-stijl. */

.vw-shell input:focus-visible,
.vw-shell textarea:focus-visible,
.vw-shell select:focus-visible,
.vw-shell button:focus-visible,
.vw-shell a:focus-visible {
    outline: 2px solid var(--vw-saffraan);
    outline-offset: 2px;
}

/* Honor prefers-reduced-motion (PRODUCT.md "Reduced motion"). Schakel
   alle transitions en de hover-translateY uit op de kaarten. Parallel
   aan het blok in voordeur.css. */
@media (prefers-reduced-motion: reduce) {
    .vw-shell *,
    .vw-shell *::before,
    .vw-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .vw-card-klein:hover:not(.vw-card-disabled) {
        transform: none;
    }
}

.vw-page {
    max-width: 80rem;
    margin: 0 auto;
    /* padding-bottom reserveert ruimte voor de fixed-bottom J1mmyBar zodat
       de Winkel-sectie volledig boven de balk uit scrolt i.p.v. erachter
       verdwijnt. Token --j1mmy-bar-total-height komt uit j1mmy-design-
       tokens.css en is exact de bar-hoogte (bar + status-strook + padding). */
    padding: 3rem 2rem calc(2rem + var(--j1mmy-bar-total-height));
}

/* === Page-header ============================================ */

.vw-page-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    /* Gereserveerde min-height zodat de kaarten-grid eronder op dezelfde
       y-positie begint, ongeacht welke kaart groot staat. Hero-copy
       varieert per intentie (Mail-lede = 3 zinnen, Order-titel kan op
       heel smal naar 2 regels breken); zonder reservering verspringt
       het kaarten-blok bij elke swap.

       11rem dekt de desktop-worst-case: 1 regel kop + 2 regels lede +
       eyebrow + twee 0.75rem gaps. Bewust niet de absolute worst-case
       (Order-2-regel-titel × Mail-3-regel-lede = ~13rem) — dat liet bij
       de kortste variant (Basis) ~96px witruimte over, bijna een derde
       leeg. Met 11rem krimpt het gat bij Basis naar ~30-40px (rustig,
       niet leeg) en blijft desktop sprongvrij. Op een heel smalle
       viewport waar Order-kop alsnog naar 2 regels breekt kan er 1px-
       niveau-jitter optreden; bewuste trade-off, kaarten-swap is op
       telefoon zeldzaam (Kor 30-06-2026). Tekst is top-aligned binnen
       het blok (flex-column default justify-content: flex-start). */
    min-height: 11rem;
}

.vw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vw-saffraan);
}

.vw-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--vw-saffraan);
}

.vw-page-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--vw-ink);
    margin: 0;
}

.vw-page-lede {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vw-ink-muted);
    margin: 0;
    max-width: 65ch;
}

/* === Foutscherm bij definitief-gefaalde provisioning =====================
   Async-boarding-fix (11 juli 2026): als de achtergrond-provisioning-keten
   na één ingebouwde retry alsnog faalt, zet VoordeurService
   tenant.SetupFailedAtUtc + SetupFailStage; WelkomDashboard-poller detecteert
   dat en toont dit blok in plaats van de vinkjes + winkel. Rustige toon,
   geen technische details, geen "opnieuw"-knop (idempotente retry is al
   binnen de keten geprobeerd). Klant wordt naar contact-adres geleid; admin
   ruimt de tenant op via bestaande dev-flow.

   Design-taal identiek aan .vw-page-head + .vw-eyebrow: dezelfde typografie,
   dezelfde tokens, geen aparte kleurtak (foutscherm is niet rood; het is
   rustig en gemeend, past bij de rest van de welkom-shell). Alleen de
   eyebrow-dot pakt vw-ink-muted i.p.v. saffraan zodat 't niet als "kies
   deze" leest maar als "er is iets"-signaal. */

.vw-fail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 44rem;
    margin: 4rem auto 0;
    padding: 2.5rem;
    background-color: var(--vw-surface);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius);
    box-shadow: var(--vw-shadow-soft);
}

.vw-fail-eyebrow {
    color: var(--vw-ink-muted);
}

.vw-fail-eyebrow::before {
    background-color: var(--vw-ink-muted);
}

.vw-fail-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--vw-ink);
    margin: 0;
}

.vw-fail-body {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vw-ink);
    margin: 0;
}

.vw-fail-body a {
    color: var(--vw-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.vw-fail-body-quiet {
    color: var(--vw-ink-muted);
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}

/* Boarding-poort-1 (11 juli 2026). Resend-knop op het geblokkeerde startscherm.
   Bewust subtiel: het is een uitwijk-actie ("mail komt niet aan"), de primaire
   aandacht moet naar "check je inbox" gaan. Kader-stijl in plaats van solid
   primary, zodat 'ie vindbaar is maar niet trekt. */
.vw-resend-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--vw-navy);
    border: 1px solid var(--vw-navy);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vw-resend-btn:hover:not(:disabled) {
    background: var(--vw-navy);
    color: #fff;
}

.vw-resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vw-resend-form {
    margin-top: 1.25rem;
}

/* Boarding-poort-2 (11 juli 2026). Compacte strip vlak boven de kaart-grid, in
   de bestaande gap tussen hero en grid. De :has()-regel verderop drukt
   .vw-page-head margin-bottom naar 0 zodra een strip direct volgt, zodat de
   pagina niet extra rekt: hero blijft op z'n plek, strip vult de weggevallen
   gap, grid schuift een fractie omhoog. Zonder strip valt de :has() weg en
   houdt .vw-page-head z'n oorspronkelijke 2.5rem gap. */
.vw-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--vw-saffraan-soft);
    border: 1px solid rgba(232, 163, 58, 0.35);
    border-radius: var(--vw-radius-sm);
    padding: 0.35rem 0.875rem;
    margin: 0 0 0.75rem 0;
}
.vw-page-head:has(+ .vw-strip) {
    margin-bottom: 0;
}
.vw-strip-tekst {
    margin: 0;
    color: var(--vw-ink);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.vw-strip-knop {
    flex: 0 0 auto;
    padding: 0.3rem 0.75rem;
    background: var(--vw-navy);
    color: #fff;
    border: 1px solid var(--vw-navy);
    border-radius: var(--vw-radius-sm);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.vw-strip-knop:hover { background: var(--vw-navy-deep); }

/* Echte modal-overlay: backdrop dimt startscherm; kaart ligt bovenop, gecentreerd.
   position: fixed → onafhankelijk van scroll en van de containing-block. Backdrop
   krijgt geen @onclick want de poort mag niet als sla-over-klikweg fungeren
   (klant vult in of navigeert bewust weg via andere URL). */
.vw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 44, 101, 0.45);
    z-index: 900;
    animation: vwFadeIn 0.2s ease-out;
}
.vw-modal-schaal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.25rem 1.25rem;
    z-index: 901;
    pointer-events: none;
    overflow-y: auto;
}
.vw-modal-schaal > * {
    pointer-events: auto;
}
@keyframes vwFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Boarding-poort-2 overlay-kaart. Ligt boven het startscherm via .vw-modal-schaal
   (fixed backdrop dimt de hero + kaart-grid erachter). Vorm-precedent:
   .vw-winkel-sectie (surface background, soft border, afgeronde hoeken). Kaart
   voelt als "even een kaartje invullen", niet als losse pagina. */
.vw-bg-overlay {
    width: 100%;
    max-width: 44rem;
    background: var(--vw-surface);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius);
    box-shadow: var(--vw-shadow-groot);
    padding: 2rem 2rem 1.75rem;
}
.vw-bg-titel {
    margin: 0.5rem 0 1.5rem;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--vw-ink);
    font-weight: 700;
}
.vw-bg-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--vw-border-soft);
    margin-bottom: 1.5rem;
}
.vw-bg-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--vw-ink-muted);
    margin-bottom: -1px;
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
}
.vw-bg-tab:hover:not(.is-active) {
    color: var(--vw-ink);
}
.vw-bg-tab.is-active {
    color: var(--vw-navy);
    border-bottom-color: var(--vw-navy);
    font-weight: 600;
}

/* KVK-zoekrij: input met zoek-knop ernaast (Moneybird-flow). */
.vw-bg-zoekrij {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0.25rem;
}
.vw-bg-zoekrij .vw-bg-input {
    flex: 1 1 auto;
    min-width: 0;
}
.vw-bg-zoekknop {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    background: var(--vw-navy);
    color: #fff;
    border: 1px solid var(--vw-navy);
    border-radius: var(--vw-radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.vw-bg-zoekknop:hover:not(:disabled) { background: var(--vw-navy-deep); }
.vw-bg-zoekknop:disabled { opacity: 0.55; cursor: not-allowed; }

/* Keuzelijst na multi-hit KVK-zoek. Rijen zijn button-elementen zodat toetsenbord-
   navigatie en focus-stijl werken; visueel voelen ze als kaartjes (Moneybird-referentie). */
.vw-bg-kandidaten {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0.25rem 0 0.5rem;
    padding: 0.25rem;
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius-sm);
    background: var(--vw-surface-muted);
}
.vw-bg-kandidaat {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.625rem 0.75rem;
    background: var(--vw-surface);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius-sm);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vw-bg-kandidaat:hover {
    border-color: var(--vw-navy);
    background: var(--vw-surface-warm);
}
.vw-bg-kandidaat.is-actief {
    border-color: var(--vw-navy);
    background: var(--vw-surface-warm);
    box-shadow: 0 0 0 2px rgba(12, 44, 101, 0.14);
}
.vw-bg-kandidaat.is-actief .vw-bg-kandidaat-naam {
    color: var(--vw-navy);
}
.vw-bg-kandidaat-naam {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--vw-ink);
}
.vw-bg-kandidaat-meta {
    font-size: 0.8125rem;
    color: var(--vw-ink-muted);
}
.vw-bg-melding {
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--vw-surface-warm);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius-sm);
    font-size: 0.875rem;
    color: var(--vw-ink-muted);
}
.vw-bg-fout {
    background: rgba(200, 0, 0, 0.06);
    border: 1px solid rgba(200, 0, 0, 0.15);
    color: #a12727;
    padding: 0.75rem 1rem;
    border-radius: var(--vw-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}
.vw-bg-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vw-bg-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9375rem;
    color: var(--vw-ink);
    font-weight: 500;
}
.vw-bg-hint {
    font-size: 0.8125rem;
    color: var(--vw-ink-muted);
    font-weight: 400;
}
.vw-bg-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vw-border-strong);
    border-radius: var(--vw-radius-sm);
    font-size: 1rem;
    color: var(--vw-ink);
    background: var(--vw-surface);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.vw-bg-input:focus {
    outline: none;
    border-color: var(--vw-navy);
    box-shadow: 0 0 0 3px rgba(12, 44, 101, 0.12);
}
.vw-bg-input[readonly] {
    background: var(--vw-surface-muted);
    color: var(--vw-ink-muted);
    cursor: not-allowed;
}
.vw-bg-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%230C2C65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}
.vw-bg-rij {
    display: flex;
    gap: 1rem;
}
.vw-bg-half {
    flex: 1;
}
.vw-bg-verklaring {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--vw-ink-muted);
}
.vw-bg-acties {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.vw-bg-annuleer {
    padding: 0.5rem 1.25rem;
    background: var(--vw-surface);
    color: var(--vw-navy);
    border: 1px solid var(--vw-navy);
    border-radius: var(--vw-radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.vw-bg-annuleer:hover:not(:disabled) { background: var(--vw-surface-muted); }
.vw-bg-annuleer:disabled { opacity: 0.55; cursor: not-allowed; }
.vw-bg-opslaan {
    padding: 0.5rem 1.25rem;
    background: var(--vw-navy);
    color: #fff;
    border: 1px solid var(--vw-navy);
    border-radius: var(--vw-radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.vw-bg-opslaan:hover:not(:disabled) { background: var(--vw-navy-deep); }
.vw-bg-opslaan:disabled { opacity: 0.55; cursor: not-allowed; }

/* === Klein-groot-klein grid ================================ */

.vw-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

@media (max-width: 980px) {
    .vw-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.vw-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* De grote kaart in het midden bepaalt de rij-hoogte (align-items: stretch
   trekt de zijkaarten mee). Omdat elke kaart-variant een andere hoeveelheid
   content heeft (Basis 1 status-regel, Mail/Order 3) én de titel op
   clamp(1.5rem, 2.5vw, 2rem) draait (wrapt niet-lineair naar 2 regels bij
   mid-range breedtes), is de hoogste variant NIET op de breedte-extremen maar
   ergens in het midden — een vaste min-height dekt dat nooit voor elke breedte.

   Oplossing: render alle drie de varianten gestapeld in dezelfde grid-cel
   (grid-area 1/1). De niet-actieve lagen staan op visibility: hidden zodat ze
   onzichtbaar + niet-klikbaar zijn maar wél meetellen voor de cel-hoogte. CSS
   Grid sizet de cel dan bij ELKE breedte op de hoogste van de drie, en past
   zich vanzelf aan bij toekomstige copy-wijzigingen. Geen magische getallen. */
.vw-slot-midden {
    display: grid;
}
.vw-groot-layer {
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.vw-groot-layer:not(.is-active) {
    visibility: hidden;
}

/* === Kaart-basis ============================================ */

.vw-card {
    background-color: var(--vw-surface);
    border-radius: var(--vw-radius);
    border: 1px solid var(--vw-border-soft);
    box-sizing: border-box;
    text-align: left;
    /* padding uit de transition-lijst (DESIGN.md ban op layout-property
       animations; triggert reflow van de hele kaart-keten en levert
       geen waarneembare smoothness). Behoud transform/color/shadow voor
       de hover- en slot-wissel-feedback. */
    transition: border-color 0.3s ease,
                box-shadow 0.4s ease,
                background-color 0.3s ease,
                transform 0.4s ease;
}

/* Klein: rustige uitnodiging, klikbaar (button-reset). */
.vw-card-klein {
    appearance: none;
    border: 1px solid var(--vw-border-soft);
    background-color: var(--vw-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    height: 100%;
    text-align: left;
}

.vw-card-klein:hover:not(.vw-card-disabled) {
    border-color: var(--vw-border-strong);
    background-color: var(--vw-surface-muted);
    transform: translateY(-1px);
}

.vw-card-klein:focus-visible {
    outline: 2px solid var(--vw-saffraan);
    outline-offset: 2px;
}

.vw-card-klein-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--vw-ink);
    margin: 0;
}

.vw-card-klein-sub {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--vw-ink-muted);
    margin: 0;
}

.vw-card-klein-hint {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--vw-ink-soft);
    letter-spacing: -0.005em;
}

/* Disabled variant (Gmail) — geen klik, geen hover-feedback, "Binnenkort"-pill */
.vw-card-disabled {
    cursor: not-allowed;
    background-color: var(--vw-surface-muted);
    opacity: 0.85;
}

.vw-card-klein-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.vw-card-binnenkort {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vw-saffraan);
    background-color: var(--vw-saffraan-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Groot: hoofdtoon, lijst, primaire CTA. */
.vw-card-groot {
    padding: 2.25rem 2rem;
    border: 1px solid var(--vw-border-strong);
    box-shadow: var(--vw-shadow-groot);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, var(--vw-surface) 0%, var(--vw-surface-warm) 100%);
    height: 100%;
}

.vw-card-groot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vw-saffraan);
}

.vw-card-groot-eyebrow::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--vw-saffraan);
}

.vw-card-groot-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--vw-ink);
    margin: 0;
}

.vw-card-groot-lede {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--vw-ink-muted);
    margin: 0;
    max-width: 36ch;
}

/* Status-per-regel-lijst */
.vw-status-list {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.vw-status-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.vw-status-icon {
    flex: 0 0 1.25rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.45;
}

.vw-status-item.is-done .vw-status-icon { color: var(--vw-success-text); }
.vw-status-item.is-todo .vw-status-icon { color: var(--vw-ink-faint); }

.vw-status-item.is-done .vw-status-text { color: var(--vw-ink-muted); text-decoration: line-through; text-decoration-color: var(--vw-line-through); }
.vw-status-item.is-todo .vw-status-text { color: var(--vw-ink); font-weight: 500; }

/* Primaire CTA op de grote kaart.
   margin-top:auto duwt de CTA naar de onderkant van de flex-kolom, zodat de
   knop op één vaste hoogte blijft ongeacht welke variant groot staat (Basis
   heeft minder statusregels dan Mail/Order). Bij de activatie-variant is de
   directe flex-child de <form> (.vw-card-cta-form), niet de knop zelf — daar
   staat de auto-marge op het formulier (zie regel hieronder). */
.vw-card-cta-form {
    margin-top: auto;
}

.vw-card-cta {
    margin-top: auto;
    align-self: flex-start;
    appearance: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    background-color: var(--vw-navy);
    color: var(--vw-navy-ink);
    border-radius: var(--vw-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background-color 0.15s ease;
}

.vw-card-cta:hover {
    background-color: var(--vw-navy-deep);
}


/* === Winkel-sectie (plan-keuze inline) =====================
   Past onder de drie hoofdkaarten. Eigen card-grid (geen
   .vw-card hergebruik om de visuele scheiding helder te houden:
   hoofdkaarten = boarding-acties, winkel-kaarten = plan-prijs).
   Card-styling rijmt op de hoofdkaarten via dezelfde tokens
   (border, radius, shadow), maar net wat platter zodat de
   primaire actie boven dominant blijft. */

.vw-winkel {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vw-border-soft);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vw-winkel-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 48rem;
}

.vw-winkel-title {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--vw-ink);
    margin: 0;
}

.vw-winkel-meta {
    font-size: 0.9375rem;
    color: var(--vw-ink-muted);
    margin: 0;
    line-height: 1.5;
}

.vw-winkel-future {
    background-color: var(--vw-surface-warm);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius-sm);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.vw-winkel-future-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vw-ink);
}

.vw-winkel-future-text strong {
    color: var(--vw-ink);
    font-weight: 600;
}

.vw-winkel-future-form {
    margin: 0;
}

/* Plan-grid: bij smal viewport-1-kolom, bij wider 2-3 kolommen. */
.vw-winkel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.vw-winkel-card {
    background-color: var(--vw-surface);
    border: 1px solid var(--vw-border-soft);
    border-radius: var(--vw-radius-sm);
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vw-winkel-card:hover {
    border-color: var(--vw-border-strong);
    box-shadow: var(--vw-shadow-soft);
}

.vw-winkel-card.is-current {
    background-color: var(--vw-surface-warm);
    border-color: var(--vw-saffraan-soft);
}

.vw-winkel-card-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--vw-ink);
    margin: 0;
}

.vw-winkel-card-price {
    font-size: 0.875rem;
    color: var(--vw-ink-muted);
    margin: 0;
    line-height: 1.4;
}

.vw-winkel-card-price strong {
    color: var(--vw-ink);
    font-weight: 700;
    font-size: 1.25rem;
    margin-right: 0.125rem;
}

/* Tagline = korte one-liner direct onder de plan-naam ("Voor wie ook echt
   offertes maakt"). Body = uitleg-paragraaf erna. Bullets uit Info-kolom
   vervallen — copy zit hardcoded in WelkomDashboard.PlanCopy(rank). */
.vw-winkel-card-tagline {
    margin: 0;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--vw-ink-muted);
    line-height: 1.4;
}

.vw-winkel-card-body {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--vw-ink-muted);
}

.vw-winkel-card-tag {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vw-saffraan);
}

.vw-winkel-card-tag.is-future {
    color: var(--vw-ink-muted);
}

/* .is-locked = "Beschikbaar na activatie" — plan-kaart-fallback voor tenants
   die J1mmy nog niet hebben geactiveerd. Muted + italic + natural case zodat
   de tekst als informatief overkomt (geen actie-affordance) en visueel niet
   met de Huidige/Ingepland-tags concurreert. */
.vw-winkel-card-tag.is-locked {
    color: var(--vw-ink-muted);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.vw-winkel-card-form {
    margin-top: auto;
    padding-top: 0.625rem;
}

.vw-winkel-card-cta {
    appearance: none;
    border: 1px solid var(--vw-navy);
    background-color: transparent;
    color: var(--vw-navy);
    padding: 0.625rem 1rem;
    border-radius: var(--vw-radius-sm);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vw-winkel-card-cta:hover {
    background-color: var(--vw-navy);
    color: var(--vw-navy-ink);
}

.vw-winkel-cta-ghost {
    appearance: none;
    border: 1px solid var(--vw-border-strong);
    background-color: transparent;
    color: var(--vw-ink);
    padding: 0.5rem 0.875rem;
    border-radius: var(--vw-radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vw-winkel-cta-ghost:hover {
    background-color: var(--vw-surface-muted);
}