/* ===========================================
   БРОНИРОВАНИЕ: схема площадки слева, карточка брони справа

   Схема — инлайновый SVG (templates/_venue-map.html). Все её цвета живут
   здесь и берутся из токенов (--map-*): в разметке карты цветов нет,
   поэтому состояние стола переключается одним классом.
   =========================================== */

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: start;
}

.booking-map-col {
    min-width: 0;
}

/* ─── Панель над схемой: дата и легенда ─────────────────────────────── */

.booking-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 20px;
}

/* `display:flex` из правила выше перебивает браузерное `[hidden]{display:none}`,
   поэтому при ошибке загрузки тулбар оставался на экране живым, хотя JS его
   «спрятал». Атрибут hidden обязан гасить блок явно. */
.booking-toolbar[hidden] { display: none; }

.booking-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}

/* Метка «необязательно» рядом со словом «Время» — тем же кеглем, но тише:
   это уточнение, а не второй заголовок. */
.field__opt {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-on-surface-variant);
    opacity: 0.75;
}

.booking-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-range__dash {
    color: var(--color-on-surface-variant);
}

.booking-range .ui-select__btn { min-width: 96px; }

.booking-toolbar__field + .booking-toolbar__field {
    margin-right: auto;
}

.booking-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
}

.booking-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-label-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}

.booking-legend__item::before {
    content: '';
    width: 14px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--map-table-line);
    background: var(--color-surface-lowest);
}

.booking-legend__item--busy::before {
    background: var(--map-table-busy);
    border-color: var(--map-table-busy-line);
}

.booking-legend__item--sel::before {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* ─── Обёртка схемы ─────────────────────────────────────────────────── */

.booking-map {
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--map-deck);
}

/* На узком экране схему не ужимаем до нечитаемого — её листают вбок.
   Скролл живёт внутри обёртки, страница по горизонтали не едет. */
.booking-map__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.venue-map {
    display: block;
    width: 100%;
    height: auto;
}

.booking-map__hint {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-on-surface-variant);
}

/* ─── Свои дропдаун и календарь ─────────────────────────────────────────
   Нативные <select> и <input type="date"> рисует операционная система:
   тёмный список macOS и англоязычный календарь Chrome выглядели чужими
   посреди кремово-бордовой страницы, и стилями это не лечится. Поэтому
   контролы собраны сами (booking.js), а тут — их вид.
   Классы `ui-*` намеренно не привязаны к брони: понадобятся на другой
   странице — переносим блок в components/, а не копируем.
   ──────────────────────────────────────────────────────────────────────── */

.ui-select,
.ui-date {
    position: relative;
}

/* Без этого мобильный WebKit заливает нажатую кнопку системным голубым —
   поверх кремово-бордовой карточки это выглядит как чужой элемент.
   Своя обратная связь на нажатие есть: :hover/.is-open меняют рамку. */
.ui-select__btn,
.ui-select__opt,
.ui-date__btn,
.ui-date__nav,
.ui-date__day,
.map-table {
    -webkit-tap-highlight-color: transparent;
}

.ui-select__btn,
.ui-date__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    font-weight: 600;
    color: var(--color-on-surface);
    background: var(--color-surface-lowest);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ui-select__btn:hover,
.ui-date__btn:hover {
    border-color: var(--color-secondary);
}

.ui-select__btn:focus-visible,
.ui-date__btn:focus-visible {
    outline: none;
    border-color: var(--color-secondary-container);
    box-shadow: 0 0 0 3px rgba(252, 143, 52, 0.18);
}

.ui-select.is-open .ui-select__btn,
.ui-date.is-open .ui-date__btn {
    border-color: var(--color-secondary);
}

/* Значение не выбрано (в диапазоне времени это норма — он необязателен) */
.ui-select.is-empty .ui-select__value {
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.ui-select.is-disabled .ui-select__btn {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-select__chev {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--color-secondary);
    transition: transform var(--transition);
}

.ui-select.is-open .ui-select__chev,
.ui-date.is-open .ui-select__chev {
    transform: rotate(180deg);
}

.ui-select__list {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    list-style: none;
    background: var(--color-surface-lowest);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
}

.ui-select__list[hidden] { display: none; }

.ui-select__opt {
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    color: var(--color-on-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

.ui-select__opt:hover,
.ui-select__opt:focus-visible {
    outline: none;
    background: var(--color-secondary-fixed);
}

.ui-select__opt.is-on {
    background: var(--color-primary-container);
    color: var(--color-on-primary);
    font-weight: 600;
}

/* ─── Календарь ─────────────────────────────────────────────────────── */

.ui-date__btn { min-width: 230px; }

.ui-date__value { text-transform: none; }

.ui-date__pop {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + 6px);
    left: 0;
    width: 288px;
    padding: 14px;
    background: var(--color-surface-lowest);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
}

.ui-date__pop[hidden] { display: none; }

.ui-date__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.ui-date__month {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-container);
}

.ui-date__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--color-primary-container);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-full);
    background: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ui-date__nav svg { width: 14px; height: 14px; }

.ui-date__nav:hover:not([disabled]) {
    background: var(--color-primary-container);
    color: #fff;
}

.ui-date__nav[disabled] {
    opacity: 0.3;
    cursor: default;
}

.ui-date__wd,
.ui-date__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ui-date__wd {
    margin-bottom: 4px;
}

.ui-date__wd span {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-secondary);
}

.ui-date__day {
    height: 34px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-on-surface);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ui-date__day:hover:not(.is-off) {
    background: var(--color-secondary-fixed);
}

.ui-date__day:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

.ui-date__day.is-off {
    color: var(--color-outline);
    opacity: 0.4;
    cursor: default;
}

.ui-date__day.is-on {
    background: var(--color-primary-container);
    color: #fff;
    font-weight: 700;
}

/* ─── Подложка схемы ────────────────────────────────────────────────── */

.map-ground { fill: var(--map-ground); }
.map-water { fill: var(--map-water); }
.map-deck { fill: var(--map-deck); }

.map-divider {
    fill: none;
    stroke: var(--map-line);
    stroke-width: 5;
    stroke-linecap: round;
}

.map-fence {
    fill: none;
    stroke: var(--map-line);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 0 13;
}

.map-arrow {
    fill: none;
    stroke: var(--map-label);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Шатёр в центре: полотно в цветах бренда — бордо и кремовый */
.map-tent__base {
    fill: var(--color-surface-lowest);
    stroke: var(--color-primary-container);
    stroke-opacity: 0.35;
    stroke-width: 2;
}

.map-tent use {
    fill: var(--color-primary-container);
    fill-opacity: 0.75;
}

.map-tent__hub {
    fill: var(--color-surface-lowest);
    stroke: var(--color-primary-container);
    stroke-opacity: 0.25;
}

/* Постройки: бары и WC */
.map-object rect {
    fill: var(--map-object);
    stroke: rgba(74, 14, 14, 0.08);
}

.map-object__label {
    fill: var(--map-label);
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.08em;
    text-anchor: middle;
}

/* Подписи зон */
.map-zone {
    fill: var(--map-label);
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.1em;
    text-anchor: middle;
}

.map-zone--dj {
    font-size: 44px;
    letter-spacing: 0.02em;
}

.map-zone--sm {
    font-size: 24px;
}

.map-gate {
    fill: var(--map-label);
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.08em;
}

/* ─── Столы ─────────────────────────────────────────────────────────── */

.map-table__hit { fill: transparent; }

.map-table__top,
.map-table__seat {
    fill: currentColor;
    stroke: none;
}

/* Стулья светлее столешницы, но с контуром: у свободного стола заливка белая,
   и без обводки они пропадали на кремовом настиле. */
.map-table__seat {
    fill-opacity: 0.6;
    stroke: var(--map-table-line);
    stroke-opacity: 0.45;
    stroke-width: 1;
}

.map-table__top {
    stroke: var(--map-table-line);
    stroke-width: 1.5;
}

/* 24 в системе координат карты — это 12–17px на экране, в зависимости от
   ширины колонки. Меньше делать нельзя: номер стола перестаёт читаться. */
.map-table__no {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}

/* Состояние вешает booking.js. До ответа сервера (и если ответа не будет
   вовсе) стол обязан выглядеть нейтральным: currentColor без состояния
   наследуется от цвета текста страницы, и схема встречала чёрными плашками. */
.map-table { color: var(--map-table-busy); }
.map-table .map-table__no { fill: var(--map-table-busy-text); }

/* Свободен: белая столешница, бордовый номер — читается как «нажми меня» */
.map-table.is-free {
    color: var(--color-surface-lowest);
    cursor: pointer;
}

.map-table.is-free .map-table__no { fill: var(--color-primary-container); }

.map-table.is-free:hover { color: var(--color-secondary-fixed); }

/* Свой фокус вместо системного: браузер рисует прямоугольную рамку вокруг всей
   зоны нажатия (64×64), и после обычного клика по столу она выглядит как ошибка
   вёрстки. Убираем у :focus, возвращаем видимость только для :focus-visible —
   клавиатурная навигация не должна остаться без индикатора. */
.map-table:focus { outline: none; }

.map-table:focus-visible .map-table__top {
    stroke: var(--color-secondary);
    stroke-width: 3;
}

/* Занят: приглушённый, но номер всё равно читаемый */
.map-table.is-busy {
    color: var(--map-table-busy);
    cursor: default;
}

.map-table.is-busy .map-table__top { stroke: var(--map-table-busy-line); }
.map-table.is-busy .map-table__no { fill: var(--map-table-busy-text); }

/* Выбран: единственный акцент на схеме */
.map-table.is-selected {
    color: var(--color-secondary);
    cursor: pointer;
}

.map-table.is-selected .map-table__top {
    stroke: var(--color-on-secondary-container);
    stroke-width: 2;
}

.map-table.is-selected .map-table__no { fill: #fff; }

/* Данные не загрузились — схема остаётся картинкой */
.booking-map.is-error .map-table { cursor: default; }

/* ─── Карточка брони ────────────────────────────────────────────────── */

.booking-panel {
    display: flex;
    flex-direction: column;
    padding: 28px;
    position: sticky;
    top: 96px;
}

.booking-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.booking-step[hidden] { display: none; }

.booking-panel__title { margin-top: -4px; }

/* Шапка карточки: номер стола и крестик «выбрать другой». Крестик прижат к
   верху — заголовок бывает в две строки, и по центру он бы уезжал вниз. */
.booking-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.booking-panel__head .booking-panel__title {
    min-width: 0;
    flex: 1;
}

.booking-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin-top: -2px;
    color: var(--color-primary-container);
    background: none;
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.booking-panel__close svg { width: 15px; height: 15px; }

.booking-panel__close:hover {
    background: var(--color-primary-container);
    border-color: var(--color-primary-container);
    color: #fff;
}

.booking-panel__close:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Вводный абзац панели: 15px вместо 12px — раньше карточка состояла из
   россыпи мелких надписей разного кегля и читалась как мелкий шрифт договора. */
.booking-panel__lead {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 23px;
    color: var(--color-on-surface-variant);
}

.booking-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid var(--frame-border);
    border-bottom: 1px solid var(--frame-border);
}

.booking-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-height: 24px;
}

/* Строка со своим контролом (Гостей) — выравниваем по центру, у кнопки
   дропдауна нет базовой линии текста. */
.booking-facts__row--control { align-items: center; }

.booking-facts__row--control dd .ui-select__btn {
    min-width: 86px;
    min-height: 38px;
    padding: 6px 12px;
}

/* Диапазон времени в карточке: две кнопки должны уместиться рядом с подписью
   в колонке 360px, поэтому кегль и отступы меньше, чем в тулбаре. */
.booking-range--sm { gap: 6px; }

.booking-range--sm .ui-select__btn {
    min-width: 78px;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 15px;
    gap: 6px;
}

.booking-range--sm .ui-select__chev { width: 12px; height: 12px; }

.booking-range--sm .ui-select__list { left: auto; right: 0; }

/* Список «Гостей» прижимаем к правому краю: сама кнопка стоит справа */
.booking-facts__row--control .ui-select__list {
    left: auto;
    right: 0;
}

.booking-facts dt {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-on-surface-variant);
}

.booking-facts dd {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-on-surface);
    text-align: right;
}

.booking-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
    color: var(--color-on-surface-variant);
}

.booking-panel__note {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19px;
    color: var(--color-on-surface-variant);
    margin-top: -6px;
}

/* ─── Три пояснения под схемой ──────────────────────────────────────── */

.booking-extra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--frame-border);
}

.booking-extra__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Узкие экраны ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .booking-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .booking-panel {
        position: static;
        padding: 24px;
    }
}

@media (max-width: 899px) {
    /* Ужать схему до ширины телефона нельзя — столы становятся по 8px и в них
       не попасть пальцем. Держим минимальную ширину и листаем вбок. */
    .venue-map {
        width: 760px;
        max-width: none;
    }
}

@media (max-width: 599px) {
    .booking-toolbar__field,
    .booking-range { width: 100%; }

    .booking-toolbar__field + .booking-toolbar__field { margin-right: 0; }

    .ui-date__btn { min-width: 0; }

    .booking-range .ui-select { flex: 1; }

    .booking-range .ui-select__btn { min-width: 0; }

    /* Поп-ап календаря на узком экране прижимаем к левому краю поля и
       ограничиваем шириной вьюпорта, иначе он вылезает за экран. */
    .ui-date__pop {
        width: min(288px, calc(100vw - 32px));
    }
}

@media (max-width: 767px) {
    .booking-extra {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (min-width: 900px) {
    .booking-map__hint { display: none; }
}