/* =========================================
   HEAVEN TOUCH - PREMIUM MOBILE BOTTOM NAV
========================================= */

:root {
    --mbn-orange: #f58220;
    --mbn-orange-dark: #d9680f;
    --mbn-black: #0d0d0d;
    --mbn-black-soft: #1b1b1b;
    --mbn-white: #ffffff;
    --mbn-muted: #8a8a8a;
    --mbn-border: rgba(0, 0, 0, 0.08);
    --mbn-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
    --mbn-home-shadow: 0 10px 28px rgba(245, 130, 32, 0.35);
}


/* =========================================
   NAV WRAPPER
========================================= */

.mbn-nav {
    display: none;
}


/* =========================================
   MOBILE ONLY
========================================= */

@media (max-width: 768px) {

    .mbn-nav {
        display: block;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 99999;

        background: rgba(255, 255, 255, 0.97);
        border: 1px solid var(--mbn-border);
        border-radius: 24px;

        box-shadow: var(--mbn-shadow);

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


    /* =========================================
       LIST
    ========================================= */

    .mbn-list {
        position: relative;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;

        margin: 0;
        padding: 8px 6px 7px;

        list-style: none;
    }


    /* =========================================
       ITEM
    ========================================= */

    .mbn-item {
        position: relative;
        min-width: 0;
        text-align: center;
    }


    /* =========================================
       LINK
    ========================================= */

    .mbn-link {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        min-height: 52px;

        color: var(--mbn-black);
        text-decoration: none;

        -webkit-tap-highlight-color: transparent;

        transition:
            color 0.25s ease,
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .mbn-link:hover,
    .mbn-link:focus,
    .mbn-link:active {
        color: var(--mbn-orange);
        text-decoration: none;
    }

    .mbn-link:active {
        transform: scale(0.94);
    }


    /* =========================================
       NORMAL ICON
    ========================================= */

    .mbn-icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 27px;

        font-size: 19px;
        line-height: 1;

        color: var(--mbn-black);

        transition:
            color 0.25s ease,
            transform 0.25s ease;
    }

    .mbn-link:hover .mbn-icon,
    .mbn-link:focus .mbn-icon {
        color: var(--mbn-orange);
        transform: translateY(-1px);
    }


    /* =========================================
       LABEL
    ========================================= */

    .mbn-label {
        display: block;

        max-width: 100%;

        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;

        color: var(--mbn-muted);

        white-space: nowrap;

        transition: color 0.25s ease;
    }

    .mbn-link:hover .mbn-label,
    .mbn-link:focus .mbn-label {
        color: var(--mbn-black);
    }


    /* =========================================
       ACTIVE PAGE
    ========================================= */

    .mbn-link.is-active {
        color: var(--mbn-orange);
    }

    .mbn-link.is-active .mbn-icon {
        color: var(--mbn-orange);
    }

    .mbn-link.is-active .mbn-label {
        color: var(--mbn-orange);
        font-weight: 700;
    }

    .mbn-link.is-active:not(.mbn-home-link)::after {
        content: "";

        position: absolute;
        top: -8px;
        left: 50%;

        width: 22px;
        height: 3px;

        border-radius: 50px;

        background: var(--mbn-orange);

        transform: translateX(-50%);
    }


    /* =========================================
       CENTER HOME ITEM
    ========================================= */

    .mbn-home-item {
        position: relative;
    }

    .mbn-home-link {
        position: relative;
        z-index: 2;

        min-height: 52px;

        transform: translateY(-17px);
    }

    .mbn-home-link:active {
        transform: translateY(-17px) scale(0.95);
    }


    /* =========================================
       PREMIUM ORANGE HOME BUTTON
    ========================================= */

    .mbn-home-icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 58px;
        height: 58px;

        border: 5px solid var(--mbn-white);
        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                var(--mbn-orange),
                var(--mbn-orange-dark)
            );

        color: var(--mbn-white);

        font-size: 20px;

        box-shadow:
            var(--mbn-home-shadow),
            inset 0 1px 1px rgba(255, 255, 255, 0.35);

        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .mbn-home-icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;

        pointer-events: none;
    }

    .mbn-home-link:hover .mbn-home-icon,
    .mbn-home-link:focus .mbn-home-icon {
        transform: translateY(-2px);

        box-shadow:
            0 13px 32px rgba(245, 130, 32, 0.42),
            inset 0 1px 1px rgba(255, 255, 255, 0.38);
    }


    /* HOME LABEL */

    .mbn-home-link .mbn-label {
        margin-top: 1px;

        color: var(--mbn-black);

        font-weight: 700;
    }

    .mbn-home-link.is-active .mbn-label {
        color: var(--mbn-orange);
    }


    /* =========================================
       CART
    ========================================= */

    .mbn-cart-icon {
        overflow: visible;
    }

    .mbn-cart-count {
        position: absolute;
        top: -6px;
        right: -4px;

        display: flex;
        align-items: center;
        justify-content: center;

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

        padding: 0 4px;

        border: 2px solid var(--mbn-white);
        border-radius: 20px;

        background: var(--mbn-orange);

        color: var(--mbn-white);

        font-size: 9px;
        font-weight: 800;
        line-height: 1;

        box-shadow: 0 3px 8px rgba(245, 130, 32, 0.28);
    }


    /* =========================================
       WHATSAPP - KEEP THEME CONSISTENT
    ========================================= */

    .mbn-item:nth-child(2) .mbn-icon {
        color: var(--mbn-black);
    }

    .mbn-item:nth-child(2) .mbn-link:hover .mbn-icon {
        color: var(--mbn-orange);
    }


    /* =========================================
       SAFE AREA FOR IPHONE
    ========================================= */

    @supports (padding-bottom: env(safe-area-inset-bottom)) {

        .mbn-nav {
            bottom: calc(8px + env(safe-area-inset-bottom));
        }
    }


    /* =========================================
       BODY BOTTOM SPACE
       Navbar যেন content cover না করে
    ========================================= */

    body {
        padding-bottom: 88px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .mbn-nav {
        left: 6px;
        right: 6px;
        bottom: 6px;

        border-radius: 21px;
    }

    .mbn-list {
        padding-left: 3px;
        padding-right: 3px;
    }

    .mbn-icon {
        font-size: 17px;
    }

    .mbn-label {
        font-size: 9px;
    }

    .mbn-home-icon {
        width: 54px;
        height: 54px;

        font-size: 19px;
    }
}

@media (max-width: 768px) {
    .mbn-list {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .mbn-link {
        min-height: 44px;
        gap: 2px;
    }

    .mbn-icon {
        height: 23px;
    }

    .mbn-home-link {
        min-height: 44px;
    }
}