/* ============================================================
   VibeKrave — Customer app shell (Phase 2 rev)
   SINGLE SOURCE OF TRUTH for the bottom navigation, safe-area
   behaviour and nav clearance. Loaded after all legacy CSS on
   every customer page. The !important flags exist only to beat
   legacy 902/907/915 nav rules and are removed when those files
   retire at the end of Phase 2.
   ============================================================ */

/* ---- Content clearance above the floating nav ---- */
body.vk-app-body,
body.vk-has-bottom-nav,
body:has(.vk-app-bottom-nav) {
  padding-bottom: calc(var(--vk-nav-height) + 28px + var(--vk-safe-bottom)) !important;
}

/* ---- Canonical bottom navigation: floating branded pill ---- */
.vk-app-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(10px + var(--vk-safe-bottom)) !important;
  width: calc(100% - 24px) !important;
  max-width: calc(var(--vk-app-max-width) - 24px) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--vk-surface) 94%, transparent) !important;
  border: 1px solid var(--vk-border) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  z-index: var(--vk-z-nav) !important;
  min-height: 0 !important;
}

.vk-app-bottom-nav a,
.vk-app-bottom-nav button {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--vk-text) !important;
  text-decoration: none !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 6px 0 !important;
  font-family: var(--vk-font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform var(--vk-fast) var(--vk-ease);
}

.vk-app-bottom-nav a i,
.vk-app-bottom-nav button i {
  font-style: normal !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

/* Vibe — the branded primary action */
.vk-app-bottom-nav .is-primary {
  background: linear-gradient(135deg, var(--vk-green), var(--vk-cyan), var(--vk-purple), var(--vk-gold)) !important;
  color: var(--vk-ink) !important;
}
.vk-app-bottom-nav .is-primary i,
.vk-app-bottom-nav .is-primary span {
  color: var(--vk-ink) !important;
}

/* Current page */
.vk-app-bottom-nav a.is-active {
  background: linear-gradient(135deg, var(--vk-green), var(--vk-purple)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px var(--vk-purple-soft), 0 4px 14px var(--vk-green-soft) !important;
  transform: translateY(-1px);
}
.vk-app-bottom-nav a.is-active i,
.vk-app-bottom-nav a.is-active span {
  color: #fff !important;
}
.vk-app-bottom-nav a.is-active::before {
  display: none !important; /* neutralise 907's border-mask overlay */
}

/* Vibe stays branded even when active */
.vk-app-bottom-nav .is-primary.is-active {
  background: linear-gradient(135deg, var(--vk-green), var(--vk-cyan), var(--vk-purple), var(--vk-gold)) !important;
  color: var(--vk-ink) !important;
}
.vk-app-bottom-nav .is-primary.is-active i,
.vk-app-bottom-nav .is-primary.is-active span {
  color: var(--vk-ink) !important;
}

/* Nav hides while the cart modal is open (parity with 902 behaviour,
   now applied on every page, not just the ones loading 902) */
.vk-cart-modal.is-open ~ .vk-app-bottom-nav {
  display: none !important;
}

/* ---- Sticky cart bars clear the floating nav ---- */
.vk-sticky-cart,
.vk-sticky-cart-bar,
[class*="sticky-cart"] {
  bottom: calc(var(--vk-nav-height) + 22px + var(--vk-safe-bottom)) !important;
  z-index: var(--vk-z-sticky) !important;
}

/* ---- Standalone PWA mode (activates in Phase 3) ---- */
@media (display-mode: standalone) {
  body {
    padding-top: var(--vk-safe-top);
  }
}