/* Подсказки по строительным терминам в конфигураторе. См. terms.js */

/* термин — серый пунктир под словом + «?» в кружке (иконка под пунктир не попадает);
   «?» оранжевый в выбранной комплектации и серый в остальных — см. ниже */
.pd-term {
	--pd-q-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M6.44 4.54c.43-.354.994-.565 1.56-.565 1.217 0 2.34.82 2.34 2.14 0 .377-.078.745-.298 1.1-.208.339-.513.614-.875.867-.217.153-.325.257-.379.328-.038.052-.038.07-.038.089a.75.75 0 0 1-1.5 0c0-.794.544-1.286 1.057-1.645.28-.196.4-.332.458-.426a.54.54 0 0 0 .075-.312c0-.3-.244-.641-.84-.641a1 1 0 0 0-.608.223c-.167.138-.231.287-.231.418a.75.75 0 0 1-1.5 0c0-.674.345-1.22.78-1.577M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E"); /* залитый кружок (открыт/наведение) */
	color: inherit;
	/* серый: оранжевый в карточках означает «выбрано»; #858590 — контраст 3:1 и на сером фоне карточки */
	text-decoration: underline dotted #858590;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px; /* ниже хвостов р, д, у — пунктир не рвется */
	text-decoration-skip-ink: none;
	/* зона нажатия чуть выше и ниже строки: вертикальный padding строчного элемента строки не сдвигает и
	   у перенесенного термина действует на каждую строку отдельно. (Был ::before с position: absolute — у термина
	   в две строки браузер растягивал его на прямоугольник через обе строки, и он ловил нажатия мимо слов) */
	padding: 3px 0;
	cursor: pointer;
	transition: color .15s;
}
/* иконка «?» — circle-question из Gravity UI Icons (https://github.com/gravity-ui/icons),
   Copyright (c) 2022 YANDEX LLC, MIT License.
   Строчный (не inline-block) элемент: word joiner (U+2060) запрещает перенос перед ней,
   а под нулевой шириной символа пунктир не рисуется.
   Кружок занимает 14 из 16 px рамки, поэтому рамка 1.05em: видимый диаметр как у прежней иконки */
.pd-term::after {
	content: "\2060";
	margin-left: .25em;
	padding-left: 1.05em;
	background: var(--theme-base-color, #ed731d);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M6.44 4.54c.43-.354.994-.565 1.56-.565 1.217 0 2.34.82 2.34 2.14 0 .377-.078.745-.298 1.1-.208.339-.513.614-.875.867-.217.153-.325.257-.379.328-.038.052-.038.07-.038.089a.75.75 0 0 1-1.5 0c0-.794.544-1.286 1.057-1.645.28-.196.4-.332.458-.426a.54.54 0 0 0 .075-.312c0-.3-.244-.641-.84-.641a1 1 0 0 0-.608.223c-.167.138-.231.287-.231.418a.75.75 0 0 1-1.5 0c0-.674.345-1.22.78-1.577M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") center / 1.05em 1.05em no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M6.44 4.54c.43-.354.994-.565 1.56-.565 1.217 0 2.34.82 2.34 2.14 0 .377-.078.745-.298 1.1-.208.339-.513.614-.875.867-.217.153-.325.257-.379.328-.038.052-.038.07-.038.089a.75.75 0 0 1-1.5 0c0-.794.544-1.286 1.057-1.645.28-.196.4-.332.458-.426a.54.54 0 0 0 .075-.312c0-.3-.244-.641-.84-.641a1 1 0 0 0-.608.223c-.167.138-.231.287-.231.418a.75.75 0 0 1-1.5 0c0-.674.345-1.22.78-1.577M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") center / 1.05em 1.05em no-repeat;
}
.pd-term.is-active {
	color: var(--theme-base-color, #ed731d);
	text-decoration-color: var(--theme-base-color, #ed731d); /* отдельными свойствами: шорткат сбросил бы толщину */
	text-decoration-style: solid;
}
/* открыт (и наведение ниже): кружок «заливается», знак вопроса вырезан */
.pd-term.is-active::after {
	-webkit-mask-image: var(--pd-q-filled);
	mask-image: var(--pd-q-filled);
}
/* «?» оранжевый только в выбранной комплектации, в остальных карточках — серый, как пунктир.
   Иконка остается на месте, меняется только цвет: при смене комплектации текст не переносится заново.
   Открытая карточка термина (и наведение) — оранжевые везде */
.catalog-conf-opt__item:not(.item-checked) .pd-term::after { background: #858590; }
.catalog-conf-opt__item:not(.item-checked) .pd-term.is-active::after { background: var(--theme-base-color, #ed731d); }
/* наведение — только там, где оно есть (мышь). На телефоне элемент со стилями :hover браузер считает кнопкой
   и «притягивает» к нему тапы рядом — термин открывался от нажатия мимо слов */
@media (hover: hover) {
	.pd-term:hover {
		color: var(--theme-base-color, #ed731d);
		text-decoration-color: var(--theme-base-color, #ed731d);
		text-decoration-style: solid;
	}
	.pd-term:hover::after {
		-webkit-mask-image: var(--pd-q-filled);
		mask-image: var(--pd-q-filled);
	}
	.catalog-conf-opt__item:not(.item-checked) .pd-term:hover::after { background: var(--theme-base-color, #ed731d); }
}
.pd-term:focus-visible {
	outline: 2px solid var(--theme-base-color, #ed731d);
	outline-offset: 2px;
}
/* в распечатке конфигурации термин — обычный текст (у карточек print-color-adjust: exact) */
@media print {
	.pd-term { text-decoration: none; }
	.pd-term::after { content: none; }
}

/* ---------- короткая карточка ---------- */

/* компьютер: 540px, слева текст, справа фото на всю высоту карточки
   (превью у терминов вертикальные — так они почти не обрезаются) */
.pd-term-pop {
	position: absolute;
	z-index: 3000;
	width: 540px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
	color: #333;
	font-family: Montserrat, Arial, sans-serif;
	animation: pd-term-in .15s ease-out;
}
.pd-term-pop[hidden],
.pd-term-backdrop[hidden],
.pd-term-pop [hidden] { display: none !important; }

.pd-term-pop__body {
	display: flex;
	align-items: stretch;
}
.pd-term-pop__info {
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 24px 22px;
}
/* высоту карточки задает текст, фото подстраивается под нее (object-fit: cover) */
.pd-term-pop__media {
	position: relative;
	flex: 0 0 210px;
	min-height: 220px;
}
.pd-term-pop__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 12px 12px 0;
	background: #eee;
}
.pd-term-pop__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
	text-wrap: balance; /* две строки примерно равной длины, без одинокого слова */
}
.pd-term-pop--noimg .pd-term-pop__title { margin-right: 28px; } /* место под крестик */
.pd-term-pop__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #555;
}
.pd-term-pop__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--theme-base-color, #ed731d);
	color: #fff;
	font: 600 14px/1.2 Montserrat, Arial, sans-serif;
	cursor: pointer;
	transition: filter .15s;
}
.pd-term-pop__more::after { content: "→"; }
.pd-term-pop__more:hover { filter: brightness(.92); }
.pd-term-pop__more.is-loading { opacity: .7; cursor: progress; }
/* картинка целиком, без обрезки, на белом (TERMS[...].imageFit: 'contain') */
.pd-term-pop--contain .pd-term-pop__img { object-fit: contain; background: #fff; }
/* статья не загрузилась (нет сети) */
.pd-term-pop__error {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #b3261e;
}
.pd-term-pop__error:empty { display: none; }
/* крестик лежит поверх фото — на светлой подложке */
.pd-term-pop__close {
	position: absolute;
	z-index: 1;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	color: #555;
	font-size: 24px;
	line-height: 32px;
	cursor: pointer;
}
.pd-term-pop__close:hover { background: #fff; color: #222; }

.pd-term-pop__arrow {
	position: absolute;
	top: -6px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: -2px -2px 3px rgba(0, 0, 0, .05);
}
.pd-term-pop.is-above .pd-term-pop__arrow {
	top: auto;
	bottom: -6px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .05);
}

/* на телефоне — лист снизу экрана: небольшое фото слева, текст справа */
.pd-term-pop--sheet {
	position: fixed;
	top: auto !important;
	left: 0 !important;
	right: 0;
	bottom: 0;
	width: auto;
	max-width: none;
	padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	border-radius: 16px 16px 0 0;
	max-height: calc(100vh - 16px);
	max-height: calc(100dvh - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation-name: pd-term-up;
	animation-duration: .2s;
}
.pd-term-pop--sheet .pd-term-pop__arrow { display: none; }
.pd-term-pop--sheet .pd-term-pop__body { align-items: flex-start; }
.pd-term-pop--sheet .pd-term-pop__media {
	order: -1;
	flex-basis: 96px;
	height: 128px;
	min-height: 0;
	margin-right: 14px;
}
.pd-term-pop--sheet .pd-term-pop__img { border-radius: 8px; }
.pd-term-pop--sheet .pd-term-pop__info { padding: 0; }
.pd-term-pop--sheet .pd-term-pop__title { margin-right: 28px; font-size: 16px; }
.pd-term-pop--sheet .pd-term-pop__more {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
}
.pd-term-pop--sheet .pd-term-pop__error { text-align: center; }
.pd-term-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2999;
	background: rgba(0, 0, 0, .4);
}
html.pd-term-lock,
html.pd-term-lock body { overflow: hidden; }

@keyframes pd-term-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes pd-term-up { from { transform: translateY(100%); } }

/* ---------- подробное окно (fancybox) ---------- */

.pd-term-fb .fancybox-slide--html { padding: 24px 12px; }
.pd-term-fb .fancybox-content {
	width: 100%;
	max-width: 760px;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	overflow: clip; /* обрезает углы, но (в отличие от hidden) не ломает «липкий» крестик */
	background: #fff;
}
/* крестик прилипает к верху окна при прокрутке; отрицательный нижний отступ — не сдвигает текст */
.pd-term-modal__close {
	position: sticky;
	top: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 12px 12px -52px auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	color: #444;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.pd-term-modal__close:hover { background: #fff; color: #111; }

.pd-term-article {
	color: #333;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}
.pd-term-article__head { padding: 32px 36px 20px; }
.pd-term-article__title {
	margin: 0 0 10px;
	padding-right: 24px; /* место под крестик */
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #222;
}
.pd-term-article__lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #444;
}
/* любое фото статьи открывается на весь экран */
.pd-term-article img { cursor: zoom-in; }

.pd-term-article__hero { margin: 0; }
.pd-term-article__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1400 / 643;
	object-fit: cover;
	background: #eee;
}
.pd-term-article__subtitle {
	margin: 28px 36px 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}

.pd-term-article__hero + .pd-term-reasons { margin-top: 24px; }
.pd-term-reasons {
	margin: 0;
	padding: 0 36px;
	list-style: none;
	counter-reset: pd-reason;
}
.pd-term-reason {
	position: relative;
	margin: 0 0 16px;
	padding: 18px 20px 18px 68px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	counter-increment: pd-reason;
}
.pd-term-reason::before {
	content: counter(pd-reason);
	position: absolute;
	top: 18px;
	left: 20px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--theme-base-color, #ed731d);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}
.pd-term-reason__title {
	margin: 4px 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #222;
}
/* раздел без номера (вводный блок, «из чего состоит», материал) — та же карточка, без кружка с цифрой;
   такие карточки лежат в div.pd-term-reasons, нумерованные — в ol.pd-term-reasons */
.pd-term-reason--plain { padding-left: 20px; counter-increment: none; }
.pd-term-reason--plain::before { content: none; }
/* важное условие сразу под лидом (плашка в шапке статьи) */
.pd-term-article__head .pd-term-result { margin: 12px 0 0; }
/* схема/чертеж — целиком, без обрезки (фото в .pd-term-gallery режутся до 4:3) */
.pd-term-figure { margin: 0 0 12px; }
.pd-term-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
}
.pd-term-reason p { margin: 0 0 10px; }
.pd-term-reason p:last-child { margin-bottom: 0; }
.pd-term-reason p b { color: #222; }
.pd-term-reason .pd-term-result b { color: inherit; } /* в цветной плашке — цвет плашки */

.pd-term-gallery {
	display: grid;
	grid-auto-flow: column; /* все фото раздела в один ряд, без «сирот» */
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
	margin-top: 4px; /* + 10px отступа последнего абзаца */
}
.pd-term-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: 320px; /* одиночное фото на всю ширину не должно занимать весь экран */
	object-fit: cover;
	border-radius: 8px;
	background: #eee;
}

.pd-term-result {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}
.pd-term-result--good { background: #eef7ee; color: #25542b; }
.pd-term-result--bad  { background: #fdf0ee; color: #7a2a1f; }

/* ссылка на документ (PDF) внизу статьи: значок-файл слева, название и размер */
.pd-term-file {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 36px 16px;
	padding: 14px 18px 14px 60px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .15s;
}
.pd-term-file::before {
	content: "PDF";
	position: absolute;
	top: 50%;
	left: 18px;
	width: 28px;
	height: 34px;
	margin-top: -17px;
	border-radius: 4px;
	background: var(--theme-base-color, #ed731d);
	color: #fff;
	font: 700 9px/34px Montserrat, Arial, sans-serif;
	text-align: center;
}
.pd-term-file:hover { border-color: var(--theme-base-color, #ed731d); text-decoration: none; }
.pd-term-file__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--theme-base-color, #ed731d); }
.pd-term-file__meta { font-size: 13px; line-height: 1.4; color: #707070; }

/* итоговая фраза статьи после списка причин */
.pd-term-article__outro {
	margin: 8px 36px 16px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: #222;
}
.pd-term-article__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 12px 36px 32px;
}
/* «Задать вопрос» — главное действие (кнопку добавляет скрипт, если на странице есть форма заявки) */
.pd-term-article__ask {
	padding: 12px 24px;
	border: 1px solid var(--theme-base-color, #ed731d);
	border-radius: 8px;
	background: var(--theme-base-color, #ed731d);
	color: #fff;
	font: 600 14px/1.2 Montserrat, Arial, sans-serif;
	cursor: pointer;
	transition: filter .15s;
}
.pd-term-article__ask:hover { filter: brightness(.92); }
.pd-term-article__back {
	padding: 12px 24px;
	border: 1px solid var(--theme-base-color, #ed731d);
	border-radius: 8px;
	background: #fff;
	color: var(--theme-base-color, #ed731d);
	font: 600 14px/1.2 Montserrat, Arial, sans-serif;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.pd-term-article__back:hover {
	background: var(--theme-base-color, #ed731d);
	color: #fff;
}

@media (max-width: 599px) {
	.pd-term-fb .fancybox-slide--html { padding: 0; }
	.pd-term-fb .fancybox-content {
		max-width: none;
		min-height: 100%;
		border-radius: 0;
	}
	.pd-term-article { font-size: 14px; }
	.pd-term-article__head { padding: 24px 16px 16px; }
	.pd-term-article__title { font-size: 22px; padding-right: 44px; }
	.pd-term-article__lead { font-size: 15px; }
	.pd-term-article__subtitle { margin: 24px 16px 12px; font-size: 18px; }
	.pd-term-reasons { padding: 0 16px; }
	/* номер — в строке заголовка, текст на всю ширину карточки */
	.pd-term-reason { padding: 16px; }
	.pd-term-reason::before { left: 16px; top: 16px; width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
	.pd-term-reason__title { margin: 3px 0 10px; padding-left: 40px; }
	/* фото раздела — крупнее, лентой с прокруткой вбок; край следующего фото подсказывает, что есть еще */
	.pd-term-gallery {
		grid-auto-columns: minmax(72%, 1fr);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.pd-term-gallery::-webkit-scrollbar { display: none; }
	.pd-term-gallery img { scroll-snap-align: start; }
	.pd-term-reason--plain { padding: 16px; }
	.pd-term-reason--plain .pd-term-reason__title { padding-left: 0; }
	.pd-term-file { margin: 0 16px 12px; }
	.pd-term-article__outro { margin: 8px 16px 12px; font-size: 15px; }
	.pd-term-article__foot { padding: 8px 16px 28px; }
	.pd-term-article__ask,
	.pd-term-article__back { width: 100%; }
}