:root{--red:#ef233c;--red2:#ff4d5a;--bg:#09060b;--panel:#211f36;--panel2:#2a2842;--line:#3c3a55;--text:#fff;--muted:#9b98ad;--gold:#ffc928;--green:#21c47b;--warning:#ffd75a;--danger:#ff5c70;--radius:20px;--maxs-transition:.22s;--maxs-hover-scale:1.02;--maxs-shadow:0 8px 22px rgba(0,0,0,.25)}
  :root{--c-header-bg:var(--bg);--c-header-text:var(--text);--c-header-sub:var(--muted);
  --c-tabs-bg:var(--bg);--c-tab-bg:var(--panel);--c-tab-text:var(--muted);--c-tab-border:var(--line);--c-tab-active-bg:var(--red);--c-tab-active-text:#fff;
  --c-section-title:var(--text);--c-section-line:var(--red);
  --c-card-bg:var(--panel2);--c-card-bg2:var(--panel);--c-card-border:var(--line);
  --c-item-name:var(--text);--c-item-desc:var(--muted);--c-price:var(--red2);--c-old-price:var(--muted);--c-item-note:color-mix(in srgb,var(--gold),var(--red2) 30%);
  --c-add-bg:var(--red);--c-add-text:#fff;--c-badge-bg:var(--red);--c-badge-text:#fff;
  --c-btn-bg:var(--red);--c-btn-bg2:var(--red2);--c-btn-text:#fff;
  --c-cart-bg:var(--red);--c-cart-bg2:var(--red2);--c-cart-text:#fff;
  --c-count-bg:var(--gold);--c-count-text:#211700;--c-points-bg:var(--gold);--c-points-text:#201700;
  --c-icon-bg:#f4f4f4;--c-icon-text:#2a2a2a;
  --c-active-bg:color-mix(in srgb,var(--red) 16%,var(--panel2));
  --c-offer-bg:color-mix(in srgb,var(--red) 10%,var(--panel2));--c-offer-bg2:var(--panel);--c-offer-border:color-mix(in srgb,var(--red) 30%,var(--line));--c-offer-price:var(--gold);--c-offer-badge-bg:var(--red);
  --c-notice-bg:color-mix(in srgb,var(--gold) 8%,var(--panel2));--c-notice-border:color-mix(in srgb,var(--gold) 35%,var(--line));
  --c-pending-bg:color-mix(in srgb,var(--warning) 18%,var(--bg));--c-approved-bg:color-mix(in srgb,var(--green) 18%,var(--bg));--c-approved-text:color-mix(in srgb,var(--green),#fff 30%);--c-rejected-bg:color-mix(in srgb,var(--danger) 18%,var(--bg));
  --c-fab-call:#171717;--c-toast-bg:#111;--c-entry-glow:color-mix(in srgb,var(--red) 22%,var(--bg));
  --c-page-glow:color-mix(in srgb,var(--red) 16%,var(--bg));--c-active-text:#fff;--c-active-border:var(--red);--c-order-bg:var(--panel2);--c-order-text:var(--red);--c-order-border:var(--red);--c-chat-bg:var(--red);--c-chat-text:#fff}
  #maxs-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;overflow:hidden}
  #maxs-bg.abs{position:absolute}
  #maxs-bg i{position:absolute;top:0;left:0;right:0;bottom:0;display:block}
  #maxs-bg .img{background-repeat:no-repeat}
  html{background:var(--bg)}
  body{background:transparent!important}
  .card,.tab,.add-btn,.fab,.btn-primary,.btn-secondary{transition:transform var(--maxs-transition) ease,box-shadow var(--maxs-transition) ease,background var(--maxs-transition) ease}
  .card:hover,.btn-primary:active,.btn-secondary:active,.add-btn:active{transform:scale(var(--maxs-hover-scale))}
  .card{box-shadow:var(--maxs-shadow)}
  @keyframes maxsFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes maxsSlideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  body.maxs-anim-fade{animation:maxsFadeIn .5s ease}
  body.maxs-anim-slide{animation:maxsSlideIn .5s ease}
  *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Cairo',sans-serif;background:radial-gradient(circle at 50% 0,var(--c-page-glow) 0,color-mix(in srgb,var(--c-page-glow) 45%,var(--bg)) 34%,var(--bg) 72%);color:var(--text);padding-bottom:92px;min-height:100vh}img{max-width:100%;display:block}button,input,select{font-family:inherit}button{cursor:pointer;border:0;background:none;color:inherit}
  header.top{position:sticky;top:0;z-index:31;background:var(--c-header-bg);color:var(--c-header-text);border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.3);padding:0 14px;height:56px;display:flex;align-items:center}
  header.top.top2{z-index:30;top:56px}
  .top-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand-badge{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--red);border:2px solid var(--gold);box-shadow:0 0 16px rgba(255,201,40,.22);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;transform:translateX(-6px)}.brand-badge img{width:100%;height:100%;object-fit:cover}.brand-name{font-weight:900;font-size:17px;white-space:nowrap}.brand-sub{display:block;color:var(--c-header-sub);font-size:10px;font-weight:600;margin-top:-2px}
  .top-actions{display:flex;align-items:center;gap:8px}.points-pill{background:var(--c-points-bg);color:var(--c-points-text);font-weight:900;font-size:12px;padding:7px 10px;border-radius:999px;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;position:relative}.points-pill.has-discount{box-shadow:0 0 0 2px var(--red),0 6px 16px rgba(239,35,60,.35)}.discount-dot{background:var(--c-badge-bg);color:var(--c-badge-text);font-size:10px;font-weight:900;width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:2px}.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--c-icon-bg);color:var(--c-icon-text);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .search-row{margin:10px 0}.search-row input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--c-search-text,var(--text));border-radius:15px;padding:10px 14px;font-size:13px;outline:none}.search-row input::placeholder{color:var(--muted)}.search-row input:focus{border-color:var(--gold)}
  .rating-row{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;flex-wrap:wrap;background:var(--bg);padding:7px 14px;border-bottom:1px solid var(--line)}.rating-row b{color:var(--text)}.stars{color:var(--gold)}
  .tabs{display:flex;gap:8px;overflow-x:auto;padding:8px 14px;background:var(--c-tabs-bg);border-bottom:1px solid var(--line);position:sticky;top:112px;z-index:29;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap;padding:8px 14px;border:1px solid var(--c-tab-border);border-radius:999px;background:var(--c-tab-bg);color:var(--c-tab-text);font-weight:800;font-size:12px;flex-shrink:0}.tab.active{background:var(--c-tab-active-bg);border-color:var(--c-tab-active-bg);color:var(--c-tab-active-text);box-shadow:0 5px 18px color-mix(in srgb,var(--c-tab-active-bg) 28%,transparent)}
  main{padding:12px 14px 24px;max-width:760px;margin:auto}.section-title{font-size:20px;font-weight:900;margin:14px 3px 12px;color:var(--c-section-title)}.section-title:after{content:'';display:block;width:54px;height:3px;background:var(--c-section-line);border-radius:4px;margin-top:5px}
  .card{background:linear-gradient(135deg,var(--c-card-bg),var(--c-card-bg2));border:1px solid var(--c-card-border);border-radius:var(--radius);box-shadow:0 8px 22px rgba(0,0,0,.25);padding:12px;display:flex;gap:12px;margin-bottom:12px;position:relative;overflow:hidden;min-height:110px}.card .info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}.card h3{font-size:15px;font-weight:900;color:var(--c-item-name)}.card p{font-size:11.5px;color:var(--c-item-desc);line-height:1.5}.card .price-row{display:flex;align-items:center;gap:8px;margin-top:3px}.price{color:var(--c-price);font-weight:900;font-size:15px}.old-price{color:var(--c-old-price);text-decoration:line-through;font-size:11.5px}.card .thumb{width:112px;height:88px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--panel2);position:relative;order:-1}.thumb img{width:100%;height:100%;object-fit:cover}.thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--panel2)}.add-btn{position:absolute;bottom:8px;left:8px;width:34px;height:34px;border-radius:50%;background:var(--c-add-bg);color:var(--c-add-text);font-size:21px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px color-mix(in srgb,var(--c-add-bg) 30%,transparent)}.off-badge{position:absolute;top:8px;right:8px;background:var(--c-badge-bg);color:var(--c-badge-text);font-size:10px;font-weight:900;padding:4px 8px;border-radius:8px}
  .fab-stack{position:fixed;left:8px;bottom:92px;display:flex;flex-direction:column;gap:6px;z-index:40}.fab{width:40px;height:40px;border-radius:50%;box-shadow:0 7px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;border:1px solid rgba(255,255,255,.06)}.fab-call{background:var(--c-fab-call)}.fab-chat{background:var(--c-add-bg)}.fab-track{background:var(--panel2)}
  .cart-bar{position:fixed;bottom:12px;left:14px;right:14px;max-width:760px;margin:auto;background:linear-gradient(90deg,var(--c-cart-bg),var(--c-cart-bg2));color:var(--c-cart-text);border-radius:17px;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;font-weight:900;box-shadow:0 8px 25px color-mix(in srgb,var(--c-cart-bg) 35%,transparent);z-index:35}.cart-bar span.count{background:var(--c-count-bg);color:var(--c-count-text);border-radius:50%;width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-left:7px}
/* ---- Menu promo popup (one per day) ---- */
.promo-ov{position:fixed;inset:0;background:color-mix(in srgb,var(--c-promo-ov,#000) 72%,transparent);z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;animation:promoFade .25s ease}
.promo-ov.hidden{display:none}
.promo-card{position:relative;width:100%;max-width:380px;background:linear-gradient(160deg,var(--panel2),var(--panel));color:var(--text);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.55);animation:promoPop .28s cubic-bezier(.2,.9,.3,1.2)}
.promo-x{position:absolute;top:10px;inset-inline-start:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;font-size:20px;font-weight:900;cursor:pointer;z-index:2;line-height:1}
.promo-img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;background:var(--panel)}
.promo-body{padding:14px 16px 16px;text-align:right}
.promo-badge{display:inline-block;background:var(--c-promo-badge-bg,var(--gold));color:var(--c-promo-badge-text,#211700);font-size:12px;font-weight:900;border-radius:999px;padding:3px 11px;margin-bottom:8px}
.promo-body h3{margin:0 0 6px;font-size:21px;font-weight:900}
.promo-body p{margin:0 0 10px;color:var(--muted);font-size:13.5px;line-height:1.6}
.promo-price{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.promo-price b{color:var(--c-price,var(--red2));font-size:24px;font-weight:900}
.promo-price s{color:var(--muted);font-size:14px}
.promo-cta{width:100%;border:0;border-radius:999px;padding:13px;font-size:16px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--c-promo-cta-bg,var(--red)),var(--c-promo-cta-bg2,var(--red2)));color:var(--c-promo-cta-text,#fff);box-shadow:0 8px 20px rgba(239,35,60,.35)}
.promo-skip{display:block;width:100%;margin-top:8px;border:0;background:none;color:var(--muted);font-size:13px;padding:8px;cursor:pointer}
@keyframes promoFade{from{opacity:0}to{opacity:1}}
@keyframes promoPop{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50;display:flex;align-items:flex-end;justify-content:center}.overlay.hidden{display:none}.sheet{background:var(--c-sheet-bg,var(--panel));color:var(--c-sheet-text,var(--text));width:100%;max-width:760px;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:25px 25px 0 0;max-height:92vh;overflow-y:auto;padding:18px 16px 24px;animation:up .22s ease}@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.sheet-head h2{font-size:19px;font-weight:900}.close-x{width:42px;height:42px;border-radius:50%;background:var(--panel2);color:var(--c-small-btn-text,var(--muted));font-size:22px}.field{margin-bottom:13px}.field label{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:6px}.field textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-size:14px;font-family:inherit;background:var(--panel2);color:var(--c-field-text,var(--text));outline:none;resize:none;min-height:64px}.field textarea:focus{border-color:var(--gold)}.field input,.field select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-size:14px;background:var(--panel2);color:var(--c-field-text,var(--text));outline:none}.field input:focus,.field select:focus{border-color:var(--gold)}.radio-group{display:flex;gap:10px}.radio-opt{flex:1;text-align:center;padding:14px;border-radius:15px;border:2px solid var(--line);background:var(--panel2);font-weight:900;font-size:14px}.radio-opt.active{background:var(--c-active-bg);color:var(--c-active-text);border-color:var(--c-active-border)}.btn-primary{width:100%;background:linear-gradient(90deg,var(--c-btn-bg),var(--c-btn-bg2));color:var(--c-btn-text);padding:15px;border-radius:15px;font-weight:900;font-size:16px;margin-top:6px;box-shadow:0 7px 20px color-mix(in srgb,var(--c-btn-bg) 25%,transparent)}.btn-primary:disabled{opacity:.5}.btn-secondary{width:100%;background:var(--panel2);color:var(--c-small-btn-text,var(--text));border:1px solid var(--line);padding:13px;border-radius:14px;font-weight:800;font-size:14px;margin-top:8px}.hint{font-size:12px;color:var(--muted);margin-top:6px}.cart-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.cart-line .name{font-weight:800;font-size:14px}.qty-ctrl{display:flex;align-items:center;gap:10px}.qty-ctrl button{width:29px;height:29px;border-radius:50%;background:var(--panel2);color:var(--c-small-btn-text,inherit);font-weight:900}.sum-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;color:var(--muted)}.sum-row.total{color:var(--text);font-weight:900;font-size:17px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}.discount-opt{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:9px;font-weight:800;font-size:13px;background:var(--panel2)}.discount-opt .opt-head{display:flex;align-items:center;justify-content:space-between}.discount-opt.active{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--panel2))}.discount-opt.disabled{opacity:.45;pointer-events:none}.radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0}.discount-opt.active .radio-dot{border-color:var(--gold);background:radial-gradient(var(--gold) 0 40%,transparent 45%)}.points-slider{margin-top:12px}.points-slider input[type=range]{width:100%;accent-color:var(--gold)}.points-slider .val{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}.points-slider .val b{color:var(--text)}.chat-box{height:340px;display:flex;flex-direction:column}.chat-msgs{flex:1;overflow-y:auto;padding:6px 2px;display:flex;flex-direction:column;gap:8px}.msg{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5}.msg.me{align-self:flex-end;background:var(--c-chat-bg);color:var(--c-chat-text)}.msg.them{align-self:flex-start;background:var(--panel2)}.chat-input{display:flex;gap:8px;margin-top:10px}.chat-input input{flex:1}.chat-input button{background:var(--red);color:#fff;width:44px;border-radius:12px;font-weight:900}.review-steps{display:flex;flex-direction:column;gap:12px}.review-step{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px}.review-step b{display:block;margin-bottom:4px}.file-drop{border:1.5px dashed var(--c-notice-border);border-radius:14px;padding:16px;text-align:center;font-size:13px;color:var(--muted)}.status-pill{display:inline-block;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:900}.status-pill.pending{background:var(--c-pending-bg);color:var(--warning)}.status-pill.approved{background:var(--c-approved-bg);color:var(--c-approved-text)}.status-pill.rejected{background:var(--c-rejected-bg);color:var(--danger)}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--c-toast-bg);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:800;z-index:60;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1}

  /* MAXS menu flow: customer gate + category/offer navigation */
  .menu-entry{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 0,var(--c-entry-glow) 0,color-mix(in srgb,var(--c-entry-glow) 40%,var(--bg)) 45%,var(--bg) 100%);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}.menu-entry.hidden{display:none}.entry-card{width:min(100%,620px);background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.55);padding:24px 18px 22px}.entry-logo{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 12px;border:3px solid var(--gold);box-shadow:0 0 28px rgba(255,201,40,.25);background:var(--red)}.entry-logo img{width:100%;height:100%;object-fit:cover}.entry-title{text-align:center;font-size:28px;font-weight:900}.entry-sub{text-align:center;color:var(--muted);font-size:14px;margin:2px 0 14px}.hours-box{border:1px solid var(--c-notice-border);color:var(--gold);background:var(--c-notice-bg);border-radius:16px;padding:11px;text-align:center;margin-bottom:18px}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.entry-actions{margin-top:12px}.entry-note{display:none;margin:-5px 0 12px;border:1px solid var(--c-notice-border);border-radius:12px;padding:9px;color:var(--gold);font-size:12px;text-align:center}.entry-note.show{display:block}
  .cart-top{display:flex;align-items:center;gap:7px;background:var(--c-cart-bg);color:var(--c-cart-text);border-radius:999px;padding:9px 13px;font-weight:900;box-shadow:0 6px 18px color-mix(in srgb,var(--c-cart-bg) 28%,transparent);flex-shrink:0}.cart-top .count{background:var(--c-count-bg);color:var(--c-count-text);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
  .offers-strip{display:flex;gap:12px;margin:4px 0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}.offers-strip::-webkit-scrollbar{display:none}.offer-card{flex:0 0 240px;scroll-snap-align:start;background:linear-gradient(135deg,var(--c-offer-bg),var(--c-offer-bg2));border:1px solid var(--c-offer-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}.offer-card img{width:100%;height:110px;object-fit:cover;flex-shrink:0}.offer-body{padding:11px 13px;flex:1}.offer-body h3{font-size:16px;font-weight:900}.offer-body p{font-size:12px;color:var(--muted);margin-top:3px}.offer-price{color:var(--c-offer-price);font-weight:900;margin-top:5px}.offer-badge{display:inline-block;background:var(--c-offer-badge-bg);color:var(--c-badge-text);padding:3px 7px;border-radius:7px;font-size:10px;font-weight:900;margin-bottom:5px}.menu-hidden{display:none!important}
  .tabs.compact{padding-top:8px;padding-bottom:8px}.tabs .tab{transition:.15s}.tabs .tab.offer-tab{border-color:var(--c-offer-border)}.tabs .tab.offer-tab.active{background:var(--c-tab-active-bg);border-color:var(--c-tab-active-bg);color:var(--c-tab-active-text)}
  @media(max-width:600px){.entry-grid{grid-template-columns:1fr}.entry-card{padding:20px 14px}.entry-title{font-size:25px}.cart-top{padding:8px 11px}.brand{margin-inline:auto}.top-row{gap:6px}}

  @media(max-width:430px){.brand-name{font-size:16px}.brand-sub{font-size:9.5px}.points-pill{font-size:11px;padding:6px 9px}.card .thumb{width:98px;height:82px}.section-title{font-size:18px}}
.opt-group{margin-bottom:14px}.opt-group label{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:8px}.opt-grid{display:flex;flex-wrap:wrap;gap:8px}.opt-chip{padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);font-weight:800;font-size:13px}.opt-chip.active{background:var(--c-active-bg);border-color:var(--red);color:#fff}.item-modal-qty{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}.item-modal-qty button{width:38px;height:38px;border-radius:50%;background:var(--c-small-btn-bg,var(--panel2));color:var(--c-small-btn-text,#fff);font-size:18px;font-weight:900}.item-modal-qty span{font-size:18px;font-weight:900;min-width:24px;text-align:center}.item-modal-total{text-align:center;font-size:14px;color:var(--muted);margin-bottom:10px}.item-modal-total b{color:var(--text);font-size:17px}
  .ofc{position:relative;overflow:hidden;direction:ltr;touch-action:pan-y;border-radius:20px;border:1px solid var(--c-offer-border);background:var(--panel);margin:4px 0 16px}.ofc-track{display:flex;transition:transform .5s ease}.ofc-slide{flex:0 0 100%;aspect-ratio:16/10;background:#0006;display:flex;align-items:center;justify-content:center;cursor:zoom-in;position:relative}.ofc-slide img{max-width:100%;max-height:100%;object-fit:contain}.ofc-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(transparent,#000c);font-weight:800;font-size:13px;direction:rtl;text-align:right}.ofc-a{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid #fff3;background:#0009;color:#fff;font-size:20px}.ofc-a.prev{left:8px}.ofc-a.next{right:8px}.ofc.single .ofc-a,.ofc.single .ofc-dots{display:none}.ofc-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px;pointer-events:none}.ofc-dots i{width:7px;height:7px;border-radius:9px;background:#fff6}.ofc-dots i.on{width:18px;background:#fff}
  /* Compact header (was 56px rows): store bar, search/cart/points, rating strip, tabs */
  header.top{height:46px}
  header.top.top2{top:46px}
  .tabs{top:92px;padding:6px 14px}
  .tab{padding:6px 11px;font-size:11px}
  .brand-badge{width:32px;height:32px}
  .brand-name{font-size:15px}
  .brand-sub{font-size:9px}
  .icon-btn{width:32px;height:32px;font-size:15px}
  .search-row input{padding:7px 12px;font-size:12px}
  .cart-top{padding:6px 10px}
  .cart-top .count{width:19px;height:19px;font-size:11px}
  .points-pill{font-size:10.5px;padding:5px 8px}
  .rating-row{padding:4px 14px;font-size:10px}
  #offers-section,[id^="cat-"]{scroll-margin-top:100px}
  /* Responsive: compact on phones, roomier on tablets */
  .ofc{width:88%;margin:4px auto 14px}
  .card h3 span{display:block;font-size:10.5px;color:var(--c-item-note);margin-top:2px}
  @media(max-width:600px){
    .card{padding:9px;gap:9px;min-height:88px;border-radius:calc(var(--radius) - 4px);margin-bottom:9px}
    .card h3{font-size:13px}
    .card p{font-size:10.5px;line-height:1.4}
    .price{font-size:13px}
    .card .thumb{width:80px;height:66px}
    .add-btn{width:28px;height:28px;font-size:18px;bottom:5px;left:5px}
    .section-title{font-size:16px;margin:10px 3px 8px}
    .ofc-cap{font-size:11px;padding:6px 10px}
    .ofc-a{width:26px;height:26px;font-size:16px}
  }
  @media(min-width:601px){
    .ofc{max-width:520px}
    main{max-width:820px}
  }
  @media(max-width:600px){.brand{margin-inline:0}}
.price-row{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
body.branch-closed .order-now-btn,body.branch-closed .add-btn{opacity:.4;filter:grayscale(1)}
  .order-now-btn{background:var(--c-order-bg);color:var(--c-order-text);border:1px solid var(--c-order-border);border-radius:999px;padding:4px 11px;font-size:10.5px;font-weight:800;cursor:pointer;margin-inline-start:auto}
  @media(max-width:360px){html,body{overflow-x:hidden}.card .thumb{width:76px;height:64px}.card h3{font-size:14px}.card p{font-size:11.5px}.card .price-row{flex-wrap:wrap;gap:6px}.tab{padding:8px 11px;font-size:13px}.section-title{font-size:17px}.brand-name{font-size:15px}.points-pill{font-size:10.5px;padding:5px 8px}img{max-width:100%}}
  .tag-hot,.tag-new{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
  .rate{color:var(--gold);font-size:12px;font-weight:800;margin-inline-start:6px;white-space:nowrap}
  .tag-hot{background:var(--red);color:#fff}.tag-new{background:var(--green);color:#06140d}
/* tap anywhere on the card = add / open options */
.card.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}.card.tap:active{transform:scale(.985)}
/* discount badge on the photo + discount banner on top of the menu */
.disc-badge{position:absolute;top:6px;inset-inline-start:6px;z-index:2;background:var(--red);color:#fff;font-size:11px;font-weight:900;padding:3px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none}
.disc-banner{background:linear-gradient(135deg,var(--red),#ff8a3d);color:#fff;border-radius:14px;padding:10px 14px;margin:0 0 12px;font-weight:800;font-size:13.5px;line-height:1.7;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.disc-banner div+div{margin-top:2px}
  .fav{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;color:var(--muted);float:left}.fav.on{color:var(--danger)}
.area-combo{position:relative}.area-list{position:absolute;inset-inline:0;top:100%;z-index:5;max-height:220px;overflow:auto;margin-top:4px;border-radius:12px;border:1px solid var(--line,#ffffff22);background:var(--panel,#1a1a1a);box-shadow:0 10px 30px rgba(0,0,0,.35)}.area-opt,.area-empty{padding:11px 14px;cursor:pointer}.area-opt:hover,.area-opt:active{background:rgba(255,255,255,.1)}.area-empty{opacity:.6;cursor:default}html[data-theme=light] .area-list{background:#fff;color:#222}
.area-search{width:100%;margin:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#ffffff22);background:var(--panel,#1a1a1a);color:var(--text,#fff);font:inherit}

/* Stopped (branch) items / sizes / flavours stay visible but cannot be ordered */
.card.unavail{opacity:.6;filter:grayscale(.85)}
.card.unavail .thumb{position:relative}
.unavail-tag{display:inline-block;background:#fdeaea;color:#a30000;border:1px solid #e4b4b4;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700}
.opt-chip.off{opacity:.5;cursor:not-allowed;pointer-events:none;text-decoration:line-through;text-decoration-thickness:1px}
.opt-chip.off .off-note{text-decoration:none;display:inline-block;color:#a30000;font-weight:700;margin-inline-start:4px}

/* =====================================================================
   LIQUID GLASS (iOS 26 look) — layered on top of the admin theme colours.
   Everything is built from the same --c-* variables, so colours chosen in
   Admin still apply; this block only changes material, depth and motion.
   ===================================================================== */
:root{
  --lg-blur:22px;--lg-blur-soft:14px;
  --lg-rim:rgba(255,255,255,.30);--lg-rim-soft:rgba(255,255,255,.10);
  --lg-hi:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 18px rgba(255,255,255,.04);
  --lg-drop:0 10px 30px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.18);
  --lg-spring:cubic-bezier(.34,1.56,.64,1);--lg-ease:cubic-bezier(.2,.8,.2,1);
}
/* soft colour blobs behind everything so the glass always has something to bend */
body::before{content:'';position:fixed;inset:-10% -10% auto -10%;height:70vh;z-index:-2;pointer-events:none;
  background:radial-gradient(40% 50% at 20% 25%,color-mix(in srgb,var(--red) 38%,transparent),transparent 70%),
             radial-gradient(38% 45% at 85% 40%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 70%);opacity:.75}

/* ---- floating header / tabs / rating strip ---- */
header.top{background:color-mix(in srgb,var(--c-header-bg) 42%,transparent);border-bottom:1px solid var(--lg-rim-soft);box-shadow:var(--lg-hi),0 8px 28px rgba(0,0,0,.28)}
.rating-row{background:color-mix(in srgb,var(--bg) 35%,transparent);border-bottom:1px solid var(--lg-rim-soft)}
.tabs{background:color-mix(in srgb,var(--c-tabs-bg) 30%,transparent);border-bottom:1px solid var(--lg-rim-soft);padding:9px 14px}
.tab{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi);color:var(--text);opacity:.88;padding:8px 15px;
  transition:transform .35s var(--lg-spring),background .3s,opacity .3s,box-shadow .3s}
.tab:active{transform:scale(.93)}
.tab.active,.tabs .tab.offer-tab.active{opacity:1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-tab-active-bg),#fff 22%),var(--c-tab-active-bg));border-color:rgba(255,255,255,.45);
  box-shadow:var(--lg-hi),0 6px 20px color-mix(in srgb,var(--c-tab-active-bg) 45%,transparent);transform:scale(1.04)}
.search-row input{background:var(--c-search-bg,rgba(255,255,255,.08));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi);border-radius:18px}
.icon-btn,.points-pill,.cart-top{box-shadow:var(--lg-hi),0 4px 14px rgba(0,0,0,.25)}

/* ---- section titles ---- */
.section-title{text-shadow:0 2px 14px rgba(0,0,0,.45);letter-spacing:.2px}
.section-title:after{width:64px;height:4px;background:linear-gradient(90deg,var(--c-section-line),transparent);border-radius:6px}

/* ---- cards: glass slab with rim light + sheen ---- */
.card{background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 45%,rgba(255,255,255,.07)),color-mix(in srgb,var(--c-card-bg) 40%,transparent);
  border:1px solid var(--lg-rim-soft);border-radius:24px;padding:11px;gap:12px;margin-bottom:14px;
  box-shadow:var(--lg-hi),var(--lg-drop);
  transition:transform .45s var(--lg-spring),box-shadow .3s,opacity .55s var(--lg-ease),background .3s}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.60),rgba(255,255,255,.06) 32%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude}
.card:hover{transform:none}
.card.tap:active{transform:scale(.965)}
.card .thumb{border-radius:18px;box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.14)}
.card h3{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.card p{opacity:.92}
.price{text-shadow:0 1px 10px color-mix(in srgb,var(--c-price) 35%,transparent)}

/* ---- buttons ---- */
.order-now-btn{background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.05)),color-mix(in srgb,var(--c-order-border) 26%,transparent);
  border:1px solid rgba(255,255,255,.38);color:var(--text);box-shadow:var(--lg-hi),0 4px 12px rgba(0,0,0,.25);padding:6px 14px;font-size:11px;
  transition:transform .35s var(--lg-spring),box-shadow .25s}
.order-now-btn:active{transform:scale(.9)}
.add-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--c-add-bg),#fff 25%),var(--c-add-bg));border:1px solid rgba(255,255,255,.45);box-shadow:var(--lg-hi),0 6px 16px rgba(0,0,0,.35);transition:transform .35s var(--lg-spring)}
.add-btn:active{transform:scale(.88)}
.btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(90deg,var(--c-btn-bg),var(--c-btn-bg2));border:1px solid rgba(255,255,255,.35);box-shadow:var(--lg-hi),0 10px 26px color-mix(in srgb,var(--c-btn-bg) 40%,transparent);border-radius:20px;transition:transform .35s var(--lg-spring)}
.btn-primary:active{transform:scale(.96)}
.btn-secondary{background:var(--c-small-btn-bg,rgba(255,255,255,.10));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi);border-radius:20px}
.opt-chip{background:var(--c-chip-bg,rgba(255,255,255,.08));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi);border-radius:16px;transition:transform .3s var(--lg-spring),background .25s}
.opt-chip:active{transform:scale(.94)}
.opt-chip.active{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent),color-mix(in srgb,var(--red) 38%,transparent);border-color:rgba(255,255,255,.6);box-shadow:var(--lg-hi),0 0 0 2px color-mix(in srgb,var(--red) 45%,transparent)}
.qty-ctrl button{background:var(--c-small-btn-bg,rgba(255,255,255,.14));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi);transition:transform .3s var(--lg-spring)}
.qty-ctrl button:active{transform:scale(.8)}

/* ---- floating cart capsule + side buttons ---- */
.cart-bar{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 55%),color-mix(in srgb,var(--c-cart-bg) 72%,transparent);
  border:1px solid rgba(255,255,255,.42);border-radius:26px;box-shadow:var(--lg-hi),0 14px 34px color-mix(in srgb,var(--c-cart-bg) 40%,transparent),0 4px 10px rgba(0,0,0,.3);
  transition:transform .4s var(--lg-spring)}
.cart-bar:active{transform:scale(.97)}
.fab{background:rgba(255,255,255,.14);border:1px solid var(--lg-rim);box-shadow:var(--lg-hi),0 8px 22px rgba(0,0,0,.38);transition:transform .35s var(--lg-spring)}
.fab:active{transform:scale(.88)}
.fab-call,.fab-chat,.fab-track{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04)),color-mix(in srgb,var(--c-fab-call) 55%,transparent)}
.fab-chat{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.02)),color-mix(in srgb,var(--c-add-bg) 70%,transparent)}

/* ---- discount banner + badge in glass ---- */
.disc-banner{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 50%),linear-gradient(135deg,color-mix(in srgb,var(--red) 70%,transparent),color-mix(in srgb,#ff8a3d 62%,transparent));
  border:1px solid rgba(255,255,255,.4);border-radius:22px;box-shadow:var(--lg-hi),var(--lg-drop);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.disc-badge{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),color-mix(in srgb,var(--red) 85%,transparent);border:1px solid rgba(255,255,255,.5);box-shadow:var(--lg-hi),0 3px 10px rgba(0,0,0,.4)}

/* ---- sheets / dialogs: frosted glass panels ---- */
.overlay{background:rgba(0,0,0,.40)}
.sheet{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 40%),var(--c-sheet-bg,color-mix(in srgb,var(--panel) 52%,transparent));
  border:1px solid var(--c-sheet-border,var(--lg-rim));border-top:1px solid var(--c-sheet-border,rgba(255,255,255,.55));border-radius:32px 32px 0 0;box-shadow:var(--lg-hi),0 -14px 50px rgba(0,0,0,.45);
  animation:lgSheet .5s var(--lg-spring)}
@keyframes lgSheet{from{transform:translateY(60px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.sheet-head{border-bottom:1px solid var(--lg-rim-soft)}
.close-x{background:var(--c-small-btn-bg,rgba(255,255,255,.14));border:1px solid var(--lg-rim);box-shadow:var(--lg-hi)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{background:var(--c-field-bg,rgba(255,255,255,.07))!important;border:1px solid var(--lg-rim)!important;box-shadow:var(--lg-hi);border-radius:16px!important}
.cart-line{border-bottom:1px solid var(--lg-rim-soft)}
.promo-ov{background:color-mix(in srgb,var(--c-promo-ov,#000) 45%,transparent)}
.promo-card{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03)),color-mix(in srgb,var(--panel) 55%,transparent);border:1px solid var(--lg-rim);border-radius:30px;box-shadow:var(--lg-hi),0 24px 70px rgba(0,0,0,.55)}
.menu-entry{background:radial-gradient(circle at 50% 0,var(--c-entry-glow) 0,color-mix(in srgb,var(--c-entry-glow) 40%,var(--bg)) 45%,var(--bg) 100%)}
.entry-card{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.03)),var(--c-entry-bg,color-mix(in srgb,var(--panel) 50%,transparent));border:1px solid var(--c-entry-border,var(--lg-rim));border-radius:32px;box-shadow:var(--lg-hi),0 24px 70px rgba(0,0,0,.5)}
.offer-card{background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03)),color-mix(in srgb,var(--c-offer-bg) 45%,transparent);border:1px solid var(--lg-rim-soft);border-radius:24px;box-shadow:var(--lg-hi),var(--lg-drop)}
#toast,.toast{background:rgba(20,20,24,.55);border:1px solid var(--lg-rim);box-shadow:var(--lg-hi),0 10px 30px rgba(0,0,0,.4);border-radius:999px}


/* ---- visual hierarchy: featured big cards, bigger price, tidy descriptions ---- */
.card .info{gap:4px}
.card h3{font-size:15.5px;line-height:1.35}
.card p{display:block;overflow:visible;opacity:.78;font-size:11.5px;overflow-wrap:anywhere}
.card .price{font-size:18px;letter-spacing:.2px}
.card .old-price{font-size:11.5px;opacity:.7}
.card.disc .price{color:color-mix(in srgb,var(--green),#fff 30%);text-shadow:0 1px 12px color-mix(in srgb,var(--green) 45%,transparent)}
.card .thumb{width:118px;height:96px}
.card.feat{flex-direction:column;gap:0;padding:0;min-height:0}
.card.feat .thumb{order:-1;width:100%;height:178px;border-radius:24px 24px 0 0;box-shadow:none}
.card.feat .thumb::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
.card.feat .thumb .disc-badge{top:10px;inset-inline-start:10px;font-size:12.5px;padding:4px 11px}
.card.feat .info{padding:12px 14px 14px;gap:6px}
.card.feat h3{font-size:18px}
.card.feat p{font-size:12px}
.card.feat .price{font-size:22px}
.card.feat .order-now-btn{padding:8px 20px;font-size:13px}
@media(max-width:430px){.card .thumb{width:100px;height:86px}.card.feat .thumb{height:160px}}
@media(max-width:360px){.card .thumb{width:86px;height:74px}.card.feat .thumb{height:140px}}

/* ---- scroll-reveal for cards (JS adds .rv then .rv-in) ---- */
.card.rv{opacity:0;transform:translateY(22px) scale(.97)}
.card.rv.rv-in{opacity:1;transform:none}

/* ---- the actual glass: only where the browser can blur what is behind ---- */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.top,.tabs,.rating-row{-webkit-backdrop-filter:blur(1px) saturate(180%);backdrop-filter:blur(1px) saturate(180%)}
  .card,.disc-banner,.tab,.search-row input,.order-now-btn,.opt-chip,.fab,.icon-btn,.btn-secondary{-webkit-backdrop-filter:blur(var(--lg-blur-soft)) saturate(160%);backdrop-filter:blur(var(--lg-blur-soft)) saturate(160%)}
  .offer-card{-webkit-backdrop-filter:none;backdrop-filter:none}
  .cart-bar,.sheet,.promo-card,.entry-card,#toast,.toast{-webkit-backdrop-filter:blur(2px) saturate(190%);backdrop-filter:blur(2px) saturate(190%)}
  .overlay,.promo-ov{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* no blur support -> make the glass a bit more solid so text stays readable */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card{background:color-mix(in srgb,var(--c-card-bg) 88%,transparent)}
  .promo-card{background:color-mix(in srgb,var(--panel) 96%,transparent)}
  .sheet{background:var(--c-sheet-bg,color-mix(in srgb,var(--panel) 96%,transparent))}
  .entry-card{background:var(--c-entry-bg,color-mix(in srgb,var(--panel) 96%,transparent))}
  header.top,.tabs{background:var(--c-header-bg)}
}
@media (prefers-reduced-motion:reduce){
  .card,.tab,.btn-primary,.add-btn,.fab,.cart-bar,.sheet{transition:none!important;animation:none!important}
  .card.rv{opacity:1;transform:none}
}

/* =====================================================================
   MOTION + EXTRAS: scroll-spy tabs, shrinking header, cart bump, blur-up
   images, light mode
   ===================================================================== */
/* header shrinks while scrolling (layout height unchanged -> no jumping) */
header#header1{transition:top .35s var(--lg-ease),padding .35s var(--lg-ease)}
header.top2,.tabs{transition:top .35s var(--lg-ease)}
.brand-badge,.brand-name,.brand-sub{transition:transform .35s var(--lg-ease),opacity .25s,font-size .3s}
body.lg-scrolled header#header1{top:-10px;padding-top:10px}
body.lg-scrolled header.top2{top:46px}
body.lg-scrolled .tabs{top:102px}
body.lg-scrolled .brand-badge{transform:translateX(-6px) scale(.84)}
body.lg-scrolled .brand-sub{opacity:0}
.tabs .tab{scroll-margin-inline:40px}

/* cart pill bump when something is added */
.cart-top.lg-bump{animation:lgBump .6s var(--lg-spring)}
.cart-top.lg-bump .count{animation:lgPop .6s var(--lg-spring)}
@keyframes lgBump{0%{transform:scale(1)}30%{transform:scale(1.2) rotate(-4deg)}60%{transform:scale(.95) rotate(2deg)}100%{transform:scale(1)}}
@keyframes lgPop{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}

/* blur-up images: soft shimmer, then the photo sharpens in */
.card .thumb.lg-wait{background:linear-gradient(110deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.05) 70%) 0 0/220% 100%;animation:lgShimmer 1.3s linear infinite}
@keyframes lgShimmer{to{background-position:-220% 0}}
.card .thumb img.lg-img{opacity:0;transition:opacity .4s var(--lg-ease)}
.card .thumb img.lg-img.ok{opacity:1;filter:none;transform:none}

/* theme toggle button */
#themeBtn{font-size:16px}

/* ---------------- LIGHT MODE (customer toggle, remembered) ---------------- */
html[data-theme=light]{
  --bg:var(--lt-bg,#eef1f7)!important;--panel:var(--lt-card,#ffffff)!important;--panel2:var(--lt-card2,#f3f5fb)!important;--line:var(--lt-line,#d9deea)!important;--text:var(--lt-text,#161926)!important;--muted:var(--lt-muted,#5b6279)!important;
  --c-header-bg:var(--u-lt-header-bg,var(--lt-card,#ffffff))!important;--c-header-text:var(--u-lt-header-text,var(--lt-text,#161926))!important;--c-header-sub:var(--u-lt-header-sub,var(--lt-muted,#5b6279))!important;
  --c-tabs-bg:var(--u-lt-tabs-bg,var(--lt-card,#ffffff))!important;--c-tab-bg:var(--u-lt-tab-bg,var(--lt-card,#ffffff))!important;--c-tab-text:var(--u-lt-tab-text,var(--lt-text,#2b3042))!important;--c-tab-border:var(--u-lt-tab-border,var(--lt-line,#d9deea))!important;
  --c-section-title:var(--u-lt-section-title,var(--u-section-title,var(--lt-text,#161926)))!important;--c-card-bg:var(--u-lt-card-bg,var(--lt-card,#ffffff))!important;--c-card-bg2:var(--u-lt-card-bg2,var(--lt-card2,#f3f5fb))!important;--c-card-border:var(--u-lt-card-border,var(--lt-line,#d9deea))!important;
  --c-item-name:var(--u-lt-item-name,var(--lt-text,#161926))!important;--c-item-desc:var(--u-lt-item-desc,var(--lt-muted,#4d546a))!important;--c-old-price:var(--u-lt-old-price,var(--lt-muted,#7a8196))!important;
  --c-page-glow:var(--u-lt-page-glow,#fbe4e8)!important;--c-entry-glow:var(--u-lt-entry-glow,#fbe4e8)!important;--c-order-text:var(--u-lt-order-text,var(--lt-text,#161926))!important;
  --lg-rim:rgba(255,255,255,.95);--lg-rim-soft:rgba(255,255,255,.7);
  --lg-hi:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(20,30,70,.06),inset 0 0 18px rgba(255,255,255,.4);
  --lg-drop:0 10px 30px rgba(30,40,90,.15),0 2px 6px rgba(30,40,90,.08);
  color-scheme:light}
html[data-theme=light] body{background:radial-gradient(circle at 50% 0,var(--c-page-glow) 0,var(--bg) 70%)}
html[data-theme=light] #maxs-bg .dim{background:rgba(255,255,255,.60)!important}
html[data-theme=light] .card{background:linear-gradient(135deg,color-mix(in srgb,var(--c-card-bg) 88%,transparent),color-mix(in srgb,var(--c-card-bg2) 55%,transparent)),color-mix(in srgb,var(--c-card-bg) 30%,transparent);border-color:color-mix(in srgb,var(--c-card-border) 55%,#fff)}
html[data-theme=light] .card::before{background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.35) 35%,rgba(255,255,255,.12) 65%,rgba(255,255,255,.9))}
html[data-theme=light] .card h3,html[data-theme=light] .section-title,html[data-theme=light] .price{text-shadow:none}
html[data-theme=light] .card.disc .price{color:#0d9a5a;text-shadow:none}
html[data-theme=light] header.top{background:color-mix(in srgb,var(--c-header-bg) 62%,transparent)}
html[data-theme=light] .tabs{background:color-mix(in srgb,var(--c-tabs-bg) 62%,transparent)}
html[data-theme=light] .rating-row{background:color-mix(in srgb,var(--panel) 62%,transparent)}
html[data-theme=light] .tab{background:linear-gradient(180deg,color-mix(in srgb,var(--c-tab-bg) 95%,transparent),color-mix(in srgb,var(--c-tab-bg) 55%,transparent));opacity:1}
html[data-theme=light] .tab.active,html[data-theme=light] .tabs .tab.offer-tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--c-tab-active-bg),#fff 22%),var(--c-tab-active-bg));color:#fff}
html[data-theme=light] .search-row input{background:var(--u-lt-search-bg,rgba(255,255,255,.75));color:var(--u-lt-search-text,var(--text))}
html[data-theme=light] .opt-chip{background:var(--u-lt-chip-bg,rgba(255,255,255,.75))}
html[data-theme=light] .btn-secondary,html[data-theme=light] .qty-ctrl button,html[data-theme=light] .close-x,html[data-theme=light] .item-modal-qty button{background:var(--u-lt-small-btn-bg,rgba(255,255,255,.75));color:var(--u-lt-small-btn-text,var(--text))}
html[data-theme=light] .field input:not([type=checkbox]):not([type=radio]),html[data-theme=light] .field select,html[data-theme=light] .field textarea{background:var(--u-lt-field-bg,rgba(255,255,255,.8))!important;color:var(--u-lt-field-text,var(--text))}
html[data-theme=light] .opt-chip.active{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.8),transparent),color-mix(in srgb,var(--red) 22%,#fff)}
html[data-theme=light] .promo-card{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6))}
html[data-theme=light] .sheet{background:var(--u-lt-sheet-bg,linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6)));color:var(--u-lt-sheet-text,var(--text));border-color:var(--u-lt-sheet-border,var(--lg-rim))}
html[data-theme=light] .entry-card{background:var(--u-lt-entry-bg,linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6)));border-color:var(--u-lt-entry-border,var(--lg-rim))}
html[data-theme=light] .overlay{background:rgba(20,25,50,.28)}
html[data-theme=light] .promo-ov{background:color-mix(in srgb,var(--u-lt-promo-ov,#141932) 28%,transparent)}
html[data-theme=light] .fab{background:rgba(255,255,255,.7);color:var(--text)}
html[data-theme=light] .fab-chat{color:#fff}
html[data-theme=light] .order-now-btn{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.4)),color-mix(in srgb,var(--red) 18%,transparent);border-color:color-mix(in srgb,var(--red) 40%,#fff)}
html[data-theme=light] .offer-card{background:linear-gradient(135deg,color-mix(in srgb,var(--c-offer-bg) 88%,transparent),color-mix(in srgb,var(--c-offer-bg2) 50%,transparent))}
html[data-theme=light] .unavail-tag{background:#fdeaea}

/* ===== LITE / POLISH PASSES (2026-10-08) - based on version 36.
   Colours: every colour below comes from the admin theme variables; the value after the comma in var(--x, value) is only a FALLBACK. ===== */

/* 1) glass kept, lighter. Very light blur on items/offers (1px / 2px) - switched off while scrolling (see 4) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card,.offer-card,.disc-banner,.card.feat,.tab,.search-row input,.order-now-btn,.opt-chip,.icon-btn,.btn-secondary,.fab,.rating-row{-webkit-backdrop-filter:none;backdrop-filter:none}
  header.top,.tabs{-webkit-backdrop-filter:blur(1px) saturate(130%);backdrop-filter:blur(1px) saturate(130%)}
  .cart-bar{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .sheet,.promo-card,.entry-card,#toast,.toast{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .tab,.search-row input,.order-now-btn,.opt-chip,.icon-btn,.btn-secondary,.fab,.rating-row{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
  .disc-banner{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}
/* light glass: same look from gradients / rim / highlight (rim + highlight are theme variables) */
.card{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 48%,rgba(255,255,255,.09)),color-mix(in srgb,var(--c-card-bg) 72%,transparent);
  border:1px solid var(--lg-rim);box-shadow:var(--lg-hi),0 2px 6px rgba(0,0,0,.18)}
.offer-card{background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),color-mix(in srgb,var(--c-offer-bg) 72%,transparent);
  border:1px solid var(--lg-rim);box-shadow:var(--lg-hi),0 2px 6px rgba(0,0,0,.18)}
.card::before{display:none}
.card .thumb{box-shadow:0 2px 6px rgba(0,0,0,.28),0 0 0 1px var(--lg-rim-soft)}
.card .thumb img.lg-img{filter:none;transform:none;transition:opacity .25s ease}
.card .thumb.lg-wait{animation:none;background:var(--lg-rim-soft)}
.tab{box-shadow:var(--lg-hi)}
.fab{box-shadow:var(--lg-hi),0 3px 8px rgba(0,0,0,.3)}
.card h3,.card .price,.card.disc .price,.section-title{text-shadow:none}

/* 2) quick, small transitions; cards are never hidden by a reveal animation */
.card{transition:transform .2s ease,box-shadow .2s,opacity .2s ease,background .2s}
.card:active{transform:scale(.985)}
.tab{transition:transform .2s ease,background .2s,opacity .2s,box-shadow .2s}
.tab:active{transform:scale(.96)}
.add-btn,.fab,.cart-bar{transition:transform .2s ease,box-shadow .2s}
.card.rv,.card.rv.rv-in{opacity:1!important;transform:none!important;transition:none}
@media (prefers-reduced-motion:reduce){.card.rv{opacity:1;transform:none}}

/* 3) smaller items, offers, tabs, titles */
.card{padding:9px;gap:10px;margin-bottom:9px;border-radius:18px;min-height:0}
.card .thumb{width:92px;height:76px;border-radius:14px}
.card h3{font-size:14.5px;line-height:1.3}
.card p{font-size:11px}
.card .price{font-size:16px}
.card .old-price{font-size:10.5px}
.card .info{gap:3px}
.card.feat .thumb{height:118px;border-radius:18px 18px 0 0}
.card.feat .info{padding:9px 11px 11px;gap:4px}
.card.feat h3{font-size:16px}
.card.feat .price{font-size:19px}
.card.feat p{font-size:11px}
.card.feat .order-now-btn{padding:6px 16px;font-size:12px}
.offers-strip{gap:9px;margin:2px 0 12px}
.offer-card{flex:0 0 176px;border-radius:16px}
.offer-card img{height:78px}
.offer-body{padding:8px 10px}
.offer-body h3{font-size:13.5px}
.offer-body p{font-size:10.5px;margin-top:2px}
.offer-price{font-size:13px;margin-top:3px}
.offer-badge{font-size:9px;padding:2px 6px;margin-bottom:3px}
.tabs{padding:6px 12px}
.tab{padding:5px 11px;font-size:12px}
.section-title{font-size:17px;margin:10px 3px 8px}
.section-title:after{width:46px;height:3px}
@media(max-width:360px){.card .thumb{width:78px;height:66px}.card h3{font-size:13.5px}.card.feat .thumb{height:104px}.offer-card{flex-basis:160px}}

/* 4) smoother scrolling: per-card blur is dropped while the finger scrolls, back ~140ms after it stops */
html.lg-scrolling .card,html.lg-scrolling .offer-card,html.lg-scrolling .disc-banner,html.lg-scrolling .tab,html.lg-scrolling .order-now-btn,
html.lg-scrolling .opt-chip,html.lg-scrolling .search-row input,html.lg-scrolling .fab,html.lg-scrolling .icon-btn,html.lg-scrolling .btn-secondary{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#maxs-bg .img{will-change:transform}

/* 5) closed-branch notice + points line: shorter text; colours follow the admin theme (fallback after the comma) */
#closedBanner{background:color-mix(in srgb,var(--danger,#ef4444) 14%,var(--c-card-bg,#1a1012))!important;border:1px solid color-mix(in srgb,var(--danger,#ef4444) 55%,transparent)!important;border-inline-start:4px solid var(--danger,#ef4444)!important;color:var(--text,#fff)!important;
  padding:8px 12px!important;border-radius:14px!important;font-size:13px!important;line-height:1.5!important;text-align:start!important}
#closedBanner .cb-t{font-size:14px;font-weight:900;color:var(--text,#fff)}
#closedBanner .cb-s{font-size:11.5px;font-weight:700;color:var(--c-item-desc,#d8cccc);margin-top:2px}
#closedBanner .cb-btn{margin-top:7px;padding:5px 14px;border-radius:999px;border:1px solid var(--c-order-border,#ffffff66);background:var(--c-order-bg,#ffffff22);color:var(--c-order-text,#fff);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
#pointsInfo{padding:6px 12px!important;font-size:12px!important;line-height:1.5!important;border-radius:999px!important;border-style:solid!important;border-width:1px!important;
  background:var(--c-notice-bg,#0000004d)!important;border-color:var(--c-notice-border,#ffc10788)!important;color:var(--text,#fff)!important}
/* closed branch: nobody can order, so the "order again" bar is hidden instead of shown dimmed */
body.branch-closed #reorderBar{display:none}

/* 6) polish (same structure) */
.card h3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.card h3 .tag-hot,.card h3 .tag-new,.card h3 .rate{display:inline-block;margin:0;margin-top:0;font-size:10px;padding:2px 8px;line-height:1.5}
.card h3 .rate{padding:0;font-size:11px;opacity:.9}
.card h3 .fav{margin-inline-start:auto;float:none;order:9}
.price-row{justify-content:flex-start;gap:10px}
.order-now-btn{margin-inline-start:8px}
.card .price-row .old-price{margin-inline-start:0}
.fab-stack{left:6px;gap:5px}
.fab{width:40px!important;height:40px!important;font-size:17px!important;opacity:.92}
.card p{opacity:.9;color:color-mix(in srgb,var(--c-item-desc,#fff) 65%,var(--text,#fff))}   /* brighter than the plain admin grey, still follows the admin colours */
.card .price{letter-spacing:.2px}
.disc-banner{padding:8px 12px;font-size:12.5px;line-height:1.55;border-radius:16px;margin:0 0 10px}
.disc-banner div+div{margin-top:3px}

/* ===== DIAGNOSTIC SWITCHES (only with ?lite=1 / ?nobg=1 / ?noimg=1 / ?noshrink=1 in the address) ===== */
html.lg-off *,html.lg-off *::before,html.lg-off *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;transition:none!important;animation:none!important;filter:none!important}
html.lg-nobg #maxs-bg{display:none!important}
html.lg-noimg .card .thumb img,html.lg-noimg .offer-card img{display:none!important}
html.lg-noshrink header.top,html.lg-noshrink .tabs,html.lg-noshrink body.lg-scrolled .tabs{transition:none!important}

/* ---------------- 🔥 "الأكثر طلبًا" card: looks like it's on fire ---------------- */
@keyframes maxsFireGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,106,0,.55),0 0 14px rgba(255,80,0,.35),0 8px 22px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 1px rgba(255,170,0,.9),0 0 26px rgba(255,90,0,.62),0 8px 22px rgba(0,0,0,.25)}
}
@keyframes maxsFireFlick{
  0%{transform:scaleY(.85) skewX(-2deg);opacity:.72}
  25%{transform:scaleY(1.06) skewX(2deg);opacity:1}
  50%{transform:scaleY(.92) skewX(-1deg);opacity:.85}
  75%{transform:scaleY(1.14) skewX(3deg);opacity:1}
  100%{transform:scaleY(.85) skewX(-2deg);opacity:.72}
}
@keyframes maxsFireTag{
  0%,100%{box-shadow:0 0 5px rgba(255,100,0,.6);transform:scale(1)}
  50%{box-shadow:0 0 13px rgba(255,160,0,.95);transform:scale(1.07)}
}
.card.hot{border-color:rgba(255,120,0,.8);animation:maxsFireGlow 2.2s ease-in-out infinite}
.card.hot>.info,.card.hot>.thumb{position:relative;z-index:1}
.card.hot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48%;z-index:0;pointer-events:none;border-radius:inherit;transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 22% 70% at 12% 100%,rgba(255,196,0,.55),transparent 70%),
    radial-gradient(ellipse 26% 85% at 34% 100%,rgba(255,90,0,.62),transparent 70%),
    radial-gradient(ellipse 20% 65% at 55% 100%,rgba(255,196,0,.5),transparent 70%),
    radial-gradient(ellipse 28% 90% at 78% 100%,rgba(255,60,0,.62),transparent 70%),
    radial-gradient(ellipse 18% 60% at 94% 100%,rgba(255,150,0,.5),transparent 70%);
  animation:maxsFireFlick 1.6s ease-in-out infinite}
.card.hot h3 .tag-hot{background:linear-gradient(135deg,#ff3d00,#ff9d00)!important;color:#fff!important;text-shadow:0 1px 6px rgba(120,20,0,.6);animation:maxsFireTag 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.card.hot,.card.hot::after,.card.hot h3 .tag-hot{animation:none}}

/* ---------------- ✨ جديد / 💸 خصم / 🔥 عروض: glow variants ---------------- */
@keyframes maxsNewGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(33,196,123,.5),0 0 12px rgba(33,196,123,.28),0 8px 22px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 1px rgba(90,255,180,.85),0 0 22px rgba(33,196,123,.55),0 8px 22px rgba(0,0,0,.25)}
}
@keyframes maxsDiscGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,201,40,.45),0 0 10px rgba(255,201,40,.22),0 8px 22px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 1px rgba(255,214,90,.85),0 0 20px rgba(255,201,40,.5),0 8px 22px rgba(0,0,0,.25)}
}
@keyframes maxsOfferGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,150,0,.55),0 0 14px rgba(255,90,0,.3)}
  50%{box-shadow:0 0 0 1px rgba(255,200,60,.95),0 0 26px rgba(255,110,0,.6)}
}
@keyframes maxsShine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes maxsBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.card.fx-new:not(.hot){border-color:rgba(33,196,123,.75);animation:maxsNewGlow 2.6s ease-in-out infinite}
.card.fx-new h3 .tag-new{background:linear-gradient(110deg,#21c47b 30%,#c8ffe6 50%,#21c47b 70%)!important;background-size:250% 100%;animation:maxsShine 2.2s linear infinite}
.card.disc:not(.hot):not(.fx-new){border-color:rgba(255,201,40,.65);animation:maxsDiscGlow 3s ease-in-out infinite}
.card.disc .disc-badge{animation:maxsBadgePulse 1.8s ease-in-out infinite}
.ofc,.offer-card{border-color:rgba(255,160,0,.8);animation:maxsOfferGlow 2.4s ease-in-out infinite}
html.lg-scrolling .card.hot,html.lg-scrolling .card.hot::after,html.lg-scrolling .card.fx-new,html.lg-scrolling .card.disc,html.lg-scrolling .ofc,html.lg-scrolling .offer-card{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.card.fx-new,.card.fx-new h3 .tag-new,.card.disc,.card.disc .disc-badge,.ofc,.offer-card{animation:none}}

/* ---------------- 🎉 celebrations (favourite hearts + points milestone) ---------------- */
#fxLayer{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.fx-p{position:absolute;line-height:1;margin:-.5em 0 0 -.5em;will-change:transform,opacity;animation:maxsFxFly var(--d,.9s) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes maxsFxFly{
  0%{transform:translate3d(0,0,0) scale(.3) rotate(0deg);opacity:0}
  15%{opacity:1;transform:translate3d(calc(var(--dx)*.35),calc(var(--dy)*.35),0) scale(1.15) rotate(calc(var(--rot)*.3))}
  100%{transform:translate3d(var(--dx),calc(var(--dy) + 26px),0) scale(.7) rotate(var(--rot));opacity:0}
}
.fx-c{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;will-change:transform,opacity;animation:maxsFxFall var(--d,2.4s) cubic-bezier(.3,.1,.6,1) forwards}
@keyframes maxsFxFall{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--dx),108vh,0) rotate(var(--rot));opacity:0}}
.fx-banner{position:absolute;top:calc(env(safe-area-inset-top,0px) + 78px);left:50%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 28px;border-radius:22px;color:#fff;text-align:center;background:linear-gradient(135deg,#ff5a1f,#ffb000);box-shadow:0 10px 34px rgba(255,110,0,.55),inset 0 1px 0 rgba(255,255,255,.5);animation:maxsFxBanner 3.4s ease forwards}
.fx-banner b{font-size:20px;font-weight:900}.fx-banner span{font-size:14px;font-weight:800}
@keyframes maxsFxBanner{
  0%{transform:translate(-50%,-30px) scale(.8);opacity:0}
  10%{transform:translate(-50%,0) scale(1.08);opacity:1}
  16%{transform:translate(-50%,0) scale(1)}
  88%{transform:translate(-50%,0) scale(1);opacity:1}
  100%{transform:translate(-50%,-16px) scale(.96);opacity:0}
}
.fav.fav-pop{animation:maxsFavPop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes maxsFavPop{0%{transform:scale(.6)}50%{transform:scale(1.55)}100%{transform:scale(1)}}
#pointsPill.fx-pulse{animation:maxsPillPulse 1.2s ease-in-out 2}
@keyframes maxsPillPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,201,40,0)}50%{transform:scale(1.14);box-shadow:0 0 22px rgba(255,201,40,.85)}}
@media (prefers-reduced-motion:reduce){.fx-banner{animation:none;opacity:1;transform:translateX(-50%)}.fav.fav-pop,#pointsPill.fx-pulse{animation:none}}

/* ---------------- offers slider v2: smaller, blurred side fill, dots under the picture ---------------- */
.ofc-slide{aspect-ratio:2/1;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--red) 38%,#000),#140a12)}
.ofc-slide::before{content:'';position:absolute;inset:-16px;background:var(--ofbg,none) center/cover no-repeat}
.ofc-slide img{position:relative;z-index:1}
.ofc-cap{z-index:2}
.ofc-a{z-index:3;top:calc(50% - 12px)}
.ofc-dots{position:static;padding:7px 0 9px}
.ofc-dots i{background:var(--text);opacity:.3}
.ofc-dots i.on{background:var(--text);opacity:1}

/* ---------------- "اطلب الآن": solid, easy-to-see button (admin order colours still win) ---------------- */
.order-now-btn,html[data-theme=light] .order-now-btn{
  background:linear-gradient(135deg,var(--u-order-bg,var(--red)),var(--u-order-bg,var(--red2)))!important;
  color:var(--u-order-text,#fff)!important;border:1px solid rgba(255,255,255,.4)!important;
  font-size:12px;font-weight:900;padding:7px 16px;text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 4px 14px color-mix(in srgb,var(--u-order-bg,var(--red)) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important}

/* ---------------- round 3: slider fills the frame, offer cards, filter chips, bigger heart show ---------------- */
.ofc{background:linear-gradient(180deg,#1a0d14,#0f070c)}
.ofc-track{display:block;position:relative;aspect-ratio:5/2;transform:none!important;transition:none}
.ofc-slide{position:absolute;inset:0;aspect-ratio:auto;flex:none;opacity:0;visibility:hidden}
.ofc-slide.is-active{opacity:1;visibility:visible;z-index:1}
.ofc-slide.is-out{visibility:visible;z-index:2}
@keyframes ofcInR{0%{transform:perspective(900px) translateX(calc(50vw + 50%)) rotateY(60deg) scale(.85);opacity:0}35%{opacity:1}100%{transform:perspective(900px) translateX(0) rotateY(0) scale(1);opacity:1}}
@keyframes ofcInL{0%{transform:perspective(900px) translateX(calc(-50vw - 50%)) rotateY(-60deg) scale(.85);opacity:0}35%{opacity:1}100%{transform:perspective(900px) translateX(0) rotateY(0) scale(1);opacity:1}}
@keyframes ofcOutL{0%{transform:perspective(900px) translateX(0) rotateY(0) scale(1);opacity:1}65%{opacity:1}100%{transform:perspective(900px) translateX(calc(-50vw - 50%)) rotateY(-60deg) scale(.85);opacity:0}}
@keyframes ofcOutR{0%{transform:perspective(900px) translateX(0) rotateY(0) scale(1);opacity:1}65%{opacity:1}100%{transform:perspective(900px) translateX(calc(50vw + 50%)) rotateY(60deg) scale(.85);opacity:0}}
.ofc-slide.is-in.from-r{animation:ofcInR .85s cubic-bezier(.22,.9,.3,1) both}
.ofc-slide.is-in.from-l{animation:ofcInL .85s cubic-bezier(.22,.9,.3,1) both}
.ofc-slide.is-out.to-l{animation:ofcOutL .85s cubic-bezier(.22,.9,.3,1) both}
.ofc-slide.is-out.to-r{animation:ofcOutR .85s cubic-bezier(.22,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.ofc-slide.is-in,.ofc-slide.is-out{animation-duration:.01s}}
.ofc-slide::before{display:none}
.ofc-slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center}
.ofc-cap{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.ofc-dots i{background:#fff;opacity:.35}.ofc-dots i.on{background:#fff;opacity:1}

@keyframes maxsOfferCardGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,150,0,.55),0 0 12px rgba(255,100,0,.3),0 8px 22px rgba(0,0,0,.25)}
  50%{box-shadow:0 0 0 1px rgba(255,205,70,.95),0 0 24px rgba(255,120,0,.6),0 8px 22px rgba(0,0,0,.25)}
}
@keyframes maxsSweep{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}}
.card.fx-offer{border-color:rgba(255,165,0,.85);animation:maxsOfferCardGlow 2.4s ease-in-out infinite}
.card.fx-offer::after{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);animation:maxsSweep 3.8s ease-in-out infinite}

@keyframes maxsTabGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(var(--gl),.55),0 0 9px rgba(var(--gl),.3)}
  50%{box-shadow:0 0 0 1px rgba(var(--gl),.95),0 0 20px rgba(var(--gl),.7)}
}
.tab.chip-hot{--gl:255,106,0}.tab.chip-new{--gl:33,196,123}.tab.chip-fav{--gl:255,60,100}.tabs .tab.offer-tab{--gl:255,170,0}
.tab.chip-hot,.tab.chip-new,.tab.chip-fav,.tabs .tab.offer-tab{border-color:rgba(var(--gl),.9);animation:maxsTabGlow 2.2s ease-in-out infinite}
.tab.chip-hot:not(.active){background-image:radial-gradient(ellipse 30% 90% at 20% 115%,rgba(255,196,0,.65),transparent 70%),radial-gradient(ellipse 30% 100% at 55% 115%,rgba(255,80,0,.75),transparent 70%),radial-gradient(ellipse 30% 90% at 85% 115%,rgba(255,196,0,.65),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2))}
.tab.chip-new:not(.active){background-image:linear-gradient(110deg,transparent 30%,rgba(90,255,180,.5) 50%,transparent 70%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));background-size:250% 100%,100% 100%;animation:maxsTabGlow 2.2s ease-in-out infinite,maxsShine 2.4s linear infinite}
.tab.chip-fav:not(.active){background-image:radial-gradient(ellipse 60% 120% at 50% 130%,rgba(255,60,100,.5),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2))}
html.lg-scrolling .card.fx-offer,html.lg-scrolling .card.fx-offer::after,html.lg-scrolling .tab{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.card.fx-offer,.card.fx-offer::after,.tab.chip-hot,.tab.chip-new,.tab.chip-fav,.tabs .tab.offer-tab{animation:none}}

.fx-bigheart{position:absolute;left:50%;top:46%;font-size:96px;line-height:1;margin:-48px 0 0 -48px;animation:maxsBigHeart 1.15s cubic-bezier(.2,1.3,.4,1) forwards;filter:drop-shadow(0 6px 22px rgba(255,40,90,.6))}
@keyframes maxsBigHeart{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.25);opacity:1}55%{transform:scale(1)}100%{transform:scale(1.5) translateY(-30px);opacity:0}}

/* ---------------- slider round 4: whole picture visible (blurred sides) + slides travel across the whole screen ---------------- */
.ofc{overflow:visible}
.ofc-track{border-radius:19px 19px 0 0}
.ofc-slide{border-radius:19px 19px 0 0}
.ofc-slide .ofc-bg{position:absolute;inset:-18px;background-size:cover;background-position:center}
#menuSections{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* ---------------- no blur on offers, their pictures and "most ordered" items (other effects stay) ---------------- */
.offer-card,.disc-banner,.card.hot,.card.feat{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ofc-slide::before,.ofc-slide .ofc-bg{display:none!important}

/* ---- item sheet: picture on top ---- */
.item-pic{margin:-4px 0 12px;border-radius:22px;overflow:hidden;aspect-ratio:16/10;max-height:230px;background:var(--panel2,rgba(127,127,127,.15));box-shadow:0 6px 18px rgba(0,0,0,.25)}
.item-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- light cards: sit on the page itself (no slab, rim, sheen or heavy shadow) ---- */
.card{background:transparent!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)!important;border-radius:0!important;box-shadow:none!important;padding:12px 4px!important;margin-bottom:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.card::before{display:none!important}
.card .thumb{box-shadow:none!important;border-radius:16px}
.card h3,.card .price{text-shadow:none!important}
.card.feat{border-bottom:0!important;padding:0!important;margin-bottom:12px!important}

/* ================= 2026-10-12 round: full-screen sheets, no entrance animation, no blur on the menu page, branch cards ================= */
/* 1) the four big sheets (cart, item, your data, my account) cover the WHOLE screen up to the top and appear at once (no slide / fade / zoom) */
#cartOverlay,#itemOverlay,#infoOverlay,#accountOverlay{align-items:stretch;justify-content:stretch;background:transparent!important;animation:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#cartOverlay .sheet,#itemOverlay .sheet,#infoOverlay .sheet,#accountOverlay .sheet{
  box-sizing:border-box;width:100%;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;min-height:100dvh;
  border-radius:0!important;border-width:0!important;box-shadow:none!important;animation:none!important;transition:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow-y:auto;overscroll-behavior:contain;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  /* the sheet colour is laid over the page background so nothing of the menu shows through */
  background:linear-gradient(var(--c-sheet-bg,var(--panel)),var(--c-sheet-bg,var(--panel))),var(--bg)!important}
html[data-theme=light] #cartOverlay .sheet,html[data-theme=light] #itemOverlay .sheet,html[data-theme=light] #infoOverlay .sheet,html[data-theme=light] #accountOverlay .sheet{
  background:linear-gradient(var(--u-lt-sheet-solid,var(--c-sheet-bg,var(--panel))),var(--u-lt-sheet-solid,var(--c-sheet-bg,var(--panel)))),var(--bg)!important}
#itemOverlay .item-pic{max-height:none;margin-top:0}

/* 2) menu page: no backdrop blur anywhere, and no moving translucent shine across the offer cards */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.card.fx-offer::after{display:none!important;animation:none!important}

/* 3) entry screen: branch dropdown = one compact row (name + small hours); the list opens under it */
.br-dd{position:relative}
.br-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 12px;border-radius:14px;border:2px solid var(--line);background:var(--panel2);color:var(--text);font-family:inherit;cursor:pointer}
.br-opt .br-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.br-opt .br-top{display:flex;align-items:center;gap:8px;min-width:0}
.br-opt .br-top b{font-size:14.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-opt .br-main small{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-opt .br-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0}
.br-opt .br-chev{font-size:16px;line-height:1;opacity:.7;flex-shrink:0;transition:transform .15s}
.br-dd.open .br-chev{transform:rotate(180deg)}
.br-opt.br-cur{border-color:var(--c-active-border,var(--line))}
.br-menu{display:none;flex-direction:column;gap:6px;margin-top:6px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--panel);max-height:42vh;overflow-y:auto}
.br-dd.open .br-menu{display:flex}
.br-menu .br-opt{padding:8px 10px;border-width:1.5px}
.br-menu .br-opt.active{background:var(--c-active-bg);color:var(--c-active-text);border-color:var(--c-active-border)}
.br-menu .br-opt.active .br-main small{color:inherit;opacity:.8}
.br-menu .br-opt.active .br-dot{border-color:currentColor;background:radial-gradient(currentColor 0 40%,transparent 45%)}
.br-opt.closed .br-main{opacity:.8}
.br-tag{font-size:10px;font-weight:900;padding:2px 7px;border-radius:7px;background:rgba(220,38,38,.16);color:var(--danger,#ef4444);white-space:nowrap;flex-shrink:0}
.br-empty{padding:12px;text-align:center;font-size:13px;font-weight:800;color:var(--muted);border:1px dashed var(--line);border-radius:14px}

/* 4) item pictures: natural photo filling the frame, taken from the BOTTOM up (the sandwiches start at the bottom; the top may be cropped) */
.card .thumb img,.item-pic img,.promo-img{object-fit:cover;object-position:center bottom}

/* closed banner: compact (title + hours on one small block, small button beside it) */
#closedBanner{padding:8px 12px!important;margin-top:8px!important;line-height:1.5!important;text-align:start!important}
#closedBanner .cb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#closedBanner .cb-txt{min-width:0;flex:1}
#closedBanner .cb-t{font-size:13.5px}
#closedBanner .cb-s{font-size:11px;margin-top:1px}
#closedBanner .cb-btn{margin-top:0;padding:5px 12px;font-size:11.5px;white-space:nowrap;flex-shrink:0}

/* ---- item sheet picture, final: the photo keeps its OWN shape (no fixed frame, nothing cropped).
   Only a very tall photo is limited to ~half the screen, and then it is cut from the TOP (the bottom stays: the sandwich starts there). ---- */
.item-pic,#itemOverlay .item-pic{aspect-ratio:auto!important;height:auto!important;max-height:none!important;line-height:0;margin:0 0 12px}
.item-pic img,#itemOverlay .item-pic img{display:block;width:100%;height:auto;max-height:52vh;max-height:52dvh;object-fit:cover;object-position:center bottom}

/* Selected option must be unmistakable on every theme: solid red, white bold text, tick. */
.radio-opt.active,html[data-theme=light] .radio-opt.active,.opt-chip.active,html[data-theme=light] .opt-chip.active,.br-menu .br-opt.active{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 28%,transparent)!important;text-shadow:none!important}
.radio-opt.active::before,.opt-chip.active::before{content:"✓ ";font-weight:900}

/* ---- Typography (Cairo = names/prices/buttons/tabs, Tajawal = descriptions/info). Sizes scale with the phone width. ---- */
body{font-family:var(--f-body)}
.brand-name{font-family:var(--f-head);font-weight:800}
.tab{font-family:var(--f-head);font-weight:700;font-size:clamp(12px,3.5vw,14px)}
.section-title{font-family:var(--f-head);font-weight:800}
.card h3{font-family:var(--f-head);font-weight:700;font-size:clamp(15px,4.4vw,18px);line-height:1.35}
.card.feat h3{font-size:clamp(16px,4.8vw,20px)}
.card p{font-family:var(--f-body);font-weight:400;font-size:clamp(12.5px,3.6vw,14px);line-height:1.6}
.card .price,.price{font-family:var(--f-head);font-weight:800;font-size:clamp(17px,5vw,22px)}
.card.feat .price{font-size:clamp(19px,5.6vw,24px)}
.card .old-price{font-family:var(--f-body);font-weight:500}
.offer-body h3{font-family:var(--f-head);font-weight:700;font-size:clamp(15px,4.3vw,18px)}
.offer-body p{font-family:var(--f-body);font-weight:400;font-size:clamp(12.5px,3.5vw,14px);line-height:1.6}
.offer-price{font-family:var(--f-head);font-weight:800;font-size:clamp(16px,4.6vw,20px)}
.cart-line .name{font-family:var(--f-head);font-weight:700;font-size:15px}
.btn-primary{font-family:var(--f-head);font-weight:700}
.btn-secondary,.radio-opt,.opt-chip{font-family:var(--f-head);font-weight:600}
.field label,.muted,small{font-family:var(--f-body)}

/* ---- search = magnifier icon, cart line delete, smaller notes box ---- */
.search-wrap{display:flex;align-items:center}
.search-wrap input{display:none;flex:1;min-width:0}
.search-wrap.open input{display:block}
.search-wrap.open .search-toggle{display:none}
.search-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cart-line{align-items:center}
.line-del{background:transparent;border:0;color:var(--muted,#aaa);padding:6px;margin-inline-start:4px;cursor:pointer;border-radius:8px;display:flex;opacity:.8}
.line-del:hover,.line-del:active{color:var(--red);opacity:1}
.clear-cart{display:block;margin:8px auto 0;background:transparent;border:1px solid var(--line);color:var(--muted,#aaa);border-radius:12px;padding:6px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.clear-cart:hover,.clear-cart:active{color:var(--red);border-color:var(--red)}
.notes-field label{font-size:12.5px;margin-bottom:4px}
.notes-box{width:100%;min-height:36px;max-height:90px;padding:7px 10px;font-size:13px;border-radius:12px;resize:vertical}

/* ===== BOTTOM GLASS BAR (2026-10-13) =====
   Glass only: no fixed colours. Every colour is an admin variable (--c-header-*, --c-tab-active-bg, --c-cart-*, --c-count-*, --c-points-*);
   white rgba values are the same glass highlights the rest of the menu already uses (--lg-*). */
body{padding-bottom:104px}
.fab-stack{bottom:104px}
.bnav{position:fixed;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:560px;margin-inline:auto;z-index:45;
  display:flex;align-items:stretch;height:64px;padding:0 4px;color:var(--c-header-text);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),color-mix(in srgb,var(--c-header-bg) 42%,transparent);
  border:1px solid var(--lg-rim);border-radius:26px;box-shadow:var(--lg-hi),0 12px 30px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(var(--lg-blur-soft)) saturate(160%);backdrop-filter:blur(var(--lg-blur-soft)) saturate(160%)}
.bnav-i,.bnav-cart{flex:1 1 0;min-width:0;background:none;border:0;color:inherit;font:inherit;font-size:11px;font-weight:800;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;-webkit-tap-highlight-color:transparent}
.bnav-i{opacity:.78;transition:opacity .2s,transform .3s var(--lg-spring)}
.bnav-i:hover,.bnav-i:focus-visible{opacity:1}
.bnav-i:active{transform:scale(.9)}
.bnav-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bnav-i.active{opacity:1;color:var(--c-tab-active-bg)}
.bnav-cart{justify-content:flex-end;padding-bottom:6px}
.bnav-cart-ico{width:58px;height:58px;border-radius:50%;margin-bottom:0;display:flex;align-items:center;justify-content:center;position:relative;
  color:var(--c-cart-text);
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%),color-mix(in srgb,var(--c-cart-bg) 78%,transparent);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:var(--lg-hi),0 10px 24px color-mix(in srgb,var(--c-cart-bg) 45%,transparent);
  transform:translateY(-14px);margin-bottom:-14px;transition:transform .3s var(--lg-spring)}
.bnav-cart:active .bnav-cart-ico{transform:translateY(-14px) scale(.92)}
.bnav-cart-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bnav-cart .count{position:absolute;top:-2px;inset-inline-end:-2px;background:var(--c-count-bg);color:var(--c-count-text);min-width:21px;height:21px;padding:0 4px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900;box-shadow:var(--lg-hi)}
.bnav-lbl{font-size:11px;font-weight:800;opacity:.85}
.bnav-badge{position:absolute;top:5px;left:calc(50% + 5px);background:var(--c-points-bg);color:var(--c-points-text);min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:900;line-height:1}
#pointsPill.has-discount{opacity:1}
#pointsPill .discount-dot{position:absolute;top:3px;left:calc(50% - 24px)}
.bnav-cart.lg-bump .bnav-cart-ico{animation:bnavBump .6s var(--lg-spring)}
@keyframes bnavBump{0%{transform:translateY(-14px) scale(1)}30%{transform:translateY(-14px) scale(1.18) rotate(-4deg)}60%{transform:translateY(-14px) scale(.96) rotate(2deg)}100%{transform:translateY(-14px) scale(1)}}
@media (max-width:360px){.bnav-i,.bnav-cart,.bnav-lbl{font-size:10px}.bnav-i svg{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.bnav-i,.bnav-cart-ico{transition:none}}

/* ===== HOME TOP: logo strip instead of the two header cards (2026-10-13) =====
   The old headers (name + branch, search) are hidden, not deleted, so they can come back by removing the first rule. */
header.top,header.top2{display:none!important}
.tabs,html body.lg-scrolled .tabs{top:0!important}
#offers-section,[id^="cat-"]{scroll-margin-top:64px}
.hero{display:block;padding:0;position:relative}
.hero-cover{position:relative;height:200px;background:linear-gradient(135deg,var(--red) 0%,var(--panel2) 100%);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:0 0 22px 22px}
.hero-cover::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 55%);pointer-events:none}
.hero-tools{position:absolute;top:10px;inset-inline:12px;z-index:2;display:flex;align-items:center;gap:8px}
.hero-tools .search-wrap{flex:1;min-width:0}
.hero-tools .search-toggle{width:34px;height:34px}
.hero-tools .search-row input{width:100%;padding:7px 12px;font-size:12.5px}
.hero-logo{position:absolute;left:16px;bottom:-44px;z-index:3;display:flex;flex-direction:column;align-items:center}
.hero-logo-img{position:relative;width:96px;height:96px}
.hero .brand-badge{width:96px;height:96px;font-size:38px;transform:none!important;transition:filter .3s}
.hero .brand-badge img{width:100%;height:100%;object-fit:cover}
.hero-busy{display:none;position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;
  background:var(--danger,#ef4444);color:var(--c-tab-active-text,#fff);font-size:11.5px;font-weight:900;border:1px solid var(--lg-rim);box-shadow:var(--lg-hi),0 4px 12px rgba(0,0,0,.3)}
.hero-logo.is-busy .brand-badge{filter:grayscale(.75) brightness(.7)}
.hero-logo.is-busy .hero-busy{display:block}
.hero-info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:10px 16px 10px 124px;font-size:12.5px;font-weight:800;color:var(--c-header-text)}
.hero-info>span{white-space:nowrap}
.hero-info.hide-rating #ratingWrap{display:none!important}
.hero-time{font-size:12px;font-weight:800;color:var(--c-header-sub,var(--muted))}
.fab.fab-search,html[data-theme=light] .fab.fab-search{background:var(--c-fab-search,var(--c-add-bg));color:var(--c-fab-search-icon,#fff)}
.search-toggle{background:var(--c-search-btn-bg,var(--panel2));color:var(--c-search-btn-text,var(--text))}
/* ---- full-screen search page ---- */
.sp{position:fixed;left:0;right:0;top:0;height:100%;z-index:44;background:var(--bg);display:flex;flex-direction:column}
.sp.hidden{display:none}
body.sp-open .fab-stack{display:none}
.sp-bar{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid var(--line);background:var(--c-header-bg,var(--bg))}
.sp-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:pointer}
.sp-bar input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--c-search-text,var(--text));border-radius:15px;padding:10px 14px;font-size:14px;outline:none}
.sp-bar input:focus{border-color:var(--gold)}
.sp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px calc(96px + env(safe-area-inset-bottom,0px))}

/* ===== discount banner on the bottom edge of the cover photo (beside the logo) ===== */
.hero-cover .disc-banner.disc-on-cover{position:absolute;z-index:2;bottom:10px;right:12px;left:122px;margin:0;padding:7px 12px;border-radius:14px;font-size:12.5px;line-height:1.5;text-align:center;color:#fff;
  background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.35));border:1px solid rgba(255,255,255,.28);box-shadow:0 6px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;display:grid}
.hero-cover .disc-banner .disc-line{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;margin:0}
.hero-cover .disc-banner .disc-line.on{opacity:1;transform:none;pointer-events:auto}
.hero-cover .disc-banner div+div{margin-top:0}

/* order sending screen (06-order.js) */
#orderSending{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#orderSending.show{display:flex}
#orderSending .osCard{min-width:230px;max-width:80vw;padding:22px 24px;border-radius:18px;background:var(--panel2,#2a2842);border:1px solid var(--line,#3c3a55);color:var(--text,#fff);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#orderSending .osSpin{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;border:4px solid var(--line,#3c3a55);border-top-color:var(--gold,#ffc928);animation:osSpin .8s linear infinite}
#orderSending .osTitle{font-weight:800;font-size:16px}
#orderSending .osSub{margin-top:6px;font-size:13px;color:var(--muted,#9b98ad)}
@keyframes osSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#orderSending .osSpin{animation-duration:2s}}

/* loading placeholder, connection banner, retry/fail cards (01-core.js, 06-order.js) */
.skel{padding:6px 2px}
.skelCard{display:flex;gap:12px;align-items:center;padding:12px;margin:10px 0;border-radius:16px;background:var(--panel2,#2a2842);border:1px solid var(--line,#3c3a55)}
.skelImg{flex:0 0 84px;height:84px;border-radius:14px}
.skelLines{flex:1;display:grid;gap:10px}
.skelLines i{display:block;height:12px;border-radius:8px}.skelLines i.s{width:55%}
.skelImg,.skelLines i{background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.16) 37%,rgba(255,255,255,.06) 63%);background-size:400% 100%;animation:skelMove 1.3s ease infinite}
@keyframes skelMove{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skelImg,.skelLines i{animation:none}}
.netRetry{text-align:center;padding:46px 18px;color:var(--text,#fff)}.netRetry .ico{font-size:38px}.netRetry .t{font-weight:800;margin:10px 0 16px}
#netBanner{position:fixed;top:0;left:0;right:0;z-index:9998;padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top,0px));text-align:center;font-weight:800;font-size:13px;background:#b3261e;color:#fff;transform:translateY(-110%);transition:transform .25s ease}
#netBanner.show{transform:none}
#netFail{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62)}
#netFail.show{display:flex}
#netFail .osCard{min-width:250px;max-width:84vw;padding:22px 22px 18px;border-radius:18px;background:var(--panel2,#2a2842);border:1px solid var(--line,#3c3a55);color:var(--text,#fff);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#netFail .osIcon{font-size:34px}#netFail .osTitle{font-weight:800;font-size:16px;margin-top:6px}
#netFail .osSub{margin:8px 0 14px;font-size:13px;color:var(--muted,#9b98ad);line-height:1.6}
#netFail .osBtns{display:grid;gap:8px}
.passEye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:20px;padding:6px 8px;cursor:pointer;color:inherit}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 5) entry screen (menuEntry): glass card over the page background. Colours come from Admin > Look > "شاشة الدخول" (--c-entry-*); the photo comes from the site background (Admin > background). */
#menuEntry{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--c-entry-glow,#3b0007) 55%,transparent) 0,transparent 70%),var(--bg,#14000a)}
#menuEntry .entry-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#menuEntry .entry-bg::before{content:"";position:absolute;inset:-8%;background-image:var(--eb-img,none);background-size:cover;background-position:center;opacity:var(--eb-vis,1);filter:blur(var(--eb-blur,0px))}
#menuEntry .entry-bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,25,var(--eb-dim,0))}
#menuEntry .entry-card{position:relative;z-index:1}
#menuEntry .entry-card{width:min(100%,460px);background:color-mix(in srgb,var(--c-entry-bg,#ffffff) 88%,transparent);border:1px solid var(--c-entry-border,#ffffff);border-radius:30px;box-shadow:0 24px 64px rgba(0,0,0,.38);color:var(--c-entry-text,#3a1a1a);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);padding:22px 18px 20px}
#menuEntry .entry-brand{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
#menuEntry .eb-line{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c-entry-line,#c8102e))}
#menuEntry .eb-line:last-child{background:linear-gradient(270deg,transparent,var(--c-entry-line,#c8102e))}
#menuEntry .entry-logo{width:78px;height:78px;margin:0;flex:none;border:3px solid var(--c-entry-title,#8a0f1c);box-shadow:0 6px 18px rgba(0,0,0,.25)}
#menuEntry .entry-title{color:var(--c-entry-title,#8a0f1c);font-size:25px}
#menuEntry .entry-sub{color:color-mix(in srgb,var(--c-entry-text,#3a1a1a) 82%,transparent);line-height:1.7;margin:6px 4px 10px}
#menuEntry .hours-box{background:rgba(255,255,255,.55);border:1px solid var(--c-entry-line,#c8102e);color:var(--c-entry-text,#3a1a1a);margin-bottom:12px}
#menuEntry .field label{color:var(--c-entry-text,#3a1a1a);font-weight:800}
#menuEntry .ef-in{display:flex;align-items:center;gap:8px;border:1.5px solid var(--c-entry-line,#c8102e);border-radius:999px;background:rgba(255,255,255,.78);padding:5px 6px 5px 8px}
#menuEntry .ef-in:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-entry-line,#c8102e) 25%,transparent)}
#menuEntry .ef-in input{flex:1;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:var(--c-entry-text,#3a1a1a)!important;padding:8px 10px;font-size:15px;outline:none}
#menuEntry .ef-in input::placeholder{color:color-mix(in srgb,var(--c-entry-text,#3a1a1a) 45%,transparent)}
#menuEntry .ef-ic{width:32px;height:32px;border-radius:50%;background:var(--c-entry-icon,#c8102e);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
#menuEntry .br-opt{border:1.5px solid var(--c-entry-line,#c8102e);background:rgba(255,255,255,.78);color:var(--c-entry-text,#3a1a1a);border-radius:20px}
#menuEntry .br-opt.br-cur{border-color:var(--c-entry-line,#c8102e)}
#menuEntry .br-opt .br-main small{color:color-mix(in srgb,var(--c-entry-text,#3a1a1a) 78%,transparent)}
#menuEntry .br-menu .br-opt.active .br-main small{color:inherit}
#menuEntry .br-opt .br-chev{color:var(--c-entry-line,#c8102e);opacity:1}
#menuEntry .br-opt .br-dot{border-color:var(--c-entry-line,#c8102e)}
#menuEntry .br-menu{background:rgba(255,255,255,.92);border:1px solid var(--c-entry-line,#c8102e)}
#menuEntry .br-empty{color:var(--c-entry-text,#3a1a1a);border-color:var(--c-entry-line,#c8102e)}
#menuEntry .br-clk{display:inline-block;position:relative;width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;margin-inline-end:5px;vertical-align:-2px;box-sizing:border-box}
#menuEntry .br-clk::before{content:"";position:absolute;left:50%;top:1.5px;width:1.5px;height:3.5px;background:currentColor;transform:translateX(-50%)}
#menuEntry .br-clk::after{content:"";position:absolute;left:50%;top:50%;width:3.5px;height:1.5px;background:currentColor;transform:translate(0,-50%)}
#menuEntry .btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--c-entry-btn,#e30d1c),var(--c-entry-btn2,#a50a17));color:var(--c-entry-btn-text,#ffffff);border:1px solid rgba(255,255,255,.45);border-radius:999px;min-height:50px;font-size:17px;font-weight:800;box-shadow:0 10px 24px color-mix(in srgb,var(--c-entry-btn2,#a50a17) 45%,transparent)}

/* "إضافة" button under every item / offer (.price-row only): flat, no shadow and no text shadow. The "اطلب تاني" bar uses the same class but is not in a .price-row, so it is untouched. */
.price-row .order-now-btn,html[data-theme=light] .price-row .order-now-btn{box-shadow:none!important;text-shadow:none!important}
/* Bigger category tabs and card names (+2px). Featured cards (.card.feat h3) are NOT touched: their own rule is more specific and stays as it was. */
.tabs .tab{font-size:clamp(14px,calc(3.5vw + 2px),16px);padding:7px 13px}
.card h3{font-size:clamp(17px,calc(4.4vw + 2px),20px)}
/* the tabs bar grew ~6px: sections jumped to from a tab keep the same clearance under it */
#offers-section,[id^="cat-"]{scroll-margin-top:70px}

/* "الأكثر طلبًا": no fire glow on the card and no glow on its tag (they stay as plain cards/tags). The flame rules above are kept but neutralised here. */
.card.hot{animation:none!important;border-color:var(--c-card-border)!important}
.card.hot::after{content:none!important;display:none!important;animation:none!important}
.card.hot h3 .tag-hot{animation:none!important;text-shadow:none!important;box-shadow:none!important}
/* "الأوردر السابق" chip: hidden while the branch is closed (the old big bar was hidden then too) */
body.branch-closed .chip-reorder{display:none}
/* rating system switched off from the call center */
.ratings-off #ratingWrap,.ratings-off .rate,.ratings-off .rt-ui{display:none!important}

/* ---- Google review offer popup / strip ---- */
.gr-body{text-align:center;padding-top:30px}
.gr-emoji{font-size:64px;line-height:1;margin-bottom:8px}
.gr-strip{margin:8px 0;padding:10px 14px;border-radius:14px;font-weight:900;font-size:14px;text-align:center;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.gr-strip.approved{background:linear-gradient(90deg,#1f9d63,#2fbf7a);color:#fff;border-color:transparent}
.gr-strip.pending{color:var(--gold,#f5c518)}

/* ready-made review ad: picture + live buttons (positions are % of the 1028x1319 design) */
.gr-img-card{position:relative;width:min(92vw,420px,calc(90vh*0.779));container-type:inline-size;filter:drop-shadow(0 14px 34px rgba(0,0,0,.45))}
.gr-img-card img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.gr-img-card button{position:absolute;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:2px}
.gr-img-card .gr-x{left:88.4%;top:1.8%;width:10.2%;aspect-ratio:1;border-radius:50%}
.gr-img-card .gr-go{left:15.8%;top:77.6%;width:68.6%;height:10.8%;border-radius:999px}
.gr-img-card .gr-skip{left:6%;top:94.3%;width:88%;height:4%}
.gr-img-card .gr-sub{position:absolute;left:8%;width:84%;top:89.4%;height:4.4%;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#4a2f33;font-weight:800;font-size:13px;font-size:3.4cqw;text-align:center}

/* ---- Menu promo: Max's design (picture, title, price, button come from the admin ad) ---- */
html .promo-card.pm-card{--pm-red:#c8102e;--pm-red-d:#8d0a16;--pm-gold:#f6b73c;position:relative;width:min(92vw,400px);max-width:none;max-height:92vh;overflow-x:hidden;overflow-y:auto;background:linear-gradient(180deg,#ffffff,#fdf1e9);color:#3a1d1a;border:2px solid #ffffffcc;border-radius:30px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 22px 60px rgba(0,0,0,.5);text-align:center;isolation:isolate}
.pm-card .pm-foot{position:relative;margin:18px -20px -18px;padding:30px 20px 14px}
.pm-card .pm-foot .pm-wave{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pm-card .pm-foot>button{position:relative;z-index:1}
.pm-card .pm-top{position:relative;aspect-ratio:1/.78;z-index:1}
.pm-card .pm-top.no-img{aspect-ratio:auto;height:120px}
.pm-card .pm-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;-webkit-mask-image:linear-gradient(#000 64%,transparent);mask-image:linear-gradient(#000 64%,transparent)}
.pm-card .pm-logo{position:absolute;left:14px;top:12px;width:34%;height:auto;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #ffffffcc)}
.pm-card .pm-x{top:14px;inset-inline-start:auto;right:14px;left:auto;width:40px;height:40px;font-size:24px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.pm-card .pm-body{position:relative;z-index:1;padding:0 20px 18px;margin-top:-26px}
.pm-card .pm-badge{display:inline-block;margin-bottom:8px;background:var(--pm-gold);color:#3a1d1a;font-size:13px;font-weight:900;border-radius:999px;padding:3px 14px}
.pm-card .pm-title{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#d9182f,var(--pm-red-d));border:2px solid var(--pm-gold);border-radius:38px;padding:10px 18px;box-shadow:0 8px 18px rgba(141,10,22,.35)}
.pm-card .pm-title.t-m h3{font-size:22px}
.pm-card .pm-title.t-s h3{font-size:18px}
.pm-card .pm-title h3{margin:0;color:#fff;font-size:28px;line-height:1.25;font-weight:900;flex:0 1 auto;overflow-wrap:anywhere}
.pm-card .pm-spk{flex:0 0 auto;width:26px;height:20px;color:var(--pm-gold)}
.pm-card .pm-spk:last-child{transform:scaleX(-1)}
.pm-card .pm-desc{margin:12px 6px 0;color:#3a2a28;font-size:16px;line-height:1.6;font-weight:600;overflow-wrap:anywhere;white-space:pre-line}
.pm-card .pm-price{display:inline-flex;align-items:baseline;gap:10px;margin-top:14px;background:linear-gradient(180deg,#d9182f,var(--pm-red-d));border:2px solid var(--pm-gold);border-radius:999px;padding:6px 30px;color:#fff;box-shadow:0 8px 18px rgba(141,10,22,.3)}
.pm-card .pm-price b{font-size:34px;line-height:1.2;font-weight:900;color:#fff}
.pm-card .pm-price s{font-size:15px;color:#ffd9d9;text-decoration-thickness:2px}
.pm-card .pm-cta{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin-top:0;padding:14px;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(180deg,#d9182f,var(--pm-red-d));border:2px solid var(--pm-gold);border-radius:999px;box-shadow:0 8px 18px rgba(141,10,22,.4)}
.pm-card .pm-cart{width:30px;height:26px}
.pm-card .pm-skip{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;color:#ffffffee;font-size:11.5px;line-height:1.5;font-weight:700}
.pm-card .pm-skip span{text-wrap:balance}
.pm-card .pm-skip i{flex:1 1 8px;min-width:6px;max-width:26px;height:1px;background:#ffffff88}
.pm-card .pm-leg{position:absolute;z-index:0;width:64px;height:64px;color:#f4d3b6;opacity:.85;pointer-events:none}
.pm-card .pm-leg.a{left:10px;top:50%;transform:rotate(-14deg)}
.pm-card .pm-leg.b{right:8px;top:47%;transform:rotate(18deg)}
.pm-card .pm-leg.c{left:34px;bottom:30%;transform:rotate(8deg);width:52px;height:52px}