/* ===== ИСПРАВЛЕННЫЙ CSS С ДЕТАЛЬНЫМИ КОММЕНТАРИЯМИ ===== */
:root {
	/* Цветовая схема */
	--primary-color: #2563eb;          /* Основной синий цвет для акцентов */
	--primary-dark: #1d4ed8;           /* Темный оттенок для ховер-эффектов */
	--primary-light: #dbeafe;          /* Светлый фон для активных элементов */
	--secondary-color: #64748b;        /* Вторичный цвет для второстепенного текста */
	--background-color: #ffffff;       /* Основной цвет фона */
	--background-hover: #f8fafc;       /* Цвет фона при наведении */
	--text-color: #1e293b;             /* Основной цвет текста */
	--text-light: #64748b;             /* Светлый цвет для второстепенного текста */
	--border-color: #e2e8f0;           /* Цвет границ и разделителей */
	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);          /* Базовая тень */
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);     /* Тень для подменю */
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);     /* Тень для мобильных меню */
	
	/* Анимации */
	--transition: all 0.3s ease;           /* Основная анимация для плавных переходов */
	--transition-fast: all 0.15s ease;     /* Быстрая анимация для интерактивных элементов */
	--transition-slow: all 0.5s ease;      /* Медленная анимация для сложных переходов */
	
	/* Размеры */
	--menu-height: 60px;                   /* Высота десктопного меню */
	--submenu-width: 250px;                /* Ширина выпадающих подменю */
	--mobile-menu-width: 300px;            /* Ширина мобильного меню */
	--border-radius: 0.5rem;               /* Радиус скругления углов */
	
	/* Z-index иерархия - КРИТИЧЕСКИ ВАЖНО для правильного наложения */
	--overlay-z-index: 1998;               /* Оверлей затемнения - ПОД меню */
	--mobile-menu-z-index: 1999;           /* Мобильное меню - НАД оверлеем */
	--toggle-button-z-index: 2000;         /* Кнопка переключения - САМАЯ ВЕРХНЯЯ */
}

/* Сброс стилей для всех элементов */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Учитываем padding и border в ширине элемента */
}

/* Базовые стили body */
body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: var(--text-color);
	background-color: #f8fafc;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ===== ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ МЕНЮ ===== */
.menu-container {
	position: relative; /* Для абсолютного позиционирования подменю относительно контейнера */
}

/* ===== ДЕСКТОПНЫЕ МЕНЮ ===== */
.desktop-menu {
	/* Базовые стили для всех десктопных меню */
	display: flex;
	align-items: center;
	height: var(--menu-height);

	/* ДОБАВЛЕННО МНОЮ!!! ИЗМЕНИТЬ!	*/
	height: 3rem;
	margin-bottom: 8px;
	/* ДОБАВЛЕННО МНОЮ!!! ИЗМЕНИТЬ!	*/
}

/* Основной список десктопного меню */
.desktop-menu > ul {
	display: flex;
	list-style: none; /* Убираем стандартные маркеры списка */
	height: 100%;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Элементы меню первого уровня */
.desktop-menu > ul > li {
	position: relative; /* Для абсолютного позиционирования подменю */
	height: 100%;
}

/* Ссылки первого уровня */
.desktop-menu > ul > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1.5rem;
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	transition: var(--transition);
	position: relative;
	white-space: nowrap; /* Запрещаем перенос текста на новую строку */
}

/* Подсветка при наведении на элементы первого уровня */
.desktop-menu > ul > li > a:hover {
	background: var(--background-hover);
	color: var(--primary-color);
}

/* Активный элемент меню */
.desktop-menu > ul > li > a.active {
	color: var(--primary-color);
	background: var(--background-hover);
}

/* Индикатор активного элемента (полоска снизу) */
.desktop-menu > ul > li > a.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--primary-color);
}

/* Иконки в меню */
.desktop-menu .menu-icon {
	margin-right: 0.5rem;
	width: 18px;
	text-align: center;
	font-size: 0.9em;
}

/* Стили для элементов только с иконкой (без текста) */
.desktop-menu .icon-only .menu-icon {
	margin-right: 0; /* Убираем отступ справа, так как текста нет */
}

/* Стили для элементов только с текстом (без иконки) */
.desktop-menu .text-only {
	/* Дополнительных стилей не требуется, просто нет иконки */
}

/* ===== ПОДМЕНЮ ДЕСКТОПНОЙ ВЕРСИИ ===== */
/* Контейнер подменю */
.desktop-menu .submenu {
	position: absolute;
	top: 100%; /* Располагаем под родительским элементом */
	left: 0;
	width: var(--submenu-width);
	background: var(--background-color);
	box-shadow: var(--shadow-lg);
	border-radius: var(--border-radius);
	opacity: 0; /* Начальная прозрачность для анимации появления */
	visibility: hidden; /* Скрываем из потока документа */
	transform: translateY(10px); /* Начальное смещение для анимации */
	transition: var(--transition);
	z-index: 1000; /* Высокий z-index чтобы было поверх других элементов */
	padding: 0.5rem 0;
	border: 1px solid var(--border-color);
}

/* Показ подменю при наведении - ОСНОВНАЯ ЛОГИКА ДЕСКТОПНОГО МЕНЮ */
.desktop-menu > ul > li:hover > .submenu {
	opacity: 1; /* Показываем подменю */
	visibility: visible; /* Делаем видимым в потоке */
	transform: translateY(0); /* Убираем смещение */
}

/* Элементы подменю */
.desktop-menu .submenu li {
	position: relative; /* Для вложенных подменю второго уровня */
}

/* Ссылки в подменю */
.desktop-menu .submenu a {
	display: flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	color: var(--text-color);
	text-decoration: none;
	transition: var(--transition-fast);
	border-left: 3px solid transparent; /* Прозрачная граница для анимации */
}

/* Подсветка ссылок в подменю */
.desktop-menu .submenu a:hover {
	background: var(--background-hover);
	color: var(--primary-color);
	border-left-color: var(--primary-color); /* Цветная граница при наведении */
}

/* Активная ссылка в подменю */
.desktop-menu .submenu a.active {
	background: var(--background-hover);
	color: var(--primary-color);
	border-left-color: var(--primary-color);
}

/* Стрелка для элементов с подменю */
.desktop-menu .has-submenu > a::after {
	content: '\f078'; /* Иконка стрелки вниз из FontAwesome */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 0.7rem;
	margin-left: 0.5rem;
	transition: var(--transition-fast);
}

/* Вращение стрелки при наведении */
.desktop-menu > ul > li:hover > a::after {
	transform: rotate(180deg); /* Переворачиваем стрелку при показе подменю */
}

/* ===== ПОДМЕНЮ ВТОРОГО УРОВНЯ ===== */
/* Позиционирование подменю второго уровня */
.desktop-menu .submenu .submenu {
	top: -0.5rem; /* Выравниваем по верху родителя */
	left: 100%; /* Располагаем справа от родителя */
	transform: translateX(10px); /* Начальное смещение для анимации */
	margin-left: 0.5rem; /* Небольшой отступ чтобы не перекрывать родителя */
}

/* Показ подменю второго уровня при наведении */
.desktop-menu .submenu li:hover > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0); /* Убираем смещение */
}

/* Стрелка для подменю второго уровня */
.desktop-menu .submenu .has-submenu > a::after {
	content: '\f054'; /* Иконка стрелки вправо для вложенных меню */
	margin-left: auto; /* Выравниваем по правому краю */
}

/* ===== МОБИЛЬНЫЕ МЕНЮ ===== */
/* Контейнер для мобильного меню */
.mobile-menu-wrapper {
	position: relative; /* Для позиционирования мобильного меню относительно кнопки */
	display: none; /* По умолчанию скрываем на десктопе */
}

/* Кнопка переключения мобильного меню */
.mobile-menu-toggle {
	width: 50px;
	height: 50px;
	background: var(--primary-color);
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	transition: var(--transition);
	z-index: var(--toggle-button-z-index); /* Самая верхняя позиция */
}

/* Стили для гамбургер-меню (три полоски) */
.mobile-menu-toggle:not(.icon-only) {
	gap: 4px; /* Расстояние между полосками гамбургера */
}

.mobile-menu-toggle:not(.icon-only) span {
	display: block;
	width: 24px;
	height: 3px;
	background: white;
	border-radius: 2px;
	transition: var(--transition);
}

/* Кнопка только с иконкой (для пользовательского меню и инструментов) */
.mobile-menu-toggle.icon-only {
	font-size: 1.2rem;
}

/* Анимация гамбургера при активации - превращение в крестик */
.mobile-menu-toggle.active:not(.icon-only) span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active:not(.icon-only) span:nth-child(2) {
	opacity: 0; /* Средняя полоска исчезает */
}

.mobile-menu-toggle.active:not(.icon-only) span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Основной контейнер мобильного меню */
.mobile-menu {
	position: fixed;
	top: 0;
	left: -100%; /* Скрываем за левым краем экрана */
	width: var(--mobile-menu-width);
	height: 100vh; /* На всю высоту viewport */
	background: var(--background-color);
	box-shadow: var(--shadow-xl);
	transition: var(--transition);
	overflow-y: auto; /* Прокрутка если меню не помещается по высоте */
	z-index: var(--mobile-menu-z-index); /* Выше чем оверлей */
	display: flex;
	flex-direction: column;
}

/* Показ мобильного меню - сдвиг в видимую область */
.mobile-menu.active {
	left: 0;
}

/* ИСПРАВЛЕНИЕ: Затемнение фона - ТЕПЕРЬ РАБОТАЕТ ПРАВИЛЬНО */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: var(--overlay-z-index); /* Под мобильным меню */
	/* КРИТИЧЕСКИ ВАЖНО: по умолчанию отключаем клики */
	pointer-events: none;
}

/* Когда оверлей активен - включаем клики только для закрытия */
.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto; /* Включаем клики только когда активно */
}

/* ===== СТИЛИ ДЛЯ СОДЕРЖИМОГО МОБИЛЬНОГО МЕНЮ ===== */
/* Заголовок мобильного меню */
.mobile-menu-header {
	padding: 1.5rem;
	background: var(--primary-color);
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0; /* Запрещаем сжатие заголовка */
}

.mobile-menu-title {
	font-size: 1.25rem;
	font-weight: 600;
}

.mobile-menu-close {
	background: none;
	border: none;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
	transition: var(--transition);
}

.mobile-menu-close:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Контейнер для уровней меню */
.mobile-menu-levels {
	flex: 1; /* Занимает все доступное пространство между заголовком и низом */
	position: relative;
	overflow: hidden; /* Скрываем выходящие за границы уровни */
}

/* Уровни меню */
.menu-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--background-color);
	transform: translateX(100%); /* Начальное положение - справа за границей */
	transition: var(--transition);
	overflow-y: auto; /* Прокрутка внутри уровня если контент не помещается */
	display: flex;
	flex-direction: column;
}

/* Активный уровень меню - видимый в данный момент */
.menu-level.active {
	transform: translateX(0); /* Видимое положение */
}

/* Предыдущий активный уровень - сдвигается влево */
.menu-level.previous {
	transform: translateX(-100%);
}

/* Следующий уровень - сдвигается вправо (для анимации возврата) */
.menu-level.next {
	transform: translateX(100%);
}

/* Список элементов уровня */
.menu-level > ul {
	list-style: none;
	flex: 1;
}

/* Элементы мобильного меню */
.mobile-menu li {
	border-bottom: 1px solid var(--border-color); /* Разделители между пунктами */
}

/* Ссылки мобильного меню */
.mobile-menu a {
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
	color: var(--text-color);
	text-decoration: none;
	transition: var(--transition);
}

/* Подсветка ссылок в мобильном меню */
.mobile-menu a:hover {
	background: var(--background-hover);
}

/* Активная ссылка в мобильном меню */
.mobile-menu a.active {
	background: var(--primary-light);
	color: var(--primary-color);
}

/* Кнопка возврата */
.mobile-menu .back-button {
	background: var(--background-hover);
	border-bottom: 2px solid var(--border-color); /* Более выраженный разделитель */
}

.mobile-menu .back-button button {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1rem 1.5rem;
	background: none;
	border: none;
	color: var(--text-color);
	cursor: pointer;
	transition: var(--transition);
	font-size: 1rem;
}

.mobile-menu .back-button button:hover {
	background: var(--background-hover);
	color: var(--primary-color);
}

.mobile-menu .back-button i {
	margin-right: 0.5rem;
}

/* Стрелки в мобильном меню для элементов с подменю */
.mobile-menu .has-submenu > a::after {
	content: '\f054'; /* Иконка стрелки вправо */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-left: auto; /* Выравниваем по правому краю */
	transition: var(--transition);
	color: var(--text-light);
}

/* Стили для элементов только с иконкой в мобильном меню */
.mobile-menu .icon-only .menu-icon {
	margin-right: 0; /* Убираем отступ справа */
}

/* Стили для элементов только с текстом в мобильном меню */
.mobile-menu .text-only {
	/* Дополнительных стилей не требуется, просто нет иконки */
}

/* ===== КОНТЕЙНЕРЫ РАЗМЕЩЕНИЯ МЕНЮ ===== */
/* Шапка сайта */
.site-header {
	background: var(--background-color);
	box-shadow: var(--shadow);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 0 2rem;
}

/* Боковая панель */
.sidebar {
	position: fixed;
	top: 80px;
	right: 2rem;
	background: var(--background-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	padding: 1rem;
	z-index: 99;
}

/* Футер */
.site-footer {
	background: var(--background-color);
	border-top: 1px solid var(--border-color);
	padding: 2rem;
	margin-top: auto; /* Прижимаем к низу с помощью flex */
}

/* Основной контент */
.content {
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	flex: 1;
}

.demo-section {
	background: white;
	padding: 2rem;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	margin-top: 2rem;
}

.demo-section ul {
	margin-top: 1rem;
	padding-left: 1.5rem;
}

.demo-section li {
	margin-bottom: 0.5rem;
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (1024px и меньше) */
@media (max-width: 1024px) {
	.site-header {
		padding: 0 1rem;
	}
	
	.sidebar {
		right: 1rem;
	}
	
	.desktop-menu > ul > li > a {
		padding: 0 1rem;
	}
}

/* Мобильные устройства (768px и меньше) - ПЕРЕКЛЮЧЕНИЕ НА МОБИЛЬНУЮ ВЕРСИЮ */
@media (max-width: 768px) {
	.desktop-menu {
		display: none; /* Скрываем десктопные меню */
	}
	
	.mobile-menu-wrapper {
		display: block; /* Показываем мобильные меню */
	}
	
	.sidebar {
		position: static;
		margin: 1rem;
	}
	
	.site-header {
		padding: 0.5rem 1rem;
	}
	
	.mobile-menu {
		width: 280px;
	}
	
	.content {
		padding: 1rem;
	}
}

/* Маленькие мобильные устройства (480px и меньше) */
@media (max-width: 480px) {
	.mobile-menu {
		width: 100%; /* На всю ширину экрана */
	}
	
	.site-header, .site-footer {
		padding: 0.5rem;
	}
	
	.content {
		padding: 0.5rem;
	}
}

/* Большие экраны (1440px и больше) */
@media (min-width: 1440px) {
	.site-header {
		padding: 0 3rem;
	}
	
	.content {
		max-width: 1400px;
	}
}




/* Добавлено мной */
/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ УЛУЧШЕННОЙ ВЕРСИИ ===== */

/* Стили для иконок в мобильном меню */
.mobile-menu a i {
	width: 2rem;
	width: 1.8rem;
	text-align: center;
}

/* Улучшенные стили для ссылок мобильного меню */
.mobile-menu a {
	font-size: 1.1rem;
	font-weight: 600;
	-webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе на мобильных устройствах */
	tap-highlight-color: transparent;
}

/* Стили для кнопки возврата */
.mobile-menu .back-button button {
	font-weight: 600;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

.mobile-menu .back-button i {
	width: 1rem;
}

/* Увеличенная кнопка закрытия */
.mobile-menu-close {
	font-size: 1.8rem;
	margin: 0;
}

/* Специфичные стили для меню ASSALON */
nav#assalonMobileMenu .mobile-menu-header {
	padding: 0.65rem;
	background-color: rgb(21 107 84); /* Зеленый цвет для меню ASSALON */
}

/* Общие стили для заголовков мобильных меню */
.mobile-menu-header {
	background-color: rgb(21 107 84); /* Единый зеленый цвет для всех меню */
}

/* Подсветка кнопки возврата при наведении */
.mobile-menu .back-button button:hover {
	background-color: #d2e0da; /* Светло-зеленый фон */
	color: rgb(21 107 84); /* Темно-зеленый текст */
}

/* Подсветка ссылок при наведении */
.mobile-menu a:hover {
	background-color: #d2e0da; /* Светло-зеленый фон */
	color: rgb(21 107 84); /* Темно-зеленый текст */
}

/* Активные ссылки */
.mobile-menu a.active {
	background: #e8efed; /* Очень светлый зеленый фон */
	color: rgb(21 107 84); /* Темно-зеленый текст */
}

/* Стили для бейджей (меток) в меню */
.menu-badge {
	background: #ef4444; /* Красный фон для бейджей */
	color: white;
	border-radius: 9999px; /* Полностью скругленные углы */
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	margin-left: 0.5rem;
	font-weight: 600;
}

/* Стили для элементов с пользовательскими классами */
.logout-button {
	color: #ef4444 !important; /* Красный цвет для кнопки выхода */
}

.logout-button:hover {
	background: #fef2f2 !important; /* Светло-красный фон при наведении */
}




/* Добавлено мной 2 */
/* ===== ВАРИАНТ #1 ===== */
.desktop-menu .submenu a:hover {
	color: rgb(21 107 84);
	border-left-color: rgb(21 107 84);
	background-color: #d2e0da;
	background-color: #e8efed;
}

.desktop-menu .submenu {

}

.desktop-menu > ul > li:hover > a {
	background-color: #d2e0da;
	background-color: #e8efed;
	color: rgb(21 107 84);
}

.desktop-menu > ul > li:hover > a::after {
	transform: rotate(180deg);
}

.desktop-menu > ul > li > a.active::after {
	background-color: rgb(21 107 84);
}

.desktop-menu > ul > li > a.active {
	color: rgb(21 107 84);
	background-color: #e8efed;
}

.desktop-menu > ul > li > a:hover {
	color: rgb(21 107 84);
	background-color: #d2e0da;
	background-color: #e8efed;
}


.desktop-menu > ul > li > ul > li:hover > a::after {
	transform: rotate(180deg);
}

.desktop-menu > ul > li > ul > li:hover > a {
	background-color: #d2e0da;
	background-color: #e8efed;
	border-left-color: rgb(21 107 84);
	color: rgb(21 107 84);
}

.desktop-menu ul {
	list-style: none;
}

.desktop-menu li {
	list-style: none;
}

.desktop-menu > ul {
	column-gap: 2px;
}

.desktop-menu > ul > li > a.active::after {
	background: rgb(21 107 84);
	border-radius: 2px;
	bottom: -4px;
	content: "";
	display: block;
	height: 4px;
	left: 4px;
	pointer-events: none;
	position: absolute;
	right: 4px;
	width: auto;
}

.desktop-menu > ul > li > a.active {
	color: rgb(21 107 84);
	/* background-color: #e8efed; */
	/* background-color: hsla(0,0%,100%,.2); */
}




/* ===== ВАРИАНТ #2 ===== */
/*.desktop-menu .submenu a:hover {
	color: rgb(21 107 84);
	border-left-color: rgb(21 107 84);
	background-color: #d2e0da;
	background-color: #e8efed;
}

.desktop-menu .submenu {
	top: 0;
	padding-bottom: 0.5rem;
	padding-top: 65px;
	 padding-inline: 2px; 
	 background-color: #d2e0da; 
}

.desktop-menu > ul > li:hover > a {
	color: rgb(21 107 84);
	z-index: 1001;
	background-color: transparent;
}

.desktop-menu > ul > li:hover > a::after {
	transform: rotate(180deg);
	opacity: 0;
}

.desktop-menu > ul > li > a.active::after {
	background-color: rgb(21 107 84);
}

.desktop-menu > ul > li > a.active {
	color: rgb(21 107 84);
	background-color: #e8efed;
}

.desktop-menu > ul > li > a:hover {
	color: rgb(21 107 84);
	background-color: #d2e0da;
	background-color: #e8efed;
}

.desktop-menu > ul > li:hover > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.desktop-menu .submenu .submenu {
	padding: 0.5rem 0;
}

.desktop-menu > ul > li:hover > a:hover {
	background-color: transparent;
}*/




/* ===== ВАРИАНТ #3 ===== */
.site-footer {
	margin-top: 200px;
	background-color: transparent;
	max-width: 1140px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--border-color);
	padding: 0 0.5rem;
}

.menu-container {
	 position: relative;
	 display: block;
	 margin-bottom: 8px;
}

/*.desktop-menu {
	display: flex;
	align-items: center;
	height: var(--menu-height); 
	height: 48px; 
	height: 3rem;
	height: 3.5rem; 
	height: 4rem; 
	max-height: 3.5rem; 
	height: 100%; 
	margin-bottom: 8px;
}*/

.desktop-menu > ul > li {
	position: relative;
	height: 100%;
	border-radius: 8px;
	/* height: 3.5rem; */
}

.desktop-menu > ul > li > a {
	border-radius: 8px;
	color: white;
}

.desktop-menu > ul > li:hover > a {
	background-color: hsla(0,0%,100%,.2);
	color: white;
	border-radius: 8px;
}

.desktop-menu > ul > li > a.active {
	background-color: transparent;
	color: white;
	/* margin-bottom: 8px; */
}

.desktop-menu > ul > li > a:hover {
	color: white;
	background-color: hsla(0,0%,100%,.2);
}

.desktop-menu .submenu a {
	white-space: nowrap;
}

.desktop-menu .submenu {
    min-width: var(--submenu-width);
    width: auto;
}


/* НОВОЕ-НОВОЕ */
.desktop-menu > ul {
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.desktop-menu {
    display: flex;
    align-items: center;
    height: var(--menu-height);
    height: 3rem;
    height: auto;
    /* margin-bottom: 8px; */
}

.desktop-menu > ul > li > a {
	height: var(--menu-height);
	height: 3rem;
	margin-bottom: 8px;
}

.menu-container {
	margin-bottom: 0; 
}

.desktop-menu {
	height: auto;
	margin-bottom: 0; 
}

body {
	background-color: violet;
}

/* ===== НОВЫЕ СТИЛИ ДЛЯ УЛУЧШЕННОЙ ВЕРСИИ ===== */
/* СТИЛИ ДЛЯ ЭЛЕМЕНТОВ СКРЫТЫХ В ДЕСКТОПНОЙ ВЕРСИИ */
.desktop-menu .hide-icon .menu-icon {
    display: none !important;          /* СКРЫВАЕМ ИКОНКУ В ДЕСКТОПНОМ МЕНЮ */
}

.desktop-menu .hide-text {
/*    font-size: 0 !important;           /* СКРЫВАЕМ ТЕКСТ В ДЕСКТОПНОМ МЕНЮ */*/
}

/* СТИЛИ ДЛЯ ЭЛЕМЕНТОВ СКРЫТЫХ В МОБИЛЬНОЙ ВЕРСИИ */
.mobile-menu .hide-icon .menu-icon {
    display: none !important;          /* СКРЫВАЕМ ИКОНКУ В МОБИЛЬНОМ МЕНЮ */
}

.mobile-menu .hide-text {
/*    font-size: 0 !important;           /* СКРЫВАЕМ ТЕКСТ В МОБИЛЬНОМ МЕНЮ */*/
}

/* АДАПТИВНЫЕ СТИЛИ ДЛЯ РАЗНЫХ КОНФИГУРАЦИЙ ОТОБРАЖЕНИЯ */
.desktop-menu .icon-only-desktop .menu-icon {
    margin-right: 0 !important;        /* УБИРАЕМ ОТСТУП СПРАВА ОТ ИКОНКИ */
}

.mobile-menu .icon-only-mobile .menu-icon {
    margin-right: 0 !important;        /* УБИРАЕМ ОТСТУП СПРАВА ОТ ИКОНКИ */
}










li:has(.start_play) {
	margin-left: auto !important;
}










/* ===== ПРОСТЫЕ СТИЛИ ДЛЯ УМНОГО ПОЗИЦИОНИРОВАНИЯ ===== */
/* ВСТАВИТЬ В КОНЕЦ ФАЙЛА */

/* Подменю, раскрывающиеся вправо (стандартное поведение) */
.desktop-menu .submenu.submenu-right {
    left: 0;
    right: auto;
}

/* Подменю, раскрывающиеся влево (при нехватке места справа) */
.desktop-menu .submenu.submenu-left {
    left: auto;
    right: 0;
}

/* Для подменю второго уровня влево */
.desktop-menu .submenu .submenu.submenu-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Убедимся что подменю скрыты по умолчанию */
.desktop-menu .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* Показываем подменю при наведении */
.desktop-menu > ul > li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.desktop-menu .submenu li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


body {
	overflow-x: hidden;
}