/* Style the slider container */
#slider-delivery-time-range_main,
[id^="slider-delivery-time-range_upsell_product"] {
    height: 8px; /* Adjust the slider track height */
    background: linear-gradient(to right, #14BCE5, #F1525C); /* Modern gradient */
    border-radius: 5px; /* Rounded corners */
    position: relative;
    margin: 20px 0;
}

/* Style the slider handle (button) */
#slider-delivery-time-range_main .ui-slider-handle,
[id^="slider-delivery-time-range_upsell_product"] .ui-slider-handle {
    width: 24px; /* Larger size for better visibility */
    height: 24px;
    background-color: #fff; /* White handle */
    border: 2px solid #15528F; /* Blue border for a modern look */
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: absolute;
    top: 50%; /* Position the handle at the vertical center */
    transform: translate(0%, -50%); /* Center the button horizontally and vertically */
}

/* Hover and focus effects for the handle */
#slider-delivery-time-range_main .ui-slider-handle:hover,
#slider-delivery-time-range_main .ui-slider-handle:focus,
[id^="slider-delivery-time-range_upsell_product"] .ui-slider-handle:hover,
[id^="slider-delivery-time-range_upsell_product"] .ui-slider-handle:focus {
    background-color: #F1525C; /* Change color on hover */
    transform: translate(0%, -50%) scale(1.2); /* Slightly enlarge for interaction feedback */
}

/* Add smooth scrolling for the slider */
#slider-delivery-time-range_main .ui-slider-handle,
[id^="slider-delivery-time-range_upsell_product"] .ui-slider-handle {
    transition: transform 0.08s ease, left 0.08s ease; /* Smooth scrolling effect */
}