/* =========================================================
   DM Mega Menu — «نوار کامل منو» (ویجت المنتوری/شورت‌کد dm_mega_menu_bar)
   dependency روی dm-mega-menu-frontend.css (متغیرهای --dmmega-* + کلاس پایه‌ی قالب انحصاری
   dm-megamenu-img-side را از آنجا می‌گیرد؛ فقط موقعیت‌دهیِ پنل مستقل هر آیتم نوار افقی و
   اورراید مودال موبایل مخصوص همین فایل است)
   ========================================================= */

.dmmega-bar-wrapper {
    direction: rtl;
    box-sizing: border-box;
    position: relative;
    font-family: var(--dmmega-font, inherit);
    font-size: var(--dmmega-font-size, inherit);
}
.dmmega-bar-wrapper *,
.dmmega-bar-wrapper *::before,
.dmmega-bar-wrapper *::after {
    box-sizing: border-box;
}
.dmmega-bar-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dmmega-bar-wrapper a {
    text-decoration: none;
    color: inherit;
}
.dmmega-bar-wrapper img {
    max-width: 100%;
    display: block;
}

/* ── نوار افقی دسکتاپ ─────────────────────────────────── */
.dmmega-bar {
    display: none;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
}
@media (min-width: 992px) {
    .dmmega-bar { display: flex; }
}

.dmmega-bar > li {
    position: relative;
    display: flex;
    align-items: center;
}

/* پلِ هاور: نوارِ نامرئیِ بینِ لینک و پنلی که زیرش باز می‌شود. بدون آن، کوچک‌ترین حرکتِ مورب
   موس از روی li بیرون می‌زند و پنل وسطِ راه بسته می‌شود — همان «بیشترِ وقت‌ها باز نمی‌شود».
   عمداً فقط روی آیتمی که واقعاً پنل دارد و فقط هنگام هاور، تا کلیکِ چیزی را نگیرد. */
.dmmega-bar > li.has-dmmega-child::after,
.dmmega-bar > li.has-dmmega-plain-child::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline: 0;
    height: 10px;
    display: none;
}
.dmmega-bar > li.has-dmmega-child:hover::after,
.dmmega-bar > li.has-dmmega-plain-child:hover::after {
    display: block;
}

/* آیتم مگامنو (لینک سطح‌اول، همان مارک‌آپ .dmmega-icon/.dmmega-body/.dmmega-title موجود) */
.dmmega-bar > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dmmega-text);
    transition: color .15s;
}
.dmmega-bar > li > a:hover,
.dmmega-bar > li.is-active > a {
    color: var(--dmmega-primary);
}

/* Round 18 — آیکن دستیِ خودِ آیتم (اگر ست شده باشد) و فلش دراپ‌داون برای آیتم‌های سطح‌اولِ نوار
   که فرزند دارند (مگا یا پلین) — قبلاً هیچ‌کدام رندر نمی‌شد. فلش با همان .dmmega-plain-caret
   مشترک (frontend.css) است؛ اینجا فقط چرخشِ حالت هاور/فعالِ مخصوصِ نوار دسکتاپ اضافه می‌شود
   (رفتار موبایل/آف‌کانواس در frontend.css جدا و دست‌نخورده است). */
.dmmega-bar > li > a .dmmega-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.dmmega-bar > li > a .dmmega-icon img,
.dmmega-bar > li > a .dmmega-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dmmega-bar > li > a .dmmega-plain-caret {
    /* بی‌اثر کردن چرخش پایه‌ی مشترک (frontend.css، برای فلش‌های فلای‌اوت افقی) — فلش سطح‌اول
       نوار باید رو‌به‌پایین باشد (svg پیش‌فرض خودش رو‌به‌پایین است)، مگر کاربر زاویه‌ی
       دلخواه ست کند (کنترل المنتور/فیلد تنظیمات، هر دو همین متغیر را می‌نویسند). */
    transform: rotate(var(--dmmega-caret-rotate, 0deg));
    transition: transform .2s;
}
.dmmega-bar > li:hover > a .dmmega-plain-caret,
.dmmega-bar > li.is-active > a .dmmega-plain-caret {
    transform: rotate(calc(var(--dmmega-caret-rotate, 0deg) + 180deg));
}

/* پنل مگامنو به‌صورت دراپ‌داون مستقل زیر همان آیتم (نه سایدبار مثل دکمه‌ی شناور) — پس‌زمینه/
   سایه/عرض قالب «dm-megamenu-img-side» در dm-mega-menu-frontend.css مشترک تعریف شده‌اند؛
   اینجا فقط موقعیت‌دهیِ مخصوصِ پنل مستقل زیر هر آیتم نوار */
.dmmega-bar > li > .dm-megamenu-img-side {
    position: absolute;
    /* عمداً یک هم‌پوشانیِ کوچک (نه دقیقاً top:100%) — روی برخی مانیتورهای بزرگ با مقیاس‌بندیِ
       سیستم‌عاملِ کسری (مثلاً 125%/150%) رُند شدنِ subpixel می‌تواند بین لینک و پنل یک شکاف
       ۱پیکسلیِ نامرئی ایجاد کند؛ موس از همان شکاف رد می‌شود، :hover از دست می‌رود، پنل کاملاً
       مخفی/ظاهر می‌شود (فلیکر گزارش‌شده‌ی کاربر). این هم‌پوشانی تضمین می‌کند هیچ‌وقت شکاف واقعی
       نباشد، مستقل از هر مقیاس صفحه‌ای. */
    top: calc(100% - 4px);
    right: 0;
    left: auto;
    bottom: auto;
    max-width: 90vw;
    z-index: 9999;
    display: none;
}
.dmmega-bar > li:hover > .dm-megamenu-img-side,
.dmmega-bar > li.is-active > .dm-megamenu-img-side {
    display: block;
}
@media (hover: none) {
    .dmmega-bar > li:hover > .dm-megamenu-img-side { display: none; }
}

/* Round 14 — قالب دوم «dm-megamenu-img-topbanner» (فقط دسکتاپ/نوار، انتخاب per-instance)؛
   ظاهر/رنگ‌ها در dm-mega-menu-frontend.css، اینجا فقط موقعیت‌دهیِ مستقل زیر هر آیتم نوار،
   عیناً هم‌الگو با override بالا برای img-side */
.dmmega-bar > li > .dm-megamenu-img-topbanner {
    position: absolute;
    /* عمداً یک هم‌پوشانیِ کوچک (نه دقیقاً top:100%) — روی برخی مانیتورهای بزرگ با مقیاس‌بندیِ
       سیستم‌عاملِ کسری (مثلاً 125%/150%) رُند شدنِ subpixel می‌تواند بین لینک و پنل یک شکاف
       ۱پیکسلیِ نامرئی ایجاد کند؛ موس از همان شکاف رد می‌شود، :hover از دست می‌رود، پنل کاملاً
       مخفی/ظاهر می‌شود (فلیکر گزارش‌شده‌ی کاربر). این هم‌پوشانی تضمین می‌کند هیچ‌وقت شکاف واقعی
       نباشد، مستقل از هر مقیاس صفحه‌ای. */
    top: calc(100% - 4px);
    right: 0;
    left: auto;
    bottom: auto;
    max-width: 90vw;
    z-index: 9999;
    display: none;
}
.dmmega-bar > li:hover > .dm-megamenu-img-topbanner,
.dmmega-bar > li.is-active > .dm-megamenu-img-topbanner {
    display: block;
}
@media (hover: none) {
    .dmmega-bar > li:hover > .dm-megamenu-img-topbanner { display: none; }
}

/* Round 15 — قالب سوم «dm-megamenu-img-bigcart» (فقط دسکتاپ/نوار، per-instance)؛ همان الگو. */
.dmmega-bar > li > .dm-megamenu-img-bigcart {
    position: absolute;
    /* عمداً یک هم‌پوشانیِ کوچک (نه دقیقاً top:100%) — روی برخی مانیتورهای بزرگ با مقیاس‌بندیِ
       سیستم‌عاملِ کسری (مثلاً 125%/150%) رُند شدنِ subpixel می‌تواند بین لینک و پنل یک شکاف
       ۱پیکسلیِ نامرئی ایجاد کند؛ موس از همان شکاف رد می‌شود، :hover از دست می‌رود، پنل کاملاً
       مخفی/ظاهر می‌شود (فلیکر گزارش‌شده‌ی کاربر). این هم‌پوشانی تضمین می‌کند هیچ‌وقت شکاف واقعی
       نباشد، مستقل از هر مقیاس صفحه‌ای. */
    top: calc(100% - 4px);
    right: 0;
    left: auto;
    bottom: auto;
    max-width: 90vw;
    height: var(--dmimgbc-box-height, 450px);
    z-index: 9999;
    display: none;
}
.dmmega-bar > li:hover > .dm-megamenu-img-bigcart,
.dmmega-bar > li.is-active > .dm-megamenu-img-bigcart {
    display: block;
}
@media (hover: none) {
    .dmmega-bar > li:hover > .dm-megamenu-img-bigcart { display: none; }
}

/* ── همبرگر موبایل ─────────────────────────────────────── */
/* پیش‌فرض مخفی؛ فقط media query زیر ۹۹۲px (یا بریک‌پوینت سفارشی از <style> اینلاین در
   Render::renderInlineBar) آن را نمایان می‌کند. عمداً display:none در حالت پایه (نه flex) تا
   این قانون هیچ‌وقت به ترتیب قرارگیری در فایل وابسته نباشد. */
.dmmega-bar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid var(--dmmega-border);
    border-radius: var(--dmmega-radius);
    color: var(--dmmega-text);
    cursor: pointer;
}
@media (max-width: 991.98px) {
    .dmmega-bar-hamburger { display: flex; }
}
.dmmega-bar-hamburger:hover { color: var(--dmmega-primary); border-color: var(--dmmega-primary); }

/* ── دکمه‌ی ویجت مستقل «منوی موبایل» ───────────────────── */
/* برخلاف .dmmega-bar-hamburger هیچ بریک‌پوینتی هاردکد ندارد و پیش‌فرض همیشه دیده می‌شود —
   نمایش/مخفی‌سازی بر اساس دستگاه با تب Advanced > Responsive خودِ المنتور کنترل می‌شود. */
.dmmega-standalone-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--dmmega-border);
    border-radius: var(--dmmega-radius);
    color: var(--dmmega-text);
    padding: 10px 16px;
    cursor: pointer;
}
.dmmega-standalone-trigger:hover { color: var(--dmmega-primary); border-color: var(--dmmega-primary); }
.dmmega-standalone-trigger__icon { display: inline-flex; align-items: center; justify-content: center; }
.dmmega-standalone-trigger__icon svg { width: 22px; height: 22px; }
.dmmega-standalone-trigger__label { font-size: 14px; font-weight: 600; }

/* ── مودال موبایل «شیک» (متفاوت از آف‌کانواس ریلی دکمه‌ی شناور) ── */
.dmmega-bar-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    visibility: hidden;
    opacity: 0;
    direction: rtl;
    font-family: var(--dmmega-font, inherit);
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.dmmega-bar-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease;
}
.dmmega-bar-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, .55);
    backdrop-filter: blur(2px);
}
/* ارتفاع عمداً auto است و فقط سقفِ ۹۰٪ ویوپورت دارد: مودالِ کوتاه به اندازهٔ محتوایش
   جمع می‌شود و از آن به بعد بدنه (نه کلِ صفحه) اسکرول می‌خورد. */
.dmmega-bar-modal-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    transform: translateY(-16px) scale(.97);
    transition: transform var(--dmmega-modal-anim-duration, .3s) cubic-bezier(.34, 1.3, .64, 1),
                opacity var(--dmmega-modal-anim-duration, .3s) ease;
}
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner {
    transform: translateY(0) scale(1);
}

/* ── حالتِ پیش‌فرضِ نوار: شیتِ پایین‌صفحه ──────────────────────────────
   ⚠ چرا جایگزینِ مودالِ وسط شد: ارتفاعِ مودالِ وسط تابعِ محتوا بود، پس با هر بار عوض‌کردنِ
   زبانه یا ستون، کادر بالا و پایین می‌پرید. شیت ارتفاعِ ثابت دارد (پیش‌فرض ۶۰٪ صفحه، قابل
   تنظیم در تب ظاهر) و محتوای کمتر فقط فضای خالی می‌گذارد، نه جهش. */
.dmmega-bar-modal[data-dmmega-modal-pos="sheet"] {
    align-items: flex-end;
    padding: 0;
}
.dmmega-bar-modal[data-dmmega-modal-pos="sheet"] .dmmega-bar-modal-inner {
    width: 100%;
    max-width: none;
    height: var(--dmmega-sheet-height, 60vh);
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform var(--dmmega-modal-anim-duration, .32s) cubic-bezier(.22, .8, .3, 1);
}
.dmmega-bar-modal[data-dmmega-modal-pos="sheet"].is-open .dmmega-bar-modal-inner {
    transform: translateY(0);
}
/* دستگیرهٔ کوچکِ بالای شیت — نشانهٔ متعارفِ «این از پایین آمده». */
.dmmega-bar-modal[data-dmmega-modal-pos="sheet"] .dmmega-modal-head::before {
    content: "";
    position: absolute;
    top: 6px;
    inset-inline: 0;
    margin: 0 auto;
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: #dfe1ec;
}
.dmmega-bar-modal[data-dmmega-modal-pos="sheet"] .dmmega-modal-head {
    position: relative;
    padding-top: 18px;
}

/* ── موقعیت مودال (data-dmmega-modal-pos، از ویجت «دکمه‌ی منوی موبایل») ── */
.dmmega-bar-modal[data-dmmega-modal-pos="top"] { align-items: flex-start; }
.dmmega-bar-modal[data-dmmega-modal-pos="bottom"] { align-items: flex-end; }
.dmmega-bar-modal[data-dmmega-modal-pos="right"],
.dmmega-bar-modal[data-dmmega-modal-pos="left"] { padding: 0; align-items: stretch; }
.dmmega-bar-modal[data-dmmega-modal-pos="right"] { justify-content: flex-end; }
.dmmega-bar-modal[data-dmmega-modal-pos="left"] { justify-content: flex-start; }
.dmmega-bar-modal[data-dmmega-modal-pos="fullscreen"] { padding: 0; }

.dmmega-bar-modal[data-dmmega-modal-pos="right"] .dmmega-bar-modal-inner,
.dmmega-bar-modal[data-dmmega-modal-pos="left"] .dmmega-bar-modal-inner {
    width: 100%;
    max-width: 380px;
    height: 100%;
    max-height: none;
    border-radius: 0;
}
.dmmega-bar-modal[data-dmmega-modal-pos="fullscreen"] .dmmega-bar-modal-inner {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* ── سرعت انیمیشن (data-dmmega-anim-duration، مقادیر بومی المنتور: slow/normal/fast) ── */
.dmmega-bar-modal[data-dmmega-anim-duration="slow"] .dmmega-bar-modal-inner { --dmmega-modal-anim-duration: .8s; }
.dmmega-bar-modal[data-dmmega-anim-duration="normal"] .dmmega-bar-modal-inner { --dmmega-modal-anim-duration: .5s; }
.dmmega-bar-modal[data-dmmega-anim-duration="fast"] .dmmega-bar-modal-inner { --dmmega-modal-anim-duration: .3s; }

/* ── انیمیشن‌های ورود/خروج (data-dmmega-anim، از لیست المنتور — dm-mega-menu-widget.js نام
   کلاسِ متناظر را روی .dmmega-bar-modal-inner باز/بسته می‌کند؛ گزینه‌های خارج از این ست کوچک
   به‌صورت خودکار روی dmmega-anim-fade فال‌بک می‌شوند) ── */
.dmmega-bar-modal-inner.dmmega-anim-fade { transform: none; opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-fade { opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-fadeInUp { transform: translateY(40px); opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-fadeInUp { transform: translateY(0); opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-fadeInDown { transform: translateY(-40px); opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-fadeInDown { transform: translateY(0); opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-fadeInLeft { transform: translateX(-40px); opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-fadeInLeft { transform: translateX(0); opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-fadeInRight { transform: translateX(40px); opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-fadeInRight { transform: translateX(0); opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-zoomIn { transform: scale(.7); opacity: 0; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-zoomIn { transform: scale(1); opacity: 1; }

.dmmega-bar-modal-inner.dmmega-anim-slideInUp { transform: translateY(100%); opacity: 1; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-slideInUp { transform: translateY(0); }

.dmmega-bar-modal-inner.dmmega-anim-slideInDown { transform: translateY(-100%); opacity: 1; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-slideInDown { transform: translateY(0); }

.dmmega-bar-modal-inner.dmmega-anim-slideInLeft { transform: translateX(-100%); opacity: 1; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-slideInLeft { transform: translateX(0); }

.dmmega-bar-modal-inner.dmmega-anim-slideInRight { transform: translateX(100%); opacity: 1; }
.dmmega-bar-modal.is-open .dmmega-bar-modal-inner.dmmega-anim-slideInRight { transform: translateX(0); }
/* =========================================================
   منوی موبایلِ سه قالبِ اول — مودالِ دو-زبانه (ModalMenu.php).
   ساختار: سرِ چسبان با زبانه‌ها → بدنهٔ اسکرول‌شونده → زبانهٔ مگا (ریلِ سطح‌اول + پنلِ کناری
   با آکاردئونِ تودرتو) یا زبانهٔ دسترسی سریع.
   ========================================================= */
.dmmega-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 14px;
    border-bottom: 1px solid #eceef4;
    background: #fff;
}
.dmmega-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dmmega-text, #222);
}
/* هر آیتمِ سطح‌اولِ منو یک زبانه است، پس تعدادشان می‌تواند زیاد باشد: نوار افقی اسکرول
   می‌خورد و زبانه‌ها هرگز فشرده/چندخطی نمی‌شوند. */
.dmmega-modal-tabs {
    display: flex;
    gap: 6px;
    min-width: 0;
    padding: 4px;
    border-radius: 12px;
    background: #f4f5fa;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.dmmega-modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: none;
    background: none;
    border-radius: 9px;
    padding: 8px 14px;
    min-height: 34px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #7a7d99;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.dmmega-modal-tab.is-active {
    background: var(--dmmega-primary, #ff6600);
    color: #fff;
}
/* سطح‌اولِ بدونِ زیرمجموعه: در همان نوار، ولی لینکِ واقعی — نه زبانه‌ای که پنل ندارد. */
.dmmega-modal-tab--link:hover { color: var(--dmmega-primary, #ff6600); }
.dmmega-modal-tab-label { display: inline-block; }
.dmmega-modal-tab-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.dmmega-modal-tab-icon img,
.dmmega-modal-tab-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dmmega-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f5f5f7;
    color: #888;
    cursor: pointer;
}
.dmmega-modal-close:hover { background: #ececf1; color: #333; }

.dmmega-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dmmega-modal-pane { display: none; }
.dmmega-modal-pane.is-active { display: block; }

/* ── زبانهٔ مگا: ریلِ سطح‌اول کنارِ پنل ── */
.dmmega-modal-split {
    display: grid;
    grid-template-columns: minmax(104px, 38%) 1fr;
    align-items: start;
}
/* وقتی هیچ‌کدام از آیتم‌های سطح دوم زیرمجموعه ندارند، پنلی وجود ندارد و ریل تمام عرض است. */
.dmmega-modal-split--railonly { grid-template-columns: 1fr; }
.dmmega-modal-split--railonly .dmmega-modal-rail {
    border-inline-end: none;
    background: none;
}
.dmmega-modal-rail {
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid #eceef4;
    background: #fafbff;
    padding: 8px 0;
}
.dmmega-modal-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dmmega-text, #222);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
/* ردیفِ بدونِ زیرمجموعه یک لینکِ واقعی است، نه زبانه: حالتِ اکتیو نمی‌گیرد. */
.dmmega-modal-rail-item--link { font-weight: 700; }
.dmmega-modal-rail-item--link:hover { color: var(--dmmega-primary, #ff6600); }
.dmmega-modal-rail-item.is-active {
    background: #fff;
    color: var(--dmmega-primary, #ff6600);
}
/* ⚠ خطِ نشانگرِ اکتیو با شبه‌عنصر است نه box-shadow: box-shadow نسخهٔ منطقی ندارد و
   inset 3px همیشه سمتِ چپِ فیزیکی می‌نشیند — یعنی در راست‌به‌چپ سمتِ اشتباه. */
.dmmega-modal-rail-item.is-active::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--dmmega-primary, #ff6600);
}
.dmmega-modal-rail-label { flex: 1 1 auto; }
.dmmega-modal-rail-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
.dmmega-modal-rail-icon img,
.dmmega-modal-rail-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dmmega-modal-rail-caret {
    flex: 0 0 auto;
    transform: rotate(90deg);
    opacity: .5;
}
.dmmega-modal-rail-item.is-active .dmmega-modal-rail-caret { opacity: 1; }

.dmmega-modal-panels { padding: 10px 12px 16px; }
.dmmega-modal-panel { display: none; }
.dmmega-modal-panel.is-active { display: block; }
.dmmega-modal-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.dmmega-modal-panel-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dmmega-text, #222);
}
.dmmega-modal-panel-all {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--dmmega-primary, #ff6600);
    text-decoration: none;
}

/* ── آکاردئونِ سطح دوم به بعد (هم در پنلِ مگا، هم در زبانهٔ دسترسی سریع) ── */
.dmmega-modal-branch {
    display: flex;
    flex-direction: column;
}
/* تورفتگی عمداً بر اساسِ «داخلِ یک گروه بودن» است نه شمارهٔ عمق: عمقِ شروع در زبانهٔ مگا و
   زبانهٔ دسترسی سریع فرق دارد و قاعدهٔ شماره‌ای یکی از آن دو را همیشه بی‌تورفتگی می‌گذاشت. */
.dmmega-modal-group-body > .dmmega-modal-branch {
    padding-inline-start: 10px;
    margin-inline-start: 4px;
    border-inline-start: 1px dashed #e3e5ef;
}
.dmmega-modal-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dmmega-modal-group-link,
.dmmega-modal-leaf {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px 2px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dmmega-text, #222);
    text-decoration: none;
}
.dmmega-modal-group-link { font-weight: 700; }
.dmmega-modal-leaf { color: #5b5e73; }
.dmmega-modal-group-link:hover,
.dmmega-modal-leaf:hover { color: var(--dmmega-primary, #ff6600); }

.dmmega-modal-acc {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #f4f5fa;
    color: #7a7d99;
    cursor: pointer;
}
/* بسته = رو به چپ، باز = رو به پایین. آیکنِ پایه چِوِرونِ رو-به-پایین است، پس ۹۰ درجهٔ
   ساعتگرد آن را به چپ می‌برد (منفی‌اش به راست می‌برد — همان چیزی که اشتباه بود). */
.dmmega-modal-acc-caret {
    transition: transform .2s ease;
    transform: rotate(90deg);
}
.dmmega-modal-group.is-open > .dmmega-modal-group-head .dmmega-modal-acc-caret {
    transform: rotate(0deg);
}
.dmmega-modal-group > .dmmega-modal-group-body { display: none; }
.dmmega-modal-group.is-open > .dmmega-modal-group-body { display: block; }

/* ── زبانهٔ دسترسی سریع ── */
.dmmega-modal-quick { padding: 8px 14px 16px; }
.dmmega-modal-quick > .dmmega-modal-branch > .dmmega-modal-leaf,
.dmmega-modal-quick > .dmmega-modal-branch > .dmmega-modal-group {
    border-bottom: 1px solid #f2f3f8;
}
.dmmega-modal-quick > .dmmega-modal-branch > *:last-child { border-bottom: none; }

/* روی صفحه‌های خیلی باریک، ریل و پنل زیر هم می‌روند تا عنوان‌ها له نشوند. */
@media (max-width: 359px) {
    .dmmega-modal-split { grid-template-columns: 1fr; }
    .dmmega-modal-rail {
        border-inline-end: none;
        border-bottom: 1px solid #eceef4;
    }
}

/* =========================================================
   منوی موبایلِ اختصاصیِ قالب دوم (TopbannerMobile.php) — آف‌کانواسِ تمام‌صفحه با بنر.
   کاملاً جدا از مودالِ .dmmega-modal-* بالا: ریسپانسیوِ هر قالب ایزوله است.
   ========================================================= */
.dmtb-oc {
    position: fixed;
    inset: 0;
    z-index: 99999;
    direction: rtl;
    font-family: var(--dmmega-font, inherit);
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.dmtb-oc.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease;
}
.dmtb-oc__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateY(14px);
    transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
}
.dmtb-oc.is-open .dmtb-oc__inner { transform: translateY(0); }

/* ── بنر ── */
.dmtb-oc__banner {
    position: relative;
    flex: 0 0 auto;
    height: var(--dmimgtb-banner-height, 132px);
    background: #06061c;
    overflow: hidden;
}
.dmtb-oc__banner-media {
    position: absolute;
    inset: 0;
    background-size: var(--dmimgtb-banner-img-fit, cover);
    background-position: var(--dmimgtb-banner-img-position, center);
    background-repeat: no-repeat;
    filter: var(--dmimgtb-banner-grayscale, none);
    transition: opacity .25s ease;
}
.dmtb-oc__banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), var(--dmimgtb-banner-overlay-color, rgba(0, 0, 0, .45)));
}
/* بالا-چپ، با پس‌زمینهٔ خودش تا روی هر تصویری از بنر جدا دیده شود. */
.dmtb-oc__close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #06061c;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    cursor: pointer;
}
.dmtb-oc__close:hover { background: #fff; }

/* ── زبانه‌ها: تمام عرض، اکتیو با سایه، جداشده از بدنه با یک خط ── */
.dmtb-oc__tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #e7e8f2;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.dmtb-oc__tab {
    flex: 1 1 0;
    min-width: 104px;
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: #7a7d99;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dmtb-oc__tab.is-active {
    background: #fff;
    color: var(--dmmega-text, #131327);
    box-shadow: 0 6px 18px rgba(18, 20, 45, .12), 0 1px 3px rgba(18, 20, 45, .08);
}
.dmtb-oc__tab--link { display: flex; align-items: center; justify-content: center; }
.dmtb-oc__tab--link:hover { color: var(--dmmega-primary, #ff6600); }

/* ── بدنه: پنلِ کشویی روی همین ناحیه می‌آید، یعنی دقیقاً از زیرِ زبانه‌ها ── */
.dmtb-oc__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
.dmtb-oc__pane {
    display: none;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dmtb-oc__pane.is-active { display: block; }

.dmtb-oc__list { padding: 6px 14px 20px; }
.dmtb-oc__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 12px 2px;
    border: none;
    border-bottom: 1px solid #f2f3f8;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-align: start;
    text-decoration: none;
    color: var(--dmmega-text, #131327);
    cursor: pointer;
}
.dmtb-oc__list > *:last-child { border-bottom: none; }
.dmtb-oc__row:hover { color: var(--dmmega-primary, #ff6600); }
.dmtb-oc__row-label { flex: 1 1 auto; }
/* رو به چپ: نشانِ «یک لایهٔ دیگر هست». آیتمِ بدونِ زیرمنو اصلاً این آیکن را نمی‌گیرد. */
.dmtb-oc__row-caret {
    flex: 0 0 auto;
    transform: rotate(90deg);
    opacity: .45;
}

/* ── پنلِ کشویی سطح سوم ── */
.dmtb-oc__sub {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
}
.dmtb-oc__sub.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease;
}
.dmtb-oc__sub-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-bottom: 1px solid #f2f3f8;
}
.dmtb-oc__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    background: #f4f5fa;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #5b5e73;
    cursor: pointer;
}
.dmtb-oc__back:hover { color: var(--dmmega-primary, #ff6600); }
.dmtb-oc__back-caret { transform: rotate(-90deg); }
.dmtb-oc__sub-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dmmega-text, #131327);
}
.dmtb-oc__sub-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 14px 20px;
}

.dmtb-oc__group {
    padding: 6px 0;
    border-bottom: 1px solid #f5f6fa;
}
.dmtb-oc__sub-body > *:last-child { border-bottom: none; }
/* لینکِ سطحِ سومی که خودش زیرمجموعه ندارد: نه کلیدِ جمع‌شدن دارد نه ردیفِ تگ. */
.dmtb-oc__group--solo .dmtb-oc__group-link { font-weight: 600; }

/* =========================================================
   منوی موبایلِ اختصاصیِ قالب سوم (BigcartMobile.php) — آف‌کانواسِ صفحه‌به‌صفحه.
   ========================================================= */
/* JS این آف‌کانواس ویژگیِ hidden را جابه‌جا می‌کند و hidden امتیازِ ۰-۱-۰ دارد، یعنی هر کلاسی
   که display بدهد آن را می‌بازد؛ بدون این خط، کلیدِ بازگشت در صفحهٔ ریشه دیده می‌شود. */
[hidden] { display: none !important; }

/* همان دلیلِ بالا: بسته‌بودن با display است تا هیچ حالتِ نیمه‌نامرئیِ کلیک‌گیر باقی نماند. */
.dmbc-oc {
    position: fixed;
    inset: 0;
    z-index: 99999;
    direction: rtl;
    font-family: var(--dmmega-font, inherit);
    display: none;
}
.dmbc-oc.is-open {
    display: block;
    /* ⚠ visibility صریح لازم است، نه فقط display: اگر یکی از والدها visibility:hidden داشته
       باشد (مثلاً کلاسِ elementor-invisible انیمیشنِ ورودیِ المنتور که گاهی برداشته نمی‌شود)،
       display به ارث نمی‌رسد ولی visibility می‌رسد — و منو باز می‌شود بدون آن‌که دیده شود. */
    visibility: visible;
    animation: dmbc-fade-in .22s ease both;
}
@keyframes dmbc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dmbc-oc__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
}

.dmbc-oc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-bottom: 1px solid #e7e8f2;
}
.dmbc-oc__title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--dmmega-text, #131327);
    text-align: center;
}
.dmbc-oc__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    background: #f4f5fa;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #5b5e73;
    cursor: pointer;
}
.dmbc-oc__back:hover { color: var(--dmmega-primary, #ff6600); }
.dmbc-oc__back-caret { transform: rotate(-90deg); }
.dmbc-oc__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f5f5f7;
    color: #7a7d99;
    cursor: pointer;
}
.dmbc-oc__close:hover { background: #ececf1; color: #333; }

/* صفحه‌ها روی هم می‌نشینند و افقی جابه‌جا می‌شوند — سطحِ بعدی از سمتِ چپ می‌آید، همان
   جهتی که فلشِ روی کاشی نشان می‌دهد. */
.dmbc-oc__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* ⚠ نمایش با display کنترل می‌شود، نه visibility/transform: اگر جاوااسکریپت به هر دلیل اجرا
   نشود (فایل جا مانده، خطای اسکریپتِ دیگری در صفحه)، صفحهٔ ریشه باز هم دیده می‌شود و منو
   یک قوطیِ سفیدِ خالی نیست. جابه‌جاییِ افقی فقط لایهٔ انیمیشن است. */
.dmbc-oc__panel {
    position: absolute;
    inset: 0;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    background: #fff;
}
.dmbc-oc__panel.is-active {
    display: block;
    animation: dmbc-slide-in .28s ease both;
}
@keyframes dmbc-slide-in {
    from { transform: translateX(-16px); opacity: .4; }
    to   { transform: translateX(0); opacity: 1; }
}

.dmbc-oc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* ── صفحهٔ ریشه: باکس‌های نصف-عرضِ سطحِ اول ── */
.dmbc-oc__box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 14px 12px;
    border: 1px solid #e7e8f2;
    border-radius: 14px;
    background: #fafbff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
    text-decoration: none;
    color: var(--dmmega-text, #131327);
    cursor: pointer;
}
.dmbc-oc__box:hover {
    border-color: var(--dmmega-primary, #ff6600);
    color: var(--dmmega-primary, #ff6600);
}
.dmbc-oc__box-label { flex: 1 1 auto; }
.dmbc-oc__box-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}
.dmbc-oc__box-icon img,
.dmbc-oc__box-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dmbc-oc__box-caret {
    flex: 0 0 auto;
    transform: rotate(90deg);
    opacity: .45;
}

/* ── کاشی‌های مربعیِ سطحِ دوم/سوم: عنوان با اورلی روی مرکزِ عکس ── */
.dmbc-oc__cell {
    display: block;
    min-width: 0;
    border: none;
    padding: 0;
    background: none;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}
.dmbc-oc__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #eceef7;
    text-decoration: none;
}
.dmbc-oc__tile-media {
    position: absolute;
    inset: 0;
}
.dmbc-oc__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dmbc-oc__tile-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(6, 6, 28, .45);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.dmbc-oc__cell--group .dmbc-oc__tile {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

/* نوارِ توپُرِ زیرِ کاشی = کلیدِ جمع‌کردنِ سطحِ چهارم به بعد. */
.dmbc-oc__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 26px;
    border: none;
    border-end-start-radius: 10px;
    border-end-end-radius: 10px;
    background: #eceef7;
    color: #5b5e73;
    cursor: pointer;
}
.dmbc-oc__bar:hover { background: #e3e5ef; }
.dmbc-oc__bar-caret { transition: transform .2s ease; }
/* باز = رو به پایین (پیش‌فرض)، جمع‌شده = رو به بالا. */
.dmbc-oc__cell--group:not(.is-open) .dmbc-oc__bar-caret { transform: rotate(180deg); }

.dmbc-oc__sublist {
    display: none;
    flex-direction: column;
    padding: 4px 2px 0;
}
.dmbc-oc__cell--group.is-open > .dmbc-oc__sublist { display: flex; }
.dmbc-oc__sublink {
    display: block;
    min-height: 34px;
    padding: 7px 2px;
    border-bottom: 1px solid #f2f3f8;
    font-size: 12.5px;
    line-height: 1.6;
    text-decoration: none;
    color: #5b5e73;
}
.dmbc-oc__sublist > *:last-child { border-bottom: none; }
.dmbc-oc__sublink:hover { color: var(--dmmega-primary, #ff6600); }
.dmtb-oc__group-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dmtb-oc__group-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    color: var(--dmmega-text, #131327);
}
.dmtb-oc__group-link:hover { color: var(--dmmega-primary, #ff6600); }
.dmtb-oc__group-toggle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: #f4f5fa;
    color: #7a7d99;
    cursor: pointer;
}
.dmtb-oc__group-caret {
    transform: rotate(90deg);
    transition: transform .2s ease;
}
.dmtb-oc__group.is-open > .dmtb-oc__group-head .dmtb-oc__group-caret { transform: rotate(0deg); }

/* سطح چهارم به بعد: تگ‌های چیده‌شده زیرِ لینکِ سطحِ سوم. */
.dmtb-oc__tags {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.dmtb-oc__group.is-open > .dmtb-oc__tags { display: flex; }
.dmtb-oc__tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid #e7e8f2;
    border-radius: 999px;
    background: #fafbff;
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: none;
    color: #5b5e73;
}
.dmtb-oc__tag:hover {
    border-color: var(--dmmega-primary, #ff6600);
    color: var(--dmmega-primary, #ff6600);
}