/* ============================================================
   ARÔME & OAK — المنيو الإلكتروني
   تصميم منيو مطبوع فاخر: ورق عاجي، ذهب، وزخارف نباتية
   ============================================================ */

:root{
  --ivory:      #faf6ee;
  --ivory-2:    #f3ebdd;
  --paper:      #fffdf8;
  --gold:       #b9925a;
  --gold-lt:    #e2c894;
  --gold-dp:    #9a7738;
  --espresso:   #2e241c;
  --espresso-2: #1c1510;
  --ink:        #2b211a;
  --muted:      #8a7864;
  --line:       rgba(185,146,90,.34);

  --font-disp: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --font-ar:   'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-body: var(--font-ar);

  --nav-h: 64px;
}

/* في الإنجليزي: العناوين والأسماء بخط سيريف كلاسيكي */
html[lang="en"]{
  --font-body: 'Cormorant Garamond', Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 10px);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

body{
  font-family: var(--font-ar);
  background: var(--ivory);
  color: var(--ink);
  overflow-x:hidden; overscroll-behavior-y:none;
  -webkit-tap-highlight-color: transparent;
}

/* خامة ورق ناعمة */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 40% at 8% 6%,   rgba(226,200,148,.26), transparent 62%),
    radial-gradient(52% 38% at 94% 24%, rgba(185,146,90,.16),  transparent 66%),
    radial-gradient(66% 44% at 50% 98%, rgba(154,119,56,.10),  transparent 72%),
    var(--ivory);
}

img,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }

.ico{ width:34px; height:17px; color:var(--gold); flex:0 0 auto }


/* ============================================================
   الهيدر — الفيديو
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:-2;
}
/* طبقة تعتيم قوية — الفيديو فاتح فلازم الكتابة تبان عليه */
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(78% 58% at 50% 44%, rgba(28,21,16,.62) 0%, rgba(28,21,16,.34) 60%, transparent 100%),
    linear-gradient(to bottom,
      rgba(28,21,16,.66) 0%,
      rgba(28,21,16,.46) 30%,
      rgba(28,21,16,.44) 62%,
      rgba(46,36,28,.34) 82%,
      var(--ivory) 100%);
}

.hero__content{ text-align:center; padding:34px 22px 92px; animation: fadeUp 1.1s .2s ease both }

.hero__mark{
  display:inline-block; font-family:var(--font-disp); font-size:11px;
  letter-spacing:.42em; color:#f2e5cd; padding:6px 16px;
  border:1px solid rgba(242,229,205,.4); border-radius:2px;
  backdrop-filter: blur(6px); background:rgba(28,21,16,.2);
}

.hero__title{
  font-family: var(--font-disp); font-weight:600; line-height:.98;
  font-size: clamp(46px, 13vw, 108px); letter-spacing:.05em;
  margin:16px 0 4px; color:#fff9ee;
  text-shadow: 0 3px 10px rgba(28,21,16,.8), 0 10px 40px rgba(28,21,16,.7);
}
.hero__title span{
  display:block; font-size:.9em; color:#f0d29a;
  text-shadow: 0 3px 10px rgba(28,21,16,.85), 0 10px 40px rgba(28,21,16,.65);
}
.hero__kicker{
  font-size:11.5px; letter-spacing:.34em; color:#f0e3ca; margin-top:9px;
  text-shadow:0 2px 12px rgba(28,21,16,.85);
}

.hero__menuword{
  font-family:var(--font-disp); font-weight:400; font-size:clamp(26px,7vw,46px);
  letter-spacing:.34em; margin:22px 0 4px; color:#f3dcac;
  text-shadow: 0 2px 18px rgba(28,21,16,.8);
}

.hero__rule{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:10px auto 14px; max-width:300px;
}
.hero__rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-lt),transparent) }
.hero__rule .ico{ color:var(--gold-lt) }

.hero__tag{
  color:#f1e6d5; font-size: clamp(14px,3.4vw,19px); font-weight:300;
  text-shadow:0 3px 16px rgba(28,21,16,.65);
}

/* زر هادي: إطار ذهبي رفيع بدل الكتلة الذهبية */
.hero__cta{
  display:inline-block; margin-top:24px; padding:9px 26px; border-radius:2px;
  font-weight:500; font-size:13px; letter-spacing:.1em; color:#f3dcac;
  border:1px solid rgba(226,200,148,.55);
  background: rgba(28,21,16,.22); backdrop-filter: blur(4px);
  transition: background .3s, color .3s, border-color .3s;
}
.hero__cta:hover{ background:rgba(226,200,148,.9); color:#2e2113; border-color:transparent }

.hero__scroll{
  position:absolute; bottom: calc(24px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  width:24px; height:40px; border:1px solid rgba(255,244,224,.55); border-radius:12px;
  display:grid; justify-items:center; padding-top:7px;
}
.hero__scroll span{
  width:2px; height:8px; border-radius:2px; background:#fff4e0;
  animation: wheel 1.7s ease-in-out infinite;
}


/* ============================================================
   شريط التصنيفات + زر اللغة
   ============================================================ */
.tabs{
  position:sticky; top:0; z-index:60;
  background: rgba(250,246,238,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow: 0 6px 18px rgba(46,36,28,.05);
}
.tabs__inner{
  display:flex; align-items:center; gap:8px;
  max-width:1120px; margin-inline:auto;
  padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left));
}
.tabs__wrap{
  flex:1; min-width:0;
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  padding:11px 2px;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.tabs__wrap::-webkit-scrollbar{ display:none }

/* أزرار الأقسام — هادية: من غير خلفيات تقيلة، بس خط ذهبي رفيع تحت النشط */
.tab{
  position:relative; flex:0 0 auto;
  padding:9px 14px 10px; white-space:nowrap; border-radius:2px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  background:transparent; border:0;
  transition: color .3s; scroll-snap-align:center;
}
.tab::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:center;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tab:hover{ color:var(--gold-dp) }
.tab.is-active{ color:var(--espresso) }
.tab.is-active::after{ transform:scaleX(1) }

/* زر اللغة — بيوريّك اللغة التانية بس، بسيط وواضح */
.lang{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--gold-dp); background:rgba(185,146,90,.10);
  border:1px solid rgba(185,146,90,.3);
  transition: background .3s, color .3s, border-color .3s;
}
.lang svg{ opacity:.85 }
.lang:hover{ background:var(--gold); border-color:transparent; color:#fff8ec }
.lang:active{ transform:scale(.96) }
.lang__short{ display:none }
/* على الشاشات الضيقة نكتفي بالاختصار عشان نسيب مساحة للأقسام */
@media (max-width:430px){
  .lang{ padding:6px 10px; gap:5px }
  .lang__full{ display:none }
  .lang__short{ display:inline }
}


/* ============================================================
   البحث
   ============================================================ */
.search{ max-width:620px; margin:26px auto 4px; padding:0 18px }
.search__box{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:11px 18px; box-shadow: 0 4px 14px rgba(46,36,28,.05);
  transition: box-shadow .25s, border-color .25s;
}
.search__box:focus-within{ border-color:var(--gold); box-shadow:0 8px 22px rgba(185,146,90,.22) }
.search__box svg{ color:var(--gold); flex:0 0 auto }
/* 16px إجباري — أقل من كده الآيفون بيعمل zoom لوحده */
.search__box input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font-family:var(--font-ar); font-size:16px; color:var(--ink);
}
.search__box input::placeholder{ color:#b3a08a }
#searchClear{ color:#b3a08a; font-size:14px; display:none }
#searchClear.show{ display:block }


/* ============================================================
   ورقة المنيو
   ============================================================ */
.sheet{
  position:relative; max-width:1000px; margin:22px auto 0;
  background: linear-gradient(170deg, var(--paper) 0%, var(--ivory-2) 140%);
  border:1px solid var(--line);
  box-shadow: 0 16px 44px rgba(46,36,28,.10);
  padding: 34px 30px 30px;
  overflow:hidden;
}
/* الإطار الذهبي الداخلي */
.sheet::before{
  content:''; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(185,146,90,.28);
}

/* الزخارف النباتية في الأركان */
.sprig{
  position:absolute; width:150px; height:150px; color:var(--gold);
  opacity:.14; pointer-events:none; z-index:0;
}
.sprig--tr{ top:-34px; right:-34px; transform:rotate(-8deg) }
.sprig--bl{ bottom:-34px; left:-34px; transform:rotate(172deg) }

/* المحتوى فوق الزخرفة */
.menu, .sheet__sign{ position:relative; z-index:1 }

.sheet__sign{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--font-disp); font-size:14px; letter-spacing:.28em; color:var(--gold-dp);
}


/* ============================================================
   الأقسام
   ============================================================ */
.sec{ position:relative; padding-top:34px }
.sec:first-child{ padding-top:6px }

.sec__head{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:20px;
}
.sec__head::before,.sec__head::after{
  content:''; flex:1; max-width:130px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.sec__title{
  font-family:var(--font-disp); font-weight:500;
  font-size: clamp(22px,4.6vw,31px); letter-spacing:.14em;
  color:var(--espresso); white-space:nowrap;
}
html[lang="en"] .sec__title{ text-transform:uppercase; letter-spacing:.2em }
html[lang="ar"] .sec__title{ font-family:'Amiri', var(--font-disp); letter-spacing:normal }

/* الحروف العربية متصلة — التباعد بينها بيقطّع الكلمة، فبنلغيه */
html[lang="ar"] .hero__kicker,
html[lang="ar"] .intro__sub{ letter-spacing:normal; font-size:13px }

.sec__grid{
  display:grid; gap:4px 44px;
  grid-template-columns: repeat(auto-fit, minmax(330px,1fr));
}


/* ============================================================
   الأصناف
   ============================================================ */
.item{
  position:relative; padding:11px 2px 12px;
  opacity:0; transform:translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.item.in{ opacity:1; transform:none }
.item + .item{ border-top:1px dashed rgba(185,146,90,.22) }

.item__line{ display:flex; align-items:baseline; gap:10px }

.item__name{
  font-family: var(--font-body); font-weight:700;
  font-size:16.5px; letter-spacing:.01em; color:var(--espresso);
}
html[lang="en"] .item__name{ font-size:19px; font-weight:600; letter-spacing:.02em }

.item__lead{
  flex:1; height:1px; margin-bottom:4px; min-width:14px;
  background-image: radial-gradient(circle, var(--gold-lt) 1px, transparent 1px);
  background-size:6px 2px; background-repeat:repeat-x; opacity:.75;
}

.item__price{
  flex:0 0 auto; white-space:nowrap;
  font-family: var(--font-disp); font-weight:700; font-size:19px; color:var(--gold-dp);
}
.item__price i{
  font-style:normal; font-family:var(--font-ar);
  font-size:10.5px; font-weight:600; color:var(--muted); margin-inline-start:3px;
}

.item__desc{
  margin-top:3px; font-family:var(--font-ar);
  font-size:12.8px; line-height:1.72; color:var(--muted);
}
html[lang="en"] .item__desc{ font-size:13.5px }

.item__tag{
  display:inline-block; vertical-align:middle;
  margin-inline-start:8px; padding:2px 9px; border-radius:2px;
  font-family:var(--font-ar); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  color:#4a3524; background:linear-gradient(135deg,#e2c894,#c9a978);
  border:1px solid rgba(154,119,56,.3);
}
.item__tag--new{ color:#f6ecd8; background:linear-gradient(135deg,#4a3524,#2e241c); border-color:transparent }

.empty{ text-align:center; padding:34px 20px 20px; color:var(--muted); font-size:15px }


/* ============================================================
   الفوتر
   ============================================================ */
/* الفوتر — لون عسلي دافي */
.foot{
  margin-top:34px; padding:52px 22px calc(112px + env(safe-area-inset-bottom));
  text-align:center; color:#4a3218; position:relative;
  background: linear-gradient(170deg, #e7c288 0%, #d7a961 48%, #c69850 100%);
}
.foot::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,#fff6e4,transparent);
}
.foot__logo{
  font-family:var(--font-disp); font-size:24px; letter-spacing:.26em;
  color:#3f2a12;
}
.foot__line{ margin-top:8px; font-size:13px; color:#6b4d24 }

/* الفوتر عربي دايمًا — نثبّت الخط العربي حتى لو المنيو إنجليزي */
.foot__line,.foot__item,.foot__note{ font-family:var(--font-ar) }

.foot__info{ display:grid; gap:10px; margin:24px auto 0; max-width:420px; font-size:13px }
.foot__item{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background: rgba(255,250,240,.46); border:1px solid rgba(255,250,240,.6);
  border-radius:2px; padding:10px 14px; color:#4a3218;
}
.foot__item b{ color:#3f2a12; font-weight:700 }

.foot__social{ display:flex; justify-content:center; gap:11px; margin-top:24px }
.foot__social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(90,62,26,.4); color:#4a3218; font-size:16px;
  transition: all .25s;
}
.foot__social a:hover{ background:#fff8ec; border-color:#fff8ec; transform:translateY(-3px) }

.foot__note{ margin-top:26px; font-size:11px; color:#6b4d24; letter-spacing:.02em }


/* ============================================================
   أزرار عائمة
   ============================================================ */
.fab{
  position:fixed; z-index:90; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(250,246,238,.9); color:var(--gold-dp);
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(28,21,16,.12);
  backdrop-filter: blur(6px);
  transition: transform .28s, opacity .28s, background .28s, color .28s;
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.fab:hover{ background:var(--gold); color:#fff8ec; border-color:transparent }
.fab:active{ transform: scale(.92) }

.fab--top{
  inset-inline-end: calc(14px + env(safe-area-inset-left)); font-size:16px;
  opacity:0; pointer-events:none;
}
.fab--top.show{ opacity:1; pointer-events:auto }


/* ============================================================
   الحركات
   ============================================================ */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes wheel { 0%{ opacity:0; transform:translateY(0) } 40%{ opacity:1 } 100%{ opacity:0; transform:translateY(13px) } }
@keyframes steam { 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-7px) scale(1.04) } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .item{ opacity:1; transform:none }
}


/* ============================================================
   الموبايل
   ============================================================ */
@media (max-width:900px){
  .sec__grid{ grid-template-columns:1fr; gap:0 }
  .sheet{ margin-inline:14px; padding:28px 20px 24px }
  .sprig{ width:110px; height:110px; opacity:.11 }
}

@media (max-width:640px){
  :root{ --nav-h:62px }

  .hero__content{ padding:26px 20px 92px }
  .hero__title{ font-size: clamp(42px,12.5vw,66px) }
  .hero__menuword{ font-size:26px; letter-spacing:.3em; margin:18px 0 2px }
  .hero__kicker{ font-size:10px; letter-spacing:.28em }
  .hero__rule{ max-width:220px }
  .hero__tag{ font-size:14.5px; line-height:1.7 }
  .hero__cta{ margin-top:22px; padding:13px 34px }

  .tabs__wrap{ padding-block:10px }
  .tab{ padding:10px 15px; font-size:13px }     /* ارتفاع ٤٤px — لمس مريح */
  .lang__opt{ min-width:32px; height:38px }

  .search{ margin:20px auto 2px; padding-inline:14px }

  .sheet{ margin-inline:10px; padding:24px 16px 20px; margin-top:16px }
  .sheet::before{ inset:6px }
  .sheet__sign{ font-size:12px; letter-spacing:.2em; margin-top:28px; padding-top:18px }

  .sec{ padding-top:28px }
  .sec__head{ gap:10px; margin-bottom:14px }
  .sec__head::before,.sec__head::after{ max-width:70px }

  .item{ padding:10px 0 11px }
  .item__name{ font-size:16px }
  html[lang="en"] .item__name{ font-size:17.5px }
  .item__price{ font-size:18px }
  .item__desc{ font-size:12.8px; line-height:1.65 }

  .foot{ padding:44px 18px calc(106px + env(safe-area-inset-bottom)) }
  .foot__logo{ font-size:21px }
  .foot__item{ font-size:12.5px; padding:10px 12px }
}

@media (max-width:360px){
  .hero__title{ font-size:40px }
  .item__name{ font-size:15px }
  .item__price{ font-size:17px }
  .sheet{ padding:20px 13px 18px }
  .intro__title{ font-size:28px; letter-spacing:.08em }
}

/* الموبايل بالعرض */
@media (max-height:520px) and (orientation:landscape){
  .hero__content{ padding-block:18px 56px }
  .hero__title{ font-size:40px }
  .hero__menuword,.hero__rule,.hero__scroll,.hero__kicker{ display:none }
  .hero__cta{ margin-top:14px }
  .intro__frame{ padding:18px 18px 14px; margin-bottom:16px }
  .intro__cup{ font-size:28px }
  .intro__title{ font-size:26px; margin:8px 0 4px }
}


/* ============================================================
   الطباعة
   ============================================================ */
@media print{
  .intro,.tabs,.search,.fab,.hero__scroll,.hero__cta,.hero__video,.sprig{ display:none !important }
  .hero{ min-height:auto; padding:20px 0 }
  .hero__veil{ display:none }
  .hero__title,.hero__menuword,.hero__mark,.hero__kicker,.hero__tag{ color:#2e241c !important; -webkit-text-fill-color:#2e241c }
  .item{ opacity:1; transform:none; break-inside:avoid }
  .sec{ break-inside:avoid }
  .sheet{ box-shadow:none; border-color:#c8b18a }
  .foot{ background:none; color:#2e241c; padding-bottom:20px }
  body::before{ display:none }
}