/* Шторка «не открылся мессенджер». Показывается тому, кто нажал Telegram или
   WhatsApp, приложение не открылось, и человек остался на странице
   (js/messenger-return.js).

   У шторки одна работа: связь не установилась - установить её. Поэтому здесь
   нет ни оффера со скидкой, ни рассказа о клинике, ни квиза: человек уже решил
   написать, второй раз его убеждать не нужно и вредно. Всё содержимое - это
   признание сбоя, обещание написать первыми, поля и один запасной путь.

   Поля берём из формы оффера квиза (.quiz__form в style.css, логика в
   window.SmrQuizOffer), размеры подогнаны так же, как в попапе квиза. Обёртки
   .quiz__offer здесь нет намеренно: в style.css она скрыта и показывается
   только на экране результата квиза, а тут форма видна всегда.

   Размеры в CSS-пикселях с поправкой на zoom: 0.65 у body (см. style.css):
   карточка ~480 видимых пикселей шириной - здесь 860px. Ниже 1024px zoom не
   действует, и в мобильной части файла размеры настоящие. */

.messenger-return {
	position: fixed;
	inset: 0;
	/* Выше попапа квиза (200) и тизера (190): вместе они не появляются -
	   скрипт не показывает шторку, пока открыт попап, - но если что-то пойдёт
	   не так, наверху должна остаться шторка, а не плашка под ней. */
	z-index: 210;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
}

.messenger-return[hidden] {
	display: none;
}

/* Та же светло-голубая пелена, что у попапа квиза: шторка читается как часть
   сайта, а не как всплывающее окно браузера. */
.messenger-return__overlay {
	position: absolute;
	inset: 0;
	background: rgba(201, 219, 250, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	opacity: 0;
	transition: opacity 0.3s ease;
}

.messenger-return.is-open .messenger-return__overlay {
	opacity: 1;
}

/* Обёртка держит крестик рядом с карточкой, а не внутри неё: крестик нижней
   частью уходит под карточку, а карточка режет содержимое по скруглению. */
.messenger-return__box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 860px;
	margin: auto;

	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.messenger-return.is-open .messenger-return__box {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.messenger-return__overlay,
	.messenger-return__box {
		transition: none;
	}
}

.messenger-return__close {
	position: absolute;
	top: -50px;
	right: 0;
	z-index: 0;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	width: 50px;
	height: 80px;
	padding: 16px 0px 0px 0px;
	border-radius: 12px;
	background: #196dff;

	transition: background-color 0.2s ease;
}

.messenger-return__close svg {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.messenger-return__close:hover {
		background: #0d55d1;
	}
}

.messenger-return__dialog {
	position: relative;
	z-index: 1;

	border: 1px solid #4b8dff;
	border-radius: 26px;
	background: #f3f7ff;
	box-shadow: 0 30px 60px rgba(25, 70, 150, 0.18);
	padding: 44px 48px 40px;
	overflow: hidden;

	/* Плашка, заголовок, пояснение и запасной путь стоят по центру - шторка
	   читается как одно целое. Поля формы ниже возвращают себе выравнивание
	   по левому краю: текст ввода читается слева, куда бы ни был выровнен
	   заголовок над ним. */
	text-align: center;
}

.messenger-return__dialog:focus {
	outline: none;
}

/* Плашка сбоя. Стоит первой и снимает с человека вину за «ничего не
   произошло»: название мессенджера подставляет скрипт по тому, что нажали. */
.messenger-return__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	border-radius: 100px;
	padding: 10px 22px;
	background: #fff;
}

.messenger-return__badge-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.messenger-return__badge-text {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: 20px;
	line-height: 130%;
	color: #196dff;
}

/* Заголовок - обещание, а не вопрос: человеку нужно понять, что дальше делать
   ничего не придётся. */
.messenger-return__title {
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 44px;
	line-height: 118%;
	letter-spacing: -0.03em;
	color: #494949;
	margin: 24px 0px 0px 0px;
}

.messenger-return__title-accent {
	color: #196dff;
}

/* Единственный поясняющий абзац: почему не открылось и что сделать. Проблему
   он не пересказывает - её уже назвала плашка. */
.messenger-return__text {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: 22px;
	line-height: 145%;
	color: #8b93a5;
	margin: 18px 0px 0px 0px;
}

/* Поля стоят прямо на голубой карточке, без белой подложки формы - как в
   попапе квиза. */
.messenger-return .quiz__form {
	gap: 12px;
	border-radius: 0;
	padding: 0;
	background: transparent;
	margin: 30px 0px 0px 0px;
	text-align: left;
}

.messenger-return .quiz__input {
	padding: 14px 16px 14px 44px;
	font-size: 15px;
}

.messenger-return .quiz__input--select {
	padding: 14px 40px 14px 16px;
}

.messenger-return .quiz__select-option {
	padding: 13px 20px;
	font-size: 17px;
}

.messenger-return .quiz__field-error {
	font-size: 14px;
	margin-top: 6px;
}

.messenger-return .quiz__form-consent-text {
	font-size: 12px;
}

.messenger-return .quiz__form-btn {
	padding: 16px 20px;
	font-size: 16px;
}

/* Единственный запасной путь - крупная кнопка в MAX. Он открывается без VPN
   и по статистике сайта чаще всех доводит до диалога, поэтому стоит вровень с
   основной кнопкой, а не мелкой ссылкой внизу. Отличается обводкой вместо
   заливки: основной путь всё же форма. */
.messenger-return__alt {
	border-top: 1px solid #dbe6fa;
	margin: 26px 0px 0px 0px;
	padding: 24px 0px 0px 0px;
}

.messenger-return__alt-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	width: 100%;
	padding: 15px 20px;
	border: 2px solid #196dff;
	border-radius: 100px;
	background: #fff;

	font-family: var(--second-family);
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	color: #196dff;

	transition: background-color 0.2s ease, color 0.2s ease;
}

.messenger-return__alt-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.messenger-return__alt-link:hover {
		background: #196dff;
		color: #fff;
	}
}

/* Почему именно MAX - без этой строки кнопка выглядит просто ещё одним
   мессенджером, который тоже может не открыться. */
.messenger-return__alt-note {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: 15px;
	line-height: 130%;
	color: #8b93a5;
	margin: 12px 0px 0px 0px;
}

/* Баннер согласия на куки висит у нижнего края и на телефоне перекрывал бы
   шторку. Пока шторка на экране, баннер убран; закрыли шторку - вернулся.
   Файл подключается после style.css, поэтому правило перебивает
   .cookie-consent.active. */
.cookie-consent.is-under-messenger-return {
	display: none;
}

/* ------------------------------- Телефон -------------------------------- */
/* Ниже 1024px zoom у body не действует, поэтому размеры здесь настоящие. */
@media (max-width: 1024px) {
	/* На телефоне шторка выезжает снизу, как в мобильных приложениях. */
	.messenger-return {
		align-items: flex-end;
		padding: 0;
		overflow: hidden;
	}

	.messenger-return__box {
		max-width: none;
		margin: 0;

		opacity: 1;
		transform: translateY(100%);
		transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.messenger-return.is-open .messenger-return__box {
		transform: translateY(0);
	}

	/* Высота по содержимому, но не выше экрана минус 44px: на низких экранах
	   форма прокручивается внутри шторки, а не растягивает её за край. */
	.messenger-return__dialog {
		max-height: calc(100vh - 44px);
		max-height: calc(100dvh - 44px);
		border: 0;
		border-radius: 22px 22px 0 0;
		background: #fff;
		box-shadow: 0 -20px 50px rgba(25, 70, 150, 0.2);
		padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overflow-x: hidden;
	}

	.messenger-return__close {
		top: -30px;
		right: 10px;
		width: 40px;
		height: 60px;
		padding: 8px 0px 0px 0px;
		border-radius: 10px;
	}

	.messenger-return__close svg {
		width: 14px;
		height: 14px;
	}

	.messenger-return__badge {
		gap: 8px;
		padding: 8px 14px;
		background: #eef4fd;
	}

	.messenger-return__badge-icon {
		width: 20px;
		height: 20px;
	}

	.messenger-return__badge-text {
		font-size: 13px;
	}

	.messenger-return__title {
		font-size: 26px;
		line-height: 120%;
		letter-spacing: 0;
		margin-top: 14px;
	}

	.messenger-return__text {
		font-size: 15px;
		line-height: 142%;
		margin-top: 10px;
	}

	.messenger-return .quiz__form {
		gap: 10px;
		margin-top: 18px;
	}

	.messenger-return .quiz__input {
		border-radius: 100px;
		padding: 15px 18px 15px 46px;
		font-size: 16px;
	}

	.messenger-return .quiz__input--select {
		padding: 15px 44px 15px 18px;
	}

	.messenger-return .quiz__field-icon {
		left: 18px;
	}

	.messenger-return .quiz__select-option {
		padding: 13px 18px;
		font-size: 16px;
	}

	.messenger-return .quiz__field-error {
		font-size: 13px;
		margin-top: 5px;
	}

	.messenger-return .quiz__form-consent-text {
		font-size: 13px;
	}

	.messenger-return .quiz__form-btn {
		border-radius: 100px;
		padding: 16px 20px;
		font-size: 16px;
	}

	.messenger-return__alt {
		margin-top: 18px;
		padding-top: 18px;
	}

	.messenger-return__alt-link {
		gap: 10px;
		padding: 15px 18px;
		font-size: 16px;
	}

	.messenger-return__alt-icon {
		width: 20px;
		height: 20px;
	}

	.messenger-return__alt-note {
		font-size: 13px;
		margin-top: 10px;
	}
}