/* Front page custom styles */
body {
    background: #f8f9fa
}

.product-list .d-flex {
    transition: box-shadow .15s;

}

.product-list .d-flex:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06)
}

#cart-sidebar {
    position: sticky;
    top: 20px
}

.product-name {
    font-size: 0.95rem
}

.category-item.active {
    background: #f1f5fb;
    font-weight: 600
}

@media (max-width:767px) {
    #cart-sidebar {
        position: static;
        margin-top: 1rem
    }
}

/* Styling the active category item */
.list-group-item.category-item.active {
    background-color: #0d6efd;
    /* Bootstrap primary blue, change to your brand color */
    border-color: #0d6efd;
    /* Matches the background border */
    color: #ffffff;
    /* Ensures text is easily readable */
    font-weight: 600;
    /* Makes the active item stand out a bit more */
}

/* Optional: Smooth transition when switching active states */
.category-item {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Multi-line truncation for category titles (max 2 lines) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Circular Category Image Container */
.category-img-box {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    border: 1px solid #dee2e6 !important;
    background-color: #ffffff !important;
    padding: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}



/* Category text labels styling */
.category-link span {
    color: #5a6b82 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, font-weight 0.2s ease;
    margin-top: 4px;
}

.category-link:hover span,
.category-link.active span {
    color: #0349b3 !important;
    font-weight: 700 !important;
}

/* Absolute Floating Prev/Next Scroll Chevrons */
#prev-category-btn,
#next-category-btn {
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #4a5568 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    top: 36% !important;
    /* aligns vertically with category circles center */
    transform: translateY(-50%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease-in-out !important;
    padding: 0 !important;
}

#prev-category-btn {
    left: 15px !important;
}

#next-category-btn {
    right: 15px !important;
}

#prev-category-btn:hover,
#next-category-btn:hover {
    background-color: #f8f9fa !important;
    color: #0349b3 !important;
    border-color: #0349b3 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* Scroll Container Padding and Offsets */
#category-scroll-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .category-img-box {
        width: 65px !important;
        height: 65px !important;
        padding: 5px !important;
    }

    #prev-category-btn {
        left: 60px !important;
        /* offset to sit directly right of the mobile grid button line */
        width: 28px !important;
        height: 28px !important;
    }

    #next-category-btn {
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
    }

    #category-scroll-container {
        padding-left: 10px !important;
        /* offset left scrolling window past mobile grid + prev button */
        padding-right: 10px !important;
        /* offset right scrolling past next button */
    }
}

/* Premium bottom offcanvas styles */
.offcanvas.offcanvas-bottom {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
}

/* Sidebar and Offcanvas item styling */
.category-item {
    transition: all 0.2s ease;
}

.category-item:hover {
    background-color: #f1f5fb;
    transform: translateX(3px);
}

.list-group-item.category-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.list-group-item.category-item.active span {
    color: #ffffff !important;
}

.list-group-item.category-item.active img {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Mobile Search Bar Transition */
#mobile-search-bar-wrapper {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Floating button hover and active animation */
#cart-offcanvas-trigger {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#cart-offcanvas-trigger:hover,
#cart-offcanvas-trigger:focus {
    transform: scale(1.05);
    background-color: #0b5ed7 !important;
}

#cart-offcanvas-trigger:active {
    transform: scale(0.95);
}

/* Floating cart icon and label spacing */
#cart-offcanvas-trigger i {
    margin-right: 2px;
}