/**
 * Custom Scrollbar Styles
 * Modern, thin, and stylish scrollbar for all pages
 */

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

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7dd3c0 0%, #6bc4b0 100%);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6bc4b0 0%, #5ab3a0 100%);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #5ab3a0 0%, #4a9f8e 100%);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #7dd3c0 transparent;
}

/* Optional: For specific scrollable containers */
.scrollable-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7dd3c0 0%, #6bc4b0 100%);
    border-radius: 10px;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6bc4b0 0%, #5ab3a0 100%);
}

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

body {
    scroll-behavior: smooth;
}