/* --- استایل اسکرول‌بار سفارشی و مدرن Belotel --- */

/* ۱. ابعاد و پس‌زمینه پایه اسکرول‌بار */
::-webkit-scrollbar {
    width: 10px !important; /* عرض اسکرول‌بار عمودی */
    height: 10px !important; /* ارتفاع اسکرول‌بار افقی */
    background-color: #f5f5f5 !important; /* رنگ زمینه پشتی برای سافاری */
}

/* ۲. مسیر حرکت اسکرول (Track) با سایه داخلی برای ایجاد عمق */
::-webkit-scrollbar-track {
    background-color: #f5f5f5 !important;
    border-radius: 100px !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08) !important; /* سایه داخلی ملایم */
}

/* ۳. دستگیره متحرک (Thumb) - قرمز بلاتل با سایه بیرونی */
::-webkit-scrollbar-thumb {
    background-color: #d8023e !important; /* رنگ پایه درخواستی شما */
    border-radius: 100px !important;
    border: 2px solid #f5f5f5 !important; /* ایجاد فاصله برای حالت شناور و گرد ماندن در سافاری */
     /* ایجاد سایه سه‌بعدی روی دستگیره */
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(216, 2, 62, 0.2) !important;

}

/* ۴. حالت هاور (Hover) - تغییر رنگ به خاکستری تیره */
::-webkit-scrollbar-thumb:hover {
    background-color: #777777 !important;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.2) !important;
    border: 2px solid #f5f5f5 !important;
}

/* ۵. حالت کلیک فعال (Active) - تغییر رنگ به خاکستری متالیک تیره‌تر */
::-webkit-scrollbar-thumb:active {
    background-color: #444444 !important;
    border: 2px solid #f5f5f5 !important;
}

/* ۶. سازگاری برای فایرفاکس */
* {
    scrollbar-width: thin;
    scrollbar-color: #d8023e #f5f5f5;
}