/**
 * Custom Scrollbar Styles
 * Professional scrollbar design inspired by modern e-commerce sites
 * Follows CodLion development guide standards
 */

/* Global body scrollbar styling - always visible */
html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

html::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, #c1c1c1);
    border-radius: 6px;
    border: 2px solid #f1f1f1;
    transition: background-color 0.3s ease;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #a67c52);
}

/* Body scrollbar for all browsers */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color, #c1c1c1) #f1f1f1;
}

/* Mobile responsive scrollbar */
@media (max-width: 991px) {
    html::-webkit-scrollbar {
        width: 8px;
    }
    
    html::-webkit-scrollbar-thumb {
        border: 1px solid #f1f1f1;
    }
}

/* Horizontal Slider Scrollbar - Product Gallery Style */
.slider-scrollbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color, #c1c1c1) transparent;
}

.slider-scrollbar::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.slider-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin: 0 10px;
}

.slider-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, #c1c1c1);
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.slider-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #a67c52);
}

/* Custom scrollbar for specific elements */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, #c1c1c1);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #a67c52);
}

/* Small screens only scrollbar */
@media (max-width: 991px) {
    .small-down--show::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .small-down--show::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .small-down--show::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb-color, #c1c1c1);
        border-radius: 3px;
    }
    
    .small-down--show::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color, #a67c52);
    }
}

/* Hide on larger screens for small-down--show */
@media (min-width: 992px) {
    .small-down--show::-webkit-scrollbar {
        display: none;
    }
    
    .small-down--show {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

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

/* RTL support */
html[dir="rtl"]::-webkit-scrollbar {
    direction: rtl;
}