/* Desert Moon table menu. Same palette, fonts and accessibility rules as the website. */
:root{
  --cream:#faf5ec; --paper:#fffaf2; --line:#e3d6bf; --ink:#2b2620; --muted:#6f6350;
  --burgundy:#7a2323; --night:#1d0906; --ember:#ad4706; --gold:#f2b43a;
  --serif:'Playfair Display', Georgia, serif; --sans:'Jost', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:12rem}
body{margin:0; background:var(--cream); color:var(--ink); font:400 1.0625rem/1.55 var(--sans); overflow-x:hidden}
html[dir="rtl"] body, html[dir="rtl"] .item-name, html[dir="rtl"] .cat-title, html[dir="rtl"] .sec-title{font-family:'Cairo', var(--sans)}
img{max-width:100%; display:block}
a{color:var(--burgundy)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; top:8px; inset-inline-start:12px; z-index:100; background:#fff; padding:8px 12px; transform:translateY(-200%)}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--burgundy); outline-offset:3px}
button{font:inherit; cursor:pointer}

/* hero: the animated sunset from the original QR menu */
.hero{position:relative; overflow:hidden; height:clamp(260px, calc(104px + 50.73vw), 443px); border-bottom:2px solid var(--burgundy); background:var(--cream); margin:0}
.sky{position:absolute; inset:0; background:radial-gradient(circle at 39.78% 45.1%, #d3750b 0%, #d3750b 10.1%, #b93e00 17%, #b33a02 26%, #9f2902 35%, #8a2200 44%, #701c05 53%, #591607 62%, #3c0f08 75%, #240a07 88%, #170705 100%);
  transform-origin:39.78% 45.1%; animation:skyExpand 1.9s cubic-bezier(.2,.7,.3,1) both}
@keyframes skyExpand{0%{transform:scale(.42); opacity:0} 100%{transform:scale(1); opacity:1}}
.stars{position:absolute; inset:0; z-index:1; pointer-events:none}
.star{position:absolute; background:#ffe6b8;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C54 38 62 46 100 50 C62 54 54 62 50 100 C46 62 38 54 0 50 C38 46 46 38 50 0 Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C54 38 62 46 100 50 C62 54 54 62 50 100 C46 62 38 54 0 50 C38 46 46 38 50 0 Z'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 0 2px rgba(255,230,184,.7)); opacity:0;
  animation-name:starIn, twinkle; animation-iteration-count:1, infinite; animation-fill-mode:forwards, both; animation-timing-function:ease-out, ease-in-out}
@keyframes starIn{to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.65) rotate(0)} 50%{opacity:1; transform:scale(1.05) rotate(6deg)}}
.scene{position:absolute; z-index:3; left:50%; top:84px; width:78%; max-width:520px; transform:translateX(-50%); line-height:0; margin:0}
.scene img{width:100%}
.dune-fill{animation:sceneIn 1s ease-out .15s both}
.logo{z-index:4; animation:sceneIn 1s ease-out .15s both}
.dune-shadow{z-index:5; pointer-events:none; filter:url(#duneSettle); animation:sceneIn 1.2s ease-out .3s both}
@keyframes sceneIn{0%{opacity:0; transform:translateX(-50%) translateY(6px)} 100%{opacity:1; transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sky,.star,.scene{animation:none !important; opacity:1 !important}
  .dune-shadow{filter:none}
}

/* sticky bar: language, allergen switch, search, sections */
.bar{position:sticky; top:0; z-index:20; background:var(--cream); border-bottom:1px solid var(--line); box-shadow:0 4px 14px rgba(29,9,6,.06)}
@media (max-height:32.5em){ .bar{position:static} html{scroll-padding-top:0} }
.bar-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:10px 12px 0}
.langs{display:flex; gap:6px}
.langs button, .al-switch{min-height:44px; min-width:52px; padding:6px 14px; border-radius:999px; border:1px solid #b9a88b; background:var(--paper); color:var(--ink); font-weight:600}
.langs button[lang="ar"]{font-family:'Cairo', var(--sans)}
.langs button[aria-pressed="true"]{background:var(--burgundy); border-color:var(--burgundy); color:#fff}
.al-switch{border-style:dashed}
.al-switch[aria-pressed="true"]{background:var(--ember); border:1px solid var(--ember); color:#fff}
.search{max-width:560px; margin:0 auto; padding:10px 12px}
.search input{width:100%; min-height:46px; padding:10px 18px; border-radius:999px; border:1px solid #b9a88b; background:#fff; font:inherit; color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.tabs ul{list-style:none; margin:0; padding:0 12px 8px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; justify-content:safe center}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:block; white-space:nowrap; padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:600; letter-spacing:.04em; font-size:.95rem}
.tabs a[aria-current="true"]{color:#fff; background:var(--burgundy)}

/* allergen guide */
.al-guide{max-width:640px; margin:16px auto 0; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:10px}
.al-guide h2{font:600 1.35rem/1.2 var(--serif); margin:0 0 .5em; color:var(--burgundy)}
.al-guide p{margin:0 0 .6em; color:var(--muted)}
.al-key{list-style:none; padding:0; margin:12px 0}
.al-key li{margin:6px 0}
.al-guide .hint{font-size:1rem}
.al-filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.al-filters button{min-height:44px; padding:6px 14px; border-radius:999px; border:1px solid #b9a88b; background:#fff; color:var(--ink); font-weight:500}
.al-filters button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink); text-decoration:line-through}

/* menu */
main{max-width:640px; margin:0 auto; padding:0 16px 40px; outline:none}
.no-results{display:none; text-align:center; color:var(--muted); margin:32px 0}
.no-results.show{display:block}
.sec{padding-top:28px}
.sec-title{font:700 clamp(1.7rem,6vw,2.1rem)/1.15 var(--serif); text-align:center; margin:0 0 6px}
.sec-title::after{content:""; display:block; width:44px; height:2px; background:var(--burgundy); margin:10px auto 0}
.cat{margin-top:22px}
.cat-title{font:600 1.35rem/1.25 var(--serif); color:var(--burgundy); margin:0 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cat-note{font-style:italic; color:var(--muted); margin:0 0 8px}
.cat-note.highlight{font-style:normal; background:#fff3dc; border-inline-start:4px solid var(--gold); padding:10px 14px; border-radius:6px; color:var(--ink)}
.cat-al-note{display:none; font-size:1rem; color:var(--muted)}
body.show-al .cat-al-note{display:block}
.items{list-style:none; margin:0; padding:0}
.item{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--line)}
.item[hidden]{display:none}
.item-body{flex:1; min-width:0}
.item-head{display:flex; align-items:baseline; gap:8px}
.item-name{font:600 1.15rem/1.3 var(--serif); margin:0; min-width:0; overflow-wrap:break-word}
.dots{flex:1; min-width:8px; border-bottom:1px dotted #c9b89c; transform:translateY(-4px)}
.item-price{font-weight:600; color:var(--burgundy); text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums}
.size{font-weight:500; color:var(--muted); font-size:.9rem}
.item-desc{margin:4px 0 0; color:var(--muted); font-size:1rem}
.item-note{margin:4px 0 0; color:var(--burgundy); font-style:italic; font-size:1rem}
.fav{margin:4px 0 0; font-size:.875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ember)}
.photo-btn{flex:none; padding:0; border:0; background:none; position:relative; border-radius:8px; overflow:hidden}
.item-thumb .photo-btn img{width:84px; height:84px; object-fit:cover; border-radius:8px}
.item-hero{flex-direction:column; gap:12px; margin:14px 0; padding:14px; background:linear-gradient(180deg,#fffaf1,var(--cream)); border:1px solid var(--line); border-radius:10px}
.item-hero .photo-btn{width:100%}
.item-hero .photo-btn img{width:100%; max-height:300px; object-fit:cover; border-radius:50% 50% 8px 8px / 30% 30% 8px 8px}
.item-hero .item-body{width:100%}
.ribbon{position:absolute; top:10px; inset-inline-start:10px; background:var(--burgundy); color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px}
.today-flag{display:none; font:600 .8rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; background:var(--ember); color:#fff; padding:6px 10px; border-radius:999px}
.special-day.is-today .today-flag{display:inline-block}
.special-day.is-today{background:var(--paper); border:2px solid var(--ember); border-radius:10px; padding:12px 14px}

/* allergens on items */
.al-list{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px}
.al-list[hidden]{display:none}
.al{display:inline-block; font-size:.9rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:#fff}
.al-free{color:#1f5f2c; border-color:#b9d6be; background:#f2f9f3}
.al-side{color:#6b4a00; border-color:#e7cf8f; background:#fff8e6}
.al-contains{color:#7a2323; border-color:#e3b9b9; background:#fdf2f2; font-weight:600}
.al-unknown{color:var(--muted)}
.al-detail{font-weight:400}

/* footer */
.advisory{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); text-align:center; color:var(--muted)}
.advisory p{margin:0 0 .6em}
.review{display:inline-block; margin:10px 0 14px; padding:12px 22px; min-height:48px; border-radius:999px; background:var(--ember); color:#fff; font-weight:600; text-decoration:none}
.review:hover{background:#9c3f08; color:#fff}
.nap{font-size:.95rem}

/* photo viewer */
.viewer{border:0; padding:0; background:transparent; max-width:min(92vw,720px); width:100%}
.viewer::backdrop{background:rgba(20,8,5,.85)}
.viewer img{width:100%; max-height:78vh; object-fit:contain; border-radius:10px; background:#000}
.viewer form{text-align:center; margin-top:12px}
.viewer-close{min-height:48px; padding:10px 28px; border-radius:999px; border:0; background:#fff; color:var(--ink); font-weight:600}

/* one section at a time (JavaScript on); search/allergen filter shows every match */
html.tabs-js:not(.filtering) .sec:not(.tab-active){display:none}
.to-top{position:fixed; inset-inline-end:16px; bottom:20px; z-index:30; width:48px; height:48px; border-radius:50%; border:0; background:var(--burgundy); color:#fff; font-size:1.3rem; box-shadow:0 3px 10px rgba(0,0,0,.28)}
.to-top[hidden]{display:none}

/* Like the original menu: all section tabs visible at once, no sideways scrolling.
   Each tab takes an equal share of the width and its label wraps onto two lines. */
.tabs ul{display:flex; justify-content:center; gap:clamp(2px,1.5vw,18px); overflow:visible; padding:4px clamp(4px,2vw,16px) 0}
.tabs li{flex:1 1 0; min-width:0; display:flex}
.tabs a{flex:1; display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; overflow-wrap:break-word; hyphens:auto;
  min-height:48px; padding:6px 2px 8px; border-radius:0; background:none; border-bottom:3px solid transparent;
  font-size:clamp(.72rem, 3.2vw, .95rem); line-height:1.25; letter-spacing:.04em; text-transform:uppercase}
.tabs a[aria-current="true"]{background:none; color:var(--burgundy); border-bottom-color:var(--burgundy)}
html[dir="rtl"] .tabs a{letter-spacing:0; text-transform:none; font-size:clamp(.8rem, 3.4vw, 1rem)}

/* Long dish names get the full row; the price drops to the right of the next line instead of squeezing the name */
.item-head{flex-wrap:wrap; row-gap:2px}
.item-name{flex:0 1 auto}
.dots{min-width:12px}
.item-price{margin-inline-start:auto}
.item-price{white-space:normal; max-width:100%}
/* Large text (bigger phone fonts / zoom): if the 5 tabs no longer fit, qr.js adds .tabs-fit-wrap
   and they go onto rows of 3 instead of breaking words or spilling sideways */
.tabs a{hyphens:manual}
.tabs.tabs-fit-wrap ul{flex-wrap:wrap; justify-content:center; gap:2px 10px}
.tabs.tabs-fit-wrap li{flex:0 1 auto; max-width:100%}
.tabs.tabs-fit-wrap a{padding-inline:8px}
.tabs.tabs-fit-tight a{letter-spacing:0; font-size:clamp(.66rem, 2.9vw, .85rem)}