/* 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;
}

/* === 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;
}

/* === 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 */
.vw-card-cta {
    margin-top: 0.75rem;
    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);
}