/* ==========================================================
   bottom-nav.css
   نوار ناوبری پایین صفحه، مخصوص موبایل (خانه/دسته‌بندی/سبد خرید/
   علاقه‌مندی‌ها/حساب کاربری). رو دسکتاپ اصلا نمایش داده نمی‌شه چون
   منوی بالای صفحه از قبل همون مسیرها رو پوشش می‌ده.
   این فایل باید تو همه صفحات مشتری (نه پنل ادمین) لینک بشه.
   ========================================================== */

.bottom-nav {
    display: none;
}

@media (max-width: 768px) {

    /* جا برای نوار پایین باز می‌کنیم که آخرین محتوای صفحه زیرش قایم نشه */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -6px 24px -8px rgba(20, 40, 25, .14);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }

    .bottom-nav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 48px;
        padding: 4px 2px;
        border-radius: var(--radius-sm);
        color: var(--c-text-soft);
        text-decoration: none;
        position: relative;
        transition: color .18s var(--ease), background-color .18s var(--ease);
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item i {
        font-size: 20px;
        line-height: 1;
    }

    .bottom-nav-item span:not(.bottom-nav-badge) {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    .bottom-nav-item:active {
        background: var(--c-primary-light);
    }

    .bottom-nav-item.active {
        color: var(--c-primary);
    }

    .bottom-nav-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        width: 22px;
        height: 3px;
        border-radius: var(--radius-pill);
        background: var(--c-primary);
    }

    /* بج شمارنده (سبد خرید / علاقه‌مندی‌ها) - از همون data-cart-badge و
       data-fav-badge استفاده می‌کنه که cart.js و favorites.js از قبل
       آپدیت می‌کنن، پس نیازی به کد جدید جاوااسکریپت نیست */
    .bottom-nav-item .bottom-nav-badge {
        position: absolute;
        top: 2px;
        left: calc(50% - 20px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: var(--radius-pill);
        background: var(--c-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* حالت تاریک: dark-mode.css متغیرهای --c-* رو دوباره تعریف نمی‌کنه،
   بلکه مستقیم رنگ می‌ذاره روی سلکتورها؛ این‌جا هم همون الگو رو
   دنبال می‌کنیم تا با هدر/منو هماهنگ بمونه */
body.dark-mode .bottom-nav {
    background: #16351f !important;
    border-top-color: #24422c !important;
}

body.dark-mode .bottom-nav-item {
    color: #9ca3af !important;
}

body.dark-mode .bottom-nav-item.active {
    color: #9fd4a6 !important;
}

body.dark-mode .bottom-nav-item.active::before {
    background: #9fd4a6 !important;
}

body.dark-mode .bottom-nav-item:active {
    background: #24322a !important;
}