/* Custom Dual Range Slider Styling - Matching Original Design */

.price-slider-container,
.carat-slider-container {
    position: relative;
    margin-bottom: 32px !important;
}

/* Slider value displays - positioned like original */
.price-slider-container .slider-values,
.carat-slider-container .slider-values {
    position: relative;
    height: auto;
    margin-bottom: 0;
}

.price-slider-container .price-min,
.price-slider-container .price-max {
    position: absolute !important;
    top: 18px;
    font-size: var(--body-font-size-small);
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
}

.price-slider-container .price-min {
    left: 0;
}

.price-slider-container .price-max {
    right: 0;
}

.carat-slider-container .carat-min,
.carat-slider-container .carat-max {
    position: absolute !important;
    top: 18px;
    font-size: var(--body-font-size-small);
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
}

.carat-slider-container .carat-min {
    left: 0;
}

.carat-slider-container .carat-max {
    right: 0;
}

/* Dual Range Slider Container */
.dual-range-slider {
    position: relative;
    height: 2px;
    margin: 0.5rem 0;
    cursor: pointer;
    user-select: none;
}

/* Add the black line like original :before */
.dual-range-slider:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--color-black);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Slider Track (invisible background for click detection) */
.slider-track {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Selected Range - remove as we're using the black line */
.slider-range {
    display: none;
}

/* Slider Handles - Match original range input styling */
.slider-handle {
    position: absolute;
    top: -7px; /* Center on 2px line */
    width: var(--body-font-size);
    height: var(--body-font-size);
    background: var(--color-gray-dark);
    border: none;
    border-radius: var(--body-font-size);
    cursor: pointer;
    box-shadow: none;
    transition: none;
    z-index: 10;
    margin-left: calc(var(--body-font-size) / -2); /* Center handle on position */
}

/* Handle states - keep minimal like original */
.slider-handle:hover {
    background: var(--color-gray-dark);
    transform: none;
    box-shadow: none;
}

.dual-range-slider.dragging .slider-handle {
    cursor: pointer;
}

/* Specific handle positioning */
.min-handle {
    left: 0%;
}

.max-handle {
    left: 100%;
}

/* Remove focus outline to match original */
.slider-handle:focus {
    outline: none;
}

/* Mobile adjustments - keep minimal */
@media (max-width: 768px) {
    .slider-handle {
        width: var(--body-font-size);
        height: var(--body-font-size);
        top: -7px;
        margin-left: calc(var(--body-font-size) / -2);
    }

    .dual-range-slider {
        height: 2px;
        margin: 0.5rem 0;
    }

    .slider-track {
        height: 22px;
        top: -10px;
    }
}

/* Remove all animations to match original */
.slider-handle {
    transition: none;
}

.slider-range {
    transition: none;
}

/* Remove theme color integration - use CSS variables */
.slider-handle {
    background: var(--color-gray-dark);
}

/* Ensure sliders work in all contexts */
.dual-range-slider * {
    box-sizing: border-box;
}

/* Remove loading and error states - keep minimal */
.dual-range-slider.loading {
    opacity: 1;
    pointer-events: auto;
}

/* Firefox handle styling to match webkit */
.slider-handle {
    -moz-appearance: none;
}

/* Ensure consistent sizing across browsers */
.slider-handle {
    min-width: var(--body-font-size);
    min-height: var(--body-font-size);
}