.cpc-calculator {
	--cpc-text: #1f2937;
	--cpc-text-muted: #5f6673;
	--cpc-border: #d8dde6;
	--cpc-border-strong: #c5ccd7;
	--cpc-surface: #f7f8fa;
	--cpc-surface-strong: #eef2f7;

	--cpc-accent: #1d4ed8;
	--cpc-accent-hover: #1e40af;
	--cpc-accent-soft: #eff6ff;
	--cpc-on-accent: #ffffff;

	--cpc-success: #137333;
	--cpc-success-soft: #edf8f0;

	--cpc-error: #b42318;
	--cpc-error-soft: #fff1f0;

	--cpc-radius: 12px;
	--cpc-radius-small: 8px;
	--cpc-space: 1rem;

	box-sizing: border-box;
	width: 100%;
	margin-block: 1.5rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius);
	background: #ffffff;
	color: var(--cpc-text);
}

.cpc-calculator *,
.cpc-calculator *::before,
.cpc-calculator *::after {
	box-sizing: border-box;
}

.cpc-calculator__header {
	margin-bottom: 1.4rem;
}

.cpc-calculator__heading {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 2.5vw, 1.7rem);
	line-height: 1.25;
}

.cpc-calculator__description {
	max-width: 760px;
	margin: 0;
	color: var(--cpc-text-muted);
	line-height: 1.6;
}

.cpc-calculator__form {
	margin: 0;
}

.cpc-calculator__group {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.cpc-calculator__legend,
.cpc-calculator__group-summary {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.cpc-calculator__legend {
	margin-bottom: 1rem;
}

.cpc-calculator__group--collapsible {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius-small);
	background: #ffffff;
}

.cpc-calculator__group-summary {
	margin: 0;
	cursor: pointer;
}

.cpc-calculator__group-summary:hover {
	color: var(--cpc-accent);
}

.cpc-calculator__group-content {
	margin-top: 1rem;
}

.cpc-calculator__fields {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, 220px), 1fr)
	);
	gap: var(--cpc-space);
}

.cpc-calculator__field {
	display: grid;
	align-content: start;
	gap: 0.42rem;
	min-width: 0;
}

.cpc-calculator__field label {
	font-weight: 650;
	line-height: 1.4;
}

.cpc-calculator__control {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.cpc-calculator__prefix,
.cpc-calculator__suffix {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding-inline: 0.65rem;
	border: 1px solid var(--cpc-border-strong);
	background: var(--cpc-surface);
	color: var(--cpc-text-muted);
	font-weight: 600;
}

.cpc-calculator__prefix {
	border-right: 0;
	border-radius: 7px 0 0 7px;
}

.cpc-calculator__suffix {
	border-left: 0;
	border-radius: 0 7px 7px 0;
}

.cpc-calculator__field input:not([type="checkbox"]),
.cpc-calculator__field select {
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 0.68rem 0.75rem;
	border: 1px solid var(--cpc-border-strong);
	border-radius: 7px;
	background: #ffffff;
	color: var(--cpc-text);
	font: inherit;
	line-height: 1.3;
}

.cpc-calculator__control--prefix input,
.cpc-calculator__control--prefix select {
	border-radius: 0 7px 7px 0;
}

.cpc-calculator__control--suffix input,
.cpc-calculator__control--suffix select {
	border-radius: 7px 0 0 7px;
}

.cpc-calculator__control--prefix.cpc-calculator__control--suffix input,
.cpc-calculator__control--prefix.cpc-calculator__control--suffix select {
	border-radius: 0;
}

.cpc-calculator__field input:hover,
.cpc-calculator__field select:hover {
	border-color: #9ca6b5;
}

.cpc-calculator__field input:focus,
.cpc-calculator__field select:focus {
	border-color: var(--cpc-accent);
	outline: 3px solid rgba(29, 78, 216, 0.14);
	outline-offset: 0;
}

.cpc-calculator__field input[aria-invalid="true"],
.cpc-calculator__field select[aria-invalid="true"] {
	border-color: var(--cpc-error);
	outline-color: rgba(180, 35, 24, 0.14);
}

.cpc-calculator__field--checkbox {
	display: block;
}

.cpc-calculator__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
}

.cpc-calculator__field--checkbox input {
	width: 17px;
	height: 17px;
	margin-top: 0.15rem;
	accent-color: var(--cpc-accent);
}

.cpc-calculator__help,
.cpc-calculator__result-help {
	display: block;
	color: var(--cpc-text-muted);
	font-size: 0.86rem;
	font-weight: 400;
	line-height: 1.5;
}

.cpc-calculator__required {
	color: var(--cpc-error);
}

.cpc-calculator__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.cpc-calculator__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.05s ease;
}

.cpc-calculator__button--primary {
	border-color: var(--cpc-accent);
	background: var(--cpc-accent);
	color: var(--cpc-on-accent);
}

.cpc-calculator__button--primary:hover,
.cpc-calculator__button--primary:focus-visible {
	border-color: var(--cpc-accent-hover);
	background: var(--cpc-accent-hover);
	color: var(--cpc-on-accent);
}

.cpc-calculator__button--secondary {
	border-color: var(--cpc-border-strong);
	background: #ffffff;
	color: var(--cpc-text);
}

.cpc-calculator__button--secondary:hover,
.cpc-calculator__button--secondary:focus-visible {
	border-color: var(--cpc-accent);
	background: var(--cpc-accent-soft);
	color: var(--cpc-accent-hover);
}

.cpc-calculator__button:active {
	transform: translateY(1px);
}

.cpc-calculator__button:focus-visible {
	outline: 3px solid rgba(29, 78, 216, 0.18);
	outline-offset: 2px;
}

.cpc-calculator__error {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid #f1b8b4;
	border-left: 4px solid var(--cpc-error);
	border-radius: 7px;
	background: var(--cpc-error-soft);
	color: var(--cpc-error);
	font-weight: 600;
	line-height: 1.5;
}

.cpc-calculator__results {
	margin-top: 1.75rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--cpc-border);
}

.cpc-calculator__results:focus {
	outline: none;
}

.cpc-calculator__results-heading {
	margin: 0 0 1rem;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.cpc-calculator__result-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, 180px), 1fr)
	);
	gap: 0.8rem;
}

.cpc-calculator__result {
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--cpc-border);
	border-radius: 9px;
	background: var(--cpc-surface);
}

.cpc-calculator__result--featured {
	border-color: #a9c5f5;
	background: var(--cpc-accent-soft);
}

.cpc-calculator__result-label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--cpc-text-muted);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.35;
}

.cpc-calculator__result-value {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--cpc-text);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	font-weight: 750;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.cpc-calculator__status {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid var(--cpc-border);
	border-radius: 9px;
	background: #ffffff;
	line-height: 1.55;
}

.cpc-calculator__status--positive {
	border-color: #76b98a;
	background: var(--cpc-success-soft);
}

.cpc-calculator__status--negative {
	border-color: #e2a39e;
	background: var(--cpc-error-soft);
}

.cpc-calculator__status-title {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 750;
}

.cpc-calculator__status-message {
	color: var(--cpc-text);
}

.cpc-calculator__note {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border-left: 3px solid var(--cpc-text-muted);
	background: var(--cpc-surface);
	color: var(--cpc-text-muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

.cpc-calculator [hidden] {
	display: none !important;
}

@media (max-width: 700px) {
	.cpc-calculator {
		padding: 1rem;
	}

	.cpc-calculator__fields {
		grid-template-columns: 1fr;
	}

	.cpc-calculator__result-grid {
		grid-template-columns: repeat(
			2,
			minmax(0, 1fr)
		);
	}
}

@media (max-width: 480px) {
	.cpc-calculator__result-grid {
		grid-template-columns: 1fr;
	}

	.cpc-calculator__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.cpc-calculator__button {
		width: 100%;
	}

	.cpc-calculator__group--collapsible {
		padding: 0.85rem;
	}
}
