/* =========================================================
   Mobile / Tablet Bottom Navigation Bar
   Managed from Admin > Bottom Navigation. Desktop hidden.
   ========================================================= */

.bottom-nav{
  display:none; /* shown only on mobile & tablet below */
}

@media (max-width:991px){
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom,0px)); }

  .bottom-nav{
    display:flex;
    position:fixed !important; left:0; right:0; bottom:0; z-index:900;
    justify-content:space-around; align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.94) 40%, #fff 100%);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid rgba(124,58,237,.10);
    box-shadow:0 -10px 30px rgba(31,23,66,.10), 0 -1px 0 rgba(255,255,255,.6) inset;
    border-radius:20px 20px 0 0;
    overflow:hidden;
    /* Force its own GPU compositing layer so it never lags/drifts behind
       page-scroll momentum on mobile browsers (Android Chrome / iOS Safari). */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }
  /* glossy highlight sheen across the top edge of the bar */
  .bottom-nav::before{
    content:'';position:absolute;top:0;left:0;right:0;height:50%;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 100%);
  }

  .bn-item{
    position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 2px;color:var(--gray,#6b7280);font-size:10.5px;font-weight:600;
    border-radius:14px;-webkit-tap-highlight-color:transparent;user-select:none;
    transition:color .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .bn-item:active{ transform:scale(.9); }

  .bn-icon{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:12px;
    background:linear-gradient(150deg, rgba(124,58,237,.10) 0%, rgba(124,58,237,.02) 100%);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease;
  }
  .bn-item:not(.active) .bn-icon{ color:var(--primary,#7c3aed); }
  .bn-item:not(.active):active .bn-icon{ background:rgba(124,58,237,.16); }
  .bn-icon svg{ width:20px;height:20px;transition:var(--trans);stroke-width:2.1; }

  /* Active tab: glossy gradient pill + lifted icon + glow */
  .bn-item.active{ color:var(--primary-dark,#5b21b6); }
  .bn-item.active .bn-icon{
    transform:translateY(-13px);
    background:linear-gradient(150deg,var(--primary,#7c3aed) 0%,var(--primary-dark,#5b21b6) 100%);
    width:44px;height:44px;border-radius:50%;
    box-shadow:0 8px 18px rgba(124,58,237,.42), inset 0 2px 3px rgba(255,255,255,.35);
    animation:bnPop .45s cubic-bezier(.34,1.56,.64,1);
  }
  .bn-item.active .bn-icon svg{ color:#fff;width:20px;height:20px; }
  .bn-item.active .bn-label{ transform:translateY(-6px); opacity:1; }
  .bn-item:not(.active) .bn-label{ opacity:.85; }

  @keyframes bnPop{
    0%{ transform:translateY(-13px) scale(.4); }
    60%{ transform:translateY(-13px) scale(1.12); }
    100%{ transform:translateY(-13px) scale(1); }
  }

  /* Cart badge */
  .bn-badge{
    position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;
    background:var(--accent,#f59e0b);color:#fff;font-size:10px;font-weight:700;line-height:16px;
    text-align:center;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.2);
    animation:pop-in .3s ease;
  }
  .bn-item.active .bn-badge{ top:-6px; right:-6px; }

  /* subtle ripple element injected by bottom-nav.js */
  .bn-ripple{
    position:absolute;border-radius:50%;background:rgba(124,58,237,.25);
    transform:scale(0);animation:bnRipple .55s ease-out forwards;pointer-events:none;
  }
  @keyframes bnRipple{ to{ transform:scale(2.6); opacity:0; } }
}

@media (max-width:360px){
  .bn-label{ font-size:9.5px; }
  .bn-item.active .bn-icon{ width:40px;height:40px; }
}

/* =========================================================
   Live Search overlay (opened from the bottom nav Search tab)
   ========================================================= */
.bn-search-overlay{
  position:fixed !important;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(20,14,40,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.bn-search-overlay.open{ opacity:1;pointer-events:auto; }

.bn-search-panel{
  width:100%;max-width:640px;max-height:78vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
  border-radius:22px 22px 0 0;box-shadow:0 -16px 40px rgba(31,23,66,.28);
  transform:translateY(30px);transition:transform .3s cubic-bezier(.34,1.2,.64,1);
  padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden;
}
.bn-search-overlay.open .bn-search-panel{ transform:translateY(0); }

.bn-search-head{
  display:flex;align-items:center;gap:10px;padding:16px 16px 12px;
  border-bottom:1px solid var(--border,#eee7fb);
}
.bn-search-head-icon{ width:20px;height:20px;color:var(--primary,#7c3aed);flex-shrink:0; }
.bn-search-head input{
  flex:1;border:none;outline:none;background:transparent;font-size:15.5px;color:var(--dark,#1f1742);
  font-family:inherit;
}
.bn-search-head input::placeholder{ color:var(--gray,#9691ab); }
.bn-search-close{
  border:none;background:rgba(124,58,237,.08);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--primary-dark,#5b21b6);cursor:pointer;
  flex-shrink:0;transition:var(--trans);
}
.bn-search-close:active{ background:rgba(124,58,237,.2); }
.bn-search-close svg{ width:16px;height:16px; }

.bn-search-body{ padding:6px 8px 18px;overflow-y:auto; }
.bn-search-hint{ text-align:center;color:var(--gray,#9691ab);font-size:13.5px;padding:26px 12px; }
.bn-search-loading{
  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gray,#9691ab);
  font-size:13.5px;padding:26px 12px;
}

.bn-search-results{ display:flex;flex-direction:column;gap:4px; }
.bn-result{
  display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;text-decoration:none;
  color:inherit;transition:background .2s ease;
}
.bn-result:active{ background:rgba(124,58,237,.08); }
.bn-result img{
  width:48px;height:48px;border-radius:10px;object-fit:cover;background:#f2f0fa;flex-shrink:0;
}
.bn-result-info{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.bn-result-title{
  font-size:13.5px;font-weight:600;color:var(--dark,#1f1742);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bn-result-price{ font-size:13px;font-weight:700;color:var(--primary-dark,#5b21b6); }
.bn-result-price s{ font-weight:500;color:var(--gray,#9691ab);margin-left:4px; }

.bn-search-viewall{
  display:block;text-align:center;margin-top:8px;padding:12px;border-radius:14px;
  background:linear-gradient(150deg,var(--primary,#7c3aed) 0%,var(--primary-dark,#5b21b6) 100%);
  color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;
}