/* Мобильная нижняя панель и кнопка «Наверх» (Module\MobileBar). Префиксы vr-mb, vr-totop. Только до 767 px. */

:root {
	--vr-z-mbar: 9000;       /* как у плавающей кнопки связи; ниже плашки cookie (9500) и прелоадера (99999) */
	--vr-mb-h: 64px;         /* высота панели без отступа safe-area */
	--vr-mb-offset: 0px;     /* на что поднимать нижние элементы; становится равным --vr-mb-h, когда панель выведена */
}

.vr-mb,
.vr-totop {
	display: none;
}

@media (max-width: 767px) {

	/* ----- Панель ----- */

	body.vr-has-mbar {
		--vr-mb-offset: var(--vr-mb-h);
		padding-bottom: calc(var(--vr-mb-h) + env(safe-area-inset-bottom, 0px));
	}

	.vr-mb {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--vr-z-mbar);
		display: block;
		box-sizing: border-box;
		padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
		font-family: var(--vr-font, "Montserrat", sans-serif);
	}

	.vr-mb__list {
		display: flex;
		height: var(--vr-mb-h);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vr-mb__list li {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vr-mb a.vr-mb__item,
	.vr-mb a.vr-mb__item:link,
	.vr-mb a.vr-mb__item:visited,
	.vr-mb a.vr-mb__item:hover,
	.vr-mb a.vr-mb__item:focus,
	.vr-mb a.vr-mb__item:active {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		box-sizing: border-box;
		height: 100%;
		padding: 6px 2px;
		color: #3a3a3a;
		font: 500 11px/1.1 var(--vr-font, "Montserrat", sans-serif);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.vr-mb a.vr-mb__item[aria-current="page"] {
		color: var(--vr-color-accent, #818249);
	}

	.vr-mb a.vr-mb__item:focus-visible {
		outline: 3px solid #000;
		outline-offset: -3px;
	}

	.vr-mb__ico {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
	}

	.vr-mb__icon {
		display: block;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.vr-mb__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Выделенная кнопка (обычно «Записаться»): круг цвета акцента, чуть выступает над панелью. */
	.vr-mb a.vr-mb__item--accent,
	.vr-mb a.vr-mb__item--accent:link,
	.vr-mb a.vr-mb__item--accent:visited,
	.vr-mb a.vr-mb__item--accent:hover,
	.vr-mb a.vr-mb__item--accent:focus,
	.vr-mb a.vr-mb__item--accent:active {
		color: var(--vr-color-accent, #818249);
		font-weight: 700;
	}

	.vr-mb__item--accent .vr-mb__ico {
		width: 48px;
		height: 48px;
		margin-top: -22px;
		border-radius: 50%;
		background: var(--vr-color-accent, #818249);
		color: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	}

	/* ----- Кнопка «Наверх» ----- */

	/* Кнопку Avada на телефоне прячем: вместо неё своя. */
	body.vr-own-totop .to-top-container {
		display: none !important;
	}

	.vr-totop {
		position: fixed;
		bottom: calc(var(--vr-mb-offset) + 16px + env(safe-area-inset-bottom, 0px));
		z-index: var(--vr-z-mbar);
		display: block;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
	}

	.vr-totop--right {
		right: calc(16px + env(safe-area-inset-right, 0px));
	}

	.vr-totop--left {
		left: calc(16px + env(safe-area-inset-left, 0px));
	}

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

	.vr-totop a.vr-totop__link,
	.vr-totop a.vr-totop__link:link,
	.vr-totop a.vr-totop__link:visited,
	.vr-totop a.vr-totop__link:hover,
	.vr-totop a.vr-totop__link:focus,
	.vr-totop a.vr-totop__link:active {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #fff;
		color: var(--vr-color-accent, #818249);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.vr-totop a.vr-totop__link:focus-visible {
		outline: 3px solid #000;
		outline-offset: 2px;
	}

	/* ----- Соседи: поднимаем над панелью ----- */

	/* Плашка cookie. */
	body.vr-has-mbar .vr-cookie {
		bottom: calc(var(--vr-mb-offset) + 12px + env(safe-area-inset-bottom, 0px));
	}

	/* Плавающая кнопка связи (если включена на телефоне): над панелью и над плашкой cookie. */
	body.vr-has-mbar .vr-cw {
		bottom: calc(max(var(--vr-mb-offset) + 16px, var(--vr-cookie-h, 0px) + var(--vr-mb-offset) + 28px) + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.vr-totop {
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.vr-mb a.vr-mb__item:active .vr-mb__ico {
		transform: scale(0.92);
	}

	.vr-mb__ico {
		transition: transform 0.12s ease;
	}
}

@media print {
	.vr-mb,
	.vr-totop {
		display: none;
	}
}