/* ─────────────────────────────────────────────────────────────────────────────
   Voziqa — Khaadi-style mobile bottom navigation
   Injected sitewide by js/mobile-nav.js. Visible only on mobile (≤ 899px).
   ──────────────────────────────────────────────────────────────────────────── */

.vz-mobile-nav {
    display: none;
}

@media (max-width: 899px) {
    .vz-mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-sticky, 800);
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 16px rgba(26, 10, 46, 0.08);
    }

    .vz-mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-muted);
        text-decoration: none;
        position: relative;
        transition: color var(--duration-fast);
    }

    .vz-mobile-nav__item:hover,
    .vz-mobile-nav__item.is-active {
        color: var(--color-plum);
    }

    .vz-mobile-nav__item svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.6;
    }

    /* "Bag" with badge counter */
    .vz-mobile-nav__bag-wrap {
        position: relative;
        display: inline-flex;
    }

    .vz-mobile-nav__bag-count {
        position: absolute;
        top: -6px;
        right: -8px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--color-sale);
        color: var(--color-white);
        font-size: 10px;
        font-weight: var(--fw-bold);
        line-height: 18px;
        text-align: center;
        letter-spacing: 0;
    }

    .vz-mobile-nav__bag-count[data-count="0"] {
        display: none;
    }

    .vz-mobile-nav__label {
        font-weight: var(--fw-medium);
    }

    /* Active dot underneath the icon */
    .vz-mobile-nav__item.is-active::after {
        content: "";
        position: absolute;
        top: 2px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-plum);
    }
}