/**
 * DESUN Solar Savings Calculator — page-specific styles.
 *
 * Scope: everything here is namespaced under .desun-solar-calculator so it
 * cannot leak into or collide with the rest of the theme. Brand values are
 * defined once as CSS variables below — update these to match main.css
 * exactly if the values differ from what's used here.
 */

.desun-solar-calculator {
	/* ---- Brand tokens -------------------------------------------------
	 * --desun-blue is confirmed from header.php (.site-nav__lang-link:hover).
	 * The remaining tokens are professional, conservative defaults chosen
	 * to complement it since main.css wasn't available to inspect —
	 * adjust here in one place if your real values differ.
	 * ------------------------------------------------------------------- */
	--desun-blue: #2f80ed;
	--desun-blue-dark: #1c5fc4;
	--desun-blue-darker: #12213a;
	--desun-blue-pale: #eaf2fd;
	--desun-ink: #101820;
	--desun-text: #1c2b3a;
	--desun-muted: #5c6b7a;
	--desun-border: #e3e8ee;
	--desun-bg-soft: #f6f8fb;
	--desun-white: #ffffff;
	--desun-radius-sm: 8px;
	--desun-radius-md: 12px;
	--desun-radius-lg: 16px;
	--desun-font-heading: 'Space Grotesk', 'Inter', sans-serif;
	--desun-font-body: 'Inter', sans-serif;

	font-family: var( --desun-font-body );
	color: var( --desun-text );
}

.desun-solar-calculator * {
	box-sizing: border-box;
}

.desun-solar-calculator img {
	max-width: 100%;
	display: block;
}

/* -------------------------------------------------------------------- *
 * Hero
 * -------------------------------------------------------------------- */

.desun-calculator-hero {
	position: relative;
	overflow: hidden;
	background-color: var( --desun-blue-darker );
	color: var( --desun-white );
	padding: 64px 0 96px;
}

.desun-calculator-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.desun-calculator-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		rgba( 16, 24, 32, 0.92 ) 0%,
		rgba( 18, 33, 58, 0.82 ) 45%,
		rgba( 47, 128, 237, 0.55 ) 100%
	);
}

.desun-calculator-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.desun-calculator-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.75 );
	margin: 0 0 28px;
}

.desun-calculator-breadcrumb a {
	color: rgba( 255, 255, 255, 0.75 );
	text-decoration: none;
}

.desun-calculator-breadcrumb a:hover {
	color: var( --desun-white );
}

.desun-calculator-breadcrumb__current {
	color: var( --desun-white );
	font-weight: 500;
}

.desun-calculator-hero__title {
	font-family: var( --desun-font-heading );
	font-weight: 600;
	font-size: clamp( 2.25rem, 4.5vw, 3.25rem );
	line-height: 1.1;
	margin: 0 0 20px;
	color: var( --desun-white );
}

.desun-calculator-hero__lede {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0;
	max-width: 620px;
}

/* -------------------------------------------------------------------- *
 * Calculator container
 * -------------------------------------------------------------------- */

.desun-calculator-container {
	position: relative;
	z-index: 2;
	margin-top: -64px;
	background: var( --desun-white );
	border-radius: var( --desun-radius-lg );
	box-shadow: 0 12px 32px rgba( 16, 24, 32, 0.08 );
	padding: 40px;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
}

@media ( max-width: 991px ) {
	.desun-calculator-container {
		grid-template-columns: 1fr;
		padding: 28px;
		margin-top: -40px;
	}
}

@media ( max-width: 480px ) {
	.desun-calculator-container {
		padding: 20px;
	}
}

/* ---- Panel headers -------------------------------------------------- */

.desun-calculator-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.desun-calculator-panel__title {
	font-family: var( --desun-font-heading );
	font-weight: 600;
	font-size: 1.375rem;
	margin: 0 0 6px;
	color: var( --desun-text );
}

.desun-calculator-panel__subtitle {
	font-size: 0.9375rem;
	color: var( --desun-muted );
	margin: 0;
}

/* ---- Reset button ----------------------------------------------------*/

.desun-calculator-reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --desun-white );
	border: 1px solid var( --desun-border );
	color: var( --desun-text );
	font-size: 0.875rem;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: var( --desun-radius-sm );
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.desun-calculator-reset:hover {
	border-color: var( --desun-blue );
	color: var( --desun-blue );
}

.desun-calculator-reset svg {
	width: 15px;
	height: 15px;
}

/* -------------------------------------------------------------------- *
 * Input rows
 * -------------------------------------------------------------------- */

.desun-calculator-input-row {
	margin-bottom: 26px;
}

.desun-calculator-input-row:last-child {
	margin-bottom: 0;
}

.desun-calculator-input-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.desun-calculator-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --desun-text );
}

.desun-calculator-label__info {
	display: inline-flex;
	color: var( --desun-muted );
	cursor: help;
}

.desun-calculator-label__info svg {
	width: 14px;
	height: 14px;
}

.desun-calculator-field {
	display: flex;
	align-items: center;
	border: 1px solid var( --desun-border );
	border-radius: var( --desun-radius-sm );
	overflow: hidden;
	background: var( --desun-white );
	flex-shrink: 0;
}

.desun-calculator-field:focus-within {
	border-color: var( --desun-blue );
}

.desun-calculator-field__input {
	width: 100px;
	border: 0;
	padding: 9px 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: right;
	color: var( --desun-text );
	background: transparent;
	font-family: var( --desun-font-body );
}

.desun-calculator-field__input:focus {
	outline: none;
}

.desun-calculator-field__unit {
	padding: 9px 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var( --desun-muted );
	background: var( --desun-bg-soft );
	border-left: 1px solid var( --desun-border );
}

/* ---- Slider ----------------------------------------------------------*/

.desun-calculator-slider {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var( --desun-border );
	outline: none;
	cursor: pointer;
	margin: 0;
}

.desun-calculator-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --desun-white );
	border: 3px solid var( --desun-blue );
	box-shadow: 0 1px 4px rgba( 16, 24, 32, 0.25 );
	cursor: pointer;
}

.desun-calculator-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --desun-white );
	border: 3px solid var( --desun-blue );
	box-shadow: 0 1px 4px rgba( 16, 24, 32, 0.25 );
	cursor: pointer;
}

.desun-calculator-slider::-moz-range-progress {
	background: var( --desun-blue );
	height: 6px;
	border-radius: 3px;
}

.desun-calculator-slider-range {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var( --desun-muted );
	margin-top: 8px;
}

.desun-calculator-message {
	font-size: 0.8125rem;
	color: #b3261e;
	margin-top: 8px;
}

.desun-calculator-message[hidden] {
	display: none;
}

/* -------------------------------------------------------------------- *
 * Results panel
 * -------------------------------------------------------------------- */

.desun-calculator-results {
	background: var( --desun-blue-pale );
	border-radius: var( --desun-radius-md );
	padding: 28px;
}

.desun-calculator-result-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var( --desun-white );
	border-radius: var( --desun-radius-sm );
	padding: 18px 20px;
	margin-bottom: 14px;
}

.desun-calculator-result-card:last-of-type {
	margin-bottom: 20px;
}

.desun-calculator-result-card__icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var( --desun-blue-pale );
	color: var( --desun-blue );
	display: flex;
	align-items: center;
	justify-content: center;
}

.desun-calculator-result-card__icon svg {
	width: 18px;
	height: 18px;
}

.desun-calculator-result-card__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --desun-text );
	margin: 0 0 2px;
}

.desun-calculator-result-card__desc {
	font-size: 0.8125rem;
	color: var( --desun-muted );
	margin: 0 0 6px;
}

.desun-calculator-result-card__value {
	font-family: var( --desun-font-heading );
	font-size: 1.5rem;
	font-weight: 600;
	color: var( --desun-blue-dark );
	margin: 0;
}

.desun-calculator-result-card__value.is-negative {
	color: #b3261e;
}

.desun-calculator-result-card__value.is-warning {
	font-size: 1.0625rem;
	color: var( --desun-muted );
}

.desun-calculator-disclaimer {
	display: flex;
	gap: 10px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --desun-muted );
	background: rgba( 255, 255, 255, 0.6 );
	border-radius: var( --desun-radius-sm );
	padding: 14px 16px;
}

.desun-calculator-disclaimer svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var( --desun-blue );
	margin-top: 2px;
}

/* -------------------------------------------------------------------- *
 * CTA section
 * -------------------------------------------------------------------- */

.desun-calculator-cta {
	background: var( --desun-bg-soft );
	padding: 64px 0;
	margin-top: 80px;
}

.desun-calculator-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.desun-calculator-cta__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --desun-blue );
	margin: 0 0 10px;
}

.desun-calculator-cta__title {
	font-family: var( --desun-font-heading );
	font-weight: 600;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	color: var( --desun-text );
	margin: 0 0 12px;
	max-width: 620px;
}

.desun-calculator-cta__text {
	font-size: 0.9375rem;
	color: var( --desun-muted );
	max-width: 560px;
	margin: 0;
	line-height: 1.6;
}

.desun-calculator-cta__button {
	flex-shrink: 0;
	white-space: nowrap;
}

/* -------------------------------------------------------------------- *
 * Responsive
 * -------------------------------------------------------------------- */

@media ( max-width: 640px ) {
	.desun-calculator-hero {
		padding: 40px 0 72px;
	}

	.desun-calculator-input-row__top {
		flex-direction: row;
		align-items: center;
	}

	.desun-calculator-field__input {
		width: 84px;
	}

	.desun-calculator-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------- *
 * Active nav state for the injected "Calculator" menu item
 * -------------------------------------------------------------------- */

body.page-template-page-solar-calculator-php .nav-menu .desun-nav-calculator > a {
	color: var( --desun-blue, #2f80ed );
}

/* -------------------------------------------------------------------- *
 * Arabic / RTL
 * -------------------------------------------------------------------- */

html[lang^="ar"] .desun-solar-calculator {
	direction: rtl;
	text-align: right;
}

html[lang^="ar"] .desun-calculator-breadcrumb,
html[lang^="ar"] .desun-calculator-panel__head,
html[lang^="ar"] .desun-calculator-input-row__top,
html[lang^="ar"] .desun-calculator-result-card,
html[lang^="ar"] .desun-calculator-disclaimer,
html[lang^="ar"] .desun-calculator-cta__inner {
	direction: rtl;
}

html[lang^="ar"] .desun-calculator-hero__inner,
html[lang^="ar"] .desun-calculator-hero__lede,
html[lang^="ar"] .desun-calculator-panel__title,
html[lang^="ar"] .desun-calculator-panel__subtitle,
html[lang^="ar"] .desun-calculator-label,
html[lang^="ar"] .desun-calculator-result-card__label,
html[lang^="ar"] .desun-calculator-result-card__desc,
html[lang^="ar"] .desun-calculator-disclaimer,
html[lang^="ar"] .desun-calculator-cta__eyebrow,
html[lang^="ar"] .desun-calculator-cta__title,
html[lang^="ar"] .desun-calculator-cta__text {
	text-align: right;
}

html[lang^="ar"] .desun-calculator-field__input {
	text-align: left;
	direction: ltr;
}

html[lang^="ar"] .desun-calculator-field__unit {
	border-left: 0;
	border-right: 1px solid var( --desun-border );
}

html[lang^="ar"] .desun-calculator-result-card__value {
	direction: rtl;
	unicode-bidi: plaintext;
}

html[lang^="ar"] .desun-calculator-reset {
	direction: rtl;
}

html[lang^="ar"] .desun-calculator-cta__button {
	direction: rtl;
}