#dynamic-mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 13;
	opacity: 0;
	visibility: hidden;
	transition: .4s;
}

#dynamic-mask.active{
	opacity: 1;
	visibility: visible;
}
.dynamic-sides{
	position: fixed;
    background-color: #f2f2f2;
    z-index: 13;
    transition: .4s;
    width: 100%;
    height: calc(100% - 70px)
}

@media (max-height: 450px){
	.dynamic-sides{
		height: 100%;
	}
}

/* MENU */
#dynamicMenu{
	top: -100%;
	left: 0;
}
#dynamicMenu.active{
	top: 0;
}


.dynamic-side-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: white;
	padding: 1rem;
	width: 100%;
}

.dynamic-side-body{
	overflow: auto;
	padding: 1rem;
	height: calc(100% - 60px);
}

/* Dynamic body */
.nav-dynamic-menu{
	flex-direction: column;
	row-gap: .75rem;
}

.nav-dynamic-menu li a{
	height: 52px;
	background-color: white;
	border-radius: 4px;
	display: flex;
	align-items: center;
	padding: .5rem 1rem;
	text-transform: uppercase;
	font-weight: 500;
	justify-content: space-between;
}

.nav-dynamic-menu li a.nav-consult{
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border: 1px solid #561A35;
	background-color: transparent;
	line-height: 1.2;
}

.nav-dynamic-menu li a.nav-consult b{
	font-weight: 600;
}

.nav-dynamic-menu li a.nav-consult span{
	text-transform: initial;
	font-weight: 400;
}

.dynamic-menu.dynamic-menu-recommendations{
	background-color: #f8f8f8;
}

.dynamic-side-title{
	font-size: 18px;
	font-weight: 600;
}

@media (min-width: 600px) and (max-width: 850px){
	#dynamicMenu,
	#dynamicClientMenu{
		top: 0;
		bottom: 0;
		left: auto;
		right: -50%;
		width: 50%;
		height: 100%;
		z-index: 13;
	}
	#dynamicMenu.active,
	#dynamicClientMenu.active{
		right: 0;
	}
}

/* CLIENT MENU */
#dynamicClientMenu{
	top: -100%;
	left: 0;
}
#dynamicClientMenu.active{
	top: 0;
}

#dynamicClientMenu .nav-sidebar li a{
    justify-content: space-between;
}

#dynamicClientMenu .nav-sidebar li:last-child a{
	color: #777777;
}

/* Dynamic Side Search */
#dynamicSearch{
	bottom: -100%;
	top: auto;
}
@media (max-width:900px){
	#dynamicSearch.dynamic-sides{
		height: 210px;
		top: auto;
		left: 0;
		right: 0;
		bottom: -50%;
	}
	#dynamicSearch.dynamic-sides.active{
		bottom: 0;
	}
	#dynamicSearch.dynamic-sides .dynamic-side-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: auto;
	}

	.form-search{
		position: relative;
	}
	.form-search input{
		height: 50px;
		width: 100%;
    	border: 1px solid #BBBBBB;
		line-height: 1;
		border-radius: 10px;
		padding: .5rem 1rem;
	}
	.form-search input:focus,
	.form-search input:focus-visible{
    	box-shadow: 0 0 0 .25rem rgba(204, 204, 204, .5);
    	outline: none;
	}
	.form-search button{
		height: 50px;
		width: 50px;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		position: absolute;
		top: 0;
		right: .5rem;
	}
}

/* Dynamic Filter */
#dynamicFilters{
	top: 0;
	right: -100%;
}

#dynamicFilters.active{
	right: 0;
}

#dynamicFilters .dynamic-side-body{
	height: calc(100% - 82px - 48px - 1.5rem);
}

.dynamic-side-footer{
	background-color: white;
	padding: .75rem;
	width: 100%;
}

.dynamic-side-footer .btn{
	height: 48px;
	font-size: 18px;
	font-weight: 500;
}

/* Dynamic Collections */
#dynamicCollection{
	top: 0;
	left: -100%;
}

#dynamicCollection.active{
	left: 0;
}

/* Меню навигации */
/* Анимации для мобильного меню */

.dynamic-sides {
    overflow: hidden;
    width: 100%;
}

.dynamic-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: none; /* Убираем transition, используем только анимации */
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.dynamic-menu.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

/* Анимация перехода вперед (открытие подменю) */
.dynamic-menu.slide-in-right {
    animation: slideInRight 0.3s ease-in-out forwards;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        visibility: hidden;
        opacity: 0;
    }
    1% {
        visibility: visible;
    }
    100% {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
}

/* Анимация перехода назад (возврат к предыдущему меню) */
.dynamic-menu.slide-in-left {
    animation: slideInLeft 0.3s ease-in-out forwards;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
    }
    1% {
        visibility: visible;
    }
    100% {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
}

/* Анимация выхода вперед (текущее меню уходит) */
.dynamic-menu.slide-out-left {
    animation: slideOutLeft 0.3s ease-in-out forwards;
    pointer-events: none; /* Отключаем клики во время анимации */
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    99% {
        visibility: visible;
    }
    100% {
        transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
    }
}

/* Анимация выхода назад (текущее меню уходит вправо) */
.dynamic-menu.slide-out-right {
    animation: slideOutRight 0.3s ease-in-out forwards;
    pointer-events: none; /* Отключаем клики во время анимации */
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    99% {
        visibility: visible;
    }
    100% {
        transform: translateX(100%);
        visibility: hidden;
        opacity: 0;
    }
}

/* Класс для скрытого меню (после завершения анимации) */
.dynamic-menu.hidden {
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    animation: none;
}