/* Global Scrollbar Styling - Matches the reference image exactly */

/* Animation keyframes for scrollbar gradient movement */
@keyframes gradientScroll {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light gray track */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #673ab7 0%, #9c27b0 50%, #8e24aa 100%); /* Purple gradient */
    background-size: 200% 200%;
    animation: gradientScroll 6s ease infinite;
    border-radius: 3px; /* Slightly rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5e35b1 0%, #8e24aa 50%, #7b1fa2 100%); /* Slightly darker on hover */
    background-size: 200% 200%;
    animation: gradientScroll 4s ease infinite;
}

/* Firefox - Light mode only */
* {
    scrollbar-width: thin;
    scrollbar-color: #9c27b0 #f1f1f1;
}

/* Note: Dark mode scrollbar styling is now in product-dark-colors.css */