/* Écran : booking — parcours /reserver (une page, étapes qui se déverrouillent).
   Réutiliser les tokens et composants de app.css / admin.css (ne pas redéfinir de token). */

/* ---------- En-tête de page et d'étape ---------- */

.bk-head { padding-top: 16px; }
.bk-head h1 { font: var(--t-large); }
.bk-head__sub { font: var(--t-sub); color: var(--label-2); margin: 4px 0 0; }
@media (min-width: 1024px) { .bk-head { padding-top: 24px; } }

.booking { padding-top: 20px; }
.booking__main > .bk-step + .bk-step { margin-top: 44px; }
.bk-step__head { margin: 0 0 16px; }
.bk-step__count { font: var(--t-foot); color: var(--label-2); margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.bk-step.is-done > .bk-step__head .bk-step__count::after {
    content: ""; width: 10px; height: 6px; border: solid var(--green); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg);
}
.bk-step__head h2 { font: var(--t-title2); }
.bk-gap { margin-top: 24px; }
.bk-gap-sm { margin-top: 12px; }
.bk-intro { margin: 0 16px 0; }
.bk-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking .choice__sub { display: block; }
.booking .choice__price { color: var(--label-2); font-variant-numeric: tabular-nums; }
/* Prix de la formule : l'information principale de la rangée (« Au choix » reste secondaire) */
.booking #services .choice__price:not(.choice__price--text) { color: var(--label); }

/* Séparateurs alignés sur le texte (après la coche ronde) */
.booking .group > .choice ~ .choice::before { left: 50px; }

/* ---------- 1. Véhicule ---------- */

.bk-mode { margin-bottom: 20px; }
.bk-mode .seg { display: flex; width: 100%; }
.bk-search { position: relative; display: flex; gap: 8px; align-items: center; }
.bk-search .input { flex: 1; min-width: 0; background-color: var(--surface); }
.public .bk-search .input { box-shadow: var(--shadow-card); }
.public .bk-search .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.bk-search--icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--label-2); pointer-events: none; z-index: 1; }
.bk-search--icon .input { padding-left: 40px; }
.bk-search .btn { flex: none; }
.bk-search input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
.bk-unknown { margin: 4px 12px 0; }
.bk-unknown .link-btn { min-height: var(--hit); padding: 0 4px; font: var(--t-sub); }
.bk-or { margin-top: 24px; }
.car-results__empty { padding: 12px 16px 4px; }
.car-result--action { color: var(--brand-text); justify-content: flex-start; font-weight: 400; }
.car-results__empty + .car-result--action::before { display: none; }

.bk-edit { flex: none; color: var(--brand-text); font: var(--t-body); }
.btn.bk-edit { min-height: var(--hit); padding: 0 4px; margin: -8px -4px -8px 0; font-weight: 400; }
#size-row .item__sub { color: var(--label); font: var(--t-body); margin-top: 0; }
#size-row .item__title { font: var(--t-foot); color: var(--label-2); }
#car-cat { margin-top: 24px; }
#car-picked + #car-cat { margin-top: 24px; }

/* ---------- 2. Intérieur ---------- */

.bk-seg-row { padding: 8px 16px; }
.bk-seg-row .seg { display: flex; width: 100%; }

/* ---------- 3. Prestation ---------- */

.bk-included { margin-top: 12px; }
.booking details.more > summary { font: var(--t-body); }
.booking details.more[open] > :not(summary) { position: relative; }
.booking details.more[open] > :not(summary)::before {
    content: ""; position: absolute; top: 0; left: var(--sep-inset); right: 0; border-top: var(--hairline) solid var(--separator);
}
#included-list .item, .bk-more > * { position: relative; }
#included-list .item + .item::before, .bk-more > :not([hidden]) ~ :not([hidden])::before {
    content: ""; position: absolute; top: 0; left: var(--sep-inset); right: 0; border-top: var(--hairline) solid var(--separator);
}
#included-list .item__title { font: var(--t-sub); }
#included-list .item { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }

/* ---------- 4. Créneau ---------- */

.bk-cal .cal-head { margin: -4px -8px 8px; }
.bk-cal .cal-head .btn { min-height: var(--hit); min-width: var(--hit); padding: 0; border-radius: 50%; }
.bk-cal .cal-head .btn[disabled] { background: transparent; }
.bk-cal .cal-head .btn::after { display: none; }
.cal-skel { border-radius: 50%; aspect-ratio: 1; min-height: 0; max-width: 44px; margin: 0 auto; width: 100%; }
.slots { margin-top: 20px; }
.slots:empty { display: none; }
.slots__next { margin-top: 12px; min-height: var(--hit); }
.slots__day { font: var(--t-headline); color: var(--label); margin: 0 0 12px 4px; }

/* ---------- 5. Coordonnées ---------- */

.bk-form .frow--stack { padding-top: 9px; padding-bottom: 9px; }
.bk-form .frow--stack .input { font: var(--t-body); min-height: 28px; padding: 3px 0; }
.bk-form .frow--stack .textarea { padding: 4px 0; min-height: 72px; font: var(--t-body); }
.bk-form .input[readonly] { color: var(--label-2); }
.bk-form .frow.is-invalid .frow__label { color: var(--red); }
.frow__error { font: var(--t-foot); color: var(--red); }
.bk-form .frow:not(.frow--stack) .frow__error { flex-basis: 100%; }
#veh-more { position: relative; }
.bk-form .frow .input.is-invalid, .bk-form .frow .textarea.is-invalid { box-shadow: none; }
.booking .frow--stack .input--code { font: 600 28px/34px var(--font-mono); text-align: center; letter-spacing: .35em; }
.booking .frow--stack .input--code::placeholder { letter-spacing: normal; font-weight: 400; }

.bk-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bk-pair--cp { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.bk-pair > * { position: relative; min-width: 0; }
.bk-pair > * + *::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; border-left: var(--hairline) solid var(--separator); }
@media (max-width: 339px) {
    .bk-pair { grid-template-columns: minmax(0, 1fr); }
    .bk-pair > * + *::before { top: 0; bottom: auto; left: var(--sep-inset); right: 0; border-left: 0; border-top: var(--hairline) solid var(--separator); }
}
#returning .link-btn { min-height: var(--hit); font: var(--t-foot); }
#returning { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 0; }

/* Récapitulatif avant « Réserver » (< 1024 px) */
.bk-recap__row .item__sub { margin: 0 0 1px; font: var(--t-foot); }
.bk-recap__row .item__body { display: flex; flex-direction: column; }
.bk-price .bk-price__body { padding: 8px 16px 12px; }
.bk-total .item__title { font: var(--t-headline); }
.bk-total .item__value { color: var(--label); font: var(--t-headline); max-width: none; }
.bk-error { margin: 0 16px 12px; }
.bk-policy { margin-top: 16px; }
.bk-submit { display: none; margin-top: 24px; }

/* Colonne récapitulatif : ordinateur seulement */
.booking__aside { display: none; }
.summary { border-radius: var(--radius); }
.summary h3 { font: var(--t-title3); }
.summary__lines { font: var(--t-sub); }
.summary__meta { font: var(--t-foot); }

@media (min-width: 1024px) {
    .booking__aside { display: block; }
    .bk-recap { display: none; }
    .bk-submit { display: block; }
    .booking .summary__inc { font: var(--t-foot); }
}

/* Barre du bas : pas de réserve quand elle est masquée */
.bk-bar .btn { min-width: 140px; }
.bk-bar__total strong { font: var(--t-title3); }

@media (hover: hover) and (pointer: fine) {
    .bk-recap__row:hover, #size-row:hover { background: var(--fill); }
}
.bk-bar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.cal-day.is-selected.is-available { background: var(--brand); color: var(--on-brand); }

/* Étape 5 : raccourci « Déjà client ? » et véhicule hors liste en tête du formulaire */
#returning { margin-bottom: 8px; }
#id-code:not([hidden]) { margin-bottom: 20px; }
#id-code .bk-gap-sm { margin-top: 0; }
#veh-manual > .section__title { margin-top: 0; }
#veh-manual:not([hidden]) { margin-bottom: 24px; }

/* Message d'erreur sur la ligne du libellé (« Prénom … Requis ») : la rangée ne grandit pas */
.bk-form .frow--stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; }
.bk-form .frow--stack > .frow__label { grid-column: 1; grid-row: 1; }
.bk-form .frow--stack > .input, .bk-form .frow--stack > .textarea { grid-column: 1 / -1; grid-row: 2; }
.bk-form .frow--stack > .frow__error { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }

/* Sous-titres des tâches : 2 lignes plutôt qu'une coupure au milieu d'un mot */
.booking #options .choice__sub, .booking #extras .choice__sub {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
}

/* iPad : même colonne lisible que la barre du bas (bords alignés, prix proches des libellés) */
@media (min-width: 700px) and (max-width: 1023px) {
    .bk-head, .booking { max-width: calc(var(--readable) + 2 * var(--gutter)); margin-inline: auto; }
}

/* ---------- Conditions (CGV, exécution anticipée, photos) — partials/booking_consents.php ---------- */

.bk-consents { margin-top: 24px; }
.bk-consents .choice__sub { display: block; }
.bk-consents .choice__sub a { position: relative; color: var(--brand-text); }
.bk-consents .choice__sub a::after { content: ""; position: absolute; inset: -12px -6px; }
#consent-express .choice__title { font: var(--t-sub); }
#consent-express .choice__sub { font: var(--t-foot); margin-top: 4px; }
.bk-consents .choice.is-invalid .choice__mark { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.bk-consents__error { margin: var(--header-gap) 16px 0; }
.bk-consents + .bk-submit { margin-top: 24px; }
/* Barre du bas, dernière étape : le libellé légal « Réserver avec obligation de paiement »
   passe sur deux lignes au lieu de déborder de l'écran (iPhone 390 px) */
.bk-bar__total { flex: none; }
.bk-bar .btn { flex: 0 1 auto; min-width: 140px; max-width: 280px; margin-left: auto; white-space: normal; text-align: center; line-height: 20px; padding: 4px 12px; }