/* LAKEEVA_CLIENT_TABBAR_V18_START */

:root {
  --lakeeva-nav-surface:
    rgba(3, 40, 31, 0.9);

  --lakeeva-nav-surface-deep:
    rgba(2, 27, 21, 0.96);

  --lakeeva-nav-border:
    rgba(255, 255, 255, 0.16);

  --lakeeva-nav-accent:
    #d8bd8c;

  --lakeeva-nav-accent-soft:
    rgba(216, 189, 140, 0.14);

  --lakeeva-nav-accent-border:
    rgba(216, 189, 140, 0.38);

  --lakeeva-nav-text:
    rgba(244, 247, 243, 0.56);

  --lakeeva-nav-text-active:
    #ffffff;

  --client-tabbar-height:
    72px;

  --client-content-bottom:
    calc(
      132px +
      env(safe-area-inset-bottom)
    );
}


/* Общая фиксированная область */

.client-navigation {
  position: fixed;
  z-index: 1090;

  right: 0;
  bottom: 0;
  left: 0;

  display: flex;

  width:
    min(
      100%,
      430px
    );

  margin: 0 auto;

  padding:
    0 12px
    var(--client-tabbar-bottom);

  align-items: flex-end;
  flex-direction: column;

  gap: 10px;

  pointer-events: none;
}

.client-navigation[hidden] {
  display: none !important;
}


/* Плавающая кнопка связи */

.client-navigation__fab {
  position: relative;

  display: flex;

  min-height: 48px;
  max-width:
    calc(100% - 16px);

  align-items: center;

  gap: 9px;

  margin-right: 8px;
  padding: 8px 17px 8px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.72);

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      #fbf8f1 0%,
      #f4efe5 58%,
      #e8dfd0 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.95),
    0 12px 28px
      rgba(1, 25, 19, 0.26),
    0 3px 9px
      rgba(1, 25, 19, 0.12);

  color: #09261e;

  font: inherit;

  cursor: pointer;
  pointer-events: auto;

  transition:
    transform 180ms
      cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms ease;

  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.client-navigation__fab:active {
  transform: scale(0.96);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.92),
    0 7px 18px
      rgba(1, 25, 19, 0.22);
}

.client-navigation__fab-icon {
  display: grid;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(9, 38, 30, 0.09);
}

.client-navigation__fab-icon svg {
  display: none;

  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.client-navigation__fab[
  data-client-action-mode="support"
]
[data-client-action-icon="support"],
.client-navigation__fab[
  data-client-action-mode="admin"
]
[data-client-action-icon="admin"] {
  display: block;
}

.client-navigation__fab-label {
  display: block !important;

  overflow: visible !important;

  color: inherit !important;

  font-size: 13px !important;
  font-weight: 720 !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;

  text-overflow: clip !important;
}

.client-navigation__fab-status {
  position: absolute;

  top: 3px;
  right: 3px;

  width: 9px;
  height: 9px;

  border:
    2px solid
    #f4efe5;

  border-radius: 50%;

  background: #35b879;

  box-shadow:
    0 0 0 3px
    rgba(53, 184, 121, 0.12);
}

.client-navigation__fab[
  data-client-action-mode="admin"
]
.client-navigation__fab-status {
  display: none;
}


/* Главная панель */

.client-navigation
.client-tabbar {
  position: relative !important;
  z-index: 1 !important;

  inset: auto !important;

  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;

  width: 100% !important;
  height:
    var(--client-tabbar-height) !important;

  margin: 0 !important;
  padding: 7px !important;

  border:
    1px solid
    var(--lakeeva-nav-border) !important;

  border-radius: 28px !important;

  background:
    linear-gradient(
      145deg,
      var(--lakeeva-nav-surface),
      var(--lakeeva-nav-surface-deep)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.14),
    inset 0 -1px 0
      rgba(0, 0, 0, 0.12),
    0 18px 42px
      rgba(0, 20, 14, 0.3) !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(165%) !important;

  backdrop-filter:
    blur(26px)
    saturate(165%) !important;

  animation: none !important;
  pointer-events: auto;
  isolation: isolate;
}


/* Старые декоративные элементы */

.client-navigation
.client-tabbar__glass,
.client-navigation
.client-tabbar__highlight,
.client-navigation
.client-tabbar__indicator {
  display: none !important;
}


/* Пункты меню */

.client-navigation
.client-tabbar__item {
  position: relative;
  z-index: 2;

  display: flex !important;

  min-width: 0;
  height: 100%;

  align-items: center;
  flex-direction: column;
  justify-content: center;

  gap: 3px !important;

  padding: 3px 1px !important;

  border:
    1px solid
    transparent !important;

  border-radius: 21px !important;

  background:
    transparent !important;

  color:
    var(--lakeeva-nav-text) !important;

  font: inherit;

  cursor: pointer;

  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    transform 160ms ease !important;

  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.client-navigation
.client-tabbar__item:active {
  transform: scale(0.94) !important;
}

.client-navigation
.client-tabbar__item.is-active {
  border-color:
    var(
      --lakeeva-nav-accent-border
    ) !important;

  background:
    var(
      --lakeeva-nav-accent-soft
    ) !important;

  color:
    var(
      --lakeeva-nav-text-active
    ) !important;
}


/* Иконки */

.client-navigation
.client-tabbar__icon {
  display: grid !important;

  width: 34px !important;
  height: 34px !important;

  place-items: center;

  border:
    1px solid
    transparent;

  border-radius: 17px !important;

  background: transparent;

  transform: none !important;

  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms
      cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.client-navigation
.client-tabbar__icon::before {
  display: none !important;
  content: none !important;
}

.client-navigation
.client-tabbar__icon svg {
  display: block !important;

  width: 22px !important;
  height: 22px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  transition:
    transform 200ms
      cubic-bezier(0.16, 1, 0.3, 1),
    filter 200ms ease !important;
}

.client-navigation
.client-tabbar__item.is-active
.client-tabbar__icon {
  border-color:
    var(
      --lakeeva-nav-accent-border
    );

  background:
    rgba(216, 189, 140, 0.12);

  color:
    var(
      --lakeeva-nav-accent
    ) !important;

  transform:
    translateY(-1px) !important;
}

.client-navigation
.client-tabbar__item.is-active
.client-tabbar__icon svg {
  transform:
    scale(1.04);

  filter:
    drop-shadow(
      0 2px 7px
      rgba(216, 189, 140, 0.32)
    );
}


/* Подписи */

.client-navigation
.client-tabbar__label {
  display: block !important;

  max-width: 100%;

  overflow: hidden;

  color: currentColor !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size: 9.5px !important;
  font-weight: 560 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.05 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-navigation
.client-tabbar__item.is-active
.client-tabbar__label {
  font-weight: 700 !important;
}


/* Страхование до создания экрана */

.client-navigation
.client-tabbar__item--disabled {
  cursor: default;

  color:
    rgba(
      244,
      247,
      243,
      0.34
    ) !important;
}

.client-navigation
.client-tabbar__item--disabled:active {
  transform: none !important;
}


/* Узкие экраны */

@media (max-width: 380px) {
  :root {
    --client-tabbar-height:
      68px;
  }

  .client-navigation {
    padding-right: 9px;
    padding-left: 9px;

    gap: 9px;
  }

  .client-navigation
  .client-tabbar {
    padding: 6px !important;

    border-radius:
      25px !important;
  }

  .client-navigation
  .client-tabbar__item {
    border-radius:
      19px !important;
  }

  .client-navigation
  .client-tabbar__icon {
    width: 31px !important;
    height: 31px !important;
  }

  .client-navigation
  .client-tabbar__icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .client-navigation
  .client-tabbar__label {
    font-size:
      8.5px !important;
  }

  .client-navigation__fab {
    min-height: 46px;

    margin-right: 6px;
  }
}


/* Системное уменьшение анимаций */

@media (
  prefers-reduced-motion: reduce
) {
  .client-navigation,
  .client-navigation * {
    animation: none !important;
    transition-duration:
      0.01ms !important;
  }
}

/* LAKEEVA_CLIENT_TABBAR_V18_END */

/* LAKEEVA_NAVIGATION_HIT_SHIELD_V1_START */

/*
 * Нижняя навигация полностью перехватывает касания.
 * Это не позволяет нажать карточку профиля,
 * прокрученную под фиксированную Tab Bar.
 */
.client-navigation {
  pointer-events: auto;
}

.client-navigation__fab,
.client-navigation .client-tabbar,
.client-navigation .client-tabbar__item {
  pointer-events: auto;
  touch-action: manipulation;
}

/* LAKEEVA_NAVIGATION_HIT_SHIELD_V1_END */

