/* ─────────────────────────────────────────────────────────────────
   ОБОЛОЧКА ПРИЛОЖЕНИЯ + СТЕКЛО ДЛЯ САЙТА (16.09.2026, решение владельца)

   Отдельным файлом, а не правкой страниц: у главной полторы тысячи строк
   стилей инлайном, у записи свой `manual.css`, и размазать редизайн по ним
   значило бы не суметь его снять. Этот слой подключается ПОСЛЕДНИМ и
   переопределяет то, что нужно, — убрать редизайн можно, вынув два тега.

   Что делает:
   1. Шрифт. На iPhone системный SF (через `-apple-system`), на Android Inter.
      ⚠️ Файл SF Pro класть на сайт НЕЛЬЗЯ — лицензия Apple это запрещает;
      законный путь один, и он же самый быстрый: системный шрифт не качается.
   2. Стекло. Те же приёмы, что в панели: размытые пластины, блик по кромке.
      ⚠️ Размытие получают ТОЛЬКО крупные пластины — шапка, нижняя панель,
      модалки, липкая строка итога. `backdrop-filter` считается видеокартой на
      каждый кадр и на каждый элемент; полсотни размытых карточек услуг
      уронили бы прокрутку на обычном телефоне.
   3. Нижняя панель разделов — на телефоне, до 860 px. На десктопе её нет:
      там работает обычная шапка с меню.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* На iPhone первым отработает системный SF, на Android оба системных имени
     не разрешатся и возьмётся Inter с Google Fonts. */
  --app-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
              'Segoe UI', Roboto, sans-serif;
  --app-glass: rgba(255, 255, 255, .78);
  --app-glass-blur: blur(26px) saturate(170%);
  --app-edge: inset 0 1px 0 rgba(255, 255, 255, .6);
  --app-lift: 0 8px 28px rgba(13, 40, 35, .10);
  --app-bar-h: 62px;
  --app-radius: 18px;
}

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4,
button, input, select, textarea,
.logo, .nav-logo, .pill, .fname {
  font-family: var(--app-font);
}
/* SF и Inter «плотнее» Onest на тех же весах — заголовкам возвращаем воздух */
h1, h2 { letter-spacing: -.028em; }

/* ── ШАПКА ──────────────────────────────────────────────────────── */
header, .nav {
  background: var(--app-glass);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: var(--app-edge);
}

/* ── НИЖНЯЯ ПАНЕЛЬ РАЗДЕЛОВ ─────────────────────────────────────── */
.appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none;                      /* включается медиазапросом ниже */
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--app-glass);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  border-top: 1px solid rgba(13, 40, 35, .08);
  box-shadow: var(--app-edge), 0 -6px 22px rgba(13, 40, 35, .07);
}
.appbar-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--app-bar-h);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: #6A7B78; text-decoration: none; background: none; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.appbar-item svg { width: 23px; height: 23px; stroke-width: 1.9; }
.appbar-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-item.on { color: #00665C; }   /* тот же контрастный бирюзовый, что в панели */
.appbar-item:active { opacity: .55; }

/* ── ЛИПКАЯ СТРОКА ИТОГА НА ЗАПИСИ ──────────────────────────────── */
/* ⚠️ Плотнее остального стекла (0.94 против 0.78) намеренно: под ней идёт
   описание услуги мелким текстом, и сквозь панель проступали чужие буквы
   ровно там, где стоит сумма заказа и кнопка. Деньги читаются в первую
   очередь — это та же претензия «шрифты плохо читаемы», что была в панели. */
.total-bar {
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: var(--app-edge), 0 -6px 22px rgba(13, 40, 35, .09);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── МОБИЛЬНАЯ ОБОЛОЧКА ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .appbar { display: flex; }
  /* Панель стоит поверх контента, поэтому низ страницы отодвигаем — иначе
     подвал и последняя кнопка уезжают под неё. */
  body { padding-bottom: calc(var(--app-bar-h) + env(safe-area-inset-bottom, 0px)); }

  /* ⚠️ На записи внизу СВОЯ панель с итогом и кнопкой заказа. Две панели друг
     на друге — это потерянные заявки, поэтому пока строка итога показана,
     разделы уезжают вниз: клиент уже оформляет заказ, навигация ему мешает. */
  body:has(.total-bar.visible) .appbar,
  body.appbar-hidden .appbar { transform: translateY(110%); pointer-events: none; }
  .appbar { transition: transform .22s ease; }
}

/* ── СТЕКЛО ВЫКЛЮЧЕНО В СИСТЕМЕ ─────────────────────────────────── */
/* У кого включено «уменьшение прозрачности», стекло становится плотным белым:
   это настройка для тех, кому размытый фон мешает читать. */
@media (prefers-reduced-transparency: reduce) {
  :root { --app-glass: #fff; --app-glass-blur: none; }
  .total-bar { background: #fff !important; }
  header, .nav, .appbar, .total-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}