/* Нижняя мобильная панель связи и навигации.
   ОДИН файл на весь сайт: подключают и страницы Astro (Base.astro), и статические
   лендинги Tilda (вставляет scripts/patch-landings.py). Разметку рисуют два
   рендерера из общих данных src/data/mobile-nav.json — здесь только внешний вид.
   Панель существует только на мобильном: всё внутри @media, чтобы на десктопе
   не было ни отступа у body, ни следов панели. */

@media (max-width: 899px) {
  body { padding-bottom: var(--swnav-h, 62px); }

  /* Плавающие круги контактов — мобильная панель их заменяет.
     .fc — страницы Astro, .t898 — виджет «Напишите нам» на лендингах Tilda. */
  .fc,
  .t898 { display: none !important; }

  /* Кнопка корзины стоит слева внизу (left:18px) — поднимаем её над панелью */
  .swc-fab {
    bottom: calc(var(--swnav-h, 62px) + 12px) !important;
    transition: opacity 0.2s;
  }
  /* z-index корзины (99990) выше шторки (99942) — при открытой шторке её кнопка
     перекрывала нижний пункт списка. Гасим на время выбора мессенджера.
     !important обязателен: sw-cart.js управляет display инлайновым стилем. */
  body.swnav-open .swc-fab { opacity: 0 !important; pointer-events: none !important; }

  /* Уровни панели. Были 39/40/41 — этого хватало на страницах Astro, но на
     лендингах Tilda фиксированные зеро-блоки (баннер «Ближайшее событие»)
     сидят на z-999 и накрывали шторку мессенджеров. Поднимаем панель выше них,
     оставаясь НИЖЕ корзины (99990/99992) и модалок /moscow (100000) — их
     панель и так пропускает вперёд через body[data-swnav-hide]. */
  .swnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99941;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: #14131b;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.13));
    padding: 7px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  /* Шрифт задаём явно: на лендингах Tilda панель иначе наследует их засечную
     гарнитуру и выглядит не так, как на страницах Astro. */
  .swnav,
  .swnav__sheet {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }

  .swnav__i {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 2px 3px;
    background: none; border: 0; cursor: pointer;
    color: #a49fb8; font-weight: 500; font-size: 9.5px; line-height: 1.25;
    text-decoration: none; white-space: nowrap;
    transition: color 0.15s;
  }
  .swnav__i.is-on { color: #fff; }
  .swnav__i.is-on::before {
    content: ""; position: absolute; top: -7px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 2px; border-radius: 0 0 2px 2px;
    background: var(--accent, #ff2e82);
  }
  .swnav__i > svg { display: block; width: 19px; height: 19px; }
  .swnav__i:focus-visible { outline: 2px solid var(--accent, #ff2e82); outline-offset: 2px; border-radius: 6px; }

  /* Центральная кнопка. Ячейка остаётся обычной (высота как у соседей),
     а сам круг позиционируется от .swnav и поднимается над её верхним краем —
     иначе он накрывает собственную подпись и растит высоту панели. */
  .swnav__fabwrap { position: static; }
  .swnav__fab {
    position: absolute; left: 50%; top: -19px;
    transform: translateX(-50%);
    width: 56px; height: 56px; border-radius: 999px;
    background: #14131b; border: 3px solid var(--bg, #191821);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 8;
    transition: transform 0.2s;
  }
  .swnav__stack { display: inline-flex; align-items: center; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .swnav__ic { display: inline-flex; border-radius: 999px; }
  .swnav__ic + .swnav__ic { margin-left: -7px; box-shadow: 0 0 0 1.5px #14131b; }
  .swnav__ic svg { display: block; width: 20px; height: 20px; }

  .swnav__ping {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 999px;
    background: #2fd07f; box-shadow: 0 0 0 2px #14131b;
    transition: opacity 0.2s;
  }
  .swnav__ping::after {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    border-radius: 999px; background: #2fd07f;
    animation: swnav-ring 2.6s ease-out infinite;
  }
  @keyframes swnav-ring {
    0% { transform: scale(1); opacity: 0.7; }
    70%, 100% { transform: scale(2.3); opacity: 0; }
  }

  body.swnav-open .swnav__fab { transform: translateX(-50%) scale(0.95); }
  body.swnav-open .swnav__stack { transform: rotate(45deg) scale(0.85); }
  body.swnav-open .swnav__ping { opacity: 0; }

  /* Затемнение и шторка. Скрипт снимает с затемнения [hidden] (иначе display:none
     убил бы transition), поэтому в закрытом состоянии оно остаётся в DOM на весь
     экран. Без pointer-events:none этот прозрачный слой перехватывал ВСЕ тапы
     на мобильном — кнопки и ссылки страницы переставали нажиматься. */
  .swnav__backdrop {
    position: fixed; inset: 0; z-index: 99940;
    background: rgba(10, 8, 14, 0.6);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  body.swnav-open .swnav__backdrop {
    opacity: 1; pointer-events: auto; visibility: visible;
  }

  .swnav__sheet {
    position: fixed; left: 10px; right: 10px; z-index: 99942;
    bottom: calc(var(--swnav-h, 62px) + 12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-soft, #23212f);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.13));
    border-radius: 18px;
    padding: 5px 9px 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    transform: translateY(16px);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1.02), opacity 0.22s, visibility 0.28s;
  }
  body.swnav-open .swnav__sheet {
    transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible;
  }

  .swnav__grab { width: 34px; height: 4px; border-radius: 999px; margin: 6px auto 7px; background: rgba(255, 255, 255, 0.2); }
  .swnav__lbl {
    display: flex; justify-content: space-between; align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px; letter-spacing: 0.16em; color: #a49fb8;
    padding: 2px 6px 7px;
  }
  .swnav__online { color: #2fd07f; }

  .swnav__opt {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 7px; border-radius: 12px;
    color: #fff; text-decoration: none;
  }
  .swnav__opt + .swnav__opt { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .swnav__opt:active, .swnav__opt:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
  .swnav__optic { width: 34px; height: 34px; flex: 0 0 auto; }
  .swnav__optic svg { display: block; width: 34px; height: 34px; }
  .swnav__optt { flex: 1 1 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .swnav__optt b { font-size: 13.5px; font-weight: 700; }
  .swnav__optt small {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9.5px; color: #a49fb8; letter-spacing: 0.02em;
  }
  .swnav__arw { color: var(--accent, #ff2e82); font-size: 15px; flex: 0 0 auto; }
  .swnav__tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px; font-weight: 700; background: #6a4bff; color: #fff;
    padding: 1px 4px; border-radius: 3px; letter-spacing: 0.09em;
    margin-left: 5px; vertical-align: 2px;
  }

  /* Панель уходит, когда сверху открыто что-то своё:
     модалки лендинга (:target, z-100000) и окно корзины (z-99992). */
  body[data-swnav-hide="1"] .swnav,
  body[data-swnav-hide="1"] .swnav__sheet,
  body[data-swnav-hide="1"] .swnav__backdrop { display: none; }
  /* Отступ body НЕ обнуляем: панель скрыта под полноэкранным слоем, а сброс
     padding'а дал бы скачок вёрстки на её высоту при закрытии модалки. */
  body[data-swnav-hide="1"] .swc-fab { bottom: 18px !important; }
}

@media (min-width: 900px) {
  .swnav, .swnav__sheet, .swnav__backdrop { display: none; }
}

@media print {
  .swnav, .swnav__sheet, .swnav__backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swnav__ping::after { animation: none; }
  .swnav__sheet, .swnav__stack, .swnav__fab { transition: none; }
}