/* =========================================================
   NBZ Bottom Navigation
   نوار پایین سراسری سایت — هماهنگ با رنگ پویا (--primary)
   ========================================================= */
.nbz-bottom-nav-ready{padding-bottom:118px;}
.nbz-bottom-nav-ready .back-top{bottom:114px;z-index:171;}

.nbz-bottom-nav{
  position:fixed;
  z-index:170;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(760px,calc(100vw - 28px));
  height:82px;
  padding:0 18px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  gap:4px;
  direction:rtl;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid var(--border);
  border-radius:32px;
  box-shadow:0 18px 50px rgba(20,40,28,.16),0 3px 12px rgba(20,40,28,.07);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  isolation:isolate;
}
html.dark .nbz-bottom-nav{
  box-shadow:0 20px 60px rgba(0,0,0,.45),0 2px 12px rgba(0,0,0,.25);
}
.nbz-bottom-item{
  position:relative;
  width:54px;
  height:54px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-soft);
  border-radius:18px;
  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    color .28s var(--ease),
    box-shadow .28s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.nbz-bottom-item svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s var(--ease);
}
.nbz-bottom-item:hover{
  color:var(--primary);
  transform:translateY(-2px);
}
.nbz-bottom-item:active{transform:scale(.94);}
.nbz-bottom-item.is-active:not(.nbz-index-item){
  color:#fff;
  background:var(--primary);
  box-shadow:0 10px 24px var(--primary-glow);
}
.nbz-bottom-item.is-active:not(.nbz-index-item) svg{transform:scale(1.04);}
.nbz-index-item{
  width:72px;
  height:72px;
  margin-top:-27px;
  border-radius:50%;
  color:var(--text-soft);
  background:var(--surface);
  border:7px solid var(--surface);
  box-shadow:0 8px 24px rgba(20,40,28,.12);
}
.nbz-index-item.is-active{
  color:#fff;
  background:var(--primary);
  border-color:var(--surface);
  box-shadow:0 12px 30px var(--primary-glow);
  transform:translateY(-1px);
}
.nbz-index-item.is-active svg{transform:scale(1.08);}
.nbz-index-item:hover{transform:translateY(-3px);}
.nbz-bottom-item:focus-visible{
  outline:2px solid var(--primary-2);
  outline-offset:4px;
}
.nbz-bottom-tooltip{
  position:absolute;
  right:50%;
  bottom:calc(100% + 11px);
  transform:translate(50%,6px);
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
  font-size:.72rem;
  font-weight:700;
  color:#fff;
  background:var(--text);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.nbz-bottom-item:hover .nbz-bottom-tooltip,
.nbz-bottom-item:focus-visible .nbz-bottom-tooltip{
  opacity:1;
  transform:translate(50%,0);
}
.nbz-bottom-item::after{
  content:"";
  position:absolute;
  bottom:-7px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--primary);
  opacity:0;
  transform:scale(.5);
  transition:opacity .25s ease,transform .25s ease;
}
.nbz-bottom-item.is-active::after{opacity:0;}
@media (max-width:640px){
  .nbz-bottom-nav-ready{padding-bottom:98px;}
  .nbz-bottom-nav-ready .back-top{bottom:94px;z-index:171;}

  .nbz-bottom-nav{
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 18px);
    height:72px;
    padding:0 8px;
    border-radius:26px;
  }
  .nbz-bottom-item{
    width:48px;
    height:48px;
    border-radius:16px;
  }
  .nbz-bottom-item svg{width:23px;height:23px;}
  .nbz-index-item{
    width:64px;
    height:64px;
    margin-top:-22px;
    border-width:6px;
  }
  .nbz-bottom-tooltip{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .nbz-bottom-item{transition:none;}
  .nbz-bottom-item svg{transition:none;}
}