.calculator-tool-wrap {
	--ct-primary: #0b2f49;
	--ct-secondary: #23a6d2;
	--ct-line: #E2E7F1;
	--ct-gray: #5A6480;
	--ct-error: #C43D3D;
	--ct-bg: #E3F4FA;
}

/* Themes: override the tokens above via data-theme on the wrap */
.calculator-tool-wrap[data-theme="gazelle"] {
	--ct-secondary: #024697;
	--ct-bg: #E6EDF7;
}

.calculator-tool {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: flex-start;
}

/* Intro block */
.calculator-tool-intro__title {
	margin: 0 0 16px;
	font-weight: 700;
}

/* Column cards */
.calculator-tool__column {
	flex: 1 1 300px;
	min-width: 280px;
	padding: 32px 0;
	background: #ffffff;
	border: 0;
}

.calculator-tool__column--form {
	flex-grow: 7;
}

.calculator-tool__column--result {
	flex-grow: 5;
}

/* Form heading */
.calculator-tool__header {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ct-line);
}

.calculator-tool__title {
	margin: 0;
	font-weight: 700;
}

.calculator-tool__intro {
	margin: 0;
	color: var(--ct-gray);
}

/* Fields */

.calculator-tool__field {
	margin-bottom: 24px;
}

.calculator-tool__field label {
	margin-bottom: 8px;
	font-weight: 800;
}

.calculator-tool__input {
	display: flex;
	align-items: stretch;
	background: #ffffff;
	border: 2px solid var(--ct-line);
	border-radius: 16px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.calculator-tool__input:hover {
	border-color: var(--ct-gray);
}

.calculator-tool__input:focus-within {
	border-color: var(--ct-secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-secondary) 15%, transparent);
}

/* Validation */
.calculator-tool__input:has(input:user-invalid) {
	border-color: var(--ct-error);
}

.calculator-tool__input input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	color: inherit;
	color-scheme: light;
}

.calculator-tool__input input:focus {
	outline: none;
}

.calculator-tool__input input::placeholder {
	color: var(--ct-gray);
}

/* €- and %-labels in input */
.calculator-tool__affix {
	display: flex;
	align-items: center;
	flex: none;
	padding: 0 16px;
	background: var(--ct-line);
	font-weight: 800;
}

.calculator-tool__input--prefix .calculator-tool__affix {
	border-right: 2px solid var(--ct-line);
	border-radius: 16px 0 0 16px;
}

.calculator-tool__input--suffix .calculator-tool__affix {
	border-left: 2px solid var(--ct-line);
	border-radius: 0 16px 16px 0;
}

.calculator-tool__hint {
	margin: 8px 0 0;
	font-size: .85rem;
	color: var(--ct-gray);
}

/* Button */
.calculator-tool__submit {
	display: block;
	width: 100%;
	margin-top: 24px;
	padding: 16px 32px;
	border: 0;
	background: var(--ct-secondary);
	color: #ffffff;
	cursor: pointer;
	transition: background .18s ease, transform .12s ease;
}

.calculator-tool__submit:hover:not(:disabled) {
	background: var(--ct-primary);
}

.calculator-tool__submit:focus-visible {
	outline: 3px solid var(--ct-primary);
	outline-offset: 3px;
}

.calculator-tool__submit:disabled {
	cursor: not-allowed;
	opacity: .45;
}

.calculator-tool__note {
	margin: 8px 0 0;
	font-size: .8rem;
	text-align: center;
	color: var(--ct-gray);
}

/* Results */
.calculator-tool__result-label {
	display: block;
	font-weight: 800;
}

.calculator-tool__result {
	display: none;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.calculator-tool__result.is-visible {
	display: block;
	animation: ct-fade-up .3s ease both;
}

.calculator-tool__result.is-error {
	color: var(--ct-error);
	font-weight: 700;
}

/* Hide placeholder when result is visible */
.calculator-tool__result.is-visible ~ .calculator-tool__placeholder {
	display: none;
}

.calculator-tool__placeholder {
	margin: 16px 0 0;
	text-align: center;
	color: var(--ct-gray);
}

.calculator-tool__placeholder svg {
	display: block;
	margin: 16px auto;
}

.calculator-tool__plot-line {
	stroke: var(--ct-line);
}

.calculator-tool__plot-dot {
	fill: var(--ct-secondary);
}

.calculator-tool__plot-dot--alt {
	fill: var(--ct-primary);
}

.calculator-tool__plot-ring {
	stroke: var(--ct-secondary);
}

.calculator-tool__smallprint {
	margin: 16px 0 0;
	font-size: .8rem;
	color: var(--ct-gray);
}

/* Result block */
.calculator-tool__result h3 {
	margin: 16px 0 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.calculator-tool__result p {
	margin: 24px 0 0;
	font-size: .8rem;
}

/* Result specification */
.result-spec {
	margin: 16px 0 0;
}

.result-spec__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ct-line);
}

.result-spec__row dt {
	color: var(--ct-gray);
	font-weight: 400;
}

.result-spec__row dd,
.result-spec__subtitle {
	margin: 0;
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.result-spec__subtitle {
	font-weight: 400;
	color: var(--ct-gray);
	margin-top: 4px;
	display: flex;
}

.result-spec__total {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 16px 0 0;
	padding: 16px;
	border-radius: 16px;
	background: var(--ct-bg);
	font-weight: 800;
}

.result-spec__total strong {
	margin-left: auto;
	font-size: 1.4rem;
	line-height: 1.3;
	text-align: right;
	color: var(--ct-primary);
	font-variant-numeric: tabular-nums;
}

@keyframes ct-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.calculator-tool__result.is-visible { animation: none; }
	.calculator-tool__input,
	.calculator-tool__submit { transition: none; }
}

@media (max-width: 767px) {
	.calculator-tool-intro,
	.calculator-tool__column {
		padding: 0;
	}
}