/* Start:/local/components/kochnev/paint.calculator/templates/.default/style.css?17531679924605*/
.s-paint-calculator {
	margin-bottom: clamp(50px, 4.5vw, 84px);
}

.calculator-form {
	margin-bottom: 30px;
}

.calculator-form__grid {
	display: grid;
	grid-template-columns: minmax(330px, 1fr) minmax(180px, 1fr) minmax(130px, 1fr) minmax(180px, 1fr) auto;
	gap: 20px;
	margin-bottom: 30px;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-label {
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--gray-80);
	font-size: 14px;
}

.form-input,
.form-select {
	padding: 12px 16px;
	border: 2px solid var(--gray-30);
	border-radius: var(--r2);
	font-size: 16px;
	transition: var(--tr25);
	background: var(--white);
}

.form-input:focus,
.form-select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: var(--box-shadow-focus);
}

.form-input::placeholder {
	color: var(--gray-50);
}

.calculator-form__actions {
	display: flex;
	justify-content: center;
}

.calculator-results {
	background: var(--white);
	/* border-radius: 0 0 var(--r3) var(--r3); */
	/* box-shadow: var(--box-shadow-1); */
	overflow: hidden;
}

.results-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	gap: 16px;
}

.loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--gray-30);
	border-top: 3px solid var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.results-table-wrapper {
	overflow-x: auto;
	/* padding: 0 30px; */
	/* padding-top: 30px; */
}

.results-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.results-table th,
.results-table td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid var(--gray-30);
	white-space: nowrap;
}

.results-table th {
	background: var(--gray-10);
	font-weight: 600;
	color: var(--gray-80);
	position: sticky;
	top: 0;
	z-index: 1;
}

.results-table tr:hover {
	background: var(--gray-10);
}

.package-select {
	padding: 6px 8px;
	border: 1px solid var(--gray-40);
	border-radius: var(--r1);
	font-size: 13px;
	background: var(--white);
	min-width: 80px;
}

.package-select:focus {
	outline: none;
	border-color: var(--primary);
}

.results-summary {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px;
	background: var(--gray-10);
	border-top: 1px solid var(--gray-30);
}

.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.summary-item {
	display: flex;
	flex-direction: column;
	padding: 16px 20px;
	background: var(--white);
	border-radius: var(--r2);
	box-shadow: var(--box-shadow-2);
}

.summary-title {
	color: var(--gray-80);
	font-weight: 600;
	margin-bottom: 10px;
}

.summary-label {
	/* font-weight: 600; */
	color: var(--gray-80);
}

.summary-value {
	font-weight: 700;
	font-size: 18px;
	color: var(--primary);
}

.price-retail {
	color: var(--primary);
}

.price-dealer {
	color: var(--green);
}

.results-table-legend {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	margin-bottom: 20px;
}

.table-legend-l {
	color: var(--gray-80);
}

.table-legend__buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.calculator-modal-content.fancybox__content select {
	pointer-events: none;
	opacity: .6;
}

.calculator-modal-content.fancybox__content #exportExcel {
	display: none;
}

.summary-title-note {
	font-size: 14px;
	font-weight: 400;
	color: var(--gray-60);
}

.price-per-kg-column {
	white-space: nowrap;
}

.summary-difference {
	font-size: 14px;
}

.summary-difference.positive {
	color: var(--green);
}
.summary-difference.negative {
	color: var(--red);
}

/* Responsive */
@media (max-width: 768px) {
	.calculator-form {
		padding: 20px;
	}

	.calculator-form__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.results-table-wrapper {
		padding: 20px;
	}

	.results-table {
		font-size: 13px;
	}

	.results-table th,
	.results-table td {
		padding: 8px 6px;
	}

	.results-summary {
		padding: 20px;
	}

	.summary-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.summary-item {
		padding: 12px 16px;
	}
}

/* Дополнительные стили для ошибок */
.form-error {
	border-color: var(--red) !important;
}

.error-message {
	color: var(--red);
	font-size: 12px;
	margin-top: 4px;
}

.alert {
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: var(--r2);
	font-size: 14px;
}

.alert-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}

.alert-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}
/* End */
/* /local/components/kochnev/paint.calculator/templates/.default/style.css?17531679924605 */