.menuapi{
  font-family:var(--bf-font);
  color:var(--bf-fg);
  -webkit-font-smoothing:antialiased;
}
.menuapi[dir=rtl]{direction:rtl}
.menuapi *{box-sizing:border-box}
.menuapi a{color:var(--bf-brand)}

.menuapi .frame{
  position:relative;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  max-width:none;
}

/* ── Hero ───────────────────────────────────────── */
.menuapi .hero{
  position:relative;
  height:280px;
  background:var(--bf-grey-200) center/cover no-repeat;
  border-radius:var(--bf-radius-xl);
  overflow:hidden;
}
.menuapi .hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}
.menuapi .hero .cover{position:absolute; inset:0}
.menuapi .hero .cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Hero-top — back button (right in RTL) + share button (left in RTL) */
.menuapi .hero-top{
  position:absolute;
  top:18px;
  right:22px;
  left:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  z-index:3;
}
.menuapi .hero-top .grp{ display:flex; gap:8px; }
.menuapi .icbtn{
  width:42px; height:42px;
  border-radius:var(--bf-radius-pill);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:none;
  color:var(--bf-fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--bf-shadow-1);
  transition:transform .12s var(--bf-ease-out), background .12s var(--bf-ease-out);
  font-family:inherit;
  padding:0;
  text-decoration:none;
}
.menuapi .icbtn:hover{ transform:scale(1.04); background:#fff; }
.menuapi .icbtn svg{ width:18px; height:18px; flex:none; }

/* ── Identity card (overlaps hero) ─────────────── */
.menuapi .ident{
  position:relative;
  margin-top:-42px;
  padding:0 12px;
  z-index:4;
}
.menuapi .ident-card{
  background:var(--bf-white);
  border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-xl);
  padding:16px 22px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  box-shadow:var(--bf-shadow-2);
}
.menuapi .logo{
  width:88px; height:88px;
  border-radius:var(--bf-radius-lg);
  background:var(--bf-white) center/cover no-repeat;
  border:1px solid var(--bf-border-subtle);
  flex:none;
  display:block;
  object-fit:cover;
}
.menuapi .vname{
  margin:0;
  font-family:var(--bf-font);
  font-weight:900;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--bf-grey-900);
}
.menuapi .vmeta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 12px;
  row-gap:6px;
  margin-top:8px;
  font-size:13px;
  color:var(--bf-grey-600);
  font-weight:500;
}
.menuapi .vmeta .tag{ color:var(--bf-grey-700); font-weight:600; }
/* Inline separator " · " between consecutive tags. Renders only between
   adjacent .tag siblings so a single tag (e.g. mobile-only first) stays
   clean. */
.menuapi .vmeta .tag + .tag::before{
  content:" · ";
  color:var(--bf-grey-400);
  margin:0 4px;
}
.menuapi .vmeta .dot{
  width:3px; height:3px;
  border-radius:50%;
  background:var(--bf-grey-300);
  display:inline-block;
}
.menuapi .vmeta .star{
  color:var(--bf-grey-900);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.menuapi .vmeta .star img{ width:14px; height:14px; }

/* Open / closed pill — design ref _vendor-menu-shared.css */
.menuapi .vmeta .open,
.menuapi .vmeta .closed{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--bf-radius-pill);
  font-weight:700;
  font-size:12px;
  line-height:1.5;
}
.menuapi .vmeta .open{
  background:var(--bf-success-light);
  color:#005A23;
}
.menuapi .vmeta .closed{
  background:var(--bf-error-light);
  color:#9F1F15;
}
.menuapi .vmeta .pulse{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--bf-success);
  box-shadow:0 0 0 3px rgba(0,168,69,.18);
}
.menuapi .vmeta .closed .pulse{
  background:var(--bf-error);
  box-shadow:0 0 0 3px rgba(217,45,32,.15);
}

/* Stats row — inline SVG icons in a brand-tinted square */
.menuapi .meta-stats{
  display:flex;
  flex-wrap:wrap;
  gap:0 14px;
  row-gap:6px;
  margin-top:8px;
}
.menuapi .meta-stats .stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  padding:0;
}
.menuapi .meta-stats .stat .ic{
  width:22px; height:22px;
  border-radius:var(--bf-radius-sm);
  background:var(--bf-brand-lighter);
  color:var(--bf-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.menuapi .meta-stats .stat .ic svg{
  width:12px; height:12px;
  display:block;
}
.menuapi .meta-stats .stat .v{
  font-size:12.5px;
  font-weight:700;
  color:var(--bf-fg);
  line-height:1.2;
}
.menuapi .meta-stats .price{
  direction:ltr;
  unicode-bidi:isolate;
  font-feature-settings:"tnum" 1;
}
.menuapi .meta-stats .price .cur{
  color:var(--bf-grey-700);
  font-weight:600;
}

/* ── PRO promo bar (only when isPro) ────────────── */
.menuapi .probar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding:16px 12px;
  background:linear-gradient(90deg, rgba(225,29,72,.08) 0%, rgba(225,29,72,0) 80%);
  border-radius:var(--bf-radius-md);
  border:1px solid var(--bf-border-subtle);
  text-decoration:none;
  color:inherit;
}
.menuapi .probar .l{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.menuapi .b-pro{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bf-pro);
  color:var(--bf-white);
  padding:6px 12px;
  border-radius:var(--bf-radius-pill);
  font-size:13px;
  font-weight:700;
  line-height:1;
}
.menuapi .b-pro img{ height:18px; width:auto; display:block; border-radius:3px; flex:none; }
.menuapi .b-pro.lg{ font-size:15px; padding:7px 14px; gap:10px; }
.menuapi .b-pro.lg img{ height:22px; }
.menuapi .probar .ttl{
  font-size:14px;
  font-weight:800;
  color:var(--bf-fg);
  line-height:1.3;
}
.menuapi .probar .sub{
  font-size:12.5px;
  color:var(--bf-grey-600);
  margin-top:2px;
  line-height:1.4;
}
.menuapi .probar-cta{
  color:var(--bf-brand);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.menuapi .probar-cta:hover{ text-decoration:underline; }

/* ── Menu-nav (search + cats) ───────────────────────
   Sticky behaviour driven by baly-food-sticky.js (JS-fixed) so it
   survives Elementor's overflow:hidden + transform containing-block
   traps. Frosted-glass background lives on the element by default —
   the menu nav always shows it because there's no version of this
   page where the chrome should be transparent. */
.menuapi .menu-nav{
  position:relative;
  margin-top:18px;
  padding:14px 0 0;
  background:var(--bf-white);
  border-bottom:1px solid var(--bf-border-subtle);
  transition:padding .15s var(--bf-ease-out), box-shadow .15s var(--bf-ease-out);
}
.menuapi .menu-nav.is-stuck{
  padding:14px 16px 0;
  box-shadow:0 8px 18px rgba(10,10,10,.05);
  border-bottom-left-radius:var(--bf-radius-lg);
  border-bottom-right-radius:var(--bf-radius-lg);
}

.menuapi .search-bar{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:14px;
  background:var(--bf-white);
  border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-pill);
  box-shadow:0 4px 16px rgba(16,24,40,.05);
  padding:8px 12px;
}
.menuapi .search-bar .ic{
  width:44px; height:44px;
  border-radius:var(--bf-radius-pill);
  background:var(--bf-grey-100);
  color:var(--bf-grey-600);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.menuapi .search-bar .ic svg{ width:18px; height:18px; }
.menuapi .search-bar input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font:inherit;
  font-size:15px;
  color:var(--bf-fg);
  text-align:right;
  direction:rtl;
  padding:14px 6px;
  min-width:0;
}
.menuapi .search-bar input::placeholder{ color:var(--bf-grey-400); }

.menuapi .cats{
  display:flex;
  gap:6px;
  padding:14px 0;
  overflow-x:auto;
  scrollbar-width:none;
  /* scroll-behavior:smooth animates programmatic scrolls (the
     menuapi.js auto-centering of the active pill) without affecting
     native touch scrolling. */
  scroll-behavior:smooth;
  /* overflow-anchor:none disables Chrome's "scroll anchoring" feature
     for this container — without this, Chrome's heuristics sometimes
     cancel programmatic scroll changes that happen while DOM is
     mutating elsewhere on the page (e.g. when scroll-spy toggles
     active classes). Safari doesn't ship scroll anchoring on element
     containers, which is why the previous version "just worked"
     there but failed on Chrome. */
  overflow-anchor:none;
}
.menuapi .cats::-webkit-scrollbar{ display:none; }
.menuapi .cat{
  flex:none;
  padding:10px 16px;
  border-radius:var(--bf-radius-pill);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  border:1px solid transparent;
  background:transparent;
  color:var(--bf-grey-600);
  cursor:pointer;
  transition:all .12s var(--bf-ease-out);
  white-space:nowrap;
  text-decoration:none;
}
.menuapi .cat:hover{ color:var(--bf-fg); background:var(--bf-grey-50); }
.menuapi .cat.active{
  background:var(--bf-brand);
  color:var(--bf-white);
  border-color:var(--bf-brand);
  box-shadow:0 4px 12px var(--bf-brand-20);
}

/* ── Menu body / sections / items ───────────────── */
.menuapi .menu-body{
  padding:8px 0 28px;
  padding-bottom:120px;
}
.menuapi .sec{
  padding:24px 0;
  border-bottom:1px solid var(--bf-border-subtle);
  scroll-margin-top:calc(160px + var(--baly-header-h, 0px));
}
.menuapi .sec:last-child{ border-bottom:none; }
.menuapi .sec-head{
  margin-bottom:18px;
}
.menuapi .sec-head h2{
  margin:0;
  font-family:var(--bf-font);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--bf-grey-900);
}

.menuapi .items{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.menuapi .item{
  display:grid;
  grid-template-columns:1fr 130px;
  gap:16px;
  padding:16px;
  border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-lg);
  background:var(--bf-white);
  align-items:start;
  transition:border-color .15s ease, box-shadow .15s ease;
  text-decoration:none;
  color:inherit;
}
.menuapi .item:hover{
  border-color:var(--bf-grey-200);
  box-shadow:var(--bf-shadow-1);
}
.menuapi .item .body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* The plugin only ships weights 400/600/700/900 from baly.iq. We use
   700 here (loaded as the Bold woff2) because some themes — and CSS
   font-matching algorithms — render an unloaded 800 weight as 400/regular
   when font-synthesis is disabled. !important defends against theme h4
   overrides; we also explicitly hit .name-text since some themes' base
   styles target inner spans with a lighter weight. */
.menuapi .item .name,
.menuapi .item .name .name-text{
  font-weight:700 !important;
  font-synthesis-weight:none;
}
.menuapi .item .name{
  margin:0;
  font-size:15.5px;
  line-height:1.3;
  color:var(--bf-fg);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--bf-font);
}

/* Item description — clamped to two lines, design ref _vendor-menu-shared.css */
.menuapi .item .desc{
  margin:0;
  font-size:12.5px;
  color:var(--bf-grey-500);
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Inline product badges — populates from API flags (trending → popular,
   status:false → unavail). Mirrors components-vendor-menu-page.html .ix.* */
.menuapi .item .ix{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:800;
  line-height:1.5;
  padding:2px 8px;
  border-radius:var(--bf-radius-pill);
  letter-spacing:.01em;
}
.menuapi .ix.popular{ background:var(--bf-warning-light); color:#7A4A00; }
.menuapi .ix.spicy{   background:var(--bf-error-light);   color:#9F1F15; }
.menuapi .ix.new{     background:var(--bf-brand-lighter); color:var(--bf-brand-active); }
.menuapi .ix.unavail{ background:var(--bf-grey-100);      color:var(--bf-grey-600); }
.menuapi .item.unavail{ opacity:.6; }
.menuapi .item .price-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:4px;
}
.menuapi .item .price{
  font-size:15px;
  font-weight:900;
  color:var(--bf-fg);
  direction:ltr;
  unicode-bidi:isolate;
  font-feature-settings:"tnum" 1;
}
.menuapi .item .price .cur{
  font-weight:700;
  color:var(--bf-grey-600);
  font-size:12.5px;
  margin-inline-start:2px;
}
.menuapi .item .img-wrap{
  position:relative;
  width:130px;
  height:130px;
  border-radius:var(--bf-radius-md);
  overflow:hidden;
  flex:none;
  background:var(--bf-grey-100) center/cover no-repeat;
}
.menuapi .item .img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ── Sticky CTA — pinned to viewport ────────────── */
/* CSS is duplicated against .menuapi-cta because menuapi.js relocates the
   bar to <body> for fixed-positioning to escape overflow:clip ancestors;
   after that move, the inner elements aren't .menuapi descendants anymore. */
.menuapi .cta-bar,
.menuapi-cta{
  position:fixed;
  left:0; right:0;
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:2147483647;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.menuapi .cta-bar-inner,
.menuapi-cta .cta-bar-inner{
  width:calc(100% - 48px);
  max-width:1180px;
  display:flex;
  justify-content:center;
  pointer-events:auto;
}
.menuapi .cta-btn,
.menuapi-cta .cta-btn{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  background:var(--bf-brand);
  color:var(--bf-white);
  border:none;
  border-radius:var(--bf-radius-pill);
  font-family:var(--bf-font);
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  box-shadow:var(--bf-shadow-brand);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.menuapi .cta-btn:hover,
.menuapi-cta .cta-btn:hover{
  transform:translateY(-2px);
  background:var(--bf-brand-hover);
  box-shadow:0 8px 28px rgba(0,67,255,.32);
}
.menuapi .cta-btn:active,
.menuapi-cta .cta-btn:active{ transform:translateY(0); }
.menuapi .cta-ic,
.menuapi-cta .cta-ic{
  width:32px; height:32px;
  border-radius:var(--bf-radius-pill);
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.menuapi .cta-ic svg,
.menuapi-cta .cta-ic svg{ width:18px; height:18px; }
.menuapi .cta-txt,
.menuapi-cta .cta-txt{ text-align:start; }
.menuapi .cta-chev,
.menuapi-cta .cta-chev{ display:flex; align-items:center; opacity:.85; flex:none; }
.menuapi .cta-chev svg,
.menuapi-cta .cta-chev svg{ width:16px; height:16px; }

/* ── Tablet (≤ 1099px) ──────────────────────────── */
@media (max-width: 1099px) {
  .menuapi .hero{ height:220px; }
  .menuapi .ident{ margin-top:-36px; padding:0 8px; }
  .menuapi .ident-card{ padding:14px 18px; }
  .menuapi .meta-stats{ gap:0 14px; row-gap:8px; }
  .menuapi .items{ grid-template-columns:1fr; gap:10px; }
  .menuapi .vname{ font-size:21px; }
  .menuapi .cta-bar-inner,
  .menuapi-cta .cta-bar-inner{ max-width:760px; width:calc(100% - 36px); }
}

/* ── Mobile (≤ 759px) ───────────────────────────── */
@media (max-width: 759px) {
  .menuapi .hero{ height:188px; border-radius:var(--bf-radius-lg); }
  .menuapi .icbtn{ width:38px; height:38px; }
  .menuapi .icbtn svg{ width:16px; height:16px; }
  .menuapi .hero-top{ top:14px; right:14px; left:14px; }

  .menuapi .ident{ margin-top:-70px; padding:0 4px; }
  .menuapi .ident-card{
    padding:12px;
    grid-template-columns:auto 1fr;
    gap:10px;
    border-radius:var(--bf-radius-lg);
  }
  .menuapi .logo{ width:64px; height:64px; border-radius:var(--bf-radius-md); }
  .menuapi .vname{ font-size:17px; }
  .menuapi .vmeta{ font-size:12px; gap:0 8px; margin-top:4px; }
  /* Mobile keeps the vmeta single-line: render only the first
     business-category tag; the rest are still in the DOM for SEO
     but visually hidden. */
  .menuapi .vmeta .tag:nth-of-type(n+2){ display:none; }
  .menuapi .meta-stats .stat .v{ font-size:12px; }

  /* Mobile probar — keep the headline on one line by tightening
     spacing, shrinking the PRO chip, and hiding the subtitle. */
  .menuapi .probar{ padding:10px 12px; gap:8px; }
  .menuapi .probar .l{ gap:8px; min-width:0; flex:1; }
  .menuapi .probar .l > div{ min-width:0; flex:1; }
  .menuapi .probar .ttl{
    font-size:11.5px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .menuapi .probar .sub{ display:none; }
  .menuapi .probar .b-pro{
    font-size:11px;
    padding:5px 8px;
    gap:6px;
    flex:none;
  }
  .menuapi .probar .b-pro.lg{
    font-size:11px;
    padding:5px 8px;
    gap:6px;
  }
  .menuapi .probar .b-pro.lg img,
  .menuapi .probar .b-pro img{ height:14px; }
  .menuapi .probar-cta{
    font-size:11.5px;
    white-space:nowrap;
    flex:none;
  }

  .menuapi .menu-nav{ padding:12px 0 0; }
  .menuapi .search-bar{ padding:6px 10px; gap:10px; }
  .menuapi .search-bar .ic{ width:36px; height:36px; }
  .menuapi .search-bar input{ font-size:13.5px; padding:10px 4px; }
  .menuapi .cats{ padding:12px 0; gap:5px; }
  .menuapi .cat{ padding:8px 13px; font-size:12.5px; }

  .menuapi .menu-body{ padding:6px 0 14px; padding-bottom:110px; }
  .menuapi .sec{ padding:18px 0; scroll-margin-top:calc(140px + var(--baly-header-h, 0px)); }
  .menuapi .sec-head h2{ font-size:18px; }
  .menuapi .items{ gap:0; }
  .menuapi .item{
    grid-template-columns:1fr 92px;
    gap:14px;
    padding:14px 0;
    border:none;
    border-bottom:1px solid var(--bf-border-subtle);
    border-radius:0;
  }
  .menuapi .item:hover{ box-shadow:none; border-color:var(--bf-border-subtle); }
  .menuapi .item:last-child{ border-bottom:none; }
  .menuapi .item .img-wrap{ width:92px; height:92px; border-radius:var(--bf-radius-sm); }
  .menuapi .item .name{ font-size:14px; }
  .menuapi .item .price{ font-size:13.5px; }

  .menuapi .cta-bar,
  .menuapi-cta{ bottom:20px; }
  .menuapi .cta-bar-inner,
  .menuapi-cta .cta-bar-inner{ max-width:390px; width:calc(100% - 28px); }
  .menuapi .cta-btn,
  .menuapi-cta .cta-btn{ padding:14px 18px; font-size:15px; gap:12px; }
  .menuapi .cta-ic,
  .menuapi-cta .cta-ic{ width:28px; height:28px; }
  .menuapi .cta-ic svg,
  .menuapi-cta .cta-ic svg{ width:15px; height:15px; }
}

/* Hidden when filtered out by the menu search */
.menuapi .item.is-hidden,
.menuapi .sec.is-hidden{ display:none; }