/**
 * Мобильное меню (выезжающая панель): экраны по уровням, как на kona.ru.
 * Разметка — includes/mobile-menu.php, переходы — js/mobile-menu.js.
 *
 * Пункты — как у темы: 14px, строка 49px, линия #E3E9EF.
 * Текст не мельче 12px (рекомендация Вебмастера, mobile-text.css).
 *
 * !important у цвета ссылок вынужденный: у темы для светлой панели стоит
 * «.off-canvas-navigation.light … ul li a { color: #4B566B !important }».
 * Кнопки внутри панели тема красит правилом «.off-canvas-navigation-wrapper
 * button», поэтому у своих кнопок селекторы на класс сильнее.
 */

/* Высота панели темы — 100vh; на телефоне с нижней панелью браузера низ
   меню уходил бы под неё, dvh — видимая часть экрана */
@supports (height: 100dvh) {
	.off-canvas-navigation {
		height: 100dvh;
	}
}

/* ============ Экраны ============ */

.off-canvas-navigation .rd-oc {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.off-canvas-navigation .rd-oc-panel {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fdfcfc;
	transform: translateX(100%);
	visibility: hidden;
	/* уходящий экран прячется после анимации */
	transition: transform .25s ease, visibility 0s linear .25s;
}

.off-canvas-navigation .rd-oc-panel.is-before {
	transform: translateX(-100%);
}

.off-canvas-navigation .rd-oc-panel.is-active {
	transform: none;
	visibility: visible;
	/* приходящий экран виден сразу — иначе в первый момент он скрыт и не
	   принимает фокус («Назад» после перехода) */
	transition: transform .25s ease, visibility 0s;
}

/* ============ Пункты ============ */

.off-canvas-navigation .rd-oc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.off-canvas-navigation .rd-oc-list > li {
	margin: 0;
}

.off-canvas-navigation .rd-oc .rd-oc-list a,
.off-canvas-navigation .rd-oc .rd-oc-next,
.off-canvas-navigation .rd-oc .rd-oc-back {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 19px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	color: #4b566b !important;
	background: transparent !important; /* у темы «button:not(…)…» с десятком :not() красит кнопки в #efecec */
	/*
	 * Линия под строкой — тенью, а не рамкой, и рамок нет совсем: у темы при
	 * наведении «button:hover { border: none }» и другие правила рамок, из-за
	 * них строки «Назад» и со стрелкой дёргали соседние (замечание Максима).
	 * Тень места в раскладке не занимает — сдвигаться нечему.
	 */
	border: 0 !important;
	border-radius: 0;
	box-shadow: inset 0 -1px 0 #e3e9ef !important;
	transform: none !important;
	cursor: pointer;
}

/*
 * Наведение одинаковое у всех строк: светлый фон и тёмный текст, без красного.
 * Селектор длинный: у темы для ссылок панели при наведении
 * «… li a:hover { color: #000 !important; background: #ebebeb }».
 */
.off-canvas-navigation.light .rd-oc .rd-oc-panel .rd-oc-list li a:hover,
.off-canvas-navigation.light .rd-oc .rd-oc-panel .rd-oc-back:hover,
.off-canvas-navigation .rd-oc .rd-oc-panel .rd-oc-list li a:hover,
.off-canvas-navigation .rd-oc .rd-oc-panel .rd-oc-back:hover {
	color: #333e48 !important;
	background: #f3f1ec !important;
}

/* Фирменные пункты при наведении остаются фирменными */
.off-canvas-navigation.light .rd-oc .rd-oc-panel .rd-oc-list li a.rd-oc-all:hover,
.off-canvas-navigation.light .rd-oc .rd-oc-panel .rd-oc-list li a.is-current:hover,
.off-canvas-navigation.light .rd-oc .rd-oc-panel .rd-oc-back:hover,
.off-canvas-navigation .rd-oc .rd-oc-panel .rd-oc-list li a.rd-oc-all:hover,
.off-canvas-navigation .rd-oc .rd-oc-panel .rd-oc-list li a.is-current:hover,
.off-canvas-navigation .rd-oc .rd-oc-panel .rd-oc-back:hover {
	color: #694da1 !important;
}

/* Стрелка «дальше» у пунктов с вложенным экраном */
.off-canvas-navigation .rd-oc .rd-oc-next::after {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 4px 0 12px;
	border-top: 2px solid #4b566b;
	border-right: 2px solid #4b566b;
	transform: rotate(45deg);
}

/* Первый пункт первого экрана — вход в каталог */
.off-canvas-navigation .rd-oc .rd-oc-panel[data-rd-panel="root"] > .rd-oc-list:first-child .rd-oc-next {
	font-weight: 600;
	color: #333e48 !important;
}

/* «Назад» */
.off-canvas-navigation .rd-oc .rd-oc-back {
	justify-content: flex-start;
	font-weight: 500;
	color: #694da1 !important;
}

.off-canvas-navigation .rd-oc .rd-oc-back::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0 14px 0 4px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Название экрана */
.off-canvas-navigation .rd-oc-title {
	margin: 0;
	padding: 14px 19px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #694da1;
	background: #f6f4f4;
	border-bottom: 1px solid #e3e9ef;
}

/* «Весь каталог», «Смотреть весь раздел» и текущая страница — фирменным цветом */
.off-canvas-navigation .rd-oc .rd-oc-list .rd-oc-all,
.off-canvas-navigation .rd-oc .rd-oc-list .is-current {
	font-weight: 600;
	color: #694da1 !important;
}

.off-canvas-navigation .rd-oc :focus-visible {
	outline: 2px solid #694da1;
	outline-offset: -2px;
}

/* ============ Контакты ============ */

.off-canvas-navigation .rd-oc-label {
	margin: 0;
	padding: 18px 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #694da1;
}

.off-canvas-navigation .rd-oc-contacts {
	margin: 24px 12px calc(32px + env(safe-area-inset-bottom));
	padding: 0 16px 18px;
	border-radius: 16px;
	background: #f3f6f9;
}

.off-canvas-navigation .rd-oc-contact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.45;
	color: #333e48;
	border-bottom: 1px solid #e3e9ef;
}

.off-canvas-navigation .rd-oc-contact__label {
	font-size: 12px;
	font-weight: 500;
	color: #5a6e82; /* #687e93 сайта на фоне карточки даёт 3,9:1, нужно 4,5:1 */
}

/* Зона нажатия у телефонов и почты не меньше 44px, вид строки тот же */
.off-canvas-navigation .rd-oc-contact a {
	display: block;
	margin: -12px 0;
	padding: 12px 0;
	line-height: inherit;
	color: #333e48;
	text-decoration: none;
	border: 0;
}

.off-canvas-navigation .rd-oc-contact .rd-oc-contact__phone {
	font-size: 16px;
	font-weight: 700;
}

.off-canvas-navigation .rd-oc-contact .social-links {
	margin-top: 6px;
}

/* Значки мессенджеров белые, как в верхней полосе (то же правило темы красило их в серый) */
.off-canvas-navigation .rd-oc-contact .social-links > .menu > li > a {
	margin: 0;
	padding: 15px; /* круг 44px под палец */
	line-height: 1;
	color: #fff !important;
	border-bottom: 0;
}

/* У темы при нажатии круг становится #ebebeb, и белый значок пропадает */
.off-canvas-navigation .rd-oc-contact .social-links > .menu > li > a:hover,
.off-canvas-navigation .rd-oc-contact .social-links > .menu > li > a:focus {
	background-color: #5e4590;
}

.off-canvas-navigation .rd-oc-callback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 16px;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

/*
 * Низ меню не должен уходить под плавающие слои сайта: у них z-index больше,
 * чем у панели (10000), и нажатие на «Обратный звонок» попадало в них.
 * Кнопку чата Envybox прячем, пока открыто меню (после закрытия она на месте).
 * Куки-плашка есть в разметке только до согласия (после «Принимаю» удаляется),
 * поэтому, пока она есть, даём карточке запас снизу, чтобы прокрутить выше неё.
 */
body.off-canvas-active .ws-chat-btn-el-container {
	display: none !important;
}

body:has(#cookie-accept) .off-canvas-navigation .rd-oc-contacts {
	margin-bottom: 200px;
}

/*
 * Закрытая панель у темы только сдвинута за край экрана (left: -280px) и
 * остаётся в порядке Tab. visibility меняется вместе с анимацией темы.
 */
.off-canvas-navigation-wrapper:not(.toggled) .off-canvas-navigation,
.off-canvas-navigation-wrapper:not(.toggled) .off-canvas-navigation .rd-oc-panel {
	visibility: hidden; /* у экрана своё visible — без второй строки он остался бы в Tab */
}