/*
 * Заявка — вид сайта поверх базовых правил модуля (theme/assets/css/zayavka.css).
 * Форма живёт на тёмном: в окне и в блоке заявки. Каналы «куда написать» —
 * плашками с цветом канала, как на странице контактов.
 */

.ss-zayavka {
	--ssz-akcent: #25cbc2;
	--ssz-kraj: color-mix(in srgb, #ffffff 16%, transparent);
	color: #ffffff;
	display: grid;
	font-family: "Gotham Pro", system-ui, sans-serif;
	gap: 16px;
	line-height: 1.4;
}

.ss-zayavka * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- телефон */

.ss-zayavka__pole input {
	background: #ffffff;
	block-size: 60px;
	border: 2px solid transparent;
	border-radius: 14px;
	color: #0b0b0b;
	font: 400 18px/1 "Gotham Pro", system-ui, sans-serif;
	margin: 0;
	outline: none;
	padding: 20px 18px 6px;
	transition: border-color 0.2s;
}

.ss-zayavka__pole input:focus {
	border-color: var(--ssz-akcent);
}

.ss-zayavka__pole input[aria-invalid="true"] {
	border-color: #ff5a5a;
}

.ss-zayavka__pole label {
	color: #6b7272;
	font-size: 16px;
	inset-inline-start: 20px;
	margin: 0;
}

/* Текст в поле тонкий — и набранный номер, и шаблон маски «+7 (___)».
   Родитель в селекторе: стили плагина маски весомее одиночного класса. */
.ss-zayavka .ss-zayavka__pole input,
.ss-zayavka .ss-zayavka__pole input::placeholder {
	font-weight: 400;
}

/* Иконка телефона справа в поле. */
.ss-zayavka__pole input {
	padding-inline-end: 52px;
}

.ss-zayavka__ikonka {
	color: #9aa3a3;
	inset-block-start: 19px;
	inset-inline-end: 18px;
	pointer-events: none;
	position: absolute;
}

/* С маской плагина (флаг и шаблон номера в поле): подпись — над полем,
   поле и иконка — в одной ячейке сетки. */
.ss-zayavka__pole:has(.epm-wrap) {
	display: grid;
}

.ss-zayavka__pole:has(.epm-wrap) label {
	color: #c9d0d0;
	font-size: 14px;
	grid-row: 1;
	inset: auto;
	margin-block-end: 8px;
	position: static;
	transform: none;
}

.ss-zayavka__pole:has(.epm-wrap) .epm-wrap {
	grid-column: 1;
	grid-row: 2;
}

.ss-zayavka__pole:has(.epm-wrap) input {
	padding-block: 0;
}

.ss-zayavka__pole:has(.epm-wrap) .ss-zayavka__ikonka {
	align-self: center;
	grid-column: 1;
	grid-row: 2;
	inset: auto;
	justify-self: end;
	margin-inline-end: 18px;
	position: relative;
}

.ss-zayavka__pole:has(.epm-wrap) .ss-zayavka__podskazka {
	grid-row: 3;
}

.ss-zayavka__podskazka {
	color: #ff8a8a;
	display: block;
	font-size: 13px;
	margin-block-start: 6px;
}

.ss-zayavka__podskazka:empty {
	display: none;
}

/* Подсказка об ошибке со стрелкой на галочку, капчу или телефон
   (5 октября 2026) — тёмная, как форма, красная только рамка. */
.ss-zayavka__tost {
	background: #1f2222;
	border: 1px solid #ff5a5a;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
	cursor: pointer;
	padding: 10px 36px 10px 14px;
}

.ss-zayavka__tost::after {
	background: #1f2222;
	border-block-end: 1px solid #ff5a5a;
	border-inline-end: 1px solid #ff5a5a;
}

.ss-zayavka__tost.is-snizu::after {
	border: 0;
	border-block-start: 1px solid #ff5a5a;
	border-inline-start: 1px solid #ff5a5a;
}

.ss-zayavka__tost-tekst {
	color: rgb(255 255 255 / 0.88);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
}

.ss-zayavka__tost-x {
	background: transparent;
	block-size: 32px;
	border: 0;
	border-radius: 50%;
	color: rgb(255 255 255 / 0.55);
	font-size: 20px;
	inline-size: 32px;
	line-height: 1;
	padding: 0;
}

.ss-zayavka__tost-x:hover,
.ss-zayavka__tost-x:focus-visible {
	background: rgb(255 255 255 / 0.08);
	color: #ffffff;
}

/* Подпись над слайдером: он отправляет заявку, кнопки нет. */
.ss-zayavka__kapcha-podpis {
	color: #c9d0d0;
	font-size: 14px;
	margin: 0 0 8px;
}

/* Под замком (нет номера и согласия) слайдер приглушён. */
.ss-zayavka.is-zamok .ss-zayavka__kapcha--vidimaya iframe {
	filter: grayscale(0.6);
	opacity: 0.4;
	transition: opacity 0.2s;
}

/* Видимая капча: от рамки Яндекса видна только полоса слайдера — без
   карточки с отступами и подписи «Yandex SmartCaptcha» с номером
   (слово заказчика 5 октября 2026). Что сайт пользуется SmartCaptcha,
   сказано в подвале — этого Яндекс требует, когда его подпись скрыта.
   Окошко ровно по полосе, рамка Яндекса сдвинута внутрь него: полоса
   начинается в ней на 14 px ниже и на 16 px правее края, высотой 49 px
   (замер на стенде 5 октября 2026). Поменяет Яндекс вёрстку виджета —
   перемерить. */
.ss-zayavka-js .ss-zayavka__kapcha--vidimaya {
	/* высоту контейнеру Яндекс ставит сам, в атрибуте style */
	block-size: 49px !important;
	border-radius: 12px;
	/* Safari обрезает скруглением рамку с 3D-сдвигом внутри только
	   в своём слое — даём его явно */
	isolation: isolate;
	min-block-size: 0;
	overflow: hidden;
}

.ss-zayavka-js .ss-zayavka__kapcha--vidimaya iframe {
	/* своя высота у рамки — 100% контейнера; сжать её вместе с окошком
	   значит смять виджет, поэтому прежние ~120 px, а режет окошко */
	block-size: 124px !important;
	inline-size: calc(100% + 32px) !important;
	margin-block-start: -14px;
	margin-inline-start: -16px;
	max-inline-size: none;
}

.ss-zayavka__oshibka {
	background: color-mix(in srgb, #ff5a5a 16%, transparent);
	border-radius: 10px;
	color: #ffd0d0;
	font-size: 14px;
	margin: 0;
	padding: 10px 14px;
}

/* -------------------------------------------------------------- каналы */

.ss-zayavka__kanaly {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ss-zayavka__kanaly legend {
	color: #c9d0d0;
	float: left;
	font-size: 14px;
	inline-size: 100%;
	margin-block-end: 2px;
	padding: 0;
}

.ss-zayavka__kanal {
	--ssz-kanal: var(--ssz-akcent);
	align-items: center;
	background: color-mix(in srgb, #ffffff 6%, transparent);
	border: 1.5px solid var(--ssz-kraj);
	border-radius: 999px;
	display: inline-flex;
	flex: 1 1 0;
	font-size: 15px;
	/* не уже своего текста: тесно — плашка уходит на новую строку, а не
	   выдавливает значок за край (iPhone, 5 октября 2026) */
	min-inline-size: max-content;
	/* и не шире половины строки: оставшись одна на второй строке, плашка
	   стоит слева по себе, а не тянется во всю ширину (заказчик,
	   5 октября 2026) */
	max-inline-size: calc(50% - 4px);
	font-weight: 400;
	gap: 8px;
	justify-content: center;
	min-block-size: 46px;
	padding: 8px 14px 8px 10px;
	transition: background-color 0.2s, border-color 0.2s;
	user-select: none;
	white-space: nowrap;
}

.ss-zayavka__kanal[data-kanal="tg"] {
	--ssz-kanal: #26a5e4;
}

.ss-zayavka__kanal[data-kanal="wa"] {
	--ssz-kanal: #25d366;
}

.ss-zayavka__kanal[data-kanal="max"] {
	--ssz-kanal: #7d5cf0;
}

.ss-zayavka__kanal img {
	block-size: 22px;
	border-radius: 50%;
	flex: none;
	inline-size: 22px;
}

.ss-zayavka__kanal:hover {
	border-color: color-mix(in srgb, var(--ssz-kanal) 70%, transparent);
}

/* Выбран — заливка цветом канала вполсилы и галочка. */
.ss-zayavka__kanal:has(input:checked) {
	background: color-mix(in srgb, var(--ssz-kanal) 28%, transparent);
	border-color: var(--ssz-kanal);
}

.ss-zayavka__kanal:has(input:checked)::after {
	block-size: 10px;
	border-block-end: 2px solid #ffffff;
	border-inline-end: 2px solid #ffffff;
	content: "";
	inline-size: 5px;
	margin-inline-start: 2px;
	transform: rotate(45deg) translate(-1px, -2px);
}

.ss-zayavka__kanal:has(input:focus-visible) {
	outline: 2px solid var(--ssz-akcent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ согласие */

/* Флажок — по верху первой строки (слово заказчика 29.09.2026). */
.ss-zayavka__soglasie {
	align-items: flex-start;
	color: #b6bdbd;
	cursor: pointer;
	display: flex;
	font-size: 12px;
	gap: 10px;
	line-height: 1.45;
	margin: 0;
}

/* Свой флажок вместо системного: рамка в тон формы, отмечен — бирюзовая
   заливка и тёмная галочка. Родитель в селекторе — кит Elementor красит
   поля своими правилами. */
.ss-zayavka .ss-zayavka__soglasie input {
	appearance: none;
	background: transparent;
	block-size: 20px;
	border: 1.5px solid rgb(255 255 255 / 0.4);
	border-radius: 6px;
	cursor: pointer;
	flex: none;
	inline-size: 20px;
	margin: 2px 0 0;
	padding: 0;
	transition: background-color 0.15s, border-color 0.15s;
}

.ss-zayavka .ss-zayavka__soglasie input:hover {
	border-color: var(--ssz-akcent);
}

.ss-zayavka .ss-zayavka__soglasie input:checked {
	background: var(--ssz-akcent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%230b0b0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
	border-color: var(--ssz-akcent);
}

.ss-zayavka .ss-zayavka__soglasie input:focus-visible {
	outline: 2px solid var(--ssz-akcent);
	outline-offset: 2px;
}

.ss-zayavka__soglasie a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* При ошибке красная только обводка галочки: на неё указывает подсказка,
   а красная строка вместе с подсказкой была перебором (заказчик,
   5 октября 2026). */
.ss-zayavka__soglasie.is-oshibka input {
	outline: 2px solid #ff5a5a;
	outline-offset: 2px;
}

/* -------------------------------------------------------------- кнопка */

/* Кит Elementor даёт кнопкам отступ 25 px и свой цвет: при высоте 60
   на текст оставалось 10 px, и он съезжал вниз. Отступ снят, текст
   по центру флексом; цвет — белый, как на кнопке прежней формы. */
.ss-zayavka .ss-zayavka__knopka {
	align-items: center;
	background: linear-gradient(90deg, #1ff5d6, #25cbc2);
	block-size: 60px;
	border: 0;
	border-radius: 14px;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	font: 600 16px/1 "Gotham Pro", system-ui, sans-serif;
	justify-content: center;
	padding: 0 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: filter 0.2s, transform 0.2s;
}

.ss-zayavka__knopka:hover,
.ss-zayavka__knopka:focus-visible {
	filter: brightness(1.08);
}

.ss-zayavka__knopka:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------- окно */

.ss-okno {
	background: transparent;
	border: 0;
	color: #ffffff;
	margin: 0;
	padding: 16px;
	block-size: 100%;
	inline-size: 100%;
}

.ss-okno::backdrop {
	backdrop-filter: blur(6px);
	background: rgb(0 0 0 / 0.6);
}

:root:not(.ss-zayavka-js) .ss-okno:target {
	background: rgb(0 0 0 / 0.75);
}

.ss-okno__telo {
	background:
		radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, #25cbc2 16%, transparent), transparent 60%),
		#161818;
	border: 1px solid rgb(255 255 255 / 0.06);
	border-radius: 22px;
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
	inline-size: min(100%, 460px);
	margin: auto;
	padding: 34px 32px 28px;
	position: relative;
}

.ss-okno__zakryt {
	align-items: center;
	block-size: 44px;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	inline-size: 44px;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	justify-content: center;
	transition: background-color 0.2s;
}

.ss-okno__zakryt:hover,
.ss-okno__zakryt:focus-visible {
	background: rgb(255 255 255 / 0.1);
}

.ss-okno__zag {
	font: 700 clamp(28px, 7vw, 38px)/1.1 "Unbounded", system-ui, sans-serif;
	margin: 0 0 8px;
	padding-inline-end: 44px;
	text-transform: uppercase;
}

.ss-okno__zag span {
	color: #25cbc2;
}

.ss-okno__tekst {
	color: #c9d0d0;
	font-size: 15px;
	margin: 0 0 22px;
}

.ss-okno__niz {
	align-items: center;
	border-block-start: 1px solid rgb(255 255 255 / 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	justify-content: space-between;
	margin-block-start: 22px;
	padding-block-start: 18px;
}

/* Селектор с тегом и родителем: цвет ссылкам задаёт кит Elementor
   (.elementor-kit-6 a), одиночный класс ему проигрывал — номер был бирюзовым. */
.ss-okno a.ss-okno__tel {
	color: #ffffff;
	font: 400 22px/1.2 "Gotham Pro", system-ui, sans-serif;
	text-decoration: none;
}

.ss-okno a.ss-okno__tel:hover,
.ss-okno a.ss-okno__tel:focus-visible {
	color: #25cbc2;
}

.ss-okno__status {
	align-items: center;
	color: #c9d0d0;
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
}

.ss-okno__status::before {
	background: #25cbc2;
	block-size: 8px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(37 203 194 / 0.18);
	content: "";
	inline-size: 8px;
}

.ss-okno[open] .ss-okno__telo {
	animation: ss-okno-poyavlenie 0.22s ease-out;
}

@keyframes ss-okno-poyavlenie {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@media (max-width: 767px) {
	.ss-okno {
		padding: 10px;
	}

	.ss-okno__telo {
		padding: 28px 18px 22px;
	}

	.ss-zayavka__kanal {
		padding-inline: 10px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-okno[open] .ss-okno__telo {
		animation: none;
	}
}

/* --------------------------------------------------- форма в блоке заявки */

.ss-forma .ss-zayavka {
	max-inline-size: 600px;
}

/* Строкой (ss-zayavka--stroka): телефон и кнопка рядом, согласие под ними —
   как было у формы Elementor в этих блоках (слово заказчика 29.09.2026). */
.ss-zayavka--stroka {
	column-gap: 12px;
	grid-template-areas:
		"pole knopka"
		"soglasie soglasie"
		"kapcha kapcha";
	grid-template-columns: minmax(0, 1fr) auto;
}

/* Видимая капча (5 октября 2026) — своей строкой после согласия: слайдер
   и есть отправка. Пока он на месте (is-slajder), кнопки нет и телефон
   во всю ширину. */
.ss-zayavka--stroka .ss-zayavka__kapcha-v {
	grid-area: kapcha;
}

.ss-zayavka--stroka.is-slajder {
	grid-template-areas:
		"pole"
		"soglasie"
		"kapcha";
	grid-template-columns: minmax(0, 1fr);
}

.ss-zayavka--stroka .ss-zayavka__pole {
	grid-area: pole;
}

.ss-zayavka--stroka .ss-zayavka__soglasie {
	grid-area: soglasie;
}

.ss-zayavka.ss-zayavka--stroka .ss-zayavka__knopka {
	grid-area: knopka;
	padding-inline: 32px;
	white-space: nowrap;
}

.ss-zayavka--stroka .ss-zayavka__oshibka {
	grid-column: 1 / -1;
}

/* Подпись поля — только для чтецов экрана: в поле и так шаблон номера. */
.ss-zayavka--stroka .ss-zayavka__pole label,
.ss-zayavka--stroka .ss-zayavka__pole:has(.epm-wrap) label {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.ss-zayavka--stroka .ss-zayavka__pole:has(.epm-wrap) .epm-wrap,
.ss-zayavka--stroka .ss-zayavka__pole:has(.epm-wrap) .ss-zayavka__ikonka {
	grid-row: 1;
}

.ss-zayavka--stroka .ss-zayavka__pole:has(.epm-wrap) .ss-zayavka__podskazka {
	grid-row: 2;
}

@media (max-width: 767px) {
	.ss-zayavka--stroka {
		grid-template-areas:
			"pole"
			"soglasie"
			"kapcha"
			"knopka";
		grid-template-columns: minmax(0, 1fr);
	}
}

.ss-page .ss-forma__sami {
	color: #c9d0d0;
	font-size: 14px;
	margin: 28px 0 10px;
}

.ss-page .ss-forma__sami + .ss-forma__kanaly {
	margin-block-start: 0;
}