/* ACTION-BAR-SPEC v2.4.0 | 2026-08-17
   ========================================================================
   Карта layout: >960px — панель выключена; <=960px — fixed;
   при высоте <=400px — static, без компенсации страницы.
   Рабочее состояние — 3 колонки; нерабочее — 2 колонки без телефона.

   Мобильная панель действий — общая надстройка всех клиентских Preview.
   Глобального box-sizing: border-box в проекте намеренно нет, поэтому
   сборка уточняет фактическую высоту панели и обновляет этот токен.
   ======================================================================== */

:root {
  --mobile-bar-h: 60px;
}

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--bg-footer);
  border-top: 2px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    transform 250ms cubic-bezier(0, 0, 0.2, 1),
    opacity 250ms cubic-bezier(0, 0, 0.2, 1),
    visibility 0s linear 0s;
}

.mobile-bar[data-business-state="closed"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-bar__item[hidden] {
  display: none;
}

.mobile-bar.is-interactive {
  pointer-events: auto;
}

.mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 4px 12px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-family: var(--font-narrow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.mobile-bar__item:not([hidden]) + .mobile-bar__item:not([hidden]) {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.mobile-bar__label {
  white-space: nowrap;
}

.mobile-bar__item svg {
  color: var(--gold);
  display: block;
}

.mobile-bar__item--cta {
  background: var(--wine);
  color: #fff;
}

.mobile-bar__item--cta svg { color: #fff; }

.mobile-bar__item:active { background: rgba(255, 255, 255, 0.06); }
.mobile-bar__item--cta:active { background: var(--wine-hover, #6f1919); }

.mobile-bar-demo {
  position: fixed;
  right: 12px;
  bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + 10px);
  z-index: 41;
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid rgba(201, 151, 46, 0.7);
  border-radius: 999px;
  background: rgba(15, 17, 19, 0.96);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font: 600 10px/1 var(--font-narrow);
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Плавающий переключатель — инструмент показа, а не часть клиентской
   страницы, и на узких экранах он перекрывал кнопки: замер 2026-09-08 на 360
   давал 176x44 px поверх кнопки WhatsApp, нажатие уходило в переключатель.
   Перенос под шапку оказался хуже — там он накрывал стрелку и точку в секции
   услуг на 53-78%. Поэтому оставлен на месте, но ужат: видно состояние
   (переключатель и слово «Авто»), подпись режима скрыта. */
@media (max-width: 480px) {
  .mobile-bar-demo { gap: 6px; padding: 7px 10px; }
  .mobile-bar-demo > span[aria-hidden="true"]:last-child { display: none; }
}

/* На десктопе переключатель показа паркуется в закреплённую шапку: там он не
   может столкнуться с содержимым страницы. Внизу справа он накрывал адрес
   в подвале (ссылка на карту) на 8% — визуальный тест, 1440x900, 2026-09-16.
   На 1024/1280 px новая форма также попадает под переключатель.
   Шапка 77 px, переключатель 44 -> по вертикали по центру. z-index выше
   шапки (50). До 960 px остаётся зонная видимость мобильной панели. */
@media (min-width: 961px) {
  .mobile-bar-demo {
    top: 16px;
    bottom: auto;
    right: 24px;
    z-index: 60;
  }
}

.mobile-bar-demo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mobile-bar-demo[hidden] { display: none; }

/* Показывается на всех ширинах, а не только на mobile: состояние, которым он
   управляет, на final-dev3 меняет действие в Hero, а Hero виден на desktop. */
.mobile-bar-demo:not([hidden]) { display: flex; }

.mobile-bar-demo__track {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.mobile-bar-demo__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.mobile-bar-demo[aria-checked="true"] .mobile-bar-demo__track {
  background: var(--wine);
}

.mobile-bar-demo[aria-checked="true"] .mobile-bar-demo__track::after {
  transform: translateX(12px);
}

.mobile-bar.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 175ms cubic-bezier(0.4, 0, 1, 1),
    opacity 175ms cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.25s;
}

@media (max-width: 960px) {
  html {
    scroll-padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
  }

  .mobile-bar { display: grid; }
  .mobile-bar-demo:not([hidden]) { display: flex; }

  body {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
  }
}

@media (max-height: 400px) {
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
  .mobile-bar { position: static; }
}

@media (max-width: 960px) and (max-height: 400px) {
  .mobile-bar-demo:not([hidden]) {
    position: static;
    display: flex;
    width: max-content;
    margin: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bar,
  .mobile-bar.is-hidden,
  .mobile-bar-demo__track::after { transition: none; }
}