/* =========================================
   MOBILE BOTTOM NAVIGATION (phones & tablets)
   Replaces the header icons below 992px.
========================================= */

.bottom-nav {
    display: none;
}

@media (max-width: 991px) {

    /* Header: just the logo, centred (navigation lives in the bottom bar) */
    .navbar-custom .header-right {
        display: none !important;
    }

    .navbar-custom .nav-container {
        justify-content: center;
    }

    .navbar-custom .navbar-brand {
        margin: 0 auto;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 0 6px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #eeeeee;
        box-shadow: 0 -8px 30px rgba(17, 17, 17, .08);
        backdrop-filter: blur(12px);
    }

    /* Room for the bar so page content and the footer aren't hidden */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .bn-item {
        position: relative;
        height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: none;
        color: #8a8a8a;
        font-family: "Poppins", sans-serif;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .2px;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease;
    }

    .bn-item > i {
        font-size: 19px;
        transition: transform .2s ease;
    }

    .bn-item:active > i {
        transform: scale(.88);
    }

    .bn-item.active {
        color: #db5c07;
    }

    /* small indicator bar above the active tab */
    .bn-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 26px;
        height: 3px;
        background: #db5c07;
        border-radius: 0 0 3px 3px;
        transform: translateX(-50%);
    }

    /* Raised cart button in the middle */
    .bn-cart {
        justify-content: flex-end;
        padding-bottom: 9px;
    }

    .bn-cart::before {
        display: none;
    }

    .bn-cart-circle {
        position: absolute;
        top: -22px;
        left: 50%;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid #ffffff;
        border-radius: 50%;
        background: #db5c07;
        color: #ffffff;
        font-size: 19px;
        box-shadow: 0 8px 20px rgba(219, 92, 7, .4);
        transform: translateX(-50%);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .bn-cart:active .bn-cart-circle {
        transform: translateX(-50%) scale(.94);
    }

    .bn-cart.active .bn-cart-circle {
        background: #111111;
        box-shadow: 0 8px 20px rgba(17, 17, 17, .35);
    }

    .bn-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 21px;
        height: 21px;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        border-radius: 11px;
        background: #111111;
        color: #ffffff;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
    }

    .bn-cart.active .bn-badge {
        background: #db5c07;
    }

    .bn-badge[hidden] {
        display: none;
    }

    .bn-badge.bump {
        animation: bnBump .45s ease;
    }

    @keyframes bnBump {
        30% { transform: scale(1.35); }
        60% { transform: scale(.9); }
    }

    /* Signed-in customers see their initials */
    .bn-avatar {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #8a8a8a;
        color: #ffffff;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .3px;
        transition: background .2s ease;
    }

    .bn-item.active .bn-avatar {
        background: #db5c07;
    }

    /* Lift floating elements above the bar */
    .back-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #shopToasts {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Hide the bar while printing */
@media print {
    .bottom-nav {
        display: none !important;
    }
}