/* =========================================================
   El Amir Palace · mobile bottom navigation (< 768px)
   Shared by index.html and pedir.html. Inicio · Carta ·
   PEDIR (raised) · Sucursales · WhatsApp. Mirrors in RTL
   (flex/grid follow dir). Safe-area aware.
   ========================================================= */
.bnav{display:none}
@media (max-width:767px){
  :root{--bnav-h:64px}
  body{padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom))}
  .bnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;inset:auto 0 0;z-index:35;
    height:calc(var(--bnav-h) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);
    background:rgba(251,248,243,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border-top:1px solid rgba(190,149,100,.6);box-shadow:0 -10px 30px -18px rgba(30,26,24,.35)}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--bnav-h);
    padding:6px 2px 8px;color:var(--ink-2);text-decoration:none;font:700 11px/1.1 var(--f-body);letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;transition:color .25s var(--ease),transform .15s var(--ease)}
  .bnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bnav svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .bnav{touch-action:none;overscroll-behavior:none}
  .bnav:has(.bnav-order[aria-current]) .bnav-ind{opacity:0!important}
  .bnav a:active{transform:scale(.9)}
  .bnav a[aria-current]{color:var(--wine)}
  .bnav a:focus-visible{outline:2px solid var(--wine);outline-offset:-4px;border-radius:12px}
  /* PEDIR: burgundy circle raised above the bar */
  .bnav-order{color:var(--wine)!important}
  .bnav-o{display:grid;place-items:center;width:58px;height:58px;margin-top:-30px;border-radius:50%;background:var(--wine);color:#fff;
    border:3px solid var(--paper);box-shadow:0 10px 22px -8px rgba(74,17,25,.65),0 0 0 1px rgba(190,149,100,.55);transition:transform .2s var(--ease-out)}
  .bnav-o svg{width:25px;height:25px;stroke-width:1.8}
  .bnav-order:active .bnav-o{transform:scale(.92)}
  /* item count on the PEDIR circle (bnav.js); on pedir.html it replaces the floating "Ver mi pedido" button */
  .bnav .bnav-o{position:relative;overflow:visible}
  .bnav-n{position:absolute;top:-3px;inset-inline-end:-3px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:#fff;color:var(--wine);
    font:800 12px/21px var(--f-body);font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 2px 6px rgba(74,17,25,.35)}
  .bnav-n[hidden]{display:none}
  .bnav-n.pop{animation:bnav-pop .45s var(--ease-out)}
  @keyframes bnav-pop{40%{transform:scale(1.3)}}
  .bnav-tot{font-variant-numeric:tabular-nums}
  .pill{display:none!important}
  /* sliding indicator above the active item */
  .bnav-ind{position:absolute;top:-1px;left:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--wine);opacity:0;
    transform:translateX(var(--x,0));transition:transform .45s var(--ease-drawer),opacity .2s}
  .bnav.has-ind .bnav-ind{opacity:1}
  .bnav.ind-init .bnav-ind{transition:none}
  /* homepage hero: hidden until the visitor scrolls (bnav.js); the extra 48px also hides the raised PEDIR circle */
  .bnav{transition:transform .4s var(--ease-out,cubic-bezier(.2,.7,.2,1))}
  .bnav-away .bnav{transform:translateY(calc(100% + 48px))}
  :lang(ar) .bnav a{font-family:"IBM Plex Sans Arabic",var(--f-body);font-size:11.5px;letter-spacing:0}
  @media (prefers-reduced-motion:reduce){.bnav,.bnav-ind,.bnav a,.bnav-o{transition:none}.bnav-n.pop{animation:none}}

  /* one clear place to order: hide the header PEDIR / WhatsApp duplicates on phones */
  .hd-r>.btn--wine,.hd-order,.hd-r>.icon-btn[data-wa]{display:none!important}
  /* homepage: lift floating bits above the bar */
  .lhint{bottom:calc(var(--bnav-h) + 14px + env(safe-area-inset-bottom))}
  .ft{padding-bottom:0}
  .hero{min-height:calc(100svh - var(--bnav-h) - env(safe-area-inset-bottom))}
  /* pedir.html: cart pill + toast stack above the bar */
  .pill{bottom:calc(var(--bnav-h) + 28px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(var(--bnav-h) + 100px + env(safe-area-inset-bottom))}
}