/* layer-booking.css — booking flow: verblijf-overzicht, stepper, extra's, gegevens, price-matrix. */

/* ─── layer_booking — step 1 (Verblijf-overzicht, preview-call) ──────── */
.booking-summary { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-summary__hero {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}
@container (min-width: 36rem) {
    .booking-summary__hero { grid-template-columns: 3fr 4fr; align-items: center; }
}
.booking-summary__image,
.booking-summary__hero .mm-media {
    display: block; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--radius-md); overflow: hidden;
}
.booking-summary__hero .mm-media > img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.booking-summary__hero-body { display: flex; flex-direction: column; gap: var(--space-2); }
.booking-summary__step {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-fg-muted); font-weight: 600;
}
.booking-summary__title    { margin: 0; font-size: var(--fs-h1); font-weight: 700; }
.booking-summary__subtitle { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-h3); }
.booking-summary__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
.booking-summary__facts dt {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-fg-muted); font-weight: 600;
}
.booking-summary__facts dd { margin: 0; font-weight: 500; }
.booking-summary__section-title { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.booking-summary__items {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.booking-summary__item {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px dashed var(--color-border);
    font-size: .95rem;
}
.booking-summary__item:first-child { border-top: 0; }
.booking-summary__item-price {
    color: var(--color-fg-muted); font-variant-numeric: tabular-nums;
}
.booking-summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--space-4); background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.booking-summary__total-label { font-size: var(--fs-h3); font-weight: 600; }
.booking-summary__total-value {
    font-size: var(--fs-h2); font-weight: 700; color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.booking-summary__note { color: var(--color-fg-muted); font-style: italic; font-size: .9rem; }
.booking-error {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
}
.booking-error__msg { margin: 0; font-size: 1.05rem; }
.booking-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.booking-banner--error {
    background: #fdecec;
    border-left: 4px solid #c1272d;
    color: #6b1418;
}
.booking-banner__msg { margin: 0; font-size: .95rem; }

/* ─── booking-stepper — 4 nummered stappen bovenaan ──────────────────── */
.booking-stepper {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}
.booking-stepper__step {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    text-align: center;
    color: var(--color-fg-muted);
    position: relative;
}
.booking-stepper__step + .booking-stepper__step::before {
    content: '';
    position: absolute;
    top: 1rem; right: 50%; left: -50%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.booking-stepper__step.is-done + .booking-stepper__step::before,
.booking-stepper__step.is-current::before { background: var(--color-primary); }
.booking-stepper__num {
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-bg-elev);
    border: 2px solid var(--color-border);
    font-weight: 700;
    position: relative; z-index: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.booking-stepper__label { font-size: .85rem; }
.booking-stepper__step.is-done .booking-stepper__num {
    background: var(--color-primary); border-color: var(--color-primary);
    color: var(--color-primary-fg);
}
.booking-stepper__step.is-done .booking-stepper__label { color: var(--color-fg); }
.booking-stepper__step.is-current .booking-stepper__num {
    background: var(--color-bg-elev); border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}
.booking-stepper__step.is-current .booking-stepper__label {
    color: var(--color-fg); font-weight: 600;
}

/* ─── booking-extras (step 2: Extra's) ────────────────────────────────── */
.booking-extras { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-extras__header { display: flex; flex-direction: column; gap: var(--space-1); }
.booking-extras__step {
    font-size: 0.85rem;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.booking-extras__title { margin: 0; font-size: var(--fs-h2); font-weight: 700; }
.booking-extras__intro { margin: 0; color: var(--color-fg-muted); }

/* 2-kolom-layout: recap links (image, kassabon), form rechts. Stapelt op smal. */
.booking-extras__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 64rem) {
    .booking-extras__layout {
        grid-template-columns: minmax(18rem, 26rem) 1fr;
        align-items: start;
    }
}
.booking-extras__recap {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (min-width: 64rem) {
    .booking-extras__recap {
        position: sticky;
        top: calc(var(--site-header-height, 64px) + var(--space-3));
    }
}
.booking-extras__recap-image {
    width: 100%; height: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.booking-extras__recap-title { margin: 0; font-size: var(--fs-h3); }
.booking-extras__recap-period { margin: 0; color: var(--color-fg-muted); font-size: 0.95rem; }
.booking-extras__receipt {
    list-style: none; margin: 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 0.35rem;
}
.booking-extras__receipt-line {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-2); font-size: 0.92rem;
}
.booking-extras__receipt-line--extra .booking-extras__receipt-name::before {
    content: '+ '; color: var(--color-primary); font-weight: 600;
}
.booking-extras__receipt-name { flex: 1; }
.booking-extras__receipt-price { color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.booking-extras__total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 700;
}
.booking-extras__total-value {
    color: var(--color-primary);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.booking-extras__form { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-extras__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.booking-extras__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.booking-extras__item-body { display: flex; flex-direction: column; gap: 0.2rem; }
.booking-extras__item-name { font-weight: 600; font-size: 1rem; }
.booking-extras__item-description { margin: 0; color: var(--color-fg-muted); font-size: 0.9rem; }
.booking-extras__item-price {
    margin-top: 0.2rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.booking-extras__item-control { display: flex; align-items: center; gap: var(--space-2); }
.booking-extras__item-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.booking-extras__item-checkbox input[type="checkbox"] { accent-color: var(--color-primary); }
/* Herbruikbare +/- stepper rond een <input type="number"> — geactiveerd door
   /modules/qty.js (click = bump, hold = auto-repeat). */
.mm-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
}
.mm-qty__btn {
    width: 2.1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast, .15s);
    user-select: none;
}
.mm-qty__btn:hover { background: var(--color-bg-soft); }
.mm-qty__btn:active { background: var(--color-border); }
.mm-qty__input {
    width: 2.4rem;
    padding: 0.35rem 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mm-qty__input::-webkit-outer-spin-button,
.mm-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.booking-extras__item-required {
    color: var(--color-fg-muted);
    font-size: 0.85rem;
    font-style: italic;
}
.booking-extras__empty {
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-fg-muted);
}
.booking-extras__actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}
.booking-extras__back { color: var(--color-fg-muted); }

/* ─── booking-form (step 3: Gegevens) ─────────────────────────────────── */
.booking-details { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-details__recap {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    font-size: .95rem;
}
.booking-details__recap-price { color: var(--color-primary); font-weight: 700; }
.booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Side-by-side velden binnen één rij. Kolom-aandelen komen via inline
   `--cols`-CSS-var (door BookingDetailsFormRenderer::fieldRow gezet); fallback
   is één kolom. Onder 36rem collapsen naar één kolom voor mobile-stack. */
.booking-form__row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: var(--cols, 1fr);
}
@container (max-width: 36rem) {
    .booking-form__row { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.form-label {
    font-size: .82rem; font-weight: 600;
    color: var(--color-fg-muted);
    /* Niet wrappen — anders verspringt de form-field-hoogte en duwt 'ie de
       hele rij omlaag. Bij ultra-smalle cellen hangt 't label rustig een paar
       pixels over z'n cell-grens; bij goede widths is dat zeldzaam. */
    white-space: nowrap;
}
.booking-form .form-field__control { display: block; width: 100%; position: relative; }
/* Sub-inputs van composite-fields (TelField, AddressField, ZipcodeField composite
   met distance) vullen hun grid-cell — anders blijft de browser-default ~20ch over. */
.mm-tel input, .mm-tel select,
.mm-composite-input { width: 100%; min-width: 0; box-sizing: border-box; }
/* Match `.form-input`-look 1:1 (zelfde padding/border/bg/transition), zodat
   custom-select display, native select (pre-mm-select-upgrade) en input zonder
   `.form-input`-class identiek ogen aan FormRenderer-inputs. `.form-input` wint
   sowieso qua specificity voor de inputs zelf — deze regel is effectief alleen
   nog voor selects, maar we houden de drie selectors voor robuustheid. */
.booking-form input,
.booking-form select,
.booking-form .mm-select-display,
.booking-form .mm-dropdown-date-trigger {
    width: 100%;            /* vul de cell-breedte ipv browser-default ~20ch */
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--form-input-border);
    border-radius: var(--form-radius, var(--radius-sm));
    font: inherit;
    background: var(--form-input-bg);
    color: var(--color-fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.booking-form select:focus,
.booking-form .mm-select-display:focus-visible,
.booking-form .mm-select-display[aria-expanded="true"],
.booking-form .mm-dropdown-date-trigger:focus-visible,
.booking-form .mm-dropdown-date-trigger.is-active {
    outline: none;
    border-color: var(--form-input-border-active);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Composite tel-veld (Framework\Form\Field\TelField). Country-code-select
   links (smal, vlag + dial), national-input rechts (vol breed). De hidden
   E.164-input zit erin maar is `display: none` via attribute-selector. */
.mm-tel {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem;
    align-items: stretch;
}
.mm-tel > input[type="hidden"] { display: none; }
.mm-tel select[data-mm-tel-country] {
    min-width: 0;
    /* Custom-select-display ervangt 'm visueel — native select hidden via
       mm-select-class na upgrade. Vóór upgrade is 'ie een klein select. */
}
/* Smalle trigger voor tel-country (toont alleen vlag + "+31"). De generieke
   `.mm-select-display` is `width: 100%`; hier `auto` zodat 'ie shrink't naar
   de "+31 vlag"-content en de national-input rechts zoveel mogelijk ruimte
   houdt in de `max-content 1fr`-grid. */
.mm-tel .mm-select-display { width: auto; min-width: 0; }
.mm-tel input[data-mm-tel-national] {
    min-width: 0; /* anders eet 'ie de grid op */
}

/* Validatie-feedback (zie /modules/form-validate.js) — JS zet `data-touched`
   op een control nadat 'ie blur of submit-mark heeft gehad. Pas dan tonen we
   succes/fout-styling, zodat lege required-velden niet meteen rood worden. */
.form-field { position: relative; }
/* Inputs/selects zitten binnen `.form-field__control`-wrapper (door
   `BookingDetailsFormRenderer`). Descendant-selector dekt zowel die
   structuur als de default-FormRenderer (geen wrapper) — backwards-safe. */
.form-field input,
.form-field select {
    padding-right: 2.2rem; /* ruimte voor het vinkje */
}
/* Groene rand bij `:valid` na touched. */
.booking-form input[data-touched]:valid,
.booking-form select[data-touched]:valid {
    border-color: var(--color-primary);
}

/* Vinkje als `__control`-wrapper-`::after`. `is-valid` wordt door `form-validate.js`
   op de `.form-field`-wrapper gezet zodra een veld valid is ÉN er een waarde in
   staat (lege optional-fields krijgen geen vinkje). Position relative op de
   __control zorgt dat 't vinkje binnen de cell-breedte valt — in multi-col
   rows zou positioning op de form-field anders ver-rechts vallen. */
.form-field.is-valid .form-field__control::after {
    content: '';
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6e3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
/* Selects hebben een native chevron rechts — vinkje links daarvan. */
.form-field[data-control="select"].is-valid .form-field__control::after { right: 1.5rem; }
.form-field select { padding-right: 3rem; }

/* Dropdown-date heeft eigen grid van smalle selects — geen vinkje op de wrapper
   en geen ruime padding-right voor de native chevron. */
.form-field:has([data-mm-dropdown-date]).is-valid .form-field__control::after { display: none; }
.form-field:has([data-mm-dropdown-date]) select { padding-right: 0.35rem; }

/* Chrome/Safari/Edge autofill schildert een gele/blauwe background ondanks
   `background-color`. De WebKit-only oplossing: een dikke `inset` box-shadow
   in onze achtergrondkleur die de fill-yellow overschilderd, plus de tekst-
   kleur expliciet zetten zodat de "autofilled"-styling onze fg-kleur volgt.
   `transition` op een belachelijke duur voorkomt dat de fill-state alsnog
   terugkomt tussen pseudo-class-transitions door.

   Daarnaast: een 1ms keyframe-animation op de autofill-pseudo zodat
   form-validate.js via `animationstart` kan detecteren dat een veld is
   gevuld (autofill triggert geen blur/input events). */
.booking-form input:-webkit-autofill,
.booking-form input:-webkit-autofill:hover,
.booking-form input:-webkit-autofill:focus,
.booking-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-elev) inset !important;
    -webkit-text-fill-color: var(--color-fg) !important;
    caret-color: var(--color-fg);
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    animation-name: mmAutofillStart;
    animation-duration: 1ms;
}
@keyframes mmAutofillStart {
    from { opacity: 0.99; }
    to   { opacity: 1; }
}
/* Rode invalid-styling: niet tijdens Chrome autofill-preview. In die state
   is `:-webkit-autofill` actief en de waarde is in de UI zichtbaar, maar
   `input.value` returnt nog `''` (anti-fingerprinting). De `:invalid`-pseudo
   triggert dan ten onrechte — visueel zou de field "fout" lijken terwijl
   'ie net mooi gevuld is. `:not(:-webkit-autofill)` exclude't die situatie. */
.booking-form input[data-touched]:invalid:not(:-webkit-autofill),
.booking-form select[data-touched]:invalid {
    border-color: #c0392b;
    background-color: rgba(192, 57, 43, .04);
}
/* Error-slot heeft altijd een vaste hoogte gereserveerd — voorkomt layout-
   shift wanneer een foutmelding verschijnt/verdwijnt. JS schrijft alleen de
   tekst; bij valid blijft het span leeg en houdt z'n ruimte vast. Verder
   trekken meerdere foutregels (langere `validationMessage`) de hoogte
   netjes uit zonder kettingreactie op andere rijen. */
.form-field__error {
    display: block;
    font-size: .78rem;
    line-height: 1.1;
    color: #c0392b;
}
/* Lege error-span (geen text) neemt geen verticale ruimte in. Form-validate.js
   schrijft alleen tekst bij invalid; daarvoor is de DOM-node er al, dus
   tonen-bij-content geeft een mini layout-shift (1 regel) wanneer een error
   verschijnt — acceptabel vs. 1rem permanent gereserveerd × 11 velden. */
.form-field__error:empty { display: none; }
/* Label-kleur bij invalid — `is-invalid` op de wrapper door form-validate.js. */
.form-field.is-invalid .form-label {
    color: #c0392b;
}
/* Terms-checkbox spant beide grid-kolommen in 2-col layout (zie @container). */
.form-field--checkbox {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: .95rem;
}
.form-field--checkbox input[type="checkbox"] { margin-top: .25rem; }
.form-actions {
    display: flex; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-2);
}
.booking-summary__actions {
    display: flex; justify-content: flex-end;
    margin-top: var(--space-2);
}
.booking-summary__continue { padding: .9em 1.4em; font-weight: 700; }

/* ─── detail-page availability + entities overview ──────────────────── */
.accommodation-detail__availability {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}
.accommodation-detail__availability-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h3); font-weight: 600;
}
.acc-availability { background: none; padding: 0; box-shadow: none; }

/* ─── price-matrix (2D: nachten-rows × datums-cols × prijs-cells) ──── */
/* Client-side gerendered door /js/search/matrix.js — fetcht /api/sab/matrix
   en lazy-loadt extra weken bij horizontaal scrollen via IntersectionObserver.
   Sticky thead-row (datum-headers) + sticky first-column (nachten-labels)
   houden context vast tijdens scroll in beide assen. */
.acc-matrix { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.acc-matrix__title { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.acc-matrix__placeholder {
    padding: var(--space-4);
    color: var(--color-fg-muted);
    font-style: italic;
    text-align: center;
}
.acc-matrix__status {
    font-size: .85rem;
    color: var(--color-fg-muted);
    min-height: 1.2em;
}
/* Div-grid-layout — geen <table>, zodat we de echte `__head` node
   `position: fixed` kunnen maken bij scroll-past zonder dat
   table-flow z'n column-widths breekt. `__head-placeholder` houdt
   de hoogte vast wanneer head uit flow gaat. */
.acc-matrix__shell { position: relative; }
.acc-matrix__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elev);
    /* `contain` voorkomt dat horizontaal scrollen naar het einde de
       page-scroll triggert (bounce/over-scroll-jump op trackpad). */
    overscroll-behavior-x: contain;
    /* `scroll-behavior: smooth` werkt op `scrollTo/scrollBy` JS-calls én
       op anchor-navigation — niet op user-wheel zelf, maar maakt onze
       eigen lerp-loop optioneel en vloeit anchor-jumps soepel uit. */
    scroll-behavior: smooth;
}
.acc-matrix__grid {
    width: max-content;
    min-width: 100%;
    font-variant-numeric: tabular-nums;
}
.acc-matrix__head-placeholder {
    height: 0;
    /* Geen transition op `height`! Bij toggle van `is-head-fixed` moet de
       placeholder INSTANT de hoogte van head overnemen — anders loopt de
       body-shift achter op de fixed-positionering, en zie je content over
       een paar frames op-en-neer kruipen. */
}
.acc-matrix__head       { display: flex; background: var(--color-bg-soft); }
.acc-matrix__head-dates { display: flex; }
.acc-matrix__row        { display: flex; }
.acc-matrix__cell {
    flex: 0 0 100px;
    /* `min-width: 0` overruled de flex-default (`auto` = min-content). Zonder
       dit groeien cells met langere content (bv. "€ 1.239") voorbij de
       flex-basis en wordt de grid-uitlijning kapot. */
    min-width: 0;
    max-width: 100px;
    padding: var(--space-2) var(--space-3);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-elev);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.acc-matrix__head .acc-matrix__cell {
    background: var(--color-bg-soft);
    font-weight: 600;
}
/* Sticky-left voor corner + nights tijdens horizontale scroll in
   normal-state. In fixed-state staat corner naast (niet in) head-dates,
   dus de translateX op dates raakt 'm niet — geen verschuiving nodig. */
.acc-matrix__cell--corner,
.acc-matrix__cell--nights {
    flex: 0 0 140px;
    max-width: 140px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg-soft);
}
.acc-matrix__cell--corner {
    color: var(--color-fg-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 3;
}
.acc-matrix__cell--nights {
    text-align: left;
    box-shadow: 1px 0 0 var(--color-border);
}
.acc-matrix__cell--date { font-size: .85rem; }
.acc-matrix__cell--price.acc-matrix__cell--empty {
    color: var(--color-fg-muted);
    opacity: .5;
}
.acc-matrix__cell--price:has(.acc-matrix__price-link):hover {
    background: var(--color-bg-soft);
}
.acc-matrix__price-link {
    display: block;
    padding: .25em;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}
.acc-matrix__price-link:hover { text-decoration: underline; }

/* Fixed-state: de écht-bestaande head-node krijgt position: fixed
   (geen clone). JS levert top/left/width via CSS-vars; placeholder
   pakt de hoogte zodat de body niet verspringt. head-dates schuift
   horizontaal mee via translateX (`--matrix-head-shift = -scrollLeft`). */
.acc-matrix__shell.is-head-fixed .acc-matrix__head {
    position: fixed;
    top: var(--matrix-head-top, 0);
    left: var(--matrix-head-left, 0);
    width: var(--matrix-head-width, 100%);
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    border-bottom: 1px solid var(--color-border);
}
.acc-matrix__shell.is-head-fixed .acc-matrix__head-dates {
    transform: translateX(var(--matrix-head-shift, 0));
    will-change: transform;
}
.acc-matrix__shell.is-head-fixed .acc-matrix__head-placeholder {
    height: var(--matrix-head-h, 0);
}