/* Карточка товара (модалка) — общий фрагмент витрины и корзины.

   Вынесено из pages/storefront/style.css: модалку открывает не только витрина,
   но и корзина (фото позиции в /cart и в боковой панели), а cart/index.html
   стилей витрины не подключает — без этого файла карточка на /cart рисовалась
   обычным блоком внизу страницы, а не оверлеем.

   Подключается ОБЕИМИ страницами: pages/storefront/index.html и
   pages/cart/index.html. Разметка — pages/storefront/_dish_modal.html,
   открытие/закрытие/галерея — делегированные обработчики в templates/base.html.

   Раскладка: десктоп — две колонки (фото + покупка/состав); мобильный —
   bottom-sheet. --- */

/* Пояснение «под заказ» в модалке товара. */
.dish-modal__backorder {
    font-size: 13px; line-height: 1.4;
    color: #a06a10; background: rgba(194,135,26,0.1);
    border-radius: 10px; padding: 8px 12px; margin-top: 8px;
}

/* --- Модалка блюда (раскладка: фото + покупка + состав).
   Контейнер #dish-modal пуст, пока закрыта; фрагмент приходит по HTMX-клику на
   фото карточки. Десктоп — две колонки в строку; мобильный — bottom-sheet. --- */
.dish-modal__backdrop {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(20, 17, 15, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: dishModalFade 0.2s var(--ease-enter) both;
}
@keyframes dishModalFade { from { opacity: 0; } to { opacity: 1; } }
.dish-modal__card {
    position: relative; display: flex; overflow: hidden;
    width: min(860px, 100%); height: min(560px, calc(100vh - 48px));
    background: var(--surface); border-radius: 22px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
    animation: dishModalPop 0.26s var(--ease-haptic) both;
}
@keyframes dishModalPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dish-modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
    color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 17, 15, 0.18);
    transition: transform 0.12s var(--ease-haptic), background-color 0.2s var(--ease-haptic);
}
.dish-modal__close:hover { transform: scale(1.06); background: #fff; }
/* Карточка получает фокус при открытии — без видимой рамки (иначе она рисуется
   квадратом вокруг круглой ×). Клавиатурный фокус на самой × — аккуратное
   кольцо по кругу кнопки, а не квадрат (перекрывает глобальный radius:6px). */
.dish-modal__card:focus { outline: none; }
.dish-modal__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

/* Левая колонка — крупное фото. contain на светлой подложке:
   фото не обрезается, под ним фоном — иконка-плейсхолдер на случай битой ссылки. */
.dish-modal__media {
    position: relative; flex: 1 1 50%; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: #c9c2b5; overflow: hidden;
}
.dish-modal__ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.dish-modal__img {
    position: relative; z-index: 1; width: 100%; height: 100%;
    object-fit: contain; padding: 28px;
}
/* Галерея товара (до 4 фото): ряд миниатюр поверх нижнего края фото; тап
   меняет большое изображение (data-gallery-thumb, обработчик в base.html). */
.dish-modal__thumbs {
    position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
    display: flex; justify-content: center; gap: 8px;
    padding: 0 10px;
}
.dish-modal__thumb {
    width: 52px; height: 52px; padding: 0;
    border: 2px solid var(--line); border-radius: 10px;
    background: var(--surface); cursor: pointer; overflow: hidden;
    flex: 0 0 auto;
    transition: border-color 0.2s var(--ease-haptic);
}
.dish-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-modal__thumb.is-active { border-color: var(--ink); }
.dish-modal__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Правая колонка — закреплённая шапка покупки + прокручиваемое тело. */
.dish-modal__info { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.dish-modal__header {
    flex: 0 0 auto; padding: 26px 26px 18px; border-bottom: 1px solid var(--line);
}
.dish-modal__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-right: 40px; }
.dish-modal__name { font-size: 24px; line-height: 1.15; color: var(--ink); }
.dish-modal__weight { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
/* Футер карточки — постоянная полоса покупки внизу: цена + «Добавить в корзину». */
.dish-modal__footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
    padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface);
}
.dish-modal__price { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.dish-modal__buy-control { flex: 1 1 auto; min-width: 0; }
/* Карточка открыта ИЗ корзины (view=cart): вместо пульта — справочная строка
   «В корзине: N». Количество меняется кнопками в самой строке позиции. */
.dish-modal__incart {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: 13.5px; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}

.dish-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 26px 26px; }
.dish-modal__section-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-soft); margin-bottom: 8px;
}
.dish-modal__composition { font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.dish-modal__composition--empty { color: var(--ink-soft); font-style: italic; }

/* Крупный пульт покупки в модалке (view='modal'). Кнопка «Добавить» и большой
   степпер тянутся на всю ширину строки покупки. */
.add-control--modal { display: block; width: 100%; }
.dish-modal__add {
    height: 44px; padding: 0 22px; border: none; border-radius: 12px;
    background: var(--ink); color: var(--surface);
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform 0.12s var(--ease-haptic), background-color 0.2s var(--ease-haptic);
}
.dish-modal__add:hover { transform: translateY(-1px); }
.dish-modal__add:active { transform: scale(0.99); }
/* Степпер в модалке компактный (не на всю строку): [−] N [+] прижат влево,
   рядом с ценой. add-control--modal не растягивает его. */
.add-control--modal .qty-ctl--lg { width: fit-content; }
.qty-ctl--lg { height: 44px; border-radius: 12px; box-shadow: none; background: var(--wash); }
.qty-ctl--lg .qty-ctl__btn { width: 44px; height: 44px; font-size: 22px; }
.qty-ctl--lg .qty-ctl__value { font-size: 17px; min-width: 40px; }

@media (max-width: 720px) {
    /* bottom-sheet: всё в столбик, карточка прижата к низу и сама прокручивается;
       шапка покупки липкая сверху. */
    .dish-modal__backdrop { padding: 0; align-items: flex-end; }
    .dish-modal__card {
        flex-direction: column; width: 100%; height: auto; max-height: 92vh;
        overflow-y: auto; border-radius: 22px 22px 0 0;
        animation: dishModalSheet 0.28s var(--ease-enter) both;
    }
    @keyframes dishModalSheet {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .dish-modal__media { flex: none; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; }
    .dish-modal__img { padding: 20px; }
    .dish-modal__info { flex: none; }
    .dish-modal__header {
        position: sticky; top: 0; z-index: 2; background: var(--surface);
        padding: 18px 18px 16px;
    }
    .dish-modal__name { font-size: 21px; }
    .dish-modal__scroll { overflow: visible; padding: 16px 18px 22px; }
    /* CTA-полоса прилипает к низу, пока карточка прокручивается (bottom-sheet).
       Нижний отступ учитывает безопасную зону: карточка доходит до края экрана,
       и без вставки «Добавить в корзину» ложится под индикатор home. */
    .dish-modal__footer {
        position: sticky; bottom: 0; z-index: 2;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    }
}