/* محرّك واجهة: الشكل المشترك (المنيو والسلة والشيتات وشريط البيع).
 * الألوان والخطوط من متغيرات الموقع: --accent --accent-deep --ink --paper --surface --line --muted --field-line
 * --badge (ملصق الموسمي) --sale-bg --sale-dot --head-h (ارتفاع الهيدر) --r --body --num.
 * الموقع بيقدر يغيّر أي قاعدة بعد هالملف. ⛔ ما في لون محل هون. */
:root{--surface:#fff;--on-accent:#fff;--head-h:61px;--tabs-h:63px;--r:6px}
/* --head-h = ارتفاع الهيدر اللاصق مع حدّه بالضبط، وإلا التبويبات بتركب عليه */
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.num{font-family:var(--num);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* شريط البيع */
.sale{display:block;background:var(--sale-bg);color:var(--ink);text-decoration:none;overflow:hidden;white-space:nowrap;font-weight:700;font-size:14px;height:34px;line-height:34px;position:relative;z-index:60}
.sale-track{display:inline-flex;animation:tick 26s linear infinite}
.sale-track span{padding-inline:22px;display:inline-flex;gap:10px;align-items:center}
.sale-track span::after{content:"";width:7px;height:7px;background:var(--sale-dot);transform:rotate(45deg);margin-inline-start:22px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* الأزرار الأساسية */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r);padding:14px 20px;font-weight:800;font-size:17px;text-decoration:none;min-height:52px}
.btn svg{width:22px;height:22px;flex:none}
.btn-red{background:var(--accent);color:var(--on-accent)}
.tag-en{font-family:var(--num);font-size:18px;letter-spacing:.08em;color:var(--accent)}
/* المنيو */
.tabs{position:sticky;top:var(--head-h);z-index:40;background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:8px 14px;font-weight:800;font-size:15px;text-decoration:none;display:inline-flex;gap:8px;align-items:baseline}
.tab small{font-family:var(--num);font-size:15px;color:var(--muted);letter-spacing:.05em}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tab.on small{color:rgba(255,255,255,.8)}
.cat{margin-bottom:46px;scroll-margin-top:calc(var(--head-h) + var(--tabs-h) + 10px)}
.cat-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.cat-head h3{font-family:var(--head);font-size:30px;margin:0;line-height:1.2}
.cat-head .tag-en{font-size:20px}
.grid{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px}
.grid.n2 .card{flex-direction:row}
.grid.n2 .card .ph{width:48%;flex:none;aspect-ratio:1}
.grid.n2 .card .bd{padding:20px 22px}
.grid.n2 .card .en{font-size:34px}
.grid.n2 .card .ar{font-size:17px}
.grid.n2 .card .ds{font-size:14px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.card .ph{aspect-ratio:1;background:var(--paper)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.card .en{font-family:var(--num);font-size:24px;line-height:1;letter-spacing:.03em}
.card .ar{font-weight:800;font-size:15px}
.card .ds{font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}
.card .ft{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;gap:8px}
.price{font-family:var(--num);font-size:28px;line-height:1;color:var(--accent)}
.price small{font-family:var(--body);font-size:12px;color:var(--muted);margin-inline-start:4px;font-weight:700}
.add{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r);padding:9px 12px;font-weight:800;font-size:14px;min-height:40px}
.add svg{width:16px;height:16px}
.seasonal{position:absolute;top:12px;inset-inline-start:-4px;background:var(--badge);font-family:var(--num);font-size:17px;letter-spacing:.04em;padding:3px 12px 1px;transform:rotate(-4deg);box-shadow:0 2px 0 rgba(20,20,20,.12);z-index:2}
.wide-box{grid-column:1/-1;border:2px solid var(--accent);border-radius:var(--r);background:var(--surface);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wide-box .en{font-family:var(--num);font-size:30px;color:var(--accent);line-height:1}
.wide-box p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.extras{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.extras>div{padding:14px 16px;border-inline-start:1px solid var(--line)}
.extras>div:first-child{border-inline-start:0}
.extras h4{margin:0 0 6px;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.extras h4 .tag-en{font-size:15px}
.extras ul{list-style:none;margin:0;padding:0;font-size:14px}
.extras li{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line)}
.extras li:last-child{border-bottom:0}
@media (max-width:1000px){.grid:not(.n2){grid-template-columns:repeat(3,1fr)}.grid.n2 .card{flex-direction:column}.grid.n2 .card .ph{width:auto}}
@media (max-width:720px){
  .grid,.grid:not(.n2){grid-template-columns:repeat(2,1fr);gap:10px}
  .grid.n2 .card .bd{padding:10px 10px 12px}.grid.n2 .card .en{font-size:21px}.grid.n2 .card .ar{font-size:15px}
  .card.solo{grid-column:1/-1;flex-direction:row}
  .card.solo .ph{width:50%;flex:none}
  .card.solo .ds{display:block}
  .card .bd{padding:10px 10px 12px}
  .card .en{font-size:21px}
  .card .ds{display:none}
  .price{font-size:24px}
  .add{padding:8px 10px}
  .add span{display:none}
  .extras{grid-template-columns:1fr}
  .extras>div{border-inline-start:0;border-top:1px solid var(--line)}
  .extras>div:first-child{border-top:0}
}
/* شريط السلة */
.cartbar{position:fixed;z-index:70;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:560px;margin-inline:auto;background:var(--ink);color:var(--on-ink,#fff);border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 10px;box-shadow:0 10px 30px rgba(20,20,20,.28);transform:translateY(140%);visibility:hidden;transition:transform .35s,visibility 0s .35s}
.cartbar.show{transform:none;visibility:visible;transition:transform .35s}
.cartbar .sum{display:flex;flex-direction:column;line-height:1.25;padding-inline-start:6px}
.cartbar .sum small{color:rgba(255,255,255,.7);font-size:13px}
.cartbar .sum .num{font-size:24px}
.cartbar .btn{min-height:46px;padding:10px 16px;font-size:16px}
/* الشيت */
.sheet{position:fixed;inset:0;z-index:90;display:none}
.sheet.open{display:block}
.sheet .dim{position:absolute;inset:0;background:rgba(20,20,20,.5)}
.sheet .panel{position:absolute;inset-inline:0;bottom:0;max-height:92svh;overflow-y:auto;overflow-x:hidden;background:var(--surface);border-radius:var(--r) var(--r) 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-width:620px;margin-inline:auto;animation:up .28s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:720px){.sheet .panel{bottom:auto;top:50%;transform:translateY(-50%);border-radius:var(--r);animation:none}}
.panel-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.panel-head img{width:84px;height:84px;border-radius:var(--r);object-fit:cover;background:var(--paper)}
.panel-head .en{font-family:var(--num);font-size:28px;line-height:1}
.panel-head .ar{font-weight:800}
.x{margin-inline-start:auto;align-self:flex-start;border:0;background:var(--paper);width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center}
.x svg{width:18px;height:18px}
.og{border-top:1px solid var(--line);padding:12px 0}
.og h5{margin:0 0 6px;font-size:15px;display:flex;justify-content:space-between}
.og h5 .tag-en{font-size:15px}
.opt{display:flex;align-items:center;gap:10px;padding:9px 0;font-weight:700;font-size:15px;cursor:pointer}
.opt input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.opt .num{margin-inline-start:auto;color:var(--muted);font-size:18px}
.opt img{width:36px;height:36px;border-radius:4px;object-fit:cover}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r)}
.qty button{border:0;background:none;width:40px;height:42px;display:grid;place-items:center}
.qty button svg{width:16px;height:16px}
.qty b{min-width:26px;text-align:center;font-family:var(--num);font-size:22px}
.panel-foot{display:flex;gap:10px;align-items:center;margin-top:14px;position:sticky;bottom:-18px;background:var(--surface);padding:10px 0 0}
.panel-foot .btn{flex:1}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.line img{width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--paper)}
.line .t{font-weight:800;font-size:15px;line-height:1.35}
.line .o{font-size:13px;color:var(--muted)}
.line .p{font-family:var(--num);font-size:20px;color:var(--accent)}
.field{display:block;margin:10px 0}
.field span{display:block;font-weight:800;font-size:14px;margin-bottom:4px}
.field input,.field textarea{width:100%;border:1px solid var(--field-line);border-radius:var(--r);padding:11px 12px;font:inherit;font-size:16px;background:var(--surface);min-height:46px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative;overflow:hidden;border:1px solid var(--field-line);border-radius:var(--r);padding:11px;text-align:center;font-weight:800;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.seg label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:2px solid var(--ink);margin-top:6px;font-weight:800}
.total .num{font-size:30px}
.note{font-size:13px;color:var(--muted);margin:6px 0 0}
.empty{text-align:center;padding:30px 0;color:var(--muted)}
@media (hover:hover){
  .add:hover,.btn-red:hover{background:var(--accent-deep)}
  .tab:hover{border-color:var(--accent)}
}