/* RRE ROI Calculator — scoped styles, matched to the Rural Ranking Experts theme.
   Mirrors the original page markup so the widget looks identical, but ships as an
   enqueued file (can't be stripped the way an inline <style>/<script> can). */

.rre-roi-calc {
	--rre-orange: #EE6A1E;
	--rre-orange-deep: #C9521A;
	--rre-navy: #0A1A2C;
	--rre-ink: #1b2430;
	--rre-muted: #5a6472;
	--rre-line: #e4e8ee;
	--rre-soft: #f6f8fa;
	--rre-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	max-width: 760px;
	margin: 0 auto;
	font-family: inherit;
}

.rre-roi-calc * { box-sizing: border-box; }

.rre-roi-calc .roi-card {
	background: #fff;
	border: 1px solid var(--rre-line);
	border-radius: 18px;
	padding: 26px 22px;
	box-shadow: 0 10px 30px rgba(10, 26, 44, .06);
}

.rre-roi-calc .roi-field { margin-bottom: 26px; }
.rre-roi-calc .roi-field:last-of-type { margin-bottom: 8px; }

.rre-roi-calc .roi-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}
.rre-roi-calc .roi-label .name { font-weight: 700; color: var(--rre-ink); font-size: 1rem; }
.rre-roi-calc .roi-label .val {
	font-family: var(--rre-mono);
	font-weight: 600;
	color: var(--rre-orange);
	font-size: 1.15rem;
	white-space: nowrap;
}

/* Slider */
.rre-roi-calc input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--rre-line);
	outline: none;
	margin: 0;
	cursor: pointer;
}
.rre-roi-calc input[type=range]:focus-visible {
	box-shadow: 0 0 0 3px rgba(238, 106, 30, .35);
}
.rre-roi-calc input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rre-orange);
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(10, 26, 44, .25);
	transition: transform .08s ease;
}
.rre-roi-calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.08); }
.rre-roi-calc input[type=range]::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rre-orange);
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(10, 26, 44, .25);
}
.rre-roi-calc input[type=range]::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: transparent;
}

.rre-roi-calc .roi-hint { margin: 8px 0 0; font-size: .85rem; color: var(--rre-muted); }

/* Results */
.rre-roi-calc .roi-results {
	margin-top: 26px;
	background: var(--rre-navy);
	border-radius: 16px;
	padding: 24px 22px;
	color: #fff;
}
.rre-roi-calc .roi-results h3 {
	margin: 0 0 18px;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9fb0c4;
	font-weight: 700;
}
.rre-roi-calc .roi-bigrow { display: flex; flex-wrap: wrap; gap: 18px; }
.rre-roi-calc .roi-big { flex: 1 1 180px; }
.rre-roi-calc .roi-big .num {
	font-family: var(--rre-mono);
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}
.rre-roi-calc .roi-big .num em { color: var(--rre-orange); font-style: normal; }
.rre-roi-calc .roi-big .cap { margin-top: 4px; font-size: .85rem; color: #9fb0c4; }

.rre-roi-calc .roi-note {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .95rem;
	color: #d7e0ea;
	line-height: 1.5;
}
.rre-roi-calc .roi-note strong { color: #fff; }

.rre-roi-calc .roi-disclaimer {
	margin: 16px 4px 0;
	font-size: .82rem;
	color: var(--rre-muted);
	line-height: 1.5;
}