/* =========================================================
   BITRIX CALCULATOR
   sitevam.com
   ========================================================= */


/* ---------------------------------------------------------
   ОСНОВА
   --------------------------------------------------------- */

.bxcalc {
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	color: #111;
	box-sizing: border-box;
}

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

.bxcalc button,
.bxcalc input,
.bxcalc textarea,
.bxcalc select {
	font-family: inherit;
}

.bxcalc ul,
.bxcalc ol {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.bxcalc li {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.bxcalc li::before,
.bxcalc li::after {
	content: none !important;
	display: none !important;
}


/* ---------------------------------------------------------
   ОБЩАЯ СЕТКА
   --------------------------------------------------------- */

.bxcalc__row {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	width: 100%;
}

.bxcalc__content {
	flex: 1 1 auto;
	min-width: 0;
}

.bxcalc__sidebar {
	flex: 0 0 320px;
	width: 320px;
}


/* ---------------------------------------------------------
   БЛОК КАЛЬКУЛЯТОРА
   --------------------------------------------------------- */

.bxblock,
.js_bxblock {
	width: 100%;
	margin: 0 0 24px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 16px;
	overflow: hidden;
}


/* ---------------------------------------------------------
   ШАПКА БЛОКА
   --------------------------------------------------------- */

.bxblock__header,
.js_bxblock_bxheader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 18px 22px;
	background: #111;
	color: #fff;
	cursor: pointer;
}

.bxblock__header:hover,
.js_bxblock_bxheader:hover {
	background: #1b1b1b;
}

.bxblock__header-title,
.js_bxblock_title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.bxblock__header-price {
	margin-left: auto;
	white-space: nowrap;
	font-size: 15px;
	color: #fff;
}

.js_bxheader_price {
	font-weight: 700;
	color: #f9e56b;
}


/* ---------------------------------------------------------
   ТЕЛО БЛОКА
   --------------------------------------------------------- */

.bxblock__body,
.js_bxbody {
	padding: 26px 24px 30px;
	background: #fff;
}


/* ---------------------------------------------------------
   ЭТАПЫ
   --------------------------------------------------------- */

.bxstage,
.js_bxstage {
	margin: 0 0 34px;
}

.bxstage:last-child,
.js_bxstage:last-child {
	margin-bottom: 0;
}

.bxtitle,
.js_bxstage_title {
	margin: 0 0 26px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}


/* ---------------------------------------------------------
   ГРУППА ВОПРОСА
   --------------------------------------------------------- */

.bxcontrols,
.js_bxcontrols {
	margin: 0 0 30px;
}

.bxcontrols:last-child,
.js_bxcontrols:last-child {
	margin-bottom: 0;
}

.bxcontrols__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.bxtitle-simple,
.js_bxquestion {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #111;
}


/* ---------------------------------------------------------
   КНОПКИ ОЧИСТИТЬ / ОТМЕТИТЬ ВСЕ
   --------------------------------------------------------- */

.bxclear,
.bxcheck,
.js_bxclear,
.js_bxcheck {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}

.bxclear:hover,
.bxcheck:hover,
.js_bxclear:hover,
.js_bxcheck:hover {
	background: #f9e56b;
	border-color: #f9e56b;
	color: #111;
}


/* ---------------------------------------------------------
   СПИСКИ ВАРИАНТОВ
   --------------------------------------------------------- */

.bxcontrols__body ul,
.js_bxcontrols_body ul {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bxcontrols__body li,
.js_bxcontrols_body li {
	position: relative;
	display: block !important;
	width: 100%;
	margin: 0 0 8px !important;
	padding: 0 !important;
	list-style: none !important;
}

.bxcontrols__body li:last-child,
.js_bxcontrols_body li:last-child {
	margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.bxcalc label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: #111;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}


/* ---------------------------------------------------------
   RADIO / CHECKBOX
   --------------------------------------------------------- */

.bxcalc input[type="radio"],
.bxcalc input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 0;
	padding: 0;
	border: 1px solid #bdbdbd;
	background: #fff;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.bxcalc input[type="radio"] {
	border-radius: 50%;
}

.bxcalc input[type="checkbox"] {
	border-radius: 5px;
}

.bxcalc input[type="radio"]:checked {
	border-color: #111;
	background:
		radial-gradient(
			circle at center,
			#111 0,
			#111 4px,
			#f9e56b 5px,
			#f9e56b 100%
		);
}

.bxcalc input[type="checkbox"]:checked {
	border-color: #111;
	background: #f9e56b;
}

.bxcalc input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 6px;
	display: block !important;
	width: 6px;
	height: 10px;
	border: solid #111;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* ---------------------------------------------------------
   ЦЕНА
   --------------------------------------------------------- */

.bxcalc .bxprice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 26px;
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: 50px;
	background: #f9e56b;
	color: #000;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.bxcalc .bxprice::after {
	content: " ₽";
}


/* ---------------------------------------------------------
   ВЛОЖЕННЫЕ ВАРИАНТЫ
   --------------------------------------------------------- */

.bxparent,
.js_bxparent {
	display: block;
	width: 100%;
}

.bxchild,
.js_bxchild {
	display: block !important;
	margin: 10px 0 16px 29px;
	padding: 0 0 0 18px;
	border-left: 1px solid #e4e4e4;
}

.bxchild ul,
.js_bxchild ul {
	display: block !important;
}

.bxchild li,
.js_bxchild li {
	display: block !important;
	margin: 0 0 8px !important;
}


/* ---------------------------------------------------------
   ИНФОРМАЦИОННЫЕ ПОДСКАЗКИ
   --------------------------------------------------------- */

/*
 * JS переносит исходный текст из .js_bxinfo
 * в атрибут data-tooltip.
 *
 * Никаких SVG внутрь элемента не добавляется.
 */

.bxcalc .js_bxinfo {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	max-width: 18px;
	margin: 0 0 0 8px !important;
	padding: 0 !important;
	vertical-align: middle;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: help;
	overflow: visible !important;
}

/* Значок i */

.bxcalc .js_bxinfo::before {
	content: "i" !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: static !important;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 1px solid #999;
	border-radius: 50%;
	background: #fff;
	color: #777;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
}

/* Всплывающая подсказка */

.bxcalc .js_bxinfo::after {
	content: attr(data-tooltip) !important;
	position: absolute !important;
	left: 50% !important;
	bottom: calc(100% + 10px) !important;
	top: auto !important;
	right: auto !important;
	z-index: 99999;

	display: block !important;
	width: 250px;
	height: auto;
	margin: 0;
	padding: 12px 14px;

	transform: translateX(-50%);

	border: 0;
	border-radius: 8px;

	background: #1c1c1c;
	color: #fff;

	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);

	font-family: inherit;
	font-size: 13px !important;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45 !important;
	text-align: left;
	white-space: normal;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.15s ease,
		visibility 0.15s ease;
}

.bxcalc .js_bxinfo:hover::after {
	opacity: 1;
	visibility: visible;
}


/* На случай если в DOM остались элементы старой версии */

.bxcalc .js_bxinfo .bxinfo-icon,
.bxcalc .js_bxinfo .bxinfo-tooltip {
	display: none !important;
}


/* ---------------------------------------------------------
   ЭЛЕМЕНТЫ С ДОПОЛНИТЕЛЬНЫМ ТЕКСТОМ
   --------------------------------------------------------- */

.bxcalc .js_withsubtext {
	position: relative;
}

.bxcalc .js_withsubtext > label {
	vertical-align: middle;
}

.bxcalc .bxsubtext-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 5px;
	vertical-align: middle;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.bxcalc .bxsubtext-arrow svg {
	display: block;
	width: 6px;
	height: 10px;
	fill: #111;
}

.bxcalc .js_withsubtext.active .bxsubtext-arrow {
	transform: rotate(90deg);
}

.bxcalc .bxsubtext,
.bxcalc .js_subtext {
	display: none;
	margin: 10px 0 12px 29px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f6f6f6;
	color: #555;
	font-size: 14px;
	line-height: 1.55;
}

.bxcalc .js_withsubtext.active .bxsubtext,
.bxcalc .js_withsubtext.active .js_subtext {
	display: block;
}

.bxcalc .bxsubtext b,
.bxcalc .js_subtext b {
	color: #111;
	font-weight: 600;
}


/* ---------------------------------------------------------
   ВАЖНО: LABEL + INFO В ОДНОЙ СТРОКЕ
   --------------------------------------------------------- */

.bxcalc .js_bxcontrols_body li > label {
	vertical-align: middle;
}

.bxcalc .js_bxcontrols_body li > .js_bxinfo {
	vertical-align: middle;
}


/* ---------------------------------------------------------
   ГОТОВЫЕ КОНФИГУРАЦИИ
   --------------------------------------------------------- */

.bxsets,
.js_bxsets {
	margin: 0 0 30px;
	padding: 20px;
	border-radius: 14px;
	background: #f6f6f6;
}

.bxsets label,
.js_bxsets label {
	margin-bottom: 8px;
}


/* ---------------------------------------------------------
   ВЫБОР ШАБЛОНА
   --------------------------------------------------------- */

.bxselect,
.js_bxselect {
	position: relative;
	width: 100%;
}

.bxselect__header,
.js_bxselect_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
	color: #111;
	cursor: pointer;
}

.bxselect__body,
.js_bxselect_body {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 100;
	display: none;
	width: 100%;
	padding: 6px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bxselect__body li,
.js_bxselect_body li {
	padding: 9px 12px !important;
	border-radius: 7px;
	cursor: pointer;
}

.bxselect__body li:hover,
.js_bxselect_body li:hover {
	background: #f9e56b;
}


/* ---------------------------------------------------------
   КАРТОЧКИ ШАБЛОНОВ
   --------------------------------------------------------- */

.bxcards,
.js_bxcards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.bxcard,
.js_bxcard {
	overflow: hidden;
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	background: #fff;
}

.bxcard img,
.js_bxcard img {
	display: block;
	width: 100%;
	height: auto;
}

.js_bxcard_name {
	font-weight: 700;
}

.js_bxbtn_select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid #111;
	border-radius: 50px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.js_bxbtn_select:hover {
	border-color: #f9e56b;
	background: #f9e56b;
	color: #111;
}


/* ---------------------------------------------------------
   ИТОГ КАЛЬКУЛЯТОРА
   --------------------------------------------------------- */

.bxcalc-total,
.bxcalc__total {
	padding: 24px;
	border-radius: 16px;
	background: #111;
	color: #fff;
}

.js_bxcalc_price {
	color: #f9e56b;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}


/* ---------------------------------------------------------
   КНОПКИ
   --------------------------------------------------------- */

.bxcalc .js_bxcontacts_open,
.bxcalc button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 22px;
	border: 1px solid #111;
	border-radius: 50px;
	background: #111;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.bxcalc .js_bxcontacts_open:hover,
.bxcalc button[type="submit"]:hover {
	border-color: #f9e56b;
	background: #f9e56b;
	color: #111;
}

.bxcalc button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}


/* ---------------------------------------------------------
   КОНТАКТНАЯ ФОРМА
   --------------------------------------------------------- */

.bxcalc .js_bxcontacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bxcalc .js_bxcontacts input[type="text"],
.bxcalc .js_bxcontacts input[type="email"],
.bxcalc .js_bxcontacts input[type="tel"] {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #ddd;
	border-radius: 10px;
	outline: none;
	background: #fff;
	color: #111;
	font-size: 15px;
	box-shadow: none;
}

.bxcalc .js_bxcontacts input:focus {
	border-color: #111;
}

.bxcalc .js_bxcalc_output {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   МОБИЛЬНАЯ ВЕРСИЯ
   --------------------------------------------------------- */

@media (max-width: 991px) {

	.bxcalc__row {
		display: block;
	}

	.bxcalc__sidebar {
		width: 100%;
		margin-top: 24px;
	}

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

}


@media (max-width: 767px) {

	.bxcalc {
		font-size: 15px;
	}

	.bxblock,
	.js_bxblock {
		border-radius: 12px;
	}

	.bxblock__header,
	.js_bxblock_bxheader {
		padding: 15px 16px;
	}

	.bxblock__header-title,
	.js_bxblock_title {
		font-size: 16px;
	}

	.bxblock__body,
	.js_bxbody {
		padding: 20px 16px 24px;
	}

	.bxtitle,
	.js_bxstage_title {
		margin-bottom: 22px;
		font-size: 18px;
	}

	.bxcontrols,
	.js_bxcontrols {
		margin-bottom: 26px;
	}

	.bxcontrols__header {
		gap: 8px;
	}

	.bxtitle-simple,
	.js_bxquestion {
		font-size: 15px;
	}

	.bxcalc label {
		font-size: 15px;
	}

	.bxcalc .bxprice {
		min-height: 24px;
		padding: 3px 8px;
		font-size: 13px;
	}

	.bxchild,
	.js_bxchild {
		margin-left: 10px;
		padding-left: 14px;
	}

	.bxcards,
	.js_bxcards {
		grid-template-columns: 1fr;
	}

	/*
	 * На телефоне tooltip выравниваем от левого края,
	 * чтобы он не вылезал за экран.
	 */

	.bxcalc .js_bxinfo::after {
		left: auto !important;
		right: -15px !important;
		width: 220px;
		transform: none;
	}

	.js_bxcalc_price {
		font-size: 26px;
	}

}


@media (max-width: 480px) {

	.bxblock__header,
	.js_bxblock_bxheader {
		gap: 10px;
	}

	.bxblock__header-price {
		font-size: 13px;
	}

	.bxcalc input[type="radio"],
	.bxcalc input[type="checkbox"] {
		width: 19px;
		height: 19px;
		min-width: 19px;
	}

	.bxcalc .js_bxinfo {
		margin-left: 5px !important;
	}

	.bxcalc .bxprice {
		margin-left: 4px;
	}

}
/* =========================================================
   ПРАВЫЙ САЙДБАР КАЛЬКУЛЯТОРА
   ========================================================= */

.bxcalc .bxcalc__sidebar {
	flex: 0 0 320px;
	width: 320px;
	min-width: 320px;
}

.bxcalc .bxsidebar {
	width: 100%;
	background: #111;
	border-radius: 18px;
	overflow: hidden;
}

.bxcalc .bxsidebar__inner {
	width: 100%;
	padding: 26px 24px;
}


/* Готовые конфигурации */

.bxcalc .bxsidebar__sets {
	margin: 0 0 22px;
}

.bxcalc .bxsidebar__sets .bxtitle-simple,
.bxcalc .bxsidebar__sets .js_bxquestion {
	margin: 0 0 16px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}


/* Список конфигураций */

.bxcalc .bxsidebar .bxsets,
.bxcalc .bxsidebar .js_bxsets {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.bxcalc .bxsidebar .bxsets li,
.bxcalc .bxsidebar .js_bxsets li {
	display: block !important;
	width: 100%;
	margin: 0 0 11px !important;
	padding: 0 !important;
}

.bxcalc .bxsidebar .bxsets li:last-child,
.bxcalc .bxsidebar .js_bxsets li:last-child {
	margin-bottom: 0 !important;
}

.bxcalc .bxsidebar .bxsets label,
.bxcalc .bxsidebar .js_bxsets label {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	color: #fff;
	font-size: 15px;
	line-height: 1.35;
}


/* Radio в готовых конфигурациях */

.bxcalc .bxsidebar input[type="radio"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 1px solid #777;
	background: #fff;
}

.bxcalc .bxsidebar input[type="radio"]:checked {
	border-color: #f9e56b;
	background:
		radial-gradient(
			circle at center,
			#111 0,
			#111 4px,
			#f9e56b 5px,
			#f9e56b 100%
		);
}


/* Очистить все */

.bxcalc .bxsidebar__clear {
	margin: 22px 0;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.bxcalc .bxsidebar__button-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid #f9e56b;
	border-radius: 50px;
	background: transparent;
	color: #f9e56b;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: 0.2s ease;
}

.bxcalc .bxsidebar__button-clear:hover {
	background: #f9e56b;
	color: #111;
}


/* Нижняя часть */

.bxcalc .bxsidebar__bottom {
	display: block;
	width: 100%;
}

.bxcalc .bxsidebar__price-wrapper {
	margin: 0 0 20px;
}

.bxcalc .bxsidebar__price-title {
	margin: 0 0 5px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

.bxcalc .bxsidebar__price {
	color: #f9e56b;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
}


/* ₽ после итоговой стоимости */

.bxcalc .bxsidebar__price::after {
	content: " ₽";
}


/* Кнопка отправки */

.bxcalc .bxsidebar__button-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid #f9e56b;
	border-radius: 50px;
	background: #f9e56b;
	color: #111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: 0.2s ease;
}

.bxcalc .bxsidebar__button-send:hover {
	background: #fff;
	border-color: #fff;
	color: #111;
}


/* Не даем глобальным стилям сайта ломать сайдбар */

.bxcalc .bxsidebar ul,
.bxcalc .bxsidebar li {
	list-style: none !important;
}

.bxcalc .bxsidebar li::before,
.bxcalc .bxsidebar li::after {
	content: none !important;
	display: none !important;
}


/* Планшет */

@media (max-width: 991px) {

	.bxcalc .bxcalc__sidebar {
		width: 100%;
		min-width: 0;
		margin-top: 25px;
	}

	.bxcalc .bxsidebar {
		border-radius: 16px;
	}

}


/* Телефон */

@media (max-width: 767px) {

	.bxcalc .bxsidebar__inner {
		padding: 22px 18px;
	}

	.bxcalc .bxsidebar__price {
		font-size: 30px;
	}

}
/* =========================================================
   МОДАЛЬНОЕ ОКНО ВЫБОРА ШАБЛОНА
   ========================================================= */

#designModal {
	font-family: inherit;
}

#designModal .hystmodal__wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

#designModal .hystmodal__window {
	position: relative;
	width: min(1180px, calc(100vw - 60px));
	max-height: calc(100vh - 60px);
	margin: 0;
	padding: 0;
	overflow: auto;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}


/* Крестик */

#designModal .hystmodal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 30;

	width: 42px;
	height: 42px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: #111;

	font-size: 0;
	cursor: pointer;
}

#designModal .hystmodal__close::before,
#designModal .hystmodal__close::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 11px;

	width: 20px;
	height: 2px;

	background: #f9e56b;
}

#designModal .hystmodal__close::before {
	transform: rotate(45deg);
}

#designModal .hystmodal__close::after {
	transform: rotate(-45deg);
}

#designModal .hystmodal__close:hover {
	background: #f9e56b;
}

#designModal .hystmodal__close:hover::before,
#designModal .hystmodal__close:hover::after {
	background: #111;
}


/* Внутренний контейнер */

#designModal .bxdesign {
	width: 100%;
	padding: 34px;
}

#designModal .bxdesign__header {
	margin: 0 60px 28px 0;

	color: #111;

	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
}


/* Сетка карточек */

#designModal .bxdesign__row,
#designModal .js_bxcards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;

	width: 100%;
}


/* Карточка */

#designModal .bxcard,
#designModal .js_bxcard {
	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	border: 1px solid #e4e4e4;
	border-radius: 16px;

	background: #fff;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

#designModal .bxcard:hover,
#designModal .js_bxcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}


/* Изображение */

#designModal .bxcard__image {
	position: relative;

	width: 100%;
	aspect-ratio: 16 / 10;

	overflow: hidden;

	background: #f2f2f2;
}

#designModal .bxcard__image img {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;

	object-fit: cover;
	object-position: top center;
}


/* Название */

#designModal .bxcard__name {
	padding: 18px 18px 6px;

	color: #111;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}


/* Цена */

#designModal .bxcard__price {
	padding: 0 18px 14px;

	color: #111;

	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

#designModal .bxcard__price::after {
	content: " ₽";
}


/* Кнопки */

#designModal .bxcard__buttons {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-top: auto;
	padding: 0 18px 18px;
}

#designModal .bxbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 9px 16px;

	border-radius: 50px;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none;
	cursor: pointer;

	transition: 0.2s ease;
}


/* Онлайн демо */

#designModal .bxbutton_demo {
	border: 1px solid #111;
	background: #fff;
	color: #111;
}

#designModal .bxbutton_demo:hover {
	border-color: #f9e56b;
	background: #f9e56b;
	color: #111;
}


/* Выбрать */

#designModal .bxbutton_select {
	border: 1px solid #111;
	background: #111;
	color: #fff;
}

#designModal .bxbutton_select:hover {
	border-color: #f9e56b;
	background: #f9e56b;
	color: #111;
}


/* =========================================================
   АДАПТИВ МОДАЛКИ
   ========================================================= */

@media (max-width: 1100px) {

	#designModal .bxdesign__row,
	#designModal .js_bxcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 767px) {

	#designModal .hystmodal__wrap {
		padding: 15px;
	}

	#designModal .hystmodal__window {
		width: calc(100vw - 30px);
		max-height: calc(100vh - 30px);
		border-radius: 14px;
	}

	#designModal .bxdesign {
		padding: 24px 16px;
	}

	#designModal .bxdesign__header {
		margin-right: 45px;
		margin-bottom: 20px;

		font-size: 22px;
	}

	#designModal .hystmodal__close {
		top: 12px;
		right: 12px;

		width: 36px;
		height: 36px;
	}

	#designModal .hystmodal__close::before,
	#designModal .hystmodal__close::after {
		top: 17px;
		left: 9px;

		width: 18px;
	}

	#designModal .bxdesign__row,
	#designModal .js_bxcards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	#designModal .bxcard__buttons {
		flex-direction: column;
	}

	#designModal .bxbutton {
		width: 100%;
	}

}
/* =========================================================
   ИСПРАВЛЕНИЕ ВЛОЖЕННЫХ ВАРИАНТОВ
   ========================================================= */

.bxcalc .js_bxparent {
	display: block !important;
	width: 100% !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.bxcalc .js_bxparent > label {
	display: inline-flex !important;
	align-items: center !important;
}


/* Дочерний список */

.bxcalc .js_bxparent > .js_bxchild {
	display: block !important;
	width: auto !important;

	margin: 10px 0 16px 30px !important;
	padding: 0 0 0 18px !important;

	border-left: 1px solid #e1e1e1 !important;

	list-style: none !important;
}


/* Не даем общим стилям сайта сбивать UL */

.bxcalc .js_bxparent > .js_bxchild {
	flex: none !important;
	grid-template-columns: none !important;
}


/* Пункты внутри дочернего списка */

.bxcalc .js_bxparent > .js_bxchild > li {
	display: block !important;
	width: 100% !important;

	margin: 0 0 8px !important;
	padding: 0 !important;

	list-style: none !important;
}

.bxcalc .js_bxparent > .js_bxchild > li:last-child {
	margin-bottom: 0 !important;
}


/* Убираем маркеры основного CSS сайта */

.bxcalc .js_bxparent > .js_bxchild > li::before,
.bxcalc .js_bxparent > .js_bxchild > li::after {
	content: none !important;
	display: none !important;
}


/* Label дочернего пункта */

.bxcalc .js_bxparent > .js_bxchild > li > label {
	display: inline-flex !important;
	align-items: center !important;

	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;

	font-size: 16px;
	line-height: 1.4;
}


/* Цена не должна ломать строку */

.bxcalc .js_bxparent > .js_bxchild .bxprice {
	display: inline-flex !important;
	flex: 0 0 auto !important;

	margin-left: 8px !important;

	white-space: nowrap !important;
}


/* Мобильная версия */

@media (max-width: 767px) {

	.bxcalc .js_bxparent > .js_bxchild {
		margin-left: 20px !important;
		padding-left: 14px !important;
	}

}
/* =========================================================
   ФОРМА ЗАЯВКИ
   ========================================================= */

#contactsModal .hystmodal__wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

#contactsModal .hystmodal__window {
	position: relative;
	width: min(760px, calc(100vw - 40px));
	margin: 0;
	padding: 0;
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
}

#contactsModal .bxcontacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 38px;
}

#contactsModal .bxcontacts__title {
	margin: 0 50px 8px 0;
	color: #111;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
}

#contactsModal .bxcontacts-input {
	width: 100%;
}

#contactsModal .bxcontacts-input input {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 22px;
	border: 1px solid #cfcfcf;
	border-radius: 50px;
	background: #fff;
	color: #111;
	font-size: 16px;
	line-height: 1;
	outline: none;
	box-shadow: none;
}

#contactsModal .bxcontacts-input input::placeholder {
	color: #777;
}

#contactsModal .bxcontacts-input input:focus {
	border-color: #111;
}


/* Согласия */

#contactsModal .bxcontacts-consents {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}

#contactsModal .bxcontacts-consent {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

#contactsModal .bxcontacts-consent input[type="checkbox"] {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 1px 0 0;
	border: 1px solid #111;
	border-radius: 4px;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

#contactsModal .bxcontacts-consent input[type="checkbox"]:checked {
	background: #f9e56b;
	border-color: #111;
}

#contactsModal .bxcontacts-consent input[type="checkbox"] {
	position: relative;
}

#contactsModal .bxcontacts-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;

	display: block;

	width: 6px;
	height: 10px;

	margin: 0;

	border: solid #111;
	border-width: 0 2px 2px 0;

	transform: rotate(45deg);
}
#contactsModal .bxcontacts-consent > span {
	display: block;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

#contactsModal .bxcontacts-consent a {
	color: #111;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #f9e56b;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}


/* Кнопка */

#contactsModal .bxbutton-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	margin-top: 8px;
	padding: 12px 22px;
	border: 1px solid #111;
	border-radius: 50px;
	background: #111;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s ease;
}

#contactsModal .bxbutton-send:hover {
	background: #f9e56b;
	border-color: #f9e56b;
	color: #111;
}


/* Крестик */

#contactsModal .hystmodal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 10;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #111;
	font-size: 0;
	cursor: pointer;
}

#contactsModal .hystmodal__close::before,
#contactsModal .hystmodal__close::after {
	content: "";
	position: absolute;
	top: 19px;
	left: 10px;
	width: 20px;
	height: 2px;
	background: #f9e56b;
}

#contactsModal .hystmodal__close::before {
	transform: rotate(45deg);
}

#contactsModal .hystmodal__close::after {
	transform: rotate(-45deg);
}


/* Мобильная версия */

@media (max-width: 767px) {

	#contactsModal .hystmodal__wrap {
		padding: 15px;
	}

	#contactsModal .hystmodal__window {
		width: calc(100vw - 30px);
		border-radius: 14px;
	}

	#contactsModal .bxcontacts {
		padding: 28px 18px 22px;
	}

	#contactsModal .bxcontacts__title {
		font-size: 23px;
	}

	#contactsModal .bxcontacts-input input {
		height: 52px;
		padding: 0 18px;
		font-size: 15px;
	}

	#contactsModal .bxcontacts-consent > span {
		font-size: 12px;
	}

}
#contactsModal .bxbutton-send:disabled,
#contactsModal .bxbutton-send.disabled {
	background: #d9d9d9;
	border-color: #d9d9d9;
	color: #8d8d8d;
	cursor: not-allowed;
	opacity: 1;
}

#contactsModal .bxbutton-send:disabled:hover,
#contactsModal .bxbutton-send.disabled:hover {
	background: #d9d9d9;
	border-color: #d9d9d9;
	color: #8d8d8d;
}
.bxcalc .bxlink {
    margin-top: 14px;
}

.bxcalc .bxlink a {
    display: inline-block;
}
/* Шапки разделов калькулятора */

.bxcalc .bxblock__header,
.bxcalc .js_bxblock_bxheader {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto 42px;
	align-items: center;
	gap: 18px;
	width: 100%;
}

/* Название раздела */
.bxcalc .bxheader__title,
.bxcalc .js_bxblock_title {
	min-width: 0;
	text-align: left;
}

/* Цена */
.bxcalc .bxheader__price {
	margin: 0 !important;
	text-align: right;
	white-space: nowrap;
}

/* Кнопка справа */
.bxcalc .bxheader__button,
.bxcalc .js_bxheader_button {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Стрелка */
.bxcalc .bxheader__button::before,
.bxcalc .js_bxheader_button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #f9e56b;
	border-bottom: 2px solid #f9e56b;
	transform: translate(-50%, -65%) rotate(45deg);
}