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

@media (max-width: 768px) {
    .dm-mobile-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 90;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -4px 18px rgba(0,0,0,.07);
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        direction: rtl;
    }
    .dm-mnav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #777;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 2px;
        transition: color .2s;
        /* ریست برای حالت button */
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }
    .dm-mnav-item:hover,
    .dm-mnav-item:active { color: var(--dm-primary, #B43F3F); }

    .dm-mnav-icon {
        position: relative;
        width: 24px; height: 24px;
        display: flex; align-items: center; justify-content: center;
    }
    .dm-mnav-icon svg { width: 24px; height: 24px; }
    .dm-mnav-icon img { width: 22px; height: 22px; object-fit: contain; }

    .dm-mnav-badge {
        position: absolute;
        top: -6px !important; left: -8px !important;
        min-width: 7px !important; height: 15px !important;
        padding: 0 4px !important;
        border-radius: 9px !important;
        background: var(--dm-primary, #B43F3F) !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-align: center !important;
    }

    .dm-mnav-label { line-height: 1; }

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

    /* وقتی منو یا کشوی سبد خرید باز است، ناوبری موبایل کاملاً مخفی شود
       تا روی مودال نیفتد و دکمه‌های آن قابل استفاده باشند */
    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 {
        display: none !important;
    }
}

/* fallback برای مرورگرهایی که :has را پشتیبانی نمی‌کنند —
   وقتی اسکرول بدنه قفل است (منو/سبد باز)، ناوبری مخفی شود */
@media (max-width: 768px) {
    body[style*="overflow: hidden"] .dm-mobile-nav { display: none; }
}