/* SevSvet Bottom Navigation v2 */

.bottom-nav,
.bottom-navigation,
.tab-bar {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding:
    4px
    max(6px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left)) !important;

  border: 1px solid var(--sev-border, rgba(20, 59, 54, 0.08)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;

  background: var(--sev-surface, rgba(255, 255, 255, 0.92)) !important;
  box-shadow:
    0 -7px 22px rgba(22, 63, 58, 0.07),
    0 -2px 6px rgba(22, 63, 58, 0.025) !important;

  -webkit-backdrop-filter: blur(20px) saturate(1.14) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
}

.bottom-nav > *,
.bottom-navigation > *,
.tab-bar > * {
  min-width: 0 !important;
  min-height: 52px !important;
}

.bottom-nav button,
.bottom-nav a,
.bottom-navigation button,
.bottom-navigation a,
.tab-bar button,
.tab-bar a,
.nav-item,
.nav-button,
.bottom-tab {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;

  min-width: 0 !important;
  min-height: 50px !important;
  padding: 5px 4px !important;

  border: 0 !important;
  border-radius: 16px !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #788582 !important;
  text-align: center !important;
}

.bottom-nav svg,
.bottom-navigation svg,
.tab-bar svg,
.nav-item svg,
.nav-button svg,
.bottom-tab svg {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 auto !important;
}

.bottom-nav span,
.bottom-navigation span,
.tab-bar span,
.nav-item span,
.nav-button span,
.bottom-tab span {
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
}

.bottom-nav .active,
.bottom-nav .is-active,
.bottom-navigation .active,
.bottom-navigation .is-active,
.tab-bar .active,
.tab-bar .is-active,
.nav-item.active,
.nav-item.is-active,
.nav-button.active,
.nav-button.is-active,
.bottom-tab.active,
.bottom-tab.is-active {
  background: rgba(225, 243, 241, 0.88) !important;
  color: var(--sev-accent, #087d77) !important;

  box-shadow:
    inset 0 0 0 1px rgba(8, 125, 119, 0.04),
    0 2px 8px rgba(8, 125, 119, 0.04) !important;
}

.bottom-nav button:active,
.bottom-nav a:active,
.bottom-navigation button:active,
.bottom-navigation a:active,
.tab-bar button:active,
.tab-bar a:active,
.nav-item:active,
.nav-button:active,
.bottom-tab:active {
  transform: scale(0.985) !important;
}

@media (max-width: 390px) {
  .bottom-nav,
  .bottom-navigation,
  .tab-bar {
    min-height: 60px !important;
  }

  .bottom-nav button,
  .bottom-nav a,
  .bottom-navigation button,
  .bottom-navigation a,
  .tab-bar button,
  .tab-bar a,
  .nav-item,
  .nav-button,
  .bottom-tab {
    min-height: 48px !important;
  }

  .bottom-nav svg,
  .bottom-navigation svg,
  .tab-bar svg,
  .nav-item svg,
  .nav-button svg,
  .bottom-tab svg {
    width: 18px !important;
    height: 18px !important;
  }

  .bottom-nav span,
  .bottom-navigation span,
  .tab-bar span,
  .nav-item span,
  .nav-button span,
  .bottom-tab span {
    font-size: 9.5px !important;
  }
}

@media (min-width: 700px) {
  .bottom-nav,
  .bottom-navigation,
  .tab-bar {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;

    border-left: 1px solid var(--sev-border, rgba(20, 59, 54, 0.08)) !important;
    border-right: 1px solid var(--sev-border, rgba(20, 59, 54, 0.08)) !important;
    border-radius: 20px !important;
  }
}


/* Bottom Navigation v2.1 — final compact shell */

.bottom-nav,
.bottom-navigation,
.tab-bar {
  min-height: 56px !important;
  padding:
    3px
    max(6px, env(safe-area-inset-right))
    max(3px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left)) !important;

  border-radius: 18px 18px 0 0 !important;

  box-shadow:
    0 -5px 18px rgba(22, 63, 58, 0.055),
    0 -1px 4px rgba(22, 63, 58, 0.02) !important;
}

.bottom-nav > *,
.bottom-navigation > *,
.tab-bar > * {
  min-height: 48px !important;
}

.bottom-nav button,
.bottom-nav a,
.bottom-navigation button,
.bottom-navigation a,
.tab-bar button,
.tab-bar a,
.nav-item,
.nav-button,
.bottom-tab {
  min-height: 46px !important;
  padding: 4px 4px !important;
  gap: 2px !important;

  border-radius: 14px !important;
}

.bottom-nav svg,
.bottom-navigation svg,
.tab-bar svg,
.nav-item svg,
.nav-button svg,
.bottom-tab svg {
  width: 18px !important;
  height: 18px !important;
}

.bottom-nav span,
.bottom-navigation span,
.tab-bar span,
.nav-item span,
.nav-button span,
.bottom-tab span {
  font-size: 9.5px !important;
  line-height: 1 !important;
}

.bottom-nav .active,
.bottom-nav .is-active,
.bottom-navigation .active,
.bottom-navigation .is-active,
.tab-bar .active,
.tab-bar .is-active,
.nav-item.active,
.nav-item.is-active,
.nav-button.active,
.nav-button.is-active,
.bottom-tab.active,
.bottom-tab.is-active {
  background: rgba(225, 243, 241, 0.76) !important;

  box-shadow:
    inset 0 0 0 1px rgba(8, 125, 119, 0.035),
    0 1px 5px rgba(8, 125, 119, 0.03) !important;
}

@media (max-width: 390px) {
  .bottom-nav,
  .bottom-navigation,
  .tab-bar {
    min-height: 54px !important;
  }

  .bottom-nav button,
  .bottom-nav a,
  .bottom-navigation button,
  .bottom-navigation a,
  .tab-bar button,
  .tab-bar a,
  .nav-item,
  .nav-button,
  .bottom-tab {
    min-height: 44px !important;
  }
}