/* =============================================================
   app.css — ЕДИНЫЙ файл стилей приложения CityPulse
   
   Собран из финальных версий:
   layout.css, establishment-list.css, restaurant-menu.css (venue),
   menu-style-i.css, menu-sidebar.css, floating-cart.css, dish-dialog.css
   
   Подключение (index.html / App.razor) — ровно две строки, в этом порядке:
   <style>@((MarkupString)CityPulseTheme.Css)</style>   ← переменные цветов
   <link rel="stylesheet" href="css/app.css" />        ← этот файл
   Все прежние <link> на постраничные css удалить.
   
   ---------------------------------------------------------------
   ПОРЯДОК РАЗДЕЛОВ = ПОРЯДОК ПРИОРИТЕТА (ниже в файле — сильнее).
   При равной специфичности выигрывает то, что ниже, поэтому
   переставлять разделы нельзя.

   МЕДИА-ЗАПРОСЫ — все в конце файла, три блока:
   (min-width: 960px) → (max-width: 959px) → (max-width: 600px).
   Новое мобильное правило добавлять в соответствующий блок,
   а не отдельным @media рядом с компонентом.

   ЧИСТКА (сент. 2026): удалены классы, не встречающиеся ни в одном
   .razor/.cs/.js проекта; из медиа убраны свойства, дублирующие базу.
   ---------------------------------------------------------------
   
   1.  ТОКЕНЫ ГЕОМЕТРИИ .............. высоты, радиусы, шрифты --fs-*, --sbw
   2.  АНИМАЦИИ ....................... все @keyframes в одном месте
   3.  БАЗА ДОКУМЕНТА ................. html, body, контейнеры MudBlazor
   4.  УТИЛИТЫ ....................... .photo, .text-truncate, .scroll-y…
   5.  UI-КИТ (ОБЩИЕ КЛАССЫ ФОРМ) .... то, из чего собираются новые формы
   5.1 .surface — подложка/карточка
   5.2 .section + .label-mono — раздел формы и микро-подпись
   5.3 .field — поле ввода MudBlazor, приведённое к нашему виду
   5.4 .btn — кнопки (accent / outline / ghost)
   5.5 .icon-btn — круглая иконка-кнопка
   5.6 .chip — чип, плитка, вкладка (одна механика is-active)
   5.7 .badge / .count — плашки статуса и счётчики
   5.8 .note — плашка-подсказка под полями
   5.9 .stack — стопка фото «монетками»
   5.10 .ph — заглушка фото с бликом
   6.  ОБОЛОЧКА ...................... шапка, шторка, оверлеи
   7.  СПИСОК ЗАВЕДЕНИЙ .............. фильтры, карточка, город, пустой список
   8.  СТРАНИЦА ЗАВЕДЕНИЯ ............ фото-шапка, карточка, вкладки, расписание
   9.  КАТАЛОГ МЕНЮ .................. сетка/список блюд, разделы, переключатель
   10. САЙДБАР РАЗДЕЛОВ .............. десктоп-колонка и мобильный выезд
   11. ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ ............ корзина, мобильная полоса, «вверх»
   12. ОКНО БЛЮДА .................... диалог порций и количества
   13. ТЁМНАЯ ТЕМА ................... только то, что нельзя решить переменной
   14. ПОВЕДЕНИЕ ПРИ КАСАНИИ .......... один список на всё приложение
   15. ФОРМА ЗАВЕДЕНИЯ ................ AddOrganization: фото, оффер, экраны
   16. КАРТОЧКА ЗАКАЗА ............... OrderCard: терминал и история гостя
   17. ДИАЛОГИ И СТРАНИЦЫ ОБЩЕГО КОНТУРА .. Dialogs/*, открываемые из 2+ областей или гостем
   18. СТРАНИЦЫ ГОСТЯ И ОБОЛОЧКА ......... Profile, History, Checkout, OrderPreview/Actions, GlobalCallHub, NotFound, Gallery, ScheduleEditor, TgStore
   19. СТОЛ И БЫСТРЫЙ ВЫБОР .............. WaiterTable (гость по QR + официант), FastItemSelector, FastItemSelectorDesktop, BridgeStatusBar
   (MenuCardStyleA…H сюда НЕ переносятся — решение 13.09, HANDOFF 6а.22)
   
   ---------------------------------------------------------------
   ПРАВИЛА ДЛЯ НОВЫХ ФОРМ
   ---------------------------------------------------------------
   · Новую форму собираем ТОЛЬКО из классов раздела 5. Своё имя
   класса заводим, когда в ките нет нужного поведения — и тогда
   сразу в кит, а не в конец файла.
   · Цвет — только переменная из CityPulseTheme.cs. Литералов нет.
   · Размер, отступ, радиус — токен из раздела 1, если он там есть.
   · Классы MudBlazor (.mud-*) правим только внутри своего класса-области
   (.field, .drawer-menu, .filter-panel), никогда глобально.
   
   ---------------------------------------------------------------
   ЧТО ОБЪЕДИНЕНО ПРИ СБОРКЕ (было → стало)
   Псевдонимы (старые имена в одном селекторе с новым) сняты
   8.09.2026 после перевода шести форм. Остались только те, чьи
   потребители ещё не переведены: .chip-adaptive,
   .category-internal-container, .custom-scrollbar,
   .menu-placeholder-wrap, .sidebar-label (услуги, 6а.8).
   ---------------------------------------------------------------
   .est-badge + .venue-badge + .est-feature       → .badge (+ .is-sm)
   .venue-section-title + .venue-about-title +
   .dish-dialog-label + .catalog-head-title       → .label-mono
   .root-count-badge + .sub-count-badge +
   .nav-item-count                                → .count (+ тона)
   .venue-card + .root-category-shell +
   .filter-panel-adaptive + .cta-panel            → .surface (+ радиусы)
   .qty-chip + .portion-tile + .chip-adaptive +
   .tab-btn + .view-switch-btn + .nav-item        → .chip / .is-active
   .dish-dialog-close + .sidebar-mhead-close +
   .qty-btn + .weight-step-btn +
   .header-action-btn + .dish-card-add            → .icon-btn (+ размеры)
   .filter-btn-main + .filter-locate-btn +
   .dish-dialog-submit + .btn-massive             → .btn.is-accent
   .border-dashed-adaptive + .border-dashed-2     → .border-dashed
   .venue-about + .venue-section                  → .venue-section
   .dish-ph + .menu-placeholder-wrap (два
   одинаковых @keyframes шиммера)                 → .ph + один keyframe
   прокрутки (.custom-scrollbar, .overflow-y-auto,
   .sidebar-nav-scroll, .cart-items-scroll)       → .scroll-y / .scroll-x
   
   Старые имена НЕ удалены: они стоят рядом с новым классом в одном
   селекторе-псевдониме. Разметку можно переводить на кит постепенно,
   форму за формой, ничего не ломая. Когда старое имя уйдёт из всех
   .razor — удаляем его из селектора.
   
   ---------------------------------------------------------------
   ЧТО ВЫБРОШЕНО (лежит в истории git, если понадобится)
   ---------------------------------------------------------------
   · floating-cart «ВАРИАНТ А» — 190 строк в комментарии;
   · .sidebar-tabs / .sidebar-svc — вкладки «Меню / Услуги», не включены;
   · .header-btn-accent — был закомментирован;
   · дубль .appbar-hidden (мягкий transform-вариант) — оставлен только
   жёсткий display:none, он и работал;
   · .mud-drawer-header был объявлен дважды с разным padding-top
   (70px в layout, 8px в venue) — оставлен venue-вариант, он выигрывал.
   ============================================================= */

/* =============================================================
   1. ТОКЕНЫ ГЕОМЕТРИИ
   Цвета живут в CityPulseTheme.cs. Здесь только размеры, чтобы
   «поле и кнопка одной высоты» правилось одним числом.
   ============================================================= */

:root {
    /* Ширину полосы прокрутки пишет JS: без неё контент прыгает
       на 5–10px в момент открытия диалога */
    --sbw: 0px;
    /* Высоты элементов управления */
    --ctl-h: 40px;
    /* поля и кнопки в панелях фильтров */
    --ctl-h-lg: 44px;
    /* мобильные поля, круглые кнопки поверх фото */
    --ctl-h-sm: 34px;
    /* мелкие кнопки внутри карточек */

    /* Радиусы */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 99px;

    /* Шкала шрифтов (10.09.2026). Новые правила ставят токен, не число;
       старые литералы переводятся по разделам в проходе 2. На телефоне
       шкала поднимается одним блоком в медиа (≤959) — вместо правки
       каждого правила. Заголовкам страниц — clamp(), см. --fs-title. */
    --fs-2xs: 10.5px;   /* микро-подписи капсом: .label-mono */
    --fs-xs: 12px;      /* подписи, бейджи, подсказки */
    --fs-sm: 13px;      /* вторичный текст, кнопки, чипы */
    --fs-md: 14px;      /* основной текст, пункты навигации */
    --fs-lg: 16px;      /* подзаголовки, названия карточек */
    --fs-xl: 18px;      /* заголовки блоков */
    --fs-2xl: 22px;     /* крупные цифры KPI */
    --fs-title: clamp(18px, 1.2vw + 12px, 22px);   /* заголовок страницы */
}

/* =============================================================
   2. АНИМАЦИИ
   Все keyframes здесь. Два шиммера (dish-ph-shimmer и
   placeholder-shimmer) были идентичны — остался один.
   ============================================================= */

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes transferPulse {
    0% {
        box-shadow: 0 0 0 0 var(--accent-pulse-from, rgba(247, 153, 11, .4));
    }

    70% {
        box-shadow: 0 0 0 10px var(--accent-pulse-to, rgba(247, 153, 11, 0));
    }

    100% {
        box-shadow: 0 0 0 0 var(--accent-pulse-to, rgba(247, 153, 11, 0));
    }
}

/* Блик по заглушке фото */

@keyframes ph-shimmer {
    0% {
        left: -150%;
    }

    45% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Подпрыгивание цифры в окне блюда */

@keyframes bump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes modalScaleIn {
    from {
        transform: translate(-50%, -40%) scale(0.9);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes mobileSlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes cart-pulse-anim {
    0% {
        transform: translateX(-50%) scale(1);
    }

    35% {
        transform: translateX(-50%) scale(1.06);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes cart-pulse-mobile {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

/* =============================================================
   3. БАЗА ДОКУМЕНТА
   Правки самого MudBlazor, общие для всех страниц.
   ============================================================= */

html {
    background-color: var(--bg-main);
}

body {
    max-width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: background-color .4s ease, color .4s ease !important;
}

.mud-expansion-panel-content {
    background-color: transparent !important;
    padding: 12px 4px !important;
}

.mud-expansion-panel {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.mud-dialog {
    background-color: var(--bg-drawer) !important;
    color: var(--text-primary) !important;
}

/* Плавная смена темы у крупных подложек */

.surface,
.venue-card,
.tab-btn {
    transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease !important;
}

/* Подсветка найденного текста — глобально, ищут на всех страницах */

mark {
    background-color: var(--accent-soft-bg);
    color: inherit;
    border-radius: 4px;
    padding: 0 2px;
}

/* ---------- AREA-CSS-GUARD (начало) — 10.09.2026 ----------
   Гасит моргание при первом входе в служебную область: областной css
   (admin.css и др.) приезжает через <HeadContent> на 50–100 мс позже
   разметки, и страница на миг видна без стилей. Корень области скрыт,
   пока не пришёл его файл; областной css снимает скрытие (парный блок
   AREA-CSS-GUARD в секции 0 каждого областного файла).
   Страховка: если областной css не загрузился (404, регистр в пути,
   нет <HeadOutlet />), через 1.5 с страница показывается как есть —
   иначе она осталась бы невидимой навсегда и молча.
   Удалять вместе с парными блоками в admin/stock/money/excise.css.

   В списке — ТОЛЬКО корни, которые реально стоят в разметке и у которых
   есть снимающий блок в областном файле. Сверено 14.09.2026 по src/:
   .admin-dashboard-root (1 стр.), .stock-root (9), .money-root (8),
   .cash-root (2 — CashSummary, StaffCash), .excise-root (5).
   Убраны .terminal-root и .support-root — таких классов в разметке нет
   (терминал — .waiter-root/.kds-root без гварда, у поддержки, принтеров
   и файлов корня нет). Новую область добавлять сюда ПОСЛЕДНИМ шагом,
   после корня в разметке и снимающего блока в её css (HANDOFF 5.2н). */

.admin-dashboard-root,
.stock-root,
.money-root,
.cash-root,
.excise-root {
    visibility: hidden;
    position: relative;
    min-height: 40vh;
    animation: area-css-fallback 0s 1.5s forwards;
}

@keyframes area-css-fallback {
    to {
        visibility: visible;
    }
}

/* Спиннер на месте скрытого контента. Выключен: пауза ~0.1 с глазом не
   читается, а если страница ещё грузит данные — будет два кружка подряд.
   ЕСЛИ ВИДНО МОРГАНИЕ (медленный хостинг, css едет 300+ мс) — раскомментируй
   этот блок и парный «::before { display: none }» в областных файлах.

.admin-dashboard-root::before,
.stock-root::before,
.money-root::before,
.cash-root::before,
.excise-root::before {
    content: "";
    visibility: visible;
    position: absolute;
    top: 96px;
    left: 50%;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border: 3px solid rgba(var(--mud-palette-primary-rgb), .2);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: area-spin .8s linear infinite;
}

@keyframes area-spin {
    to {
        transform: rotate(360deg);
    }
}
*/
/* ---------- AREA-CSS-GUARD (конец) ---------- */

/* =============================================================
   4. УТИЛИТЫ
   Мелкие однозадачные классы. Ставятся рядом с классом места,
   а не вместо него: class="dish-card-photo photo".
   ============================================================= */

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-black {
    font-weight: 900 !important;
}

.text-error {
    color: var(--mud-palette-error) !important;
}

/* Вторая валюта, подсказки — тише основного текста */

.text-muted-2 {
    color: var(--text-faint);
    font-size: 12px;
    white-space: nowrap;
}

.opacity-20 {
    opacity: .2;
}

.opacity-30 {
    opacity: .3;
}

.opacity-40 {
    opacity: .4;
}

.opacity-50 {
    opacity: .5;
}

.opacity-60 {
    opacity: .6;
}

.opacity-70 {
    opacity: .7;
}

.opacity-80 {
    opacity: .8;
}

/* В Mud 8 нет text-center / text-right / font-italic / h-100 — свои */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-sm {
    font-size: .8rem;
}

.font-italic {
    font-style: italic;
}

/* Невидимая метка для прокрутки к разделу: поднята на высоту липкой
   шапки + полосы каталога, чтобы заголовок не уезжал под них */

.scroll-anchor {
    position: absolute;
    margin-top: -180px;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uppercase-text {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: .7rem;
}

.shadow-inner {
    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, .04) !important;
}

.divider-line {
    height: 1px;
    background-color: var(--border-color);
}

.border-dashed {
    border: 2px dashed var(--border-color) !important;
}

/* ---------- ФОТО: общий примитив ----------
   Рамка обрезает содержимое, картинка внутри заполняет её целиком
   и не искажается. Размер, скругление и место в раскладке остаются
   за классом конкретного места (.est-card-photo, .dish-card-photo).
   
   Лента hero сюда намеренно не входит: там .main-photo сам является
   флекс-элементом со скролл-снапом, а не содержимым рамки. */

.photo {
    position: relative;
    overflow: hidden;
}

.photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Заглушка вписывается целиком, а не обрезается по краям */

.photo > img.is-ph {
    object-fit: contain;
    padding: 28px;
    background: var(--bg-main);
}

.photo-zoom > img {
    transition: transform .6s ease;
}

.photo-zoom:hover > img,
.hover-card:hover .photo-zoom > img {
    transform: scale(1.04);
}

/* Карточка, которая приподнимается по наведению */

.hover-card {
    cursor: pointer;
    transition: all .3s ease-out;
}

.hover-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow) !important;
}

/* ---------- ПРОКРУТКА ----------
   Раньше тонкий скроллбар описывался четырьмя разными классами
   с одинаковым телом. */

.scroll-y,
.custom-scrollbar {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.scroll-y::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.scroll-y::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* Горизонтальная прокрутка без видимой полосы — вкладки, лента фото */

/* ---------- СТАТУС «ОТКРЫТО / ЗАКРЫТО» ----------
   Цвета из темы, а не #4CAF50 — иначе не совпадает с бейджем
   статуса на странице заведения. */

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =============================================================
   5. UI-КИТ — ОБЩИЕ КЛАССЫ ФОРМ
   
   Из этого раздела собирается новая форма без единой новой строки
   CSS. Старые имена классов оставлены в селекторах как псевдонимы,
   чтобы существующие .razor продолжали работать.
   ============================================================= */

/* ---------- 5.1 ПОВЕРХНОСТЬ ----------
   Подложка любого блока: карточка заведения, панель фильтров,
   раздел каталога, плашка расписания. Различались только радиусом
   и наличием рамки. */

.surface,
.venue-card,
.root-category-shell {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    position: relative;
}

/* Радиусы-модификаторы */

.surface.is-lg {
    border-radius: var(--r-lg);
}

/* Без рамки, но с мягкой тенью — так выглядят разделы каталога */

.surface.is-soft,
.root-category-shell {
    border: none;
    box-shadow: 0 2px 10px rgba(38, 35, 53, .05);
}

/* Пунктирная — блок-призыв «добавить заведение» */

.surface.is-dashed {
    border: 2px dashed var(--border-color);
}

/* Внутренние отступы задаёт место, а не кит: у карточки заведения
   20/22, у раздела каталога 0/14. Поэтому padding здесь нет. */

/* ---------- 5.2 РАЗДЕЛ ФОРМЫ И МИКРО-ПОДПИСЬ ----------
   «О заведении», «Соцсети», «Порции», «Разделы меню» — один и тот
   же приём: линия сверху, монопространственная подпись капсом,
   содержимое. Было четыре почти одинаковых пары классов. */

.section {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* Первый раздел в блоке линию сверху не рисует */

.label-mono {
    display: block;
    color: var(--text-faint);
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Заголовок полосы каталога — в строке, свой размер, не моно */

.catalog-head-title {
    flex: none;
    white-space: nowrap;
    color: var(--text-muted);
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .catalog-head-title.is-lg {
        color: var(--text-primary);
        font-weight: 800;
        font-size: var(--fs-lg);
        letter-spacing: -.015em;
        text-transform: none;
    }

/* Заголовок раздела формы крупнее подписи — «САЙТ И СОЦСЕТИ» с иконкой.
   Раскладка в разметке: d-flex align-center gap-2 mb-3 */

.section-head {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-head .mud-icon-root {
    flex: none;
    font-size: 18px;
    color: var(--accent-color);
}

/* Подпись над полем: «НАИМЕНОВАНИЕ ЗАВЕДЕНИЯ», «ГОРОД».
   Раньше собиралась из пяти утилит MudBlazor
   (fw-bold mb-1 d-block opacity-60 uppercase-text).
   Отступ до поля — в разметке: class="field-label mb-1" */

.field-label {
    display: block;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Линия-заполнитель справа от заголовка */

.catalog-head-line {
    flex: 1;
    display: block;
    height: 0;
    border-top: 1px solid var(--border-color);
}

/* ---------- 5.3 ПОЛЕ ВВОДА ----------
   MudBlazor при Variant.Outlined рисует <fieldset
   class="mud-input-outlined-border"> — это его рамка, из разметки
   она не убирается. Плюс он растягивает .mud-input-control по
   высоте flex-колонки. Оба лечения были продублированы в трёх
   файлах (панель фильтров, сайдбар, мобильная полоса) — теперь
   один класс-область .field.
   
   Разметка: <MudTextField Class="field" Variant="Variant.Outlined" … />
   Модификаторы: .field.is-lg (44px), .field.is-dark (на тёмной полосе). */

.field {
    background-color: var(--bg-main) !important;
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

/* Иначе поле съедает всю свободную высоту колонки. width: 100% обязателен:
   без него MudSelect в строчном flex-родителе сжимается до ширины текста */

.field.mud-input-control,
.field .mud-input-control {
    flex: 0 0 auto !important;
    width: 100%;
}

/* Фиксированная высота — только однострочным полям. Многострочное
   (Lines="3") растёт по содержимому, иначе сплющивается и текст наезжает
   на подпись */

.field .mud-input.mud-input-outlined {
    min-height: var(--ctl-h);
    border-radius: inherit;
}

.field .mud-input.mud-input-outlined:not(:has(textarea)) {
    height: var(--ctl-h);
}

/* Обводка-fieldset не нужна: Label у наших полей нет,
   рамку рисует сама подложка */

.field .mud-input-outlined-border {
    border: none !important;
}

/* Подчёркивания вариантов Text/Filled */

.field .mud-input.mud-input-underline:before,
.field .mud-input.mud-input-underline:after {
    display: none !important;
}

.field .mud-input-helper-text:empty {
    display: none;
}

/* Иконка-украшение и заполнитель */

.field .mud-input-adornment .mud-icon-root,
.field .mud-input-clear-button {
    color: var(--text-faint);
}

.field .mud-input-adornment-icon {
    color: var(--accent-color);
}

.field input::placeholder,
.field .mud-input-slot::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Фокус — акцентное кольцо вместо утолщения рамки MudBlazor */

.field:focus-within {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 3px var(--accent-soft-bg);
}

/* Поле с плавающей подписью (Label="…"): рамка нужна — на ней сидит
   подпись, поэтому fieldset не гасим, а перекрашиваем.
   
   Фон и подсветка фокуса — на .mud-input-control-input-container (самом
   поле), а не на всём .mud-input-control: в него входит ещё HelperText,
   и иначе подсвечивалась плашка вместе с подсказкой. Рамка в фокусе
   не меняется — только мягкое кольцо, как в фильтрах */

.field.is-labeled {
    background: transparent !important;
    box-shadow: none;
}

.field.is-labeled .mud-input-control-input-container {
    background-color: var(--bg-main);
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

/* Рамка MudBlazor с вырезом под подпись: в покое едва заметная,
   в фокусе — тонкая акцентная. Только цвет, толщина 1px — поле не прыгает */

.field.is-labeled .mud-input-outlined-border {
    border: 1px solid var(--border-color) !important;
    transition: border-color .15s;
}

.field.is-labeled .mud-input-label-outlined {
    color: var(--text-muted);
}

.field.is-labeled:focus-within {
    box-shadow: none;
}

.field.is-labeled:focus-within .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
    border-width: 1px !important;
}

.field.is-labeled:focus-within .mud-input-label-outlined {
    color: var(--accent-soft-text);
}

/* Крупное поле — мобильные полосы и формы редактирования */

.field.is-lg .mud-input.mud-input-outlined:not(:has(textarea)) {
    height: var(--ctl-h-lg);
    min-height: var(--ctl-h-lg);
}

/* Поле на тёмной подложке (мобильная полоса поиска, шапка) */

/* ---------- 5.4 КНОПКИ ----------
   Три тона на всё приложение. Высота — тот же токен, что у поля,
   поэтому ряд «поле + кнопка» больше не ступенька. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--ctl-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* Главное действие: «Рядом со мной», «Фильтр», «Добавить в корзину» */

.btn.is-accent {
    background-color: var(--accent-color) !important;
    color: var(--on-accent) !important;
    border-color: transparent;
}

.btn.is-accent:hover {
    box-shadow: var(--shadow) !important;
    filter: brightness(1.05);
}

/* Второстепенное: «Добавить ссылку», «Добавить заведение» */

.btn.is-outline {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--accent-soft-text);
}

.btn.is-outline:hover {
    background: var(--accent-soft-bg);
}

/* Спокойное: «Сброс всех фильтров» */

.btn.is-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    font-weight: 600;
}

.btn.is-ghost:hover {
    color: var(--text-primary);
}

/* Тёмное: «Отзыв» в шапке админки — второе действие рядом с акцентным
   контуром, когда нужен вес, а не акцент. Добавлено 10.09.2026 (Admin D). */

.btn.is-dark {
    background: var(--appbar-bg);
    color: #fff;
    border-color: transparent;
}

.btn.is-dark:hover {
    background: var(--dark-surface);
}

.btn.is-block {
    width: 100%;
}

.btn.is-lg {
    height: 48px;
    border-radius: var(--r-lg);
    font-size: 14px;
}

/* ---------- 5.5 КРУГЛАЯ ИКОНКА-КНОПКА ----------
   Крестик диалога, ±, «+» на карточке блюда, кнопки поверх фото,
   соцсети. Раньше — семь почти одинаковых классов. */

.icon-btn,
.sidebar-mhead-close {
    width: var(--ctl-h-sm);
    height: var(--ctl-h-sm);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--bg-main);
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}

.icon-btn:hover,
.sidebar-mhead-close:hover {
    background: var(--bg-card-active);
}

.icon-btn.is-sm {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.icon-btn.is-lg {
    width: var(--ctl-h-lg);
    height: var(--ctl-h-lg);
}

/* Мягкий акцент — «+» на карточке блюда */

.icon-btn.is-soft {
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
}

.icon-btn.is-soft:hover {
    background: var(--accent-color);
    color: var(--on-accent);
    transform: scale(1.06);
}

/* Заливка акцентом — главное действие в паре ± */

.icon-btn.is-accent,
.qty-btn.is-accent {
    background: var(--accent-color);
    color: var(--on-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.icon-btn.is-accent:hover,
.qty-btn.is-accent:hover {
    background: var(--accent-soft-text);
    /*color: #fff;
    *: */;
}

/* ---------- 5.6 ЧИП / ПЛИТКА / ВКЛАДКА ----------
   Один механизм выбора: спокойная подложка → .is-active красится
   мягким акцентом. Так работали чипы категорий, плитки порций,
   чипы количества, вкладки каталога, строки сайдбара. */

.chip,
.chip-adaptive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ctl-h);
    padding: 0 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
}

.chip:hover,
.chip-adaptive:hover {
    border-color: var(--accent-color);
}

.chip.is-active {
    background: var(--accent-soft-bg);
    border-color: var(--accent-color);
    color: var(--accent-soft-text);
}

/* Пилюля — вкладки категорий, действия карточки заведения */

/* Плитка — вертикальная, с цифрой и подписью (порции) */

.chip.is-tile {
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 10px 4px 12px;
    border-radius: var(--r-lg);
}

/* Ряд чипов с горизонтальной прокруткой — категории в фильтрах и форме */

.chip-scroll {
    overflow-x: auto;
    padding-bottom: 5px;
}

/* Группа чипов: перенос по строкам, ровные отступы */

/* Сегментированный переключатель — «сетка / список» */

.seg {
    display: flex;
    gap: 3px;
    flex: none;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
}

.seg-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-faint);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
}

.seg-btn:hover {
    color: var(--text-muted);
}

.seg-btn.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 15, 10, .14);
}

.seg-btn svg {
    display: block;
    flex: none;
}

/* ---------- 5.7 БЕЙДЖ И СЧЁТЧИК ----------
   .est-badge и .venue-badge были посимвольно одинаковы, включая
   is-open / is-closed. .est-feature — тот же бейдж, но мельче. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    margin-bottom: 0;
    padding: 0 10px;
    border-radius: var(--r-sm);
    background: var(--bg-card-active);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.badge.is-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: var(--r-sm);
    background: var(--bg-card-active);
    color: var(--text-muted);
    white-space: nowrap;
}

.badge .mud-icon-root {
    font-size: 14px;
    color: var(--accent-color);
}

.badge.is-open {
    background: var(--ok-bg);
    color: var(--ok-color);
}

.badge.is-warning {
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
}

.badge.is-closed {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}

.badge.is-clickable {
    cursor: pointer;
}

/* Ряд бейджей: раскладка — утилитами в разметке
   (d-flex flex-wrap align-center gap-2). Класс оставлен как имя места. */

.badge-row {
    margin-top: 9px;
}

/* Счётчики: раздел каталога, подраздел, строка сайдбара */

.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.count.is-accent {
    min-width: 52px;
    padding: 8px 18px;
    border-radius: var(--r-sm);
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
}

.count.is-quiet {
    padding: 3px 16px;
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-muted);
}

/* Счётчик-цифра поверх фото (сколько в корзине) */

.count-float {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    max-width: calc(100% - 16px);
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--dark-surface);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

/* ---------- 5.8 ПЛАШКА-ПОДСКАЗКА ----------
   «Координаты не обязательны, но с ними заведение видно в поиске».
   В формах повторяется постоянно — теперь один класс.
   Разметка: <div class="note"><MudIcon … /><span>текст</span></div> */

.note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.45;
}

.note .mud-icon-root {
    flex: none;
    font-size: 18px;
    margin-top: 1px;
}

.note.is-quiet {
    background: var(--bg-main);
    color: var(--text-muted);
}

/* Пунктирная плашка найденного совпадения */

.note.is-dashed {
    padding: 4px 10px;
    border: 1px dashed var(--accent-color);
    border-radius: var(--r-sm);
    background: var(--accent-soft-bg);
    color: var(--accent-soft-text);
    font-size: .75rem;
}

/* ---------- 5.9 СТОПКА ФОТО ----------
   Показывает, что в разделе есть блюда с картинками. Кружки
   перекрывают друг друга, обводка отделяет соседей. */

.stack {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex: none;
}

.stack-img {
    width: var(--ctl-h-sm);
    height: var(--ctl-h-sm);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color);
}

/* row-reverse: первый в разметке — верхний справа, остальные влево */

.stack-img + .stack-img {
    margin-right: -23px;
}

/* ---------- 5.10 ЗАГЛУШКА ФОТО ----------
   Было два одинаковых блока (.dish-ph и .menu-placeholder-wrap)
   с двумя одинаковыми keyframes. */

.ph {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
}

.ph::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 55%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: ph-shimmer 4s infinite ease-in-out;
}

.ph-icon {
    font-size: 1.6rem;
    opacity: .2;
    color: var(--text-primary);
}

.ph-label {
    color: var(--text-primary);
    font-weight: 800;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.1;
    opacity: .3;
}

/* Подпрыгивание значения — окно блюда, счётчик корзины */

.bump {
    animation: bump .2s cubic-bezier(.175, .885, .32, 1.275);
}

/* Появление карточки блюда с задержкой. Задержку ставит разметка
   через GetDelayStyle() — animation-delay в атрибуте style, поэтому
   both обязателен: до своего кадра карточка должна быть невидимой. */

.dish-card-anim {
    animation: fadeInScale .35s ease-out both;
}

/* Пустая подпись-распорка: правая колонка панели фильтров повторяет
   структуру левой, поэтому кнопка стартует на одной высоте с полем. */

.filter-label-spacer {
    visibility: hidden;
}

.shadow-soft {
    box-shadow: 0 4px 12px rgba(38, 35, 53, .06) !important;
}

/* =============================================================
   6. ОБОЛОЧКА: ШАПКА, ШТОРКА, ОВЕРЛЕИ
   Источник — MainLayout.razor.
   ============================================================= */

/* Градиент шапки. Палитра MudBlazor принимает только плоский цвет,
   поэтому градиент задаётся здесь; AppbarBackground остаётся запасным. */

.mud-appbar {
    background: linear-gradient(90deg, var(--appbar-bg) 0%, var(--appbar-bg-2) 100%) !important;
}

.citypulse-appbar {
    border-radius: 0 0 20px 20px;
    box-shadow: var(--appbar-shadow) !important;
    border-bottom: none;
    padding: 0 16px;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out !important;
    transform: translateY(0);
    opacity: 1;
}

#main-appbar {
    z-index: 1500 !important;
    transition: transform .3s ease-in-out !important;
}

#main-appbar .mud-toolbar {
    display: flex;
    gap: 9px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.header-btn {
    padding: 8px !important;
    border-radius: var(--r-md) !important;
    background: var(--header-btn-bg) !important;
    border: none !important;
    color: var(--header-btn-text) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    opacity: 0;
    animation: fadeInScale .4s ease-out .4s forwards;
}

.header-btn:hover {
    background: var(--header-btn-bg-hover) !important;
}

.header-btn .mud-icon-button {
    padding: 0 !important;
}

/* Компактный индикатор копирования в шапке */

/* В разметке: d-flex align-center */

.upload-indicator {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
}

.upload-indicator-pct {
    color: #fff;
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.lang-menu-row {
    min-width: 120px;
}

/* В разметке: d-block cursor-pointer */

.logo-img {
    height: 36px;
    width: auto;
    opacity: 0;
    animation: fadeInScale .5s ease-out .2s forwards;
}

.preloading {
    opacity: 0;
}

/* Скрытая шапка убирается из потока полностью. Мягкий transform-вариант
   удалён: он стоял выше и всё равно перекрывался этим. */

.appbar-hidden,
.citypulse-appbar.appbar-hidden {
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

.appbar-hidden ~ .mud-main-content,
.citypulse-appbar.appbar-hidden ~ .mud-main-content {
    padding-top: 0 !important;
}

body.mud-dialog-open:not(.page-history) .mud-appbar,
body.mud-drawer-open:not(.page-history) .mud-appbar {
    display: none !important;
}

/* ---------- Полноэкранные оверлеи ---------- */

.overlay-open-mode {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
}

.top-level-dialog {
    z-index: 3000 !important;
}

/* ---------- Шторка (Drawer) ----------
   ВНИМАНИЕ: .mud-drawer-header был объявлен дважды в разных файлах
   (padding-top 70px и 8px). Оставлен вариант, который выигрывал. */

.mud-drawer-header {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
    min-height: auto !important;
    background: var(--mud-palette-background-grey);
}

.mud-drawer-header-fixed {
    flex-shrink: 0;
    padding-top: 75px !important;
    background: var(--mud-palette-background-grey);
}

.drawer-header-fixed {
    flex-shrink: 0;
    padding-top: 70px !important;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
    z-index: 10;
}

.drawer-footer-fixed {
    flex-shrink: 0;
    background: var(--mud-palette-surface);
}

.mud-nav-menu {
    margin-top: 8px;
}

.mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

.drawer-avatar {
    width: 80px !important;
    height: 80px !important;
}

/* Бейдж камеры на аватаре. В разметке: absolute d-flex align-center justify-center */

.camera-badge {
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.camera-badge .mud-icon-root {
    color: #fff;
    font-size: 14px;
}

/* ---------- Плавающая корзина задач трансфера ---------- */

/* В разметке: fixed overflow-hidden d-flex flex-column */

.floating-transfer-basket {
    bottom: 24px;
    right: 24px;
    width: 380px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--accent-color);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    z-index: 4000;
    animation: transferPulse 2s infinite;
}

/* В разметке: fixed d-flex align-center justify-center cursor-pointer */

.transfer-basket-fab {
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--appbar-bg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    z-index: 4000;
    animation: transferPulse 2s infinite;
}

.transfer-basket-fab:hover {
    filter: brightness(1.1);
}

/* В разметке: d-flex align-center justify-space-between px-4 py-2 */

.basket-header {
    background: var(--appbar-bg);
    color: white;
}

/* В разметке: pa-3 */

.basket-body {
    max-height: 320px;
    background-color: var(--mud-palette-background-grey);
}

/* В разметке: absolute */

.transfer-basket-fab-icon {
    color: #fff;
}

/* В разметке: mb-2 pb-2 */

.basket-job {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.basket-job-name {
    max-width: 220px;
}

.basket-job-status {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

/* =============================================================
   7. СПИСОК ЗАВЕДЕНИЙ
   Components/.../EstablishmentList.razor
   ============================================================= */

/* ---------- Панель фильтров ----------
   Геометрию полей и кнопок держит кит (.field, .btn). Здесь только
   то, что относится к самой панели. */

/* ---------- Сетка карточек ---------- */

.est-grid > .mud-grid-item {
    display: flex;
}

.est-grid > .mud-grid-item > .mud-card {
    width: 100%;
}

/* ---------- Карточка заведения ---------- */

/* Только размер и скругление — поведение картинки в .photo */

.est-card-photo {
    height: 220px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Раскладка в разметке: absolute d-flex gap-2 z-10. Здесь только смещение от угла */

.card-badge-container {
    top: 12px;
    left: 12px;
}

/* Кнопки «в избранное» и «поделиться» поверх фото.
   Фон из темы, а не белый: на тёмной теме белая плашка выбивается */

.favorite-button {
    background: var(--bg-card) !important;
    opacity: .9;
    backdrop-filter: blur(4px);
    border-radius: var(--r-md) !important;
}

.est-name {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

/* Адрес — приглушённый текст, акцентная иконка */

/* Раскладка в разметке: d-flex align-center gap-2 mb-1 */

.est-address {
    min-width: 0;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12.5px;
}

.est-address .mud-icon-root {
    flex: none;
    font-size: 17px;
    color: var(--accent-color);
}

/* Адрес без иконки — в компактных карточках «другие заведения» */

.est-address-plain {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
}

/* Описание заведения — две строки */

.est-desc {
    display: -webkit-box;
    min-height: 2.7em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--fs-sm);
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Подсветка совпадения в поиске */

.highlight-active {
    background: var(--accent-soft-bg) !important;
    color: var(--accent-soft-text) !important;
    border: 1px solid var(--accent-color) !important;
}

/* Мелкая картинка в списке «другие заведения» */

.other-img-container {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--bg-main);
}

/* ---------- Выбор города ---------- */

/* Раскладка в разметке: d-inline-flex align-center gap-1 pa-1 ml-n1 rounded-lg cursor-pointer */

.city-title {
    border-radius: var(--r-sm);
}

.city-title:hover {
    background: var(--accent-soft-bg);
}

.city-title-arrow {
    opacity: .5;
    font-size: 1.4rem !important;
}

/* ---------- Пустой список и призыв ---------- */

/* Раскладка в разметке: d-flex flex-column align-center justify-center */

.empty-state-wrapper {
    min-height: 400px;
}

.empty-icon {
    font-size: 5rem !important;
    opacity: .2;
}

.empty-state-text {
    max-width: 520px;
}

.cta-icon {
    font-size: 3rem !important;
    color: var(--accent-color);
    opacity: .8;
}

/* ---------- Экран ошибки «заведение не найдено» ---------- */

.error-icon {
    font-size: 3rem;
    color: var(--mud-palette-error);
}

.error-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.error-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    padding: 32px 28px;
    border-radius: var(--r-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    text-align: center;
}

.error-box h2 {
    margin: 0;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
}

/* ---------- Приветственный экран ---------- */

.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, var(--appbar-bg) 0%, var(--appbar-bg-2) 100%);
}

.btn-massive {
    padding: 25px 80px;
    border: none;
    border-radius: 60px;
    background: var(--accent-color);
    color: var(--on-accent);
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.btn-massive:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, .5);
}

/* Остальное содержимое приветственного экрана — перенесено из <style>
   WelcomeOverlay.razor 13.09.2026 как было (6а.24). Старые .welcome-screen
   и .btn-massive из того <style> (литералы #1e293b / #0f172a / #ff4b2b)
   удалены — их место заняли два правила выше на токенах кита; это
   единственное изменение вида: фон и кнопка стали фирменными. */

/* 1. Базовые стили */

.welcome-box {
    text-align: center;
}

.welcome-logo {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.1));
}

.welcome-title {
    color: white;
    font-size: 3rem;
    margin-bottom: 15px;
}

.welcome-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    max-width: 450px;
    margin: 0 auto;
    line-height: 1.5;
}

.language-center-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 80%;
    margin: 0 auto 40px auto;
}

.lang-btn-center {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 80px;
    white-space: nowrap;
}

.lang-btn-center.active {
    background: #ff4b2b;
    border-color: #ff4b2b;
    box-shadow: 0 0 20px rgba(255, 75, 43, 0.4);
}

/* 2. Адаптив (перекрывает базу) */

@media (max-width: 600px) {
    /* Кнопка на телефоне меньше — размер из старого <style>, цвета из кита.
       Кит-версия §6 мобильного размера не имела, 25px 80px на экране 360px
       не помещается. */
    .btn-massive {
        padding: 15px 40px;
        font-size: 1.2rem;
    }

    .welcome-title {
        font-size: 2rem;
    }

    .welcome-subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }

    .welcome-logo {
        width: 140px;
    }

    .language-center-container {
        margin-bottom: 20px;
        gap: 8px;
    }

    .lang-btn-center {
        padding: 8px 12px;
        min-width: 60px;
        font-size: 0.8rem;
    }
}

/* =============================================================
   8. СТРАНИЦА ЗАВЕДЕНИЯ
   RestaurantMenu.razor — шапка, карточка, вкладки, расписание,
   корзина-модалка.
   ============================================================= */

/* ---------- Загрузка страницы ---------- */

.page-loading {
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-main);
}

.dish-card-skeleton {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    opacity: .5;
}

/* ---------- Фото-шапка ---------- */

.hero-section {
    position: relative;
    width: 100%;
    background: var(--bg-main);
}

.main-photo {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 0 0 24px 24px;
}

.hero-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hero-track::-webkit-scrollbar {
    display: none;
}

/* flex: 0 0 100% — кадр всегда во всю ширину, иначе фото сжимаются
   в одну строку вместо листания */

.hero-track .main-photo {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    scroll-snap-align: center;
}

/* Раскладка в разметке: d-flex gap-2 */

.back-btn-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1300;
}

/* Меню «три точки» в правом верхнем углу фото. В разметке: absolute */

.venue-menu-anchor {
    top: 16px;
    right: 16px;
}

/* Круглые кнопки поверх фото и в мобильной полосе поиска */

.header-action-btn {
    width: var(--ctl-h-lg);
    height: var(--ctl-h-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card) !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 14px rgba(38, 35, 53, .18) !important;
    cursor: pointer;
}

.header-action-btn-wrapper {
    border-radius: 50%;
}

.header-action-btn-wrapper .header-action-btn {
    cursor: pointer;
    transition: transform .2s ease;
}

.header-action-btn-wrapper .header-action-btn:active {
    transform: scale(.9);
}

/* Обёртка карточки заведения: отрицательный отступ гасится ниже,
   в разделе раскладки .venue-top */

.info-card-container {
    padding-bottom: 20px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

/* ---------- Две колонки: фото слева, карточка справа ---------- */

.venue-top {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 16px;
    align-items: start;
    padding: 0 20px 16px 20px;
}

.venue-top > .hero-section {
    border-radius: var(--r-xl);
    overflow: hidden;
    height: 326px;
}

.venue-top .main-photo {
    height: 100%;
    border-radius: 0;
}

/* MudContainer внутри грида не должен ограничивать ширину колонки */

.venue-top .mud-container {
    max-width: none !important;
    padding: 0 !important;
}

/* Наезд карточки на фото больше не нужен — блоки рядом */

.venue-top .info-card-container {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Миниатюры галереи в правом нижнем углу фото. В разметке: d-flex gap-2 */

.venue-thumbs {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
}

.venue-thumb,
.venue-thumb-more {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: block;
    cursor: pointer;
}

.venue-thumb {
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .75);
}

.venue-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 17, 15, .65);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

/* ---------- Карточка заведения ---------- */

.venue-card {
    padding: 20px 22px;
}

.venue-title {
    font-weight: 700;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--text-primary);
    margin: 0;
}

/* ---------- Контакты ----------
   Раскладка в разметке: d-flex flex-wrap gap-2 mt-3. Горизонтальный
   зазор между контактами шире — задаётся здесь. */

.venue-contacts {
    column-gap: 22px;
}

.venue-contact {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.venue-contact:hover {
    color: var(--text-primary);
}

.venue-contact .mud-icon-root {
    font-size: 17px;
    color: var(--accent-color);
    flex: none;
}

/* ---------- О заведении ---------- */

.venue-about-text {
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-line;
}

.venue-about-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.venue-about-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--accent-soft-text);
    cursor: pointer;
}

/* ---------- Соцсети ----------
   Цвет берётся из --social-color, его ставит разметка. */

/* Раскладка в разметке: d-flex flex-wrap align-center gap-2 mt-3 */

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--social-color, var(--text-muted));
    background: color-mix(in srgb, var(--social-color, #888) 12%, transparent);
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.social-btn:hover,
.social-btn:focus-visible {
    background: var(--social-color, #888);
    color: #fff !important;
}

/* ---------- Пилюли действий ----------
   Раскладка целиком в css: Mud-утилиты (.d-flex, .gap-2) идут с !important
   и перебивали бы мобильный grid — в разметке только .venue-actions + .mt-4. */

.venue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.venue-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--ctl-h);
    padding: 0 16px;
    border-radius: var(--r-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.venue-pill .mud-icon-root {
    font-size: 17px;
    color: var(--action-color);
    flex: none;
}

/* Активное состояние — «В избранном» */

.venue-pill.is-active {
    background: var(--accent-soft-bg);
    border-color: var(--accent-color);
}

.venue-pill.is-active .mud-icon-root {
    color: var(--accent-soft-text);
}

/* ---------- Бейдж галереи в углу карточки ---------- */

.venue-gallery-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--bg-card-active);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.venue-gallery-badge .mud-icon-root {
    font-size: 15px;
    color: var(--accent-color);
}

.venue-gallery-badge:active {
    transform: scale(.95);
}

/* Иконки галереи — светлые поверх фото */

.mud-carousel .mud-icon-button {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
    width: 48px;
    height: 48px;
    backdrop-filter: blur(6px);
}

.mud-carousel .mud-icon-button:hover {
    background: rgba(255, 255, 255, .26) !important;
}

.mud-carousel .mud-icon-button .mud-icon-root {
    font-size: 28px;
    color: #fff !important;
}

/* ---------- Липкие вкладки категорий ---------- */

.tabs-scroll {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 0 10px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.tabs-scroll::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex: 0 0 auto;
    padding: 10px 22px;
    border-radius: 24px;
    background: var(--bg-main);
    color: var(--text-primary);
    font-weight: 700;
    font-size: .95rem;
}

.tab-btn.active {
    background: var(--accent-color) !important;
    color: var(--on-accent) !important;
}

/* Стрелки прокрутки вкладок */

/* ---------- Модальное окно корзины ----------
   z-index 1300 — ниже диалогов MudBlazor (1400). */

.custom-cart-modal {
    background: var(--bg-card);
    width: 500px;
    max-width: 95vw;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: modalScaleIn .3s cubic-bezier(.34, 1.56, .64, 1);
}

.cart-items-scroll {
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.cart-items-scroll::-webkit-scrollbar {
    display: none;
}

/* ---------- Окно расписания ---------- */

/* Раскладка в разметке: d-flex flex-column gap-2 pa-3 */

.schedule-list {
    background-color: var(--bg-main) !important;
    border-radius: 18px;
}

/* Раскладка в разметке: d-flex justify-space-between align-center */

.schedule-item {
    min-height: 54px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(38, 35, 53, .02);
}

.day-name {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: .85rem;
}

.time-range {
    color: var(--text-primary) !important;
    font-family: ui-monospace, 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: .9rem;
}

.break-info {
    color: var(--text-muted) !important;
    font-size: .75rem;
}

/* Сегодняшний день — акцентом */

.schedule-item.today-active {
    background: var(--accent-color) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(38, 35, 53, .18) !important;
}

.schedule-item.today-active .day-name,
.schedule-item.today-active .time-range,
.schedule-item.today-active .break-info,
.schedule-item.today-active .mud-icon-root {
    color: var(--on-accent) !important;
}

/* ---------- Мобильный: страница заведения ---------- */

/* =============================================================
   9. КАТАЛОГ МЕНЮ
   Контейнер сетки живёт в RestaurantMenu.razor, карточка — в
   MenuCardStyleI.razor. Селектор «.dish-grid.is-grid .dish-card»
   идёт через границу двух компонентов, поэтому файл глобальный.
   ============================================================= */

/* ---------- Сетка блюд ---------- */

.dish-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
}

/* Вид «Список»: карточка тянется на высоту ряда, подвал уходит
   к низу — у блюд без описания цена и «+» иначе подскакивают */

.dish-grid:not(.is-grid) .dish-card {
    align-items: stretch;
}

.dish-grid:not(.is-grid) .dish-card-main {
    justify-content: space-between;
}

/* Вид «Сетка» — три колонки, карточки не тянутся по высоте ряда */

.dish-grid.is-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: 12px;
}

/* ---------- Карточка блюда: вид «Список» ---------- */

/* В разметке: relative overflow-hidden cursor-pointer.
   display/gap/padding остаются здесь — их переопределяет вид «Сетка»
   (.dish-grid.is-grid .dish-card ниже), утилитой так не сделать. */

.dish-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 14px 10px 10px;
    border-radius: var(--r-lg);
    background: var(--bg-main);
    border: 1px solid rgba(70, 76, 116, .14);
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dish-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.dish-card:active {
    transform: scale(.995);
}

/* В разметке: flex-none */

.dish-card-photo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 13px;
    background: var(--bg-main);
}

.dish-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dish-card-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

/* ---------- Описание с «показать ещё» ----------
   Обрезку на две строки считает menu-desc-clamp.js: он подбирает
   длину так, чтобы кнопка встала в конец последней строки, а не
   отдельным абзацем. Поэтому здесь нет line-clamp — только высота. */

.dish-card-desc {
    color: var(--text-muted);
    margin-top: 1px;
    min-height: 34px;
    line-height: 18px;
    text-align: justify;
    hyphens: auto;
}

.dish-desc-more,
.dish-desc-less {
    display: none;
    float: right;
    margin-left: 10px;
    color: var(--accent-soft-text);
    /* Тот же кегль и высота строки, что у текста: float выравнивается по
       верху строки, и при другом шрифте базовые линии не совпадают */
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Скрипт вешает is-shown только там, где текст реально не влез */

.dish-desc-more.is-shown {
    display: inline-block;
}

.dish-card-desc.is-open .dish-desc-more {
    display: none;
}

.dish-card-desc.is-open .dish-desc-less {
    display: inline-block;
}

/* ---------- Подвал: цена + кнопка ---------- */

/* Раскладка в разметке: d-flex align-center gap-2 */

/* В разметке: d-flex align-baseline flex-grow-1 gap-2 */

.dish-card-figures {
    min-width: 0;
}

.dish-card-price {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.dish-card-meta {
    color: var(--text-faint);
    font-weight: 500;
    font-size: 12px;
}

/* Тон и наведение — в ките (.icon-btn.is-soft), здесь только размер */

.dish-card-add {
    width: var(--ctl-h);
    height: var(--ctl-h);
    font-size: 19px;
}

/* ---------- Карточка блюда: вид «Сетка» ----------
   Разметка та же, меняется только раскладка. */

.dish-grid.is-grid .dish-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 18px;
}

.dish-grid.is-grid .dish-card-photo {
    width: 100%;
    min-height: 200px;
    min-width: 0;
    border-radius: 0;
}

.dish-grid.is-grid .dish-card-main {
    flex: 1;
    padding: 12px 14px 14px;
    gap: 6px;
}

.dish-grid.is-grid .dish-card-name {
    font-size: 14.5px;
    line-height: 1.35;
}

/* Цена под весом, а не рядом — в узкой колонке читается лучше */

.dish-grid.is-grid .dish-card-figures {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 5px;
}

.dish-grid.is-grid .dish-card-price {
    font-size: 18px;
}

.dish-grid.is-grid .dish-card-foot {
    margin-top: auto;
    padding-top: 8px;
}

/* В разметке: absolute */

.dish-cam-btn {
    top: 6px;
    left: 6px;
    z-index: 5;
    opacity: .6;
    color: var(--text-primary);
}

/* ---------- Полоса каталога и переключатель вида ----------
   Липкая: держится под шапкой всё время, пока идёт каталог.
   Фон обязателен, иначе под полосой просвечивают карточки. */

/* Раскладка в разметке: sticky d-flex align-center gap-3 */

.catalog-head {
    top: var(--mud-appbar-height, 64px);
    z-index: 20;
    padding: 15px 9px 8px;
    background: var(--bg-main);
}

/* ---------- Разделы и подразделы каталога ---------- */

.root-category-shell {
    padding: 0 14px;
}

/* Линия-разделитель под заголовком: отрицательные отступы растягивают
   её на всю ширину подложки, положительный padding возвращает
   содержимое */

.root-category-shell > .category-content-wrapper {
    border-top: 1px solid var(--border-color);
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px 14px;
}

/* Чередование фона отключено — все разделы одинаковые. Классы
   .root-shell-a / -b ставит C# по чётности индекса; если чередование
   понадобится снова, достаточно развести цвета здесь. */

.root-shell-a,
.root-shell-b {
    background: var(--bg-card);
}

/* Раскладка в разметке: d-flex align-center gap-3 py-3 cursor-pointer */

.root-category-head .mud-typography {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.25;
}

/* В разметке: flex-grow-1 */

.root-category-title {
    min-width: 0;
}

.sub-category-section {
    padding-top: 12px;
}

/* Раскладка в разметке: d-flex align-center gap-3 cursor-pointer */

.sub-category-head {
    padding: 10px 14px;
    border: none;
    border-radius: 13px;
    background: var(--bg-main);
    font-weight: 700;
    flex-shrink: 0;
    transition: background .15s;
}

.sub-category-head.is-open {
    background: var(--accent-soft-bg);
}

.sub-category-head.is-open .sub-cat-name,
.sub-category-head.is-open .count {
    color: var(--accent-soft-text);
}

.sub-category-head.is-open .count {
    background: var(--bg-card);
}

.sub-cat-name {
    color: var(--text-primary);
}

/* ---------- Панели категорий (старые стили A–H) ---------- */

.menu-flow {
    padding-bottom: 100px;
}

/* ---------- Мобильный: каталог ---------- */

/* =============================================================
   10. САЙДБАР РАЗДЕЛОВ
   Десктоп — липкая колонка, мобильный — выезд слева.
   Классы MudBlazor трогаем только внутри .drawer-menu.
   ============================================================= */

/* Заголовок «Разделы меню» — только в мобильном выезде; на десктопе
   его печатает MudText внутри venue-card */

.sidebar-mhead {
    display: none;
}

.drawer-menu .sidebar-desktop-title {
    flex: 0 0 auto;
}

/* ---------- Поиск в сайдбаре ----------
   Низкое поле 42px, радиус 13, фон панели, без рамки. Правила только
   внутри .drawer-menu — на остальные поля приложения не влияют.
   
   flex: none обязателен: внутри flex-колонки .venue-card MudBlazor
   растягивает .mud-input-control, поле съедает всю свободную высоту,
   и список разделов уезжает вниз — это и есть «провал под поиском». */

.drawer-menu .mud-input-control {
    flex: 0 0 auto !important;
    margin: 10px 0 !important;
}

.drawer-menu .mud-input-helper-text:empty {
    display: none;
}

.drawer-menu .mud-input {
    height: 42px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 13px;
    background: var(--bg-main);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-primary);
}

.drawer-menu .mud-input > .mud-input-outlined-border {
    display: none !important;
}

.drawer-menu .mud-input.mud-input-underline:before,
.drawer-menu .mud-input.mud-input-underline:after {
    display: none !important;
}

.drawer-menu .mud-input-slot,
.drawer-menu .mud-input input {
    padding: 0 !important;
    height: 42px;
    font-weight: 500;
    font-size: 12.5px;
}

.drawer-menu .mud-input-slot::placeholder {
    color: var(--text-faint);
}

.drawer-menu .mud-input-adornment-start {
    margin-right: 9px;
    color: var(--text-faint);
}

.drawer-menu .mud-input-adornment .mud-icon-root {
    font-size: 18px;
}

.drawer-menu .mud-input-clear-button {
    color: var(--text-faint);
}

/* ---------- Список разделов ----------
   Свою прокрутку оставляем ему (сайдбар фиксированной высоты). */

.sidebar-nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* ---------- Строка раздела ---------- */

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 9px;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}

.nav-item:hover {
    background: var(--bg-main);
}

.nav-item.is-active {
    background: var(--accent-soft-bg);
}

.nav-item-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-primary);
}

.nav-item.is-active .nav-item-title {
    color: var(--accent-soft-text);
}

.nav-item-count {
    flex: none;
    font-weight: 600;
    font-size: 11px;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--text-faint);
}

.nav-item.is-active .nav-item-count {
    color: var(--accent-soft-text);
}

.nav-item-chev {
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: .6;
    transition: transform .18s ease-out;
}

.nav-item.is-open .nav-item-chev {
    transform: rotate(180deg);
}

.nav-item.is-active .nav-item-chev {
    color: var(--accent-soft-text);
}

.nav-item-chev.is-empty {
    visibility: hidden;
}

/* ---------- Вложенные уровни ---------- */

.nav-subs {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0 7px 12px;
}

/* Со второго уровня строки мельче и спокойнее по цвету */

.nav-subs .nav-item {
    padding: 7px 10px;
    border-radius: 9px;
}

.nav-subs .nav-item-title {
    font-weight: 600;
    color: var(--text-muted);
}

.nav-subs .nav-item.is-active {
    background: transparent;
}

.nav-subs .nav-item.is-active .nav-item-title {
    color: var(--accent-soft-text);
}

.nav-subs .nav-item-count {
    font-size: 10.5px;
}

/* =============================================================
   10.9 ВЫЕЗДНАЯ ПАНЕЛЬ (.drawer) — одна механика на все панели
   Страница ставит рядом только класс-модификатор (.drawer-menu,
   .drawer-admin) и задаёт в нём токены и цвета. Геометрию, анимацию
   и жест правим здесь — оба выезда меняются вместе.

   Токены модификатора:
     --drawer-w     ширина панели
     --drawer-max   предел ширины (в vw)
     --drawer-top   отступ сверху (шапка приложения)

   ПОРЯДОК В РАЗМЕТКЕ: подложка идёт СРАЗУ ПОСЛЕ панели — она ловит
   её состояние селектором .drawer[data-open="1"] ~ .drawer-backdrop.

   Открытие и закрытие — чистый CSS от data-open, который рисует
   Blazor. JS для них не нужен вообще: гамбургер, крестик и клик по
   подложке работают, даже если скрипт не загрузился. 12.09.2026

   JS (sidebarSwipe в app-interop.js) добавляет ровно две вещи:
     · html.drawer-ready — включает transition. Класс ставится через
       кадр после старта, поэтому первый рендер страницы (и возврат
       «назад» в админке) не анимируется: панель не может проехать
       по экрану. Это был баг «выезжает и прячется»;
     · html[data-drawer="dragging"] + прогресс 0..1 в --drawer-p —
       панель и подложка идут за пальцем от одной переменной и не
       могут разъехаться. На время жеста transition снят.
   ============================================================= */

:root {
    /* Тень выехавшей панели. Отдельно от --shadow: там мягкая тень
       карточек, здесь глубокая — панель висит над всей страницей */
    --drawer-shadow: 0 22px 54px rgba(0, 0, 0, .32);
}

.drawer-backdrop {
    display: none;
}

body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 959px) {

    .drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: var(--drawer-top, 0px);
        bottom: 0;
        z-index: 1300;
        width: var(--drawer-w, 288px);
        max-width: var(--drawer-max, 86vw);
        /* Вертикаль отдаём странице, горизонталь забираем себе —
           без этого Chrome на Android глотает начало жеста */
        touch-action: pan-y;
        overscroll-behavior: contain;
        transform: translate3d(-100%, 0, 0);
    }

    .drawer[data-open="1"] {
        transform: translate3d(0, 0, 0);
    }

    .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1290;
        background: rgba(20, 17, 15, .42);
        /* Закрыта наглухо: невидимая подложка поверх страницы съедала
           все касания, если состояние по какой-то причине не пришло */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .drawer[data-open="1"] ~ .drawer-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Анимация появляется только после первого кадра (см. drawer-ready).
       Длительность JS считает от остатка пути и скорости пальца —
       доводка продолжает жест, а не стартует заново. */

    html.drawer-ready .drawer {
        transition: transform var(--drawer-dur, 240ms) cubic-bezier(.22, .61, .36, 1);
    }

    html.drawer-ready .drawer-backdrop {
        transition: opacity var(--drawer-dur, 240ms) linear,
                    visibility var(--drawer-dur, 240ms) linear;
    }

    /* Слой готовим по касанию, до первого кадра движения */

    .drawer.is-dragging {
        will-change: transform;
    }

    /* Панель ведут пальцем: позиция из прогресса, анимация выключена */

    html[data-drawer="dragging"] .drawer {
        transform: translate3d(calc((var(--drawer-p, 0) - 1) * 100%), 0, 0);
        transition: none;
    }

    html[data-drawer="dragging"] .drawer ~ .drawer-backdrop {
        opacity: var(--drawer-p, 0);
        visibility: visible;
        pointer-events: none;
        transition: none;
    }
}

/* ---------- Кнопка выезда (гамбургер) ----------
   Один вид на гостя и админку. За основу взят гостевой вариант из
   мобильной полосы поиска: акцентный квадрат с радиусом 14 — раньше
   он собирался из .header-action-btn и трёх переопределений с
   !important, а в админке была своя кнопка на .icon-btn.

   Модификаторы .drawer-toggle-menu / .drawer-toggle-admin своих правил
   пока не имеют — стоят в разметке под будущие отличия.

   Только на телефоне: на десктопе панель видна всегда и открывать
   её нечем. */

.drawer-toggle {
    display: none;
}

@media (max-width: 959px) {

    .drawer-toggle {
        flex: 0 0 var(--ctl-h-lg);
        width: var(--ctl-h-lg);
        height: var(--ctl-h-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 14px;
        background: var(--accent-color);
        color: var(--on-accent);
        box-shadow: none;
        cursor: pointer;
        transition: transform .15s ease;
    }

    /* MudIcon внутри красится отдельно — свой color он ставит сам */

    .drawer-toggle .mud-icon-root {
        color: var(--on-accent);
    }

    .drawer-toggle:active {
        transform: scale(.92);
    }
}

/* =============================================================
   11. ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ
   Капсула корзины, мобильная полоса поиска, кнопка «вверх».
   Вариант А капсулы (старый вид) удалён — он лежит в истории git.
   ============================================================= */

/* Раскладка в разметке: fixed d-flex align-center gap-4 cursor-pointer */

.floating-cart-bar {
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: max-content;
    max-width: min(calc(100vw - 32px), 620px);
    min-height: 48px;
    padding: 12px 14px 12px 24px;
    border-radius: var(--r-pill);
    background: var(--dark-surface);
    color: #fff;
    border: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.floating-cart-bar.visible {
    visibility: visible;
    opacity: 1;
}

/* Текстовая зона: надпись, точка и счётчик — три отдельных элемента
   в flex с переносом. Счётчик неделим (flex: none + nowrap): либо
   стоит в строке с надписью, либо целиком уходит на вторую строку.
   Сумма в переносе не участвует и всегда видна полностью. */

/* В разметке: d-flex flex-wrap align-center flex-grow-1 */

.floating-cart-bar .cart-text {
    min-width: 0;
    row-gap: 3px;
}

.floating-cart-bar .cart-label {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14.5px;
    color: #fff;
}

.floating-cart-bar .cart-label .mud-typography {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    color: #fff !important;
}

/* Точка-разделитель: отступы задаются только здесь */

.floating-cart-bar .cart-dot {
    flex: none;
    width: 5px;
    height: 5px;
    margin: 0 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

.floating-cart-bar .cart-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .7);
    font-variant-numeric: tabular-nums;
}

/* В разметке: d-flex flex-column align-center justify-center flex-none */

.floating-cart-bar .cart-total {
    height: 38px;
    padding: 0 16px;
    font-size: 14.5px;
    border-radius: var(--r-pill);
    background: var(--accent-color);
    color: var(--on-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.floating-cart-bar .cart-total .mud-typography {
    color: var(--on-accent) !important;
    font-weight: 800;
}

.floating-cart-bar .cart-total .mud-typography-caption {
    color: color-mix(in srgb, var(--on-accent) 70%, transparent) !important;
    font-weight: 600;
}

.floating-cart-bar .cart-total .mud-typography-h6 {
    font-size: 1rem !important;
}

.cart-bucket-icon {
    display: none;
}

.cart-pulse {
    animation: cart-pulse-anim .45s ease-out;
}

/* ---------- Кнопка «вверх» ---------- */

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: var(--on-accent);
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    cursor: pointer;
    opacity: 0;
    transform: translateY(100px);
    /* Скрытая кнопка не должна ловить клики и перекрывать корзину */
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---------- Мобильная полоса поиска ---------- */

/* =============================================================
   12. ОКНО БЛЮДА
   MudDialog рендерится внутри MudDialogProvider в конце body — вне
   компонента, поэтому изоляция Blazor до него не доходит и правила
   должны быть глобальными.
   
   Раскладка и отступы — утилитами Mud в разметке (5.7); здесь только
   рамки, цвета, размеры и то, чего у утилит нет (gap 2px, grid).
   ============================================================= */

.dish-dialog {
    width: 390px !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    border-radius: 24px !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35) !important;
    overflow: hidden;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

/* Внутренние части MudDialog по умолчанию прозрачные */

.dish-dialog .mud-dialog-title,
.dish-dialog .mud-dialog-content,
.dish-dialog .mud-dialog-actions {
    background: var(--bg-card) !important;
}

.dish-dialog .mud-dialog-title {
    padding: 0 !important;
}

.dish-dialog .mud-dialog-content {
    padding: 0 !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.dish-dialog .mud-dialog-actions {
    padding: 0 !important;
    min-height: 0 !important;
}

/* ---------- Шапка окна ---------- */

/* Раскладка в разметке: d-flex align-center gap-3 pa-3 */

.dish-dialog-head {
    border-bottom: 1px solid var(--border-color);
}

/* В разметке: flex-none object-cover cursor-pointer */

.dish-dialog-photo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: block;
    background: var(--bg-main);
}

/* В разметке: d-flex align-center justify-center */

.dish-dialog-photo-ph {
    color: var(--text-faint);
}

/* В разметке: d-flex flex-column flex-grow-1 cursor-pointer */

.dish-dialog-titles {
    min-width: 0;
    gap: 2px;
}

/* В разметке: d-flex align-center gap-1 */

.dish-dialog-mode {
    color: var(--text-faint);
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dish-dialog-name {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
}

/* ---------- Общее ---------- */

/* Отступы в разметке: px-4 pt-4 pb-1. Класс — адрес для селекторов */

/* ---------- Плитки порций ---------- */

/* В разметке: mt-3 */

.portion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Плитка — это .chip.is-tile; своих правил у неё нет, класс оставлен
   как адрес для .portion-dot ниже */

/* В разметке: d-flex align-end justify-center */

.portion-dot-slot {
    height: var(--ctl-h-lg);
}

/* Кружок растёт от порции к порции: видно, что 500 г больше 300 г,
   без чтения цифр */

.portion-dot {
    display: block;
    border-radius: 50%;
    background: var(--border-color);
    transition: all .15s;
}

.portion-tile.is-active .portion-dot {
    background: var(--accent-color);
}

.portion-grams {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.portion-price {
    color: var(--text-faint);
    font-weight: 600;
    font-size: 10px;
}

/* ---------- Свой вес ---------- */

/* Раскладка в разметке: d-flex align-center justify-center gap-2 mt-3 */

/* В разметке: d-inline-flex align-center gap-1 cursor-pointer */

.weight-custom-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    user-select: none;
}

/* ---------- Количество ---------- */

/* Раскладка в разметке: d-flex align-center justify-space-between gap-3 mx-4 mt-4 pa-4 */

.qty-block {
    border-radius: 18px;
    background: var(--bg-main);
}

/* В разметке: d-flex flex-column */

.qty-block-texts {
    gap: 2px;
    min-width: 0;
}

.qty-block-total {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11.5px;
}

/* Раскладка в разметке: d-flex align-center gap-3 flex-none */

.qty-btn {
    width: 42px;
    height: 42px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    transition: color .15s, background .15s;
}

/*.qty-btn:hover {
   color: var(--accent-color);
   }*/

/* Плюс — главное действие: class="qty-btn is-accent", тон в ките */

/* ---------- Поля ручного ввода ----------
   Всегда в DOM: на iOS клавиатура открывается только по касанию
   самого input — программный фокус после перерисовки Blazor система
   игнорирует. Поэтому поле по умолчанию выглядит как обычный текст,
   рамка появляется только при фокусе. Стрелки браузера скрыты: они
   дублируют кнопки ± и ломают выравнивание. */

.qty-value-input,
.weight-value-input {
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

.qty-value-input::-webkit-outer-spin-button,
.qty-value-input::-webkit-inner-spin-button,
.weight-value-input::-webkit-outer-spin-button,
.weight-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-value-input:focus,
.weight-value-input:focus {
    border-color: var(--accent-color);
    background: var(--bg-card);
}

/* Количество — крупная цифра между кнопками ± */

.qty-value-input {
    width: 68px;
    padding: 0;
    border-radius: var(--r-md);
    font-weight: 800;
    font-size: 28px;
}

/* Свой вес — мелкий жирный текст внутри строки. Пунктир снизу
   подсказывает, что значение можно ввести руками */

.weight-value-input {
    width: 54px;
    padding: 1px 4px;
    border-radius: var(--r-sm);
    border-bottom: 1px dashed var(--border-color);
    font-weight: 800;
    font-size: 12px;
}

.weight-value-input:focus {
    border-bottom-style: solid;
}

/* ---------- Чипы количества ---------- */

/* Отступы в разметке: px-4 pt-3 */

.qty-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* Тон и is-active — в ките (.chip). Здесь только высота ряда:
   подсветка снимается сама, класс висит только на чипе, равном
   текущему количеству. */

.qty-chip {
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    padding: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---------- Подвал окна ---------- */

/* Раскладка в разметке: d-flex align-center gap-2 mud-width-full px-4 pt-3 pb-4 */

/* В разметке: flex-none d-flex align-center justify-center cursor-pointer */

.dish-dialog-del {
    width: 46px;
    height: 56px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    color: var(--mud-palette-error);
    transition: all .15s;
}

.dish-dialog-del:hover {
    border-color: var(--mud-palette-error);
    background: var(--bg-main);
}

/* В разметке: flex-grow-1 d-flex align-center justify-space-between gap-2 cursor-pointer.
   padding остаётся — на <600px он меняется медиазапросом */

.dish-dialog-submit {
    min-width: 0;
    height: 56px;
    border: none;
    border-radius: var(--r-lg);
    padding: 0 22px;
    background: var(--accent-color);
    color: var(--on-accent);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: background .15s;
}

.dish-dialog-submit:hover {
    background: var(--accent-soft-text);
    /*color: #fff;
    *: */;
}

/* В разметке: d-flex flex-column align-end */

.dish-dialog-submit-sum {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dish-dialog-submit-sum small {
    font-weight: 400;
    font-size: 13px;
    opacity: .85;
}

/* ---------- Режим полного описания ----------
   У .mud-dialog-content padding обнулён, чтобы шапка и плитки
   прилегали к краям, поэтому описание задаёт поля само. */

/* Раскладка в разметке: d-flex flex-column gap-3 px-4 pt-4 pb-5 */

/* В разметке: d-block object-cover mud-width-full */

.dish-dialog-info-photo {
    height: 200px;
    border-radius: var(--r-lg);
    background: var(--bg-main);
}

/* В разметке: text-center */

.dish-dialog-info-name {
    color: var(--text-primary);
    font-weight: 900;
    font-size: 22px;
    line-height: 1.2;
}

.dish-dialog-info-text {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* =============================================================
   13. ТЁМНАЯ ТЕМА
   Только то, что нельзя решить переменной в CityPulseTheme.cs.
   
   Причина: в тёмной палитре --dark-surface темнее фона страницы
   --bg-main, поэтому капсула корзины, мобильная полоса и бейдж
   счётчика сливаются с фоном.
   ============================================================= */

body.dark-theme .header-action-btn {
    background: var(--bg-card) !important;
    box-shadow: 0 0 18px rgba(0, 0, 0, .45) !important;
}

/* Тонкая светлая рамка и более глубокая тень: на тёмном фоне край
   плашки иначе не читается даже при светлой подложке */

body.dark-theme .mobile-nav-wrapper {
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}

/* Гамбургер — акцентный, как пилюля суммы в корзине. body.dark-theme
   в селекторе обязателен: иначе кнопку перекрашивает правило выше
   (специфичность) и она становится серой. */

body.dark-theme .mobile-nav-wrapper .header-action-btn {
    background: var(--accent-color) !important;
    color: var(--on-accent) !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .mobile-nav-wrapper .header-action-btn .mud-icon-root {
    color: var(--on-accent) !important;
}

body.dark-theme .floating-cart-bar {
    box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
}

/* =============================================================
   14. ПОВЕДЕНИЕ ПРИ КАСАНИИ
   Один список на всё приложение (было три). Элементы управления
   не выделяются двойным кликом, долгое нажатие не открывает
   системное меню «Копировать», серой вспышки Android нет.
   
   Поля ввода, адрес и телефон сюда намеренно не входят — их текст
   пользователь может захотеть выделить и скопировать.
   ============================================================= */

.btn,
.icon-btn,
.chip,
.seg-btn,
.nav-item,
.qty-btn,
.dish-dialog-submit,
.dish-dialog-del,
.header-action-btn,
.drawer-toggle,
.venue-pill,
.venue-thumb,
.venue-thumb-more,
.venue-about-toggle,
.social-btn,
.favorite-button,
.tab-btn,
.city-title,
.root-category-head,
.sub-category-head {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* =============================================================
   15. ФОРМА ЗАВЕДЕНИЯ
   AddOrganization.razor. Панели — .surface, поля — .field.is-labeled,
   кнопки — .btn, заголовки — .section-head. Здесь только то,
   чего в ките нет: превью фото, оффер, иконки экранов состояния.
   ============================================================= */

/* В разметке: mb-4 */

.success-icon,
.auth-icon {
    font-size: 5rem !important;
}

.success-icon {
    color: var(--ok-color);
}

.auth-icon {
    color: var(--accent-color);
    opacity: .7;
}

/* Превью загруженных фото. Поведение картинки — в .photo,
   раскладка ряда в разметке: d-flex flex-wrap gap-3 */

.photo-thumb {
    width: 120px;
    height: 120px;
    border-radius: var(--r-md);
    border: 2px solid var(--border-color);
}

.photo-thumb.is-main {
    border-color: var(--accent-color);
}

/* В разметке: absolute text-center */

.photo-main-badge {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 0;
    background: var(--accent-color);
    color: var(--on-accent);
    font-size: .65rem;
    font-weight: 700;
}

/* В разметке: absolute */

.photo-remove {
    top: 2px;
    right: 2px;
    background: var(--bg-card) !important;
    opacity: .9;
    border-radius: var(--r-sm) !important;
}

/* Предложение автоматизации — пунктирная плашка предупреждающего тона.
   В разметке: pa-4 */

.offer-block {
    border-radius: 14px;
    border: 1px dashed var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
}

.offer-free {
    font-weight: 700;
    color: var(--mud-palette-warning);
}

/* =============================================================
   МЕДИА-ЗАПРОСЫ — все в одном месте, два брейкпоинта.
   Порядок обязателен: desktop → tablet (≤959) → phone (≤600).
   Внутри блока правила идут в порядке разделов файла выше —
   не переставлять, иначе поменяется каскад.
   ============================================================= */

/* =============================================================
   Только десктоп (≥960)
   ============================================================= */

@media (min-width: 960px) {
    /* ---- см. базовые правила ---- */

    .mud-main-content,
    .mud-container,
    .menu-layout-container {
        overflow: visible !important;
    }

    .menu-layout-container {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    /* Один top с .catalog-head — зазора между шапкой и полосой нет */

    .drawer-menu {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: var(--mud-appbar-height, 64px);
        width: 268px;
        min-width: 268px;
        /* max-height вместо height: сайдбар начинается ниже карточки
           заведения, и при жёсткой высоте его низ уезжает за экран,
           пока страница не прокручена до точки прилипания */
        max-height: calc(100vh - var(--mud-appbar-height, 64px) - 24px);
        z-index: 10;
    }

    .drawer-menu .venue-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .mobile-nav-wrapper {
        display: none !important;
    }

    .menu-main-content {
        flex-grow: 1;
        min-width: 0;
        padding-top: 0;
    }

}

/* =============================================================
   Планшет и телефон (≤959; сюда же влиты бывшие ≤900)
   ============================================================= */

@media (max-width: 959px) {

    /* Шкала шрифтов на телефоне на шаг крупнее: всё, что стоит на
       токенах, подрастает одной правкой (10.09.2026) */

    :root {
        --fs-2xs: 11px;
        --fs-xs: 13px;
        --fs-sm: 14px;
        --fs-md: 15px;
        --fs-lg: 17px;
        --fs-xl: 19px;
        --fs-2xl: 24px;
    }
}

@media (max-width: 959px) {
    /* ---- см. базовые правила ---- */

    .mud-main-content,
    .mud-container {
        overflow: visible !important;
    }

    /* ---- Мобильный: страница заведения ---- */

    .tab-btn.active {
        box-shadow: 0 2px 8px rgba(38, 35, 53, .25);
    }

  /*  .menu-main-content {
        padding-top: 10px !important;
    }*/

    /* ---- см. базовые правила (было (max-width: 900px)) ---- */

    .venue-top {
        grid-template-columns: 1fr;
/*        gap: 12px;*/
        padding: 0 16px 16px 16px;
    }

    .venue-top > .hero-section {
        height: 240px;
        border-radius: 18px;
    }

    /* ---- Мобильный: каталог ---- */

    /* На мобильном липкая уже .mobile-nav-wrapper — второй липкий
       блок мешает */

    .catalog-head {
        position: static;
    }

    .catalog-head-title {
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
        font-weight: 600;
        font-size: var(--fs-xs);
    }

        .catalog-head-title.is-lg {
            font-weight: 800;
            font-size: var(--fs-md);
            line-height: 1.25;
        }

    .catalog-head-line {
        flex: 1 1 12px;
        min-width: 12px;
    }

    /* ---- см. базовые правила (было (max-width: 900px)) ---- */

    /* Обе раскладки — одна колонка */

    .dish-grid,
    .dish-grid.is-grid {
        grid-template-columns: 1fr;
    }

    /* Пустое описание не должно занимать высоту */

    .dish-card-desc {
        min-height: 0;
    }

    .dish-card-desc:empty {
        display: none;
    }

    /* ---- Выезд: механика в §10.9, здесь только свои размеры ---- */

    .drawer-menu {
        --drawer-w: 292px;
        --drawer-max: 86vw;
        --drawer-top: var(--mud-appbar-height, 64px);
        padding: 0;
    }

    .drawer-menu .venue-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-radius: 0 var(--r-xl) var(--r-xl) 0 !important;
        box-shadow: none !important;
    }

    /* Тень — только пока панель видна: закрытая иначе светит
       из-за левого края */

    .drawer-menu[data-open="1"] .venue-card,
    html[data-drawer="dragging"] .drawer-menu .venue-card {
        box-shadow: var(--drawer-shadow) !important;
    }

    /* Обёртки MudBlazor по умолчанию не сжимаются: без min-height:0
       список не отдаёт высоту и уезжает за нижний край */

    .drawer-menu .venue-card > *,
    .drawer-menu .mud-card-content,
    .drawer-menu .mud-paper {
        min-height: 0;
    }

    .sidebar-nav-scroll {
        flex: 1 1 auto;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Заголовок с крестиком вместо MudText */

    .drawer-menu .sidebar-desktop-title {
        display: none;
    }

    /* Раскладка в разметке: align-center justify-space-between gap-2 mb-3;
       display остаётся здесь — на десктопе блок скрыт */

    .sidebar-mhead {
        display: flex;
        flex: none;
    }

    /* Заголовок тянется на всю строку, крестик прижат к правому краю */

    .sidebar-mhead > :first-child {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    .sidebar-mhead .sidebar-mhead-close {
        margin-left: auto;
    }

    /* Поиск в выезде не нужен: он уже есть в мобильной полосе
       с гамбургером */

    .drawer-menu .mud-input-control {
        display: none !important;
    }

    /* ---- Мобильная полоса поиска ---- */

    .mobile-nav-wrapper {
        position: sticky;
        top: var(--mud-appbar-height, 64px);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px;
        margin: 0 0 12px;
        border-radius: 20px;
        border: none;
        background: var(--dark-surface);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    }

    .mobile-nav-wrapper .header-action-btn {
        flex: 0 0 var(--ctl-h-lg);
        width: var(--ctl-h-lg);
        height: var(--ctl-h-lg);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--accent-color) !important;
        color: var(--on-accent) !important;
        border: none;
        box-shadow: none !important;
    }

    .mobile-nav-wrapper .mud-input-control {
        background: rgba(255, 255, 255, .08) !important;
        border-radius: 14px;
        margin: 0 !important;
    }

    .mobile-nav-wrapper .mud-input {
        height: var(--ctl-h-lg);
        min-height: var(--ctl-h-lg);
    }

    .mobile-nav-wrapper .mud-input-control input {
        color: #fff !important;
        font-weight: 500;
        font-size: 13px;
    }

    .mobile-nav-wrapper .mud-input-control input::placeholder {
        color: rgba(255, 255, 255, .5) !important;
        opacity: 1;
    }

    .mobile-nav-wrapper .mud-input-control .mud-input-adornment .mud-icon-root,
    .mobile-nav-wrapper .mud-input-clear-button {
        color: rgba(255, 255, 255, .5) !important;
    }

    .mobile-nav-wrapper .mud-input > .mud-input-outlined-border {
        display: none !important;
    }

}

/* =============================================================
   Телефон (≤600; сюда же влиты бывшие ≤599)
   ============================================================= */

@media (max-width: 600px) {
    /* ---- см. базовые правила ---- */

    .est-grid {
        width: 100%;
        margin: 0;
    }

    .est-grid > .mud-grid-item {
        padding: 0 0 16px;
    }

    /* ---- см. базовые правила ---- */

    .venue-top,
    .menu-layout-container {
        margin-left: -16px;
        margin-right: -16px;
    }

    .venue-card {
        padding: 16px;
        border-radius: 18px;
    }

    .venue-title {
        font-size: 21px;
        padding-right: 52px;
    }

    .venue-contacts {
        column-gap: 14px;
    }

    /* Пилюли превращаются в круглые иконки с подписью снизу:
       все действия в один ряд, попадание пальцем 44px. */

    .venue-actions {
        justify-content: space-between;
        align-items: flex-start;
        gap: 4px;
        padding: 0 8px;
    }

    .venue-pill {
        position: relative;
        flex: 0 0 var(--ctl-h);
        width: var(--ctl-h);
        max-width: none;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        height: auto;
        padding: 8px 0 30px;
        border: none;
        background: transparent;
        border-radius: 14px;
        color: var(--action-color);
        font-weight: 400;
        text-align: center;
        line-height: 1.15;
    }

    .venue-pill span {
        position: absolute;
        top: calc(8px + var(--ctl-h) + 6px);
        left: 50%;
        transform: translateX(-50%);
        width: min(76px, 19vw);
        margin: 0;
        font-size: clamp(10px, 3.2vw, 12px);
        text-align: center;
        white-space: normal;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: manual;
    }

    .venue-pill:hover {
        border-color: transparent;
        background: var(--bg-card-active);
    }

    .venue-pill .mud-icon-root {
        width: var(--ctl-h);
        height: var(--ctl-h);
        padding: 8px;
        box-sizing: border-box;
        border-radius: 50%;
        background: var(--bg-card);
        border: 1.5px solid var(--action-color);
        fill: currentColor;
    }

    /* «В избранном» на мобильном — заливка круга акцентом */

    .venue-pill.is-active {
        background: transparent;
    }

    .venue-pill.is-active .mud-icon-root {
        color: var(--action-color);
    }

    .custom-cart-modal {
        width: 100vw;
        max-width: 100vw;
        bottom: 0;
        top: auto;
        left: 0;
        transform: none;
        border-radius: 28px 28px 0 0;
        animation: mobileSlideUp .3s ease-out;
    }

    /* ---- см. базовые правила ---- */

    .mud-grid.px-1 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* ---- см. базовые правила ---- */

    .floating-cart-bar {
        left: 16px;
        right: 84px;
        width: auto;
        max-width: none;
        transform: none;
        bottom: 20px;
        padding: 8px 8px 8px 18px;
        gap: 10px;
        /* перебивает gap-4 из разметки *: /* перебивает gap-4 из разметки */;
    }

    .floating-cart-bar .cart-label .mud-typography {
        font-size: 12.5px;
    }

    .floating-cart-bar .cart-count {
        font-size: 12px;
    }

    .floating-cart-bar .cart-total {
        height: 34px;
        padding: 0 13px;
        font-size: 13.5px;
    }

    .cart-pulse {
        animation: cart-pulse-mobile .45s ease-out;
    }

    /* 48×48 и bottom: 20px — те же, что у капсулы, поэтому центры
       совпадают по вертикали. Капсула справа заканчивается на 84px,
       между ней и кнопкой 16px. */

    .scroll-to-top {
        right: 16px;
        width: 48px;
        height: 48px;
    }

    /* ---- см. базовые правила (было (max-width: 599px)) ---- */

    .dish-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
    }

    .dish-dialog-submit {
        padding: 0 16px;
    }

    /* ---- см. базовые правила ---- */

    body.dark-theme .venue-pill {
        color: var(--text-muted);
    }

    body.dark-theme .venue-pill .mud-icon-root {
        color: var(--accent-color);
        border-color: var(--accent-color);
    }

    body.dark-theme .venue-pill.is-active .mud-icon-root {
        background: var(--dark-surface);
    }

}

/* =============================================================
   16. КАРТОЧКА ЗАКАЗА (OrderCard)
   Перенесено из <style> внутри OrderCard.razor (проход 1, 12.09.2026).

   Почему в app.css, а не в terminal.css: карточка живёт в двух
   областях — терминал (WaiterTable, WaiterPanel, DeliveryPanel) и
   гостевой контур (Pages/Account/History, CardContext.History).
   Областной файл терминала гостевую историю заказов не покрывает.

   Все имена получили префикс order-: <style> в razor не изолирован и
   течёт на всё приложение (HANDOFF 4.4), а часть имён совпадала с
   классами кита. .qty-controls с заливкой #eeeeee перекрашивал блок
   количества в окне блюда (EditItemDialog) на каждой странице, где
   карточка отрисована. Карта переименований — в CHANGES.md.

   Правила перенесены как есть, без переверстки на кит: это проход 1
   (HANDOFF 5.2е). Что осталось на проход 2 — тоже в CHANGES.md.
   ============================================================= */

.order-card-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.order-card-wrapper, .order-card, .order-card-body, .order-items-scroll {
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
    display: block !important;
}

.order-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

    .order-card > *:not(.order-card-body) {
        flex-shrink: 0;
    }

.order-card-head, .order-card-foot {
    flex-shrink: 0;
}

.order-card-foot {
    padding-bottom: 4px;
}

.order-items-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 4px;
}

.order-menu-btn-circle {
    background: var(--mud-palette-background-grey) !important;
    border-radius: 50% !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
}

.order-action-btn {
    font-size: 0.7rem !important;
    height: 32px;
}

.order-qty-controls {
    display: flex;
    align-items: center;
    background: #eeeeee;
    border-radius: 20px;
    padding: 2px;
    border: 1px solid rgba(0,0,0,0.1);
}

.order-qty-text {
    min-width: 22px;
    text-align: center;
    font-weight: 900;
    font-size: 0.8rem;
}

.order-price-zone {
    transition: background 0.2s;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
}

    .order-price-zone:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.order-price-alt {
    font-size: 0.65rem;
}

.order-pulse {
    animation: order-pulse-kf 2s infinite;
}

@keyframes order-pulse-kf {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.order-item-note {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 1px;
    transition: opacity 0.2s;
}

    .order-item-note.cursor-pointer:hover, .order-item-note:hover {
        opacity: 1 !important;
        color: var(--mud-palette-primary) !important;
    }

.order-draft-item {
    opacity: 0.8;
    background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.01) 10px, rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.03) 20px );
    border-radius: 8px;
}

.order-draft-head {
    border-bottom: 1px dashed var(--mud-palette-warning);
    padding-bottom: 4px;
    margin-left: 8px;
    margin-right: 8px;
}

.order-status-bar {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    transition: filter 0.2s, transform 0.1s;
}

.order-status-tap {
    cursor: pointer !important;
}

    .order-status-tap:hover {
        filter: brightness(1.15);
    }

    .order-status-tap:active {
        transform: scale(0.96);
    }


/* =============================================================
   17. ДИАЛОГИ И СТРАНИЦЫ ОБЩЕГО КОНТУРА
   Из папки Dialogs/ сюда попало только то, что открывается гостем или
   из двух и более областей (проверено по вызовам ShowAsync/NavigateTo
   13.09.2026). Остальные диалоги той же папки разъехались по областям:
   PermissionOverrides, StaffPermissions → admin.css; StaffAvatar,
   KitchenOrderDetails → terminal.css; SupportFeedbacks → support.css.
   TableImageUploadDialog никто не открывает — не перенесён (6а.23).

   Каждое правило под корнем своего диалога — классом на <MudDialog
   Class="…"> (он ложится на .mud-dialog) или на корневом элементе
   страницы. Без корня правило текло бы на все диалоги приложения
   (HANDOFF 4.4): именно так вели себя .mud-dialog-content у четырёх
   диалогов до переноса, пока диалог был открыт.

   Проход 1 (13.09.2026): перенесено как было. Не перенесены побайтовые
   дубли §4 (.fw-bold 700, .fw-black 900) и два правила с ::deep в
   SingleFeedbackView — ::deep работает только в CSS-изоляции (.razor.css),
   в <style> он игнорировался, правила были мёртвыми.
   ============================================================= */

/* ---------- 17.1 CreateFeedbackDialog — новый отзыв. Открывают: RestaurantMenu, MainLayout, OrderCard, WaiterTable. Корень .feedback-dialog добавлен в Class ---------- */

.feedback-dialog .fw-900 {
    font-weight: 900;
}

.feedback-dialog .animate-pulse-custom {
    animation: pulse-op 2s infinite ease-in-out;
}

@keyframes pulse-op {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(var(--mud-palette-primary-rgb), 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0);
    }
}

/* ---------- 17.2 FeedbackManagement — список отзывов; компонент внутри EstablishmentAdmin и SupportFeedbacks. Корень .feedback-mgmt добавлен на MudPaper ---------- */

.feedback-mgmt .hover-scale {
    transition: transform 0.2s ease;
}

.feedback-mgmt .hover-scale:hover {
    transform: scale(1.05);
}

.feedback-mgmt .position-relative {
    position: relative;
}

/* ---------- 17.3 /establishment-feedbacks/{id} — SingleFeedbackView; приходит из GlobalCallHub с любой страницы. Корень .feedback-view на MudContainer ---------- */

.feedback-view .feedback-text {
    white-space: pre-wrap;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.feedback-view .hover-scale {
    transition: transform 0.2s ease;
}

.feedback-view .hover-scale:hover {
    transform: scale(1.04);
}

/* Легкое изменение стиля для readonly поля, чтобы текст читался как контент */

/* ---------- 17.4 PhotoDialog — галерея на весь экран (RestaurantMenu). Корень .full-screen-dialog был. .mud-dialog-container { padding: 0 } — РОДИТЕЛЬ .mud-dialog, из-под корня не достать: остался в razor ---------- */

.full-screen-dialog .close-gallery-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    background: rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(4px);
    color: white !important;
}

/* Убираем все внешние отступы у контейнера диалога */

/* Растягиваем само окно на всю ширину без исключений */

.full-screen-dialog {
    background-color: black !important;
    max-width: 100vw !important;
    margin: 0 !important;
}

/* Убираем внутренние паддинги MudBlazor в контенте */

.full-screen-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Гарантируем, что карусель не шире экрана */

.full-screen-dialog .mud-carousel {
    width: 100vw !important;
}

/* ---------- 17.5 QuickPhotoDialog — быстрое фото блюда (RestaurantMenu, MenuEditor). Корень .quick-photo-dialog добавлен в Class ---------- */

.quick-photo-dialog .photo-grid-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-photo-dialog .photo-frame {
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-photo-dialog .photo-frame:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.quick-photo-dialog .frame-main {
    width: 100%;
    height: 180px;
}

.quick-photo-dialog .frame-gallery {
    width: 75px;
    height: 75px;
    border-radius: 12px;
}

.quick-photo-dialog .frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-photo-dialog .delete-overlay {
    position: absolute;
    inset: 0;
    background: rgba(239, 68, 68, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 4px;
}

.quick-photo-dialog .photo-frame:hover .delete-overlay {
    opacity: 1;
}

.quick-photo-dialog .add-icon-sub {
    font-size: 0.8rem;
    opacity: 0.5;
}

/* ---------- 17.6 /checkout/payment_liqpay/{orderId} — PaymentLiqPay (Checkout, OrderCard, WaiterTable). Корень .pay-page на MudContainer ---------- */

.pay-page .pay-head {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: #fff;
}

.pay-page .pay-amount {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 4px;
}

.pay-page .pay-cur {
    font-size: 1.6rem;
    font-weight: 700;
    opacity: .9;
}

.pay-page .pay-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: .85rem;
}

.pay-page .pay-row + .pay-row {
    border-top: 1px solid var(--mud-palette-divider);
}

.pay-page .pay-label {
    flex-grow: 1;
    opacity: .6;
}

.pay-page .pay-value {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.pay-page .pay-btn {
    min-height: 56px;
    font-size: 1.05rem !important;
    box-shadow: 0 8px 20px rgba(var(--mud-palette-primary-rgb), .35) !important;
}

.pay-page .uppercase {
    text-transform: uppercase;
}

/* ---------- 17.7 AddressDialog — адрес доставки (Checkout, Profile). Корень .address-dialog добавлен в Class ---------- */

.address-dialog .header-icon-container {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    padding: 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-dialog .address-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px;
    border-radius: 12px;
}

.address-dialog .shadow-button {
    box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.3) !important;
}

.address-dialog .mud-dialog-content {
    padding-top: 0 !important;
}

/* ---------- 17.8 BatchStatusDialog — смена статуса позиций (OrderCard, KitchenPanel, WaiterTable). Корень .kds-batch-dialog был ---------- */

.kds-batch-dialog .fw-900 {
    font-weight: 900 !important;
}

.kds-batch-dialog .fw-700 {
    font-weight: 700 !important;
}

/* --- КНОПКИ-ФИЛЬТРЫ (Chips) --- */

.kds-batch-dialog .chip-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 2px solid transparent;
    background: #eeeeee;
    color: #9e9e9e;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.2s;
    text-transform: uppercase;
}

/* Активные состояния кнопок (совпадают со строками) */

.kds-batch-dialog .status-filter-draft.active {
    background: #fce4ec !important;
    border-color: #e91e63 !important;
    color: #880e4f !important;
}

.kds-batch-dialog .status-filter-new.active {
    background: #ffffff !important;
    border-color: #bdbdbd !important;
    color: #333 !important;
}

.kds-batch-dialog .status-filter-sent.active {
    background: #ffcc80 !important;
    border-color: #ef6c00 !important;
    color: #e65100 !important;
    box-shadow: 0 2px 8px rgba(239, 108, 0, 0.3);
}

.kds-batch-dialog .status-filter-accepted.active {
    background: #fff9c4 !important;
    border-color: #fbc02d !important;
    color: #333 !important;
    box-shadow: 0 2px 8px rgba(251, 192, 45, 0.2);
}

.kds-batch-dialog .status-filter-ready.active {
    background: #e8f5e9 !important;
    border-color: #4caf50 !important;
    color: #1b5e20 !important;
}

.kds-batch-dialog .status-filter-served.active {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #0d47a1 !important;
}

.kds-batch-dialog .chip-btn.active:not([class*='status-filter']) {
    background: var(--mud-palette-primary);
    color: white;
}

/* --- КАРТОЧКИ ПОЗИЦИЙ --- */

.kds-batch-dialog .status-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    background: #eeeeee;
    opacity: 0.5;
}

.kds-batch-dialog .status-item-card.selected {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Цвета выбранных строк */

.kds-batch-dialog .status-item-card.selected.draft {
    background: #fce4ec !important;
    border-color: #e91e63 !important;
}

.kds-batch-dialog .status-item-card.selected.new {
    background: #ffffff !important;
    border-color: #bdbdbd !important;
}

.kds-batch-dialog .status-item-card.selected.sent {
    background: #ffcc80 !important;
    border-color: #ef6c00 !important;
}

.kds-batch-dialog .status-item-card.selected.accepted {
    background: #fff9c4 !important;
    border-color: #fbc02d !important;
}

.kds-batch-dialog .status-item-card.selected.ready {
    background: #e8f5e9 !important;
    border-color: #4caf50 !important;
}

.kds-batch-dialog .status-item-card.selected.served {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
}

/* Тексты */

.kds-batch-dialog .item-name-text {
    color: #111;
}

.kds-batch-dialog .unit-label-text {
    opacity: 0.6;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.65rem;
    color: #444;
}

.kds-batch-dialog .quantity-badge-text {
    color: var(--mud-palette-primary);
}

.kds-batch-dialog .custom-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.kds-batch-dialog .custom-checkbox.checked {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: white;
}

/* ---------- 17.9 OrderPaymentDialog — оплата заказа (OrderCard, WaiterTable). Корень .payment-dialog-mobile был; медиа 600 внутри, как было ---------- */

@media (max-width: 600px) {
    .mud-dialog.payment-dialog-mobile {
        max-height: 98vh !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 4px !important;
    }

    .payment-dialog-mobile .mud-dialog-content {
        overflow-y: visible !important;
        flex: none !important;
    }

    .payment-dialog-mobile .mud-dialog-actions {
        flex: none !important;
    }
}

.payment-dialog-mobile .uppercase {
    text-transform: uppercase;
}

.payment-dialog-mobile .border-b-1 {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.payment-dialog-mobile .border-t-1 {
    border-top: 1px solid var(--mud-palette-divider);
}

.payment-dialog-mobile .payment-options-grid-compact {
    display: flex;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    padding: 2px;
}

.payment-dialog-mobile .payment-method-card-compact {
    flex: 1;
    min-width: 85px;
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    position: relative;
}

.payment-dialog-mobile .payment-method-card-compact.active {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
}

.payment-dialog-mobile .check-badge-compact {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--mud-palette-primary);
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-dialog-mobile .paid-list {
    border-top: 1px dashed var(--mud-palette-divider);
    padding-top: 6px;
}

.payment-dialog-mobile .paid-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 0;
    opacity: .85;
}

.payment-dialog-mobile .paid-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.payment-dialog-mobile .paid-sum {
    font-weight: 800;
    white-space: nowrap;
}

.payment-dialog-mobile .numpad-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.payment-dialog-mobile .numpad-btn-compact {
    height: 42px;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

.payment-dialog-mobile .NoChange-btn {
    font-size: 0.6rem !important;
    line-height: 1;
}

/* СТИЛИ ДЛЯ МНОГОСТРОЧНОЙ КНОПКИ */

.payment-dialog-mobile .mud-button-root.multi-line-btn .mud-button-label {
    flex-direction: column !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.payment-dialog-mobile .multi-line-btn.h-auto {
    height: auto !important;
    min-height: 48px;
}

.payment-dialog-mobile .multi-line-btn .main-text {
    font-size: 1.05rem;
    line-height: 1.1;
    font-weight: 900;
}

.payment-dialog-mobile .multi-line-btn .sub-text {
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    text-transform: none;
}

/* СУПЕР ВЫСОКОЕ ПОЛЕ ВВОДА */

.payment-dialog-mobile .super-huge-field .mud-input-outlined-border {
    min-height: 75px !important;
    display: flex;
    align-items: center;
}

.payment-dialog-mobile .super-huge-field input {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: var(--mud-palette-primary) !important;
    padding: 12px 0 !important;
    height: auto !important;
    line-height: 1.1 !important;
}

.payment-dialog-mobile .super-huge-field .mud-input-label-outlined {
    transform: translate(14px, -14px) scale(0.8) !important;
    background: var(--mud-palette-surface);
    padding: 0 8px;
}

/* ---------- 17.10 StatusLegendDialog — легенда статусов (OrderCard, KitchenPanel). Корень .status-legend-dialog добавлен в Class ---------- */

.status-legend-dialog .legend-list-container {
    width: 100%;
}

.status-legend-dialog .legend-row-preview {
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.status-legend-dialog .legend-bar-preview {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

@media (max-width: 600px) {
    .status-legend-dialog .legend-row-preview {
        min-height: 60px;
    }
}

/* ---------- 17.11 TableListDialog — выбор стола (SplitOrderDialog ← WaiterTable). Корень .table-selector-dialog был ---------- */

.table-selector-dialog {
    max-width: 500px !important;
    width: 100% !important;
}

.table-selector-dialog .fs-xs {
    font-size: 0.75rem !important;
}

.table-selector-dialog .tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 10px;
    width: 100%;
}

.table-selector-dialog .table-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    overflow: hidden;
}

.table-selector-dialog .table-grid-item:active:not(:disabled) {
    transform: scale(0.96);
}

.table-selector-dialog .table-name {
    font-weight: 900;
    font-size: 1.1rem;
    color: #111111;
    z-index: 2;
    transition: color 0.2s ease;
}

.table-selector-dialog .table-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.table-selector-dialog .table-grid-item.has-photo .table-name {
    color: #ffffff !important;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.9), 0px 0px 2px rgba(0, 0, 0, 0.9);
}

.table-selector-dialog .table-avatar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 3;
    transition: transform 0.1s ease;
}

.table-selector-dialog .table-avatar-badge:active {
    transform: scale(0.85);
}

.table-selector-dialog .table-avatar-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Свободен (Зеленый) */

.table-selector-dialog .table-grid-item.free {
    border-color: rgba(76, 175, 80, 0.35);
    background-color: rgba(76, 175, 80, 0.06);
}

.table-selector-dialog .table-grid-item.free .table-name {
    color: #2E7D32;
}

.table-selector-dialog .table-grid-item.free:hover {
    background-color: rgba(76, 175, 80, 0.12);
    border-color: #4CAF50;
}

/* Мой стол (Желтоватые тона) */

.table-selector-dialog .table-grid-item.yellow {
    border-color: rgba(255, 193, 7, 0.4);
    background-color: rgba(255, 193, 7, 0.08);
}

.table-selector-dialog .table-grid-item.yellow .table-name {
    color: #B78103;
}

.table-selector-dialog .table-grid-item.yellow:hover {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: #FFC107;
}

/* Чужой стол / Бронь (Красноватые тона) */

.table-selector-dialog .table-grid-item.red {
    border-color: rgba(244, 67, 54, 0.35);
    background-color: rgba(244, 67, 54, 0.06);
}

.table-selector-dialog .table-grid-item.red .table-name {
    color: #C62828;
}

.table-selector-dialog .table-grid-item.red:hover {
    background-color: rgba(244, 67, 54, 0.12);
    border-color: #F44336;
}

/* Бордеры поверх фото */

.table-selector-dialog .table-grid-item.free.has-photo {
    border: 2px solid #4CAF50;
}

.table-selector-dialog .table-grid-item.yellow.has-photo {
    border: 2px solid #FFC107;
}

.table-selector-dialog .table-grid-item.red.has-photo {
    border: 2px solid #F44336;
}

/* Исходный стол (Серый и заблокирован) */

.table-selector-dialog .table-grid-item.current {
    border-color: var(--mud-palette-divider) !important;
    background-color: var(--mud-palette-background-grey) !important;
    background-image: none !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.table-selector-dialog .table-grid-item.current .table-photo-overlay {
    display: none;
}

.table-selector-dialog .table-grid-item.current .table-name {
    color: #777777 !important;
    text-shadow: none;
}


/* =============================================================
   18. СТРАНИЦЫ ГОСТЯ И ОБОЛОЧКА
   Проход 1 (13.09.2026): <style> снят с 10 компонентов (≈900 строк),
   перенесено как было. Каждое правило под корнем страницы/компонента;
   где корня не было — класс добавлен на MudContainer (.profile-page,
   .checkout-page, .order-preview-page) или MudDrawer (.global-call-drawer).
   Не перенесены: побайтовые дубли §4 (.fw-bold, .fw-black, .text-truncate).
   WelcomeOverlay сюда НЕ вошёл — его <style> перекрывает версию из §6
   (.welcome-screen, .btn-massive); какую оставить — решение, 6а.24.

   Два @keyframes fadeIn с разными кадрами (History +10px, Checkout −10px)
   переименованы в history-fade-in / checkout-fade-in — имя @keyframes
   глобально, второе перебило бы первое. Разметка не менялась: animation
   стоит в css.
   ============================================================= */

/* ---------- 18.0 Общее для трёх страниц — побайтово одинаковые правила Profile / History / Checkout ---------- */

.profile-page .back-btn-static,
.page-history .back-btn-static,
.checkout-page .back-btn-static {
    color: var(--mud-palette-primary) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    border-radius: 12px !important;
}

.page-history .order-type-container,
.checkout-page .order-type-container {
    display: flex;
    border-radius: 14px;
    padding: 4px;
    gap: 4px;
}

.page-history .order-type-item,
.checkout-page .order-type-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--mud-palette-text-secondary);
}

.page-history .order-type-item.active,
.checkout-page .order-type-item.active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.4);
}

.page-history .type-label,
.checkout-page .type-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- 18.1 /profile — Profile. Корень .profile-page добавлен на MudContainer ---------- */

/* Заголовок страницы */

.profile-page .profile-static-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Разделы личного кабинета */

.profile-page .profile-sections .section-panel {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px !important;
    margin-bottom: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.profile-page .profile-sections .mud-expand-panel-content {
    padding: 20px 16px !important;
}

.profile-page .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Бейдж камеры на аватаре */

.profile-page .camera-icon-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--mud-palette-primary);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

/* Кнопка поддержки (слева, симметрично выходу) */

.profile-page .card-support-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-error) !important;
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 50;
}

.profile-page .card-support-btn:hover {
    background: var(--mud-palette-error) !important;
    color: white !important;
    transform: scale(1.05);
}

/* Кнопка выхода */

.profile-page .card-logout-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-error) !important;
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 50;
}

.profile-page .card-logout-btn:hover {
    background: var(--mud-palette-error) !important;
    color: white !important;
}

.profile-page .lowercase-btn {
    text-transform: none !important;
    font-weight: 400;
}

/* Адреса */

.profile-page .address-main-line {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.profile-page .address-sub-details {
    opacity: 0.8;
}

.profile-page .address-chip {
    height: 20px !important;
    font-size: 0.75rem !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

.profile-page .address-apt {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Телеграм */

.profile-page .tg-card {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    transition: all 0.3s ease;
}

.profile-page .tg-icon-box {
    background: #0088cc;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3);
}

.dark-theme .profile-page .tg-card {
    background: rgba(255,255,255,0.03);
}

/* Виртуальная карта */

.profile-page .loyalty-card {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    border-radius: 20px;
    color: white;
    padding: 24px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-page .loyalty-card:active {
    transform: scale(0.98);
}

.profile-page .card-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.profile-page .card-brand {
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0.9;
}

.profile-page .card-number {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.profile-page .card-holder {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.profile-page .card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.profile-page .hover-scale {
    transition: transform 0.2s ease;
}

.profile-page .hover-scale:hover {
    transform: scale(1.05);
}

/* ---------- 18.2 /history — History. Корень .page-history был ---------- */

.page-history .animate-fade-in {
    animation: history-fade-in 0.3s ease-out forwards;
}

@keyframes history-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-history .pulse-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.page-history .connection-status.connected .pulse-status {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 178, 124, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 178, 124, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 178, 124, 0);
    }
}

/* --- СТИЛЬ ИЗ CHECKOUT --- */

/* --- БЕЙДЖИ --- */

.page-history .icon-wrapper {
    position: relative;
    display: inline-flex;
    margin-bottom: 2px;
}

.page-history .custom-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 900;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-history .bg-error {
    background-color: var(--mud-palette-error);
}

.page-history .bg-primary {
    background-color: var(--mud-palette-primary);
}

.page-history .archive-filter-panel {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
}

/* ---------- 18.3 /checkout/{KlientId} — Checkout. Корень .checkout-page добавлен на MudContainer ---------- */

.checkout-page .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* КАРТОЧКА: Адаптивные цвета */

.checkout-page .checkout-card {
    /* В светлой теме будет легкий серый фон, в темной - почти прозрачный белый */
        background: var(--mud-palette-background-grey);
    /* Граница становится заметной в обеих темах */
        border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    padding: 16px;
    transition: all 0.2s ease;
}

.checkout-page .border-error {
    border: 2px solid var(--mud-palette-error) !important;
}

.checkout-page .converted-price {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-top: -2px;
}

.checkout-page .animate-fade-in {
    animation: checkout-fade-in 0.3s ease-out;
}

@keyframes checkout-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-page .address-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 4px 0 8px 0;
    scrollbar-width: none;
}

.checkout-page .address-scroll-container::-webkit-scrollbar {
    display: none;
}

/* МИНИ-КАРТОЧКА АДРЕСА */

.checkout-page .address-mini-card {
    min-width: 140px;
    max-width: 140px;
    padding: 12px;
    border-radius: 14px;
    /* Используем surface color для контраста с фоном checkout-card */
        background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.checkout-page .address-mini-card.active {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    border-color: var(--mud-palette-primary);
}

/* ПЛЕЙСХОЛДЕР */

.checkout-page .empty-address-placeholder {
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

/* ПЕРЕКЛЮЧАТЕЛЬ ТИПА ЗАКАЗА */

.checkout-page .shadow-button {
    box-shadow: 0 8px 16px rgba(var(--mud-palette-primary-rgb), 0.3) !important;
}

.checkout-page .checkout-static-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------- 18.4 OrderActions — низ карточки заказа (внутри OrderCard). Корень .order-footer-menu был ---------- */

.order-footer-menu {
    background: var(--mud-palette-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Стили вкладок */

.order-footer-menu .tabs-header {
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.order-footer-menu .tab-item {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.6;
}

.order-footer-menu .tab-item.active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    opacity: 1;
    border-top: 3px solid var(--mud-palette-primary);
}

/* Сетка кнопок */

.order-footer-menu .action-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.order-footer-menu .pos-button {
    flex: 1;
    height: 60px;
    border-radius: 12px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.order-footer-menu .pos-button.primary {
    background: #4CAF50;
    color: white;
}

.order-footer-menu .pos-button.secondary {
    background: #2196F3;
    color: white;
}

.order-footer-menu .pos-button.bind-qr {
    background: #FF9800;
    color: white;
}

.order-footer-menu .pos-button.bind-phone {
    background: #9C27B0;
    color: white;
}

.order-footer-menu .pos-button.outline {
    background: transparent;
    border: 1px dashed var(--mud-palette-divider);
    color: var(--mud-palette-text-disabled);
}

.order-footer-menu .pos-button:active {
    filter: brightness(0.9);
    transform: scale(0.98);
}

/* ---------- 18.5 /order-preview/{OrderId} — OrderPreview. Корень .order-preview-page добавлен на MudContainer ---------- */

.order-preview-page .preview-row + .preview-row {
    border-top: 1px solid var(--mud-palette-divider);
}

.order-preview-page .preview-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.order-preview-page .preview-photo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mud-palette-background-grey);
}

.order-preview-page .preview-photo-empty {
    opacity: .35;
}

.order-preview-page .preview-descr {
    white-space: pre-line;
}

/* ---------- 18.6 GlobalCallHub — кнопка и выезд вызовов, в MainLayout на каждой странице. Кнопка .global-call-fab без корня (имена с префиксом), выезд и его карточки — под .global-call-drawer (класс добавлен в Class MudDrawer, ложится на .mud-drawer). ЕДИНСТВЕННОЕ отклонение от «как было»: .custom-scrollbar { max-height; padding-right } был объявлен без привязки и, поскольку компонент стоит в MainLayout, действовал на ВСЕ .custom-scrollbar приложения — теперь только .calls-scroll-area.custom-scrollbar (HANDOFF 4.4) ---------- */

.global-call-fab {
    position: fixed !important;
    bottom: 80px !important;
    left: 20px !important;
    z-index: 2000 !important;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    border: 2px solid white;
}

.active-emergency {
    background-color: #ff1744 !important;
    animation: emergency-flash-new 0.6s steps(2, start) infinite !important;
}

.global-call-fab.muted {
    background-color: #757575 !important;
    opacity: 0.8;
    animation: none !important;
}

@keyframes emergency-flash-new {
    0% {
        background-color: #ff1744;
        transform: scale(1);
        box-shadow: 0 0 10px red;
    }

    50% {
        background-color: #212121;
        transform: scale(1.15);
        box-shadow: 0 0 30px red;
    }
}

.global-call-drawer .call-card-item {
    background: var(--mud-palette-background-grey);
    padding: 12px 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: block;
    width: 100%;
}

.global-call-drawer .call-card-item:hover {
    background: var(--mud-palette-action-default-hover);
    transform: translateX(4px);
}

/* Рамка для обычных вызовов */

.global-call-drawer .default-call-border {
    border-left: 6px solid #f44336;
}

/* Рамка для онлайн-заказов (выделяем фиолетовым/синим) */

.global-call-drawer .online-order-border {
    border-left: 6px solid #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

/* Рамка для отзывов (выделяем янтарным/желтым) */

.global-call-drawer .feedback-call-border {
    border-left: 6px solid var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), 0.05);
}

.global-call-drawer .call-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.global-call-drawer .call-type-text {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    line-height: 1.2;
}

.global-call-drawer .calls-scroll-area.custom-scrollbar {
    overflow-y: auto;
    max-height: calc(100vh - 150px);
    padding-right: 4px;
}

.global-call-drawer .staff-call-border {
    border-left: 6px solid var(--mud-palette-info);
    background: rgba(var(--mud-palette-info-rgb), 0.05);
}

.global-call-drawer .staff-label {
    font-size: 0.65rem;
    background: var(--mud-palette-info);
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

.global-call-drawer .call-msg-text {
    display: block;
    font-style: italic;
    opacity: 0.8;
    line-height: 1.1;
    margin-top: 2px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 2px;
}

/* ---------- 18.7 NotFoundPage — 404. Корень .error-page-wrapper был ---------- */

.error-page-wrapper {
    min-height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: white;
}

.error-page-wrapper .bg-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(37, 117, 252, 0.2) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.error-page-wrapper .error-content-card {
    z-index: 1;
    text-align: center;
    max-width: 450px;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.error-page-wrapper .huge-icon-glow {
    font-size: 7rem !important;
    color: var(--mud-palette-primary) !important;
    filter: drop-shadow(0 0 20px rgba(37, 117, 252, 0.8));
}

.error-page-wrapper .error-code {
    font-size: 6rem !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #fff 40%, rgba(255,255,255,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -10px;
    margin-bottom: 0;
}

.error-page-wrapper .massive-btn-custom {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%) !important;
    border-radius: 24px !important;
    padding: 16px 40px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    box-shadow: 0 10px 20px rgba(37, 117, 252, 0.3) !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 18.8 /establishment/{KlientId}/gallery — EstablishmentGallery. Корень .gallery-page был; тёмная тема — класс на самом корне ---------- */

.gallery-page {
    padding: 16px;
    background-color: var(--bg-main);
    min-height: 100vh;
}

.gallery-page .gallery-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px;
}

.gallery-page .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.gallery-page .album-card {
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.gallery-page .album-card:active {
    transform: scale(0.97);
}

.gallery-page .album-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

.gallery-page .album-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-page .album-info {
    padding: 12px;
    text-align: center;
}

.gallery-page.dark-theme .album-card {
    box-shadow: 0 0 15px rgba(37, 117, 252, 0.1);
}

/* ---------- 18.9 WorkScheduleEditor — редактор расписания (внутри AddOrganization). Корень .schedule-editor был ---------- */

.schedule-editor .schedule-editor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.schedule-editor .schedule-editor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.schedule-editor .schedule-editor-row.is-closed {
    opacity: 0.6;
}

.schedule-editor .schedule-editor-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.schedule-editor .schedule-editor-times,
.schedule-editor .schedule-editor-break {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.schedule-editor .schedule-time-field {
    width: 110px;
}

.schedule-editor .schedule-dash {
    opacity: 0.5;
}

.schedule-editor .schedule-editor-errors {
    flex-basis: 100%;
}

.schedule-editor .schedule-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 700px) {
    .schedule-editor .schedule-editor-day {
        min-width: 100%;
    }
}

/* ---------- 18.10 /tg-store-selector — TgStoreSelector, отдельная страница со своими провайдерами. Корень .style-wrapper был ---------- */

.style-wrapper {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
    color: var(--mud-palette-text-primary);
}

.style-wrapper .store-card {
    cursor: pointer;
    border: 1px solid var(--mud-palette-divider);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.style-wrapper .store-card:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.style-wrapper .store-card:active {
    transform: scale(0.98);
    /* Эффект нажатия на карточку на мобилках */;
}


/* =============================================================
   19. СТОЛ И БЫСТРЫЙ ВЫБОР — многообластные из терминала (5.2л)
   WaiterTable живёт и у официанта, и у гостя за столом по QR
   (IsClientMode); FastItemSelector открывают WaiterTable и OrderCard
   (гость); FastItemSelectorDesktop — внутри WaiterTable; BridgeStatusBar
   — for-staff и for-guest. Маркера у них нет, поэтому здесь, а не в
   terminal.css. Проход 1 (13.09.2026): перенесено как было (725 строк),
   каждое правило под корнем компонента. Не перенесены дубли §4
   (.fw-bold, .fw-black, .opacity-70).

   WaiterTable: второй <style> внутри @code — это C#-строка шаблона печати
   (sb.Append), НЕ трогается. @keyframes blink-red переименован в
   wt-blink-red — одноимённый с другими кадрами уже в terminal.css у
   KitchenPanel (6а.21 закрыт). .status-dot 8px здесь против 10px в §4 —
   под корнем, как было.
   FastItemSelector: .floating-cart-bar и .custom-cart-modal — те же имена,
   что у корзины гостя в §11, с другими значениями; под корнем
   .fast-selector-container, как и работало (диалог во весь экран).
   ============================================================= */

/* ---------- 19.1 WaiterTable — /waiter-table/{TableId}/{KlientId}. Корень .waiter-table-root был на MudContainer; .initial-layout-loader и .layout-initializing — вне корня (лоадер до отрисовки), имена уникальны ---------- */

/* 🔥 КЛЮЧЕВОЙ ФИКС LAYOUT SHIFT 🔥 */

.layout-initializing {
    opacity: 0;
    visibility: hidden;
}

.initial-layout-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.waiter-table-root .status-indicator {
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    display: flex;
    align-items: center;
    gap: 8px;
    will-change: background-color, transform;
}

.waiter-table-root .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.waiter-table-root .online .status-dot {
    background: #4caf50;
    box-shadow: 0 0 5px #4caf50;
}

.waiter-table-root .offline .status-dot {
    background: #f44336;
}

.waiter-table-root .action-grid-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.waiter-table-root .pos-btn {
    flex: 1;
    height: 52px;
    border-radius: 12px;
    border: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: filter 0.1s;
}

.waiter-table-root .btn-kitchen {
    background-color: #E53935;
}

.waiter-table-root .btn-table-delivery {
    background-color: #2E7D32;
}

.waiter-table-root .btn-print {
    background-color: #1E88E5;
}

.waiter-table-root .btn-qr {
    background-color: #FB8C00;
}

.waiter-table-root .btn-phone {
    background-color: #8E24AA;
}

.waiter-table-root .btn-show-qr {
    background-color: #009688;
}

.waiter-table-root .btn-print-qr {
    background-color: #607D8B;
}

.waiter-table-root .btn-call-waiter {
    background-color: #FF5252;
}

.waiter-table-root .btn-get-bill {
    background-color: #4CAF50;
}

.waiter-table-root .btn-feedback {
    background-color: #FFC107;
}

.waiter-table-root .btn-support {
    background-color: #03A9F4;
}

.waiter-table-root .btn-payment {
    background-color: #4CAF50;
}

.waiter-table-root .btn-close-order {
    background-color: #2e7d32;
}

.waiter-table-root .bg-lightSuccess {
    background-color: rgba(76, 175, 80, 0.04);
}

.waiter-table-root .border-2 {
    border-width: 2px !important;
}

.waiter-table-root .action-grid-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.waiter-table-root .pos-btn .mud-typography-button {
    font-size: 0.65rem !important;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.waiter-table-root .pos-btn:active {
    filter: brightness(0.8);
    transform: scale(0.97);
}

.waiter-table-root .tabs-modern-container {
    display: flex;
    background: #f1f1f1;
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.05);
}

.waiter-table-root .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    cursor: pointer;
    border-radius: 10px;
    color: #757575;
    font-size: 0.75rem;
    font-weight: 800;
}

.waiter-table-root .tab-item.active {
    background: white;
    color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.waiter-table-root {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    padding-top: 16px;
    transition: opacity 0.2s ease-in-out;
}

.waiter-table-root .table-sticky-header {
    flex-shrink: 0;
}

.waiter-table-root .waiter-table-grid-wrapper {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    height: 100%;
}

.waiter-table-root .full-height-grid {
    flex-grow: 1;
}

.waiter-table-root .menu-column,
.waiter-table-root .order-column {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 50vh;
}

.waiter-table-root .desktop-menu-scroll {
    flex-grow: 1;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--mud-palette-background-grey);
}

.waiter-table-root .right-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.waiter-table-root .order-scroll-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-right: 4px;
}

.waiter-table-root .action-buttons-panel {
    flex-shrink: 0;
    margin-top: 8px;
}

/* Специфические @media правила */

@media (max-width: 959px) {
    .waiter-table-root,
    .waiter-table-root .waiter-table-grid-wrapper,
    .waiter-table-root .full-height-grid,
    .waiter-table-root .order-column,
    .waiter-table-root .right-column-container {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .waiter-table-root .order-scroll-area {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-grow: 0 !important;
    }

    .waiter-table-root ::deep .mud-card,
    .waiter-table-root ::deep .mud-card-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .waiter-table-root .fab-menu-btn {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        z-index: 1000;
    }
}

.waiter-table-root .btn-service-default {
    background-color: #e0e0e0 !important;
    color: #424242 !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.waiter-table-root .btn-service-default .mud-icon-root {
    color: #616161 !important;
}

.waiter-table-root .btn-call-active {
    background-color: #f44336 !important;
    color: white !important;
    animation: pulse-red-button 2s infinite;
    opacity: 1 !important;
    cursor: wait;
}

.waiter-table-root .btn-call-active .mud-icon-root {
    color: white !important;
}

@keyframes pulse-red-button {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

.waiter-table-root .chip-blink {
    animation: wt-blink-red 1s infinite;
}

@keyframes wt-blink-red {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.waiter-table-root .pulse-alert {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    animation: alert-pulse 2s infinite;
}

@keyframes alert-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.waiter-table-root .tab-inactive {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: #f5f5f5 !important;
}

.waiter-table-root .pos-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.7);
    transform: none !important;
}

/* Не кнопка, а объяснение на её месте: нажимать нечего,
но пустое место сбивало бы с толку сильнее. */

.waiter-table-root .btn-blocked {
    background-color: #616161;
    opacity: 0.55;
    cursor: default;
}

/* ---------- 19.2 FastItemSelector — быстрый выбор блюд (диалог во весь экран). Корень .fast-selector-container был ---------- */

/* ОБЩИЕ ПЛИТКИ */

.fast-selector-container .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fast-selector-container .category-grid.style-l {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* БАЗОВЫЙ TILE - ПО ЦЕНТРУ */

.fast-selector-container .tile {
    position: relative;
    min-height: 140px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.fast-selector-container .nav-tile {
    background-color: #2E7D32 !important;
    color: white !important;
}

.fast-selector-container .path-level-tile {
    background-color: #43A047 !important;
    color: white !important;
}

.fast-selector-container .current-level-tile {
    background-color: #66BB6A !important;
    border: 2px solid #2E7D32 !important;
}

/* ВЫРАВНИВАНИЕ ВЛЕВО ТОЛЬКО ДЛЯ КАТЕГОРИЙ И ТОВАРОВ */

.fast-selector-container .category-tile {
    background-color: #FFD600 !important;
    color: #1B5E20 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.fast-selector-container .product-tile {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.fast-selector-container .product-tile.is-selected {
    border: 3px solid var(--mud-palette-success) !important;
}

.fast-selector-container .line-tile {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    min-height: 85px !important;
    padding: 8px 12px !important;
    text-align: left;
}

.fast-selector-container .selection-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #D32F2F;
    color: white;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    border: 2px solid white;
    z-index: 10;
}

.fast-selector-container .item-name-text {
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-weight: 900 !important;
}

/* ========================================================= */

/* РАБОТА ВНУТРИ MUDDIALOG (без position: fixed) */

/* ========================================================= */

.fast-selector-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

.fast-selector-container .selector-body {
    flex: 1;
    overflow-y: auto !important;
    padding: 12px;
    padding-bottom: 80px;
}

.fast-selector-container .floating-cart-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background-color: #2E7D32;
    color: white;
    padding: 14px 20px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1400;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.fast-selector-container .custom-cart-modal {
    background-color: var(--mud-palette-surface);
    width: 500px;
    max-width: 95vw;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ---------- 19.3 FastItemSelectorDesktop — встроенный вариант в правой колонке WaiterTable. Корень .fast-selector-embedded был ---------- */

.fast-selector-embedded {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.fast-selector-embedded .selector-body {
    flex: 1;
    padding: 8px;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fast-selector-embedded .pos-breadcrumb-bar {
    flex-shrink: 0;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #7cb342;
}

.fast-selector-embedded .breadcrumb-item {
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    color: #1B5E20;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.fast-selector-embedded .breadcrumb-item:hover {
    background: rgba(255,255,255,0.4);
}

.fast-selector-embedded .breadcrumb-item.active {
    background: white;
    color: #2E7D32;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.fast-selector-embedded .desktop-grid-layout {
    display: grid;
    gap: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* БАЗОВЫЙ TILE - ПО ЦЕНТРУ */

.fast-selector-embedded .tile {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.1s;
    height: 100%;
    width: 100%;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

.fast-selector-embedded .tile:active {
    transform: scale(0.97);
}

.fast-selector-embedded .nav-tile {
    background-color: #2E7D32 !important;
    color: white !important;
}

    /* ВЫРАВНИВАНИЕ ВЛЕВО ТОЛЬКО ДЛЯ КАТЕГОРИЙ И ТОВАРОВ */

    /* Раздел: значок и название в одну строку, значок слева. Колонкой
   (значок над названием) при частой сетке плашка ниже двух строк,
   и название уходило под overflow — официант видел пустую жёлтую
   плашку. Строкой хватает высоты в одну строку текста при любой сетке. */

    .fast-selector-embedded .category-tile {
        background-color: #FFD600 !important;
        color: #1B5E20 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 6px;
    }

        /* mb-1 в разметке — от раскладки колонкой; в строке он сдвигал
   значок вверх. Утилита Mud идёт с !important, поэтому и здесь */

        .fast-selector-embedded .category-tile .mud-icon-root {
            flex: none;
            margin: 0 !important;
        }

        /* Длинное название — две строки и многоточие, а не обрезка вслепую */

        .fast-selector-embedded .category-tile .mud-typography {
            flex: 1 1 auto;
            min-width: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            line-height: 1.15;
        }

.fast-selector-embedded .product-tile {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.fast-selector-embedded .tile .flex-grow-1 {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fast-selector-embedded .style-b-tile {
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3) !important;
    justify-content: space-between !important;
    padding: 6px !important;
}

.fast-selector-embedded .style-b-name-box {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 6px 8px;
    width: 100%;
    color: white;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.15);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fast-selector-embedded .style-b-price-box {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 4px 8px;
    text-align: left;
    width: 100%;
}

.fast-selector-embedded .style-b-price-box .price-main {
    color: #00e676;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
}

.fast-selector-embedded .style-b-price-box .price-main span {
    font-size: 0.75rem;
}

.fast-selector-embedded .style-b-price-box .price-sub {
    color: white;
    font-size: 0.7rem;
    opacity: 0.9;
    font-weight: bold;
}

/* ---------- 19.4 BridgeStatusBar — полоса «мост недоступен», for-staff / for-guest. Корень .bridge-down-bar был; @keyframes bridge-pulse уникален ---------- */

.bridge-down-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    animation: bridge-pulse 2.5s infinite;
}

/* Персоналу — тревожно: работать через сайт нельзя, надо к терминалу. */

.bridge-down-bar.for-staff {
    background: #dc2626;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

/* Гостю — спокойно: заведение работает, просто онлайн сейчас не примут. */

.bridge-down-bar.for-guest {
    background: #f59e0b;
    color: #1f2937;
}

@keyframes bridge-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}