:root{
  --cream:#F6EAD2; --navy:#285069; --ink:#2A1E17; --toum:#FFFDF8; --saj:#EAD9B5; --brown:#7A4E31; --line:#d9cbb4; --muted:#5a4a42;
  --display:"Lalezar","IBM Plex Sans Arabic",Impact,"Arial Black",sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--cream);scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--toum)}
html[lang="en"] body [lang="ar"],html[lang="ar"] body [lang="en"]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}

.bar{background:var(--cream);padding:1rem 0}
.bar-in{display:flex;justify-content:space-between;align-items:center}
.mini{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.35rem;text-decoration:none;line-height:1;color:var(--navy)}
.mini img{width:40px;height:40px;border-radius:50%}
.lang{font-weight:600;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.35rem 1rem;cursor:pointer;min-height:44px}
.lang:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}

.hero{background:var(--cream);padding:1rem 0 4.5rem;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem;align-items:center}
.logo{width:100%;max-width:520px;margin-inline:auto}
.hero h1{font-family:var(--display);font-weight:400;color:var(--navy);font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:.98;margin:0 0 1rem}
[dir="rtl"] .hero h1{line-height:1.2}
.hero p{font-size:1.25rem;max-width:30ch;margin:0 0 2rem}
.hero .or{font-size:1rem;margin:1rem 0 0}
.hero .or a{font-weight:600}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--navy);color:var(--toum);text-decoration:none;font-weight:600;font-size:1.1rem;padding:.9rem 1.6rem;border-radius:999px;min-height:48px;border:0;cursor:pointer}
.cta:hover{background:var(--brown)}
.cta svg{width:22px;height:22px;flex:none}
.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.75rem 1.4rem;min-height:48px;font-weight:600;cursor:pointer}
.ghost:hover{border-color:var(--navy);color:var(--navy)}

.menu{padding:4.5rem 0 6rem}
.menu h2,.visit h2{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;margin:0 0 .5rem}
.menu .note{margin:0 0 2.5rem;color:var(--muted)}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 4rem}
.group h3{font-family:var(--display);font-weight:400;font-size:1.8rem;margin:0 0 .5rem;color:var(--navy);border-bottom:3px solid var(--ink);padding-bottom:.25rem}
.group ul{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"code name price ctl" ". desc desc ctl";gap:.1rem .75rem;align-items:center;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.item .code{grid-area:code;font-weight:600;font-size:.8rem;color:var(--navy);border:1.5px solid var(--navy);border-radius:6px;padding:0 .35rem;line-height:1.5;direction:ltr}
.item b{grid-area:name;font-weight:600}
.item .price{grid-area:price;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr}
.item small{grid-area:desc;color:var(--muted);font-size:.95rem}
.item .ctl{grid-area:ctl}
.ctl{display:flex;align-items:center;gap:.25rem}
.ctl button{width:40px;height:40px;border-radius:50%;border:2px solid var(--navy);background:var(--toum);color:var(--navy);font-size:1.3rem;font-weight:600;line-height:1;cursor:pointer;display:grid;place-items:center}
.ctl button.add{background:var(--navy);color:var(--toum)}
.ctl .q{min-width:1.6rem;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.item.in{background:linear-gradient(90deg,rgba(40,80,105,.07),transparent)}

.visit{background:var(--saj);padding:4.5rem 0 7rem}
.visit-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
.visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem}
.visit dt{font-weight:600}.visit dd{margin:0}
.visit address{font-style:normal;font-size:1.2rem;margin-bottom:1rem}
.visit .maps{font-weight:600}

footer{background:var(--ink);color:var(--toum);padding:2.5rem 0 7rem;font-size:.95rem}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:1.5rem}
footer a{color:var(--toum)}

.orderbar{position:fixed;inset-inline:0;bottom:0;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:10;pointer-events:none}
.orderbar .cta{pointer-events:auto;box-shadow:0 6px 0 var(--ink);width:min(520px,100%)}
.orderbar .empty{display:none}
.orderbar .filled{justify-content:space-between}
.ob-count{background:var(--toum);color:var(--navy);border-radius:999px;min-width:2rem;padding:0 .5rem}
@media (max-width:760px){.orderbar .empty:not([hidden]){display:inline-flex}}

dialog{border:0;padding:0;width:min(560px,100%);max-height:100%;background:var(--toum);color:var(--ink);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(42,30,23,.55)}
.dlg{padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));max-height:90vh;overflow:auto}
.dlg-head{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}
.dlg-head h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0;flex:1;color:var(--navy)}
.ref{font-size:.9rem;color:var(--muted)}.ref b{color:var(--ink)}
.x{width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);font-size:1.6rem;cursor:pointer}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.lines .code{font-weight:600;font-size:.8rem;color:var(--navy);direction:ltr}
.lines .amt{font-variant-numeric:tabular-nums;direction:ltr;font-weight:600}
.lines .emptymsg{display:block;color:var(--muted);border:0}
.sums{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;margin:1rem 0 1.25rem;font-variant-numeric:tabular-nums}
.sums dd{margin:0;text-align:end}
.sums .tot{font-weight:600;font-size:1.2rem}
form label{display:grid;gap:.3rem;font-weight:600;font-size:.95rem;margin-bottom:.85rem}
input,select,textarea{font:inherit;font-weight:400;border:2px solid var(--line);border-radius:10px;padding:.65rem .8rem;background:#fff;color:var(--ink);width:100%;min-height:48px}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none}
input[aria-invalid="true"]{border-color:#B3261E}
fieldset{border:0;padding:0;margin:0 0 .85rem;display:flex;flex-wrap:wrap;gap:.5rem}
legend{font-weight:600;font-size:.95rem;margin-bottom:.3rem;width:100%}
.chip{display:inline-flex!important;align-items:center;gap:.4rem;border:2px solid var(--line);border-radius:999px;padding:.4rem 1rem;margin:0!important;cursor:pointer;min-height:44px}
.chip input{width:auto;min-height:0;accent-color:var(--navy)}
.chip:has(input:checked){border-color:var(--navy);background:rgba(40,80,105,.08)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:#B3261E;font-weight:600;margin:.25rem 0 .75rem}
.actions{display:grid;gap:.6rem}
.view .cta,.view .ghost{width:100%}
.say{margin:.25rem 0 .5rem}
.bigref{font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--navy);margin:.25rem 0 1rem;text-align:center;letter-spacing:.04em}
.calllines{list-style:none;margin:0 0 .75rem;padding:.75rem 1rem;background:var(--cream);border-radius:12px;font-size:1.15rem;font-weight:600}
.calllines li{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
.calllines .nm{font-weight:400}
.calltotal{font-size:1.15rem;margin:0 0 .5rem}
.callmeta{color:var(--muted);margin:0 0 1rem;white-space:pre-line}
.view[data-view="call"] .cta,.view[data-view="sent"] .cta{margin-bottom:.6rem}

.consent{position:fixed;inset-inline:1rem;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));max-width:480px;background:var(--toum);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:1rem 1.1rem;box-shadow:6px 6px 0 var(--ink);z-index:20;font-size:.95rem}
.consent[hidden]{display:none}
.consent p{margin:0 0 .75rem}
.consent .row{display:flex;gap:.6rem;flex-wrap:wrap}
.consent button{font-weight:600;border-radius:999px;padding:.5rem 1.1rem;min-height:44px;cursor:pointer;border:2px solid var(--ink)}
.consent .yes{background:var(--ink);color:var(--toum)}.consent .no{background:transparent;color:var(--ink)}

[dir="rtl"] body{font-size:1.125rem}

@media (max-width:760px){
  .hero{padding-bottom:3rem}
  .hero-in,.board,.visit-in{grid-template-columns:1fr}
  .logo{max-width:340px}
  .hero .copy{text-align:center}
  .hero p{margin-inline:auto}
  dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:18px 18px 0 0}
  .dlg{max-height:92vh}
}
@media (prefers-reduced-motion:no-preference){
  .logo{animation:drop .7s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes drop{from{transform:translateY(-24px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
  .ob-count.bump{animation:bump .3s ease}
  @keyframes bump{50%{transform:scale(1.35)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}