/* ═══════════════════════════════════════════════
   BOOK PAGE — Full-viewport booking experience
   ═══════════════════════════════════════════════ */

.book-wrapper {
    position: relative;
    /* Pin the booking experience to exactly one viewport. Use dvh so iOS
       Safari measures the *visible* area (excluding the address bar) — vh
       on iOS includes the address bar zone, which left a gap below the
       Prev/Next buttons whenever the bar was visible. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Clear the fixed navbar (~80px) */
    padding-top: 80px;
}

/* ── Hero background — mirrors the anniversaire hero (dark gradient +
   red/cyan radial glows), replaces the previous per-space photo
   crossfade. The .book-hero-bg layers are kept in the DOM for JS
   compatibility but hidden. ── */
.book-hero-bgs {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #08080c 0%, #0e0e14 60%, rgba(230,57,70,0.12) 100%);
    overflow: hidden;
}
.book-hero-bgs::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(230,57,70,0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(0,212,255,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
}
.book-hero-bg { display: none; }

/* ── Space selection (inline inside the booking form) ── */
.book-space-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* ── Destination step: real Google Maps in an iframe.
   The iframe src updates when the user switches cities so the map
   re-centers and shows a pin on the selected location. ── */
/* The destination step becomes a flex column so the map can stretch to
   fill whatever vertical room is left under the title + city tabs. */
.book-form .form-step[data-step="1"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.book-form .form-step[data-step="1"] > .reservation-group { flex-shrink: 0; }
.book-dest-map-wrap {
    margin-top: 1rem;
    flex: 1;
    min-height: 220px;   /* desktop floor */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0a0a12;
    position: relative;
}
.book-dest-map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* Static visual — disable iframe interactions so page-scroll touches
       don't get hijacked by the map's pan/zoom. */
    pointer-events: none;
}
/* Transparent click layer over the iframe — tap anywhere on the map to
   open the listing in Google Maps externally, without re-enabling the
   iframe's pan/zoom (which would hijack page scroll on phone). */
.book-dest-map-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    display: block;
}

/* Loading overlay shown between an iframe src swap and the iframe's
   `load` event firing — bridges the gap where the old map would
   otherwise stay visible while the new tile fetches. */
.book-dest-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.78);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2;
}
.book-dest-map-wrap.is-loading .book-dest-map-loading {
    opacity: 1;
}
.bdml-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.18);
    border-top-color: #fff;
    animation: bdml-spin 0.7s linear infinite;
}
@keyframes bdml-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
    /* Phone: keep flex:1 from desktop so the map stretches into whatever
       vertical room is left under the city tabs (otherwise tall phones
       get a big empty gap below the map). 160px floor protects short
       viewports like iPhone mini. */
    .book-dest-map-wrap {
        min-height: 160px;
        margin-top: 0.5rem;
    }
}

.book-space-tab {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: var(--v2-bg-card, #12121a);
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.book-space-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.book-space-tab.active {
    border-color: var(--primary-color, #e63946);
    background: rgba(230,57,70,0.12);
    box-shadow: 0 0 20px rgba(230,57,70,0.15), inset 0 0 20px rgba(230,57,70,0.05);
}
.book-space-tab.coming-soon {
    opacity: 0.45;
    cursor: not-allowed;
}
.bst-logo {
    width: 90px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bst-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.book-space-tab:hover .bst-logo img,
.book-space-tab.active .bst-logo img {
    opacity: 1;
}
.bst-info { flex: 1; min-width: 0; }
.bst-city {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}
.bst-city i {
    font-size: 0.6rem;
    color: var(--primary-color, #e63946);
}
.bst-desc {
    display: -webkit-box;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.4;
    margin-top: 3px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-space-tab.active .bst-desc {
    color: rgba(255,255,255,0.5);
}
.bst-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bst-badge i { font-size: 0.5rem; }
.book-space-tab.coming-soon .bst-info { opacity: 0.5; }

/* ── Main content area ── */
.book-content {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    gap: 1rem;
    min-height: 0;
}

/* ── Reservation form: fixed-viewport layout.
   Header + step nav + Prev/Next buttons are pinned; only the active
   form-step's content scrolls when its content overflows. ── */
.book-form {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.book-form-header {
    padding: 0 0 0.75rem;
    flex-shrink: 0;
}
.book-form-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.book-form-subtitle {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.book-form-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.book-form-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* The form is the flex column that holds: nav (top) → active step (fills) → buttons (bottom). */
.book-form .reservation-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.book-form .form-steps-navigation {
    flex-shrink: 0;
    /* Sit directly above the section title so the step number and the
       "Choisissez votre …" label read as one unit. */
    margin-top: 0.25rem !important;
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.5rem !important;
    /* Anchor children at the top so the connector line can be aligned
       to the circles' vertical center (regardless of label height). */
    align-items: flex-start !important;
    --book-step-radius: 20px;     /* desktop circle = 40px wide */
    --book-step-count: 6;
    --book-step-progress: 0;       /* 0..1, set by showStep() in JS */
}
/* Recolor + reposition the connector line: */
.book-form .form-steps-navigation::before {
    /* gray rail — runs from first circle's center to last circle's center */
    left: calc(50% / var(--book-step-count)) !important;
    right: calc(50% / var(--book-step-count)) !important;
    top: var(--book-step-radius) !important;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12) !important;
    height: 2px !important;
}
/* Animated fill that grows up to the current step */
.book-form .form-steps-navigation::after {
    content: '';
    position: absolute;
    left: calc(50% / var(--book-step-count));
    top: var(--book-step-radius);
    transform: translateY(-50%);
    height: 2px;
    width: calc((100% - 100% / var(--book-step-count)) * var(--book-step-progress));
    background: var(--primary-color, #e63946);
    box-shadow: 0 0 8px rgba(230,57,70,0.45);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 768px) {
    .book-form .form-steps-navigation { --book-step-radius: 13px; }
}

/* Inactive step circles need to be opaque so the connector line doesn't
   show through them — the rail/fill should visually start/end at the
   circle's edge, not pass behind it. */
.book-form .step-nav-item .step-number {
    background: #0a0a0f !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.book-form .step-nav-item.completed .step-number {
    background: rgba(230,57,70,0.95) !important;
    border-color: var(--primary-color, #e63946) !important;
    color: #fff !important;
}
.book-form .step-nav-item.active .step-number {
    background: var(--primary-color, #e63946) !important;
    border-color: var(--primary-color, #e63946) !important;
    color: #fff !important;
}
.book-form .form-steps-buttons {
    flex-shrink: 0;
    padding-top: 0.75rem;
    margin-top: auto;
}
/* Only the active step is visible — and it owns the scrollable area. */
.book-form .form-step {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; /* room for the scrollbar */
    padding-top: 0.25rem;
}
/* Active step's first label is the section title — anchor it tight to the nav above. */
.book-form .form-step > .reservation-group:first-child > .reservation-label:first-child {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.book-form .form-step::-webkit-scrollbar { width: 8px; }
.book-form .form-step::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}
.book-form .form-step::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── Form compact overrides ── */
.book-form .reservation-form { padding: 0; background: transparent !important; border-radius: 0; box-shadow: none; }
.book-form .reservation-group { margin-bottom: 1.2rem; }
.book-form .reservation-label {
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
}
.book-form .reservation-label i { font-size: 0.8rem; }
.book-form .format-intro-text { display: none; }
.book-form .format-count-label { display: none; }
.book-form .format-tabs-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
@media (max-width: 1024px) {
    .book-form .format-tabs-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}
.book-form .format-tab {
    padding: 10px 8px;
    font-size: 0.72rem;
}
.book-form .format-tab i { font-size: 1rem; margin-bottom: 4px; }
.book-form .ftab-label { font-size: 0.72rem; }
.book-form .ftab-sub { font-size: 0.62rem; }

/* Segmented variant: two tabs swapping formula groups on step 0.
   Only one group (sessions OR anniversaires) is shown at a time — the
   tab label replaces the h4 group heading on every viewport. */
.book-form .format-tabs-nav--segmented {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin: 0 0 1rem;
}
.book-form .formula-group-title { display: none !important; }
.book-form .format-tabs-nav--segmented .format-tab {
    padding: 11px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.book-form .format-tabs-nav--segmented .format-tab i {
    font-size: 0.95rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.book-form .format-tabs-nav--segmented .format-tab.active i {
    opacity: 1;
    color: var(--v2-red, #ff0040);
}
.book-form .format-tabs-nav--segmented .format-tab:hover {
    color: rgba(255,255,255,0.9);
}
.book-form .format-tabs-nav--segmented .format-tab.active {
    background: var(--v2-bg-card, #12121a);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,0,64,0.35), 0 2px 8px rgba(0,0,0,0.25);
}
.book-form .format-panel { padding: 0.5rem 0; }
.book-form .fp-desc {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}
.book-form .formula-selector { gap: 8px; }
.book-form .formula-option {
    padding: 16px 14px;
    gap: 0;
    border-color: rgba(255,255,255,0.08);
    background: var(--v2-bg-card, #12121a);
}
.book-form .formula-option:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    box-shadow: none;
    transform: none;
}
.book-form .formula-option.active {
    border-color: var(--primary-color, #e63946);
    box-shadow: none;
}
.book-form .formula-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    line-height: 1.2;
}
.book-form .formula-desc {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.book-form .formula-price { font-size: 1.1rem; color: #fff; }
.book-form .formula-option.active .formula-price { color: #fff; }
.book-form .formula-per-player { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 400; }
.formula-tarifs-link {
    text-align: center;
    margin-top: 0.5rem;
}
.formula-tarifs-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.78rem;
    color: #e63946;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.15s ease;
}
.formula-tarifs-link a:hover { color: #fff; }
.formula-tarifs-link a i { transition: transform 0.15s ease; }
.formula-tarifs-link a:hover i { transform: translateX(2px); }
.book-form .formula-extra { font-size: 0.78rem; color: rgba(255,255,255,0.5); font-weight: 400; }
.book-form .formula-note { display: none !important; }
.book-form .min-pricing-notice { display: none !important; }
/* Card-inline description is replaced by the details panel below the cards. */
.book-form .formula-option--standard .formula-desc,
.book-form .formula-option--birthday .formula-desc { display: none !important; }

/* Details panel — shows the description, inclusions, and notes for the
   currently selected formula below the card grid. Hidden until a card
   is selected (JS sets data-active="1"). */
.book-form .formula-details-mobile { display: none; }
.book-form .formula-details-mobile[data-active] {
    display: block;
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
.book-form .formula-details-mobile .fdm-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 4px;
}
.book-form .formula-details-mobile .fdm-desc {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 6px;
}
.book-form .formula-details-mobile .fdm-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.book-form .formula-details-mobile .fdm-list li {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.75);
}
.book-form .formula-details-mobile .fdm-note {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 4px;
}
.book-form .formula-details-mobile .fdm-list:empty,
.book-form .formula-details-mobile .fdm-note:empty,
.book-form .formula-details-mobile .fdm-desc:empty { display: none; }
.book-form .players-counter { gap: 0.8rem; }
.book-form .players-display { font-size: 2rem; }

/* Players visual */
.players-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    min-height: 28px;
}
.players-visual-icon {
    color: var(--primary-color, #e63946);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateY(6px) scale(0.7);
    animation: playerPop 0.25s ease forwards;
}
@keyframes playerPop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.book-form .form-row { gap: 0.5rem; margin-bottom: 0.5rem; }
.book-form .form-row--inline-mobile { grid-template-columns: 1fr 1fr; }
.book-form .form-input {
    padding: 10px 14px;
    font-size: 0.85rem;
}
.book-form .price-summary {
    padding: 1rem;
    margin-top: 0.5rem;
}
.book-form .guest-invitations-description { font-size: 0.75rem; }
.book-form .checkbox-text { font-size: 0.78rem; }
.book-form .btn-reserve {
    width: 100%;
    padding: 14px;
    font-size: 0.95rem;
}
.book-form .players-infobox { margin-top: 0.6rem; }

/* ── Players-step Matchmaking / Privatize switch ─────────────────────
   2-pill segmented control on the right of the player counter (only
   in standard mode). Auto-defaults to matchmaking <10 / privatize 10+
   on threshold crossings; user choice persists within a band. The
   actual price computation reuses the existing #privatizeSpace
   checkbox so calculatePrice() doesn't change. */
.players-mode {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}
.players-mode-switch {
    display: flex;
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.pms-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.pms-btn + .pms-btn { border-left: 1px solid rgba(255,255,255,0.1); }
.pms-btn i { font-size: 0.85rem; }
.pms-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.pms-btn.is-active {
    background: var(--gradient-primary);
    color: #fff;
}
.players-mode-switch:has(.pms-btn.is-active) .pms-btn + .pms-btn {
    border-left-color: transparent;
}
.players-mode-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.35;
    margin: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .pms-btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

    /* Age categories — three pills on one row on phones. */
    .book-form .age-categories-checkboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .book-form .age-category-checkbox { padding: 0.5rem 0.4rem; gap: 0.35rem; justify-content: center; }
    .book-form .age-category-input { width: 14px; height: 14px; }
    .book-form .age-category-label { font-size: 0.78rem; }

    /* Calendar — fit a 7-col grid inside narrow viewports without overflow. */
    .book-form .custom-calendar { padding: 0.85rem; max-width: 100%; box-sizing: border-box; }
    .book-form .calendar-header { margin-bottom: 0.85rem; }
    .book-form .calendar-month { font-size: 0.95rem; letter-spacing: 0.5px; }
    .book-form .calendar-year { font-size: 0.75rem; }
    .book-form .calendar-nav { width: 30px; height: 30px; }
    .book-form .calendar-weekdays,
    .book-form .calendar-days { gap: 0.25rem; }
    .book-form .calendar-weekdays { margin-bottom: 0.5rem; }
    .book-form .calendar-weekday { font-size: 0.7rem; padding: 0.25rem 0; }
    .book-form .calendar-day { font-size: 0.8rem; border-radius: 6px; }
    .book-form .calendar-footer { gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; }
}
.book-form .pib-text { font-size: 0.78rem; }
.book-form .datetime-selector { gap: 0.8rem; }
.book-form .custom-calendar { font-size: 0.85rem; }

/* Time picker — compact 5×5 grid, every slot visible at once. */
.time-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    margin-top: 0.4rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.time-strip-card {
    width: 100%;
    padding: 0.45rem 0.25rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.time-strip-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.time-strip-card.is-active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(255,0,64,0.45);
}
.time-strip-card.is-disabled,
.time-strip-card[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.time-strip-loading,
.time-strip-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    padding: 0.5rem;
}
@media (max-width: 600px) {
    .time-strip { gap: 0.3rem; max-width: 320px; }
    .time-strip-card { font-size: 0.8rem; padding: 0.4rem 0.2rem; }
}

/* ── Day strip (Date step) ────────────────────────────────────────────
   Horizontal scrollable row of the next 14 days. The full month
   calendar lives behind the "Voir plus de dates" toggle for users
   who book further out. */
.day-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0.25rem 0.1rem 0.6rem;
    margin: 0 -0.1rem 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.day-strip::-webkit-scrollbar { height: 6px; }
.day-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.day-strip-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 64px;
    padding: 0.65rem 0.4rem 0.55rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
}
.day-strip-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.day-strip-card.is-today { border-color: rgba(255,0,64,0.45); }
.day-strip-card.is-active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(255,0,64,0.45);
}
.day-strip-card.is-disabled,
.day-strip-card[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255,255,255,0.02);
    border-color: transparent;
    box-shadow: none;
}
.day-strip-card.is-disabled:hover,
.day-strip-card[disabled]:hover {
    background: rgba(255,255,255,0.02);
    border-color: transparent;
}
.day-strip-card .dsc-dow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}
.day-strip-card.is-active .dsc-dow { color: rgba(255,255,255,0.95); }
.day-strip-card .dsc-day {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.day-strip-card .dsc-month {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.day-strip-card.is-active .dsc-month { color: rgba(255,255,255,0.85); }
/* The base styles.min.css makes .date-input-wrapper display:flex which
   would put the strip-wrap and the "Glissez" hint side by side. Override
   to a block stack so the hint actually sits BELOW the strip. */
.book-form .date-input-wrapper {
    display: block;
}
.day-strip-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0 0 0.25rem;
}
.day-strip-wrap > .day-strip { flex: 1 1 auto; min-width: 0; margin: 0; }
.day-strip-arrow {
    flex: 0 0 auto;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    align-self: stretch;
}
.day-strip-arrow:hover {
    background: rgba(255,0,64,0.15);
    border-color: var(--primary-color);
    color: #fff;
}
/* Desktop: arrows visible, swipe hint hidden. Strip shrinks to its
   natural width so the next chevron sits next to the last card instead
   of leaving an empty gap when the row is wider than the cards. */
@media (min-width: 769px) {
    .day-strip-hint { display: none; }
    .day-strip-wrap { justify-content: center; }
    .day-strip-wrap > .day-strip { flex: 0 0 auto; }
}
/* Phone: drop the arrows, keep the strip full-width, show the hint
   below the line and fade it on first interaction. */
@media (max-width: 768px) {
    .day-strip-arrow { display: none; }
    .day-strip-hint {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 0.25rem;
        color: rgba(255,255,255,0.55);
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: opacity 0.3s ease;
    }
    .day-strip-hint .chev {
        display: inline-block;
        animation: dayStripChev 1.6s ease-in-out infinite;
    }
    .day-strip-hint .chev--right { animation-delay: 0.8s; }
    .day-strip.is-swiped + .day-strip-hint { opacity: 0; pointer-events: none; }
}
@keyframes dayStripChev {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(-3px); opacity: 1; }
}
@media (max-width: 600px) {
    .day-strip-card { width: 56px; padding: 0.55rem 0.3rem 0.45rem; }
    .day-strip-card .dsc-day { font-size: 1.1rem; }
    .day-strip-wrap { gap: 0.3rem; }
}
.book-form .age-categories-checkboxes { gap: 8px; }

/* ── Per-player tariff display (Players step) ── */
.players-tariffs-group { margin-top: 0.25rem; }
.players-tariffs {
    padding: 1rem 1.1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
.pt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.75rem;
}
.pt-header i {
    color: var(--primary-color, #e63946);
    font-size: 0.95rem;
}
.pt-header b { color: #fff; font-weight: 700; }
.pt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
.pt-table th,
.pt-table td {
    padding: 0.55rem 0.7rem;
    text-align: left;
}
.pt-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pt-table td { color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.04); }
.pt-table tbody tr:last-child td { border-bottom: none; }
.pt-table td + td { text-align: right; }
.pt-table .pt-pp {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}
.pt-remaining {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    margin-top: 0.75rem;
    background: rgba(230,57,70,0.1);
    border: 1px solid rgba(230,57,70,0.25);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    line-height: 1.45;
}
.pt-remaining i { color: var(--primary-color, #e63946); margin-top: 2px; }
.pt-remaining b { color: #fff; }
.pt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--primary-color, #e63946);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.15s ease;
}
.pt-link:hover { color: #fff; }
.pt-link i { transition: transform 0.15s ease; }
.pt-link:hover i { transform: translateX(2px); }

/* ── Coming soon overlay ── */
.book-coming-soon {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
}
.book-coming-soon i {
    font-size: 2.5rem;
    color: var(--primary-color, #e63946);
}
.book-coming-soon span {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */

@media (max-width: 1200px) {
    .book-space-tab { min-width: 170px; padding: 10px 12px; gap: 11px; }
    .bst-logo { width: 75px; height: 52px; }
}

@media (max-width: 1024px) {
    /* Tablet keeps the fixed-viewport contract from desktop. */
    .book-hero-bgs { position: fixed; }
    .book-content {
        flex-direction: column;
        padding: 0.8rem;
        gap: 0.8rem;
    }
    .bst-logo { width: 80px; height: 55px; }
}

@media (max-width: 768px) {
    .book-space-tab {
        min-width: 0 !important;
        height: 120px !important;
        padding: 0 !important;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .bst-logo { width: 80% !important; height: auto !important; display: block !important; flex-shrink: 0 !important; margin: 0 auto; }
    .bst-logo img { width: 100% !important; height: auto !important; display: block !important; max-width: 100% !important; max-height: none !important; object-fit: unset !important; }
    .bst-info { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; flex: none !important; margin: 0 !important; text-align: center; padding: 4px 4px 6px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); }
    .bst-city { justify-content: center; font-size: 0.82rem; color: #fff; }
    .bst-desc { font-size: 0.58rem; -webkit-line-clamp: 1; text-align: center; }
    .book-content { padding: 0.5rem; }
    .book-form .format-tabs-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Phone formula step: fit all 6 cards in one viewport ── */
    .book-form-header { padding-bottom: 0.4rem; }
    .book-form-title { font-size: 1.05rem; }
    .book-form-subtitle { display: none; }

    .book-form .reservation-group { margin-bottom: 0.6rem; }

    /* One group shows at a time now (via the Sessions/Anniversaires tabs)
       so 3 cards share the row and can grow taller vertically without
       needing to fit 6 at once. */
    .book-form .formula-selector--6col {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    .formula-group-title {
        font-size: 0.58rem;
        margin: 0.15rem 0 0.3rem;
        letter-spacing: 0.05em;
    }
    .formula-group-title:first-of-type { margin-top: 0; }

    /* 3-per-row on phone with taller cards now that only one tab's
       group shows at a time — vertical room is no longer shared. */
    .book-form .formula-option--standard,
    .book-form .formula-option--birthday {
        padding: 14px 8px 12px !important;
    }
    .book-form .formula-option--standard .formula-name,
    .book-form .formula-option--birthday .formula-name {
        font-size: 0.82rem !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }
    .book-form .formula-option--standard .formula-desc,
    .book-form .formula-option--birthday .formula-desc {
        display: none !important;
    }
    .formula-price-grid {
        padding-top: 6px;
        gap: 5px;
    }

    /* Keep price rows stacked (amount above bracket) — readable at narrow widths. */
    .book-form .formula-option--standard .formula-price-row,
    .book-form .formula-option--birthday .formula-price-row {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0;
        padding: 2px 0;
    }
    .book-form .formula-option--standard .fpr-amount,
    .book-form .formula-option--birthday .fpr-amount {
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.1;
    }
    .book-form .formula-option--standard .formula-price-row--best .fpr-amount,
    .book-form .formula-option--birthday .formula-price-row--best .fpr-amount {
        font-size: 0.94rem;
    }
    .book-form .formula-option--standard .fpr-unit {
        display: inline;
        font-size: 0.58rem;
        margin-left: 1px;
        font-weight: 400;
    }
    .book-form .formula-option--standard .fpr-bracket,
    .book-form .formula-option--birthday .fpr-bracket {
        font-size: 0.56rem;
        line-height: 1.15;
        opacity: 0.7;
    }
    .book-form .formula-option--birthday .fpr-unit { display: none; }

    /* Hide non-essential helper bits on the formula step (notes, link) */
    .book-form .formula-note,
    .book-form .min-pricing-notice,
    .book-form .formula-tarifs-link,
    .book-form .format-tabs-section .format-intro-text,
    .book-form .format-tabs-section .format-count-label { display: none !important; }

    /* Mobile-only details panel — recovers the info hidden above for the
       currently selected formula (per-card desc + global note + bday inclusions).
       Only rendered when a card is active (JS sets data-active="1"). */
    .book-form .formula-details-mobile[data-active] {
        display: block;
        margin-top: 10px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        font-size: 0.78rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.75);
    }
    .book-form .formula-details-mobile .fdm-title {
        font-weight: 700;
        font-size: 0.86rem;
        color: #fff;
        margin-bottom: 2px;
    }
    .book-form .formula-details-mobile .fdm-desc {
        color: rgba(255, 255, 255, 0.78);
        margin-bottom: 4px;
    }
    .book-form .formula-details-mobile .fdm-list {
        list-style: none;
        padding: 0;
        margin: 4px 0 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
    }
    .book-form .formula-details-mobile .fdm-list li {
        font-size: 0.74rem;
        color: rgba(255, 255, 255, 0.72);
    }
    .book-form .formula-details-mobile .fdm-note {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.55);
        font-style: italic;
        margin-top: 2px;
    }
    .book-form .formula-details-mobile .fdm-list:empty,
    .book-form .formula-details-mobile .fdm-note:empty,
    .book-form .formula-details-mobile .fdm-desc:empty { display: none; }

    /* Step nav: re-enable on phone (styles.min.css hides it under 768px) and
       compact it horizontally so it doesn't eat too much height.
       Padding-top must stay 0 so the connector line at top:radius aligns
       with the circle's actual center. */
    .book-form .form-steps-navigation {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 0 0.5rem !important;
        margin-top: 0.7rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .book-form .step-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 4px !important;
    }
    .book-form .step-nav-item .step-label { display: none !important; }
    .book-form .step-nav-item .step-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.78rem !important;
    }

    .btn-step-prev, .btn-step-next { padding: 10px 14px !important; font-size: 0.85rem !important; }
}

@media (max-width: 480px) {
    .book-space-tabs { gap: 4px; }
    .book-space-tab { height: 105px !important; }
    .bst-logo img { width: 100% !important; height: auto !important; }
    .bst-city { font-size: 0.76rem; }
    .bst-desc { display: none; }
}

/* Help widget — pin to bottom-right instead of bottom-left */
#helpWidget { left: auto !important; right: 20px !important; }

/* ── Formula step (data-step=0): 6 cards with pricing brackets visible ── */
.formula-group-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 1.25rem 0 0.6rem;
}
.formula-group-title:first-of-type { margin-top: 0.5rem; }
.formula-group-title i {
    margin-right: 0.5em;
    opacity: 0.8;
}

/* The grid wins over any inline display:block JS sets on #birthdayFormulas. */
.book-form .formula-selector--6col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.book-form .formula-option--standard,
.book-form .formula-option--birthday {
    /* Override the global .formula-option min-width:150px / width:100% rules
       that otherwise force each card past 1/3 of the row. */
    min-width: 0 !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 14px 14px 12px;
    gap: 0;
}

.book-form .formula-option--standard .formula-name,
.book-form .formula-option--birthday .formula-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 2px;
}
.book-form .formula-option--standard .formula-desc,
.book-form .formula-option--birthday .formula-desc {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    line-height: 1.35;
    margin-bottom: 10px;
    min-height: 2.4em;
}

.formula-price-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
}
.formula-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}
.formula-price-row .fpr-bracket {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
.formula-price-row .fpr-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.formula-price-row .fpr-unit {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    margin-left: 2px;
}
.formula-price-row--best .fpr-bracket { color: #fff; }
.formula-price-row--best .fpr-amount { color: #fff; font-size: 1rem; }
.formula-price-row--best .fpr-unit { color: rgba(255,255,255,0.7); }

.book-form .formula-option--standard.active .fpr-amount,
.book-form .formula-option--birthday.active .fpr-amount { color: #fff; }
.book-form .formula-option--standard.active .formula-price-row--best .fpr-amount,
.book-form .formula-option--birthday.active .formula-price-row--best .fpr-amount { color: #fff; }

/* Players step — counter, pictograms, mode switch (when in standard
   mode), and live total all stacked centered in a single column. */
.players-row {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}
.players-counter-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.players-counter-col > .players-mode { width: 100%; max-width: 360px; }
.players-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    line-height: 1.2;
    margin-top: 0.2rem;
}
.players-total-label {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.precap-price-amount {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
    transition: transform 0.18s ease;
    line-height: 1.05;
}
.precap-price-amount.bump { transform: scale(1.08); }
@media (max-width: 600px) {
    .players-total-label { font-size: 0.95rem; }
    .precap-price-amount { font-size: 2rem; }
}

/* ── Step 5 + thank-you "Total" display — mirrors the Players-step
   recap card. Shows the full game total in CHF + a "for N players"
   detail underneath. ── */
.price-summary--total { text-align: center; padding: 1.1rem 1rem; }
.price-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.2;
}
.price-total-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.price-total-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
    line-height: 1.05;
    transition: transform 0.18s ease;
}
.price-total-amount.bump { transform: scale(1.08); }
.price-total-detail {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.15rem;
}
@media (max-width: 600px) {
    .price-summary--total { padding: 0.85rem 0.75rem; }
    .price-total-label { font-size: 0.9rem; }
    .price-total-amount { font-size: 2rem; }
    .price-total-detail { font-size: 0.82rem; }
}

/* ── Step 5 venue line — compact "where you'll play" address + Maps link,
   sitting inside the price card just under the total. The whole row is the
   link to Google Maps. Address text stays in sync with the chosen city via
   updateBookVenueRecap() when the destination tabs switch. ── */
.price-venue-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.12rem;
    max-width: 100%;
    margin: 0.55rem auto 0;
    padding: 0.45rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.price-venue-link:hover { border-color: rgba(230, 57, 70, 0.5); background: rgba(230, 57, 70, 0.08); }
.price-venue-link .pvl-name {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: #fff; font-weight: 700;
}
.price-venue-link .pvl-name svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--primary); }
.price-venue-link .pvl-addr { color: rgba(255, 255, 255, 0.72); }

/* ── Post-submit thank-you page — fit inside the height-clamped wrapper
   and scroll its own overflow on small viewports. Without this, the
   ~100dvh wrapper crops the bottom of the recap card (incl. the action
   buttons) on any screen too short for the full content. ── */
.book-wrapper .thank-you-page {
    padding: 1rem 0.75rem;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* When content overflows, align-items: center would clip the top
       and block scroll-up; using margin:auto on the child centers when
       there's room and resolves to 0 otherwise, keeping scroll intact. */
    align-items: stretch;
}
.book-wrapper .thank-you-content {
    padding: 1.5rem 1.25rem;
    margin: auto;
    max-width: 620px;
    width: 100%;
    box-sizing: border-box;
}
.book-wrapper .thank-you-icon { font-size: 3rem; margin-bottom: 0.6rem; }
.book-wrapper .thank-you-title { font-size: 1.55rem; margin-bottom: 0.4rem; }
.book-wrapper .thank-you-message { font-size: 0.92rem; margin-bottom: 1rem; line-height: 1.45; }
.book-wrapper .reservation-summary {
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
    border-radius: 12px;
}
.book-wrapper .summary-title {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
}
.book-wrapper .summary-item {
    padding: 0.45rem 0;
    font-size: 0.9rem;
    gap: 0.6rem;
}
.book-wrapper .summary-label { font-size: 0.88rem; }
.book-wrapper .summary-value { font-size: 0.92rem; text-align: right; }
.book-wrapper .summary-price-block {
    border-top: 2px solid rgba(255, 0, 64, 0.3);
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    text-align: center;
}
.book-wrapper .summary-price-block .price-total-amount { font-size: 1.9rem; }
.book-wrapper .thank-you-actions { gap: 0.65rem; }
.book-wrapper .thank-you-actions .btn-primary,
.book-wrapper .thank-you-actions .btn-secondary {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    min-width: 160px;
}

@media (max-width: 600px) {
    .book-wrapper .thank-you-page { padding: 0.6rem 0.4rem; }
    .book-wrapper .thank-you-content { padding: 1rem 0.85rem; border-radius: 14px; }
    .book-wrapper .thank-you-icon { font-size: 2.4rem; margin-bottom: 0.35rem; }
    .book-wrapper .thank-you-title { font-size: 1.25rem; }
    .book-wrapper .thank-you-message { font-size: 0.82rem; margin-bottom: 0.7rem; }
    .book-wrapper .reservation-summary { padding: 0.7rem 0.85rem; margin-bottom: 0.85rem; }
    .book-wrapper .summary-title { font-size: 0.98rem; margin-bottom: 0.45rem; padding-bottom: 0.4rem; }
    /* Keep rows on a single line — stacking each item doubles vertical space
       and the recap is already tight on phones. */
    .book-wrapper .summary-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem !important;
        padding: 0.35rem 0 !important;
    }
    .book-wrapper .summary-label,
    .book-wrapper .summary-value { font-size: 0.8rem; }
    .book-wrapper .summary-value { text-align: right; max-width: 60%; word-break: break-word; }
    .book-wrapper .summary-price-block { padding-top: 0.7rem; margin-top: 0.45rem; }
    .book-wrapper .summary-price-block .price-total-amount { font-size: 1.6rem; }
    .book-wrapper .summary-price-block .price-total-label { font-size: 0.85rem; }
    .book-wrapper .summary-price-block .price-total-detail { font-size: 0.78rem; }
    /* Keep the two action buttons side-by-side on phones too — stacking
       them vertically is what pushed the secondary off-screen. */
    .book-wrapper .thank-you-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .book-wrapper .thank-you-actions .btn-primary,
    .book-wrapper .thank-you-actions .btn-secondary {
        flex: 1 1 0;
        width: auto !important;
        padding: 0.7rem 0.6rem;
        font-size: 0.82rem;
        min-width: 0 !important;
    }
}

/* ── Thank-you v2: hero + key stats + action buttons. Mirrors the
   confirmation email layout (big date+time, compact stats strip,
   Modifier / Annuler row + full-width "Ajouter au calendrier"). ── */
.thank-you-page.ty-v2 .thank-you-content {
    text-align: center;
    background: rgba(20, 20, 30, 0.85);
    border: 1px solid rgba(255, 0, 64, 0.25);
    border-radius: 18px;
    padding: 2rem 1.75rem;
}
.ty-v2 .ty-tag {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.ty-v2 .ty-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem 0;
    line-height: 1.15;
}
.ty-v2 .ty-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    margin: 0 0 1.4rem 0;
}
.ty-v2 .ty-subtitle strong { color: #fff; }
.ty-v2 .ty-hero {
    background: linear-gradient(135deg, rgba(255,0,64,0.20) 0%, rgba(255,0,64,0.06) 100%);
    border: 1px solid rgba(255,0,64,0.4);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    margin-bottom: 1rem;
}
.ty-v2 .ty-hero-date {
    font-size: 0.85rem;
    color: #ffd0db;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.ty-v2 .ty-hero-time {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.6rem;
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}
.ty-v2 .ty-hero-space {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 0.35rem;
}
/* Venue address + open-in-Google-Maps card on the confirmation page. */
.ty-v2 .ty-venue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    background: rgba(26, 26, 26, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.2rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ty-v2 .ty-venue:hover { border-color: rgba(255,0,64,0.4); background: rgba(255,0,64,0.06); }
.ty-v2 .ty-venue-icon { display: inline-flex; }
.ty-v2 .ty-venue-icon svg { width: 18px; height: 18px; color: var(--primary-color); flex: 0 0 auto; }
.ty-v2 .ty-venue-text { display: flex; flex-direction: column; text-align: left; line-height: 1.3; min-width: 0; }
.ty-v2 .ty-venue-addr { font-size: 0.9rem; color: #fff; font-weight: 600; }
.ty-v2 .ty-venue-cta { font-size: 0.78rem; color: var(--primary-color); font-weight: 600; }
.ty-v2 .ty-stats {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.ty-v2 .ty-stat {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(26, 26, 26, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.8rem 0.5rem;
}
.ty-v2 .ty-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.ty-v2 .ty-stat-value {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
}
.ty-v2 .ty-actions { margin-bottom: 1rem; }
.ty-v2 .ty-actions-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.ty-v2 .ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.4px;
    box-sizing: border-box;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ty-v2 .ty-btn:hover { transform: translateY(-1px); }
.ty-v2 .ty-btn-outline-red {
    flex: 1 1 0;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.ty-v2 .ty-btn-outline-red:hover {
    background: rgba(255, 0, 64, 0.1);
}
.ty-v2 .ty-btn-outline-white {
    flex: 1 1 0;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
}
.ty-v2 .ty-btn-outline-white:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.4);
}
/* Standalone download button under the calendar CTA (outside the flex row) */
.ty-v2 .ty-btn-download {
    display: flex;
    width: 100%;
    margin-top: 0.6rem;
}
.ty-v2 .ty-btn-primary {
    display: block;
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}
.ty-v2 .ty-btn-primary:hover {
    background: #d6002f;
    border-color: #d6002f;
}
.ty-v2 .ty-actions-help {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.7rem;
    line-height: 1.5;
}
.ty-v2 .ty-home-link {
    display: inline-block;
    margin-top: 0.4rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 1px;
}
.ty-v2 .ty-home-link:hover { color: #fff; border-color: #fff; }

@media (max-width: 600px) {
    .thank-you-page.ty-v2 .thank-you-content { padding: 1.3rem 1rem; border-radius: 14px; }
    .ty-v2 .ty-title { font-size: 1.4rem; }
    .ty-v2 .ty-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
    .ty-v2 .ty-hero { padding: 0.9rem 0.75rem; margin-bottom: 0.8rem; }
    .ty-v2 .ty-hero-date { font-size: 0.75rem; letter-spacing: 1.5px; }
    .ty-v2 .ty-hero-time { font-size: 2.1rem; }
    .ty-v2 .ty-hero-space { font-size: 0.85rem; }
    .ty-v2 .ty-stats { gap: 0.4rem; margin-bottom: 0.9rem; }
    .ty-v2 .ty-stat { padding: 0.6rem 0.3rem; }
    .ty-v2 .ty-stat-label { font-size: 0.62rem; letter-spacing: 0.8px; }
    .ty-v2 .ty-stat-value { font-size: 0.88rem; }
    .ty-v2 .ty-btn { font-size: 0.85rem; padding: 0.7rem 0.6rem; }
    .ty-v2 .ty-actions-help { font-size: 0.72rem; }
}