/*
 * Заявка — то, без чего форма не работает на любом сайте студии.
 * Вид (цвета, шрифты, плашки каналов) — в дочерней теме.
 */

/* Ловушка для роботов: вне экрана, но не display:none — иначе её
   пропускают и простые роботы. */
.ss-zayavka__lovushka {
	block-size: 1px;
	inline-size: 1px;
	inset-inline-start: -9999px;
	overflow: hidden;
	position: absolute;
}

/* Подпись внутри поля: стоит в поле, при вводе уезжает наверх. */
.ss-zayavka__pole {
	position: relative;
}

.ss-zayavka__pole input {
	inline-size: 100%;
}

.ss-zayavka__pole label {
	inset-block-start: 50%;
	inset-inline-start: 1em;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
	transition: font-size 0.15s, inset-block-start 0.15s, transform 0.15s;
}

.ss-zayavka__pole input:focus + label,
.ss-zayavka__pole input:not(:placeholder-shown) + label {
	font-size: 0.72em;
	inset-block-start: 0.45em;
	transform: none;
}

/* Каналы — флажки плашками: сам флажок прячем, но оставляем фокус. */
.ss-zayavka__kanaly {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.ss-zayavka__kanal {
	cursor: pointer;
	position: relative;
}

.ss-zayavka__kanal input {
	block-size: 1px;
	inline-size: 1px;
	opacity: 0;
	position: absolute;
}

.ss-zayavka.is-otpravka .ss-zayavka__knopka {
	cursor: progress;
	opacity: 0.6;
}

/* Окно. Без скрипта ссылка #zayavka показывает его через :target —
   как панель меню; со скриптом это настоящий модальный <dialog>, и запасное
   правило выключено классом ss-zayavka-js: закрытие убирает #zayavka из
   адреса через history.replaceState, а :target от этого не сбрасывается —
   закрытое окно оставалось на экране, прилипшим к верху. */
:root:not(.ss-zayavka-js) .ss-okno:target {
	display: block;
	inset: 0;
	overflow: auto;
	position: fixed;
	z-index: 10000;
}

.ss-okno {
	max-block-size: none;
	max-inline-size: none;
}

.ss-okno[open] {
	display: grid;
	place-items: center;
}

/* На время задачки SmartCaptcha окно немодальное (zayavka.js): стоит
   на том же месте поверх страницы, но уже не в верхнем слое — задачка
   Яндекса, вставленная в конец страницы, оказывается над ним. Затемнение
   вместо ::backdrop, которого у немодального окна нет. */
.ss-okno.is-kapcha[open] {
	background-color: rgba(0, 0, 0, 0.6);
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	margin: 0;
	position: fixed;
	z-index: 10000;
}

/* Видимая капча: место под галочку держим, пока скрипт Яндекса грузится,
   чтобы кнопка не прыгала. Без скриптов галочки не будет — и места тоже. */
.ss-zayavka-js .ss-zayavka__kapcha--vidimaya {
	min-block-size: 102px;
}

/* Слайдер видимой капчи — сам отправка (zayavka.js, is-slajder): пока он
   нарисован и не пройден впустую, кнопки нет и над ним подпись. */
.ss-zayavka.is-slajder .ss-zayavka__knopka {
	display: none;
}

.ss-zayavka__kapcha-podpis {
	display: none;
}

/* Замок поверх слайдера, пока нет номера и согласия (is-zamok): ловит
   нажатие и показывает, чего не хватает. Вид — в дочерней теме. */
.ss-zayavka__kapcha--vidimaya {
	position: relative;
}

/* вес с формой: иначе сброс Hello (reset.css) красит кнопку рамкой #c36
   и заливает фон при наведении */
.ss-zayavka .ss-zayavka__kapcha-zamok,
.ss-zayavka .ss-zayavka__kapcha-zamok:hover,
.ss-zayavka .ss-zayavka__kapcha-zamok:focus {
	background: transparent;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	outline: 0;
}

.ss-zayavka .ss-zayavka__kapcha-zamok:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ss-zayavka .ss-zayavka__kapcha-zamok {
	cursor: pointer;
	display: none;
	inset: 0;
	padding: 0;
	position: absolute;
	z-index: 2;
}

.ss-zayavka.is-zamok .ss-zayavka__kapcha-zamok {
	display: block;
}

.ss-zayavka.is-slajder .ss-zayavka__kapcha-podpis {
	display: block;
}

/* Подсказка об ошибке со стрелкой на цель (zayavka.js, tost()): место
   и положение стрелки (--ssz-strelka) считает скрипт. Над целью — стрелка
   снизу, под ней (is-snizu) — сверху. Вид — в дочерней теме. */
.ss-zayavka {
	position: relative;
}

.ss-zayavka__tost {
	--ssz-strelka: 20px;
	box-sizing: border-box;
	inline-size: max-content;
	max-inline-size: min(100%, 360px);
	opacity: 0;
	position: absolute;
	transform: translateY(6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
	visibility: hidden;
	z-index: 50;
}

.ss-zayavka__tost.is-snizu {
	transform: translateY(-6px);
}

.ss-zayavka__tost.is-vidno {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.ss-zayavka__tost::after {
	block-size: 12px;
	content: "";
	inline-size: 12px;
	inset-block-end: -7px;
	inset-inline-start: calc(var(--ssz-strelka) - 6px);
	position: absolute;
	transform: rotate(45deg);
}

.ss-zayavka__tost.is-snizu::after {
	inset-block-end: auto;
	inset-block-start: -7px;
}

.ss-zayavka__tost.is-u-kraya {
	border-end-start-radius: 3px;
}

.ss-zayavka__tost.is-u-kraya.is-snizu {
	border-end-start-radius: 12px;
	border-start-start-radius: 3px;
}

.ss-zayavka__tost-x {
	cursor: pointer;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	position: absolute;
}

.ss-okno__zakryt {
	position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	.ss-zayavka__pole label,
	.ss-zayavka__tost {
		transition: none;
	}
}