/* =========================================================
   Gymsessed Bottom Navigation Active Glider - Index Based
   ========================================================= */

.gys-app-shell .gys-bottom-nav {
  --gys-nav-count: 5;
  --gys-nav-index: 0;

  position: fixed !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateX(-50%) translateZ(0) !important;
  -webkit-transform: translateX(-50%) translateZ(0) !important;
  grid-template-columns: repeat(5, 1fr) !important;
  contain: layout paint style !important;
}

.gys-app-shell .gys-bottom-nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(173, 255, 0, 0.07), transparent 44%),
    rgba(18, 18, 18, 0.92) !important;
}

.gys-app-shell .gys-nav-glider {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  width: calc((100% - 14px) / var(--gys-nav-count, 5)) !important;
  height: calc(100% - 14px) !important;
  border-radius: 18px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;

  transform: translate3d(calc(var(--gys-nav-index, 0) * 100%), 0, 0) !important;
  -webkit-transform: translate3d(calc(var(--gys-nav-index, 0) * 100%), 0, 0) !important;

  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.38), transparent 30%),
    linear-gradient(135deg, #d6ff55 0%, #adff00 54%, #8ee800 100%) !important;

  box-shadow:
    0 0 20px rgba(173, 255, 0, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;

  will-change: transform !important;

  transition:
    transform 185ms cubic-bezier(.2, .88, .18, 1) !important;
}

.gys-app-shell .gys-bottom-nav.is-glider-booting .gys-nav-glider {
  transition: none !important;
}

.gys-app-shell .gys-nav-glider::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 7px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 0.7 !important;
}

.gys-app-shell .gys-bottom-nav .gys-nav-item,
.gys-app-shell .gys-bottom-nav a.gys-nav-item {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transition:
    color 120ms ease,
    transform 120ms ease !important;
}

.gys-app-shell .gys-bottom-nav .gys-nav-item:hover,
.gys-app-shell .gys-bottom-nav .gys-nav-item:focus,
.gys-app-shell .gys-bottom-nav .gys-nav-item.is-active,
.gys-app-shell .gys-bottom-nav .gys-nav-item.is-active:hover,
.gys-app-shell .gys-bottom-nav .gys-nav-item.is-active:focus,
.gys-app-shell .gys-bottom-nav a.gys-nav-item:hover,
.gys-app-shell .gys-bottom-nav a.gys-nav-item:focus,
.gys-app-shell .gys-bottom-nav a.gys-nav-item.is-active,
.gys-app-shell .gys-bottom-nav a.gys-nav-item.is-active:hover,
.gys-app-shell .gys-bottom-nav a.gys-nav-item.is-active:focus {
  background: transparent !important;
  box-shadow: none !important;
}

.gys-app-shell .gys-bottom-nav .gys-nav-item.is-active,
.gys-app-shell .gys-bottom-nav a.gys-nav-item.is-active {
  color: #050505 !important;
  transform: translate3d(0, -1px, 0) !important;
  -webkit-transform: translate3d(0, -1px, 0) !important;
}

.gys-app-shell .gys-bottom-nav .gys-nav-item:not(.is-active),
.gys-app-shell .gys-bottom-nav a.gys-nav-item:not(.is-active) {
  color: rgba(245, 245, 245, 0.58) !important;
}

.gys-app-shell .gys-bottom-nav .gys-nav-item:active,
.gys-app-shell .gys-bottom-nav a.gys-nav-item:active {
  transform: scale(0.97) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(0.97) translate3d(0, 0, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gys-app-shell .gys-nav-glider,
  .gys-app-shell .gys-bottom-nav .gys-nav-item,
  .gys-app-shell .gys-bottom-nav a.gys-nav-item {
    transition: none !important;
  }
}

/* =========================================================
   Mobile / iPhone PWA Bottom Nav Final Source of Truth
   ========================================================= */

@media (max-width: 767px) {
  .gys-app-shell {
    min-height: 100dvh !important;
    padding-bottom: calc(104px + var(--gys-safe-bottom)) !important;
  }

  .gys-app-shell .gys-bottom-nav,
  .gys-app-shell .gys-bottom-nav-icons {
    position: fixed !important;

    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 520px !important;

    height: calc(74px + var(--gys-safe-bottom)) !important;
    min-height: calc(74px + var(--gys-safe-bottom)) !important;

    padding:
      7px
      calc(7px + var(--gys-safe-right))
      calc(7px + var(--gys-safe-bottom))
      calc(7px + var(--gys-safe-left)) !important;

    margin: 0 !important;

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

    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;

    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;

    background: rgba(18, 18, 18, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    box-shadow:
      0 -12px 40px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 999 !important;
    contain: layout paint style !important;
    will-change: transform !important;
  }

  .gys-app-shell .gys-bottom-nav::before,
  .gys-app-shell .gys-bottom-nav-icons::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(173, 255, 0, 0.07), transparent 44%),
      rgba(18, 18, 18, 0.96) !important;
  }

  .gys-app-shell .gys-bottom-nav .gys-nav-glider {
    top: 7px !important;
    left: calc(7px + var(--gys-safe-left)) !important;

    width: calc(
      (100% - 14px - var(--gys-safe-left) - var(--gys-safe-right))
      / var(--gys-nav-count, 5)
    ) !important;

    height: 60px !important;
    border-radius: 20px !important;
  }

  .gys-app-shell .gys-bottom-nav .gys-nav-item,
  .gys-app-shell .gys-bottom-nav a.gys-nav-item,
  .gys-app-shell .gys-bottom-nav-icons .gys-nav-item,
  .gys-app-shell .gys-bottom-nav-icons a.gys-nav-item {
    height: 60px !important;
    min-height: 60px !important;
    padding: 7px 2px 6px !important;
    border-radius: 20px !important;
  }
}