/*
	FAB «Написать нам» — мессенджеры из FAB_BUTTON в {APP}_dop_sections.json.
	Разметка в _inc/head.php (сразу перед .totopbtnmobile), открытие/закрытие в js/scripts.js.
	Общий для style.css и style_qr.css, поэтому подключается отдельным файлом в _inc/head.php.
	Кнопка встаёт на место «Наверх», а «Наверх» поднимается над ней: правила .wafab ~ .totopbtnmobile.
*/
.wafab {
	--wafab-size: 48px;
	--wafab-gap: 12px;
	position: fixed;
	right: 20px;
	bottom: 50px;
	z-index: 100;
	width: var(--wafab-size);
	height: var(--wafab-size);
}

.wafab__toggle {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform .15s ease;
}
.wafab__toggle:active {transform: scale(.94);}
.wafab__toggle:focus-visible {outline: 2px solid var(--primary-color); outline-offset: 3px;}

/* иконки «сообщение» и «крестик» лежат друг на друге и меняются поворотом */
.wafab__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	fill: currentColor;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
/* «сообщение» — тонкий контур: при 26px его линии в 1px теряются на десктопе */
.wafab__icon--message {width: 30px; height: 30px; margin: -15px 0 0 -15px;}
.wafab__icon--close {opacity: 0; transform: rotate(-90deg) scale(.6);}
.wafab.is-open .wafab__icon--message {opacity: 0; transform: rotate(90deg) scale(.6);}
.wafab.is-open .wafab__icon--close {opacity: 1; transform: none;}

/* столбик мессенджеров над кнопкой; закрытый занимает место, поэтому клики пропускает насквозь */
.wafab__list {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--wafab-gap));
	pointer-events: none;
}
.wafab__link {
	display: block;
	width: var(--wafab-size);
	height: var(--wafab-size);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.6);
	-webkit-tap-highlight-color: transparent;
	transition: opacity .15s ease, transform .2s ease, visibility 0s linear .2s;
}
.wafab__link + .wafab__link {margin-top: var(--wafab-gap);}
/* иконки из images/social — скруглённые квадраты, круг даёт overflow ссылки */
.wafab__link img {display: block; width: 100%; height: 100%;}
/* --wafab-i ставит head.php: 0 у ближней к кнопке, поэтому столбик выезжает снизу вверх */
.wafab.is-open .wafab__link {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s;
	transition-delay: calc(var(--wafab-i, 0) * 40ms);
}
@media (hover: hover) {
	.wafab.is-open .wafab__link:hover {transform: scale(1.08); transition-delay: 0s;}
}

/* «Наверх» (44px) — над кнопкой (48px) и по её центру */
.wafab ~ .totopbtnmobile {
	right: 22px;
	bottom: 110px;
}
/* пока меню открыто, «Наверх» оказался бы под столбиком */
.wafab.is-open ~ .totopbtnmobile {visibility: hidden;}

@media (max-width: 959px) {
	/* у края и выше плашки корзины — там же, где «Наверх» в style.css */
	.wafab {right: 10px; bottom: 100px;}
	/* в style.css и style_qr.css здесь bottom: 100px !important */
	.wafab ~ .totopbtnmobile {right: 12px; bottom: 160px !important;}
}

@media (prefers-reduced-motion: reduce) {
	.wafab__toggle:active,
	.wafab__icon--close,
	.wafab.is-open .wafab__icon--message,
	.wafab__link,
	.wafab.is-open .wafab__link:hover {transform: none;}
}