/* ═══ Rendez-vous en ligne (écrans prestataire) ═══
   Les pages publiques portent leur propre feuille (booking/public/_layout). */

/* Heures d'ouverture : un jour par ligne, interrupteur + deux plages */
.booking-week { display: grid; gap: 0.25rem; }
.booking-day {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ep-border, #ECECEC);
}
.booking-day:last-child { border-bottom: 0; }
.booking-ranges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.booking-range { display: inline-flex; align-items: center; gap: 0.4rem; }
.booking-range .form-control { width: 6.75rem; }
.booking-day-closed { display: none; color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; }
.booking-day:has(.form-check-input:not(:checked)) .booking-ranges { display: none; }
.booking-day:has(.form-check-input:not(:checked)) .booking-day-closed { display: inline; }
@media (max-width: 575px) { .booking-day { grid-template-columns: 1fr; gap: 0.25rem; } }

.booking-code {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #1A1A1F;
    color: #F4EFE6;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Formulaire d'un type : panneaux, champs, choix de lieu, aperçu */
.booking-type-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
@media (max-width: 991px) { .booking-type-layout { grid-template-columns: 1fr; } .booking-preview { order: -1; } }
.booking-settings > .booking-panel + .booking-panel,
.booking-type-layout .booking-panel + .booking-panel { margin-top: 1rem; }
.booking-panel { background: var(--bs-body-bg, #fff); border: 1px solid var(--ep-border, #ECECEC); border-radius: 12px; }
.booking-panel-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--ep-border, #ECECEC); }
.booking-panel-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: #F4EFE6; color: #8E7339; flex: none; }
.booking-panel-title { flex: 1; min-width: 0; }
.booking-panel-title h2 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.booking-panel-title p { margin: 0; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); }
.booking-panel-body { padding: 1.1rem; }
.booking-field + .booking-field { margin-top: 1rem; }
.booking-field > label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.booking-field small { display: block; margin-top: 0.25rem; color: var(--bs-secondary-color, #6c757d); font-size: 0.78rem; }
.booking-optional { font-weight: 400; color: var(--bs-secondary-color, #6c757d); font-size: 0.75rem; margin-left: 0.25rem; }
.booking-url-prefix { font-size: 0.8rem; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }

.booking-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.booking-duration-preset { border: 1px solid var(--ep-border, #D9D4C9); background: transparent; border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.booking-duration-preset.is-active { background: #1A1A1F; border-color: #1A1A1F; color: #fff; }
.booking-duration-custom { width: 8rem; }

.booking-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; }
.booking-choice { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; border: 1px solid var(--ep-border, #D9D4C9); border-radius: 10px; cursor: pointer; }
.booking-choice input { position: absolute; opacity: 0; pointer-events: none; }
.booking-choice > .bi { font-size: 1.2rem; color: #8E7339; }
.booking-choice small { margin: 0; font-size: 0.75rem; line-height: 1.3; }
.booking-choice:has(input:checked) { border-color: #8E7339; box-shadow: 0 0 0 2px rgba(142, 115, 57, 0.2); background: #FAF7F2; }
.booking-choice:has(input:focus-visible) { outline: 2px solid #8E7339; outline-offset: 2px; }

.booking-rules { display: grid; gap: 0.9rem; }
.booking-rule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.booking-rule-text { display: flex; flex-direction: column; min-width: 0; }
.booking-rule-text label { font-size: 0.875rem; font-weight: 600; margin: 0; }
.booking-rule-text span { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); }
.booking-rule-input { width: 9rem; flex: none; }

.booking-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.booking-alert { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.875rem; }
.booking-alert.is-error { background: #FBE9EC; color: #8E2234; }

.booking-preview { position: sticky; top: 1rem; }
.booking-preview-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color, #6c757d); margin-bottom: 0.5rem; }
.booking-preview-card { background: #fff; border: 1px solid var(--ep-border, #ECECEC); border-radius: 14px; padding: 1.25rem; box-shadow: 0 8px 24px rgba(26, 26, 31, 0.06); }
.booking-preview-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8E7339; margin: 0 0 0.4rem; }
.booking-preview-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.booking-preview-card h3.is-placeholder { color: var(--bs-secondary-color, #9a9a9a); }
.booking-preview-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); margin: 0; }
.booking-preview-desc { font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); margin: 0.75rem 0 0; white-space: pre-line; }
.booking-preview-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.booking-preview-slots span { padding: 0.3rem 0.7rem; border: 1px solid #E9E4DA; border-radius: 8px; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.booking-preview-url { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); overflow-wrap: anywhere; }