/* Boarding-redesign (Kor 2026-06-29) — voordeur styling.
   Site-stijl j1mmy.nl vertaald naar Blazor:
     - navy primary #0C2C65 met witte ink
     - saffraan accent #E8A33A voor eyebrow + leading-punt
     - zware display-koppen, royale witruimte
     - kleur als accent, niet als filling
   Scope-prefix .vd- om botsing met andere component-CSS te vermijden. */

/* H1-focus-suppress (van FocusOnNavigate) staat globaal in app.css —
   geen scope-specifieke regel meer nodig. Inputs/buttons/links hebben
   hun eigen :focus-styling verderop in dit bestand. */

.vd-shell {
    --vd-navy: #0C2C65;
    --vd-navy-deep: #08204b;
    --vd-navy-ink: #ffffff;
    --vd-navy-muted: rgba(255, 255, 255, 0.78);
    --vd-navy-faint: rgba(255, 255, 255, 0.65);
    --vd-saffraan: #E8A33A;
    --vd-saffraan-soft: rgba(232, 163, 58, 0.16);
    --vd-ink: #1a1f2c;
    --vd-ink-muted: #5a6371;
    --vd-ink-faint: #8a93a3;
    --vd-surface: #ffffff;
    --vd-surface-muted: #f6f5f1;
    --vd-border-soft: rgba(12, 44, 101, 0.08);
    --vd-border-input: rgba(12, 44, 101, 0.14);
    --vd-border-input-focus: var(--vd-navy);
    /* Danger-tokens — voor foutmeldingen op het form (error-veld + form-banner).
       Eerder hardcoded #c2185b / #8a1342 op meerdere plekken; nu in het
       systeem zodat de copy-rondje één plek raakt en de contrast-check
       eenmalig is geborgd (8a1342 op #fff = ratio ~7:1, ruim boven AA). */
    --vd-danger-text: #8a1342;
    --vd-danger-bg: rgba(138, 19, 66, 0.06);
    --vd-radius: 12px;
    --vd-radius-sm: 8px;
    --vd-shadow-soft: 0 1px 2px rgba(12, 44, 101, 0.04), 0 8px 24px rgba(12, 44, 101, 0.06);

    min-height: 100vh;
    background-color: var(--vd-surface-muted);
    color: var(--vd-ink);
    font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
    overflow-y: auto;
    /* Center de container horizontaal én verticaal op de page; bij viewport
       groter dan content zweeft 't blok in het midden met witruimte rondom.
       Bij kleinere viewports scrollt het natuurlijk. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

@media (max-width: 900px) {
    .vd-shell {
        padding: 1.5rem 1rem;
    }
}

/* Page = wrapper voor de container. Geen layout-werk hier; de container
   doet de grid-arrangering. */
.vd-page {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Centrale container: max ~1100px met flex-column. Twee panelen boven
   (navy-verhaal + form), drie functie-blokken onder, alles met afgeronde
   hoeken en eigen ademruimte. Moneybird-achtige compactheid: de page
   leeft als één afgebakend blok in het midden, niet rand-tot-rand. */
.vd-container {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Twee panelen naast elkaar bovenaan de container. Navy = zwaartepunt
   (iets breder), form = compacter naast. Allebei stretch zodat ze even
   hoog zijn. Stack bij <900px naar één kolom. */
.vd-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .vd-panels {
        grid-template-columns: 1fr;
    }
}

/* === Hero-paneel (links, navy) ===========================================
   Card-vibe: border-radius + lichte shadow geven 't paneel houvast i.p.v.
   rand-tot-rand-vlak. Flex-column met natuurlijke hoogte; "Gemaakt in
   Leeuwarden" zit onderaan dankzij margin-top: auto op .vd-hero-foot. */

.vd-hero {
    background: linear-gradient(180deg, var(--vd-navy) 0%, var(--vd-navy-deep) 100%);
    color: var(--vd-navy-ink);
    padding: 2.5rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: var(--vd-radius);
    box-shadow: var(--vd-shadow-soft);
}

@media (max-width: 900px) {
    .vd-hero {
        padding: 2rem 1.5rem;
    }
}

.vd-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--vd-navy-ink);
}

.vd-hero-brand-logo {
    /* 160px breed in de gecentreerde container-versie (was 200px op het rand-
       tot-rand-pattern). Aspect-ratio Logo_J1mmy_diap.png = 2.12, dus
       width=160px → height ~75px. Compacter past beter in de card-shape. */
    width: 160px;
    height: auto;
}

.vd-hero-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

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

.vd-hero-title {
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0;
    max-width: 18ch;
}

.vd-hero-lede {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--vd-navy-muted);
    max-width: 44ch;
    margin: 0;
}

.vd-hero-lede strong {
    color: var(--vd-navy-ink);
    font-weight: 600;
}

.vd-hero-price {
    font-size: 0.9375rem;
    color: var(--vd-navy-muted);
    margin: 0;
    line-height: 1.45;
}

.vd-hero-price strong {
    color: var(--vd-navy-ink);
    font-weight: 600;
}

/* === Trio (drie functie-blokken onder de panelen) ========================
   Eigen rij binnen de container (niet meer in de navy-hero). Drie mini-
   cards met witte bg + subtiele border + radius matched de container-
   discipline: alles is een afgebakend blok, niets loopt rand-tot-rand.
   Gekozen-intentie-kolom krijgt saffraan-accent (dot vóór h3 + h3-color
   shift). DESIGN.md "color as accent" — geen bg-fill, geen border-stripe.
   Stacks bij <900px synchroon met de panels. */

.vd-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .vd-trio {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

.vd-trio-card {
    background-color: var(--vd-surface);
    border: 1px solid var(--vd-border-soft);
    border-radius: var(--vd-radius);
    padding: 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vd-trio-card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--vd-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vd-trio-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--vd-ink-muted);
    margin: 0;
}

.vd-trio-card.is-current {
    border-color: var(--vd-saffraan-soft);
}

.vd-trio-card.is-current h3 {
    color: var(--vd-saffraan);
}

.vd-trio-card.is-current h3::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--vd-saffraan);
    flex-shrink: 0;
}

/* "Gemaakt in Leeuwarden" — laatste regel onderaan het navy-paneel.
   margin-top: auto pakt 't naar de bodem ook wanneer de body kort is. */
.vd-hero-foot {
    font-size: 0.8125rem;
    color: var(--vd-navy-faint);
    margin: 0;
    margin-top: auto;
    padding-top: 1.5rem;
}

/* === Form-paneel (rechts) ================================================
   Card-vibe matched met het hero-paneel: zelfde radius + shadow, witte bg
   + lichte border. align-items:stretch op .vd-panels maakt 'em even hoog
   als de navy-hero ernaast; .vd-form-wrap centreert binnen het paneel via
   margin: auto 0 zodat 't form vertikaal in het midden zit. */

.vd-form-col {
    background-color: var(--vd-surface);
    border: 1px solid var(--vd-border-soft);
    border-radius: var(--vd-radius);
    box-shadow: var(--vd-shadow-soft);
    padding: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

@media (max-width: 900px) {
    .vd-form-col {
        padding: 2rem 1.5rem;
    }
}

.vd-form-wrap {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

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

.vd-form-lede {
    font-size: 0.9375rem;
    color: var(--vd-ink-muted);
    margin: 0.625rem 0 0;
    line-height: 1.5;
}

.vd-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.vd-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.vd-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vd-ink);
    letter-spacing: -0.005em;
}

.vd-field-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--vd-border-input);
    border-radius: var(--vd-radius-sm);
    background-color: var(--vd-surface);
    color: var(--vd-ink);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vd-field-input:focus {
    outline: none;
    border-color: var(--vd-border-input-focus);
    box-shadow: 0 0 0 3px rgba(12, 44, 101, 0.08);
}

.vd-field-input::placeholder {
    color: var(--vd-ink-faint);
}

/* Wachtwoord-veld met show/hide-toggle (Lucide Eye/EyeOff inline-SVG, conform
   DESIGN.md sectie 5 icon-button-pattern). De toggle zit absoluut gepositioneerd
   rechts in het veld; padding-right op de input maakt ruimte zodat de tekst
   niet onder de knop loopt. Pure JS-handler, geen Blazor-circuit nodig. */
.vd-field-with-toggle {
    position: relative;
}

.vd-field-with-toggle .vd-field-input {
    padding-right: 2.75rem;
}

.vd-field-toggle {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--vd-ink-faint);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.vd-field-toggle:hover {
    color: var(--vd-navy);
    background-color: rgba(12, 44, 101, 0.04);
}

.vd-field-toggle:focus-visible {
    outline: 2px solid var(--vd-navy);
    outline-offset: 2px;
}

.vd-field-toggle-icon {
    width: 18px;
    height: 18px;
}

.vd-field-error {
    font-size: 0.8125rem;
    color: var(--vd-danger-text);
    line-height: 1.4;
    margin-top: 0.125rem;
}

.vd-form-message {
    padding: 0.75rem 0.875rem;
    border-radius: var(--vd-radius-sm);
    background-color: var(--vd-danger-bg);
    color: var(--vd-danger-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.vd-form-message a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Knop "Begin gratis" — navy filled, één primary per scherm. Akkoord-tekst eronder. */
.vd-cta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.vd-cta-button {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    background-color: var(--vd-navy);
    color: var(--vd-navy-ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--vd-radius-sm);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.vd-cta-button:hover:not(:disabled) {
    background-color: var(--vd-navy-deep);
}

.vd-cta-button:active:not(:disabled) {
    transform: translateY(1px);
}

.vd-cta-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.vd-cta-akkoord {
    font-size: 0.75rem;
    color: var(--vd-ink-muted);
    line-height: 1.45;
    margin: 0;
    text-align: center;
}

.vd-cta-akkoord a {
    color: var(--vd-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vd-form-bottom-link {
    font-size: 0.875rem;
    color: var(--vd-ink-muted);
    text-align: center;
    margin: 0;
}

.vd-form-bottom-link a {
    color: var(--vd-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

/* === Inline progress (eerlijke "even klaarzetten"-staat) ================= */

.vd-progress-card {
    background-color: var(--vd-surface);
    border-radius: var(--vd-radius);
    box-shadow: var(--vd-shadow-soft);
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.vd-progress-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(12, 44, 101, 0.12);
    border-top-color: var(--vd-navy);
    border-radius: 50%;
    animation: vd-spin 0.9s linear infinite;
}

@keyframes vd-spin {
    to { transform: rotate(360deg); }
}

/* Honor prefers-reduced-motion (PRODUCT.md "Reduced motion: honour
   prefers-reduced-motion for the slide-in overlay, the thinking-pulse-dots,
   and the pill-transitions"). Voordeur heeft één draaiende spinner + diverse
   micro-transitions; bij reduce zet alle bewegingsduren naar near-instant en
   stop de spinner expliciet (statische ring blijft als visuele cue). */
@media (prefers-reduced-motion: reduce) {
    .vd-shell *,
    .vd-shell *::before,
    .vd-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .vd-progress-spinner {
        animation: none;
        border-top-color: var(--vd-navy);
    }
}

.vd-progress-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--vd-ink);
    margin: 0;
}

.vd-progress-lede {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vd-ink-muted);
    margin: 0;
    max-width: 30ch;
}

/* === Login secundaire knoppen (Wachtwoord vergeten? / Geen account?) =====
   Outlined-stijl onder de primaire INLOGGEN-knop. Vol-breedte, witte bg,
   subtiele border, donkere tekst, kleine radius — hulppaden die niet
   concurreren met de primaire actie.

   SCOPE-NOTE: hardcoded kleur- en radius-waarden i.p.v. var(--vd-*)
   omdat /login geen .vd-shell-ancestor heeft (LoginLayout = pure
   RadzenCard). vd-tokens worden in voordeur.css onder .vd-shell
   geinitialiseerd; buiten die scope zijn ze undefined en zou border
   + bg silent invalid raken. Hex-waardes komen uit hetzelfde palette
   (saffraan-ring + ink-tekst conform voordeur), maar dan scope-vrij.

   Specificity-boost met a.-prefix zodat Radzen's basis-`a`-styling
   (text-decoration, color) niet wint van deze class. */
a.vd-login-aux-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    appearance: none;
    text-decoration: none;
    text-align: center;
    padding: 0 1rem;
    background-color: #ffffff;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    color: #1a1f2c;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.vd-login-aux-button:hover {
    border-color: #a1a1aa;
    background-color: #f9fafb;
    color: #1a1f2c;
    text-decoration: none;
}

a.vd-login-aux-button:focus-visible {
    outline: 2px solid #E8A33A;
    outline-offset: 2px;
}