/* Навбар */
.nav {
	position: relative;
}

/* Блок: mega-menu (десктоп) */
.mega-menu {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__item {
	display: flex;
	margin: 0;
	width: auto;
	position: relative;
	align-items: center;
	justify-content: space-between;
}

.mega-menu__link {
	display: block;
	padding: 2rem 0.75rem;
	text-decoration: none;
	font-weight: bold;
	color: inherit;
}

/* Элемент: mega-menu__dropdown (для мега-меню на десктопе) */
.mega-menu__dropdown {
	display: none;
	position: fixed;
	left: 0;
	top: 129px;
	width: 100%;
	background-color: #ffffff;
	    box-shadow: 0 10px 20px 0 rgba(165, 170, 188, .2);
	z-index: 1000;
	color: black;
	border: 1px solid #e7e7e7
}

/* Элемент: mega-menu__container */
.mega-menu__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 0;
	display: flex;
	justify-content: space-between;
}

/* Элемент: mega-menu__columns */
.mega-menu__columns {
	column-count: 5;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

/* Элемент: mega-menu__column */
.mega-menu__column {
	flex: 1;
	margin: 0 10px;
}

.mega-menu__column-title {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: bold;
	list-style: none;
}

.mega-menu__column-title ul {
	margin-top: 0;
}

/* Классическое выпадающее меню (десктоп) */
.mega-menu__submenu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	background-color: #f9f9f9;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	color: black;
	list-style: none;
	padding: 10px 0;
	margin: 0;
}

.mega-menu__subtitle {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.mega-menu__submenu .mega-menu__subitem {
	position: relative;
	margin: 0;
}

.mega-menu__submenu .mega-menu__sublink {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: var(--text-color);
	white-space: nowrap;
}

.mega-menu__submenu .mega-menu__sublink:hover {
	background-color: #eee;
}

/* Вложенные подменю (десктоп) */
.mega-menu__submenu .mega-menu__submenu {
	left: 100%;
	top: 0;
}

.mega-menu__submenu .mega-menu__subitem:hover > .mega-menu__submenu {
	display: block;
}

/* Общие стили */
.mega-menu__sublist {
	font-size: 14px;
	font-weight: normal;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mega-menu__subitem {
	margin-bottom: 0.5rem;
}

.mega-menu__sublink {
	text-decoration: none;
	color: var(--text-color);
}

.mega-menu__sublink:hover {
	text-decoration: underline;
}

/* Показ на hover (десктоп) */
.mega-menu__item:hover .mega-menu__dropdown, .mega-menu__item:hover > .mega-menu__submenu {
	display: block;
}

.mega-menu__column-title:hover > ul, .mega-menu__subitem:hover > .mega-menu__submenu {
	display: block;
}

/* Мобильное меню */
.mobile-menu-toggle {
	display: none;
	cursor: pointer;
	padding: 15px;
	font-size: 24px;
}

/* Стрелка для подменю */
.mobile-menu__arrow {
	display: none;
 
}
.desktop-menu__arrow {
 content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjhjMDAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+);

}
.mobile-menu__arrow:before {
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjFmMWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tcmlnaHQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPg==);

}

.mobile-menu__arrow.active {
	/*transform: rotate(90deg);*/
}

.mobile-back {
	display: none;
}

/* Классическое маленькое меню — активировать dropdown */
.small-menu > .mega-menu__submenu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	background: #f9f9f9;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	padding: 10px 0;
	z-index: 1000;
}

/* Показ on-hover */
.small-menu:hover > .mega-menu__submenu {
	display: block;
}

/* Медиа-запрос для мобильных (max-width: 1024px) */
@media (max-width:1024px) {
	.nav {
		position: relative;
		width: 100%;
	}

	.mobile-menu-toggle {
		display: block;
	}

	/* Скрыть десктопные дропдауны */
	.mega-menu__dropdown, .mega-menu__submenu, .mega-menu__column-title > .mega-menu__sublist {
		display: flex;
		position: fixed;
		top: 57px;
		left: 100%;
		width: 100%;
		height: 100vh;
		z-index: 999;
		transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
		opacity: 0;
		box-shadow: none;
	}

	.mega-menu__dropdown {
		background-color: #ffffff;
		padding: 0;
	}

	.mega-menu__submenu {
		background-color: #444;
		padding: 0;
	}

	.mega-menu__subtitle {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0;
	}

	.mega-menu__column-title > .mega-menu__sublist {
		background-color: #ffffff;
		padding: 0;
	}

	.mega-menu__dropdown.active, .mega-menu__submenu.active, .mega-menu__sublist.active {
		display: block;
		left: 0;
		opacity: 1;
		overflow: scroll;
	}

	/* Основное меню в мобильном */
	.mega-menu {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		transition: left 0.3s ease-in-out;
		z-index: 1000;
		flex-direction: column;
	}

	.mega-menu.active {
		display: block;
		left: 0;
	}

	.mega-menu__item {
		margin: 0;
		width: 100%;
		position: relative;
	}

	.mega-menu__link {
		color: var(--text-color);
		padding: 1rem 0;
		transition: background-color 0.2s ease;
	}

	.mega-menu__sublink {
		display:  flex;
		gap:0.5rem;
		padding: 0.75rem 1rem;
		transition: background-color 0.2s ease;
	}


	.mega-menu__column-title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		margin: 0;
	}

	.mega-menu__subitem {
		position: relative;
	}

	/* Адаптация мега-меню для мобильного */
	.mega-menu__container {
		max-width: none;
		margin: 0;
		padding: 0;
		display: block;
		height: 100%;
		overflow-y: auto;
	}

	.mega-menu__columns {
		display: flex;
		width: 100%;
		height: 100%;
		padding: 0;
		flex-direction: column;
	}

	.mega-menu__column {
		margin: 0 0.5rem 0 0;
		flex: none;
	}

	.mega-menu__columns ul, .mega-menu__submenu ul {
		padding-left: 0;
	}

	.desktop-menu__arrow {
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMjFmMWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tcmlnaHQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPg==);

}

	/* Кнопка назад */
	    .mobile-back {
        position: sticky;
        top: 0;
        display: flex;
        font-weight: bold;
        font-size: 18px;
        padding: 1rem;
        text-decoration: none;
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
        cursor: pointer;
        transition: background-color 0.2s ease;
        list-style: none;
        z-index: 1;
        align-items: center;
        background: #ffffff;
        gap: 8px;
    }

	.mobile-back:before {
		content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDI0TDEyIDE2TDIwIDgiIHN0cm9rZT0iIzIyMUYxRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
        width: 32px;
        height: 32px; 
	}

	.mega-menu.active, .mega-menu__dropdown.active, .mega-menu__submenu.active, .mega-menu__sublist.active {
		animation: slideIn 0.3s ease-in-out forwards;
	}

	@keyframes slideOut {
		from {
			left: 0;
		}

		to {
			left: 100%;
		}

	}

	.mega-menu__dropdown.slide-out, .mega-menu__submenu.slide-out, .mega-menu__sublist.slide-out {
		animation: slideOut 0.3s ease-in-out forwards;
	}

	/* Анимация для слайдов */
	@keyframes slideIn {
		from {
			left: 100%;
		}

		to {
			left: 0;
		}

	}

}