/**
 * Scroll Top — кнопка «Наверх» (правки 20.10).
 *
 * Глобальный элемент: разметка — footer.php, поведение — js/scroll-top.js.
 * Макета нет; оформление в стиле сайта — акцентная кнопка со скруглением,
 * как у кнопок шапки, стрелка — символ спрайта icon-arrow-right, повёрнутый
 * вверх. Видна после прокрутки на половину экрана (класс -visible ставит JS).
 * position: fixed оправдан — кнопка висит над контентом (свод §3).
 * z-index 80 — ниже мобильной панели меню (90), шапки (100) и модальных окон (1000).
 */

.scroll-top {
	position: fixed;
	right: var(--space-30);
	bottom: var(--space-30);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-48);
	height: var(--space-48);
	padding: 0;
	border: 0;
	border-radius: var(--radius-8);
	color: var(--color-white);
	background: var(--color-accent);
	box-shadow: 0 calc(4 / var(--vw-base) * 100vw) calc(18 / var(--vw-base) * 100vw) var(--color-dark-35);
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transform: translateY(var(--space-10));
	transition: background-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.scroll-top.-visible {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.scroll-top:hover {
	background: var(--color-accent-hover);
}

.scroll-top__icon {
	flex-shrink: 0;
	width: var(--space-20);
	height: var(--space-20);
	transform: rotate(-90deg);
}

@media (max-width: 767px) {
	.scroll-top {
		right: var(--space-20);
		bottom: var(--space-20);
		width: calc(44 / var(--vw-base) * 100vw);
		height: calc(44 / var(--vw-base) * 100vw);
	}
}