/* Плавающая кнопка связи (Module\ContactWidget). Префикс vr-cw, п. 3.2 спецификации. */

:root {
	--vr-z-widget: 9000;     /* ниже прелоадера (99999) и off-canvas Avada */
	--vr-cw-x: 16px;         /* отступ от бокового края */
	--vr-cw-y: 100px;        /* отступ от нижнего края (+ safe-area) */
}

.vr-cw-sentinel {
	position: absolute;
	top: 100vh;              /* граница первого экрана */
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vr-cw {
	position: fixed;
	/* поднимается выше плашки cookie, пока она видна (--vr-cookie-h выставляет cookie-notice.js) */
	bottom: calc(max(var(--vr-cw-y), var(--vr-cookie-h, 0px) + 16px) + env(safe-area-inset-bottom, 0px));
	z-index: var(--vr-z-widget);
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--vr-font, "Montserrat", sans-serif);
	/* скрыта, пока скрипт не покажет (после прокрутки первого экрана) */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
}

.vr-cw--right {
	right: calc(var(--vr-cw-x) + env(safe-area-inset-right, 0px));
	align-items: flex-end;
}

.vr-cw--left {
	left: calc(var(--vr-cw-x) + env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

.vr-cw.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

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

.vr-cw__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 56px;
	height: 56px;
	padding: 0 18px;
	border: 0;
	border-radius: 28px;
	background: var(--vr-color-accent, #818249);
	color: #fff;
	font: 600 15px/1 var(--vr-font, "Montserrat", sans-serif);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	-webkit-tap-highlight-color: transparent;
}

.vr-cw__toggle:focus-visible,
.vr-cw__item:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.vr-cw__icon--close,
.vr-cw__toggle[aria-expanded="true"] .vr-cw__icon--open {
	display: none;
}

.vr-cw__toggle[aria-expanded="true"] .vr-cw__icon--close {
	display: block;
}

/* ----- Столбик круглых иконок (раскрывается вверх, без подложки) ----- */

.vr-cw__panel {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 12px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.vr-cw.is-open .vr-cw__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vr-cw__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	-webkit-tap-highlight-color: transparent;
}

.vr-cw__item:hover,
.vr-cw__item:focus-visible {
	text-decoration: none;
}

/* Свои иконки (загруженные): картинка вписана в кружок. */
.vr-cw__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Встроенные иконки телефона и записи: белый значок на кружке цвета акцента. */
/* Цвет значка задаём для всех состояний ссылки: иначе тема красит a:hover в цвет акцента,
   и значок сливается с кружком такого же цвета. */
.vr-cw a.vr-cw__item--glyph,
.vr-cw a.vr-cw__item--glyph:link,
.vr-cw a.vr-cw__item--glyph:visited,
.vr-cw a.vr-cw__item--glyph:hover,
.vr-cw a.vr-cw__item--glyph:focus,
.vr-cw a.vr-cw__item--glyph:active {
	background: var(--vr-color-accent, #818249);
	color: #fff;
}

.vr-cw a.vr-cw__item--glyph .vr-cw__glyph {
	color: #fff;
}

.vr-cw .vr-cw__toggle,
.vr-cw .vr-cw__toggle:hover,
.vr-cw .vr-cw__toggle:focus,
.vr-cw .vr-cw__toggle:active {
	background: var(--vr-color-accent, #818249);
	color: #fff;
}

.vr-cw a.vr-cw__item:hover,
.vr-cw .vr-cw__toggle:hover {
	filter: brightness(1.1);
}

.vr-cw__glyph {
	flex: 0 0 auto;
}

/* ----- Мобильные: на кнопке только значок, без слова ----- */

@media (max-width: 767px) {
	/* Отключено в «Настройки темы» → «Кнопка связи» → «Показывать на телефоне». */
	.vr-cw.vr-cw--no-mobile {
		display: none !important;
	}

	.vr-cw__label {
		display: none;
	}

	.vr-cw__toggle {
		width: 56px;
		padding: 0;
		border-radius: 50%;
	}

	.vr-cw__item {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vr-cw,
	.vr-cw__panel {
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.vr-cw__item,
	.vr-cw__toggle {
		transition: filter 0.15s ease, transform 0.15s ease;
	}

	.vr-cw a.vr-cw__item:hover {
		transform: scale(1.06);
	}
}

@media print {
	.vr-cw,
	.vr-cw-sentinel {
		display: none;
	}
}