/* ============================================================
   Canteen — MENU PAGE styles (menu.css)
   Loaded after canteen.css. Reuses brand tokens + .wrap/.btn/.kicker.
   A QR-scanned counter menu: fast, phone-first, photo-forward.
   Signature: every item is a photo card with a gold "price stamp"
   pinned to the image corner; a sticky ink header with a touch-
   scroll category rail; per-category headers with a tabular index.
   Built with logical props for clean RTL mirroring.
   ============================================================ */

.menu-body{
  background:var(--c-paper);
  min-block-size:100svh;
  padding-block-end:calc(env(safe-area-inset-bottom) + 3.5rem);
}

/* ---------- Sticky header ----------------------------------- */
.menu-header{
  position:sticky;inset-block-start:0;z-index:50;
  background:var(--c-ink);color:var(--c-paper);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}
.menu-bar{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem var(--gutter);
  padding-block-start:calc(.7rem + env(safe-area-inset-top));
  max-inline-size:var(--maxw);margin-inline:auto;
}
.menu-home{
  display:inline-flex;align-items:center;gap:.6rem;flex:1 1 auto;min-inline-size:0;
}
.menu-home .brand-chip{box-shadow:0 4px 14px -6px rgba(0,0,0,.7);}
.menu-titles{display:flex;flex-direction:column;gap:.1rem;min-inline-size:0;}
.menu-eyebrow{
  font-family:var(--ff-en);font-weight:600;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-gold);line-height:1;
}
html[lang="ar"] .menu-eyebrow{letter-spacing:.04em;}
.menu-wordmark{
  font-weight:700;font-size:1.18rem;letter-spacing:-.01em;line-height:1.1;
  color:var(--c-paper);
}
/* header lang toggle: not the floating fixed one — sits inline, same look */
.menu-lang{
  position:static;flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;
  padding:.34rem .62rem;border-radius:999px;border:1px solid rgba(247,239,226,.32);
  background:rgba(247,239,226,.06);
  color:var(--c-paper);font-family:var(--ff-en);font-weight:600;font-size:.82rem;line-height:1;
  cursor:pointer;transition:background .18s ease,color .18s ease;
}
.menu-lang .lang-flag{
  inline-size:20px;block-size:14px;flex:0 0 auto;border-radius:2px;object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.3);
}
.menu-lang:hover{background:var(--c-gold);color:var(--c-ink);border-color:transparent;}

/* ---------- Category rail (horizontal scroll chips) --------- */
.cat-rail{
  display:flex;gap:.5rem;overflow-x:auto;scroll-behavior:smooth;
  padding:.15rem var(--gutter) .8rem;
  max-inline-size:var(--maxw);margin-inline:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cat-rail::-webkit-scrollbar{display:none;}
.cat-chip{
  flex:0 0 auto;cursor:pointer;
  font-family:var(--ff-en);font-weight:600;font-size:.9rem;line-height:1;
  padding:.6rem 1.05rem;border-radius:999px;
  border:1px solid rgba(247,239,226,.28);
  background:transparent;color:rgba(247,239,226,.82);
  white-space:nowrap;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
html[lang="ar"] .cat-chip{font-family:var(--ff-ar);font-size:.96rem;}
.cat-chip:hover{border-color:var(--c-gold);color:var(--c-paper);}
.cat-chip[aria-current="true"]{
  background:var(--c-gold);color:var(--c-ink);border-color:var(--c-gold);
}

/* ---------- Main / category sections ----------------------- */
.menu-main{max-inline-size:1100px;margin-inline:auto;padding-inline:var(--gutter);}

.cat-block{padding-block-start:clamp(2.2rem,7vw,3.2rem);scroll-margin-block-start:128px;}
.cat-block:first-child{padding-block-start:clamp(1.6rem,5vw,2.4rem);}

.cat-head{
  display:flex;align-items:baseline;gap:.85rem;
  margin-block-end:1.1rem;
  padding-block-end:.85rem;border-block-end:2px solid var(--c-ink);
}
.cat-index{
  font-family:var(--ff-en);font-weight:700;font-size:.92rem;
  color:var(--c-gold-deep);font-variant-numeric:tabular-nums;
  flex:0 0 auto;letter-spacing:.04em;
}
.cat-name{
  font-weight:700;font-size:clamp(1.5rem,5.5vw,2rem);letter-spacing:-.02em;
  line-height:1;color:var(--c-ink);
}
html[lang="ar"] .cat-name{letter-spacing:0;line-height:1.2;}
.cat-count{
  margin-inline-start:auto;font-family:var(--ff-en);font-weight:500;
  font-size:.78rem;color:var(--c-muted);font-variant-numeric:tabular-nums;
  flex:0 0 auto;align-self:center;
}

/* ---------- Photo cards (signature: gold price stamp on photo) */
.card-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1rem,3.5vw,1.4rem);
  grid-template-columns:1fr;
}
.card{
  display:flex;flex-direction:column;
  background:var(--c-paper);
  border:1px solid rgba(21,17,12,.08);
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(196,134,42,.45);}
  .card:hover .card-img{transform:scale(1.06);}
}

/* photo banner */
.card-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:#0d0a07;
}
.card-img{
  inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .5s ease;
}
.card-media::after{   /* gentle veil so the price stamp always reads */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,10,7,.34),transparent 38%);
}

/* the gold price "stamp" pinned to the photo corner — the signature */
.card-price{
  position:absolute;z-index:2;
  inset-block-end:.7rem;inset-inline-start:.7rem;
  font-family:var(--ff-en);font-weight:700;font-size:1.02rem;line-height:1;
  color:var(--c-ink);font-variant-numeric:tabular-nums;direction:ltr;
  background:var(--c-gold);
  padding:.5rem .8rem;border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(13,10,7,.7);
  white-space:nowrap;
}

/* no-photo fallback tile: ink/gold gradient + glyph keeps the card shape */
.card-fallback{
  position:absolute;inset:0;z-index:1;display:none;
  place-items:center;font-size:2.6rem;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(224,163,60,.22), transparent 62%),
    #141009;
}
.card.is-nophoto .card-media::after{display:none;}
.card.is-nophoto .card-fallback{display:grid;}

/* ---------- Unavailable item (shown, but clearly out of stock) ---- */
/* Photo is desaturated + dimmed, the card loses its lift, and an ink
   "Unavailable" badge sits opposite the gold price stamp. Price stays
   readable so customers still know what it would cost. */
.card.is-unavailable{
  opacity:.78;
  border-color:rgba(21,17,12,.1);
  box-shadow:var(--shadow-soft);
}
.card.is-unavailable .card-img{
  filter:grayscale(1) brightness(.82);
}
.card.is-unavailable .card-media::before{   /* extra cool veil over the photo */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(13,10,7,.28);
}
.card.is-unavailable .card-name,
.card.is-unavailable .card-desc{color:var(--c-muted);}
/* kill the hover lift / zoom for sold-out cards */
@media (hover:hover){
  .card.is-unavailable:hover{transform:none;box-shadow:var(--shadow-soft);border-color:rgba(21,17,12,.1);}
  .card.is-unavailable:hover .card-img{transform:none;}
}
/* the badge — ink chip, pinned opposite the gold price stamp */
.card-badge{
  position:absolute;z-index:3;
  inset-block-start:.7rem;inset-inline-end:.7rem;
  font-family:var(--ff-en);font-weight:700;font-size:.72rem;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-paper);background:rgba(13,10,7,.82);
  padding:.42rem .7rem;border-radius:999px;
  border:1px solid rgba(247,239,226,.28);
  box-shadow:0 8px 20px -10px rgba(13,10,7,.8);
  white-space:nowrap;backdrop-filter:saturate(.6) blur(2px);
}
html[lang="ar"] .card-badge{
  font-family:var(--ff-ar);font-size:.78rem;letter-spacing:0;text-transform:none;
}

/* card body */
.card-body{
  padding:.95rem 1.05rem 1.15rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.card-name{
  font-weight:600;font-size:1.12rem;line-height:1.25;color:var(--c-ink);
}
html[lang="ar"] .card-name{font-size:1.18rem;line-height:1.4;}
.card-desc{
  font-size:.9rem;line-height:1.45;color:var(--c-muted);
}

/* ---------- Skeleton (loading) ----------------------------- */
.skel-block{padding-block-start:2rem;}
.skel-head{
  block-size:1.8rem;inline-size:48%;border-radius:6px;margin-block-end:1.2rem;
}
.skel-card{
  border:1px solid rgba(21,17,12,.08);border-radius:var(--r);overflow:hidden;
  background:var(--c-paper);
}
.skel-photo{aspect-ratio:4/3;}
.skel-body{padding:.95rem 1.05rem 1.15rem;}
.skel-line{block-size:1.1rem;border-radius:6px;}
.skel-line.w1{inline-size:62%;}
.skel-line.w2{inline-size:42%;}
.shimmer{
  background:linear-gradient(100deg,rgba(21,17,12,.06) 30%,rgba(21,17,12,.12) 50%,rgba(21,17,12,.06) 70%);
  background-size:200% 100%;animation:shimmer 1.25s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- Empty / error state ---------------------------- */
.menu-state{
  text-align:center;padding-block:clamp(4rem,16vw,7rem);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.menu-state-mark{font-size:2.4rem;}
.menu-state-title{font-weight:700;font-size:1.35rem;color:var(--c-ink);}
.menu-state-body{font-size:1rem;color:var(--c-muted);max-inline-size:34ch;line-height:1.55;}
.menu-state .btn{margin-block-start:.4rem;}

/* ---------- Back-to-home footer link ----------------------- */
.menu-foot{
  text-align:center;padding-block:2.4rem 1rem;
}
.menu-back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-en);font-weight:600;font-size:.95rem;color:var(--c-muted);
  transition:color .16s ease;
}
html[lang="ar"] .menu-back{font-family:var(--ff-ar);}
.menu-back:hover{color:var(--c-gold-deep);}
.menu-back .arrow{transition:transform .16s ease;}
.menu-back:hover .arrow{transform:translateX(-3px);}
html[dir="rtl"] .menu-back:hover .arrow{transform:translateX(3px);}

/* ---------- Responsive bump ------------------------------- */
@media (min-width:560px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:960px){
  .card-grid{grid-template-columns:repeat(3,1fr);}
  .card-price{font-size:1.1rem;}
}

@media (prefers-reduced-motion:reduce){
  .shimmer{animation:none;}
  .cat-rail{scroll-behavior:auto;}
}