/* =========================================================
   LUMINAPICK MOBILE NAVIGATION
   CLEAN FINAL VERSION
   ========================================================= */

.mobile-nav {
    display: none;
}

@media (max-width: 767px) {

    .mobile-nav {
        position: fixed !important;

        left: 50% !important;
        bottom: 12px !important;

        transform: translateX(-50%) !important;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        width: calc(100% - 32px) !important;
        max-width: 370px !important;
        height: 72px !important;

        padding: 6px !important;
        margin: 0 !important;

        gap: 4px !important;

        overflow: visible !important;

        background: rgba(255,255,255,.97) !important;

        border: 1px solid #eadfe3 !important;
        border-radius: 25px !important;

        box-shadow:
            0 14px 35px rgba(61,45,51,.13),
            0 4px 10px rgba(61,45,51,.06) !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-nav *,
    .mobile-nav *::before,
    .mobile-nav *::after {
        box-sizing: border-box !important;
    }

    /* ITEM */

    .mobile-nav .nav-item {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 58px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 3px !important;

        gap: 2px !important;

        border-radius: 17px !important;

        background: transparent !important;

        color: #777174 !important;

        text-decoration: none !important;

        font-family: inherit !important;

        overflow: visible !important;

        transition:
            background .2s ease,
            transform .15s ease,
            color .2s ease !important;
    }

    /* ICON */

    .mobile-nav .nav-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;

        border-radius: 11px !important;

        background: #f7f3f4 !important;

        color: #777174 !important;

        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease !important;
    }

    .mobile-nav .nav-icon svg {
        display: block !important;

        width: 20px !important;
        height: 20px !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.9 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* LABEL */

    .mobile-nav .nav-label {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit !important;

        font-size: 10px !important;
        font-weight: 750 !important;
        line-height: 12px !important;

        white-space: nowrap !important;
    }

    /* =====================================================
       NORMAL COLORS
       ===================================================== */

    /* HOME */

    .mobile-nav .home-tab {
        color: #d45f80 !important;
    }

    .mobile-nav .home-tab .nav-icon {
        color: #df6687 !important;
        background: #fff0f4 !important;
    }

    /* PRODUK */

    .mobile-nav .product-tab {
        color: #299786 !important;
    }

    .mobile-nav .product-tab .nav-icon {
        color: #32a796 !important;
        background: #e5f8f4 !important;
    }

    /* KERANJANG */

    .mobile-nav .cart-tab {
        color: #d8822b !important;
    }

    .mobile-nav .cart-tab .nav-icon {
        color: #e69438 !important;
        background: #fff1df !important;
    }

    /* ORDER */

    .mobile-nav .order-tab {
        color: #8058b5 !important;
    }

    .mobile-nav .order-tab .nav-icon {
        color: #9168c7 !important;
        background: #f0eaff !important;
    }

    /* =====================================================
       ACTIVE STATES
       ===================================================== */

    .mobile-nav .home-tab.active {
        background: linear-gradient(
            145deg,
            #ffe5ed,
            #ffd5e1
        ) !important;

        color: #c65376 !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 4px 12px rgba(211,92,126,.12) !important;
    }

    .mobile-nav .home-tab.active .nav-icon {
        color: #fff !important;

        background: linear-gradient(
            145deg,
            #ee7fa0,
            #d75c81
        ) !important;

        box-shadow:
            0 5px 12px rgba(215,92,129,.25) !important;
    }

    .mobile-nav .product-tab.active {
        background: linear-gradient(
            145deg,
            #e0faf5,
            #d1f2eb
        ) !important;

        color: #268e7e !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 4px 12px rgba(48,166,146,.12) !important;
    }

    .mobile-nav .product-tab.active .nav-icon {
        color: #fff !important;

        background: linear-gradient(
            145deg,
            #51c2af,
            #309f8e
        ) !important;

        box-shadow:
            0 5px 12px rgba(48,159,142,.25) !important;
    }

    .mobile-nav .cart-tab.active {
        background: linear-gradient(
            145deg,
            #fff1dc,
            #ffe2c1
        ) !important;

        color: #d2761f !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 4px 12px rgba(229,139,45,.12) !important;
    }

    .mobile-nav .cart-tab.active .nav-icon {
        color: #fff !important;

        background: linear-gradient(
            145deg,
            #f5b15d,
            #e58b2d
        ) !important;

        box-shadow:
            0 5px 12px rgba(229,139,45,.25) !important;
    }

    .mobile-nav .order-tab.active {
        background: linear-gradient(
            145deg,
            #f0e9ff,
            #e3d7ff
        ) !important;

        color: #7651ad !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 4px 12px rgba(139,100,198,.12) !important;
    }

    .mobile-nav .order-tab.active .nav-icon {
        color: #fff !important;

        background: linear-gradient(
            145deg,
            #aa83df,
            #875fc3
        ) !important;

        box-shadow:
            0 5px 12px rgba(135,95,195,.25) !important;
    }

    /* TOUCH */

    .mobile-nav .nav-item:active {
        transform: scale(.94) !important;
    }

    /* CART BADGE */

    .mobile-nav .nav-badge {
        position: absolute !important;

        top: 2px !important;
        right: 7px !important;

        display: none;

        align-items: center !important;
        justify-content: center !important;

        min-width: 17px !important;
        height: 17px !important;

        padding: 0 4px !important;

        border-radius: 999px !important;

        background: #ed6688 !important;
        color: #fff !important;

        border: 2px solid #fff !important;

        font-size: 8px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        box-shadow: 0 3px 8px rgba(220,90,120,.25) !important;
    }

    body {
        padding-bottom: 96px !important;
    }
}