/* ═══ menu-zone:begin ═══════════════════════════════════════════════════════════════════════════════════════
 * Доставка по зонам: бланк (шаг 4 плана, docs/delivery-spec.md, версия 2). ОТДЕЛЬНЫЙ файл, чтобы страницы без зон не несли этих байт: подключается из `menu.php` только там, где режим действует. То, что гость видит ДО нажатия «Я здесь» (шторка с картой — в собранном `menu-guest-delivery.js`, свои стили).
 * Всё ниже действует только на странице, где режим зон включён (`.menu-order-zones`, `.menu-cart-zones`, `.menu-zone*`).
 *
 * ⚠️ ЦВЕТА — только переменные темы заведения. Правила (проверка `tools/check_guest_delivery_ui_test.php`, все пять тем, текст не меньше 4,5:1, границы не меньше 3:1); с 10.10.2026 прежние правила бланка в `menu-page.css` живут по тем же токенам, областных дублей здесь больше нет:
 *   · текст — `--menu-text` (на фоне и на плашке) или `--menu-on-accent` (на акценте); второй уровень — смесь с фоном (`--mz-soft`), НЕ `--menu-muted`: у `craft` он даёт 3,8:1;
 *   · акцент — только заливкой (на светлой теме акцентом-текстом он даёт 3,2:1);
 *   · границы — смесь не менее 60 % текста с фоном (`--mz-line`).
 * Прежний вид бланка (`.menu-order-input`, `.menu-order-option`, `.menu-order-warning`, `.menu-cart-action-main`) приведён к этим токенам в `menu-page.css` для ВСЕХ страниц (решение владельца).
 */
/* `--mz-soft` и `--mz-line` объявлены в `menu-page.css` на `.menu-cart` (для ВСЕХ страниц): граница полей, плейсхолдер, кнопки и «мягкий» текст бланка берут их оттуда */
.menu-order-zones .menu-order-option {
    min-height: 44px;
}

/* Блок доставки не обведён и не залит целиком: поля внутри — заливкой (задача 25) */
.menu-zone {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--menu-text);
}

.menu-zone-choose {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-zone-summary,
.menu-zone-privacy {
    margin: 0;
    color: var(--mz-soft);
    font-size: .85rem;
}

/* Строка про хранение данных — юридическая, поэтому остаётся, но мелко и внизу блока: 11,5 px, одной строкой на 375 (текст словаря сокращён, «Подробнее» следом) */
.menu-zone-privacy {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
}

.menu-zone-btn {
    min-height: 48px;
    padding: .5rem 1rem;
    border: 0;
    border-radius: .75rem;
    background: var(--mz-fill);
    color: var(--menu-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.menu-zone-btn-main {
    background: var(--menu-accent);
    color: var(--menu-on-accent);
}

.menu-zone-btn:focus-visible,
.menu-zone-change:focus-visible,
.menu-zone-embed-here:focus-visible,
.menu-zone-embed-tap:focus-visible,
.menu-zone-quiet:focus-visible,
.menu-co-link:focus-visible,
.menu-zone-input:focus-visible,
.menu-zone-privacy a:focus-visible {
    outline: 3px solid var(--menu-text);
    outline-offset: 2px;
}

.menu-zone-chosen {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Превью карты и поверх него «0,5 км · 5 ₾» и «Изменить» (задача 25): карта светлая, плашки — заливкой темы и её текстом */
.menu-zone-mini-wrap {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
}

.menu-zone-mini {
    height: 132px;
    background: #e8eaed;
}

/*
 * Карта сразу (задача 25д): карточка той же высоты, что превью выбранной точки (132 px с задачи 25е, была 150), без рамок. Центр — заведение, булавка в центре; на карточке «Я здесь» (геопозиция — только по нажатию) и подсказка
 * «Нажмите, чтобы указать точку». Сама встроенная карта неподвижна и событий не ловит (`pointer-events: none`): страница по ней прокручивается как обычно, а нажатие по карточке открывает карту на весь
 * экран. Карта светлая, плашки на ней — заливка и текст темы (контраст темы, а не карты); подпись поставщика карты (внизу справа) ничем не закрыта: нажатие по карточке не доходит до последних 22 px.
 */
.menu-zone-embed {
    position: relative;
    isolation: isolate;
    height: 132px;
    border-radius: .75rem;
    overflow: hidden;
    background: #e8eaed;
    touch-action: pan-y;
}

/* z-index: 0 — карта (её панели Leaflet со своими z-index до 700) живёт в своём слое и не перекрывает булавку и плашки */
.menu-zone-embed-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.menu-zone-embed-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 34px;
    height: 44px;
    margin: -44px 0 0 -17px;
    pointer-events: none;
}

.menu-zone-embed-pin svg {
    display: block;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

.menu-zone-embed-tap {
    position: absolute;
    inset: 0 0 22px 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

/*
 * Плашки ПОВЕРХ карты (задача 25з, 17.10.2026): подсказка, «Я здесь», «≈ 1,2 км · ≈ 5,00 ₾», «Изменить». Плитки OpenStreetMap светлые при любой теме меню,
 * поэтому плашка от темы НЕ зависит: белая (0,94), текст #1b1b1b (контраст с белым ≈ 16:1), угол 10 px, тень и тонкий контур. Те же значения — у плашек окна
 * карты (`frontend/guest/delivery/style.css`): сверяет `check_guest_delivery_ui_test`. Токены темы (`--menu-bg`, `--menu-text`) здесь не нужны.
 */
.menu-zone-embed-hint,
.menu-zone-embed-here,
.menu-zone-line,
.menu-zone-change {
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    color: #1b1b1b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

/* Кнопки со значком ПЕРЕД текстом (16 px, цвет текста); цель касания не ниже 44 px */
.menu-zone-embed-here,
.menu-zone-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
}

.menu-zone-embed-here .menu-icon,
.menu-zone-change .menu-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* Кольцо фокуса на светлой плашке — тёмное (кольцо цвета темы на тёмной теме растворилось бы в светлой карте) */
.menu-zone-embed-here:focus-visible,
.menu-zone-change:focus-visible {
    outline-color: #1b1b1b;
}

/* Плашки не заходят в середину карточки: там булавка (каждая не шире половины минус место под значок) */
.menu-zone-embed-hint,
.menu-zone-embed-here {
    position: absolute;
    top: .5rem;
    z-index: 4;
}

.menu-zone-embed-hint {
    left: .5rem;
    max-width: calc(50% - 28px);
    pointer-events: none;
}

.menu-zone-embed-here {
    right: .5rem;
}

/* «Как в прошлый раз» (задача 25д): карточка над картой — заливка, без рамки; адрес крупнее подписи, «Доставить сюда» акцентом, «Другой адрес» тихой ссылкой */
.menu-zone-last {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem 1rem;
    border-radius: .75rem;
    background: var(--mz-fill);
}

.menu-zone-last-label {
    margin: 0;
    color: var(--mz-soft);
    font-size: .8rem;
    font-weight: 500;
}

.menu-zone-last-line {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.menu-zone-last-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.menu-zone-last-actions .menu-zone-btn {
    flex: 1 1 9rem;
}

.menu-zone-last .menu-zone-btn[aria-disabled="true"] {
    background: var(--mz-fill-strong);
    color: var(--menu-text);
    cursor: wait;
}

.menu-zone-quiet {
    min-height: 44px;
    padding: 0 .75rem;
    border: 0;
    background: none;
    color: var(--menu-text);
    font: inherit;
    font-size: .9rem;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.menu-zone-over {
    position: absolute;
    left: .5rem;
    right: .5rem;
    /* Сверху, а не снизу: внизу справа у карты подпись OpenStreetMap, закрывать её нельзя (лицензия) */
    top: .5rem;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    pointer-events: none;
}

.menu-zone-line,
.menu-zone-change {
    pointer-events: auto;
}

.menu-zone-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Подпись над полем — только у «Улицы и дома»: мелкая и приглушённая, как подписи разделов («Оплата», «Контакт»); остальные поля подписаны текстом внутри (placeholder) и aria-label */
.menu-zone-label {
    margin: 10px 0 0;
    color: var(--mz-soft);
    font-size: 12px;
    font-weight: 500;
}

/* Задача 25е: высота поля 44 px, шрифт 16 px ОСТАЁТСЯ (iPhone), отступы 10/12 */
.menu-zone-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: .75rem;
    background: var(--mz-fill);
    color: var(--menu-text);
    font: inherit;
    font-size: 1rem;
}

.menu-zone-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Текст внутри поля — приглушённый токен темы (контраст к заливке поля ≥ 4,5:1 считает check_guest_delivery_ui_test); opacity:1 — Firefox иначе гасит placeholder ещё раз */
.menu-zone-input::placeholder {
    color: var(--mz-soft);
    opacity: 1;
}

.menu-zone-privacy a {
    color: var(--menu-text);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Что мешает оформить: плашка с рамкой, а не жёлтая строка — на светлых темах прежний жёлтый (#e8b04b) даёт меньше 2:1 */
.menu-zone-warning {
    padding: .55rem .75rem;
    border: 0;
    border-radius: .6rem;
    background: var(--mz-fill);
    color: var(--menu-text);
    font-size: .9rem;
}

/* Кнопка оформления пока заперта: её надпись («Сначала укажите, куда доставить») несёт смысл, поэтому не прозрачность, а пунктир и поверхность */
.menu-cart-zones .menu-cart-action[aria-disabled="true"] {
    background: var(--mz-fill-strong);
    color: var(--menu-text);
    cursor: not-allowed;
}

.menu-cart-zones .menu-cart-action:focus-visible {
    outline: 3px solid var(--menu-text);
    outline-offset: 2px;
}

/* ═══ menu-zone:end ═══════════════════════════════════════════════════════════════════════════════════════ */