/*
 * Homepage RideFinder widget — budget-slider styles (ESG).
 *
 * The chip / header / CTA styles already live in the homepage's Bricks
 * per-element CSS (recolored to --rg-blue-bright during the navy migration).
 * The slider rows are new markup, so their styles ship here, scoped to the
 * widget card. Mirrors RG's slider CSS with the blue-on-dark accent.
 */

#brxe-rgfindrw .rgf-slider-wrap {
	position: relative;
	height: 8px;
	margin: 14px 0 8px;
}
#brxe-rgfindrw .rgf-track-bg {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
}
#brxe-rgfindrw .rgf-track-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--rg-blue-bright, #4D8DFF);
	border-radius: 100px;
}
#brxe-rgfindrw .rgf-handle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	background: var(--rg-bg, #FBFBFA);
	border-radius: 50%;
	border: 3px solid var(--rg-blue-bright, #4D8DFF);
	cursor: grab;
	z-index: 2;
	touch-action: none;
}
#brxe-rgfindrw .rgf-handle:active { cursor: grabbing; }
/* Pre-JS first paint: WP Rocket Delay-JS holds the widget script until the
   first interaction, so give the handles/fill their full-span resting
   positions here. The JS writes inline styles that override these. */
#brxe-rgfindrw #rgfw-handle-max { left: 100%; }
#brxe-rgfindrw #rgfw-fill { left: 0; right: 0; }
#brxe-rgfindrw .rgf-marks {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono, 'Geist Mono'), monospace;
	font-size: 10px;
	color: var(--rg-ink-4, #B8B8BE);
	margin-top: 4px;
}