/* GF Range Slider Field — number / price range slider (dual handle). */

.gf-range {
	--gf-range-track: #d9dce1;
	--gf-range-active: #2c4be0;
	--gf-range-thumb: #fff;
	box-sizing: border-box;
	padding: 6px 0 2px;
}

/* Fixed-height rail. Guarantees vertical space so the track never
   collapses, even if a theme fights the absolutely-positioned inputs. */
.gf-range__rail {
	position: relative;
	height: 20px;
	width: 100%;
}

/* Visible track, vertically centered in the rail */
.gf-range__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 6px;
	margin-top: -3px;
	border-radius: 999px;
	background: var(--gf-range-track);
}
.gf-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--gf-range-active);
}

/* Two overlapping range inputs filling the rail. The element ignores
   pointer events; only the thumbs capture them, so both handles stay
   grabbable. !important defeats Gravity Forms' theme input styling
   (border, padding, box-shadow, min-height, appearance), which is
   applied at higher specificity. */
.gform_wrapper .gf-range__input,
.gf-range__input {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 20px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	pointer-events: none;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
.gf-range__input--min { z-index: 3; }
.gf-range__input--max { z-index: 4; }
.gf-range__input:focus { outline: none; }

/* Transparent native tracks (the visible track is .gf-range__track) */
.gf-range__input::-webkit-slider-runnable-track {
	background: transparent;
	border: 0;
	height: 20px;
}
.gf-range__input::-moz-range-track {
	background: transparent;
	border: 0;
	height: 20px;
}

/* Thumbs — WebKit */
.gf-range__input::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--gf-range-thumb);
	border: 3px solid var(--gf-range-active);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.1s ease;
}
.gf-range__input:active::-webkit-slider-thumb {
	transform: scale(1.12);
}
.gf-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(44, 75, 224, 0.35);
}

/* Thumbs — Firefox */
.gf-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gf-range-thumb);
	border: 3px solid var(--gf-range-active);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.gf-range__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(44, 75, 224, 0.35);
}

/* min – max readout */
.gf-range__readout {
	margin-top: 12px;
	text-align: center;
	font-size: 0.95rem;
	opacity: 0.85;
}
.gf-range__sep { opacity: 0.7; }