/* طلة القدس — Talet Al Qodus · the menu is written on the sky */

:root{
  /* pigments sampled from the badge */
  --espresso:#211611;
  --brown:#45312A;
  --bark:#5A3D30;
  --ember:#E2542B;
  --flame:#F0813A;
  --amber:#F5A33F;
  --gold:#F8C64B;
  --cream:#F3E8D0;
  --sand:#E0CCA4;

  /* live sky, rewritten by app.js every frame */
  --sky1:#2C2440; --sky2:#6B4054; --sky3:#C4643E; --sky4:#F2B36B;
  --sunX:78%; --sunY:70%; --sunOp:1; --moonOp:0; --stars:0; --ridgeShift:0px;
  --wxCloud:0;

  --hex:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --glass:rgba(24,15,12,.72);
  --glass-hi:rgba(46,30,24,.78);
  --hair:rgba(243,232,208,.14);

  --ar-display:'Lalezar', 'Cairo', system-ui, sans-serif;
  --ar-body:'Cairo', system-ui, sans-serif;
  --en-display:'Fraunces', Georgia, serif;
  --en-body:'Outfit', system-ui, sans-serif;

  --display:var(--ar-display);
  --body:var(--ar-body);

  --bar-h:60px; --rail-h:66px;
}
html[lang="en"]{ --display:var(--en-display); --body:var(--en-body); }

/* ink that follows the sun — cream over dark skies,
   espresso when the scroll passes through the bright noon sky */
body{
  --ink:#FBF3DE; --ink-rgb:251,243,222;
  --ink-soft:#EDDCBB; --accent:var(--gold);
  --tsh:0 1px 2px rgba(16,10,7,.65), 0 2px 14px rgba(16,10,7,.45);
}
body.sky-bright{
  --ink:#1E1209; --ink-rgb:30,18,9;
  --ink-soft:#4E3627; --accent:#A93A16;
  --tsh:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--espresso);
  color:var(--cream);
  overflow-x:hidden;
  scroll-padding-top:calc(var(--bar-h) + var(--rail-h) + 12px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:100%;height:100%;display:block}
::selection{background:var(--ember);color:var(--cream)}

/* ═══════════════════════════ THE SKY ═══════════════════════════ */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sky__grad{
  position:absolute;inset:-2px;
  background:linear-gradient(to bottom,var(--sky1) 0%,var(--sky2) 33%,var(--sky3) 63%,var(--sky4) 100%);
}
.sky__glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at var(--sunX) var(--sunY),
    rgba(255,226,168,.42) 0%,rgba(255,180,100,.18) 22%,transparent 52%);
  mix-blend-mode:screen;opacity:calc(var(--sunOp) * .9 + .1);
}
.sky__stars{
  position:absolute;inset:0;opacity:var(--stars);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 27% 32%,#ffe9c4,transparent),
    radial-gradient(1.6px 1.6px at 41% 9%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 58% 24%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 69% 6%,#ffe3b8,transparent),
    radial-gradient(1.2px 1.2px at 79% 30%,#fff,transparent),
    radial-gradient(1.7px 1.7px at 88% 16%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 33% 46%,#ffeccd,transparent),
    radial-gradient(1.3px 1.3px at 6% 38%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 51% 52%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 94% 44%,#ffe9c4,transparent),
    radial-gradient(1px 1px at 20% 60%,#fff,transparent);
  animation:twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{filter:brightness(.75)}to{filter:brightness(1.25)}}

/* deep-night extras: a finer second star field that surfaces late, a faint
   milky-way band, and cool moonlight that follows the moon's position */
.sky__stars2{position:absolute;inset:0;opacity:calc(var(--stars) * var(--stars));
  background-image:
    radial-gradient(1px 1px at 9% 22%,#fff,transparent),
    radial-gradient(.9px .9px at 17% 8%,#E8ECFF,transparent),
    radial-gradient(1px 1px at 24% 41%,#fff,transparent),
    radial-gradient(.8px .8px at 31% 17%,#FFF3DD,transparent),
    radial-gradient(1.1px 1.1px at 38% 55%,#fff,transparent),
    radial-gradient(.9px .9px at 46% 29%,#E8ECFF,transparent),
    radial-gradient(1px 1px at 54% 12%,#fff,transparent),
    radial-gradient(.8px .8px at 61% 44%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 67% 23%,#FFF3DD,transparent),
    radial-gradient(.9px .9px at 74% 50%,#fff,transparent),
    radial-gradient(1px 1px at 82% 9%,#E8ECFF,transparent),
    radial-gradient(.8px .8px at 90% 33%,#fff,transparent),
    radial-gradient(1px 1px at 96% 55%,#FFF3DD,transparent),
    radial-gradient(6px 6px at 43% 19%,rgba(255,255,255,.22),transparent),
    radial-gradient(2px 2px at 43% 19%,#fff,transparent),
    radial-gradient(7px 7px at 85% 47%,rgba(232,236,255,.2),transparent),
    radial-gradient(2.2px 2.2px at 85% 47%,#F4F6FF,transparent);
  animation:twinkle 7.5s ease-in-out infinite alternate-reverse}
.sky__milky{position:absolute;inset:-12%;
  background:linear-gradient(112deg,transparent 40%,rgba(222,226,255,.05) 47%,
    rgba(255,244,222,.1) 52%,rgba(222,226,255,.05) 57%,transparent 64%);
  filter:blur(16px);mix-blend-mode:screen;opacity:calc(var(--stars) * .85)}
.sky__moonglow{position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--moonOp);
  background:radial-gradient(circle at var(--moonX,28%) var(--moonY,40%),
    rgba(216,222,246,.22) 0%,rgba(192,202,236,.09) 26%,transparent 52%)}

.sky__orb{position:absolute;left:var(--sunX);top:var(--sunY);transform:translate(-50%,-50%);
  width:min(23vw,150px);aspect-ratio:1;will-change:left,top}
.sun{opacity:var(--sunOp)}
.sun i{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF8E4 0%,var(--cream) 42%,#F7D083 74%,#F0A845 100%);
  box-shadow:0 0 60px 22px rgba(255,214,140,.42),0 0 160px 70px rgba(240,129,58,.24);
  animation:sunbreathe 7s ease-in-out infinite}
@keyframes sunbreathe{
  0%,100%{box-shadow:0 0 60px 22px rgba(255,214,140,.42),0 0 160px 70px rgba(240,129,58,.24)}
  50%{box-shadow:0 0 74px 30px rgba(255,214,140,.5),0 0 190px 84px rgba(240,129,58,.3)}}
.moon{opacity:var(--moonOp);width:min(16vw,104px)}
/* a real photographed moon — warmed slightly to live in this sunset world */
.moon i{display:block;position:relative;width:100%;height:100%;border-radius:50%;
  background:url('../img/moon.webp') center/cover no-repeat;
  filter:sepia(.14) saturate(1.05) brightness(1.05);
  box-shadow:0 0 38px 12px rgba(240,234,210,.3),0 0 110px 42px rgba(206,212,238,.16)}
/* whisper of warm atmosphere on the sunlit limb */
.moon i::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,244,220,.14),transparent 55%)}

.birds{position:absolute;top:16%;left:0;width:100%;height:22vh;color:rgba(33,22,17,.62);
  opacity:calc(1 - var(--stars));animation:drift 46s linear infinite}
@keyframes drift{from{transform:translateX(6%)}to{transform:translateX(-14%)}}

.ridge{position:absolute;left:-4%;width:108%;bottom:0;color:var(--brown);will-change:transform}
.ridge svg{fill:currentColor}
.ridge--far{height:46vh;color:#6B4939;opacity:.55;transform:translateY(calc(var(--ridgeShift) * .18))}
.ridge--mid{height:38vh;color:#4B3328;opacity:.82;transform:translateY(calc(var(--ridgeShift) * .34))}
.ridge--near{height:30vh;color:#2A1C15;transform:translateY(calc(var(--ridgeShift) * .55))}

/* ══════════════ LIVE WEATHER LAYERS — As-Salt's real sky ══════════════ */
.wx{position:absolute;inset:0;opacity:0;transition:opacity 2s ease;pointer-events:none}
.wx.is-on{opacity:1}

.wx--clouds.is-on{opacity:calc(var(--wxCloud) * (1 - var(--stars) * .45))}
.cloud{position:absolute;border-radius:50%;filter:blur(26px);background:rgba(255,240,222,.55)}
.cloud--a{width:52vw;height:11vh;top:7%;left:8%;animation:cloudDrift 74s ease-in-out infinite alternate}
.cloud--b{width:38vw;height:9vh;top:19%;left:55%;opacity:.8;animation:cloudDrift2 58s ease-in-out infinite alternate}
.cloud--c{width:60vw;height:12vh;top:31%;left:-12%;opacity:.65;animation:cloudDrift 92s ease-in-out infinite alternate-reverse}
.cloud--d{width:30vw;height:7vh;top:12%;left:76%;opacity:.7;animation:cloudDrift2 66s ease-in-out infinite alternate}
@keyframes cloudDrift{from{transform:translateX(-7vw)}to{transform:translateX(9vw)}}
@keyframes cloudDrift2{from{transform:translateX(6vw)}to{transform:translateX(-8vw)}}

.wx--rain::before,.wx--rain::after{content:'';position:absolute;inset:-140px 0 0 0;background-repeat:repeat}
.wx--rain::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='110'%3E%3Cg stroke='%23CFE0FF' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='12' y1='6' x2='9' y2='26' opacity='.5'/%3E%3Cline x1='40' y1='44' x2='37' y2='64' opacity='.65'/%3E%3Cline x1='62' y1='14' x2='59' y2='32' opacity='.4'/%3E%3Cline x1='24' y1='78' x2='21' y2='98' opacity='.55'/%3E%3Cline x1='54' y1='84' x2='51' y2='100' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 110px;animation:rainFall .55s linear infinite}
.wx--rain::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='110'%3E%3Cg stroke='%23CFE0FF' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='20' y1='16' x2='18' y2='30' opacity='.35'/%3E%3Cline x1='52' y1='58' x2='50' y2='74' opacity='.3'/%3E%3Cline x1='34' y1='92' x2='32' y2='104' opacity='.25'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 158px;animation:rainFall2 .85s linear infinite;opacity:.8}
@keyframes rainFall{from{background-position:0 -110px}to{background-position:0 0}}
@keyframes rainFall2{from{background-position:0 -158px}to{background-position:0 0}}

.wx--snow::before,.wx--snow::after{content:'';position:absolute;inset:-160px 0 0 0;background-repeat:repeat}
.wx--snow::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='14' cy='12' r='2' opacity='.8'/%3E%3Ccircle cx='58' cy='40' r='1.6' opacity='.6'/%3E%3Ccircle cx='80' cy='14' r='1.3' opacity='.5'/%3E%3Ccircle cx='32' cy='74' r='2.2' opacity='.75'/%3E%3Ccircle cx='68' cy='102' r='1.5' opacity='.55'/%3E%3Ccircle cx='10' cy='112' r='1.8' opacity='.65'/%3E%3C/g%3E%3C/svg%3E");
  background-size:90px 130px;animation:snowFall 7s linear infinite,snowSway 5s ease-in-out infinite alternate}
.wx--snow::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='44' cy='24' r='1.2' opacity='.4'/%3E%3Ccircle cx='20' cy='58' r='1' opacity='.35'/%3E%3Ccircle cx='74' cy='78' r='1.3' opacity='.4'/%3E%3Ccircle cx='50' cy='116' r='1' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:132px 190px;animation:snowFall2 11s linear infinite,snowSway 7s ease-in-out infinite alternate-reverse}
@keyframes snowFall{from{background-position:0 -130px}to{background-position:0 0}}
@keyframes snowFall2{from{background-position:0 -190px}to{background-position:0 0}}
@keyframes snowSway{from{transform:translateX(-8px)}to{transform:translateX(8px)}}

.wx--fog::before,.wx--fog::after{content:'';position:absolute;left:-10%;width:120%;
  border-radius:50%;filter:blur(34px);background:rgba(232,224,210,.26)}
.wx--fog::before{top:14%;height:22%;animation:cloudDrift 48s ease-in-out infinite alternate}
.wx--fog::after{top:44%;height:26%;opacity:.8;animation:cloudDrift2 62s ease-in-out infinite alternate}

.wx--flash{background:radial-gradient(62% 42% at 68% 8%,rgba(255,255,255,.95),transparent 72%)}
.wx--flash.is-on{opacity:1;animation:flash 9s linear infinite}
@keyframes flash{0%,91%,100%{opacity:0}92%{opacity:.55}93%{opacity:.08}94.5%{opacity:.4}96%{opacity:0}}

/* shooting star — spawned by JS while the stars are out */
.sstar{position:absolute;width:110px;height:2px;pointer-events:none;
  background:linear-gradient(to left,rgba(255,255,255,.95),transparent 85%);
  border-radius:2px;transform:rotate(24deg);opacity:0;
  animation:shoot 1.3s ease-in forwards}
html[dir="rtl"] .sstar{transform:rotate(156deg)}
@keyframes shoot{
  0%{opacity:0;translate:0 0}
  12%{opacity:.95}
  100%{opacity:0;translate:-34vw 22vh}}

/* ══════════════════════════ HEX MARK ══════════════════════════ */
.hexmark{position:relative;display:block;aspect-ratio:1/1.06;flex:none;
  clip-path:var(--hex);background:linear-gradient(150deg,var(--gold),var(--ember) 55%,var(--brown));}
.hexmark img,.hexmark>span{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);
  clip-path:var(--hex);object-fit:cover;background:var(--espresso)}
.hexmark--sm{width:34px}
.hexmark--md{width:64px}
.hexmark--lg{width:min(62vw,260px)}

.mark{display:block;flex:none;height:auto;
  filter:drop-shadow(0 6px 14px rgba(16,9,6,.55))}
.mark--sm{width:36px}
.mark--md{width:76px}
.mark--xl{width:min(58vw,240px);filter:drop-shadow(0 24px 44px rgba(16,9,6,.6))}

/* placeholder when a dish has no photo — a tiny sunset of its own */
.hexph{position:relative;display:block;aspect-ratio:1/1.06;clip-path:var(--hex);
  background:linear-gradient(to bottom,#3A2A3E,#8A4A3C 42%,var(--flame) 72%,var(--gold));}
.hexph::before{content:'';position:absolute;left:50%;top:34%;width:26%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;background:var(--cream);opacity:.9}
.hexph::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;background:var(--espresso);
  clip-path:polygon(0 100%,0 52%,22% 16%,44% 54%,60% 30%,82% 66%,100% 34%,100% 100%)}

/* ══════════════════════════ TOP BAR ══════════════════════════ */
.bar{position:fixed;inset-inline:0;top:0;z-index:60;height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--hair);
  transform:translateY(-102%);transition:transform .38s cubic-bezier(.4,0,.2,1)}
.bar.is-on{transform:none}
.bar__brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;min-width:0}
.bar__names{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bar__names b{font-family:var(--display);font-size:16px;font-weight:400;letter-spacing:.01em}
html[lang="en"] .bar__names b{font-weight:600}
.bar__names i{font-style:normal;font-size:10.5px;color:var(--gold);opacity:.85;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bar__tools{display:flex;align-items:center;gap:7px}
.iconbtn{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;
  background:rgba(243,232,208,.07);border:1px solid var(--hair);color:var(--cream);
  transition:background .2s,transform .12s}
.iconbtn:active{transform:scale(.93)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn--lang{font-family:var(--en-body);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  width:auto;padding:0 11px;color:var(--gold)}
.iconbtn--rate svg{fill:none;stroke:var(--gold)}
.iconbtn--bill{position:relative;background:linear-gradient(145deg,var(--ember),var(--flame));
  border-color:rgba(248,198,75,.4)}
.pip{position:absolute;top:-5px;inset-inline-end:-5px;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;background:var(--gold);color:var(--espresso);font-family:var(--en-body);
  font-size:11px;font-weight:600;display:grid;place-items:center;border:2px solid var(--espresso)}
.pip[hidden]{display:none}

/* ══════════════════════════ RAIL ══════════════════════════ */
.rail{position:fixed;inset-inline:0;top:var(--bar-h);z-index:55;height:var(--rail-h);
  background:linear-gradient(to bottom,var(--glass),rgba(24,15,12,.5));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  transform:translateY(-140%);transition:transform .38s cubic-bezier(.4,0,.2,1) .04s}
.rail::-webkit-scrollbar{display:none}
.rail.is-on{transform:none}
.rail__track{display:flex;gap:7px;padding:8px 14px;height:100%;align-items:center;width:max-content}
.chip{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;
  background:rgba(243,232,208,.06);border:1px solid var(--hair);white-space:nowrap;
  transition:background .2s,border-color .2s}
html[dir="rtl"] .chip{padding:5px 5px 5px 12px}
.chip__hex{width:28px}
.chip__t{font-family:var(--display);font-size:13.5px;font-weight:400;opacity:.86}
html[lang="en"] .chip__t{font-weight:500;font-size:12.5px}
.chip.is-active{background:linear-gradient(150deg,rgba(226,84,43,.9),rgba(245,163,63,.85));
  border-color:var(--gold)}
.chip.is-active .chip__t{opacity:1;color:#fff}

/* ══════════════════════════ HERO ══════════════════════════ */
main{position:relative;z-index:2}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:56px 22px 96px;gap:14px}
.hero__badge{filter:drop-shadow(0 26px 46px rgba(20,10,6,.6))}
.hero__title{font-family:var(--display);font-size:clamp(44px,13vw,86px);font-weight:400;
  line-height:1;letter-spacing:.01em;margin-top:6px;
  background:linear-gradient(180deg,#FFF6E2,var(--gold) 58%,var(--flame));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 14px rgba(20,10,6,.5))}
html[lang="en"] .hero__title{font-size:clamp(34px,9.5vw,64px);font-weight:600;letter-spacing:-.01em}
.hero__sub{font-size:13px;letter-spacing:.34em;color:var(--sand);opacity:.9;
  text-transform:uppercase;margin-top:-4px}

/* live As-Salt weather chip */
.wxchip{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 16px;
  border-radius:999px;border:1px solid rgba(248,198,75,.3);background:rgba(20,12,8,.34);
  font-size:12.5px;color:var(--cream);letter-spacing:.02em;
  animation:rise .6s cubic-bezier(.2,.8,.3,1) both .3s}
.wxchip[hidden]{display:none}
.wxchip b{font-family:var(--en-display);font-weight:600;font-size:15px;color:var(--gold)}
.wxchip i{font-style:normal;opacity:.85}
.wxchip .wxchip__ico{font-size:15px;line-height:1}

.hero__scroll{position:absolute;bottom:34px;display:flex;flex-direction:column;align-items:center;
  gap:9px;font-size:11.5px;letter-spacing:.2em;color:var(--sand);opacity:.75}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);
  animation:fall 2.1s ease-in-out infinite}
@keyframes fall{0%{transform:scaleY(.15);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);transform-origin:bottom;opacity:0}}

/* ═══════════════════ NOW-CARD (time of day nudge) ═══════════════════ */
.nowcard{position:relative;z-index:3;margin:0 auto 26px;max-width:640px;
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:var(--glass-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(248,198,75,.28);
  border-radius:16px;box-shadow:0 18px 40px rgba(20,10,6,.4);
  margin-inline:14px;animation:rise .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nowcard__dot{flex:none;font-size:20px;line-height:1;
  filter:drop-shadow(0 0 9px rgba(248,198,75,.5));animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.1);opacity:1}}
.nowcard p{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.nowcard b{font-family:var(--display);font-size:15px;font-weight:400}
.nowcard i{font-style:normal;font-size:11.5px;color:var(--sand);opacity:.8}
.nowcard button:not(.nowcard__x){flex:none;padding:8px 13px;border-radius:10px;font-size:12px;
  background:linear-gradient(145deg,var(--ember),var(--amber));color:#fff;font-weight:600}
.nowcard__x{width:26px;height:26px;flex:none;opacity:.5;font-size:13px}

/* ══════════════ SECTIONS — written straight on the sky ══════════════ */
.sec{padding:0 22px;scroll-margin-top:calc(var(--bar-h) + var(--rail-h) + 10px)}

/* a window of pure sky between sections — the sun's own room */
.skywin{height:clamp(84px,13vh,150px);pointer-events:none}

.shead{position:relative;padding:10px 0 4px;max-width:100%}
.shead__ghost{position:absolute;inset-inline-end:-6px;top:-20px;z-index:-1;
  font-family:var(--en-display);font-weight:900;font-size:clamp(64px,19vw,104px);
  line-height:1;letter-spacing:-.02em;color:var(--ink);opacity:.08;
  pointer-events:none;user-select:none;transition:color .5s}
.shead__eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;
  letter-spacing:.14em;color:var(--accent);transition:color .5s;text-shadow:var(--tsh)}
.shead__eyebrow i{font-style:normal;font-size:13px;letter-spacing:0}
.shead__count{color:var(--ink-soft);letter-spacing:.08em;font-family:var(--en-body);
  font-size:10.5px;transition:color .5s}
.shead__title{font-family:var(--display);font-size:clamp(32px,9vw,46px);font-weight:400;
  line-height:1.16;color:var(--ink);margin-top:6px;transition:color .5s;text-shadow:var(--tsh)}
html[lang="en"] .shead__title{font-weight:600;letter-spacing:-.015em}
.shead__line{font-size:14px;font-weight:600;color:var(--ink-soft);margin-top:2px;transition:color .5s;
  text-shadow:var(--tsh)}
html[lang="en"] .shead__line{font-style:italic}
.shead__rule{display:block;height:1px;margin-top:14px;
  background:linear-gradient(to var(--rule-dir,left),var(--accent),transparent 70%);
  opacity:.55;transition:background .5s}
html[dir="rtl"] .shead__rule{--rule-dir:left}
html[lang="en"] .shead__rule{--rule-dir:right}

/* ── the rows: nothing between you and the sky but letters ── */
.list{list-style:none;margin-top:4px}
.row{display:flex;align-items:center;gap:11px;padding:12px 2px;
  border-bottom:1px solid rgba(var(--ink-rgb),.13);cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:6px;
  transition:background .18s,border-color .5s}
.row:last-child{border-bottom:0}
@media (hover:hover){.row:hover{background:rgba(var(--ink-rgb),.06)}}
.row:active{background:rgba(var(--ink-rgb),.09)}
.row__art{width:46px;flex:none;filter:drop-shadow(0 4px 10px rgba(16,10,7,.35))}
.row__main{min-width:0;display:flex;flex-direction:column;gap:1px;flex-shrink:1}
.row__name{font-family:var(--display);font-size:17px;font-weight:400;line-height:1.32;
  color:var(--ink);transition:color .5s;text-shadow:var(--tsh)}
html[lang="en"] .row__name{font-weight:600;font-size:15px}
.row__sig{color:var(--accent);font-size:11px;vertical-align:2px;transition:color .5s}
.row__desc{font-size:12px;font-weight:600;line-height:1.5;color:var(--ink-soft);transition:color .5s;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:var(--tsh)}
.row__lead{flex:1;min-width:14px;height:2px;align-self:center;opacity:.42;
  background-image:radial-gradient(circle,rgba(var(--ink-rgb),.7) 1px,transparent 1.3px);
  background-size:8px 2px;background-repeat:repeat-x;background-position:center}
.price{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--en-body);flex:none}
.price b{font-family:var(--en-display);font-size:18px;font-weight:700;color:var(--accent);
  letter-spacing:-.01em;line-height:1;transition:color .5s;text-shadow:var(--tsh)}
.price i{font-style:normal;font-size:9.5px;font-family:var(--body);color:var(--ink-soft);
  opacity:.8;transition:color .5s}
.price--lg b{font-size:30px;color:var(--gold)}
.price--lg i{font-size:12px;color:var(--sand)}

.addbtn{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid rgba(var(--ink-rgb),.4);color:var(--ink);font-size:18px;line-height:1;
  transition:transform .14s,border-color .5s,color .5s,background .2s}
.addbtn:active{transform:scale(.86)}
.addbtn.is-done{background:linear-gradient(145deg,#4F7A3C,#6B9B4A);border-color:transparent;color:#fff}
.addbtn--wide{width:auto;height:44px;padding:0 22px;font-family:var(--body);font-size:14px;
  font-weight:700;border-radius:13px;border:0;color:#fff;
  background:linear-gradient(145deg,var(--ember),var(--flame));
  box-shadow:0 5px 14px rgba(226,84,43,.34)}

/* scroll reveal — rows drift up as the sky passes */
body.js-reveal .row,body.js-reveal .shead{opacity:0}
body.js-reveal .in-view{opacity:1;animation:lift .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes lift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ══════════════════════════ FOOTER ══════════════════════════ */
.foot{text-align:center;padding:56px 22px 70px;display:flex;flex-direction:column;align-items:center;
  gap:5px}
.foot .mark{margin-bottom:10px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.foot__name{font-family:var(--display);font-size:26px;font-weight:400;color:var(--gold)}
.foot__tag{font-size:11px;letter-spacing:.3em;color:var(--sand);opacity:.75;text-transform:uppercase}
.foot__addr{font-size:12px;color:var(--sand);opacity:.8;margin-top:10px}
.foot__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.foot__contact a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--hair);color:var(--cream);text-decoration:none;font-size:12px;
  background:rgba(243,232,208,.06);transition:background .2s,border-color .2s}
.foot__contact a:hover{background:rgba(243,232,208,.12);border-color:rgba(248,198,75,.4)}
.foot__rate{margin-top:16px;padding:11px 24px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:#fff;background:linear-gradient(145deg,var(--ember),var(--amber));
  box-shadow:0 10px 26px rgba(226,84,43,.35)}
.foot__note{font-size:11.5px;color:var(--sand);opacity:.55;margin-top:16px;max-width:340px;line-height:1.6}
.foot__sun{font-family:var(--display);font-size:15px;color:var(--cream);opacity:.75;margin-top:12px}

/* ══════════════════════════ MODALS ══════════════════════════ */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(12,7,5,.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:fade .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.dish{position:relative;z-index:1;width:min(100%,400px);max-height:88svh;overflow-y:auto;
  padding:22px 20px 20px;border-radius:26px;text-align:center;
  background:linear-gradient(180deg,rgba(62,36,24,.94),rgba(26,17,13,.97));
  border:1px solid rgba(248,198,75,.24);box-shadow:0 34px 70px rgba(0,0,0,.6);
  animation:pop .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.dish__x{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(243,232,208,.1);font-size:14px;z-index:2}
.dish__art{display:grid;place-items:center;margin-bottom:14px}
.dish__cat{font-size:10.5px;letter-spacing:.22em;color:var(--gold);opacity:.85;text-transform:uppercase}
.dish__name{font-family:var(--display);font-size:26px;font-weight:400;line-height:1.28;margin-top:5px;
  color:var(--cream)}
html[lang="en"] .dish__name{font-weight:600}
.dish__desc{font-size:13px;line-height:1.65;color:var(--sand);opacity:.85;margin-top:9px}
.dish__desc:empty{display:none}
.dish__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--hair)}

/* ── search ── */
.modal--search{align-items:flex-start;padding-top:calc(var(--bar-h) + 12px)}
.finder{position:relative;z-index:1;width:min(100%,560px);max-height:82svh;display:flex;
  flex-direction:column;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(52,32,22,.95),rgba(24,16,12,.97));
  border:1px solid rgba(248,198,75,.2);box-shadow:0 30px 66px rgba(0,0,0,.6);
  animation:pop .28s cubic-bezier(.2,.9,.3,1) both}
.finder__head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--hair)}
.finder__icon{width:19px;height:19px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.8;
  stroke-linecap:round}
#q{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--cream);
  font-family:var(--body);font-size:16px}
#q::placeholder{color:var(--sand);opacity:.45}
.finder__x{width:28px;height:28px;flex:none;border-radius:50%;background:rgba(243,232,208,.09);
  font-size:13px}
.finder__body{overflow-y:auto;padding:8px}
.res{display:flex;align-items:center;gap:11px;padding:9px;border-radius:14px;width:100%;
  text-align:start;transition:background .15s;color:var(--cream)}
.res:hover{background:rgba(243,232,208,.07)}
.res__hex{width:44px;flex:none}
.res__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.res__n{font-family:var(--display);font-size:14.5px;font-weight:400;line-height:1.3}
html[lang="en"] .res__n{font-weight:600;font-size:13.5px}
.res__c{font-size:10.5px;color:var(--gold);opacity:.75}
.res .price b{color:var(--gold)}
.res .price i{color:var(--sand)}
.res__empty{padding:34px 18px;text-align:center;color:var(--sand);opacity:.6;font-size:13.5px}

/* ── bill sheet ── */
.modal--sheet{align-items:flex-end;padding:0}
.sheet{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;max-height:84svh;
  display:flex;flex-direction:column;border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,rgba(56,34,23,.97),rgba(22,15,11,.99));
  border:1px solid rgba(248,198,75,.2);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6);
  animation:slideup .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sheet__grip{height:22px;display:grid;place-items:center;cursor:pointer;flex:none}
.sheet__grip::before{content:'';width:40px;height:4px;border-radius:3px;background:rgba(243,232,208,.28)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 12px;
  border-bottom:1px solid var(--hair);flex:none}
.sheet__head h3{font-family:var(--display);font-size:21px;font-weight:400}
.sheet__clear{font-size:12px;color:var(--sand);opacity:.65;padding:6px 10px;border-radius:8px}
.sheet__body{overflow-y:auto;padding:8px 14px;flex:1;min-height:70px}
.sheet__foot{padding:14px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);
  flex:none;background:rgba(20,13,9,.6)}
.sheet__total{display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--display);font-size:17px}
.sheet__total b{font-family:var(--en-display);font-size:27px;font-weight:600;color:var(--gold)}
.sheet__total i{font-style:normal;font-size:12px;font-family:var(--body);opacity:.7}
.sheet__hint{font-size:11px;color:var(--sand);opacity:.55;margin-top:7px;text-align:center}
.line{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid rgba(243,232,208,.07)}
.line:last-child{border-bottom:0}
.line__hex{width:40px;flex:none}
.line__t{flex:1;min-width:0}
.line__n{font-family:var(--display);font-size:14px;font-weight:400;line-height:1.3}
html[lang="en"] .line__n{font-weight:600;font-size:13px}
.line__p{font-family:var(--en-display);font-size:12px;color:var(--gold);opacity:.9;margin-top:1px}
.qty{display:flex;align-items:center;gap:2px;flex:none;background:rgba(243,232,208,.07);
  border-radius:10px;padding:2px;border:1px solid var(--hair)}
.qty button{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;font-size:16px;
  line-height:1;color:var(--cream)}
.qty button:active{background:rgba(243,232,208,.14)}
.qty b{font-family:var(--en-body);font-size:13px;min-width:20px;text-align:center;font-weight:600}
.sheet__empty{text-align:center;padding:34px 18px;color:var(--sand);opacity:.6;font-size:13.5px;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.sheet__empty .hexph{width:56px}

/* ══════════════════ RATING — شو رأيك بالطلة؟ ══════════════════ */
.rate{position:relative;z-index:1;width:min(100%,420px);max-height:90svh;overflow-y:auto;
  padding:26px 22px 22px;border-radius:26px;text-align:center;
  background:linear-gradient(180deg,rgba(62,36,24,.95),rgba(24,16,12,.98));
  border:1px solid rgba(248,198,75,.24);box-shadow:0 34px 70px rgba(0,0,0,.6);
  animation:pop .32s cubic-bezier(.2,.9,.3,1) both}
.rate__x{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(243,232,208,.1);font-size:14px;z-index:2}
.rate .mark{margin:0 auto 8px}
.rate__title{font-family:var(--display);font-size:25px;font-weight:400;color:var(--cream)}
html[lang="en"] .rate__title{font-weight:600;font-size:22px}
.rate__sub{font-size:12.5px;color:var(--sand);opacity:.85;margin-top:4px;line-height:1.6}
.rate__groups{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.rgroup{padding:10px 8px;border-radius:16px;transition:background .2s}
.rgroup__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rgroup__lbl{font-family:var(--display);font-size:16px;color:var(--cream);display:flex;
  align-items:center;gap:8px}
.rgroup__lbl i{font-style:normal;font-size:15px}
.rgroup__word{font-size:11.5px;color:var(--gold);min-height:16px;display:block;margin-top:2px;
  opacity:0;transition:opacity .25s}
.rgroup__word.is-on{opacity:.95}
.stars{display:inline-flex;gap:2px;direction:ltr}
.stars button{width:38px;height:38px;display:grid;place-items:center;font-size:26px;line-height:1;
  color:rgba(243,232,208,.22);transition:color .15s,transform .12s;padding:0}
.stars button:active{transform:scale(1.25)}
.stars button.is-on{color:var(--gold);filter:drop-shadow(0 0 8px rgba(248,198,75,.45))}
.rate__note{width:100%;min-height:74px;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:rgba(243,232,208,.07);border:1px solid var(--hair);color:var(--cream);
  font-family:var(--body);font-size:13.5px;resize:vertical;outline:none;line-height:1.6}
.rate__note::placeholder{color:var(--sand);opacity:.5}
.rate__note:focus{border-color:rgba(248,198,75,.4)}
.rate__send{width:100%;margin-top:14px}
.rate__hint{font-size:10.5px;color:var(--sand);opacity:.55;margin-top:9px;line-height:1.6}
.rate__done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 6px 10px}
.rate__done b{font-family:var(--display);font-size:24px;font-weight:400;color:var(--gold)}
.rate__done p{font-size:13px;color:var(--sand);line-height:1.7}
.rate__done .rate__stars-echo{font-size:22px;letter-spacing:4px;color:var(--gold)}
.rate__google{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:12px 22px;
  border-radius:13px;background:#fff;color:#1F1F1F;font-family:var(--body);font-size:14px;
  font-weight:700;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .15s,box-shadow .2s}
.rate__google:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.rate__google svg{width:20px;height:20px;flex:none}

/* ══════════════════════════ TOAST ══════════════════════════ */
.toast{position:fixed;z-index:120;bottom:24px;inset-inline:0;margin:0 auto;width:max-content;
  max-width:88vw;padding:11px 18px;border-radius:999px;font-size:13px;
  background:linear-gradient(145deg,var(--ember),var(--amber));color:#fff;font-weight:600;
  box-shadow:0 14px 32px rgba(226,84,43,.4);animation:toast 1.9s ease both;pointer-events:none}
@keyframes toast{0%{opacity:0;transform:translateY(16px)}12%,80%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-8px)}}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (min-width:600px){
  :root{--bar-h:66px}
  .sec{padding:0 24px;max-width:640px;margin-inline:auto}
  .row{padding:13px 4px}
  .row__art{width:52px}
  .row__name{font-size:16.5px}
  .nowcard{margin-inline:auto}
}
@media (min-width:1000px){
  .sec{max-width:700px}
  .rail__track{padding-inline:40px}
  .skywin{height:clamp(110px,16vh,190px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .birds,.sstar{display:none}
  body.js-reveal .row,body.js-reveal .shead{opacity:1}
}