/* =====================================================================
   _v2.css — تخطيط المنيو المشترك (Bitikka Labs)
   ─────────────────────────────────────────────────────────────────────
   ملف واحد يحمل شكل المنيو لكل الثيمات: الغلاف، شرائح الأقسام الدائرية،
   صفوف الأصناف، ورقة الصنف، الشريط السفلي الزجاجي، لوحة «الأكثر طلباً»،
   والتذييل. لا لون واحد مكتوب هنا بالثابت — كل شيء يقرأ من عقد متغيّرات
   ‎--v2-*‎، فيبقى لكل ثيم لوحته وتبقى البنية واحدة.

   ترتيب التحميل (ensureOverlayStylesLast في menu/script.js):
       global-overrides → app-styles → ملف الثيم → «هذا الملف»
       → menu-images.css → cart-checkout.css

   ما يترتّب على ذلك، وهو سبب شكل المحدِّدات هنا:
   • قِيَم ‎--v2-*‎ الافتراضية تعيش في global-overrides.css لا هنا. لو
     عُرِّفت هنا لغلبت لوحة الثيم، لأن هذا الملف يُحمَّل بعده.
   • menu-images.css و cart-checkout.css يأتيان بعدنا وقواعدهما تحمل
     ‎!important‎ — فقواعد بطاقات الأصناف هنا مُنطّقة بـ ‎#menu-main‎ ومعها
     ‎!important‎ لتغلبها بالانتقائية.
   • ‎#bottom-nav‎ و‎#popular-drawer‎ قواعدهما في وسم ‎<style>‎ داخل ‎<body>‎
     في menu/index.html، أي متأخرة عنّا في ترتيب المستند — لذلك نسبقها
     بوسم العنصر: ‎nav#bottom-nav‎ و‎div#popular-drawer‎.
   • ستايل ورقة الخيارات يُحقن من script.js عند أول فتح، بعدنا، بانتقائية
     ‎(1,1,0)‎ — لذلك نسبق كل قاعدة بـ ‎#bo-overlay‎.
   ===================================================================== */

body {
    background-color: var(--v2-bg);
    color: var(--v2-ink);
}

/* ══ الهيدر: غلاف + شعار طافٍ + الاسم + حالة العمل ═══════════════════ */
#main-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    /* ‎!important‎ مقصود: burger-theme.css يفرض تدرّجاً على وسم header
       بـ ‎!important‎، والانتقائية وحدها لا تغلب ‎!important‎. */
    background: var(--v2-bg) !important;
    overflow: visible;
    padding: 0 clamp(12px, 4vw, 26px) clamp(12px, 3vw, 18px) !important;
    padding-top: max(0px, var(--safe-top)) !important;
    /* صندوق الإسناد لزر العودة، حتى يُقاس من أعلى الهيدر (أي من الغلاف)
       لا من صفّ العلامة الذي يقع تحته. */
    position: relative;
}

/* الغلاف عنصر حقيقي (‎#header-cover‎) لأنه صار شريطاً بشرائح قابلة للتبديل من
   لوحة المطعم. أرضيّته هي غلاف الثيم — مشهد مجرّد من تدرّجات لوحته يستبدله كل
   ثيم بصورته عبر ‎--v2-cover‎ — وشرائح المطعم تُرسم فوقها، فمطعمٌ بلا بنر
   يبقى كما كان تماماً.

   بعض الثيمات تزخرف ‎header::before‎ بطبقة ‎position: absolute; inset: 0‎
   (طبقة الضجيج في burger-theme مثلاً). كانت تلك الطبقة معطّلة أصلاً لأن
   الغلاف احتلّ العنصر الزائف؛ نبقيها معطّلة صراحةً حتى لا تعود طبقةً سابحة
   فوق الشرائح الآن بعد أن أخلينا العنصر الزائف. */
#main-header::before { content: none; }

#main-header .header-cover {
    position: relative;
    /* ‎z-index: 0‎ مقصود ولازم. الغلاف صار عنصراً محدَّد الموضع (تحتاجه الشرائح
       المطلقة فوقه)، والعنصر المحدَّد يُرسم فوق كل محتوى غير محدَّد مهما كان
       ترتيب المستند — فكان يغطّي بطاقة الشعار المتدلّية من أسفله. الصفر يضعه
       في مستوى صريح تعلوه ‎.header-logo-area‎ بواحد، ويصنع سياق تكديس يحبس
       النقاط داخله فلا تنافس زرّ العودة. */
    z-index: 0;
    flex: 1 0 100%;
    height: clamp(148px, 40vw, 250px);
    margin-top: clamp(10px, 3vw, 16px);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
    background-color: var(--v2-surface-2);
    background-image: var(--v2-cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 26px var(--v2-shadow);
}

#main-header .cover-track {
    position: absolute;
    inset: 0;
}

/* الشرائح متكدّسة في المكان نفسه ويتناوبن بالتلاشي — لا انزلاق أفقي، فالانزلاق
   يفرض عرضاً مضروباً بعدد الشرائح ويتعارك مع ‎border-radius‎ للهيدر. */
#main-header .cover-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 620ms ease;
    pointer-events: none;
}
#main-header .cover-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
#main-header .cover-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* النقاط أسفل الغلاف. تظهر فقط عند وجود أكثر من شريحة (تُظهرها JS). */
#main-header .cover-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 7px;
    /* بلا ‎z-index‎ عمداً: ترتيب المستند يكفي لتعلو الشرائح، وأي ‎z-index‎ هنا
       يتنافس على المستوى الجذري (فالغلاف ‎relative‎ بلا ‎z-index‎) وقد يعلو
       زرَّ العودة. */
}
#main-header .cover-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: width 240ms ease, background 240ms ease;
}
#main-header .cover-dot.is-active {
    width: 20px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    #main-header .cover-slide,
    #main-header .cover-dot { transition: none; }
}

#main-header .header-brand {
    flex: 1 1 auto;
    width: auto;
    /* الحدّ الأدنى هو ما يحكم القسمة: شارتا الحالة ورقم الطاولة معاً تتجاوزان
       نصف عرض الجوال، ولولاه لانضغط عمود الاسم إلى بضعة بكسلات وتراصّ الاسم
       حرفاً في كل سطر. عند بلوغ الحدّ يلتفّ شريط المعلومات إلى سطره، وهو
       التنازل الصحيح: اسم المطعم قبل شارة الحالة. */
    min-width: min(100%, 232px);
    background: transparent;
    padding: 0;
    justify-content: flex-start;
    /* الشعار يُسحب لأعلى ليتداخل مع الغلاف، فأي قصّ هنا يبتره. عدة ثيمات
       تضع ‎overflow: hidden‎ على شريط العلامة القديم كامل العرض. */
    overflow: visible;
    /* ‎static‎ تُخرج زر العودة من إسناد هذا الصف إلى ‎#main-header‎ */
    position: static;
}

/* زخارف شريط العلامة القديم (شرر، أقواس، نقوش) رُسمت لشريط ملوّن كامل
   العرض. ذلك الشريط لم يعد موجوداً — صار صفّاً شفافاً تحت الغلاف — فتبقى
   الزخرفة طبقة سابحة بلا سند. */
#main-header .header-brand::before,
#main-header .header-brand::after { content: none; }

/* الشعار يميناً (RTL)، والاسم فوق الوصف على يساره */
#main-header .header-logo-area {
    /* فوق الغلاف: الشعار يتدلّى داخله بهامش علوي سالب، فلولا هذا لغطّاه.
       الوضع هنا لا على ‎.header-brand‎ عمداً — زرّ العودة أخوه ويجب أن يبقى
       مسنداً إلى ‎#main-header‎ لا إلى صفّ العلامة. */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo name"
        "logo tagline";
    align-items: end;
    column-gap: 12px;
    text-align: right;
}

#main-header .header-logo-img,
#main-header .header-logo-fallback {
    grid-area: logo;
    align-self: end;
    width: clamp(72px, 21vw, 94px);
    height: clamp(72px, 21vw, 94px);
    margin: calc(-1 * clamp(32px, 9vw, 46px)) 0 0;
    border-radius: var(--v2-radius-lg);
    border: 4px solid var(--v2-bg);
    box-shadow: 0 8px 20px var(--v2-shadow-strong);
    object-fit: cover;
    background: var(--v2-brand);
    color: var(--v2-on-brand);
    font-family: var(--v2-display);
    font-size: clamp(1.7rem, 6vw, 2.1rem);
}

#main-header h1.header-name {
    grid-area: name;
    align-self: end;
    font-family: var(--v2-display);
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--v2-ink);
    text-align: right;
    /* اسم طويل يلتفّ لسطرين ثم يُختصر بدل أن يضغط عمود الشبكة */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#main-header p.header-tagline {
    grid-area: tagline;
    align-self: start;
    margin-top: 3px;
    font-size: clamp(0.74rem, 2.9vw, 0.84rem);
    line-height: 1.5;
    color: var(--v2-ink-2);
    text-align: right;
    /* وصف طويل يقف عند سطرين بدل أن يطيل الهيدر بلا حدّ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* شريط المعلومات ينزلق لطرف الصف بدل شريط أبيض كامل العرض. يلتفّ داخلياً
   أيضاً: شارتا الحالة ورقم الطاولة معاً قد لا تسعان في سطر على شاشة ضيّقة،
   والالتفاف أفضل من ضغطهما حتى تُقصّا. */
#main-header .header-info {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    margin-inline-start: auto;
    align-self: flex-end;
    background: transparent;
    border-top: none;
    padding: 0 0 4px;
    min-height: 0;
    gap: 8px;
}

#main-header .header-status {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
}
#main-header .header-status.open {
    background: var(--v2-ok-tint);
    border-color: var(--v2-ok-line);
    color: var(--v2-ok);
}
#main-header .header-status.closed {
    background: var(--v2-bad-tint);
    border-color: var(--v2-bad-line);
    color: var(--v2-bad);
}
#main-header .header-table {
    background: var(--v2-brand-deep);
    color: var(--v2-on-brand);
    font-size: 0.74rem;
}
#main-header .header-sep { background: var(--v2-line); }

/* زر العودة للردهة يطفو في أعلى الغلاف.
   يُقاس من أعلى ‎#main-header‎: حشوة الأمان + إزاحة الغلاف + 12px، فيستقرّ
   داخل الغلاف من أعلى — بعيداً عن بطاقة الشعار التي تتدلّى من أسفله. */
#main-header .header-back.fc-back-visible {
    top: calc(max(0px, var(--safe-top)) + clamp(10px, 3vw, 16px) + 12px);
    inset-inline-start: 14px;
    inset-inline-end: auto;
    transform: none;
    background: var(--v2-scrim);
    border-color: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px var(--v2-shadow-strong);
}
#main-header .header-back.fc-back-visible:active { transform: scale(0.94); }

/* الشريط الملوّن تحت الهيدر لا معنى له مع غلاف فاتح */
#header-border { display: none; }

/* ══ شرائح الأقسام: أيقونة داخل دائرة + اسم تحتها ════════════════════ */
#category-nav-container {
    background: var(--v2-bg);
    border-bottom: 1px solid var(--v2-line);
    box-shadow: 0 6px 14px var(--v2-shadow-soft);
}

#category-nav.category-nav-scroll {
    gap: clamp(10px, 3vw, 18px);
    padding: 14px clamp(12px, 4vw, 26px) 12px;
    align-items: flex-start;
}

#category-nav .cat-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    /* الشريط يمرّر أفقياً، فالشرائح لا تُضغط لتتسع كلها في العرض */
    flex: 0 0 clamp(66px, 19vw, 86px);
    width: clamp(66px, 19vw, 86px);
    max-width: clamp(66px, 19vw, 86px);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--v2-ink-2);
    font-size: clamp(0.68rem, 2.7vw, 0.76rem);
    font-weight: 700;
    line-height: 1.3;
}

/* الاسم داخل غلافه الخاص: الاختصار بثلاث نقاط يحتاج صندوقاً حقيقياً،
   والعقدة النصية العارية كانت تُقصّ من الطرفين لأنها تتوسّط. */
#category-nav .cat-nav-lbl {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الدائرة: إيموجي القسم، أو ‎::before‎ احتياطي حين لا يوجد.
   ‎:has()‎ تمنع ازدواج الدائرة على قسم يحمل أيقونته. */
#category-nav .cat-nav-ico,
#category-nav .cat-nav-btn:not(:has(.cat-nav-ico))::before {
    width: clamp(58px, 17vw, 74px);
    height: clamp(58px, 17vw, 74px);
    border-radius: 50%;
    background: var(--v2-surface-2);
    border: 2px solid transparent;
    display: grid;
    place-items: center;
    font-size: clamp(1.45rem, 5vw, 1.85rem);
    line-height: 1;
    margin: 0 !important;
    flex: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#category-nav .cat-nav-btn:not(:has(.cat-nav-ico))::before { content: '🍽️'; }
#category-nav .cat-nav-btn[data-cat-target="scroll-top"]::before { content: '📋'; }

#category-nav .cat-nav-btn.active,
#category-nav .cat-nav-btn:active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--v2-brand-deep);
}

#category-nav .cat-nav-btn.active .cat-nav-ico,
#category-nav .cat-nav-btn.active:not(:has(.cat-nav-ico))::before {
    background: var(--v2-brand-tint);
    border-color: var(--v2-brand);
    transform: translateY(-2px);
}

#category-nav .cat-nav-btn:active .cat-nav-ico,
#category-nav .cat-nav-btn:active:not(:has(.cat-nav-ico))::before { transform: scale(0.94); }

/* ══ القسم: عنوان نظيف، والأصناف داخل بطاقة واحدة ════════════════════ */
#menu-main .category-section { margin-bottom: clamp(20px, 4vw, 34px); }

#menu-main .category-arch {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 4px 10px;
    text-align: right;
    overflow: visible;
}
#menu-main .category-arch::before { content: none; }

#menu-main .category-title {
    font-family: var(--v2-display);
    font-size: clamp(1.1rem, 4.4vw, 1.35rem);
    color: var(--v2-ink);
    text-align: right;
}

#menu-main .category-body {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 4px clamp(12px, 3.5vw, 18px);
    box-shadow: 0 4px 16px var(--v2-shadow-soft);
}

#menu-main .menu-grid {
    grid-template-columns: 1fr;
    gap: 0;
}
@container category-body (min-width: 360px) {
    #menu-main .menu-grid { grid-template-columns: 1fr; }
}
@container category-body (min-width: 760px) {
    #menu-main .menu-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(14px, 3vw, 24px);
    }
}

/* ══ صف الصنف ════════════════════════════════════════════════════════ */
#menu-main .menu-item {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--v2-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(13px, 3.5vw, 17px) 0 !important;
    gap: clamp(10px, 3vw, 14px) !important;
    align-items: center !important;
    min-height: 0;
    overflow: visible;
    animation: none;
}
#menu-main .menu-grid > .menu-item:first-child { border-top: none !important; }
@container category-body (min-width: 760px) {
    #menu-main .menu-grid > .menu-item:nth-child(2) { border-top: none !important; }
}

#menu-main .menu-item:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
}
#menu-main .menu-item:active {
    background: var(--v2-press) !important;
    transform: none;
}
#menu-main .menu-item.in-cart { background: var(--v2-brand-wash) !important; }

#menu-main .menu-item .item-content {
    padding: 0 !important;
    gap: 7px;
    align-self: stretch;
    justify-content: center;
}

#menu-main .item-top { gap: 5px; }

#menu-main .item-name {
    font-family: var(--v2-display);
    font-size: clamp(0.98rem, 3.9vw, 1.08rem) !important;
    font-weight: 700;
    color: var(--v2-ink) !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

#menu-main .item-desc {
    font-size: clamp(0.76rem, 3vw, 0.83rem) !important;
    color: var(--v2-ink-2) !important;
    line-height: 1.65;
}

#menu-main .item-opts-hint {
    color: var(--v2-brand);
    font-size: 0.68rem;
}

#menu-main .item-bottom {
    gap: 10px;
    margin-top: 4px;
}

#menu-main .item-bottom .item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
    font-weight: 800;
    color: var(--v2-brand-deep) !important;
    background: none !important;
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    font-variant-numeric: tabular-nums;
}

#menu-main .item-bottom .add-btn {
    width: 34px !important;
    height: 34px !important;
    background: var(--v2-surface-2) !important;
    color: var(--v2-brand-deep) !important;
    border: 1.5px solid var(--v2-brand-line) !important;
    box-shadow: none !important;
}
#menu-main .item-bottom .add-btn:hover {
    background: var(--v2-brand-tint) !important;
    transform: none;
}
#menu-main .item-bottom .add-btn:active { transform: scale(0.9) !important; }
#menu-main .item-bottom .add-btn.added {
    background: var(--v2-brand) !important;
    border-color: var(--v2-brand) !important;
    color: var(--v2-on-brand) !important;
    transform: none;
}

#menu-main .item-img-wrapper {
    width: clamp(88px, 26vw, 108px) !important;
    border-radius: var(--v2-radius-sm);
    overflow: hidden;
    align-self: center;
    background: var(--v2-surface-2);
    box-shadow: 0 3px 10px var(--v2-shadow-soft);
}

/* ══ شارات الصنف والسعر المشطوب ══════════════════════════════════════ */
#menu-main .item-badges { gap: 6px; }

#menu-main .item-badge {
    font-size: 0.64rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 800;
}
#menu-main .item-badge.b-best { background: var(--v2-ok-tint); color: var(--v2-ok); }
#menu-main .item-badge.b-hot  { background: var(--v2-hot-tint); color: var(--v2-hot); }
#menu-main .item-badge.b-new  { background: var(--v2-surface-2); color: var(--v2-ink-2); }
#menu-main .item-badge.b-chef { background: var(--v2-brand-tint); color: var(--v2-brand-deep); }

#menu-main .price-was {
    color: var(--v2-ink-3) !important;
    font-weight: 600;
    font-size: 0.82em;
    text-decoration: line-through;
}
#menu-main .price-save {
    background: var(--v2-ok-tint);
    color: var(--v2-ok);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
}

/* ══ ورقة الصنف — نمط صفحة المنتج ════════════════════════════════════ */
#bo-overlay #bo-sheet {
    background: var(--v2-bg);
    color: var(--v2-ink);
    border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
    max-height: 94vh;
}
@media (min-width: 640px) {
    #bo-overlay #bo-sheet {
        width: 460px;
        border-radius: var(--v2-radius-xl) 0 0 var(--v2-radius-xl);
    }
}

#bo-overlay #bo-hero {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    flex: none;
    border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
    background: var(--v2-surface-2);
}
@media (min-width: 640px) {
    #bo-overlay #bo-hero { border-radius: var(--v2-radius-xl) 0 0 0; }
}

#bo-overlay #bo-sheet .bo-head {
    flex-direction: column;
    align-items: stretch;
    padding: 14px clamp(16px, 5vw, 20px) 12px;
    border-bottom: 1px solid var(--v2-line);
    background: var(--v2-bg);
}

#bo-overlay #bo-sheet .bo-title {
    font-family: var(--v2-display);
    font-size: 1.2rem;
    color: var(--v2-ink);
    padding-inline-end: 44px;
}

#bo-overlay #bo-sheet .bo-desc {
    color: var(--v2-ink-2);
    font-size: 0.83rem;
    line-height: 1.75;
    margin-top: 6px;
}

/* زر الإغلاق يطفو أعلى الورقة — فوق الصورة حين توجد، وفوق العنوان حين لا.
   الإسناد إلى ‎#bo-sheet‎ نفسه (وهو fixed) بدل ‎.bo-head‎، فيثبت أعلى الورقة
   مهما كان ارتفاع الصورة، بلا حساب إزاحة يدوي. */
#bo-overlay #bo-sheet .bo-x {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--v2-glass-solid);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    box-shadow: 0 2px 10px var(--v2-shadow-strong);
}

#bo-overlay #bo-body {
    padding: 14px clamp(16px, 5vw, 20px) 20px;
    background: var(--v2-bg);
}

#bo-overlay #bo-sheet .bo-group {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px var(--v2-shadow-soft);
}

#bo-overlay #bo-sheet .bo-group-name {
    font-family: var(--v2-display);
    font-size: 1rem;
    color: var(--v2-ink);
}

#bo-overlay #bo-sheet .bo-tag { background: var(--v2-surface-2); color: var(--v2-ink-2); }
#bo-overlay #bo-sheet .bo-tag.req { background: var(--v2-brand-tint); color: var(--v2-brand-deep); }
#bo-overlay #bo-sheet .bo-tag.miss { background: var(--v2-bad); color: #fff; }

/* كل خيار صفٌّ قابل للنقر بحدّ واضح، لا سطر ومربع اختيار */
#bo-overlay #bo-sheet .bo-opt {
    gap: 12px;
    padding: 12px 14px;
    margin-top: 8px;
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface-2);
    transition: border-color 0.18s ease, background 0.18s ease;
}
#bo-overlay #bo-sheet .bo-opt:first-of-type {
    border-top: 1.5px solid var(--v2-line);
    margin-top: 0;
}
#bo-overlay #bo-sheet .bo-opt:has(input:checked) {
    border-color: var(--v2-brand);
    background: var(--v2-brand-tint);
}
#bo-overlay #bo-sheet .bo-opt input {
    order: 2;
    width: 21px;
    height: 21px;
    accent-color: var(--v2-brand);
}
#bo-overlay #bo-sheet .bo-opt-name {
    order: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--v2-ink);
}
#bo-overlay #bo-sheet .bo-opt-price {
    order: 1;
    font-size: 0.86rem;
    color: var(--v2-brand-deep);
}

#bo-overlay #bo-sheet .bo-note {
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}
#bo-overlay #bo-sheet .bo-note:focus {
    outline: 2px solid var(--v2-brand);
    outline-offset: 1px;
}

#bo-overlay #bo-sheet .bo-foot {
    gap: 12px;
    padding: 12px clamp(16px, 5vw, 20px) calc(14px + var(--safe-bottom));
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-line);
    box-shadow: 0 -6px 20px var(--v2-shadow-soft);
}

#bo-overlay #bo-sheet .bo-step {
    background: var(--v2-surface-2);
    border: 1.5px solid var(--v2-line);
    padding: 5px;
}
#bo-overlay #bo-sheet .bo-step button {
    width: 34px;
    height: 34px;
    background: var(--v2-surface);
    color: var(--v2-brand-deep);
    font-size: 1.2rem;
}
#bo-overlay #bo-sheet .bo-step span {
    min-width: 26px;
    font-size: 1rem;
    color: var(--v2-ink);
}

#bo-overlay #bo-add {
    padding: 15px 18px;
    border-radius: var(--v2-radius-sm);
    font-size: 0.98rem;
    color: var(--v2-on-brand);
    background: linear-gradient(135deg, var(--v2-brand), var(--v2-brand-deep));
    box-shadow: 0 6px 18px var(--v2-shadow-strong);
}
#bo-overlay #bo-add[disabled] {
    background: var(--v2-surface-2);
    color: var(--v2-ink-3);
    box-shadow: none;
}

/* ══ الشريط السفلي: لوح زجاجي طافٍ ═══════════════════════════════════ */
nav#bottom-nav {
    inset-inline: clamp(10px, 4vw, 24px);
    bottom: calc(10px + var(--safe-bottom));
    padding-bottom: 0;
    border: 1px solid var(--v2-glass-edge);
    border-top: 1px solid var(--v2-glass-edge);
    border-radius: var(--v2-radius-xl);
    overflow: hidden;
    background: var(--v2-glass);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        0 14px 36px var(--v2-shadow-strong),
        0 2px 8px var(--v2-shadow),
        inset 0 1px 0 var(--v2-glass-sheen),
        inset 0 -1px 0 var(--v2-glass-edge);
}

/* على الشاشات العريضة يتوسّط اللوح بدل أن يمتدّ من حافة لحافة.
   التوسيط بـ margin-inline: auto لا بـ translateX، لأن ‎.hidden-footer‎
   تستخدم transform لإخفاء الشريط وكانت ستمسح أي إزاحة توسيط. */
@media (min-width: 640px) {
    nav#bottom-nav {
        max-width: 520px;
        margin-inline: auto;
    }
}

/* لمعة زجاجية عبر النصف العلوي — هي ما يجعل السطح يقرأ كزجاج لا كضباب */
nav#bottom-nav::before {
    content: '';
    position: absolute;
    inset: 0 0 45% 0;
    background: linear-gradient(to bottom, var(--v2-glass-sheen), transparent);
    pointer-events: none;
    z-index: 0;
}

nav#bottom-nav .bn-item {
    position: relative;
    z-index: 1;
    padding: 11px 4px 12px;
    border-radius: var(--v2-radius);
}
nav#bottom-nav .bn-item:active { background: var(--v2-brand-tint); }
nav#bottom-nav .bn-item.is-dim { opacity: 0.55; }

nav#bottom-nav .bn-ico { font-size: 1.3rem; }
nav#bottom-nav .bn-ico-wrap,
nav#bottom-nav .bn-lbl { position: relative; z-index: 1; }
nav#bottom-nav .bn-lbl {
    color: var(--v2-ink-2);
    font-size: 0.67rem;
    font-weight: 700;
}
nav#bottom-nav .bn-item.is-active .bn-lbl { color: var(--v2-brand-deep); }

/* المؤشّر النشط حبّة خلف العنصر — شريط أفقي علوي لا معنى له على لوح
   طافٍ بحواف مدوّرة. */
#bottom-nav .bn-item.is-active::before {
    content: '';
    position: absolute;
    inset: 5px;
    width: auto;
    height: auto;
    border-radius: var(--v2-radius);
    background: var(--v2-brand-tint);
    box-shadow: inset 0 1px 0 var(--v2-glass-sheen);
    z-index: 0;
}

#bottom-nav .bn-badge {
    background: var(--v2-brand-deep);
    color: var(--v2-on-brand);
    border-color: var(--v2-glass-solid);
}

/* المساحات التي يغطّيها اللوح الطافي */
main#menu-main { padding-bottom: calc(104px + var(--safe-bottom)); }
a#whatsapp-fab { bottom: calc(88px + var(--safe-bottom)); }
#add-toast { bottom: calc(104px + var(--safe-bottom)); }

/* ══ «الأكثر طلباً»: بطاقة زجاجية بحركة نابضة ════════════════════════ */
div#popular-overlay {
    /* الأصل يبدّل display وهو ما يلغي أي انتقال؛ نُبقيه معروضاً ونُخفيه
       بالشفافية والرؤية حتى يظهر ويختفي بتلاشٍ حقيقي. */
    display: block;
    opacity: 0;
    visibility: hidden;
    background: var(--v2-scrim);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
div#popular-overlay.active {
    opacity: 1;
    visibility: visible;
}

div#popular-drawer {
    width: min(370px, 91vw);
    max-height: 76vh;
    border: 1px solid var(--v2-glass-edge);
    border-radius: var(--v2-radius-xl);
    overflow: hidden;
    background: var(--v2-glass-strong);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 26px 60px var(--v2-shadow-strong),
        inset 0 1px 0 var(--v2-glass-sheen);
    transform: translate(-50%, -50%) scale(0.88) translateY(18px);
    filter: blur(6px);
    transition:
        opacity 0.28s ease,
        transform 0.44s cubic-bezier(0.34, 1.42, 0.52, 1),
        visibility 0.44s,
        filter 0.28s ease;
}
div#popular-drawer.open {
    transform: translate(-50%, -50%) scale(1) translateY(0);
    filter: blur(0);
}

#popular-drawer .popular-drawer-header {
    background: transparent;
    color: var(--v2-ink);
    border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
    border-bottom: 1px solid var(--v2-line);
    padding: 16px 18px 13px;
    font-family: var(--v2-display);
    font-size: 1.08rem;
}

#popular-drawer .popular-close-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--v2-press);
    color: var(--v2-ink);
    font-size: 0.9rem;
    font-weight: 800;
}
#popular-drawer .popular-close-btn:hover { background: var(--v2-brand-tint); }
#popular-drawer .popular-close-btn:active { transform: scale(0.9); }

#popular-drawer-body .mr-list { padding: 12px 12px 18px; gap: 9px; }

#popular-drawer-body .mr-item {
    background: var(--v2-glass-solid);
    border: 1px solid var(--v2-glass-edge);
    border-radius: var(--v2-radius-sm);
    padding: 11px 13px;
    box-shadow: 0 3px 12px var(--v2-shadow-soft);
    /* حركة الدخول تستخدم ‎translate‎ المستقلة لا ‎transform‎، حتى لا يبتلع
       المفتاح الضمني للحركة تحويل ‎:active‎ بعد انتهائها. */
    animation: v2ItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#popular-drawer-body .mr-item:hover {
    background: var(--v2-surface);
    box-shadow: 0 6px 18px var(--v2-shadow);
}
#popular-drawer-body .mr-item:nth-child(1) { animation-delay: 0.03s; }
#popular-drawer-body .mr-item:nth-child(2) { animation-delay: 0.07s; }
#popular-drawer-body .mr-item:nth-child(3) { animation-delay: 0.11s; }
#popular-drawer-body .mr-item:nth-child(4) { animation-delay: 0.15s; }
#popular-drawer-body .mr-item:nth-child(5) { animation-delay: 0.19s; }
#popular-drawer-body .mr-item:nth-child(n+6) { animation-delay: 0.22s; }

@keyframes v2ItemIn {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
}

/* الميداليات الثلاث الأولى تأخذ قرصاً ملوّناً يقرأ كمنصّة تتويج */
#popular-drawer-body .mr-medal {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--v2-surface-2);
    font-size: 1.1rem;
}
#popular-drawer-body .mr-item:nth-child(1) .mr-medal { background: var(--v2-hot-tint); }
#popular-drawer-body .mr-item:nth-child(2) .mr-medal { background: var(--v2-brand-tint); }
#popular-drawer-body .mr-item:nth-child(3) .mr-medal { background: var(--v2-ok-tint); }

#popular-drawer-body .mr-name { color: var(--v2-ink); font-size: 0.9rem; }
#popular-drawer-body .mr-desc { color: var(--v2-ink-2); }
#popular-drawer-body .mr-price { color: var(--v2-brand-deep); font-weight: 800; }
#popular-drawer-body .mr-add {
    width: 30px;
    height: 30px;
    background: var(--v2-brand);
    color: var(--v2-on-brand);
    box-shadow: 0 2px 8px var(--v2-shadow-strong);
}
#popular-drawer-body .mr-add:hover { background: var(--v2-brand-deep); }
#popular-drawer-body .popular-loading { color: var(--v2-ink-2); }

/* ══ التذييل ═════════════════════════════════════════════════════════
   بنية جديدة (‎ft-*‎ من buildFooter): علامة، ثم صف إجراءات دائرية، ثم
   بطاقة حقائق، ثم شريط سفلي. لا فواصل ‎<hr>‎ ولا أعمدة مكدّسة. */
#site-footer {
    margin-top: clamp(26px, 6vw, 50px);
    border-top: none;
    border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
    background: var(--v2-footer-bg);
    color: var(--v2-footer-ink);
    padding: clamp(30px, 7vw, 46px) clamp(16px, 5vw, 28px)
             calc(clamp(22px, 5vw, 32px) + 104px + var(--safe-bottom));
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -14px 40px var(--v2-shadow-strong);
}

/* خيط لوني رفيع أعلى اللوح يحترم الزوايا المدوّرة، بدل حدّ سميك */
#site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--v2-footer-accent), transparent);
}

#site-footer .ft-inner {
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 5vw, 28px);
}

/* ── العلامة ── */
#site-footer .ft-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#site-footer .ft-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    border-radius: var(--v2-radius-sm);
    display: grid;
    place-items: center;
    background: var(--v2-footer-well);
    border: 1px solid var(--v2-footer-line);
    object-fit: cover;
    font-family: var(--v2-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--v2-footer-ink);
}
#site-footer .ft-name {
    font-family: var(--v2-display);
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--v2-footer-ink);
}
#site-footer .ft-tag {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--v2-footer-ink-2);
    max-width: 34ch;
}

/* ── صف الإجراءات: دوائر بأيقونة واسم تحتها ── */
#site-footer .ft-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(14px, 4vw, 22px);
}
#site-footer .ft-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 68px;
    text-decoration: none;
    color: var(--v2-footer-ink-2);
    font-size: 0.7rem;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
#site-footer .ft-act-ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--v2-footer-well);
    border: 1px solid var(--v2-footer-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--v2-footer-ink);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
#site-footer .ft-act:hover .ft-act-ico {
    background: var(--v2-footer-well-hi);
    border-color: var(--v2-footer-line-hi);
    transform: translateY(-3px);
}
#site-footer .ft-act:active .ft-act-ico { transform: scale(0.93); }
#site-footer .ft-act:hover { color: var(--v2-footer-ink); }
#site-footer .ft-act svg { width: 21px; height: 21px; fill: currentColor; }

/* الواتساب يحتفظ بلونه المعروف — التعرّف عليه أهم من الاتساق هنا */
#site-footer .ft-act.is-whatsapp .ft-act-ico {
    background: #25D366;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
#site-footer .ft-act.is-instagram .ft-act-ico {
    background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ── بطاقة الحقائق: أوقات العمل وطرق الدفع ── */
#site-footer .ft-facts {
    width: 100%;
    display: grid;
    gap: 1px;
    background: var(--v2-footer-line);
    border: 1px solid var(--v2-footer-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
}
@media (min-width: 480px) {
    #site-footer .ft-facts { grid-template-columns: 1fr 1fr; }
}
#site-footer .ft-fact {
    background: var(--v2-footer-well);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
#site-footer .ft-fact-k {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-footer-ink-3);
}
#site-footer .ft-fact-v {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--v2-footer-ink);
    font-variant-numeric: tabular-nums;
}
#site-footer .ft-pays {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
#site-footer .ft-pay {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--v2-footer-well-hi);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--v2-footer-ink);
}

/* ── الشريط السفلي ── */
#site-footer .ft-base {
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--v2-footer-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#site-footer .ft-slogan {
    font-size: 0.7rem;
    color: var(--v2-footer-ink-3);
    line-height: 1.6;
}
#site-footer .bitikka-credit-wrap { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    #category-nav .cat-nav-ico,
    #category-nav .cat-nav-btn:not(:has(.cat-nav-ico))::before { transition: none; }
    div#popular-drawer { transition: opacity 0.2s ease, visibility 0.2s ease; filter: none; }
    #popular-drawer-body .mr-item { animation: none; }
    #site-footer .ft-act:hover .ft-act-ico { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STORE VERTICAL — image-forward product cards
   -----------------------------------------------------------------------
   The retail storefront reuses this exact template (the one تراث runs); the
   only change is the item card. A restaurant row leads with words and keeps
   the photo to the side — a shop leads with the garment. Scoped to
   `#menu-main.store` (set in applyStoreTerminology) so a restaurant menu is
   never affected. Pure CSS re-flow of the same markup: the picture moves to
   the top, fills the card, and the copy steps back to a name + price.
   ═══════════════════════════════════════════════════════════════════════ */
#menu-main.store .menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(22px, 5.5vw, 34px) clamp(14px, 3.5vw, 22px) !important;
}
/* give the category body room so tiles don't touch its edges */
#menu-main.store .category-body { padding: clamp(12px, 3.5vw, 22px) !important; }
@container category-body (min-width: 560px) {
    #menu-main.store .menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@container category-body (min-width: 880px) {
    #menu-main.store .menu-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

#menu-main.store .menu-item {
    flex-direction: column !important;
    align-items: stretch !important;
    border-top: none !important;
    padding: 0 !important;
    gap: 9px !important;
    position: relative;
}
/* the list divider is meaningless once these are tiles, not rows */
#menu-main.store .menu-grid > .menu-item { border-top: none !important; }

/* the photo is the hero: on top, full width, tall */
#menu-main.store .item-img-wrapper {
    order: -1 !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    align-self: stretch !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}
#menu-main.store .item-img-wrapper .item-img,
#menu-main.store .item-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* words step back so the garment leads */
#menu-main.store .item-content { gap: 4px !important; justify-content: flex-start !important; }
#menu-main.store .item-desc,
#menu-main.store .item-opts-hint { display: none !important; }
#menu-main.store .item-top { gap: 3px; }
#menu-main.store .item-name {
    -webkit-line-clamp: 1 !important;
    font-size: clamp(0.9rem, 3.6vw, 1rem) !important;
}
/* a "new" badge belongs on the picture, not under it */
#menu-main.store .item-badges {
    position: absolute !important;
    top: 9px; inset-inline-start: 9px;
    z-index: 2; margin: 0 !important;
}

/* name + price on one tidy line under the picture */
#menu-main.store .item-bottom {
    margin-top: 0 !important;
    align-items: center;
    justify-content: space-between;
}
#menu-main.store .item-bottom .item-price { font-size: clamp(0.9rem, 3.6vw, 1rem) !important; }

/* a photoless product still needs a little breathing room at the top */
#menu-main.store .menu-item:not(.has-image) .item-content { padding-top: 4px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   STORE PALETTE — elegant black / white / gold
   -----------------------------------------------------------------------
   The kanan template hands the shared layout a heritage-green palette. A
   clothing shop wants the opposite mood, so a store retenants every --v2
   token here (scoped to html.store-tenant, set in applyStoreTerminology).
   This recolours the header, category rail, cards, prices, footer and the
   frosted bottom nav in one place; restaurants keep kanan's greens.
   ═══════════════════════════════════════════════════════════════════════ */
html.store-tenant {
    --v2-brand: #C9A24B;                 /* gold accent */
    --v2-brand-deep: #9C7A2A;            /* deeper gold — prices, emphasis */
    --v2-on-brand: #17130A;              /* ink sits on the gold, not white */
    --v2-brand-tint: rgba(201,162,75,.14);
    --v2-brand-wash: rgba(201,162,75,.06);
    --v2-brand-line: rgba(201,162,75,.42);

    --v2-bg: #FAF9F7;                     /* warm near-white */
    --v2-surface: #FFFFFF;
    --v2-surface-2: #F2F0EB;
    --v2-ink: #141414;                    /* near-black */
    --v2-ink-2: #5B5750;
    --v2-ink-3: #9C978E;
    --v2-line: rgba(20,20,20,.12);
    --v2-press: rgba(20,20,20,.05);
    --v2-scrim: rgba(18,16,12,.55);

    --v2-shadow-soft: rgba(20,20,20,.07);
    --v2-shadow: rgba(20,20,20,.14);
    --v2-shadow-strong: rgba(20,20,20,.22);

    /* the cover falls back to an elegant dark wash when no photo is set */
    --v2-cover: linear-gradient(135deg, #201d18, #383127);

    /* footer: black with a gold hairline — reads as a fashion label */
    --v2-footer-bg: linear-gradient(168deg, #1b1917 0%, #0d0c0b 100%);
    --v2-footer-accent: #C9A24B;
    --v2-footer-ink: #F3F1EC;
    --v2-footer-ink-2: rgba(243,241,236,.72);
    --v2-footer-ink-3: rgba(243,241,236,.5);
    --v2-footer-line: rgba(201,162,75,.28);
    --v2-footer-line-hi: rgba(201,162,75,.4);
    --v2-footer-well: rgba(255,255,255,.04);
    --v2-footer-well-hi: rgba(255,255,255,.08);

    /* base palette anchors used by the cart / option sheet */
    --primary: #C9A24B;
    --primary-dark: #9C7A2A;
}

/* Emoji category icons read as playful/food; a fashion rail is cleaner as
   text alone. Drop the icon tile and let the label carry the nav. */
html.store-tenant #category-nav .cat-nav-ico { display: none !important; }
html.store-tenant #category-nav .cat-nav-btn { padding-top: 4px; padding-bottom: 4px; }
html.store-tenant #category-nav .cat-nav-lbl { font-size: 0.95rem; font-weight: 700; }
