/* Единый стиль сайта (22.10.2026) — язык переключателя темы в шапке.
   Владелец: «перерисовать тестовый сайт полностью в том стиле, в каком у нас переключатель».
   Правила языка:
   - «включённое» и главные кнопки — зелёный градиент сверху вниз (#3DBE7E → #1E7A4C) с мягким свечением;
   - нейтральные поля и кнопки — «вдавленные»: полупрозрачная подложка, тонкая обводка, внутренняя тень;
   - мелкие кнопки «+/−» — белые «бегунки», как кружок переключателя;
   - формы — пилюли и скругления; движение — пружинистое (как у бегунка).
   Подключается ПОСЛЕ стилей страницы (tpl/*.php) и перекрывает их; вернуть прежний вид — убрать
   <link … css/ui.css> из шаблонов и пересобрать страницы (копия до редизайна —
   «материалы\копии сайта\общий сайт до редизайна 22.10.2026»). Цвета — переменными (тёмная и светлая тема). */

:root {
    --ui-grad: linear-gradient(180deg, #3DBE7E 0%, #1E7A4C 100%);
    --ui-grad-hover: linear-gradient(180deg, #4ACB8B 0%, #23895A 100%);
    --ui-glow: 0 0 0 1px rgba(76, 175, 125, 0.45), 0 4px 14px rgba(30, 122, 76, 0.35);
    --ui-glow-hover: 0 0 0 1px rgba(91, 214, 154, 0.6), 0 6px 22px rgba(30, 122, 76, 0.5);
    --ui-on: #FFFFFF;
    --ui-arrow-ink: #4CC48A;
    --ui-inset-bg: rgba(var(--veil-rgb), 0.07);
    --ui-inset-bg-hover: rgba(var(--veil-rgb), 0.11);
    --ui-inset: inset 0 0 0 1px rgba(var(--veil-rgb), 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.35);
    --ui-inset-hover: inset 0 0 0 1px rgba(var(--veil-rgb), 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.35);
    --ui-hair: inset 0 0 0 1px rgba(var(--veil-rgb), 0.07);
    --ui-knob: linear-gradient(180deg, #FFFFFF 0%, #E9E9EE 100%);
    --ui-knob-ink: #1C1C1E;
    --ui-raise: 0 2px 6px rgba(0, 0, 0, 0.38), 0 1px 1px rgba(0, 0, 0, 0.22);
    --ui-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --ui-card-shadow-hover: 0 0 0 1px rgba(76, 175, 125, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45), 0 6px 22px rgba(30, 122, 76, 0.22);
    --ui-focus: 0 0 0 1px rgba(76, 175, 125, 0.75), 0 0 0 4px rgba(76, 175, 125, 0.22);
    --ui-glass: rgba(20, 20, 20, 0.72);
    --ui-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
    --ui-move: transform 0.4s var(--ui-spring), box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}
html[data-theme="light"] {
    --ui-glow: 0 0 0 1px rgba(30, 122, 76, 0.25), 0 4px 12px rgba(30, 122, 76, 0.25);
    --ui-glow-hover: 0 0 0 1px rgba(30, 122, 76, 0.38), 0 6px 18px rgba(30, 122, 76, 0.32);
    --ui-inset-bg: #ECECF0;
    --ui-inset-bg-hover: #E4E4E9;
    --ui-inset: inset 0 0 0 1px #D9D9DF, inset 0 1px 2px rgba(0, 0, 0, 0.06);
    --ui-inset-hover: inset 0 0 0 1px #C7C7CC, inset 0 1px 2px rgba(0, 0, 0, 0.06);
    --ui-hair: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    --ui-raise: 0 2px 5px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    --ui-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    --ui-card-shadow-hover: 0 0 0 1px rgba(30, 122, 76, 0.25), 0 14px 34px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(30, 122, 76, 0.14);
    --ui-focus: 0 0 0 1px rgba(30, 122, 76, 0.6), 0 0 0 4px rgba(30, 122, 76, 0.14);
    --ui-glass: rgba(255, 255, 255, 0.78);
    --ui-arrow-ink: #1E7A4C;
}

/* ---------- 1. Главные кнопки — как включённый переключатель ---------- */
html :is(.cart-btn, .add-to-cart, .modal-add-to-cart, .checkout-btn, .submit-order-btn, .btn-primary, .auth-submit-btn,
         .submit-btn, .promo-apply, .add-payment-btn, .add-payment-btn-modal, .gl-ok, .gl-geo, .fb-submit, .repeat-btn,
         .cookie-btn.accept, .to-top, .pa-call, .add-address-btn, .select-address-btn, .history-btn:not(.secondary)) {
    background: var(--ui-grad);
    color: var(--ui-on);
    border: none;
    box-shadow: var(--ui-glow);
    transition: var(--ui-move);
}
html :is(.cart-btn, .modal-add-to-cart, .checkout-btn, .submit-order-btn, .btn-primary, .auth-submit-btn, .submit-btn,
         .promo-apply, .add-payment-btn, .add-payment-btn-modal, .gl-ok, .gl-geo, .fb-submit, .repeat-btn,
         .cookie-btn.accept, .pa-call, .add-address-btn, .select-address-btn, .history-btn:not(.secondary)):not(:disabled):hover {
    background: var(--ui-grad-hover);
    box-shadow: var(--ui-glow-hover);
    transform: translateY(-1px);
}
html :is(.cart-btn, .add-to-cart, .modal-add-to-cart, .checkout-btn, .submit-order-btn, .btn-primary, .auth-submit-btn,
         .submit-btn, .promo-apply, .add-payment-btn, .add-payment-btn-modal, .gl-ok, .gl-geo, .fb-submit, .repeat-btn,
         .cookie-btn.accept, .pa-call, .add-address-btn, .select-address-btn, .history-btn:not(.secondary)):not(:disabled):active {
    transform: scale(0.96);
    transition-duration: 0.12s;
}
html :is(.checkout-btn, .submit-order-btn, .modal-add-to-cart, .btn-primary, .auth-submit-btn, .gl-ok, .fb-submit):disabled {
    background: var(--ui-inset-bg);
    color: var(--muted);
    box-shadow: var(--ui-inset);
    opacity: 1;
    filter: none;
    cursor: default;
}
/* кругленькая «+» на карточке — пружинит, как бегунок */
html .add-to-cart:hover { background: var(--ui-grad-hover); box-shadow: var(--ui-glow-hover); transform: scale(1.1); }
html .add-to-cart:active { transform: scale(0.92); transition-duration: 0.12s; }
/* «Наверх» (js/to_top.js вставляет свои стили позже — нужен селектор сильнее) */
html .to-top.visible:hover { background: var(--ui-grad-hover); box-shadow: var(--ui-glow-hover), 0 8px 24px rgba(0, 0, 0, 0.45); transform: translateY(-3px); }
html .to-top.visible:active { transform: scale(0.94); }
/* окно «Подтвердить / Отмена» — стили вписаны в разметку, поэтому !important */
html #confirmOk { background: var(--ui-grad) !important; box-shadow: var(--ui-glow); transition: var(--ui-move); border-radius: 999px !important; }
html #confirmOk:hover { background: var(--ui-grad-hover) !important; box-shadow: var(--ui-glow-hover); }
html #confirmCancel { background: var(--ui-inset-bg) !important; box-shadow: var(--ui-inset); border-radius: 999px !important; transition: var(--ui-move); }
html :is(#confirmOk, #confirmCancel):active { transform: scale(0.96); }

/* Крупные кнопки — пилюлей, как переключатель */
html :is(.modal-add-to-cart, .checkout-btn, .submit-order-btn, .btn-primary, .auth-submit-btn, .submit-btn, .gl-ok, .gl-geo,
         .fb-submit, .add-address-btn, .select-address-btn, .history-btn, .repeat-btn, .btn-secondary, .cookie-btn, .payment-option-btn) {
    border-radius: 999px;
}

/* ---------- 2. Вторичные кнопки — «вдавленные», как выключенный переключатель ---------- */
html :is(.btn-secondary, .history-btn.secondary, .gl-skip, .gl-find, .cookie-btn:not(.accept), .profile-action-btn, .payment-option-btn,
         .auth-switch-btn, .back-btn, .promo-remove) {
    background: var(--ui-inset-bg);
    color: var(--dark);
    border: none;
    box-shadow: var(--ui-inset);
    transition: var(--ui-move);
}
html :is(.btn-secondary, .history-btn.secondary, .gl-find, .cookie-btn:not(.accept), .profile-action-btn, .payment-option-btn,
         .auth-switch-btn, .back-btn):hover {
    background: var(--ui-inset-bg-hover);
    box-shadow: var(--ui-inset-hover);
    color: var(--dark);
}
html .gl-skip { background: transparent; box-shadow: none; color: var(--muted); }
html :is(.btn-secondary, .history-btn.secondary, .gl-find, .cookie-btn, .profile-action-btn, .payment-option-btn, .auth-switch-btn, .back-btn):active {
    transform: scale(0.96);
}

/* Круглые кнопки в шапке (профиль, корзина) и стрелки фото. «☰» и крестики — без кругов (владелец, 22.10.2026) */
html :is(header .profile-btn, .icon-btn, .modal-image-arrow) {
    background: var(--ui-inset-bg);
    color: var(--dark);
    border: none;
    box-shadow: var(--ui-inset);
    transition: var(--ui-move);
}
html :is(header .profile-btn, .icon-btn, .modal-image-arrow):hover {
    background: var(--ui-inset-bg-hover);
    box-shadow: var(--ui-inset-hover), 0 0 0 4px rgba(var(--veil-rgb), 0.05);
    color: var(--dark);
}
html :is(header .profile-btn, .icon-btn, .modal-image-arrow):active { transform: scale(0.92); }

/* Счётчик корзины — белый «бегунок» */
html :is(.cart-count, .cart-badge) {
    background: var(--ui-knob);
    color: #1E7A4C;
    box-shadow: var(--ui-raise);
    font-weight: 800;
}

/* ---------- 3. Выбор: «Доставка / Самовывоз», разделы, варианты в окне блюда ---------- */
html .delivery-toggle {
    background: var(--ui-inset-bg);
    box-shadow: var(--ui-inset);
    border-radius: 999px;
}
html .delivery-toggle::before {
    background: var(--ui-grad);
    box-shadow: var(--ui-glow);
    border-radius: 999px;
    transition: transform 0.45s var(--ui-spring);
}
html .delivery-option { border-radius: 999px; }
html .delivery-option.active { color: var(--ui-on); }

/* лента разделов прилипает к шапке и едет поверх блюд — подложка плотная, со стеклом */
html .category-tab {
    background: rgba(var(--card-rgb), 0.6);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--ui-inset);
    transition: var(--ui-move);
}
html .category-tab:hover { background: rgba(var(--card-rgb), 0.78); box-shadow: var(--ui-inset-hover); color: var(--dark); }
html .category-tab.active { background: var(--ui-grad); color: var(--ui-on); box-shadow: 0 0 0 1px rgba(76, 175, 125, 0.45), 0 3px 8px rgba(30, 122, 76, 0.35); }
/* Лента прокручивается (overflow) и обрезала свечение кнопок и край первой кнопки (владелец, 22.10.2026):
   даём ленте поле под тень и сдвигаем её на столько же назад — кнопки стоят где стояли */
html .category-slider { padding: 8px 8px 10px; margin: -8px -8px -10px; scroll-padding-inline: 8px; }
@media (max-width: 768px) {
    html .category-slider { padding: 6px 4px 8px; margin: -6px -4px -8px; scroll-padding-inline: 4px; }
}
html .category-tab:active { transform: scale(0.95); }
/* Стрелки ленты (владелец, 22.10.2026: «зелёные, но чтобы не сливались с выбранной категорией»):
   выбранная категория — ЗАЛИТАЯ пилюля, стрелки — КОНТУРНЫЕ круги: стекло + кольцо из того же градиента,
   зелёная стрелка. Залитыми становятся только под мышкой. */
html .category-arrow {
    border: 1.5px solid transparent;
    background: linear-gradient(rgba(var(--card-rgb), 0.9), rgba(var(--card-rgb), 0.9)) padding-box, var(--ui-grad) border-box;
    color: var(--ui-arrow-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(76, 175, 125, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--ui-move);
}
html .category-arrow svg { stroke-width: 3; }
html[data-theme="light"] .category-arrow:not(:hover) { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 10px rgba(30, 122, 76, 0.12); }
html .category-arrow:hover {
    background: var(--ui-grad) padding-box, var(--ui-grad) border-box;
    color: var(--ui-on);
    box-shadow: var(--ui-glow-hover);
    transform: translateY(-50%) scale(1.08);
}
html .category-arrow:active { transform: translateY(-50%) scale(0.92); transition-duration: 0.12s; }

/* Варианты в окне блюда (размер, вес, лаваш, ламаджо, котлета, вкус…) */
html .config-option {
    background: var(--ui-inset-bg);
    border: none;
    box-shadow: var(--ui-inset);
    border-radius: 16px;
    transition: var(--ui-move);
}
html .config-option:hover { background: var(--ui-inset-bg-hover); box-shadow: var(--ui-inset-hover); border: none; }
html .config-option.selected {
    background: var(--ui-grad);
    color: var(--ui-on);
    box-shadow: var(--ui-glow);
    border: none;
}
html .config-option.selected :is(.config-option-price, .size-option-weight, .config-option-name) { color: var(--ui-on); opacity: 1; }
html .config-option:active { transform: scale(0.96); }

/* Добавки к шаурме — строка с «кружком» справа */
html .addon-option {
    background: var(--ui-inset-bg);
    border: none;
    box-shadow: var(--ui-inset);
    border-radius: 16px;
    transition: var(--ui-move);
}
html .addon-option:hover { background: var(--ui-inset-bg-hover); box-shadow: var(--ui-inset-hover); border: none; }
html .addon-option.selected { background: var(--ui-inset-bg-hover); box-shadow: inset 0 0 0 1px rgba(76, 175, 125, 0.55); border: none; }
html :is(.addon-checkbox, .modal-recommendation-checkbox) {
    border: none;
    background: var(--ui-inset-bg);
    box-shadow: var(--ui-inset);
    transition: var(--ui-move);
}
html :is(.addon-option.selected .addon-checkbox, .modal-recommendation-item.selected .modal-recommendation-checkbox) {
    background: var(--ui-grad);
    box-shadow: var(--ui-glow);
    border: none;
}

/* «Может добавим к заказу?» */
html .modal-recommendation-item {
    background: var(--ui-inset-bg);
    border: none;
    box-shadow: var(--ui-inset);
    border-radius: 16px;
    transition: var(--ui-move);
}
html .modal-recommendation-item:hover { background: var(--ui-inset-bg-hover); box-shadow: var(--ui-inset-hover); transform: translateY(-2px); border: none; }
html .modal-recommendation-item.selected { box-shadow: inset 0 0 0 1px rgba(76, 175, 125, 0.65), 0 0 0 1px rgba(76, 175, 125, 0.25); background: var(--ui-inset-bg-hover); border: none; }

/* Точки слайдеров (баннер, фото блюда) */
html :is(.hero-dot, .modal-image-dot) { transition: var(--ui-move); }
html :is(.hero-dot.active, .modal-image-dot.active) { background: var(--ui-grad); box-shadow: var(--ui-glow); }

/* Вкладки корзины («Корзина / История…») и способ оплаты */
/* «Корзина / История заказов» — как «Доставка / Самовывоз»: дорожка + зелёная пилюля */
html .tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: none; border-radius: 999px; background: var(--ui-inset-bg); box-shadow: var(--ui-inset); }
html .tab { border: none; margin: 0; border-radius: 999px; padding: 0.6rem 1.25rem; transition: var(--ui-move); }
html .tab:hover { color: var(--dark); background: rgba(var(--veil-rgb), 0.05); }
html .tab.active { background: var(--ui-grad); color: var(--ui-on); box-shadow: var(--ui-glow); border: none; }
html .tab:active { transform: scale(0.96); }
/* аватар с буквой — градиент */
html :is(.profile-avatar, .profile-avatar-modal, .auth-photo-circle:not(.has-photo), .profile-photo-circle:not(.has-photo)) { background: var(--ui-grad); box-shadow: var(--ui-glow); }
html .payment-method { border-radius: 16px; transition: var(--ui-move); }
/* кружок выбора оплаты — как галочка: пустой вдавленный, выбранный — зелёный с белой точкой
   (24.10.2026: тёмно-зелёная точка на зелёном градиенте выглядела пятном) */
html .payment-radio { border: none; background: var(--ui-inset-bg); box-shadow: var(--ui-inset); }
html .payment-method input[type="radio"]:checked ~ .payment-radio { background: var(--ui-grad); box-shadow: var(--ui-glow); }
html .payment-radio::after { width: 8px; height: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* ---------- 4. Кол-во и вес: «− 300 г +» — белые бегунки в вдавленной дорожке ---------- */
html :is(.grams-stepper, .rm-qty, .quantity-control, .qty-controls) {
    background: var(--ui-inset-bg);
    box-shadow: var(--ui-inset);
    border-radius: 999px;
}
html :is(.grams-btn, .rm-qty-btn, .qty-btn) {
    background: var(--ui-knob);
    color: var(--ui-knob-ink);
    border: none;
    border-radius: 50%;
    box-shadow: var(--ui-raise);
    transition: var(--ui-move);
}
html :is(.grams-btn, .rm-qty-btn, .qty-btn):not(:disabled):hover { background: var(--ui-knob); color: var(--ui-knob-ink); box-shadow: var(--ui-raise), 0 0 0 4px rgba(var(--veil-rgb), 0.08); }
html :is(.grams-btn, .rm-qty-btn, .qty-btn):not(:disabled):active { transform: scale(0.88); transition-duration: 0.12s; }
html :is(.grams-btn, .rm-qty-btn, .qty-btn):disabled { opacity: 0.35; }

/* ---------- 5. Поля ввода — вдавленные, фокус — зелёное кольцо ---------- */
html :is(.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form-group textarea, .form-group select,
         .dish-comment, .promo-form, .menu-search, .gl-search input, .fb-field input, .fb-field textarea, .fb-field select,
         input.address-input, .checkout-modal textarea, .search-input) {
    background: var(--ui-inset-bg);
    border: none;
    box-shadow: var(--ui-inset);
    border-radius: 14px;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
html :is(.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form-group textarea, .form-group select,
         .dish-comment, .fb-field input, .fb-field textarea, .fb-field select, input.address-input, .checkout-modal textarea, .search-input):focus {
    outline: none;
    border: none;
    background: var(--ui-inset-bg-hover);
    box-shadow: var(--ui-inset), var(--ui-focus);
}
html :is(.promo-form, .menu-search):focus-within { box-shadow: var(--ui-inset), var(--ui-focus); border: none; }
html .menu-search input { background: transparent; box-shadow: none; }
html .loc-chip { background: var(--ui-inset-bg); border: none; box-shadow: var(--ui-inset), inset 0 0 0 1px rgba(76, 175, 125, 0.45); transition: var(--ui-move); }
html .loc-chip:hover { background: var(--ui-inset-bg-hover); }
html .loc-chip:active { transform: scale(0.97); }

/* Галочки (согласие с офертой, «запомнить» и т. п.) — круглые, как бегунок; отмеченная — зелёная */
html :is(.consent-label, .fb-consent) input[type="checkbox"], html #rememberMe {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    border-radius: 7px;
    background: var(--ui-inset-bg);
    box-shadow: var(--ui-inset);
    cursor: pointer;
    transition: var(--ui-move);
    vertical-align: middle;
}
html :is(.consent-label, .fb-consent) input[type="checkbox"]:checked, html #rememberMe:checked {
    background: var(--ui-grad) center / 14px 14px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"), var(--ui-grad);
    box-shadow: var(--ui-glow);
}
html :is(.consent-label, .fb-consent) input[type="checkbox"]:active, html #rememberMe:active { transform: scale(0.9); }
html :is(.consent-label, .fb-consent) input[type="checkbox"]:focus-visible, html #rememberMe:focus-visible { outline: none; box-shadow: var(--ui-inset), var(--ui-focus); }

/* галочка «Согласен с офертой» в оформлении заказа: <input hidden> + .checkbox-custom */
html .checkbox-custom { border: none; border-radius: 7px; background: var(--ui-inset-bg); box-shadow: var(--ui-inset); transition: var(--ui-move); }
html .checkbox-label input[type="checkbox"]:checked + .checkbox-custom { background: var(--ui-grad); box-shadow: var(--ui-glow); }
html .checkbox-custom::after { background-color: #FFFFFF; }
html .checkbox-label:active .checkbox-custom { transform: scale(0.9); }

/* ---------- 6. Поверхности: шапка-стекло, карточки, окна ---------- */
html header {
    background: var(--ui-glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 rgba(var(--veil-rgb), 0.08), 0 4px 20px rgba(0, 0, 0, 0.25);
}
html[data-theme="light"] header { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.05); }

html .product-card {
    border-radius: 20px;
    box-shadow: var(--ui-hair), var(--ui-card-shadow);
    transition: transform 0.45s var(--ui-spring), box-shadow 0.3s ease;
}
html .product-card:hover { transform: translateY(-5px); box-shadow: var(--ui-hair), var(--ui-card-shadow-hover); }
html .product-image { border-radius: 20px 20px 0 0; }

/* Значки на фото: «Хит», «Фирменный» — пилюля-градиент; «Попробуй» — стекло */
html .badge-new { background: var(--ui-grad); color: var(--ui-on); box-shadow: var(--ui-glow), 0 2px 8px rgba(0, 0, 0, 0.3); border-radius: 999px; }
html .badge-try { background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; }

/* Окна (блюдо, вход, профиль, оформление) */
html :is(.shawarma-modal-content, .modal-content, .auth-modal-content, .checkout-modal-content, .profile-modal-content) {
    border-radius: 24px;
    box-shadow: var(--ui-hair), 0 30px 80px rgba(0, 0, 0, 0.5);
}
html :is(.shawarma-modal-footer) { box-shadow: inset 0 1px 0 rgba(var(--veil-rgb), 0.07); }

/* Боковое меню */
html .sidebar-menu.active { box-shadow: inset -1px 0 0 rgba(var(--veil-rgb), 0.08), 20px 0 60px rgba(0, 0, 0, 0.4); }
/* строки меню — без линий-разделителей; при наведении строку заливает зелёный градиент пилюлей (как включённый переключатель) */
html .sidebar-item { border-bottom: none; }
html .sidebar-item h3:has(a) { border-radius: 14px; transition: box-shadow 0.25s ease, transform 0.4s var(--ui-spring); }
html .sidebar-item h3:has(a)::before { background: var(--ui-grad); transition: width 0.45s var(--ui-spring); }
html .sidebar-item h3:has(a):hover { box-shadow: var(--ui-glow); }
html .sidebar-item h3:has(a):hover, html .sidebar-item h3:has(a):hover a { color: var(--ui-on); }
html .sidebar-item h3:has(a):active { transform: scale(0.98); }
html .sidebar-vk-btn { background: var(--ui-inset-bg); box-shadow: var(--ui-inset); border: none; border-radius: 14px; transition: var(--ui-move); }
html .sidebar-vk-btn:hover { background: var(--ui-grad); color: var(--ui-on); box-shadow: var(--ui-glow); }

/* Карточки на страницах «Доставка», «О нас», документы, корзина */
html :is(.card, .restaurant-card, .cart-item, .summary-card, .order-summary, .history-item, .profile-bonus-card, .callout) {
    border-radius: 20px;
    box-shadow: var(--ui-hair), var(--ui-card-shadow);
}

/* Уведомления и баннер cookie — стекло */
html .cookie-banner { border-radius: 20px; box-shadow: var(--ui-hair), 0 20px 60px rgba(0, 0, 0, 0.45); }

/* Фокус с клавиатуры — то же зелёное кольцо */
html :is(button, a, [role="button"]):focus-visible { outline: none; box-shadow: var(--ui-focus); }

@media (prefers-reduced-motion: reduce) {
    html * { transition-duration: 0.01ms !important; }
}

/* Кнопки в окне профиля (на главной заданы с !important — перекрываем так же) */
html .profile-action-btn { background: var(--ui-inset-bg) !important; box-shadow: var(--ui-inset); border-radius: 16px; }
html .profile-action-btn:hover { background: var(--ui-inset-bg-hover) !important; color: var(--dark) !important; box-shadow: var(--ui-inset-hover); }
html .profile-action-btn:hover svg { stroke: currentColor !important; }
html .profile-action-btn svg { stroke: var(--accent) !important; }

/* «Когда доставить»: Как можно скорее / Ко времени — как «Доставка / Самовывоз» (кружок радио прячем) */
html .when-options { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--ui-inset-bg); box-shadow: var(--ui-inset); }
html .when-option { position: relative; padding: 0.55rem 1.1rem; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; transition: var(--ui-move); }
html .when-option input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
html .when-option:has(input:checked) { background: var(--ui-grad); color: var(--ui-on); box-shadow: var(--ui-glow); }
html .when-option:has(input:focus-visible) { box-shadow: var(--ui-focus); }
html .when-option:active { transform: scale(0.96); }
html .when-pick :is(select, input) { background: var(--ui-inset-bg); border: none; box-shadow: var(--ui-inset); border-radius: 14px; color: var(--dark); }
html .when-pick :is(select, input):focus { outline: none; box-shadow: var(--ui-inset), var(--ui-focus); }

/* Телефон (владелец, 22.10.2026: «сверху слишком много занято, места для товаров мало»):
   - у ленты разделов своего фона нет, кнопки прозрачнее — висят над блюдами;
   - при прокрутке вниз шапка уезжает вверх целиком, лента поднимается к краю экрана;
     прокрутил вверх — шапка вернулась (класс hdr-hidden ставит js/ui.js). */
@media (max-width: 768px) {
    html .category-slider-wrapper { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
        transition: top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
    html .category-tab { background: rgba(var(--card-rgb), 0.42); }
    html .category-tab:hover { background: rgba(var(--card-rgb), 0.6); }
    html header { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; }
    html.hdr-hidden header { transform: translateY(-100%); box-shadow: none !important; }   /* тень скрипт вписывает в style — иначе полосой у края */
    html.hdr-hidden .category-slider-wrapper { top: env(safe-area-inset-top, 0px); }
    /* уехавшую шапку убираем совсем: иначе Safari заливает полосу под «островом» её цветом */
    html.hdr-gone header { display: none; }
}

/* Плашка активного раздела (22.10.2026): одна на ленту, переезжает к нужной кнопке с пружиной.
   Ставит и двигает tpl/index.php (moveCategoryIndicator); у самой активной кнопки фона нет. */
html .category-slider { position: relative; }
html .category-tab { position: relative; z-index: 1; transition: background 0.3s ease, box-shadow 0.3s ease, color 0.35s ease, transform 0.4s var(--ui-spring); }
html .category-tab.active { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ui-on); }
html .category-indicator {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 999px;
    background: var(--ui-grad);
    box-shadow: 0 0 0 1px rgba(76, 175, 125, 0.45), 0 3px 8px rgba(30, 122, 76, 0.35);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.55s var(--ui-spring), width 0.55s var(--ui-spring), height 0.3s ease, opacity 0.25s ease;
}
html .category-indicator.shown { opacity: 1; }
html .category-indicator.no-anim { transition: none; }

/* ---------- Главная: фон шапки уезжает вверх при прокрутке (владелец, 22.10.2026; js/ui.js) ----------
   Фон — отдельный слой header::before: --hdr-hide 0 → на месте, 1 → уехал вверх и растаял.
   Когда фона нет (html.hdr-floating), у «голых» элементов — номер телефона, переключатели, кнопка профиля —
   появляется своё стекло, «☰» — лёгкий ореол: иначе их не видно поверх фото блюд. */
/* box-shadow — !important: скрипт главной при прокрутке вписывает тень прямо в шапку (header.style.boxShadow),
   и без фона она висела полосой между кнопками шапки и лентой разделов (владелец, 22.10.2026); тень теперь у ::before */
html.hdr-scroll header { background: transparent; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.hdr-scroll header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--ui-glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 rgba(var(--veil-rgb), 0.08), 0 4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(calc(var(--hdr-hide, 0) * -100%));
    opacity: calc(1 - var(--hdr-hide, 0));
    will-change: transform, opacity;
}
html.hdr-scroll[data-theme="light"] header::before { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.05); }

html.hdr-scroll header :is(.delivery-toggle, .phone, .profile-btn, .theme-toggle, .menu-toggle, .mobile-menu-btn) {
    transition: background-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, transform 0.4s var(--ui-spring);
}
html.hdr-scroll header .phone { padding: 0.45rem 0.9rem; border-radius: 999px; }
html.hdr-floating header :is(.delivery-toggle, .phone, .profile-btn) {
    background-color: rgba(var(--card-rgb), 0.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--ui-inset), 0 4px 14px rgba(0, 0, 0, 0.25);
}
html.hdr-floating:not([data-theme="light"]) header .theme-toggle {
    background-color: rgba(var(--card-rgb), 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
html.hdr-floating header :is(.menu-toggle, .mobile-menu-btn) { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.45)); }
html.hdr-floating[data-theme="light"] header :is(.menu-toggle, .mobile-menu-btn) { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }
html.hdr-floating[data-theme="light"] header :is(.delivery-toggle, .phone, .profile-btn) { box-shadow: var(--ui-inset), 0 4px 14px rgba(0, 0, 0, 0.08); }
/* на телефоне js/ui.js этот режим не включает — полоса шапки и стекло ленты остаются */

/* Блюда со значком в светлой теме (владелец, 22.10.2026: «практически не видно»): тёмно-зелёная
   рамка 2px и свечение 18% на белом терялись — рамка ярче и толще, вокруг мягкий зелёный ореол */
html[data-theme="light"] .product-card.is-featured {
    box-shadow: 0 0 0 2.5px #2EA567, 0 0 0 7px rgba(46, 165, 103, 0.14), 0 10px 30px rgba(30, 122, 76, 0.28);
}
html[data-theme="light"] .product-card.is-featured:hover {
    box-shadow: 0 0 0 2.5px #2EA567, 0 0 0 8px rgba(46, 165, 103, 0.2), 0 16px 40px rgba(30, 122, 76, 0.36);
}

/* Телефон и планшет (владелец, 22.10.2026): «Доставка / Самовывоз» — в ОДНОЙ строке с кнопками,
   между «☰» и кнопками справа. Раньше переключатель уходил второй строкой и шапка занимала
   почти четверть экрана. */
@media (max-width: 968px) {
    html .header-container { flex-wrap: nowrap; gap: 0.5rem; }
    html .menu-toggle { order: 1; flex: 0 0 auto; }
    html .delivery-toggle { order: 2; width: auto; flex: 1 1 auto; min-width: 0; max-width: 320px; margin: 0 auto; }
    html .header-actions { order: 3; margin-left: 0; flex: 0 0 auto; }
}
@media (max-width: 640px) {
    html .header-container { gap: 0.4rem; padding: 0.6rem 0.75rem; }
    html .header-actions { gap: 0.4rem; }
    html .delivery-option { padding: 0.5rem 0.3rem; font-size: clamp(11px, 3.15vw, 13.5px); overflow: hidden; text-overflow: ellipsis; }
    html header .profile-btn { width: 34px; height: 34px; }
    html .cart-btn { padding: 0.45rem 0.6rem; min-width: 40px; }
}
@media (max-width: 400px) {
    :root { --sw-w: 42px; --sw-h: 26px; --sw-knob: 20px; }
}
/* самые узкие телефоны (360) — «Самовывоз» не влезал на 4 px */
@media (max-width: 370px) {
    html .header-container { gap: 0.3rem; padding: 0.6rem 0.6rem; }
    html .header-actions { gap: 0.3rem; }
    html .delivery-option { padding: 0.5rem 0.15rem; font-size: 11px; letter-spacing: -0.01em; }
}

/* ---------- Подложки окон и Safari 26 на iPhone (владелец, 23.10.2026) ----------
   Safari красит полосу под своей нижней панелью (и над страницей) в цвет «прибитого» fixed-слоя
   с фоном у края экрана — открытое окно давало огромную чёрную полосу снизу. Псевдоэлементы
   Safari не учитывает: затемнение переносим на ::before, у самой подложки фона нет. */
html :is(.shawarma-modal, .profile-modal, .auth-modal, .address-modal, .address-form-modal, .payment-modal,
         .card-form-modal, .order-tracking-modal, .edit-profile-modal, .checkout-modal, .document-modal,
         .gl-modal, .fb-overlay, .sidebar-overlay, #confirmOverlay, #cardSelectorModal, #addCardModal) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html :is(.shawarma-modal, .profile-modal, .auth-modal, .address-modal, .address-form-modal, .payment-modal,
         .card-form-modal, .order-tracking-modal, .edit-profile-modal, .checkout-modal, .document-modal,
         .gl-modal, .fb-overlay, .sidebar-overlay, #confirmOverlay, #cardSelectorModal, #addCardModal)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* «Подтвердить» в опасных действиях (выйти, удалить) — красная кнопка: скрипт ставит её цвет в style,
   а общий зелёный градиент выше её перекрывал */
html #confirmOk[style*="244, 67, 54"] {
    background: linear-gradient(180deg, #FF6B5E 0%, #D93025 100%) !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 94, 0.45), 0 4px 14px rgba(217, 48, 37, 0.35);
}

/* ---------- Чёрная полоса под нижней панелью Safari без открытых окон (владелец, 23.10.2026) ----------
   Safari берёт цвет полосы из background-color «прибитых» элементов у края экрана — даже уехавших
   за край. Таких у нас было два: плашка про cookie (после «Принять» не исчезала, а уезжала влево —
   внизу, почти во всю ширину, с чёрным фоном) и закрытое боковое меню (за левым краем, во всю высоту).
   - плашка cookie, пока не показана, — убрана совсем; появляется той же анимацией;
   - фон у плашки и меню — background-image того же цвета: на вид то же, а background-color пустой. */
html .cookie-banner:not(.show) { display: none !important; }
html .cookie-banner.show { animation: ui-cookie-in 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes ui-cookie-in { from { transform: translateX(-500px); } to { transform: translateX(0); } }
html .cookie-banner { background: linear-gradient(var(--white), var(--white)); }
html .sidebar-menu { background: linear-gradient(var(--header-bg), var(--header-bg)); }

/* ---------- Боковое меню и подложки окон не касаются нижнего края (владелец, 23.10.2026) ----------
   Открыл меню — внизу чёрная полоса, закрыл — осталась: Safari 26 красит полосу под своей нижней
   панелью, если у самого низа экрана «прибит» широкий элемент (даже прозрачный или за краем экрана).
   - закрытое меню убрано совсем (display: none), выезжает/уезжает анимацией (класс ui-closing — js/ui.js);
   - меню, его затемнение и подложки окон кончаются на 12 px выше края: эта кромка — под стеклом
     нижней панели Safari, а у края экрана не остаётся «прибитого» широкого слоя. */
:root { --ui-edge-gap: 12px; }
html .sidebar-menu:not(.active):not(.ui-closing) { display: none; }
html .sidebar-menu.active { animation: ui-side-in 0.3s ease; }
html .sidebar-menu.ui-closing { left: 0 !important; animation: ui-side-out 0.3s ease forwards; }
@keyframes ui-side-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ui-side-out { from { transform: none; } to { transform: translateX(-100%); } }
html .sidebar-menu { top: 0; bottom: var(--ui-edge-gap); height: auto; }
html :is(.shawarma-modal, .profile-modal, .auth-modal, .address-modal, .address-form-modal, .payment-modal,
         .card-form-modal, .order-tracking-modal, .edit-profile-modal, .checkout-modal, .document-modal,
         .gl-modal, .fb-overlay, .sidebar-overlay, #confirmOverlay, #cardSelectorModal, #addCardModal) {
    top: 0 !important;
    bottom: var(--ui-edge-gap) !important;
    height: auto !important;
}
html :is(.shawarma-modal, .profile-modal, .auth-modal, .address-modal, .address-form-modal, .payment-modal,
         .card-form-modal, .order-tracking-modal, .edit-profile-modal, .checkout-modal, .document-modal,
         .gl-modal, .fb-overlay, .sidebar-overlay, #confirmOverlay, #cardSelectorModal, #addCardModal)::before {
    bottom: var(--ui-edge-gap);
}
/* Продолжение затемнения (и бокового меню) под нижней панелью Safari — НЕ fixed: Safari 26 учитывает
   любые fixed-слои у края, даже псевдоэлементы (проверено владельцем на iPhone 23.10). Это обычный
   блок страницы .ui-edge-fill (position: absolute), js/ui.js ставит его к низу экрана, пока открыто окно. */
html .ui-edge-fill { position: absolute; left: 0; right: 0; height: 240px; pointer-events: none;
    background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html .ui-edge-fill[hidden] { display: none; }
html .ui-edge-fill.with-side { background: linear-gradient(90deg, var(--header-bg) 0, var(--header-bg) var(--ui-side-w, 320px), rgba(0, 0, 0, 0.58) var(--ui-side-w, 320px)); }

/* ---------- Крестики «закрыть/удалить» — в одном стиле (владелец, 23.10.2026: «крестики старого дизайна») ----------
   Стеклянный круг с тонкой обводкой, крестик при наведении поворачивается; у «удалить» наведение — красное.
   «☰» и крестик бокового меню остаются без круга (просьба владельца 22.10). */
html :is(.shawarma-modal-close, .modal-close, .order-close-btn, .gl-close, .fb-close, .toast-close, .promo-remove, .card-item-delete, .remove-btn) {
    border: none;
    border-radius: 50%;
    background: rgba(var(--card-rgb), 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(var(--veil-rgb), 0.14), 0 2px 8px rgba(0, 0, 0, 0.22);
    color: var(--dark);
    transition: var(--ui-move);
}
html :is(.shawarma-modal-close, .modal-close, .order-close-btn, .gl-close, .fb-close, .toast-close):hover {
    background: rgba(var(--card-rgb), 0.85);
    color: var(--dark);
    box-shadow: inset 0 0 0 1px rgba(var(--veil-rgb), 0.24), 0 4px 12px rgba(0, 0, 0, 0.28);
}
html :is(.shawarma-modal-close, .modal-close, .order-close-btn, .gl-close, .fb-close, .toast-close, .promo-remove, .card-item-delete, .remove-btn) svg { transition: transform 0.4s var(--ui-spring); }
html :is(.shawarma-modal-close, .modal-close, .order-close-btn, .gl-close, .fb-close, .toast-close, .promo-remove, .card-item-delete, .remove-btn):hover svg { transform: rotate(90deg); }
html :is(.shawarma-modal-close, .modal-close, .order-close-btn, .gl-close, .fb-close, .toast-close, .promo-remove, .card-item-delete, .remove-btn):active { transform: scale(0.9); }
html :is(.promo-remove, .card-item-delete, .remove-btn):hover {
    background: linear-gradient(180deg, #FF6B5E 0%, #D93025 100%);
    color: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(255, 107, 94, 0.45), 0 4px 12px rgba(217, 48, 37, 0.35);
}
/* крестик на фото блюда — всегда тёмное стекло, в любой теме */
html .shawarma-modal-close { background: rgba(20, 20, 20, 0.5); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 10px rgba(0, 0, 0, 0.35); }
html .shawarma-modal-close:hover { background: rgba(20, 20, 20, 0.7); color: #FFFFFF; }

/* Оставшиеся места старого плоского тёмно-зелёного (#004524 через --primary-color: наведения, иконки,
   статусы) — тем же зелёным, что середина градиента; в светлой теме — тёмнее, для контраста текста */
:root { --primary-color: #2E9E66; }
html[data-theme="light"] { --primary-color: #1E7A4C; }
html .remove-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 32px; }
html .remove-btn .x-icon { width: 16px; height: 16px; }

/* Остатки старого плоского тёмно-зелёного (обход сайта 23.10.2026) */
html .back-btn:hover { background: var(--ui-inset-bg-hover); }
html .modal-close:active { background: rgba(var(--card-rgb), 0.85); }
html :is(.product-image, .item-image) { background-color: var(--surface); background-image: linear-gradient(160deg, rgba(var(--veil-rgb), 0.07), rgba(var(--veil-rgb), 0.01)); }
html .order-status { background: var(--ui-grad); color: var(--ui-on); border-radius: 999px; box-shadow: var(--ui-glow); }
html .address-item.selected { border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(76, 175, 125, 0.75), 0 0 16px rgba(76, 175, 125, 0.18); }
html .checkbox-text a:hover { color: var(--accent); }
html .fb-done-icon { background: var(--ui-grad); box-shadow: var(--ui-glow); }
html .profile-bonus-card { background: var(--ui-grad); box-shadow: var(--ui-glow); border-radius: 20px; }
html .status-step.active .status-icon { background: var(--ui-grad); box-shadow: var(--ui-glow); }

/* Отслеживание заказа (24.10.2026): линия шла на 2 px левее центра кружков и залезала в нижний край кружка.
   Кружок — 1rem + рамка 3px с двух сторон = 22px (у ::before нет box-sizing: border-box), центр — 11px от его края. */
html .status-item::after { left: calc(-2.5rem + 10px); top: calc(0.5rem + 24px); height: calc(100% - 26px); }
/* Шапка отслеживания всегда зелёная — заголовок и номер заказа белые в обеих темах (24.10.2026: в светлой были чёрные) */
html .tracking-header :is(h1, .order-number) { color: #FFFFFF; }
/* Галочки в оформлении (оферта, согласие) — с промежутком, а не вплотную (24.10.2026) */
html .checkout-agreement { display: flex; flex-direction: column; gap: 0.9rem; }
/* Карточка бонусов в профиле — зелёная в обеих темах, текст и значок белые (26.10.2026: в светлой были чёрные) */
html .profile-bonus-card, html .profile-bonus-card :is(.profile-bonus-label, .profile-bonus-value, .profile-bonus-hint, .profile-bonus-icon) { color: #FFFFFF; }
html .profile-bonus-card .profile-bonus-icon svg { stroke: #FFFFFF; }
/* Заглушка фото в «Редактировать профиль» (26.10.2026): буква имени по центру, значок камеры — кружок на краю */
html .photo-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto; }
html .auth-photo-circle .photo-initial { font-size: 3rem; font-weight: 700; color: #FFFFFF; line-height: 1; letter-spacing: 0; }
html .photo-badge { position: absolute; right: 2px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: var(--ui-knob); color: #1E7A4C;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--card-bg, #1C1C1E); transition: var(--ui-move); }
html .photo-badge:hover { transform: scale(1.08); }
html .photo-badge:active { transform: scale(0.94); }
/* Корзина, блок «Профиль»: иконки кнопок были почти белые (#F2F2F7) — в светлой теме не видно. Зелёные, как в профиле
   на главной; при наведении — цвета текста (26.10.2026) */
html .profile-actions .profile-btn svg { stroke: var(--accent) !important; }
html .profile-actions .profile-btn:hover svg { stroke: currentColor !important; }
/* Круги фото (главная и корзина): прозрачная пунктирная рамка 3px давала полоски градиента сверху и снизу — убрана;
   в корзине — буква имени как на главной (26.10.2026) */
html :is(.auth-photo-circle, .profile-photo-circle):not(.has-photo) { border: none; background-repeat: no-repeat; }
html .profile-photo-circle .photo-initial { font-size: 3rem; font-weight: 700; color: #FFFFFF; line-height: 1; }
/* Корзина, «Бонусы в ресторане»: значок подарка был почти белый (#F2F2F7) — в светлой теме пропадал (26.10.2026) */
html .bonus-row-left svg { stroke: var(--accent); }
/* Оформление доставки: квартира / подъезд / этаж / домофон (26.10.2026) */
html .addr-extra { margin: 0.9rem 0 0.4rem; }
html .addr-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
html .addr-extra-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
html .addr-extra-grid input { width: 100%; padding: 0.65rem 0.85rem; border: none; border-radius: 12px; font-size: 0.95rem;
    background: var(--ui-inset-bg); box-shadow: var(--ui-inset); color: var(--dark); }
html .addr-extra-grid input:focus { outline: none; box-shadow: var(--ui-inset), var(--ui-focus); }
html .addr-extra-grid input:disabled { opacity: 0.45; }
html .addr-extra-house { margin-top: 0.75rem; }
/* Сколько бонусов списать (26.10.2026) */
html .bonus-amount { display: flex; align-items: center; gap: 0.6rem; margin: 0.1rem 0 0.6rem; flex-wrap: wrap; }
html .bonus-amount[hidden] { display: none; }
html .bonus-amount label { font-size: 0.88rem; color: var(--muted); font-weight: 600; margin-right: auto; }
html .bonus-amount-field { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.85rem; border-radius: 12px;
    background: var(--ui-inset-bg); box-shadow: var(--ui-inset); }
html .bonus-amount-field input { width: 5.5rem; padding: 0.6rem 0; border: none; background: transparent; color: var(--dark);
    font-size: 1rem; font-weight: 700; text-align: right; -moz-appearance: textfield; }
html .bonus-amount-field input::-webkit-outer-spin-button,
html .bonus-amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html .bonus-amount-field input:focus { outline: none; }
html .bonus-amount-field:focus-within { box-shadow: var(--ui-inset), var(--ui-focus); }
html .bonus-amount-field span { color: var(--muted); font-weight: 600; }
html .bonus-amount-max { padding: 0.55rem 0.9rem; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
    background: var(--ui-inset-bg); box-shadow: var(--ui-raise); color: var(--accent); }

/* Страница отслеживания: «Позвонить в ресторан» и выбор ресторана (28.10.2026) */
html .btn-call { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
html .call-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, 0.55); }
html .call-modal[hidden] { display: none; }
html .call-modal-box { position: relative; width: 100%; max-width: 380px; padding: 1.4rem 1.2rem 1.2rem; border-radius: 20px;
    background: var(--card-bg, #1C1C1E); box-shadow: var(--ui-card-shadow); color: var(--dark); }
html .call-modal-box h3 { margin: 0 2rem 1rem 0; font-size: 1.1rem; }
html .call-modal-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 34px; height: 34px; border: none; border-radius: 50%;
    cursor: pointer; font-size: 1.3rem; line-height: 1; background: var(--ui-inset-bg); box-shadow: var(--ui-inset); color: var(--dark); }
html .call-list { display: flex; flex-direction: column; gap: 0.6rem; }
html .call-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; border-radius: 14px; text-decoration: none;
    background: var(--ui-inset-bg); box-shadow: var(--ui-inset); }
html .call-phone { color: var(--accent); font-weight: 700; font-size: 1.05rem; }
html .call-place { color: var(--muted); font-size: 0.78rem; }