/**
 * Investment Calculator — Stylesheet v2.0.0
 *
 * Architecture:
 *  • CSS custom properties (--ic-*) are the bridge between Elementor selectors
 *    and the visual outputs. Every control that writes to a {{WRAPPER}} selector
 *    sets one of these variables; the CSS below reads them.
 *  • Structural layout is defined here; colours / typography that Elementor
 *    controls produce are injected as inline <style> by Elementor automatically.
 *  • The slider fill gradient is driven by --ic-fill-pct, which the JS writes
 *    per-input on every `input` event.
 *
 * Design tokens (defaults — all overridable via Elementor Style controls):
 *  --ic-track-bg      : inactive track colour
 *  --ic-fill          : active/filled track colour
 *  --ic-thumb         : thumb background colour
 *  --ic-thumb-border  : thumb ring colour
 *  --ic-track-h       : track height
 *  --ic-thumb-size    : thumb diameter
 *  --ic-thumb-border-w: thumb ring width
 *  --ic-fill-pct      : [JS-written] percentage of fill (per slider)
 */

/* ─── Reset & wrapper ─────────────────────────────────────────────────── */

.ic-wrapper {
	/* Default design tokens */
	--ic-track-bg:       #E0E0E0;
	--ic-fill:           #E8273C;
	--ic-thumb:          #E8273C;
	--ic-thumb-border:   #FFFFFF;
	--ic-track-h:        5px;
	--ic-thumb-size:     22px;
	--ic-thumb-border-w: 3px;

	display: block;
	width: 100%;
}

.ic-wrapper *,
.ic-wrapper *::before,
.ic-wrapper *::after {
	box-sizing: border-box;
}

/* ─── Optional header above the cards ────────────────────────────────── */

.ic-header {
	margin-bottom: 24px;
}

.ic-widget-title {
	margin: 0 0 6px;
}

.ic-widget-subtitle {
	margin: 0;
}

/* ─── Two-column grid ─────────────────────────────────────────────────── */

.ic-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* ─── Cards ───────────────────────────────────────────────────────────── */

.ic-card {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
}

/* Input card */
.ic-card--input {
	background: #ffffff;
	padding: 36px 32px;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.08 );
}

/* Projection card */
.ic-card--projection {
	background: #111111;
	padding: 36px 32px;
}

/* ─── Slider fields ───────────────────────────────────────────────────── */

.ic-fields {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 1 1 auto;
}

.ic-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ic-field__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ic-field__label {
	font-size: 14px;
	font-weight: 500;
	color: #1A1A1A;
	line-height: 1.3;
	flex: 1 1 auto;
}

.ic-field__current-value {
	font-size: 14px;
	font-weight: 700;
	color: #D4A017;
	white-space: nowrap;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	min-width: 60px;
	text-align: right;
}

/* ─── Range slider ────────────────────────────────────────────────────── */

.ic-slider-wrap {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

/*
 * The gradient background encodes the filled / unfilled split using the
 * JS-supplied --ic-fill-pct custom property. This works cross-browser
 * for WebKit and for Firefox when combined with the ::-moz-range-progress pseudo.
 */
.ic-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var( --ic-track-h );
	border-radius: 999px;
	cursor: pointer;
	outline: none;
	margin: 0;
	padding: 0;
	background: linear-gradient(
		to right,
		var( --ic-fill )     0%,
		var( --ic-fill )     var( --ic-fill-pct, 0% ),
		var( --ic-track-bg ) var( --ic-fill-pct, 0% ),
		var( --ic-track-bg ) 100%
	);
}

/* Thumb — WebKit (Chrome, Safari, Edge) */
.ic-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width:         var( --ic-thumb-size );
	height:        var( --ic-thumb-size );
	border-radius: 50%;
	background:    var( --ic-thumb );
	border:        var( --ic-thumb-border-w ) solid var( --ic-thumb-border );
	box-shadow:    0 2px 6px rgba( 0, 0, 0, 0.25 );
	cursor:        pointer;
	transition:    transform 0.15s ease, box-shadow 0.15s ease;
}

.ic-slider::-webkit-slider-thumb:hover {
	transform:  scale( 1.12 );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.3 );
}

.ic-slider::-webkit-slider-thumb:active {
	transform: scale( 1.05 );
}

/* Track — WebKit */
.ic-slider::-webkit-slider-runnable-track {
	height:        var( --ic-track-h );
	border-radius: 999px;
}

/* Thumb — Firefox */
.ic-slider::-moz-range-thumb {
	width:         var( --ic-thumb-size );
	height:        var( --ic-thumb-size );
	border-radius: 50%;
	background:    var( --ic-thumb );
	border:        var( --ic-thumb-border-w ) solid var( --ic-thumb-border );
	box-shadow:    0 2px 6px rgba( 0, 0, 0, 0.25 );
	cursor:        pointer;
	transition:    transform 0.15s ease, box-shadow 0.15s ease;
}

.ic-slider::-moz-range-thumb:hover {
	transform: scale( 1.12 );
}

/* Track — Firefox (inactive portion) */
.ic-slider::-moz-range-track {
	height:        var( --ic-track-h );
	border-radius: 999px;
	background:    var( --ic-track-bg );
}

/* Fill — Firefox (active/left portion) */
.ic-slider::-moz-range-progress {
	height:        var( --ic-track-h );
	border-radius: 999px;
	background:    var( --ic-fill );
}

/* Focus ring (keyboard navigation) */
.ic-slider:focus-visible {
	outline:        2px solid var( --ic-fill );
	outline-offset: 4px;
	border-radius:  4px;
}

/* ─── Projection header ───────────────────────────────────────────────── */

.ic-proj-header {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin-bottom: 24px;
}

.ic-proj-header__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           #D4A017;
	flex-shrink:     0;
}

.ic-proj-header__label {
	font-size:      13px;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          #D4A017;
}

/* ─── Metric rows ─────────────────────────────────────────────────────── */

.ic-metrics {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.ic-metric {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         18px 0;
	border-bottom:   1px solid rgba( 255, 255, 255, 0.10 );
}

.ic-metric:first-child {
	padding-top: 0;
}

.ic-metric__label {
	font-size:   13px;
	font-weight: 400;
	color:       #8A8A8A;
	flex:        1 1 auto;
	line-height: 1.4;
}

.ic-metric__value {
	font-size:          22px;
	font-weight:        700;
	color:              #FFFFFF;
	white-space:        nowrap;
	font-variant-numeric: tabular-nums;
	text-align:         right;
	letter-spacing:     -0.02em;
}

/* ROI accent row */
.ic-metric--roi {
	border-bottom: none;
}

.ic-metric--roi .ic-metric__value {
	font-size:   42px;
	font-weight: 700;
	color:       #D4A017;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* ─── CTA Button ──────────────────────────────────────────────────────── */

.ic-cta {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	margin-top:      28px;
	padding:         17px 28px;
	background:      #E8273C;
	color:           #FFFFFF;
	border-radius:   50px;
	font-size:       15px;
	font-weight:     600;
	letter-spacing:  0.01em;
	text-decoration: none;
	border:          1px solid transparent;
	cursor:          pointer;
	text-align:      center;
	transition:      background-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
	-webkit-font-smoothing: antialiased;
}

.ic-cta:hover,
.ic-cta:focus {
	background: #C0192E;
	transform:  translateY( -2px );
	outline:    none;
}

.ic-cta:active {
	transform: translateY( 0 );
}

.ic-cta__icon {
	display:    inline-flex;
	align-items: center;
	font-size:  16px;
	line-height: 1;
}

.ic-cta__text {
	line-height: 1.2;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

/* Tablet — tighten padding */
@media ( max-width: 1024px ) {
	.ic-card--input,
	.ic-card--projection {
		padding: 28px 24px;
	}
}

/* Mobile — single column */
@media ( max-width: 767px ) {
	.ic-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ic-metric__value {
		font-size: 18px;
	}

	.ic-metric--roi .ic-metric__value {
		font-size: 34px;
	}

	.ic-card--input,
	.ic-card--projection {
		padding: 24px 20px;
	}
}

/* Very small phones */
@media ( max-width: 420px ) {
	.ic-field__header {
		flex-wrap: wrap;
	}

	.ic-field__current-value {
		text-align: left;
		min-width: unset;
	}
}