/* --- Sleek & Hidden Scrollbar Design --- */

/* 1. Pure page aur sabhi scrollable elements ke liye */
* {
    scrollbar-width: thin; /* Firefox ke liye barik size */
    scrollbar-color: transparent transparent; /* Firefox: Default hidden */
}

/* 2. Webkit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;  /* Vertical scrollbar ki width (Barik) */
    height: 6px; /* Horizontal scrollbar ki height */
}

/* Scrollbar ka piche wala hissa (Track) - Always transparent */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar ka handle (Thumb) - Default hidden */
::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 2px solid transparent; /* Padding effect */
}

/* 3. HOVER Effect - Jab mouse scroll area par jaye tabhi dikhega */
/* All elements with scrollbar */
*:hover::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.5); /* Soft grey color on hover */
    background-clip: content-box;
}

/* 4. Arrows Hide karna (Buttons) - Complete removal */
::-webkit-scrollbar-button:single-button {
    display: none;
}

/* For webkit browsers - alternative method to hide arrows */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* 5. For specific containers with better hover control */
.scrollable-container {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.scrollable-container::-webkit-scrollbar {
    width: 6px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 2px solid transparent;
}

.scrollable-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.5);
    background-clip: content-box;
}

/* 6. Firefox hover effect - Limited but working */
*:hover {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}

/* 7. For dark theme compatibility */
[data-bs-theme="dark"] *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); /* Lighter color for dark backgrounds */
}

[data-bs-theme="dark"] *:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 8. Smooth transition for hover effect */
::-webkit-scrollbar-thumb {
    transition: background-color 0.3s ease;
}