/* ============================================================
   Navbar Base Styles
   ============================================================ */
.navbar {
    margin: 1.5rem 0 1rem 0.5rem;
  
}

@media (min-width: 460px) {
    .navbar {
        margin-top: 2rem;
        
    }
}

.navbar-brand {
    margin-left: 10px;
}

    .navbar-brand img {
        max-width: 150px;
    }

    @media(min-width: 365px) {
        .navbar-brand img {
            max-width: 200px;
        }
    }

.nav-link {
    font-size: 13px;
    font-weight: var(--font-weight-bolder);
    color: var(--color-dark-charcoal);
}



/* ============================================================
   Navbar Toggler & Burger Animation
   ============================================================ */
.navbar-toggler {
    border: none;
}

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: 0 0 0 0;
    }

.navbar-toggler-burger {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    transition: all 0.3s;
}

@media (min-width: 992px) {
    .navbar-toggler-burger {
       
        width: 28px;
       
    }
}

    .navbar-toggler-burger .bar {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: var(--color-dark-charcoal, #222);
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transition: all 0.3s;
    }

        .navbar-toggler-burger .bar:nth-child(1) {
            top: 0;
        }

        .navbar-toggler-burger .bar:nth-child(2) {
            top: 9px;
        }

        .navbar-toggler-burger .bar:nth-child(3) {
            top: 18px;
        }

/* Animate to X */
.navbar-toggler.active .bar:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}

.navbar-toggler.active .bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .bar:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
}

/* ============================================================
   Cart Modal & Button
   ============================================================ */
.cart-modal-right {
    position: fixed;
    top: 3rem;
    right: 1.5rem;
    margin: 0;
    width: 400px;
    max-width: 90vw;
    height: auto;
    pointer-events: none;
    z-index: 1055;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

    .cart-modal-right .modal-content {
        border-radius: 0.5rem;
        pointer-events: auto;
    }

.modal.show .cart-modal-right {
    transform: translateX(0);
    pointer-events: auto;
}

#cart .cart-info {
    border-bottom: 1px solid var(--color-primary-light);
    padding: 10px 0 10px 0;
    margin-bottom: 10px;
}

.btn-cart-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .btn-cart-sm .fa-shopping-cart {
        font-size: 0.8rem;
    }

    .btn-cart-sm .badge {
        font-size: 0.6rem;
        min-width: 14px;
        min-height: 14px;
        padding: 2px 4px;
        background-color: var(--color-whitesmoke) !important;
        color: var(--color-dark-charcoal) !important;
    }

    @media (min-width: 600px) {
        .btn-cart-sm {
            width: 32px;
            height: 32px;
           
        }

            .btn-cart-sm .fa-shopping-cart {
                font-size: 1rem;
            }

            .btn-cart-sm .badge {
                font-size: 0.7rem;
                min-width: 16px;
                min-height: 16px;
               
            }
    }

/* ============================================================
   Underline Hover Effect
   ============================================================ */
.underline-hover .nav-item:not(.dropdown) > a {
    position: relative;
}

    .underline-hover .nav-item:not(.dropdown) > a:after {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        margin: auto;
        width: 0%;
        content: '.';
        color: transparent;
        background: #aaa;
        height: 1px;
        transition: all .5s;
    }

    .underline-hover .nav-item:not(.dropdown) > a:hover:after {
        width: 100%;
    }

/* ============================================================
   Responsive Media Queries
   ============================================================ */

/* Mobile - Remove underline-hover effect and use background color for nav-link hover */
@media (max-width: 991.98px) {
    .underline-hover .nav-item:not(.dropdown) > a:after {
        display: none !important;
    }

    .navbar-collapse.show .nav-link,
    .navbar-collapse.collapsing .nav-link {
        transition: background 0.2s;
    }

        .navbar-collapse.show .nav-link:hover,
        .navbar-collapse.collapsing .nav-link:hover {
            background: var(--color-primary-light, #e6f4f1); /* fallback color if CSS var not set */
            color: var(--color-dark-charcoal, #222);
            border-radius: 0.25rem;
        }
}



/* Custom breakpoint for navbar branding and font size */
@media (min-width: 1240px) {
    .navbar-brand img {
        max-width: 280px;
    }

    .nav-link {
        font-size: 14px;
    }
}

/* Custom breakpoint for navbar item spacing */
@media (min-width: 1300px) {
    #mainNavbar ul:first-child .nav-item {
        margin: 0 10px 0 10px;
    }
}


.dropdown-menu {
    font-size: 14px;
}