/* Floating Bottom Nav v1.3 */

/* Reset to prevent theme styles bleeding in and causing the "white box" issue
   behind rounded corners. The bar paints its own background; everything inside
   is transparent so the rounded corners actually look rounded. */
#fbn-bar,#fbn-bar *{box-sizing:border-box}
#fbn-bar{
  position:fixed;left:0;right:0;bottom:0;
  margin:0;padding:0;
  z-index:var(--fbn-z,2147483000);
  color:var(--fbn-text);font-family:inherit;
  background:var(--fbn-bg);
  background-clip:padding-box;
  border:var(--fbn-border);
  box-shadow:var(--fbn-shadow);
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
  overflow:hidden; /* clip the bg to the rounded shape — kills the white corner */
  padding-bottom:max(env(safe-area-inset-bottom), 0px);
  will-change:transform,opacity;
}
#fbn-bar ul,#fbn-bar li,#fbn-bar a,#fbn-bar span,#fbn-bar svg{background:transparent;border:0}
#fbn-bar ul{list-style:none;margin:0;padding:var(--fbn-bar-py) var(--fbn-bar-px);display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:var(--fbn-gap)}
#fbn-bar li{flex:1;text-align:center;min-width:0}
#fbn-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-decoration:none;color:var(--fbn-icon);
  padding:var(--fbn-item-py) var(--fbn-item-px);
  border-radius:var(--fbn-item-radius);
  transition:color var(--fbn-dur) var(--fbn-ease),background-color var(--fbn-dur) var(--fbn-ease),transform var(--fbn-dur) var(--fbn-ease),box-shadow var(--fbn-dur) var(--fbn-ease);
  position:relative;outline:none;
}
#fbn-bar a:focus-visible{box-shadow:0 0 0 2px var(--fbn-active)}
#fbn-bar .fbn-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--fbn-dur) var(--fbn-ease)}
#fbn-bar svg{width:var(--fbn-icon-size);height:var(--fbn-icon-size);display:block;color:inherit;stroke:currentColor}
#fbn-bar .fbn-label{font-size:var(--fbn-font-size);font-weight:var(--fbn-label-weight);color:var(--fbn-text);line-height:1;white-space:nowrap;transition:color var(--fbn-dur) var(--fbn-ease),opacity var(--fbn-dur) var(--fbn-ease),max-height var(--fbn-dur) var(--fbn-ease)}

/* Cart badge */
#fbn-bar .fbn-cart-count{
  position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--fbn-badge-bg);color:var(--fbn-badge-color);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
#fbn-bar .fbn-cart-count[hidden]{display:none}

/* ============ HOVER EFFECTS ============ */
#fbn-bar a:hover,#fbn-bar a:focus{color:var(--fbn-hover);background:var(--fbn-hover-bg)}
#fbn-bar a:hover .fbn-label{color:var(--fbn-hover)}
#fbn-bar.fbn-hover-scale a:hover{transform:scale(1.08)}
#fbn-bar.fbn-hover-lift  a:hover{transform:translateY(-4px)}
#fbn-bar.fbn-hover-glow  a:hover{box-shadow:0 0 18px 0 var(--fbn-hover)}
#fbn-bar.fbn-hover-rotate a:hover .fbn-icon-wrap{transform:rotate(-12deg) scale(1.05)}
#fbn-bar.fbn-hover-bounce a:hover .fbn-icon-wrap{animation:fbn-bounce .6s var(--fbn-ease)}
#fbn-bar.fbn-hover-slide-up a:hover .fbn-icon-wrap{transform:translateY(-3px)}
#fbn-bar.fbn-hover-color-shift a:hover{background:transparent}
#fbn-bar a:active{transform:scale(.94)}

/* Labels reveal on hover only */
#fbn-bar.fbn-labels-hover .fbn-label{opacity:0;max-height:0;overflow:hidden}
#fbn-bar.fbn-labels-hover a:hover .fbn-label,
#fbn-bar.fbn-labels-hover a.fbn-active .fbn-label{opacity:1;max-height:20px}

/* ============ ACTIVE STATES ============ */
#fbn-bar a.fbn-active,#fbn-bar a[aria-current="page"]{color:var(--fbn-active)}
#fbn-bar a.fbn-active .fbn-label{color:var(--fbn-active);font-weight:600}

/* Active background only for "pill" indicator */
#fbn-bar.fbn-ind-pill a.fbn-active{background:var(--fbn-active-bg)}

/* Indicator: bar (top on mobile, left on desktop) */
#fbn-bar.fbn-ind-bar a.fbn-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--fbn-active);
}
/* Indicator: dot under icon */
#fbn-bar.fbn-ind-dot a.fbn-active::after{
  content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--fbn-active);
}
/* Indicator: underline */
#fbn-bar.fbn-ind-underline a.fbn-active::after{
  content:"";position:absolute;bottom:2px;left:20%;right:20%;
  height:2px;border-radius:2px;background:var(--fbn-active);
}

/* Active effects */
#fbn-bar.fbn-active-fx-pulse    a.fbn-active .fbn-icon-wrap{animation:fbn-pulse 1.6s ease-in-out infinite}
#fbn-bar.fbn-active-fx-bounce   a.fbn-active .fbn-icon-wrap{animation:fbn-bounce 1.2s ease-in-out infinite}
#fbn-bar.fbn-active-fx-ring     a.fbn-active .fbn-icon-wrap::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--fbn-active);animation:fbn-ring 1.4s ease-out infinite;
}
#fbn-bar.fbn-active-fx-dot-grow a.fbn-active .fbn-icon-wrap{transform:scale(1.15)}
#fbn-bar.fbn-active-fx-glow     a.fbn-active{box-shadow:0 0 22px -4px var(--fbn-active)}

/* Badge animations */
#fbn-bar.fbn-badge-pop    .fbn-cart-count{animation:fbn-pop .35s var(--fbn-ease)}
#fbn-bar.fbn-badge-pulse  .fbn-cart-count{animation:fbn-pulse 1.6s ease-in-out infinite}
#fbn-bar.fbn-badge-bounce .fbn-cart-count{animation:fbn-bounce 1.6s ease-in-out infinite}

/* Entrance animations */
#fbn-bar.fbn-enter-slide-up    {animation:fbn-in-up .5s var(--fbn-ease) both}
#fbn-bar.fbn-enter-fade        {animation:fbn-in-fade .5s var(--fbn-ease) both}
#fbn-bar.fbn-enter-zoom        {animation:fbn-in-zoom .5s var(--fbn-ease) both}
#fbn-bar.fbn-enter-slide-right {animation:fbn-in-right .5s var(--fbn-ease) both}

/* Floating variant (mobile) */
#fbn-bar.fbn-pos-floating{
  left:var(--fbn-side);right:var(--fbn-side);
  bottom:calc(var(--fbn-bottom) + env(safe-area-inset-bottom));
  padding-bottom:0;
  border-radius:var(--fbn-radius);
}
#fbn-bar.fbn-pos-bottom{border-radius:var(--fbn-radius) var(--fbn-radius) 0 0}

/* Reserve space at bottom of page on mobile so content isn't covered */
body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* ============ DESKTOP ============ */
@media (min-width:782px){
  body{padding-bottom:0}
  /* default: same as mobile unless desktop-position class overrides */
  #fbn-bar.fbn-dpos-right,#fbn-bar.fbn-dpos-left{
    top:50%;bottom:auto;transform:translateY(-50%);
    left:auto;right:auto;width:auto;
    padding-bottom:0;border-radius:var(--fbn-radius);
  }
  #fbn-bar.fbn-dpos-right{right:var(--fbn-side)}
  #fbn-bar.fbn-dpos-left {left:var(--fbn-side)}
  #fbn-bar.fbn-dpos-right.fbn-pos-bottom{border-radius:var(--fbn-radius) 0 0 var(--fbn-radius);right:0}
  #fbn-bar.fbn-dpos-left.fbn-pos-bottom {border-radius:0 var(--fbn-radius) var(--fbn-radius) 0;left:0}
  #fbn-bar.fbn-dpos-right ul,#fbn-bar.fbn-dpos-left ul{flex-direction:column;padding:10px 6px;gap:var(--fbn-gap)}
  #fbn-bar.fbn-dpos-right li,#fbn-bar.fbn-dpos-left li{flex:0 0 auto;width:100%}
  #fbn-bar.fbn-dpos-right a,#fbn-bar.fbn-dpos-left a{padding:10px 14px}
  /* Move bar-style active indicator to the side on vertical bars */
  #fbn-bar.fbn-dpos-right.fbn-ind-bar a.fbn-active::before,
  #fbn-bar.fbn-dpos-left.fbn-ind-bar  a.fbn-active::before{
    top:50%;left:-6px;transform:translateY(-50%);
    width:3px;height:24px;border-radius:0 3px 3px 0;
  }
  #fbn-bar.fbn-dpos-hidden{display:none!important}
  /* Active-position lift on hover for vertical bars feels right */
  #fbn-bar.fbn-dpos-right.fbn-hover-lift a:hover,
  #fbn-bar.fbn-dpos-left.fbn-hover-lift  a:hover{transform:translateX(-4px)}
  #fbn-bar.fbn-dpos-left.fbn-hover-lift  a:hover{transform:translateX(4px)}
}

/* ============ KEYFRAMES ============ */
@keyframes fbn-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(-2px)}}
@keyframes fbn-pulse {0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.85}}
@keyframes fbn-ring  {0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes fbn-pop   {0%{transform:scale(.4)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fbn-in-up    {from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes fbn-in-fade  {from{opacity:0}to{opacity:1}}
@keyframes fbn-in-zoom  {from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes fbn-in-right {from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce){
  #fbn-bar,#fbn-bar *{animation:none!important;transition:none!important}
}