/* ════════════════════════════════════════════════════════════════
   ALJA — Booking modal (Wecandoo-style)
   Calendar + scrollable session list, view per state.
   ════════════════════════════════════════════════════════════════ */

/* ── Overlay + container ──────────────────────────────────────── */
.alja-bm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    animation: alja-bm-fade 200ms ease;
}
.alja-bm-overlay.is-open { display: flex; }
@keyframes alja-bm-fade { from { opacity: 0 } to { opacity: 1 } }

.alja-bm {
    width: 100%;
    max-width: 1040px;
    max-height: 92vh;
    background: var(--wp--preset--color--sand-light);
    border-radius: var(--wp--custom--border-radius--xl, 1.5rem);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: alja-bm-rise 250ms cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--wp--preset--font-family--body);
}
@keyframes alja-bm-rise {
    from { transform: translateY(20px); opacity: 0 }
    to   { transform: translateY(0); opacity: 1 }
}
@media (max-width: 720px) {
    .alja-bm-overlay { padding: 0; }
    .alja-bm {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        height: 100dvh; /* dynamic viewport on mobile browsers */
        border-radius: 0;
    }
}

/* ── Top bar ──────────────────────────────────────────────────── */
.alja-bm__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.75rem;
    background: var(--wp--preset--color--white);
    border-bottom: 1px solid var(--wp--preset--color--gray-200);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
@media (max-width: 720px) {
    .alja-bm__topbar { padding: 1rem 1.125rem; }
}
.alja-bm__topbar-title {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.alja-bm__close {
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--wp--preset--color--sand);
    border-radius: 999px;
    cursor: pointer;
    color: var(--wp--preset--color--charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 120ms ease;
}
.alja-bm__close:hover { background: var(--wp--preset--color--gray-200); }

/* ── Views (visibility toggle) ────────────────────────────────── */
.alja-bm__view { display: none; flex: 1; min-height: 0; overflow: hidden; }
.alja-bm__view.is-active { display: flex; }

/* ═════════════════════════════════════════════════════════════
   VIEW 1 — Calendar + List
   ═════════════════════════════════════════════════════════════ */
.alja-bm__view--cal {
    display: none;
    grid-template-columns: 372px 1fr;
    gap: 0;
    min-height: 0;
}
.alja-bm__view--cal.is-active { display: grid; }
@media (max-width: 1080px) {
    .alja-bm__view--cal { grid-template-columns: 330px 1fr; }
}
@media (max-width: 720px) {
    .alja-bm__view--cal { grid-template-columns: 1fr; }
    .alja-bm__view--cal.is-active { display: flex; flex-direction: column; }
}

/* ── Calendar panel (left column on desktop, header on mobile) ──
   Its own scroll region on desktop; on mobile it must keep its
   natural height (flex: 0 0 auto) and full width (align-self:
   stretch) — otherwise the flex column crushes it to its nav row. */
.alja-bm__cal-panel {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.125rem;
    background: var(--wp--preset--color--sand-light);
    border-right: 1px solid var(--wp--preset--color--gray-200);
    overflow-y: auto;
    min-height: 0;
}
@media (max-width: 720px) {
    .alja-bm__cal-panel {
        flex: 0 0 auto;
        align-self: stretch;
        overflow: visible;
        background: var(--wp--preset--color--white);
        border-right: 0;
        border-bottom: 1px solid var(--wp--preset--color--gray-200);
        padding: 0.5rem 0.75rem 0.625rem;
    }
}

.alja-bm__cal {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 18px;
    padding: 1rem 0.75rem 1.125rem;   /* tight horizontal so grid has full breathing room */
}
/* On mobile the panel IS the card — one frame instead of two. */
@media (max-width: 720px) {
    .alja-bm__cal {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
}
/* ── Unité de navigation : Jour / Semaine / Mois ─────────────── */
.alja-bm__cal-units {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 0.625rem;
    background: var(--wp--preset--color--sand);
    border-radius: 999px;
}
.alja-bm__cal-unit {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp--preset--color--gray-600, #4B5563);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.alja-bm__cal-unit:hover { color: var(--wp--preset--color--charcoal); }
.alja-bm__cal-unit.is-active {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary-dark, #2D6E53);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.alja-bm__cal-unit:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }

.alja-bm__cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
.alja-bm__cal-nav button {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: var(--wp--preset--color--sand);
    color: var(--wp--preset--color--charcoal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 120ms ease, transform 120ms ease;
}
.alja-bm__cal-nav button:not(:disabled):hover { background: var(--wp--preset--color--gray-200); transform: scale(1.05); }
.alja-bm__cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.alja-bm__cal-month {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
    text-transform: capitalize;
    text-align: center;
    flex: 1;
    font-family: var(--wp--preset--font-family--heading);
}
@media (max-width: 720px) {
    .alja-bm__cal-nav { margin-bottom: 0.5rem; }
    .alja-bm__cal-nav button { width: 34px; height: 34px; }
}

/* ── Collapse toggle — mobile only ─────────────────────────────
   Once a date is picked the calendar folds away and the whole
   sheet becomes the session list. */
.alja-bm__cal-nav .alja-bm__cal-toggle { display: none; }
@media (max-width: 720px) {
    .alja-bm__cal-nav .alja-bm__cal-toggle {
        display: inline-flex;
        background: transparent;
    }
    .alja-bm__cal-toggle svg { transition: transform 180ms ease; }
    .alja-bm__cal-panel.is-collapsed .alja-bm__cal-toggle svg { transform: rotate(180deg); }
    .alja-bm__cal-panel.is-collapsed .alja-bm__cal-dow-row,
    .alja-bm__cal-panel.is-collapsed .alja-bm__cal-grid,
    .alja-bm__cal-panel.is-collapsed .alja-bm__legend { display: none; }
    .alja-bm__cal-panel.is-collapsed { padding-bottom: 0.375rem; }
    .alja-bm__cal-panel.is-collapsed .alja-bm__cal-nav { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .alja-bm__cal-toggle svg { transition: none; }
}

/* Both rows share IDENTICAL grid template, gap, AND alignment so the
   weekday labels line up perfectly above the date pills in every
   column — no horizontal drift. */
.alja-bm__cal-dow-row,
.alja-bm__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    justify-items: center;   /* centers each cell child on its column */
}

.alja-bm__cal-dow-row {
    margin-bottom: 0.25rem;
}
.alja-bm__cal-dow-row span {
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-600);
    font-weight: 600;
    padding: 3px 0;
    text-transform: lowercase;
}
@media (max-width: 720px) {
    .alja-bm__cal-dow-row,
    .alja-bm__cal-grid { gap: 4px; }
    .alja-bm__cal-dow-row span { font-size: 0.6875rem; padding: 1px 0; }
}

/* Pill = exact circle, sized to min(48px, cell width) so it scales
   gracefully without overflowing the cell on narrow viewports. */
.alja-bm__cal-day {
    width: min(48px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 999px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--wp--preset--color--gray-400);
    cursor: default;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* prevent line-height pushing the number off-center */
    line-height: 1;
}
@media (max-width: 1080px) {
    .alja-bm__cal-day { width: min(42px, 100%); font-size: 0.9375rem; }
}
@media (max-width: 720px) {
    .alja-bm__cal-day { width: min(40px, 100%); font-size: 0.9375rem; }
}
@media (max-width: 360px) {
    .alja-bm__cal-day { width: min(36px, 100%); font-size: 0.875rem; }
}
.alja-bm__cal-day.is-empty { visibility: hidden; }
.alja-bm__cal-day.is-past  { color: var(--wp--preset--color--gray-400); }

/* Disponible — Vert Forêt (primary) tint */
.alja-bm__cal-day.has-sessions {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
    color: var(--wp--preset--color--primary-dark);
    cursor: pointer;
    font-weight: 600;
}
.alja-bm__cal-day.has-sessions:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
    transform: scale(1.05);
}

/* Complet — Rose Poudré (rose) tint */
.alja-bm__cal-day.is-full {
    background: color-mix(in srgb, var(--wp--preset--color--rose) 18%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--rose) 85%, #2D2D2D);
    cursor: pointer;
    font-weight: 500;
}
.alja-bm__cal-day.is-full:hover {
    background: color-mix(in srgb, var(--wp--preset--color--rose) 28%, transparent);
}

/* Date sélectionnée — Vert Forêt plein (brand statement) */
.alja-bm__cal-day.is-selected,
.alja-bm__cal-day.has-sessions.is-selected,
.alja-bm__cal-day.is-full.is-selected {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    transform: scale(1.05);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}

/* ── Legend ───────────────────────────────────────────────────── */
.alja-bm__legend {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding: 0 0.25rem;
}
@media (max-width: 720px) {
    .alja-bm__legend { margin-top: 0.5rem; justify-content: center; }
}
.alja-bm__legend-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    color: var(--wp--preset--color--charcoal);
}
.alja-bm__legend-pill--avail {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
}
.alja-bm__legend-pill--full {
    background: color-mix(in srgb, var(--wp--preset--color--rose) 18%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--rose) 85%, #2D2D2D);
}

/* ── List panel (right on desktop, the whole sheet on mobile) ──
   Always the scrolling region: on mobile it takes every pixel the
   calendar leaves (flex: 1 1 auto + min-height: 0). */
.alja-bm__list-panel {
    overflow-y: auto;
    padding: 0 1.25rem 1.5rem;   /* no top padding — the sticky heading owns it */
    background: var(--wp--preset--color--sand-light);
    min-height: 0;
}
@media (max-width: 720px) {
    .alja-bm__list-panel {
        flex: 1 1 auto;
        padding: 0 0.75rem 1rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

.alja-bm__list-loading,
.alja-bm__list-empty {
    text-align: center;
    color: var(--wp--preset--color--gray-600);
    padding: 3rem 1rem;
    font-size: 0.9375rem;
}

/* ──────────────────────────────────────────────────────────────
   BLUR-TO-FOCUS preview state
   Real calendar + sessions structure rendered immediately with
   neutral pills, then blurred. When the AJAX payload lands, the
   blur fades out smoothly to reveal the actual data — no skeleton,
   no layout jump.
   ────────────────────────────────────────────────────────────── */

.alja-bm__cal,
.alja-bm__list-panel {
    transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alja-bm__cal.is-loading,
.alja-bm__list-panel.is-loading {
    filter: blur(6px) saturate(0.85);
    pointer-events: none;
    user-select: none;
}

/* Neutral pill used during preview (no green/rose color leak through
   blur). Pill height/shape stays identical to the real states so the
   un-blur is a pure color reveal, not a layout shift. */
.alja-bm__cal-day.is-preview {
    background: color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--gray-400) 75%, transparent);
    cursor: default;
    font-weight: 500;
}

/* Preview day blocks / cards: dimmed so the blur reads as "loading"
   not "real but blurry content". */
.alja-bm__day--preview .alja-bm__day-title {
    color: var(--wp--preset--color--gray-400);
}
.alja-bm__slot-card--preview {
    opacity: 0.7;
}
.alja-bm__slot-card--preview .alja-bm__slot-time,
.alja-bm__slot-card--preview .alja-bm__slot-meta {
    color: var(--wp--preset--color--gray-400);
}
.alja-bm__slot-card--preview .alja-bm__slot-cta {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--gray-200));
    pointer-events: none;
}

/* Honor reduced motion — instant swap instead of fade */
@media (prefers-reduced-motion: reduce) {
    .alja-bm__cal,
    .alja-bm__list-panel { transition: none; }
}

/* Helper block — bottom of the calendar column on desktop, end of
   the list on mobile (moved by JS, single node, never duplicated). */
.alja-bm__tail {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    background: var(--wp--preset--color--white);
    border: 1px dashed var(--wp--preset--color--gray-200);
    border-radius: 14px;
    text-align: center;
}
.alja-bm__cal-panel > .alja-bm__tail {
    margin-top: auto;   /* pinned to the bottom of the left column */
    padding-top: 1rem;
}
.alja-bm__tail-text {
    margin: 0 0 0.375rem;
    color: var(--wp--preset--color--gray-600);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.alja-bm__tail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--wp--preset--color--primary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}
.alja-bm__tail-link:hover { text-decoration: underline; }

/* ── Day group ────────────────────────────────────────────────
   The date heading sticks to the top of the scroller so the user
   always knows which day they are reading — and it costs one line
   instead of a heading plus a separating margin. */
/* Sections are CONTIGUOUS on purpose: the gap between them used to be
   a band where no heading was pinned, so cards slid past bare right
   under the calendar. The rhythm now lives in the heading's own top
   padding, so one heading is always covering the top of the scroller. */
.alja-bm__day {
    margin-bottom: 0;
    scroll-margin-top: 0;
}
.alja-bm__day-title {
    position: sticky;
    top: 0;
    z-index: 2;
    /* No bottom margin: it would shrink the sticky constraint box and
       leave a few pixels uncovered at every section hand-off. The gap
       to the cards is carried by .alja-bm__day-cards instead. */
    margin: 0 -1.25rem;
    padding: 0.875rem 1.25rem 0.375rem;
    background: var(--wp--preset--color--sand-light);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
    text-transform: capitalize;
    transition: color 250ms ease;
}
@media (max-width: 720px) {
    .alja-bm__day-title {
        margin: 0 -0.75rem;
        padding: 0.75rem 0.75rem 0.375rem;
        font-size: 0.9375rem;
    }
    /* The first heading supplies its own top spacing */
    .alja-bm__day:first-child .alja-bm__day-title { padding-top: 0.5rem; }
}
/* Highlight after a calendar click — no background box, so no
   layout shift and the sticky heading stays legible. */
.alja-bm__day.is-highlighted .alja-bm__day-title { color: var(--wp--preset--color--primary-dark); }
.alja-bm__day.is-highlighted .alja-bm__slot-card {
    border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}

.alja-bm__day-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.375rem; }

/* ── Regroupement par ville dans une journée ──────────────────── */
.alja-bm__city-group { display: flex; flex-direction: column; gap: 0.5rem; }
.alja-bm__city-group + .alja-bm__city-group { margin-top: 0.5rem; }
.alja-bm__city-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.125rem 0.125rem 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark, #2D6E53);
}
.alja-bm__city-title svg { flex-shrink: 0; }
.alja-bm__city-count {
    margin-left: auto;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wp--preset--color--gray-500, #6B7280);
}

/* ── Filtre ville (puces en tête de liste) ────────────────────── */
.alja-bm__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.25rem 0 0.75rem;
}
.alja-bm__city-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid var(--wp--preset--color--gray-200);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--charcoal);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.alja-bm__city-chip:hover { border-color: var(--wp--preset--color--primary); }
.alja-bm__city-chip.is-active {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}
.alja-bm__city-chip:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.alja-bm__list-empty-hint { font-size: 0.8125rem; color: var(--wp--preset--color--gray-500, #6B7280); }
.alja-bm__list-reset {
    margin-top: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--primary-dark, #2D6E53);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
@media (max-width: 720px) {
    .alja-bm__cal-units { margin-bottom: 0.5rem; }
    .alja-bm__cal-panel.is-collapsed .alja-bm__cal-units { display: none; }
}

.alja-bm__slot-card {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 12px;
    padding: 0.625rem 0.875rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
/* Stays a single row down to 320px: the CTA never gets its own
   line, which is what made each card 139px tall on a phone. */
@media (max-width: 720px) {
    .alja-bm__slot-card { gap: 0.5rem; padding: 0.5rem 0.625rem 0.5rem 0.75rem; }
}
/* Keeps a keyboard-focused card clear of the sticky date heading */
.alja-bm__slot-card { scroll-margin-top: 2.25rem; }
.alja-bm__slot-card:hover { border-color: var(--wp--preset--color--gray-400); }
.alja-bm__slot-card.is-full {
    background: var(--wp--preset--color--sand-light);
    opacity: 0.85;
}

.alja-bm__slot-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.alja-bm__slot-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.alja-bm__slot-time {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.alja-bm__slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .alja-bm__slot-time { font-size: 0.9375rem; }
    .alja-bm__slot-top { gap: 0.375rem; }
}
/* Very narrow phones: shave the time and the badge just enough that
   they stay on ONE row next to each other. */
@media (max-width: 400px) {
    .alja-bm__slot-time { font-size: 0.875rem; }
    .alja-bm__slot-badge { font-size: 0.625rem; padding: 1px 6px; }
    .alja-bm__slot-meta { font-size: 0.75rem; letter-spacing: -0.01em; }
}
.alja-bm__slot-badge--confirmed {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
    color: var(--wp--preset--color--primary-dark);
}
.alja-bm__slot-badge--full {
    background: color-mix(in srgb, var(--wp--preset--color--rose) 18%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--rose) 85%, #2D2D2D);
}
.alja-bm__slot-meta {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--gray-600);
    line-height: 1.35;
}
/* Both stay atomic: when the meta line has to wrap on a small phone
   it breaks BETWEEN the parts, never inside "300 MAD". */
.alja-bm__slot-meta-em {
    color: var(--wp--preset--color--charcoal);
    font-weight: 500;
    white-space: nowrap;
}
.alja-bm__slot-price {
    color: var(--wp--preset--color--charcoal);
    font-weight: 600;
    white-space: nowrap;
}
/* Long form of the seats label — dropped where the card is narrow:
   stacked phones AND the narrow two-column range (720–880px). */
@media (max-width: 880px) {
    .alja-bm__slot-meta-long { display: none; }
}
.alja-bm__slot-cta {
    padding: 0.5rem 1.125rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 120ms ease;
}
@media (max-width: 720px) {
    .alja-bm__slot-cta { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
}
.alja-bm__slot-cta:hover { background: var(--wp--preset--color--primary-dark); }
.alja-bm__slot-cta:disabled,
.alja-bm__slot-card.is-full .alja-bm__slot-cta {
    background: var(--wp--preset--color--gray-200);
    color: var(--wp--preset--color--gray-600);
    cursor: not-allowed;
}

/* (mobile slot card moved up so it cascades correctly) */

/* ═════════════════════════════════════════════════════════════
   VIEW 2 — Form
   ═════════════════════════════════════════════════════════════ */
.alja-bm__view--form {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: var(--wp--preset--color--white);
}
.alja-bm__view--form.is-active { display: flex; }

.alja-bm__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 1rem 1.5rem 0;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem;
    background: var(--wp--preset--color--sand-light);
    border: 1px solid var(--wp--preset--color--gray-200);
    color: var(--wp--preset--color--charcoal);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 999px;
    align-self: flex-start;
    transition: background 120ms ease;
}
.alja-bm__back:hover { background: var(--wp--preset--color--sand); }
@media (max-width: 720px) {
    .alja-bm__back {
        margin: 0.625rem 1rem 0;
        padding: 0.375rem 0.75rem 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }
}

.alja-bm__form-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    padding: 1rem 1.75rem 1.75rem;
}
@media (max-width: 720px) {
    .alja-bm__form-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.625rem 1rem 1rem;
    }
    /* The recap is a reminder, not the content: two columns, no icons,
       and no title — the atelier name is already in the top bar. */
    .alja-bm__form-summary { padding: 0.875rem !important; border-radius: 12px; }
    .alja-bm__form-summary-label,
    .alja-bm__form-summary-title { display: none; }
    .alja-bm__form-summary-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0.75rem !important;
    }
    /* 0.8125rem keeps "mercredi 19 août 2026" on a single line in a
       half-width column at 375px. */
    .alja-bm__form-summary-list li { font-size: 0.8125rem !important; }
    .alja-bm__form-summary-list li svg { display: none; }
    .alja-bm__form-summary-total {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-top: 0.5rem !important;
    }
    .alja-bm__form-summary-total div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
    }
    .alja-bm__form-summary-total span { margin-bottom: 0 !important; }
    .alja-bm__cod-note { margin-top: 0.75rem; padding: 0.625rem 0.75rem; }
    /* Sticky submit on mobile — aligned with the fields, no negative
       margins: the base .alja-bm__submit rule sits LATER in this file,
       so any width/radius set here would be overridden and only the
       margins would survive, shifting the button off-centre. */
    .alja-bm__submit {
        position: sticky;
        bottom: 0.5rem;
        margin: 0.5rem 0 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    }
}

.alja-bm__form-summary {
    background: var(--wp--preset--color--sand-light);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 14px;
    padding: 1.25rem;
    height: fit-content;
}
.alja-bm__form-summary-label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.alja-bm__form-summary-title {
    margin: 0 0 1.125rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
    line-height: 1.3;
}
.alja-bm__form-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.alja-bm__form-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--charcoal);
}
.alja-bm__form-summary-list li svg { flex-shrink: 0; color: var(--wp--preset--color--gray-600); margin-top: 2px; }
.alja-bm__form-summary-list li span { display: block; font-size: 0.75rem; color: var(--wp--preset--color--gray-600); margin-bottom: 1px; }
.alja-bm__form-summary-list li strong { font-weight: 600; }
.alja-bm__form-summary-total {
    border-top: 1px solid var(--wp--preset--color--gray-200);
    padding-top: 0.75rem !important;
    margin-top: 0.25rem;
}
.alja-bm__form-summary-total strong {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.125rem !important;
    color: var(--wp--preset--color--primary);
}

/* COD badge inside the summary card */
.alja-bm__cod-note {
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.alja-bm__cod-note strong {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 700;
}
.alja-bm__cod-note span {
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-600);
    line-height: 1.4;
}

.alja-bm__form-title {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wp--preset--color--charcoal);
}

.alja-bm__qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--sand-light);
    border-radius: 12px;
    margin-bottom: 0.5rem;
}
.alja-bm__qty-row label { font-size: 0.9375rem; color: var(--wp--preset--color--charcoal); font-weight: 500; }
.alja-bm__qty-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray-200);
    border-radius: 999px;
    padding: 2px;
}
.alja-bm__qty-ctrl button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: var(--wp--preset--color--charcoal);
    border-radius: 999px;
}
.alja-bm__qty-ctrl button:hover { background: var(--wp--preset--color--sand); }
.alja-bm__qty-ctrl button:disabled { color: var(--wp--preset--color--gray-400); cursor: not-allowed; }
.alja-bm__qty-ctrl input {
    width: 40px;
    height: 30px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-family: inherit;
    color: var(--wp--preset--color--charcoal);
    -moz-appearance: textfield;
}
.alja-bm__qty-ctrl input::-webkit-outer-spin-button,
.alja-bm__qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alja-bm__qty-hint {
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-600);
    text-align: right;
}
@media (max-width: 720px) {
    .alja-bm__form-title { font-size: 1.0625rem; margin-bottom: 0.625rem; }
    .alja-bm__qty-hint { margin-bottom: 0.75rem; }
    .alja-bm__form-grid-fields { gap: 0.625rem; margin-bottom: 0.75rem; }
}

.alja-bm__form-grid-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1rem;
}
.alja-bm__field { display: flex; flex-direction: column; gap: 0.375rem; }
.alja-bm__field--full { grid-column: 1 / -1; }
.alja-bm__field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp--preset--color--gray-600);
}
.alja-bm__field input,
.alja-bm__field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--wp--preset--color--gray-200);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--wp--preset--color--charcoal);
    background: var(--wp--preset--color--white);
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.alja-bm__field input:focus,
.alja-bm__field textarea:focus {
    outline: 0;
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px rgba(58, 138, 106, 0.15);
}
@media (max-width: 480px) {
    .alja-bm__form-grid-fields { grid-template-columns: 1fr; }
}

.alja-bm__submit {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 150ms ease;
}
.alja-bm__submit:hover:not(:disabled) { background: var(--wp--preset--color--primary-dark); }
.alja-bm__submit:disabled { background: var(--wp--preset--color--gray-400); cursor: not-allowed; }

.alja-bm__error {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--wp--preset--color--error);
    font-size: 0.875rem;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 10px;
}

/* ═════════════════════════════════════════════════════════════
   VIEW 3 — Success
   ═════════════════════════════════════════════════════════════ */
.alja-bm__view--success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--wp--preset--color--white);
}
.alja-bm__view--success.is-active { display: flex; }

.alja-bm__success-icon {
    width: 72px;
    height: 72px;
    background: var(--wp--preset--color--success);
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 1rem;
}
.alja-bm__view--success h3 {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--wp--preset--color--charcoal);
}
.alja-bm__view--success p {
    max-width: 460px;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--gray-600);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.alja-bm__success-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.alja-bm__success-actions a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--wp--preset--color--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
.alja-bm__success-actions a.is-ghost {
    background: transparent;
    color: var(--wp--preset--color--primary);
    border: 1px solid var(--wp--preset--color--primary);
}