/**
 * ROI-calculator (P14) — component styles.
 *
 * ISOLATION: every selector below is prefixed `.lct-roi`. Nothing here is a bare
 * element, class or global rule, so this file cannot reach any other component,
 * page or form. It is registered in inc/roi-calculator.php and enqueued ONLY by
 * the [roi_calculator] shortcode, so pages without the calculator never load it.
 *
 * Colours resolve to the site's Elementor globals, with the brief's hex values
 * as fallbacks so the component still renders correctly if a global is renamed.
 */

.lct-roi {
	--lct-roi-navy: var(--e-global-color-brand_navy, #03224E);
	--lct-roi-blue: var(--e-global-color-brand_link_blue, #0062C7);
	--lct-roi-orange: var(--e-global-color-brand_orange, #D78135);
	--lct-roi-pale: var(--e-global-color-brand_pale_blue, #EAF2FB);
	--lct-roi-body: var(--e-global-color-brand_body_grey, #5A5A60);
	--lct-roi-border: #C9D4E2;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
	font-family: "Open Sans", sans-serif;
}

.lct-roi__panel {
	background-color: #FFFFFF;
	border: 1px solid var(--lct-roi-border);
	border-radius: 10px;
	padding: 32px;
}

.lct-roi__panel--results {
	background-color: var(--lct-roi-pale);
	border-color: transparent;
}

.lct-roi__panel-title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lct-roi-navy);
}

/* ---------- inputs ---------- */

.lct-roi__field {
	margin-bottom: 20px;
}

.lct-roi__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lct-roi-navy);
}
.lct-roi__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    background: url(/wp-content/uploads/2026/09/down.png) no-repeat;
    background-position: 97% center;
    background-size: 24px;
}
.lct-roi__number,
.lct-roi__select {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--lct-roi-border);
	border-radius: 10px;
	background-color: #FFFFFF;
	font-family: inherit;
	font-size: 15px;
	line-height: 50px;
	color: var(--lct-roi-body);
	box-shadow: none;
}

.lct-roi__number:focus,
.lct-roi__select:focus,
.lct-roi__range:focus {
	border-color: var(--lct-roi-blue);
	outline: none;
}

.lct-roi__slider-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lct-roi__range {
	flex: 1 1 auto;
	min-width: 0;
	height: 6px;
	padding: 0;
	border-radius: 3px;
	background-color: var(--lct-roi-pale);
	accent-color: var(--lct-roi-orange);
	cursor: pointer;
}

.lct-roi__slider-value {
	flex: 0 0 auto;
	min-width: 68px;
	padding: 6px 10px;
	border-radius: 8px;
	background-color: var(--lct-roi-navy);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.lct-roi__button {
	display: inline-block;
	margin-top: 12px;
	padding: 15px 25px;
	min-height: 52px;
	border: 0;
	border-radius: 10px;
	background-color: var(--lct-roi-orange);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .2s ease;
}

.lct-roi__button:hover,
.lct-roi__button:focus {
	background-color: var(--lct-roi-navy);
}

/* ---------- results ---------- */

.lct-roi__card {
	background-color: #FFFFFF;
	border-left: 4px solid var(--lct-roi-orange);
	border-radius: 0 10px 10px 0;
	padding: 20px 22px;
}

.lct-roi__card + .lct-roi__card {
	margin-top: 16px;
}

.lct-roi__card-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lct-roi-navy);
}

.lct-roi__metrics {
	margin: 0;
}

.lct-roi__metric {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid var(--lct-roi-pale);
}

.lct-roi__metric:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.lct-roi__metric-label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--lct-roi-body);
}

.lct-roi__metric-value {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lct-roi-navy);
	text-align: right;
	white-space: nowrap;
}

/* ---------- responsive: stack below the site's 1025px breakpoint ---------- */

@media (max-width: 1024px) {
	.lct-roi {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.lct-roi__panel {
		padding: 24px 20px;
	}

	.lct-roi__metric {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.lct-roi__metric-value {
		text-align: left;
	}
}