/* Auto Scroll Container */
.auto-scroll-container {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base Button Style - کاملاً ثابت بدون تغییر حالت */
.auto-scroll-btn {
    width: 50px;
    height: 50px;
    background: #0B63D5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 12px rgba(11, 99, 213, 0.3);
    flex-shrink: 0;
    
    /* غیرفعال کردن تمام transition ها */
    transition: none !important;
    
    /* حذف تمام effects هنگام هاور */
    &:hover, &:focus, &:active {
        background: #0B63D5 !important;
        transform: none !important;
        box-shadow: 0 4px 12px rgba(11, 99, 213, 0.3) !important;
    }
}

.auto-scroll-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Expanded State */
.auto-scroll-container.expanded {
    width: 220px;
    height: 50px;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
}

/* Button in Expanded State */
.auto-scroll-container.expanded .auto-scroll-btn {
    order: 1;
    margin-right: 15px;
    background: #0B63D5;
    
    /* تضمین عدم تغییر در expanded state */
    &:hover {
        background: #0B63D5 !important;
    }
}

/* Speed Control */
.speed-control {
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    order: 2;
}

/* Slider */
.speed-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: linear-gradient(to right, #e0e0e0 0%, #e0e0e0 var(--empty-percent, 50%), 
                #0B63D5 var(--empty-percent, 50%), #0B63D5 100%);
    outline: none;
    border-radius: 2px;
    margin: 0;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid #0B63D5;
    cursor: pointer;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 768px) {
    .auto-scroll-container.expanded {
        width: 200px;
        padding: 0 10px;
    }
}