/* Lapit Commodities PWA shell
 * Phones / small tablets (<992px): bottom tab bar, like the mobile app
 * Desktop (>=992px): left navigation rail (icons only to 1199px, labelled from 1200px)
 */
:root{
  --pwa-green:#2E7D32; --pwa-green-dark:#1B5E20; --pwa-cream:#F1F8E9; --pwa-orange:#F57C00;
  --pwa-ink:#6c7a86; --pwa-line:#E9ECEF;
  --pwa-tab-h:62px; --pwa-rail-sm:76px; --pwa-rail:236px;
}
.pwa-nav{position:fixed;z-index:1045;background:#fff;font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
.pwa-nav *{box-sizing:border-box;transition:none}
.pwa-nav a,.pwa-nav button{text-decoration:none;-webkit-tap-highlight-color:transparent}
.pwa-ico{width:24px;height:24px;flex:none}
.pwa-tab{position:relative;display:flex;align-items:center;color:var(--pwa-ink);background:none;border:0;font:inherit;cursor:pointer}
.pwa-tab:hover{color:var(--pwa-green)}
.pwa-tab.active{color:var(--pwa-green-dark)}
.pwa-brand,.pwa-sec,.pwa-sep,.pwa-foot{display:none}
.pwa-install-btn[hidden]{display:none!important}
.pwa-badge{position:absolute;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pwa-orange);color:#fff;
  font-size:.65rem;font-weight:600;line-height:18px;text-align:center}
.pwa-badge[hidden]{display:none}

/* ---------- Phones & small tablets: bottom tab bar ---------- */
@media (max-width:991.98px){
  .pwa-nav{left:0;right:0;bottom:0;display:flex;height:calc(var(--pwa-tab-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--pwa-line);box-shadow:0 -4px 18px rgba(0,0,0,.07)}
  .pwa-links{display:flex;flex:1}
  .pwa-tab{flex:1;flex-direction:column;justify-content:center;gap:2px;font-size:.68rem;font-weight:500;min-width:0}
  .pwa-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pwa-tab.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--pwa-green)}
  .pwa-tab.active .pwa-ico{stroke-width:2.4}
  .pwa-badge{top:6px;left:calc(50% + 4px)}
  body.pwa-has-nav{padding-bottom:calc(var(--pwa-tab-h) + env(safe-area-inset-bottom,0px))!important}
  body.pwa-nav-hidden .pwa-nav{display:none}
  body.pwa-nav-hidden.pwa-has-nav{padding-bottom:0!important}

  /* app-style: the old text link row / floating buttons would duplicate the tabs */
  body.pwa-has-nav header .row.d-lg-none{display:none!important}
  body.pwa-has-nav .floating-cart{display:none!important}
  body.pwa-has-nav .scroll-top{bottom:calc(var(--pwa-tab-h) + 16px + env(safe-area-inset-bottom,0px))!important}
}

/* ---------- Desktop: side rail ---------- */
@media (min-width:992px){
  .pwa-nav{top:0;bottom:0;left:0;width:var(--pwa-rail-sm);display:flex;flex-direction:column;border-right:1px solid var(--pwa-line);
    box-shadow:2px 0 14px rgba(46,125,50,.06);padding:14px 0;overflow-y:auto;overflow-x:hidden}
  .pwa-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 8px 14px;padding:4px;color:var(--pwa-green-dark);font-weight:700;font-size:.95rem}
  .pwa-brand img{border-radius:10px}
  .pwa-links{display:flex;flex-direction:column;flex:1}
  .pwa-sec{display:flex}
  .pwa-sep.pwa-sec{display:block;height:1px;background:var(--pwa-line);margin:10px 18px}
  .pwa-tab{gap:14px;margin:2px 10px;padding:11px 0;justify-content:center;border-radius:12px;font-size:.92rem;font-weight:500;width:calc(100% - 20px)}
  .pwa-tab:hover{background:var(--pwa-cream)}
  .pwa-tab.active{background:var(--pwa-cream);font-weight:600}
  .pwa-tab.active::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--pwa-green)}
  .pwa-label{display:none}
  .pwa-badge{top:2px;left:calc(50% + 4px)}
  .pwa-foot{display:flex;flex-direction:column;border-top:1px solid var(--pwa-line);margin-top:8px;padding-top:8px}

  body.pwa-has-nav{padding-left:var(--pwa-rail-sm)!important}
  /* the rail replaces the header text links and hamburger */
  body.pwa-has-nav header .nav-links,
  body.pwa-has-nav header .menu-toggle{display:none!important}
}
@media (min-width:1200px){
  .pwa-nav{width:var(--pwa-rail)}
  .pwa-brand{justify-content:flex-start;margin:0 14px 16px}
  .pwa-label{display:inline}
  .pwa-tab{justify-content:flex-start;padding:11px 16px}
  .pwa-badge{top:50%;left:auto;right:14px;transform:translateY(-50%)}
  body.pwa-has-nav{padding-left:var(--pwa-rail)!important}
}

/* ---------- Banners ---------- */
.pwa-banner{position:fixed;left:50%;transform:translateX(-50%);z-index:1060;max-width:min(92vw,460px);width:max-content;
  background:#1f2d3a;color:#fff;border-radius:14px;padding:12px 16px;font:500 .85rem/1.35 Poppins,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;gap:12px}
.pwa-banner[hidden]{display:none}
.pwa-banner button{border:0;border-radius:999px;padding:7px 14px;font:inherit;font-weight:600;cursor:pointer}
.pwa-banner .pwa-b-main{background:var(--pwa-green);color:#fff}
.pwa-banner .pwa-b-x{background:transparent;color:#cfd8dc;padding:7px 8px}
#pwaOffline{top:calc(10px + env(safe-area-inset-top,0px));background:#b71c1c}
#pwaInstall{bottom:calc(var(--pwa-tab-h) + 14px + env(safe-area-inset-bottom,0px))}
@media (min-width:992px){ #pwaInstall{bottom:20px} }