@charset "UTF-8";
/* Модуль ventolux_mobile_nav - Figma «Nav bar» 2487:125836 (390x56).
   П'ять табів по 78, поля 8 зверху й знизу, іконка 24, підпис Caption Medium,
   лічильник Notif 16. Панель тримається внизу екрана над контентом; на ПК її немає. */
.mobnav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  padding-block: var(--space-2);
  background: var(--c-white);
  box-shadow: var(--shadow-bar);
}

/* місце під панеллю в потоці сторінки: інакше вона накриває кінець футера */
.mobnav__gap {
  height: var(--mobile-nav-h);
}

.mobnav__tab {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  color: var(--c-primary);
  background: none;
  border: 0;
}

.mobnav__icon {
  position: relative;
  display: flex;
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.mobnav__icon .v-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* лічильник сідає на правий верхній кут іконки, як у макеті */
.mobnav__icon .v-badge {
  top: -4px;
  right: -10px;
}

.mobnav__label {
  max-width: 100%;
  overflow: hidden;
  font: var(--t-caption-medium);
  letter-spacing: var(--t-caption-ls);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* State=Selected: та сама іконка залитим накресленням */
.mobnav__tab .v-icon--on {
  display: none;
}

.mobnav__tab.is-active .v-icon--on {
  display: block;
}

.mobnav__tab.is-active .v-icon--off {
  display: none;
}

/* саму панель ховає утиліта .v-hide-desktop, розпірка знімається тут */
@media (min-width: 1024px) {
  .mobnav__gap {
    display: none;
  }
}