/* =====================================================================
   Servolink — Fixed bottom icon bar for mobile (site-wide)
   Loaded from app/Views/includes/mobile_bottom_nav.php
   ===================================================================== */

.mbn{display:none}
.mbn-search{display:none}

@media (max-width:900px){

  /* keep page content clear of the fixed bar */
  body{padding-bottom:64px}

  /* the old round floating cart button would sit on top of the bar */
  .float-cart,
  a[href="/cart"].float-cart{display:none !important}

  .mbn{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#fff;border-top:1px solid var(--grey-300,#D7D9DC);
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    font-family:var(--font-body,'Poppins',sans-serif)
  }

  .mbn-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 2px;background:none;border:0;cursor:pointer;
    color:var(--grey-800,#2B2D31);text-decoration:none;-webkit-tap-highlight-color:transparent
  }
  .mbn-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;display:block}
  .mbn-item span{font-size:9.5px;letter-spacing:.02em;line-height:1;font-weight:500}
  .mbn-item:active{transform:scale(.93)}
  .mbn-item.on{color:var(--red,#FF2836)}

  /* centre cart — raised pill, matching the reference design */
  .mbn-cart{margin-top:-22px}
  .mbn-cart .puck{
    width:46px;height:46px;border-radius:50%;background:var(--red,#FF2836);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(255,40,54,.42);border:3px solid #fff;position:relative
  }
  .mbn-cart .puck svg{stroke:#fff;width:20px;height:20px}
  .mbn-cart span{margin-top:1px}

  .mbn-badge{
    position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;padding:0 4px;
    border-radius:20px;background:var(--ink,#1B1C1F);color:#fff;
    font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
    border:2px solid #fff;line-height:1
  }

  /* ---- slide-down search panel ---- */
  .mbn-search{
    display:block;position:fixed;left:0;right:0;top:0;z-index:950;
    background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.16);
    padding:14px 16px;transform:translateY(-110%);transition:transform .28s ease
  }
  .mbn-search.open{transform:translateY(0)}
  .mbn-search form{display:flex;gap:8px;align-items:center}
  .mbn-search input{
    flex:1;border:1px solid var(--grey-300,#D7D9DC);border-radius:6px;
    padding:11px 13px;font-size:14px;font-family:inherit;outline:0;min-width:0
  }
  .mbn-search input:focus{border-color:var(--red,#FF2836)}
  .mbn-search button{
    background:var(--red,#FF2836);color:#fff;border:0;border-radius:6px;
    padding:11px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit
  }
  .mbn-search .close{background:none;color:var(--grey-600,#5B5F66);padding:11px 4px;font-size:22px;line-height:1}
  .mbn-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:940;
    opacity:0;visibility:hidden;transition:.25s
  }
  .mbn-backdrop.open{opacity:1;visibility:visible}
}

@media (prefers-reduced-motion:reduce){
  .mbn-search,.mbn-backdrop{transition:none}
  .mbn-item:active{transform:none}
}