/*
 * ══════════════════════════════════════════════════════════════════════
 *  ZADWA NETWORK — Bottom Navigation Bar v9
 *  Glassmorphism · Full Color Customization System
 *  Zadwa Blue (#00B8D9) Default Active · 4 Animation Modes
 *  BuddyBoss + WooCommerce + ZNP Pulse — Co-synchronized
 * ══════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKEN SYSTEM
   Every visual aspect is a CSS custom property — overridden by JS
   from admin settings. Zero hardcoded colours in component rules.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Zadwa Brand Blue (matches logo + notification badges) ── */
  --znbnav-accent:        #00B8D9;
  --znbnav-accent-r:      0;
  --znbnav-accent-g:      184;
  --znbnav-accent-b:      217;
  --znbnav-accent-rgb:    rgba(0, 184, 217, 1);
  --znbnav-accent-glow:   rgba(0, 184, 217, 0.42);
  --znbnav-accent-pill:   rgba(0, 184, 217, 0.18);

  /* ── Bar background ── */
  --znbnav-bg-hex:        #3e3e3e;
  --znbnav-bg-opacity:    0.88;
  --znbnav-bg:            rgba(62, 62, 62, 0.88);
  --znbnav-blur:          30px;
  --znbnav-saturate:      160%;
  --znbnav-brightness:    0.92;

  /* ── Border & shadow ── */
  --znbnav-border-clr:    rgba(255, 255, 255, 0.14);
  --znbnav-shadow-clr:    rgba(0, 0, 0, 0.45);

  /* ── Text ── */
  --znbnav-text:          rgba(255, 255, 255, 0.65);
  --znbnav-text-active:   #FFFFFF;
  --znbnav-text-hover:    rgba(255, 255, 255, 0.90);

  /* ── Active indicator line ── */
  --znbnav-line-color:    var(--znbnav-accent);
  --znbnav-line-width:    26px;
  --znbnav-line-height:   2.5px;

  /* ── Active pill ── */
  --znbnav-pill-color:    var(--znbnav-accent-pill);
  --znbnav-pill-w:        50px;
  --znbnav-pill-h:        34px;
  --znbnav-pill-radius:   10px;

  /* ── Badge ── */
  --znbnav-badge-bg:      #00B8D9;
  --znbnav-badge-text:    #FFFFFF;

  /* ── Geometry ── */
  --znbnav-height:        68px;
  --znbnav-z:             99998;
  --znbnav-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;

  /* ── Animation curves ── */
  --znbnav-ease:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --znbnav-ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
  --znbnav-ease-snap:     cubic-bezier(0.22, 1.0, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════════════
   SYNCHRONIZED REVEAL — v9 BuddyBoss Native Paint Sync
   ───────────────────────────────────────────────────────────────────
   Both elements are now pre-rendered server-side (PHP at wp_body_open)
   so they exist in the HTML response alongside the BuddyBoss header.

   CSS @keyframes animations start the moment the element is painted
   by the browser — the same paint frame as the BuddyBoss header.
   No JavaScript gate, no polling, no settle delay.

   `animation-fill-mode: both` keeps the element invisible BEFORE the
   animation starts (from-state), and visible AFTER it ends (to-state).

   html.zn-ui-ready is still added by JS (for downstream JS consumers)
   but is no longer the visual gating mechanism.
═══════════════════════════════════════════════════════════════════ */

/* ─── Entrance keyframes ─── */
@keyframes zn-bnav-enter {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes znp-root-enter {
  from { opacity: 0; transform: translateY(22px) scale(0.86); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* — Bottom Nav: slides up from off-screen — */
#zn-bottomnav {
  opacity: 0;
  transform: translateY(100%);
  /* keyframe starts immediately — same paint frame as BuddyBoss header */
  animation: zn-bnav-enter 0.50s var(--znbnav-ease-out) both;
}

/* — ZNP Pulse orb: rises + scales in 80ms after nav — */
#znp-root {
  opacity: 0;
  transform: translateY(22px) scale(0.86);
  /* 80ms delay so nav settles slightly before Zara appears */
  animation: znp-root-enter 0.50s var(--znbnav-ease-out) 0.08s both;
}

/* Honour reduced-motion: skip animation, show immediately */
@media (prefers-reduced-motion: reduce) {
  #zn-bottomnav { animation: none; opacity: 1; transform: translateY(0); }
  #znp-root     { animation: none; opacity: 1; transform: none; }
}

/* zn-ui-ready class added by JS — kept for downstream JS consumers.
   No longer needed for CSS visibility (animation handles it). */
html.zn-ui-ready #zn-bottomnav,
html.zn-ui-ready #znp-root { /* visual state already handled by animation */ }

/* ═══════════════════════════════════════════════════════════════════
   BASE BAR — Glassmorphism Dark Glass
═══════════════════════════════════════════════════════════════════ */
#zn-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--znbnav-height);
  z-index: var(--znbnav-z);
  font-family: var(--znbnav-font);
  display: flex;
  align-items: stretch;
  /* Glassmorphism */
  background: var(--znbnav-bg);
  backdrop-filter: blur(var(--znbnav-blur)) saturate(var(--znbnav-saturate)) brightness(var(--znbnav-brightness));
  -webkit-backdrop-filter: blur(var(--znbnav-blur)) saturate(var(--znbnav-saturate)) brightness(var(--znbnav-brightness));
  border-top: 1px solid var(--znbnav-border-clr);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.10),
    0 -10px 36px var(--znbnav-shadow-clr),
    0 -2px 8px rgba(0,0,0,0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  overflow: visible;
}

/* Glass sheen — top highlight strip */
#zn-bottomnav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 15%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.18) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Backdrop fallback */
@supports not (backdrop-filter: blur(1px)) {
  #zn-bottomnav { background: rgba(56,56,56,0.97) !important; }
}

/* Scroll hide */
#zn-bottomnav.zn-bnav-hidden {
  transform: translateY(110%) !important;
  opacity: 0 !important;
  transition: transform 0.34s ease, opacity 0.26s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAV ITEMS
═══════════════════════════════════════════════════════════════════ */
.zn-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 2px 8px;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--znbnav-text);
  position: relative;
  border: none;
  background: none;
  outline: none;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.20s ease;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
}
.zn-bnav-item:hover { color: var(--znbnav-text-hover); text-decoration: none !important; }
.zn-bnav-item.zn-bnav-active { color: var(--znbnav-text-active); }

/* ── Active top line indicator ── */
.zn-bnav-item::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: var(--znbnav-line-width);
  height: var(--znbnav-line-height);
  border-radius: 0 0 4px 4px;
  background: var(--znbnav-line-color);
  box-shadow: 0 0 10px var(--znbnav-accent-glow), 0 0 4px var(--znbnav-accent-glow);
  transition: transform 0.32s var(--znbnav-ease), opacity 0.22s ease;
  opacity: 0;
}
.zn-bnav-item.zn-bnav-active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* ── Active background pill ── */
.zn-bnav-item::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: var(--znbnav-pill-w);
  height: var(--znbnav-pill-h);
  border-radius: var(--znbnav-pill-radius);
  background: var(--znbnav-pill-color);
  transition: transform 0.30s var(--znbnav-ease), opacity 0.22s ease;
  opacity: 0;
  z-index: 0;
}
.zn-bnav-item.zn-bnav-active::before {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* ── Icon ── */
.zn-bnav-icon {
  position: relative;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: transform 0.28s var(--znbnav-ease), filter 0.22s ease;
}
.zn-bnav-item.zn-bnav-active .zn-bnav-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px var(--znbnav-accent-glow));
}
.zn-bnav-item:active .zn-bnav-icon { transform: scale(0.86) !important; }
.zn-bnav-icon svg {
  width: 26px; height: 26px;
  stroke-width: 2.0;
  transition: stroke 0.20s ease;
}

/* ── Label ── */
.zn-bnav-label {
  font-size: 10.5px; font-weight: 700; line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.zn-bnav-item.zn-bnav-active .zn-bnav-label { font-weight: 800; color: var(--znbnav-text-active); }

/* ── Badge ── */
.zn-bnav-badge {
  position: absolute;
  top: 4px; right: calc(50% - 24px);
  min-width: 17px; height: 17px; border-radius: 10px;
  background: var(--znbnav-badge-bg); color: var(--znbnav-badge-text);
  font-size: 9px; font-weight: 800; line-height: 17px;
  padding: 0 4px; text-align: center;
  border: 2px solid rgba(56,56,56,0.90);
  z-index: 3; opacity: 0; transform: scale(0);
  transition: opacity 0.20s, transform 0.30s var(--znbnav-ease);
  pointer-events: none;
}
.zn-bnav-badge.zn-badge-on { opacity: 1; transform: scale(1); }

/* ── Ripple (animation mode: ripple) ── */
.zn-bnav-ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--znbnav-accent-pill);
  width: 10px; height: 10px;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.8;
  animation: znbnav-ripple-out 0.55s var(--znbnav-ease-snap) forwards;
  z-index: 0;
}
@keyframes znbnav-ripple-out {
  to { transform: scale(8); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATION MODES  (set via data-znbnav-anim attribute on bar)
═══════════════════════════════════════════════════════════════════ */

/* ── MODE: glow ── pulsing halo on active icon ── */
#zn-bottomnav[data-znbnav-anim="glow"] .zn-bnav-item.zn-bnav-active .zn-bnav-icon {
  animation: znbnav-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes znbnav-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--znbnav-accent-glow)); }
  50%       { filter: drop-shadow(0 0 10px var(--znbnav-accent-glow)) drop-shadow(0 0 18px var(--znbnav-accent-glow)); }
}

/* ── MODE: bounce ── spring icon pop on activate ── */
#zn-bottomnav[data-znbnav-anim="bounce"] .zn-bnav-item.zn-bnav-active .zn-bnav-icon {
  animation: znbnav-bounce-in 0.50s var(--znbnav-ease) forwards;
}
@keyframes znbnav-bounce-in {
  0%   { transform: translateY(-2px) scale(1.0); }
  40%  { transform: translateY(-6px) scale(1.18); }
  65%  { transform: translateY(-1px) scale(0.96); }
  80%  { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(-2px) scale(1.0); }
}

/* ── MODE: slide ── indicator line morphs width then slides ── */
#zn-bottomnav[data-znbnav-anim="slide"] .zn-bnav-item.zn-bnav-active::after {
  animation: znbnav-line-slide 0.38s var(--znbnav-ease-snap) forwards;
}
@keyframes znbnav-line-slide {
  0%   { transform: translateX(-50%) scaleX(0.4); opacity: 0.5; }
  50%  { transform: translateX(-50%) scaleX(1.3); opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1.0); opacity: 1; }
}

/* ── MODE: breathe ── active pill subtly breathes ── */
#zn-bottomnav[data-znbnav-anim="breathe"] .zn-bnav-item.zn-bnav-active::before {
  animation: znbnav-breathe 3s ease-in-out infinite;
}
@keyframes znbnav-breathe {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1.0); }
  50%       { opacity: 0.65; transform: translateX(-50%) scaleX(0.88); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUDDYBOSS — body push + hide native mobile tab bar
═══════════════════════════════════════════════════════════════════ */
body.zn-has-bottomnav {
  padding-bottom: calc(var(--znbnav-height) + env(safe-area-inset-bottom, 0px)) !important;
}
body.zn-has-bottomnav .bb-mobile-nav,
body.zn-has-bottomnav .buddypress-wrap .bb-mobile-tabs,
body.zn-has-bottomnav .bb-tab-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ZNP PULSE — position above nav
═══════════════════════════════════════════════════════════════════ */
html.zn-ui-ready body.zn-has-bottomnav #znp-root {
  bottom: calc(var(--znbnav-height) + 16px + env(safe-area-inset-bottom, 0px)) !important;
}
html.zn-ui-ready body.zn-has-bottomnav #znp-toast {
  bottom: calc(var(--znbnav-height) + 22px + env(safe-area-inset-bottom, 0px)) !important;
}
html.zn-ui-ready body.zn-has-bottomnav #znp-panel {
  bottom: calc(var(--znbnav-height) + 14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #zn-bottomnav.zn-bnav-mobile-only { display: none !important; }
}

body.zn-has-bottomnav .woocommerce-store-notice,
body.zn-has-bottomnav .yith-wcqv-modal,
body.zn-has-bottomnav #yith-wapo-floating-cart-button {
  bottom: calc(var(--znbnav-height) + 8px + env(safe-area-inset-bottom, 0px)) !important;
}

#zn-bottomnav[data-znbnav-icon-only="1"] .zn-bnav-label { display: none !important; }
#zn-bottomnav[data-znbnav-icon-only="1"] .zn-bnav-item  { padding-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   ENTRANCE STAGGER — items float up one by one
═══════════════════════════════════════════════════════════════════ */
.zn-bnav-item { opacity: 0; transform: translateY(14px); }

html.zn-ui-ready .zn-bnav-item {
  animation: znbnav-item-in 0.46s var(--znbnav-ease-out) both;
}
html.zn-ui-ready .zn-bnav-item:nth-child(1) { animation-delay: 0.06s; }
html.zn-ui-ready .zn-bnav-item:nth-child(2) { animation-delay: 0.12s; }
html.zn-ui-ready .zn-bnav-item:nth-child(3) { animation-delay: 0.18s; }
html.zn-ui-ready .zn-bnav-item:nth-child(4) { animation-delay: 0.24s; }
html.zn-ui-ready .zn-bnav-item:nth-child(5) { animation-delay: 0.30s; }
html.zn-ui-ready .zn-bnav-item:nth-child(6) { animation-delay: 0.36s; }

@keyframes znbnav-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════════════════════════ */
.zn-bnav-item:focus-visible {
  outline: 2px solid var(--znbnav-accent);
  outline-offset: -2px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #zn-bottomnav,
  html.zn-ui-ready #zn-bottomnav,
  html.zn-ui-ready .zn-bnav-item,
  #znp-root,
  html.zn-ui-ready #znp-root {
    animation: none !important;
    transition-duration: 0.01ms !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}