.edc-calculator {
	--edc-heading: #022e64;
	--edc-muted-label: #a6b2c1;
	--edc-card-bg: linear-gradient(180deg, #ffffff 0%, #e2ebf6 100%);
	--edc-card-border: #b2c3d8;
	--edc-track-fill: linear-gradient(90deg, #022e64 0%, #045dca 100%);
	--edc-track-unfilled: #e2ebf6;
	--edc-badge-bg: #e4ffd6;
	--edc-badge-border: #52ff00;
	--edc-badge-glow: 0 0 5px #b6ff90;
	--edc-badge-text: #02644a;
	--edc-badge-radius: 6px;
	--edc-total-bg: linear-gradient(180deg, #022e64 0%, #045dca 100%);
	--edc-total-text: #ffffff;
	--edc-total-caption: #a6b2c1;
	--edc-scale: 1;
	--edc-thumb-logo-size: 80%;

	font-family: 'Inter', sans-serif;
	width: 100%;
	background: var(--edc-card-bg);
	border: 1px solid var(--edc-card-border);
	border-radius: calc(20px * var(--edc-scale));
	padding: calc(50px * var(--edc-scale)) calc(30px * var(--edc-scale));
	box-sizing: border-box;
}

.edc-calculator * {
	box-sizing: border-box;
}

.edc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(45px * var(--edc-scale));
	row-gap: calc(56px * var(--edc-scale));
	margin-bottom: calc(56px * var(--edc-scale));
}

.edc-slider-block {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--edc-scale));
	/* Grid/flex items default to min-width:auto, which honors content's
	   min-content size and can overflow a narrow (mobile) column otherwise. */
	min-width: 0;
}

.edc-slider-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(16px * var(--edc-scale));
}

.edc-slider-copy {
	/* Lets the title/subtitle column shrink and wrap instead of pushing the
	   badge past the edge of narrow (mobile) containers. */
	min-width: 0;
	flex: 1 1 auto;
}

.edc-slider-title {
	margin: 0;
	font-size: calc(24px * var(--edc-scale));
	font-weight: 900;
	line-height: 1.1;
	color: var(--edc-heading);
	text-transform: capitalize;
}

.edc-slider-subtitle {
	margin: calc(6px * var(--edc-scale)) 0 0;
	font-size: calc(14px * var(--edc-scale));
	font-weight: 500;
	line-height: 1.4;
	color: var(--edc-heading);
}

.edc-badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(35px * var(--edc-scale));
	padding: calc(8px * var(--edc-scale)) calc(16px * var(--edc-scale));
	border-radius: calc(var(--edc-badge-radius) * var(--edc-scale));
	background: var(--edc-badge-bg);
	border: 1px solid var(--edc-badge-border);
	box-shadow: var(--edc-badge-glow);
	color: var(--edc-badge-text);
	font-size: calc(16px * var(--edc-scale));
	font-weight: 900;
	text-transform: capitalize;
	white-space: nowrap;
}

.edc-range {
	--edc-pct: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: calc(28px * var(--edc-scale));
	background: transparent;
	outline: none;
	cursor: pointer;
	margin: 0;
}

/* Fill is a sized/clipped background-image layered over a flat unfilled
   background-color — works whether the fill itself is a flat color or a
   gradient (mobile's gray-to-gold), which a gradient color-stop can't be. */
.edc-range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: calc(28px * var(--edc-scale));
	border-radius: calc(15px * var(--edc-scale));
	background-color: var(--edc-track-unfilled);
	background-image: var(--edc-track-fill);
	background-size: var(--edc-pct) 100%;
	background-repeat: no-repeat;
}

.edc-range::-moz-range-track {
	height: calc(28px * var(--edc-scale));
	border-radius: calc(15px * var(--edc-scale));
	background-color: var(--edc-track-unfilled);
	background-image: var(--edc-track-fill);
	background-size: var(--edc-pct) 100%;
	background-repeat: no-repeat;
	border: none;
}

.edc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: calc(54px * var(--edc-scale));
	height: calc(54px * var(--edc-scale));
	margin-top: calc(-13px * var(--edc-scale));
	border-radius: 50%;
	/* Figma's thumb is a navy backing disc (Group163) with the logo sitting
	   smaller/centered on top, leaving a visible navy ring — not a single
	   flattened image. Reproduced as a navy fill + an undersized background
	   image rather than baking the ring into the asset. */
	background-color: #022e64;
	background-image: url('../images/slider-thumb.png');
	background-size: var(--edc-thumb-logo-size, 80%);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	cursor: grab;
	position: relative;
}

.edc-range::-moz-range-thumb {
	width: calc(54px * var(--edc-scale));
	height: calc(54px * var(--edc-scale));
	border: none;
	border-radius: 50%;
	background-color: #022e64;
	background-image: url('../images/slider-thumb.png');
	background-size: var(--edc-thumb-logo-size, 80%);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	cursor: grab;
}

.edc-range-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: calc(24px * var(--edc-scale));
	font-weight: 900;
	color: var(--edc-muted-label);
	text-transform: capitalize;
}

.edc-total {
	background: var(--edc-total-bg);
	border-radius: calc(20px * var(--edc-scale));
	padding: calc(50px * var(--edc-scale));
	text-align: center;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
}

.edc-total-value {
	margin: 0;
	font-size: calc(62px * var(--edc-scale));
	font-weight: 900;
	line-height: 1.1;
	color: var(--edc-total-text);
}

.edc-total-caption {
	margin: calc(8px * var(--edc-scale)) 0 0;
	font-size: calc(32px * var(--edc-scale));
	font-weight: 500;
	color: var(--edc-total-caption);
}

/* Mobile theme + single-column layout, from Elementor's Tablet breakpoint down. */
@media (max-width: 1024px) {
	.edc-calculator {
		--edc-heading: #022e64;
		--edc-muted-label: #cfcfcf;
		--edc-card-bg: #f9f9f9;
		--edc-card-border: transparent;
		--edc-track-fill: linear-gradient(90deg, #eeeeee 0%, #eab62e 100%);
		--edc-track-unfilled: #eeeeee;
		--edc-badge-bg: #eeeeee;
		--edc-badge-border: transparent;
		--edc-badge-glow: none;
		--edc-badge-text: #022e64;
		--edc-badge-radius: 20px;
		--edc-total-caption: #a6b2c1;
		/* Belt-and-suspenders: Desktop Scale is only ever written inside the
		   inline <style>'s own @media (min-width: 1025px) rule, so it can't
		   leak here — but keep mobile explicitly scale-neutral in case the
		   breakpoints are ever touched independently later. */
		--edc-scale: 1;

		padding: 50px 20px;
	}

	.edc-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
		margin-bottom: 40px;
	}

	.edc-slider-block {
		gap: 16px;
	}

	/* Keep the badge pinned to the title's row instead of dropping below it
	   when space is tight — the title (which can shrink/wrap via its own
	   min-width:0 flex-basis) absorbs the squeeze instead, matching the
	   Figma mobile mockup where the badge never drops to its own line. */
	.edc-slider-head {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.edc-slider-title {
		font-size: 15px;
	}

	.edc-slider-subtitle {
		font-size: 11px;
	}

	.edc-badge {
		font-size: 12px;
		padding: 7px 12px;
	}

	.edc-range-labels {
		font-size: 16px;
	}

	.edc-total {
		padding: 40px 30px;
	}

	.edc-total-value {
		font-size: 42px;
	}

	.edc-total-caption {
		font-size: 20px;
	}
}