/* ============================================================
   Narmpa — Mobile Bottom Navigation
   ============================================================ */
.dm-mobile-nav { display: none; }

/* ⚠ ۹۹۱.۹۸ عمدی است: هدر در همین نقطه بین نسخهٔ دسکتاپ و موبایل سوئیچ می‌کند
   (media min-width:992px در header.css). اگر این عدد ۷۶۸ بماند، در بازهٔ تبلت
   هدرِ موبایل رندر می‌شود ولی نوارِ پایین نه — یعنی منو/حساب/سبد در آن عرض‌ها
   اصلاً در دسترس نیست. */
@media (max-width: 991.98px) {
    .dm-mobile-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        /*
         * ⚠ پیش‌تر ۹۰ بود و این باگِ گزارش‌شده را می‌ساخت: فلش‌های کاروسلِ
         * «شگفت‌انگیز» (افزونه، z-index ۹۹۹، در بافتِ ریشه) روی همین نوار
         * می‌نشستند و دکمه‌هایش زیرشان گم می‌شدند. سنجیده شد.
         */
        z-index: var(--dm-z-mobile-nav, 1100);
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        background: var(--dm-paper, #fff);
        border-top: 1px solid var(--dm-line, #f0f0f0);
        box-shadow: 0 -6px 24px rgba(20, 20, 40, .06);
        padding: 8px 6px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        direction: rtl;
    }

    .dm-mnav-item {
        position: relative; /* مبنای قرارگیریِ خطِ جداکننده */
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: var(--dm-ink-3, #9a9ca6);
        padding: 4px 2px;
        transition: color .2s;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

    /*
     * خطِ جداکنندهٔ عمودی بین آیتم‌ها — روی هر آیتم به‌جز اولی (سمتِ راست، چون
     * نوار RTL است)، در نیمهٔ ارتفاعِ خودِ آیتم مرکز شده، نه کلِ نوار.
     * pseudo-element به‌جای المانِ جداگانه در PHP: تعدادِ آیتم‌ها تنظیم‌پذیر است
     * (تنظیمات قالب)، پس شمارشِ «بینِ هرکدام» باید خودکار با CSS باشد.
     */
    .dm-mnav-item:not(:first-child)::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        transform: translate(50%, -50%);
        width: 1px;
        height: 22px;
        background: var(--dm-line, #eef0f4);
    }

    .dm-mnav-item:active { color: var(--dm-primary, #B43F3F); }
    .dm-mnav-item.is-active { color: var(--dm-primary, #B43F3F); }

    /* آیکون داخلِ یک باکسِ مینیمالِ گردگوشه — نه یک خطِ برهنه روی پس‌زمینهٔ سفید */
    .dm-mnav-icon {
        position: relative;
        width: 34px; height: 34px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 11px;
        background: var(--dm-paper-2, #f5f6f9);
        color: var(--dm-ink-2, #6b6f7d);
        transition: background-color .2s, color .2s, transform .15s;
    }
    .dm-mnav-icon svg { width: 19px; height: 19px; }
    .dm-mnav-icon img { width: 18px; height: 18px; object-fit: contain; }

    .dm-mnav-item:active .dm-mnav-icon { transform: scale(.92); }

    .dm-mnav-item.is-active .dm-mnav-icon,
    .dm-mnav-item:active .dm-mnav-icon {
        background: var(--dm-primary-10, rgba(180, 63, 63, .1));
        color: var(--dm-primary, #B43F3F);
    }

    .dm-mnav-badge {
        position: absolute;
        top: -4px; left: -6px;
        min-width: 16px; height: 16px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--dm-primary, #B43F3F);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        /* ⚠ حلقهٔ دورِ نشان باید هم‌رنگِ خودِ نوار باشد، نه سفیدِ ثابت؛ وگرنه در
           حالت شب یک حلقهٔ سفیدِ روشن دورِ عدد می‌ماند. */
        border: 1.5px solid var(--dm-paper, #fff);
    }

    /* ⚠ ریزتر و کم‌رنگ‌تر — نسخهٔ قبلی ۱۱px با وزنِ ۶۰۰ و رنگِ تقریباً هم‌وزنِ آیکون
       بود؛ برچسبِ زیرِ آیکون باید ثانویه بماند، نه هم‌رتبه با خودِ آیکون. */
    .dm-mnav-label {
        line-height: 1;
        font-size: 10px;
        font-weight: 500;
        color: var(--dm-ink-3, #a8aab3);
        letter-spacing: -.1px;
    }
    .dm-mnav-item.is-active .dm-mnav-label,
    .dm-mnav-item:active .dm-mnav-label {
        color: var(--dm-primary, #B43F3F);
    }

    /* فضای پایین تا محتوا زیر ناوبری نرود */
    body:has(.dm-mobile-nav) { padding-bottom: 66px; }

    /* وقتی منو یا کشوی سبد خرید باز است، ناوبری موبایل کاملاً مخفی شود
       تا روی مودال نیفتد و دکمه‌های آن قابل استفاده باشند */
    body:has(.mobile-offcanvas.is-open) .dm-mobile-nav,
    body:has(.dm-mini-cart-overlay.is-open) .dm-mobile-nav,
    body:has(.dm-mini-cart-panel.is-open) .dm-mobile-nav,
    body:has(.dmmega-bar-modal.is-open) .dm-mobile-nav,
    body:has(.dm-scm-drawer.open) .dm-mobile-nav {
        display: none !important;
    }
}

/* fallback برای مرورگرهایی که :has را پشتیبانی نمی‌کنند —
   وقتی اسکرول بدنه قفل است (منو/سبد باز)، ناوبری مخفی شود */
/* ⚠ ۹۹۱.۹۸ عمدی است: هدر در همین نقطه بین نسخهٔ دسکتاپ و موبایل سوئیچ می‌کند
   (media min-width:992px در header.css). اگر این عدد ۷۶۸ بماند، در بازهٔ تبلت
   هدرِ موبایل رندر می‌شود ولی نوارِ پایین نه — یعنی منو/حساب/سبد در آن عرض‌ها
   اصلاً در دسترس نیست. */
@media (max-width: 991.98px) {
    body[style*="overflow: hidden"] .dm-mobile-nav { display: none; }
}