/*
 * Farshid Bonab — Minimal mobile bottom navigation
 * One surface, three tabs, no floating layers or nested decorative boxes.
 */
.mobile-app-nav{display:none}

@media(max-width:820px){
  :root{
    --mobile-app-nav-height:58px;
    --mobile-app-nav-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-app-nav-total:calc(var(--mobile-app-nav-height) + var(--mobile-app-nav-safe-bottom));
  }

  html{scroll-padding-bottom:calc(var(--mobile-app-nav-total) + 12px)}

  body,
  body.online-cart-enabled,
  body.direct-ordering-enabled,
  body.table-ordering-enabled{
    padding-bottom:calc(var(--mobile-app-nav-total) + 6px)!important;
  }

  .site-footer{padding-bottom:calc(var(--mobile-app-nav-total) + 14px)!important}
  .to-top{bottom:calc(var(--mobile-app-nav-total) + 12px)!important}
  .modal.open,
  .cart-drawer.open{padding-bottom:var(--mobile-app-nav-total)}

  .mobile-app-nav{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:1085;
    display:block;
    pointer-events:none;
  }

  .mobile-app-nav::before,
  .mobile-app-nav::after{display:none!important}

  .mobile-app-nav__shell{
    position:relative;
    width:100%;
    max-width:none;
    height:calc(var(--mobile-app-nav-height) + var(--mobile-app-nav-safe-bottom));
    margin:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    direction:ltr;
    gap:0;
    padding:
      3px
      max(8px,env(safe-area-inset-right,0px))
      var(--mobile-app-nav-safe-bottom)
      max(8px,env(safe-area-inset-left,0px));
    overflow:hidden;
    border:0;
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:0;
    background:rgba(17,17,16,.965);
    box-shadow:0 -8px 24px rgba(0,0,0,.22);
    backdrop-filter:blur(18px) saturate(1.08);
    -webkit-backdrop-filter:blur(18px) saturate(1.08);
    pointer-events:auto;
    isolation:isolate;
  }

  .mobile-app-nav__shell::before,
  .mobile-app-nav__shell::after{display:none!important}

  .mobile-app-nav__item,
  .mobile-app-nav__item--primary{
    position:relative;
    z-index:1;
    min-width:0;
    height:55px;
    grid-row:1;
    direction:rtl;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:2px 4px 3px;
    border:0;
    border-radius:0;
    color:rgba(244,239,229,.56);
    background:transparent;
    box-shadow:none;
    text-decoration:none;
    outline:0;
    transform:none;
    overflow:visible;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:color .16s ease,opacity .16s ease,transform .12s ease;
  }

  .mobile-app-nav__item[data-mobile-nav-key="home"]{grid-column:3}
  .mobile-app-nav__item[data-mobile-nav-key="order"]{grid-column:2}
  .mobile-app-nav__item[data-mobile-nav-key="reservation"]{grid-column:1}

  .mobile-app-nav__item::before,
  .mobile-app-nav__item--primary::before{display:none!important}

  .mobile-app-nav__item::after,
  .mobile-app-nav__item--primary::after{
    content:"";
    position:absolute;
    top:-3px;
    left:50%;
    display:block!important;
    width:22px;
    height:2px;
    border-radius:0 0 2px 2px;
    background:var(--brand-primary,var(--gold,#c68a3e));
    box-shadow:none;
    opacity:0;
    transform:translateX(-50%);
    transition:opacity .16s ease;
    pointer-events:none;
  }

  .mobile-app-nav__icon,
  .mobile-app-nav__item--primary .mobile-app-nav__icon{
    position:relative;
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:0;
    color:currentColor;
    background:transparent;
    box-shadow:none;
    filter:none;
    transform:none;
    transition:color .16s ease,transform .16s ease;
  }

  .mobile-app-nav__icon::before,
  .mobile-app-nav__icon::after,
  .mobile-app-nav__item--primary .mobile-app-nav__icon::before,
  .mobile-app-nav__item--primary .mobile-app-nav__icon::after{display:none!important}

  .mobile-app-nav__icon svg,
  .mobile-app-nav__item--primary .mobile-app-nav__icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:none;
  }

  .mobile-app-nav__label,
  .mobile-app-nav__item--primary .mobile-app-nav__label{
    display:block;
    max-width:100%;
    min-width:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    color:currentColor;
    background:transparent;
    box-shadow:none;
    font-size:10px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.2px;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    opacity:1;
    text-shadow:none;
  }

  /* The central food-ordering tab is distinct without becoming a floating button. */
  .mobile-app-nav__item--primary{
    color:var(--brand-primary,var(--gold,#c68a3e));
  }

  .mobile-app-nav__item--primary .mobile-app-nav__icon{
    width:27px;
    height:27px;
    flex-basis:27px;
  }

  .mobile-app-nav__item--primary .mobile-app-nav__icon svg{
    width:25px;
    height:25px;
    stroke-width:1.85;
  }

  .mobile-app-nav__item--primary .mobile-app-nav__label{
    font-size:10.4px;
    font-weight:850;
  }

  .mobile-app-nav__item.is-active,
  .mobile-app-nav__item--primary.is-active{
    color:#f3d69a;
  }

  .mobile-app-nav__item.is-active::after,
  .mobile-app-nav__item--primary.is-active::after{opacity:1}

  .mobile-app-nav__item:focus-visible{
    color:#f3d69a;
    outline:2px solid rgba(198,138,62,.45);
    outline-offset:-4px;
  }

  .mobile-app-nav__item:active,
  .mobile-app-nav__item--primary:active{transform:scale(.96)}
}

@media(max-width:360px){
  :root{--mobile-app-nav-height:56px}

  .mobile-app-nav__shell{padding-top:2px}

  .mobile-app-nav__item,
  .mobile-app-nav__item--primary{height:53px;gap:2px}

  .mobile-app-nav__icon,
  .mobile-app-nav__item--primary .mobile-app-nav__icon{
    width:23px;
    height:23px;
    flex-basis:23px;
  }

  .mobile-app-nav__icon svg,
  .mobile-app-nav__item--primary .mobile-app-nav__icon svg{
    width:21px;
    height:21px;
  }

  .mobile-app-nav__item--primary .mobile-app-nav__icon svg{
    width:23px;
    height:23px;
  }

  .mobile-app-nav__label,
  .mobile-app-nav__item--primary .mobile-app-nav__label{font-size:9.4px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-app-nav__item,
  .mobile-app-nav__icon,
  .mobile-app-nav__item::after{transition:none!important}
}