/**
 * Voertuigen Filter widget
 * Zorgt dat "Zelf uitlijnen" (Geavanceerd → Layout) werkt: de widget neemt geen volle breedte,
 * zodat align-self (start/center/end) zichtbaar is in een flex-container.
 */
.elementor-widget-autoflow_pro_vehicles_filter.elementor-element {
    align-self: var(--align-self, initial);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.elementor-widget-autoflow_pro_vehicles_filter > .elementor-widget-container {
    width: fit-content;
    max-width: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.elementor-widget-autoflow_pro_vehicles_filter .autoflow-filter-field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dual-handle range slider (Prijs / Km-stand) – geen rand/outline van thema */
.autoflow-range-slider,
.elementor-widget-autoflow_pro_vehicles_filter .autoflow-range-slider {
    width: 100%;
    min-width: 180px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.autoflow-range-slider-track {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Track bar: fallback uit CSS vars; Elementor/PHP inline styles hebben voorrang (geen !important) */
.autoflow-range-slider .autoflow-range-slider-track-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--afc-track-h, 6px);
    background: var(--afc-track-bg, #e0e0e0);
    background-color: var(--afc-track-bg, #e0e0e0);
    border-radius: var(--afc-track-r, 3px);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.elementor-widget-autoflow_pro_vehicles_filter .autoflow-range-slider .autoflow-range-slider-track-bar {
    height: var(--afc-track-h, 6px);
    background: var(--afc-track-bg, #e0e0e0);
    background-color: var(--afc-track-bg, #e0e0e0);
    border-radius: var(--afc-track-r, 3px);
    border: none !important;
}

/* Range-inputs: transparant, geen rand/outline */
.autoflow-range-slider-thumb,
.elementor-widget-autoflow_pro_vehicles_filter .autoflow-range-slider .autoflow-range-slider-thumb {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    pointer-events: auto;
}

.autoflow-range-slider-thumb::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1e1e1e;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
}

.autoflow-range-slider-thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1e1e1e;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
}

.autoflow-range-slider-thumb::-webkit-slider-runnable-track,
.autoflow-range-slider-thumb::-moz-range-track {
    background: transparent !important;
    border: none;
}

/* Min-slider: onder de max-wrap zodat "vanaf" weer klikbaar is */
.autoflow-range-slider-min {
    z-index: 1;
}

/* Max-wrap: clip-path zodat links ~15% voor min-thumb is; rest voor max (z-index + clip = “van” klikbaar) */
.autoflow-range-slider-max-wrap {
    position: absolute;
    left: var(--afc-min-percent, 15%);
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.autoflow-range-slider-max {
    position: absolute;
}

.autoflow-range-slider-values {
    margin-top: 6px;
    font-size: 13px;
    color: inherit;
    min-height: 1.2em;
}