/* ═══════════════════════════════════════════════════════════════
   HariyaliBasket — Bottom Nav "Uchhalta Bubble" (v4.22.3)
   Safed bar neeche chipki. Jis tab par tap karo uska icon hare gol
   bubble me upar uchhal jaata hai; pehle wala wapas apni jagah.
   Sirf .hb-bn-d par lagta hai (template-parts/bottom-nav.php).
   layout.css / responsive.css / ui-refresh ko yahan override kiya hai.
   ═══════════════════════════════════════════════════════════════ */

.hb-bottom-nav.hb-bn-d{
  --bn-ink:    var(--green-deep, #0d3320);
  --bn-btn:    var(--green-mid, #25834f);
  --bn-muted:  #7a9a86;
  --bn-page:   var(--off-white, #f8fdf9);   /* bubble ka ghera = page ka rang (cut-out feel) */
  --bn-ease:   cubic-bezier(.3, 1.5, .5, 1);
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important;
  max-width: 480px;
  margin: 0 auto;
  transform: none !important;
  z-index: 800;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -6px 20px rgba(13,51,32,.10) !important;
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── Har tab ── */
.hb-bn-d .hb-bn-item{
  flex: 1 1 0;
  min-width: 0;
  height: 68px;
  padding: 0 2px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bn-muted) !important;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  box-shadow: none !important;
}
.hb-bn-d .hb-bn-item::before{ content: none !important; display: none !important; } /* ui-refresh ka glow box band */
.hb-bn-d .hb-bn-item:active{ background: transparent !important; }

/* Icon ka gola — normal me transparent, active me hara bubble */
.hb-bn-d .hb-bn-icon{
  position: relative;
  width: 46px; height: 46px;
  box-sizing: content-box;
  border: 5px solid transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0 !important; line-height: 1;
  background: transparent;
  margin: 0 0 -9px;            /* ghera transparent hai — label icon ke paas rahe */
  transform: translateY(0);
  transition: transform .4s var(--bn-ease), background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.hb-bn-d .hb-bn-icon svg{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: block;
  transition: stroke-width .2s ease;
}
.hb-bn-d .hb-bn-label{
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  color: var(--bn-muted);
  transform: translateY(0);
  transition: transform .4s var(--bn-ease), color .2s ease;
}

/* ── Active: icon bubble me upar uchhalta hai ── */
.hb-bn-d .hb-bn-item.active .hb-bn-icon{
  background: var(--bn-btn);
  border-color: var(--bn-page);
  color: #ffffff;
  transform: translateY(-26px);
  box-shadow: 0 8px 16px rgba(37,131,79,.35);
}
.hb-bn-d .hb-bn-item.active .hb-bn-icon svg{ stroke-width: 2.4; }
.hb-bn-d .hb-bn-item.active .hb-bn-label{
  color: var(--bn-ink) !important;
  font-weight: 900 !important;
  transform: translateY(-14px);
}

/* ── Cart: amber count badge, saaman ho to label me ₹total ── */
.hb-bn-d .hb-bn-badge{
  position: absolute;
  top: 3px !important; right: 1px !important; left: auto !important;
  min-width: 20px !important; height: 20px !important;
  padding: 0 5px !important;
  box-sizing: border-box;
  border-radius: 999px !important;
  background: var(--amber, #f59e0b) !important;
  color: var(--bn-ink) !important;
  border: 2px solid #ffffff;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 10.5px !important; font-weight: 800 !important; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: none;
  align-items: center; justify-content: center;
}
.hb-bn-d .hb-bn-badge.show{ display: flex !important; }
.hb-bn-d .hb-bn-item.active .hb-bn-badge{ top: -4px !important; right: -6px !important; }
.hb-bn-d .hb-bn-cart.has-items .hb-bn-label{ color: var(--bn-btn); font-family: 'Sora', system-ui, sans-serif; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.hb-bn-d .hb-bn-cart.has-items.active .hb-bn-label{ color: var(--bn-ink) !important; }

/* Account ka "logged in" hara dot */
.hb-bn-d .hb-bn-login-dot{
  top: 8px !important; right: 7px !important;
  width: 10px !important; height: 10px !important;
  min-width: 0 !important; padding: 0 !important;
  border-radius: 50% !important;
  background: var(--green-glow, #4dda85) !important;
  border: 2px solid #ffffff;
}
.hb-bn-d .hb-bn-item.active .hb-bn-login-dot{ top: 0 !important; right: 0 !important; border-color: var(--bn-btn); }

/* Item add hone par cart icon uchhalta hai */
.hb-bn-d .hb-bn-cart.hb-bn-pop svg{ animation: hbBnPop .45s var(--bn-ease); }
@keyframes hbBnPop{
  0%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-6px) scale(1.15) rotate(-8deg); }
  70%{ transform: translateY(1px) scale(.95) rotate(4deg); }
  100%{ transform: none; }
}

.hb-bn-d .hb-bn-item:focus-visible{ outline: none; }
.hb-bn-d .hb-bn-item:focus-visible .hb-bn-icon{ outline: 3px solid var(--green-light, #38b26a); outline-offset: 2px; }

/* Page ke neeche jagah + cart bar bubble ke upar */
body:has(.hb-bn-d){ padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
body:has(.hb-bn-d) #hb-cart-bar{ bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
/* band cart bar poori tarah screen ke neeche (warna nav ke peeche jhaankti hai) */
body:has(.hb-bn-d) #hb-cart-bar:not(.show){ transform: translateY(calc(100% + 150px)) !important; }
@media (min-width: 600px){
  body:has(.hb-bn-d) #hb-cart-bar:not(.show){ transform: translateX(-50%) translateY(calc(100% + 150px)) !important; }
}

@media (prefers-reduced-motion: reduce){
  .hb-bn-d .hb-bn-icon, .hb-bn-d .hb-bn-label{ transition: none; }
  .hb-bn-d .hb-bn-cart.hb-bn-pop svg{ animation: none; }
}
/* Chhoti screen (320–359px) */
@media (max-width: 359px){
  .hb-bn-d .hb-bn-icon{ width: 42px; height: 42px; border-width: 4px; }
  .hb-bn-d .hb-bn-label{ font-size: 9.5px !important; }
}