/* ═══════════════════════════════════════════════════════════════════════════
   Нижняя панель навигации (телефоны и узкие планшеты).

   Замысел. Панель — это плоскость, а не парящая карточка: у сайта язык
   документа — бланк, штемпель, накладная, — и стеклянные плавающие панели в
   него не ложатся. Отсюда решения:

     • фон непрозрачный. Полупрозрачное «стекло» красиво в помещении и
       нечитаемо на солнце, а наш человек стоит на складе у ворот;
     • глубина — одной линией сверху, без теней. Тень сделала бы панель
       предметом, лежащим на странице; линия делает её краем листа;
     • активный пункт помечен акцентной линейкой 3 px сверху — тем же приёмом,
       что отметка в бланке и линейка в прайсе, а не универсальной «таблеткой».
       Приём уже живёт на сайте, и панель им к сайту и пришивается.

   Файл подключается с media (max-width: 1099px): на десктопе браузер его даже
   не ждёт при первой отрисовке.
   ═══════════════════════════════════════════════════════════════════════════ */

.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;                 /* ниже модалок и меню, выше содержимого */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;

  background: #fff;
  border-top: 1px solid rgba(16, 24, 32, .12);
  /* Вырез снизу у iPhone: панель обязана доходить до края стекла, а пальцем
     нажимают всё равно выше него. */
  padding-bottom: env(safe-area-inset-bottom, 0px);

  transform: translateY(0);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;       /* без этого iOS дёргает панель при прокрутке */
}

html[data-theme="dark"] .mbar {
  background: #121416;
  border-top-color: rgba(232, 236, 245, 0.62);
}

/* Ушла вниз: открытое меню, поднятая клавиатура. */
.mbar.is-away,
.mbar.is-keyboard {
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
}

/* ─────────────── пункт ─────────────── */

/* На сайте есть правило `body#top :is(button, .btn, …) { font-size:15px
   !important; padding:12px 16px !important }`. У него в селекторе
   идентификатор, поэтому обычный класс проигрывает даже с !important —
   при равном !important спор решает специфичность. У того правила вес
   (1,1,1): body + #top + :is(), а :is() считается по самому «тяжёлому»
   аргументу — там есть .btn. Поэтому и у нас должно быть больше: имя класса
   повторено дважды, это даёт (1,2,0) и снимает спор окончательно. Приём
   некрасивый, но честнее гонки !important и не требует трогать общий слой. */
#mbar .mbar__item.mbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  /* 56 px — не украшение, а требование: цель касания не меньше 44, плюс
     запас на промах в движении. */
  min-height: 56px;
  padding: 6px 2px 7px !important;

  border: 0;
  background: none !important;
  color: rgba(29, 29, 27, 0.64);
  font: 500 12px/1.2 var(--f-text, Inter, system-ui, sans-serif) !important;
  text-decoration: none;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   /* свой отклик ниже, чётче */
  transition: color .16s ease, background-color .16s ease;
}

html[data-theme="dark"] #mbar .mbar__item { color: rgba(232, 236, 245, 0.62); }

#mbar .mbar__ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
#mbar .mbar__ico svg { width: 100% !important; height: 100% !important; display: block; }

#mbar .mbar__txt {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Отклик на касание. На телефоне нет наведения, и без явного нажатого
   состояния человек не понимает, попал он или нет. Коротко и заметно. */
#mbar .mbar__item:active {
  background: rgba(16, 24, 32, .06);
  transform: scale(.97);
  transition-duration: .06s;
}
html[data-theme="dark"] #mbar .mbar__item:active { background: rgba(255, 255, 255, .08); }

#mbar .mbar__item:focus-visible {
  outline: 2px solid #e61e29;
  outline-offset: -3px;
  border-radius: var(--r-sm, 8px);
}

/* ─────────────── текущий раздел ─────────────── */

#mbar .mbar__item.is-on { color: rgba(29, 29, 27, 0.96); }
html[data-theme="dark"] #mbar .mbar__item.is-on { color: rgba(245, 246, 250, 0.96); }

/* Та самая акцентная линейка. Ставится сверху пункта, как отметка на бланке. */
#mbar .mbar__item.is-on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  background: #e61e29;
}

/* ─────────────── «Заявка» ─────────────── */

/* Единственный пункт, который ведёт к деньгам. Выделяем цветом иконки —
   не заливкой: залитая кнопка в ряду из четырёх читается как реклама и
   перетягивает внимание с текущего раздела. */
#mbar .mbar__item--accent .mbar__ico { color: #e61e29; }
#mbar .mbar__item--accent.is-on .mbar__ico { color: #e61e29; }

/* ─────────────── место под панель ─────────────── */

/* Содержимое не должно уезжать под панель: последний блок и «наверх» обязаны
   быть доступны. */
body.has-mbar,
body#top.has-mbar {
  padding-bottom: var(--etl-mobile-nav-height, calc(70px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Кнопка «наверх» и плавающие элементы поднимаются над панелью. */
body.has-mbar .etl-uibtt,
html:root body#top.has-mbar #etlBtt,
body.has-mbar .etl-chat-fab {
  bottom: calc(var(--etl-mobile-nav-height, 70px) + 14px) !important;
}

html:root body#top.has-mbar #etlBtt {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  min-height: 44px !important; padding: 0 !important; right: 16px !important;
}
html:root body#top.has-mbar.etl-mobile-keyboard #etlBtt {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* Совсем узкие экраны: подпись мельче 12 px не читается, поэтому ужимаем
   отступы, а не текст. */
@media (max-width: 340px) {
  #mbar .mbar__item { padding-left: 0; padding-right: 0; gap: 2px; }
  #mbar .mbar__txt { font-size: 12px !important; }
}

/* Кому анимация мешает — панель просто исчезает без хода. */
@media (prefers-reduced-motion: reduce) {
  .mbar { transition: none; }
  #mbar .mbar__item:active { transform: none; }
}