/* BBOX 5.5.0 MOBILE ISOLATION — migrated from former shared base.css. */
/* mobile-bottom-nav shared presentation. */

:root {
  --bbox-mobile-nav-height:74px;
}

/* mobile-bottom-nav — mobile presentation. */
.mobile-bottom-nav .bbox-cart-count {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

.mobile-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--bbox-layer-nav);
  display: flex;
  align-items: center;
  min-height: var(--bbox-mobile-nav-height);
  padding: var(--bbox-space-2) var(--bbox-space-3) calc(var(--bbox-space-2) + env(safe-area-inset-bottom));
  background: var(--bbox-dark);
  color: var(--bbox-surface);
  border-top: 1px solid var(--bbox-gold-deep);
}

.mobile-bottom-nav>a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--bbox-space-1);
  font-size: var(--bbox-text-xs);
  min-width: 0;
}

.mobile-bottom-nav a>span {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 36px;
  border-radius: var(--bbox-radius-sm);
}

.mobile-bottom-nav a[aria-current]>span {
  background: var(--bbox-gold);
  color: var(--bbox-dark);
}

.bbox-nav-active-outline .mobile-bottom-nav a[aria-current]>span {
  background: transparent;
  outline: 1px solid var(--bbox-gold);
  color: var(--bbox-gold);
}


/* BBOX 5.3.0 — persistent UI must never cover footer or modal content. */
.mobile-bottom-nav{
  transition:transform var(--bbox-transition),opacity var(--bbox-transition),box-shadow var(--bbox-transition);
  box-shadow:0 -12px 36px rgb(7 9 12 / 18%);
}
body.bbox-footer-near .mobile-bottom-nav,
body.bbox-dialog-open .mobile-bottom-nav{
  transform:translateY(calc(100% + env(safe-area-inset-bottom) + 4px));
  opacity:0;
  pointer-events:none;
}
.mobile-bottom-nav>a{font-weight:700;letter-spacing:-.01em;}
.mobile-bottom-nav a>span{transition:background var(--bbox-transition),color var(--bbox-transition),transform var(--bbox-transition);}
.mobile-bottom-nav a[aria-current]>span{background:var(--bbox-gradient-gold);box-shadow:0 8px 18px rgb(201 154 46 / 22%);}
