/* ========= Menu — Cheezious-like look ========= */

/* Page top */
.menu-title{
  font-weight: 800; color: var(--dark);
  font-size: 2rem;
  margin: 2rem 0;
}
.menu-top .form-control{ border-radius: 999px; }

/* Sidebar */
.menu-sidebar{
  position: sticky; top: 84px;
  border: 1px solid #eee; border-radius: 14px; background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.menu-side-title{ font-weight: 700; margin-bottom: .25rem; }
.menu-side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.menu-side-list .side-link{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .65rem; border-radius:10px; color:#2a2a2a; text-decoration:none;
}
.menu-side-list .side-link:hover{ background:#f6f7f9; }
.menu-side-list .side-link.active{
  background: linear-gradient(90deg, rgba(236,32,35,.08), rgba(236,32,35,0));
  color: var(--primary);
  font-weight: 700;
  position: relative;
}
.menu-side-list .side-link.active::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--primary); margin-right:2px;
}

/* Section headers */
.section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.section-title{
  font-size: 1.5rem; font-weight: 800; margin:0; color: var(--dark);
}
.section-actions .btn{ border-radius: 10px; }

/* Featured horizontal strip */
.featured-strip{
  display:grid; grid-auto-flow: column; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem 0 .5rem;
}
.featured-strip::-webkit-scrollbar{ height:8px; }
.featured-strip::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:8px; }

.feat-card{
  width: 230px; min-width: 230px;
  background:#fff; border:1px solid #ededed; border-radius: 14px;
  scroll-snap-align: start; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: #e9e9e9;
}
.feat-img{ position: relative; width:100%; height:140px; overflow:hidden; background:#fff; }
.feat-img img{ width:100%; height:100%; object-fit: contain; display:block; }
.btn-feat-add{
  position:absolute; right:.6rem; bottom:.6rem;
  background: var(--primary); color:#fff; border:0; width:34px; height:34px; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px;
}
.btn-feat-add:hover{ background: var(--primary-hover); }

.feat-meta{ padding:.65rem .75rem .75rem; }
.feat-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feat-price{ color:#151515; font-weight:700; }

/* List/selection cards (Cheezious list pattern) */
.pick-card, .menu-list-card{
  display:block;
  border:1px solid #ededed; border-radius: 14px; background:#fff; padding:.85rem .9rem; position:relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pick-card:hover, .menu-list-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border-color:#e9e9e9;
}
.pick-img{
  width: 96px; height: 96px; flex: 0 0 96px;
  object-fit: contain; border-radius: 12px; background:#fff;
  border: 1px solid #f1f1f1;
}
.pick-add{
  position:absolute; right:.7rem; bottom:.7rem;
}
.btn-add{
  background: var(--primary); color:#fff; border:0; width:36px; height:36px; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px;
}
.btn-add:hover{ background: var(--primary-hover); }

.two-lines{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted);
}

/* Search */
.search-wrap{ min-width: 260px; }
.search-wrap .form-control{
  border-radius: 999px; padding:.5rem .9rem;
}

/* Layout responsiveness */
@media (max-width: 991.98px){
  .menu-sidebar{ display:none; }
  .feat-card{ width:200px; min-width:200px; }
  .pick-img{ width:82px; height:82px; flex-basis:82px; }
}
@media (max-width: 575.98px){
  .pick-add{ position: static; margin-top:.5rem; text-align:right; }
}



/* ======= Category chips row ======= */
:root{ --header-h: 80px; } /* pick your real header height */

header.top-0 .navbar{
  height: var(--header-h);
  min-height: 0;                 /* avoid double height */
}
header.top-0 .container-fluid{
  padding-top: 0; 
  padding-bottom: 0;             /* kill vertical padding that changes height */
}

/* Make the entire chips section sticky */
.chipsMenu{
  position: sticky;
  top: 100px;    /* it stays under the sticky header */
  z-index: 1;
  background: #fff;        /* no color change on scroll */
}

/* chipsRow-wrap no longer needs sticky */
.chipsRow-wrap{
  position: relative;        /* was: sticky */
              /* remove */
  background: #f6f7f8;
  border-radius: 12px;
  padding: 20px 44px;
  margin-bottom: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  background: #f6f7f8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* Optional: stronger style when page is scrolled past header */


.chipsRow{
  display: flex; gap: 12px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.chipsRow::-webkit-scrollbar{ display: none; }

.chip{
  flex: 0 0 auto;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  padding: .6rem 1rem;
  font-weight: 800;
  color: var(--dark);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.chip:hover{ border-color: #eee; transform: translateY(-1px); }
.chip.active{
  background: var(--primary);             /* Cheezious yellow tab */
  color: white;
  /* border-color: #FFD400; */
}

/* arrows */
.chipsArrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--primary);
  border: 2px solid rgba(236,32,35,.25);
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
  display: grid; place-items: center;
}
.chipsArrow--left{ left: 6px; }
.chipsArrow--right{ right: 6px; }
.chipsArrow:hover{ background: var(--primary); color: #fff; }

/* ======= Category panels & items ======= */
.catPanel{ display: none; }
.catPanel.show{ display: block; }

.catTitle{
  font-weight: 800; color: var(--dark); margin: 10px 0 12px;
}

.itemsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 768px){
  .itemsGrid{ grid-template-columns: 1fr; }
}

/* item card */
.itemCard{
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.itemCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
@media (max-width: 520px){
  .itemCard{ grid-template-columns: 120px 1fr; }
}

.itemMedia{
  background: #fff; border: 1px solid #f1f1f1;
  border-radius: 12px; display:grid; place-items:center;
}
.itemMedia img{ width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.itemBody{ display:flex; flex-direction: column; }
.itemName{ font-size: 1rem; font-weight: 800; margin: 2px 0 4px; color: var(--dark); }
.itemDesc{
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 0 8px;
}

.itemFoot{
  margin-top: auto;
  display:flex; align-items: center; justify-content: space-between; gap: 10px;
}
.itemPrice{
  font-weight: 800; color: var(--primary);
  background: rgba(236,32,35,.08); border-radius: 999px; padding: 4px 10px;
}
.itemAdd{
  width: 38px; height: 38px; border: 0; border-radius: 999px;
  display:grid; place-items:center; color: #fff; background: var(--primary);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(236,32,35,.25);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.itemAdd:hover{
  background: var(--primary-hover); transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(236,32,35,.3);
}





/* menu  */

/* ===== Brand tokens (tweak as you like) ===== */
:root{
  --primary:#EC2023; --primary-hover:#c71a1d;
  --dark:#121212; --muted:#6b7280;
  --card-radius:16px;
  --soft:0 10px 24px rgba(0,0,0,.06);
  --soft-lg:0 18px 40px rgba(0,0,0,.10);
}

/* Grid */
.menuGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
@media (max-width:992px){ .menuGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:576px){ .menuGrid{ grid-template-columns:1fr; } }

/* Card */
.menuCard{
  position:relative; background:#fff; border-radius:var(--card-radius);
  border:1px solid #f0f1f3; box-shadow:var(--soft); overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.menuCard:hover{ transform:translateY(-6px); box-shadow:var(--soft-lg); }

.menuCard__top{ position:relative; padding:18px 18px 0; background:linear-gradient(180deg,rgba(236,32,35,.06),rgba(236,32,35,0) 60%); }
.menuCard__notches{ position:absolute; top:10px; left:18px; display:grid; grid-auto-flow:column; gap:6px; }
.menuCard__notch{ width:14px; height:10px; border-radius:4px 4px 2px 2px; background:var(--primary); box-shadow:0 2px 6px rgba(236,32,35,.35); }

.menuCard__figure{ position:relative; height:170px; display:grid; place-items:end center; }
.menuCard__img{ max-width:88%; max-height:170px; object-fit:contain; transform:translateY(12px); filter:drop-shadow(0 18px 18px rgba(0,0,0,.10)); transition:transform .25s; }
.menuCard:hover .menuCard__img{ transform:translateY(4px) scale(1.04); }
.menuCard__shadow{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:72%; height:16px; border-radius:999px; background:radial-gradient(closest-side,rgba(0,0,0,.25),rgba(0,0,0,0)); opacity:.25; pointer-events:none; }

.priceRibbon{
  position:absolute; right:-8px; top:26px; background:var(--primary); color:#fff;
  font-weight:800; padding:6px 14px 6px 18px; font-size:.95rem; border-radius:4px 0 0 4px;
  box-shadow:0 6px 16px rgba(236,32,35,.35);
}
.priceRibbon::before{ content:""; position:absolute; left:-10px; top:0; bottom:0; width:12px; background:var(--primary); clip-path:polygon(100% 0,0 50%,100% 100%); }

.menuCard__body{ padding:14px 18px 16px; }
.menuCard__name{ font-weight:900; color:var(--dark); margin:2px 0 6px; font-size:1.05rem; }
.menuCard__desc{ color:var(--muted); font-size:.93rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.menuCard__foot{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge-pill{ padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700; background:#f3f4f6; color:#374151; border:1px solid #eceff2; }
.badge-pill--accent{ background:rgba(236,32,35,.08); color:var(--primary); border-color:rgba(236,32,35,.18); }

.btnAdd{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; min-width:44px; padding:0 14px; border-radius:999px; border:0;
  background:var(--primary); color:#fff; font-weight:800; text-decoration:none;
  box-shadow:0 10px 22px rgba(236,32,35,.30); transition:transform .18s, box-shadow .18s, background .18s;
}
.btnAdd i{ font-size:18px; margin-left:6px; }
.btnAdd:hover{ background:var(--primary-hover); transform:translateY(-2px); box-shadow:0 14px 28px rgba(236,32,35,.34); }





/* Search suggestions */
.search-wrap { position: relative; max-width: 360px; }
.search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 30; background: #fff; border: 1px solid #e5e7eb;
  border-radius: .5rem; box-shadow: 0 10px 25px rgba(0,0,0,.08);
  max-height: 280px; overflow: auto; margin-top: .25rem;
}

.search-result {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; cursor: pointer;
}
.search-result:hover, .search-result.is-active { background: #f8fafc; }

.search-result__img {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: cover; border-radius: .4rem;
  border: 1px solid #eee;
}
.search-result__name {
  font-size: .9rem; line-height: 1.2; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}




.modeToggle {
  background: #fff;
  padding: 4px;
  gap: 4px;
}
.modeToggle-btn {
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  transition: background .2s, color .2s, transform .1s;
  white-space: nowrap;
}
.modeToggle-btn:hover { transform: translateY(-1px); }
.modeToggle-btn.is-active {
  background: #EC2023;      /* your primary */
  color: #fff;
}