/* Styling for the new quantity range slider */
.sqd-quantity-slider-wrapper {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
/*    max-width: 400px;  Limit slider width for better appearance */
    gap: 10px; /* Space between slider and quantity display */
}

.sqd-quantity-slider-wrapper label {
    font-weight: bold;
    white-space: nowrap;
}

.sqd-quantity-slider-wrapper input[type="range"] {
    flex-grow: 1; /* Allow slider to take available space */
    -webkit-appearance: none; /* Override default browser styles */
    appearance: none;
    background: #d3d3d3; /* Grey track */
    outline: none;
    height: 8px; /* Track height */
    border-radius: 5px;
    cursor: pointer;
}

/* Slider thumb styling (Webkit/Blink) */
.sqd-quantity-slider-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px; /* Thumb width */
    height: 25px; /* Thumb height */
    background: var(--awb-color4);
    border-radius: 50%; /* Circular thumb */
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: background .15s ease-in-out;
}

/* Slider thumb styling (Firefox) */
.sqd-quantity-slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #0073aa;
    border-radius: 50%;
    border: 1px solid #005177;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: background .15s ease-in-out;
}

/* Slider thumb hover/active states */
.sqd-quantity-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover,
.sqd-quantity-slider-wrapper input[type="range"]::-moz-range-thumb:hover {
    background: #005177; /* Darker blue on hover */
}

.sqd-quantity-slider-wrapper input[type="range"]:active::-webkit-slider-thumb,
.sqd-quantity-slider-wrapper input[type="range"]:active::-moz-range-thumb {
    background: #003d5c; /* Even darker on active */
}

.sqd-current-quantity-display {
    font-size: 1.2em;
    font-weight: bold;
    min-width: 40px; /* Ensure space for quantity numbers */
    text-align: center;
}

/* Hide the original WooCommerce quantity input and buttons */
.woocommerce .quantity:not(.sqd-quantity-slider-wrapper) {
    display: none !important;
}

/*
 * CSS to create a filled track effect for a range slider.
 * Requires JavaScript to update the --slider-fill-percentage CSS variable.
 */

/* Base style for the range input - applies to Webkit browsers (Chrome, Safari, Edge) */
.sqd-quantity-slider-wrapper input[type="range"] {
    /* This linear-gradient creates the filled track effect */
    /* --slider-fill-percentage will be set by JavaScript (e.g., 0% to 100%) */
    background: linear-gradient(to right, #da3368 var(--slider-fill-percentage, 0%), #d3d3d3 var(--slider-fill-percentage, 0%));
    transition: background 0.2s ease-in-out; /* Smooth transition for fill */
}

/* Track styling for Mozilla (Firefox) - Important for filled track */
.sqd-quantity-slider-wrapper input[type="range"]::-moz-range-track {
    background: linear-gradient(to right, #da3368 var(--slider-fill-percentage, 0%), #d3d3d3 var(--slider-fill-percentage, 0%));
}

/* Track styling for IE/Edge (older versions) - Important for filled track */
.sqd-quantity-slider-wrapper input[type="range"]::-ms-track {
    background: transparent; /* Hide the default track */
    border-color: transparent;
    color: transparent;
}

.sqd-quantity-slider-wrapper input[type="range"]::-ms-fill-lower {
    background: #da3368; /* Color for the filled part */
}

.sqd-quantity-slider-wrapper input[type="range"]::-ms-fill-upper {
    background: #d3d3d3; /* Color for the unfilled part */
}