/* Скрытые шаги: свои правила задают display (grid у контактов, flex у
   кнопок), а авторский display перебивает браузерное [hidden]. Без этого
   последний шаг и кнопка отправки видны на всех шагах сразу. */
.calc [hidden] {
	display: none !important;
}

/* Блок «Калькулятор расчёта» на главной.
   Разметка: templates/calculator.html.twig, поля — webform `calculator`,
   переключение шагов — js/calculator.js. */

.calc__grid {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 50px -28px rgba(17, 32, 44, 0.45);
}

/* --- Левая колонка: фотография из каталога --- */
.calc__aside {
	position: relative;
	min-height: 540px;
	background: #11202c;
}

/* Отдельный слой под фотографию: её подменяет js/calculator.js под выбор
   на первом шаге, а плавность даёт переход по opacity. */
.calc__aside-photo {
	position: absolute;
	inset: 0;
	background: url(/sites/default/files/category/photo_2026-03-09_21-00-38.jpg) center / cover no-repeat;
	transition: opacity 0.25s ease;
}

.calc__aside-photo.is-swapping {
	opacity: 0;
}

.calc__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 32, 44, 0.1) 35%, rgba(17, 32, 44, 0.88) 100%);
}

.calc__aside-text {
	position: absolute;
	z-index: 1;
	right: 34px;
	bottom: 32px;
	left: 34px;
	color: #ffffff;
}

.calc__aside-title {
	margin-bottom: 10px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.calc__aside-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Правая колонка: панель с вопросом --- */
.calc__panel {
	display: flex;
	flex-direction: column;
	padding: 34px 40px 38px;
	background: #11202c;
	color: #ffffff;
}

.calc__form,
.calc__panel form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* --- Трекер шагов (строит js/calculator.js) --- */
.calc__steps {
	display: flex;
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.calc__step {
	flex: 1 1 0;
	min-width: 0;
}

.calc__step-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	transition: background 0.25s;
}

.calc__step.is-active .calc__step-bar,
.calc__step.is-done .calc__step-bar {
	background: #f79521;
}

.calc__step-title {
	display: block;
	padding-top: 8px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.calc__step.is-active .calc__step-title {
	color: #ffffff;
}

/* --- Вопрос --- */
.calc__panel fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.calc__panel legend,
.calc__panel legend span,
.calc__panel .fieldset-legend,
.calc__question {
	display: block;
	width: 100%;
	margin-bottom: 18px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	text-transform: none;
}

.calc__panel legend .form-required::after {
	display: none;
}

.calc__note {
	max-width: 34em;
	margin: -8px 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

/* --- Варианты ответа --- */
.calc__panel .form-radios {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.calc__panel .form-radios .js-form-item {
	margin: 0;
}

.calc__panel .form-radios input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.calc__panel .form-radios label {
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 58px;
	padding: 12px 16px;
	border: 2px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 14px;
	line-height: 1.3;
	color: #ffffff;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	/* Длинные подписи («Мультифактурные жалюзи») переносим, а не упираем
	   в края карточки: иначе длинное слово вылезает за границу. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.calc__panel .form-radios label:hover {
	border-color: rgba(247, 149, 33, 0.75);
}

.calc__panel .form-radios input[type="radio"]:checked + label {
	border-color: #f79521;
	background: rgba(247, 149, 33, 0.16);
	font-weight: 600;
}

.calc__panel .form-radios input[type="radio"]:focus-visible + label {
	outline: 2px solid #f79521;
	outline-offset: 2px;
}

/* --- Первый шаг: варианты с фотографиями изделий.
       Снимки берём из терминов каталога, поэтому в калькуляторе те же
       изображения, что и в разделах сайта. Привязка по value, а не по id:
       значения задаём мы, id генерирует Drupal. --- */
.calc__panel .form-item-product label {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-height: 0;
	padding: 8px 10px 12px;
	font-size: 13px;
	text-align: center;
}

.calc__panel .form-item-product label::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	background: #ffffff center / cover no-repeat;
}

.calc__panel input[value="zebra"] + label::before {
	background-image: url(/sites/default/files/category/photo_2026-03-09_21-10-04.jpg);
}

.calc__panel input[value="blackout"] + label::before {
	background-image: url(/sites/default/files/category/rulonnye-shtory-blehkaut.jpg);
}

.calc__panel input[value="double"] + label::before {
	background-image: url("/sites/default/files/category/photo_2026-03-10_10-10-59 (4)_0.jpg");
}

.calc__panel input[value="vertical"] + label::before {
	background-image: url(/sites/default/files/category/photo_2026-03-10_11-44-45.jpg);
}

.calc__panel input[value="multi"] + label::before {
	background-image: url(/sites/default/files/category/photo_2026-03-10_08-38-30.jpg);
}

.calc__panel input[value="wood"] + label::before {
	background-image: url("/sites/default/files/category/дерево 2.jpg");
}

.calc__panel input[value="vals"] + label::before {
	background-image: url(/sites/default/files/category/photo_2026-03-12_10-39-55_1.jpg);
}

.calc__panel input[value="mosquito"] + label::before {
	background-image: url(/sites/default/files/category/moskitnaya-setka.jpg);
}

/* --- Последний шаг: контакты --- */
.calc__contacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	max-width: 620px;
}

.calc__contacts .js-form-item {
	margin: 0;
}

.calc__contacts .webform-markup,
.calc__contacts .js-form-item-consent {
	grid-column: 1 / -1;
}

.calc__contacts .js-form-item-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.calc__contacts label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

.calc__contacts input[type="text"],
.calc__contacts input[type="tel"] {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	border: 2px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 16px;
	color: #ffffff;
}

.calc__contacts input[type="text"]:focus,
.calc__contacts input[type="tel"]:focus {
	border-color: #f79521;
	outline: none;
}

.calc__contacts .js-form-item-consent label {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.55);
}

/* Тема красит подпись отмеченного чекбокса в тёмный #11202c — на светлых
   формах сайта это акцент, а на тёмной панели калькулятора текст пропадал.
   Отмеченный вариант делаем, наоборот, ярче обычного. */
.calc__contacts .js-form-item-consent input:checked ~ label {
	color: rgba(255, 255, 255, 0.85);
}

.calc__contacts input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #f79521;
}

/* Шаги в трекере кликабельны — можно вернуться к любому вопросу */
.calc__step {
	cursor: pointer;
}

/* --- Навигация по шагам --- */
.calc__panel .form-actions {
	display: flex;
	gap: 14px;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.calc__nav,
.calc__panel .webform-button--submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	min-width: 168px;
	padding: 8px 26px;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: break-word;
	border: 2px solid #f79521;
	border-radius: 0 0 20px 0;
	background: #f79521;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.calc__nav--prev {
	order: -1;
	min-width: 120px;
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
}

.calc__nav--prev:hover {
	border-color: #ffffff;
}

.calc__nav--next:hover,
.calc__panel .webform-button--submit:hover {
	border-color: #f76121;
	background: #f76121;
}

.calc__nav:focus-visible,
.calc__panel .webform-button--submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* --- Подтверждение отправки: дефолтная плашка Drupal на тёмной панели
       выглядит чужой, приводим к палитре блока --- */
.calc__panel .messages,
.calc__panel .messages--status {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid rgba(111, 191, 140, 0.45);
	border-left: 3px solid #6fbf8c;
	border-radius: 8px;
	background: rgba(111, 191, 140, 0.12);
	box-shadow: none;
	font-size: 15px;
	line-height: 1.5;
	color: #d8f0e2;
}

.calc__panel .messages--status a {
	color: #ffffff;
}

@media (max-width: 1100px) {
	.calc__grid {
		grid-template-columns: 1fr;
	}

	.calc__aside {
		min-height: 240px;
	}

	.calc__panel .form-radios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.calc__panel {
		padding: 26px 20px 30px;
	}

	.calc__panel legend,
	.calc__panel legend span,
	.calc__question {
		font-size: 21px;
	}

	.calc__panel .form-radios {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.calc__step-title {
		display: none;
	}

	.calc__contacts {
		grid-template-columns: 1fr;
	}

	.calc__nav,
	.calc__panel .webform-button--submit {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 14px;
	}
}

/* Заголовок последнего шага — на всю ширину сетки. Webform заворачивает
   markup в свой div, поэтому тянуть надо обёртку, а не сам заголовок. */
.calc__contacts .js-form-type-webform-markup {
	grid-column: 1 / -1;
}

/* Скрытое поле источника — тоже элемент сетки и занимало клетку,
   из-за чего телефон уезжал в другую колонку. */
.calc__contacts input[type="hidden"] {
	display: none;
}

/* «Окна» и «Сроки» — по четыре варианта, выкладываем плиткой 2×2.
   У Webform все группы радио с одинаковыми классами, различает их только id,
   а он строится из ключа элемента, то есть предсказуем. */
#edit-quantity,
#edit-srok {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 560px;
}

#edit-quantity label,
#edit-srok label {
	justify-content: center;
	min-height: 78px;
	font-size: 16px;
	text-align: center;
}

/* На телефоне блок вырастал до 1300px при экране 667px: восемь карточек с
   крупным фото в две колонки занимали 696px. Уплотняем — миниатюра уезжает
   сбоку от подписи, а не сверху, и весь калькулятор помещается в экран. */
@media (max-width: 700px) {
	.calc h2 {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.2;
	}

	.calc__aside {
		min-height: 150px;
	}

	.calc__aside-title {
		font-size: 20px;
	}

	.calc__aside-text {
		right: 20px;
		bottom: 18px;
		left: 20px;
	}

	.calc__aside-text p {
		font-size: 13px;
	}

	.calc__panel {
		padding: 20px 16px 24px;
	}

	.calc__steps {
		margin-bottom: 18px;
	}

	.calc__panel legend,
	.calc__panel legend span,
	.calc__question {
		margin-bottom: 14px;
		font-size: 19px;
	}

	.calc__panel .form-radios {
		gap: 10px;
	}

	.calc__panel .form-item-product label {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		min-height: 60px;
		padding: 8px 10px;
		font-size: 12.5px;
		text-align: left;
	}

	.calc__panel .form-item-product label::before {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		aspect-ratio: auto;
		border-radius: 6px;
	}

	#edit-quantity label,
	#edit-srok label {
		min-height: 62px;
		font-size: 14px;
	}

	.calc__panel .form-actions {
		margin-top: 18px;
		padding-top: 16px;
	}
}

/* Миниатюра рядом с подписью оставляла тексту ~95px, и длинные названия
   разъезжались на четыре строки. На телефоне убираем её совсем: выбранное
   изделие всё равно видно на большом фото сверху, оно там крупнее и понятнее. */
@media (max-width: 700px) {
	.calc__panel .form-item-product label {
		min-height: 56px;
		padding: 10px 12px;
		font-size: 13px;
	}

	.calc__panel .form-item-product label::before {
		display: none;
	}
}

/* Тема ставит перенос по любому символу, и названия рвались посреди слова:
   «Мультифактурны / е жалюзи». Возвращаем перенос по словам. Автодефисы
   не включаем: в русском они дают «В течение меся-ца». Слова помещаются
   в карточку целиком, разрыв остаётся только как крайняя мера. */
.calc__panel .form-radios label {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: manual;
}

/* На телефоне фото всего 150px, и подпись попадала на светлые участки кадра.
   Затемняем сильнее — на узкой полосе градиент не успевает набрать плотность. */
@media (max-width: 700px) {
	.calc__aside::after {
		background: linear-gradient(180deg, rgba(17, 32, 44, 0.45) 0%, rgba(17, 32, 44, 0.9) 100%);
	}
}

/* Самые длинные названия — «Мультифактурные» (135px) и «Функциональный»
   (131px) — не помещались во внутренние 123px карточки, поэтому и рвались.
   Сужаем поля и шрифт ровно настолько, чтобы слово вставало целиком. */
@media (max-width: 700px) {
	.calc__panel .form-item-product label {
		padding: 10px 8px;
		font-size: 12px;
	}
}

/* Карточка изделия на десктопе — 134px, внутрь остаётся 114px, а самое
   длинное слово «Мультифактурные» занимает 126px, поэтому рвалось посреди.
   Селектор точнее, чем базовый: правило темы перебивало отступы. */
.calc__panel .form-radios .form-item-product label {
	padding: 8px 6px 12px;
	font-size: 12px;
}

/* Якорь из первого экрана: не заводим заголовок блока под фиксированную шапку.
   Переменная --header-h здесь не подходит — она про высоту шапки наверху
   страницы (133/127px). При прокрутке шапка уезжает вверх и перекрывает
   всего 47px на десктопе и 42px на мобильном, поэтому отступ фиксированный:
   иначе над заголовком зияет сотня пустых пикселей. */
.calc {
	scroll-margin-top: 62px;
}

/* ---------- Модальное окно после отправки ---------- */
.calc-modal {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}

.calc-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.calc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 32, 44, 0.55);
}

.calc-modal__box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 34px 32px 30px;
	border-radius: 0 0 20px 0;
	background: #ffffff;
	box-shadow: 0 24px 60px -30px rgba(17, 32, 44, 0.6);
	text-align: center;
	transform: translateY(12px);
	transition: transform 0.25s;
}

.calc-modal.is-open .calc-modal__box {
	transform: translateY(0);
}

.calc-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #b4aea5;
	cursor: pointer;
	transition: color 0.2s;
}

.calc-modal__close:hover {
	color: #11202c;
}

.calc-modal__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #f79521;
	color: #ffffff;
}

.calc-modal__title {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 700;
	color: #11202c;
}

.calc-modal__text {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.55;
	color: #7a7a7a;
}

.calc-modal__ok {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 0 0 20px 0;
	background: #f79521;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s;
}

.calc-modal__ok:hover {
	background: #f76121;
}

@media (max-width: 480px) {
	.calc-modal__box {
		padding: 30px 22px 26px;
	}
}

/* Ошибки проверки внутри тёмной панели. Базовые стили темы рисуют любое
   сообщение зелёным, и отказ формы выглядел как успешная отправка. */
.calc__panel .messages--error {
	margin-bottom: 22px;
	padding: 14px 16px;
	border: 1px solid rgba(247, 97, 33, 0.55);
	border-left: 3px solid #f76121;
	border-radius: 8px;
	background: rgba(247, 97, 33, 0.12);
	font-size: 14px;
	line-height: 1.5;
	color: #ffd9c6;
	box-shadow: none;
}

.calc__panel .messages--error a {
	color: #ffd9c6;
}

.calc__panel .messages--error .visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
}