/**
 * Custom Scrollbar Styles
 * Works in Chrome, Safari, Edge, and Firefox
 */

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #000000 #f5f5f5;
}

/* Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 0;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

::-webkit-scrollbar-thumb:active {
    background: #000000;
}

/* Horizontal Scrollbar */
::-webkit-scrollbar:horizontal {
    height: 8px;
}

/* Corner where scrollbars meet */
::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* Custom scrollbar for specific elements */
.shop-sidebar::-webkit-scrollbar {
    width: 6px;
}

.shop-sidebar::-webkit-scrollbar-thumb {
    background: #cccccc;
}

.shop-sidebar::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality (optional) */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Scrollbar animations */
@keyframes scrollbarFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar-thumb {
    animation: scrollbarFadeIn 0.3s ease;
}