/* =========================================================
   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;
}
.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;
}

/* آیتم مگامنو (لینک سطح‌اول، همان مارک‌آپ .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: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    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);
}
.dmmega-bar-modal-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    padding: 20px 16px 26px;
    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);
}

/* ── موقعیت مودال (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); }
.dmmega-bar-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #f5f5f7;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
}
.dmmega-bar-modal-close:hover { background: #ececf1; color: #333; }

.dmmega-bar-modal-list {
    margin-top: 30px;
}
.dmmega-bar-modal-list > li {
    border-bottom: 1px solid #f0f0f2;
}
.dmmega-bar-modal-list > li:last-child { border-bottom: none; }
.dmmega-bar-modal-list > li > a,
.dmmega-bar-modal-list .dmmega-plain-dropdown > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dmmega-text);
}
/* Round 20 — قبلاً هیچ اندازه‌ی پایه‌ای نداشت (فقط برای نوار دسکتاپ تعریف شده بود)؛ آیکن سطح‌اول
   بدون این، ناهماهنگ/بزرگ رندر می‌شد. کنترل‌های اندازه/فاصله/رنگ در MobileMenuButtonWidget. */
.dmmega-bar-modal-list > li > a .dmmega-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.dmmega-bar-modal-list > li > a .dmmega-icon img,
.dmmega-bar-modal-list > li > a .dmmega-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* آکاردئون: تا وقتی .is-open نخورده، پنل مگا/پلین داخل مودال بسته است — فقط سطح۰ (آیتم نوار)
   ↔ پنل آکاردئون می‌شود؛ پنل خودش (.dm-megamenu-img-side) دیگر آکاردئونِ داخلی خودش را با
   قوانین جداگانه‌ی پایین (بخش Round 12) مدیریت می‌کند. */
.dmmega-bar-modal-list > li > .dm-megamenu-img-side,
.dmmega-bar-modal-list .dmmega-plain-dropdown {
    display: none;
    position: static;
    width: auto;
    max-width: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #fafafa;
    padding: 6px 10px 10px 34px;
    flex-direction: column;
}
.dmmega-bar-modal-list > li.is-open > .dm-megamenu-img-side,
.dmmega-bar-modal-list > li.is-open > .dmmega-plain-dropdown,
.dmmega-bar-modal-list li.is-open > .dmmega-plain-dropdown--sub {
    display: flex;
}
.dmmega-bar-modal-list .has-dmmega-plain-child > a .dmmega-plain-caret {
    transform: rotate(var(--dmmega-caret-rotate, 0deg));
    transition: transform .2s;
}
.dmmega-bar-modal-list > li.is-open > a .dmmega-plain-caret {
    transform: rotate(calc(var(--dmmega-caret-rotate, 0deg) + 180deg));
}

/* =========================================================
   Round 12 — مودال موبایل نوار برای قالب انحصاری «dm-megamenu-img-side» — یک سطح آکاردئون
   (سایدبار→محتوا) طبق همان مکانیزم .is-open موجود؛ پرومو روی موبایل عمداً مخفی می‌ماند
   (ریسپانسیو کامل هنوز طراحی نشده، طبق تأیید کاربر کار جداگانه‌ی بعدی است).
   ========================================================= */
.dmmega-bar-modal-list .dm-megamenu-img-side {
    background: none;
    box-shadow: none;
    width: auto;
    max-width: none;
    min-height: 0;
    max-height: none;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__wrapper {
    display: block;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__sidebar {
    width: auto;
    padding: 0;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__sidebar-link {
    padding: 12px 6px;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__sidebar-link--active {
    border-right: none;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__promo {
    display: none !important;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__content {
    display: none;
    position: static;
    inset: auto;
    overflow: visible;
    padding: 6px 10px 10px 34px;
}
.dmmega-bar-modal-list .dm-megamenu-img-side__sidebar-item.is-open > .dm-megamenu-img-side__content {
    display: block;
}