/* Калькулятор — по макету Figma 4261:2046, 4261:2047 */

.calc {
	margin-top: 50px;
	margin-bottom: var(--spacing-xxl);
}

.calc__layout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.calc__main {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 628px;
	max-width: 100%;
	flex-shrink: 0;
}

.calc__main:not(.calc__main--has-results) {
	gap: 0;
}

.calc__panel[hidden] {
	display: none !important;
}

.calc__form-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px 24px;
	background-color: #f9f9f9;
	border-radius: 20px;
}

.calc__form-title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: var(--color-primary);
}

.calc__form-body {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.calc__input {
	flex: 1;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid #dbdbdb;
	border-radius: 16px;
	background-color: #fffffe;
	font-family: var(--font-family-primary);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--color-primary);
	outline: none;
	transition: border-color 0.3s ease;
}

.calc__input:focus {
	border-color: var(--color-primary);
}

.calc__button {
	width: 142px;
	height: 50px;
	padding: 12px 16px;
	border: none;
	border-radius: 20px;
	background-color: var(--color-primary);
	font-family: var(--font-family-primary);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: #fffffe;
	cursor: pointer;
	transition: opacity 0.3s ease;
	flex-shrink: 0;
}

.calc__button:hover {
	opacity: 0.8;
}

.calc__results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.calc__results-table {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.calc__results-row,
.calc__details-row {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 0;
	border-bottom: 1px solid #dbdbdb;
}

.calc__results-row--last,
.calc__details-row--last {
	border-bottom: none;
}

.calc__results-label,
.calc__details-label {
	flex: 1;
	padding-right: 8px;
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-gray-dark);
}

.calc__results-value,
.calc__details-value {
	padding-left: 8px;
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--color-primary);
	text-align: right;
	white-space: nowrap;
}

.calc__details-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-primary);
	text-decoration: underline;
	transition: opacity 0.3s ease;
}

.calc__details-link:hover {
	opacity: 0.7;
}

.calc__details-icon {
	flex-shrink: 0;
}

.calc__details-text {
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

.calc__details {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.calc__details-title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	color: var(--color-primary);
}

.calc__details-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.calc__details-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.calc__details-item-title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: var(--color-primary);
}

.calc__details-item-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calc__details-notes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calc__details-notes p {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

.calc__details-table {
	display: flex;
	flex-direction: column;
}

.calc__notes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 628px;
	max-width: 100%;
	flex: 1;
	min-width: 0;
}

.calc__notes-title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: var(--color-primary);
}

.calc__notes-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calc__notes-content p {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--color-primary);
}

@media (max-width: 992px) {
	.calc {
		margin-top: 32px;
	}

	.calc__layout {
		flex-direction: column;
		gap: 32px;
	}

	.calc__main,
	.calc__notes {
		width: 100%;
	}

	.calc__main {
		gap: 32px;
	}

	.calc__form-inner {
		padding: 16px;
		gap: 16px;
	}

	.calc__form-title {
		font-size: 16px;
		line-height: 20px;
	}

	.calc__form-body {
		flex-direction: column;
	}

	.calc__button {
		width: 100%;
	}

	.calc__details-title {
		font-size: 20px;
		line-height: 24px;
	}

	.calc__details-item-title {
		font-size: 18px;
		line-height: 22px;
	}
}

@media (max-width: 480px) {
	.calc__details-title {
		font-size: 20px;
		line-height: 24px;
	}

	.calc__notes-title {
		font-size: 18px;
		line-height: 22px;
	}
}