/* KICKS Connected Nav — dome-style active indicator
   Reference: connected/pill nav with a soft dome on the active item
   + small orange indicator dot above. Sneaker-brand colors only:
   cream #FFF1D6, navy #14213D, orange #FF6B1A. No yellow. */

.bottomnav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  /* pin to viewport — relative put the bar at the bottom of the page flow
     (users had to scroll past all content to reach it) */
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 460px !important;
  z-index: 40 !important;
}

.bottomnav-inner,
.bottomnav .bottomnav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  height: 64px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(20, 33, 61, .10) !important;
  padding: 6px 8px !important;
  /* keep overflow:hidden so the React app's item backgrounds are clipped */
  overflow: hidden !important;
  position: relative;
}

.bottomnav-inner:before { display: none !important; }
.nav-pill,
.nav-under { display: none !important; }

/* Reset the dark .nav-item backgrounds that the React bundle paints
   via .nav-item:nth-child(N) { background:#1a1a1a !important }.
   Use equal-or-higher specificity so we win. */
.bottomnav .nav-item,
.bottomnav .nav-item:nth-child(1),
.bottomnav .nav-item:nth-child(2),
.bottomnav .nav-item:nth-child(3),
.bottomnav .nav-item:nth-child(4),
.bottomnav .nav-item:nth-child(5),
.bottomnav .nav-item:has(.active) {
  flex: 1 1 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  order: 0 !important;
  border-radius: 0 !important;
  position: relative;
  /* items can extend above the pill so the active lift can rise */
  overflow: visible !important;
}

.bottomnav .nav-content,
.bottomnav .nav-content.active,
.bottomnav .nav-item:has(.active) .nav-content {
  width: 100% !important;
  height: 52px !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border-radius: 18px !important;
  color: #14213D !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.bottomnav .nav-label {
  display: none !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #FF6B1A !important;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.bottomnav .nav-icwrap,
.bottomnav .nav-content.active .nav-icwrap,
.bottomnav .nav-item:has(.active) .nav-icwrap {
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  display: grid !important;
  place-items: center !important;
  color: inherit !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bottomnav .nav-icwrap svg {
  color: #14213D !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  width: 24px;
  height: 24px;
}

/* ============================================================
   ACTIVE STATE — cream "lift" with an orange indicator dot.
   The lift is a rounded cream tile that extends slightly above
   the pill. The indicator dot sits on the bottomnav (parent of
   the inner pill) so it can escape the inner's overflow:hidden.
   ============================================================ */

.bottomnav .nav-content.active,
.bottomnav .nav-item:has(.active) .nav-content {
  background: #FFF1D6 !important;
  color: #FF6B1A !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(255, 107, 26, .18) !important;
  border-radius: 18px !important;
}
.bottomnav .nav-content.active .nav-label,
.bottomnav .nav-item:has(.active) .nav-label {
  display: block !important;
}
.bottomnav .nav-content.active .nav-icwrap svg,
.bottomnav .nav-item:has(.active) .nav-icwrap svg {
  color: #FF6B1A !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Indicator dot: small orange circle floating just above the pill,
   aligned with the center of the active item. We position it on
   the nav-item (sibling of bottomnav-inner) so it can escape the
   inner pill's overflow:hidden. The nav-item is the child of
   bottomnav, so its overflow:visible lets the dot render above. */
.bottomnav .nav-item:has(.active)::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #FF6B1A;
  border-radius: 50%;
  z-index: 10;
}

.bottomnav .kx-nav-mark {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* beat per-page nav overrides */
body[class*="kx-on-"] .bottomnav {
  background: transparent !important;
  border: 0 !important;
}
body[class*="kx-on-"] .bottomnav-inner,
body[class*="kx-on-"] .bottomnav .bottomnav-inner {
  background: #fff !important;
}
body[class*="kx-on-"] .nav-pill { display: none !important; }
body[class*="kx-on-"] .nav-content,
body[class*="kx-on-"] .nav-label { color: #14213D !important; }
body[class*="kx-on-"] .nav-content.active,
body[class*="kx-on-"] .nav-item:has(.active) .nav-content,
body[class*="kx-on-"] .nav-content.active .nav-label {
  color: #FF6B1A !important;
}