/* Базовые стили */
.burger-menu-container {
    position: relative;
}

/* Затемняющий фон */
.burger-overlay {
    position: fixed; /* Фиксируем на весь экран */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Начальное состояние: прозрачный фон */
    transition: background-color 0.5s ease; /* Плавное изменение цвета */
    z-index: 1001; /* Размещаем поверх контента, но под меню */
    pointer-events: none; /* Скрыто для взаимодействия */
}

/* Активное состояние (когда бургер-меню открыто) */
.burger-overlay.open {
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    pointer-events: auto; /* Включаем взаимодействие */
}

/* Меню */
.burger-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 385px;
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1002;
}

.burger-menu.open {
    left: 0;
}

.burger-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1E8194;
    padding: 24px;
}

.burger-menu-header .logo {
    width: 140px;
}

.close-menu {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.close-line {
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 8px;
    background-color: #FFFFFF; /* Цвет линий */
}

.top-line {
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* Поворачиваем верхнюю линию */
}

.bottom-line {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg); /* Поворачиваем нижнюю линию */
}

.menu-list-wrapper{
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.menu-list-wrapper .menu-list {
    display: flex;
    flex-direction: column; /* Вертикальное направление элементов списка */
    gap: 12px; /* Задаём расстояние между элементами */
    padding: 0; /* Убираем стандартные отступы у списка */
    margin: 0; /* Убираем отступы у списка */
    list-style: none; /* Убираем маркеры у списка */
    border-bottom: 1px solid #DEE2E6;
    padding-bottom: 16px;
}

.menu-list a {
    text-decoration: none;
    color: #212529;
    font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    padding: 0 8px;
}

.catalog-menu-btn-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;

}

.catalog-menu-btn-wrapper .catalog-menu-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #DEE2E6;
    border-radius: 40px;
    padding: 16px;
    text-align: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 21px;
    color: #6C757D;
}

.catalog-menu-btn-wrapper .catalog-menu-btn:hover {
    background-color: rgb(202, 202, 202) !important;
}

.menu-list .user-profile{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DEE2E6;
    padding-left: 16px;
    padding-bottom: 20px;
    margin-top: 4px;
    cursor: auto;
}

.user-info{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.catalog-cart-wishlist-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.catalog-cart-wishlist-item .catalog-menu-cart-content{
    display: flex;
    align-items: center;
    gap: 16px;
}

.catalog-menu-wishlist {
    border-bottom: 1px solid #DEE2E6;
    padding-bottom: 16px;
}

.catalog-menu-wishlist .wishlist-count, .catalog-menu-cart .basket-count {
    padding: 4px 10px; /* Уменьшаем верхний и нижний отступы */
    border-radius: 20px; /* Меньше радиус для более приплюснутой формы */
    background-color: #28A745;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1; /* Устанавливаем нормальную высоту строки */
}

.catalog-menu-item a{
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 12px;
}

.burger-menu-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    color: #9BA2A9;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 24px;
}
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 16px;
}

.social-links a {
    margin: 0 5px;
    text-decoration: none;
    color: #333;
}

.social-links a:hover {
    color: #007bff;
}

.burger-lang-select{
    position: relative;
    background-color: transparent;
    display: flex;
    justify-content: center;
    border-radius: 0 0 30px 30px;
}

.burger-lang-select::before{
    position: absolute;
    content: "";
    height: 18px;
    width: 1px;
    background-color: #FFFFFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.burger-lang-select button{
    width: 100%;
    height: 100%;
    font-size: 0.875rem;
    line-height: 18.2px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border: none;
    background-color: transparent;
    display: flex;
    gap: 6px;
}

.dropdown-wrapper {
    border: none;
    transition: margin-top 0.3s ease-in-out; /* Плавный переход */
}

.burger-lang-btn.active {
    color: white;
}

.burger-lang-btn.active img {
    filter: brightness(100%);
}

/* Стилизация полосы прокрутки */
.burger-menu::-webkit-scrollbar {
    width: 8px; /* Ширина полосы прокрутки */
}

/* Стилизация фона полосы прокрутки */
.burger-menu::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Светлый фон для трека полосы прокрутки */
    border-radius: 10px; /* Скругление углов */
}

/* Стилизация самого ползунка прокрутки */
.burger-menu::-webkit-scrollbar-thumb {
    background-color: #1E8194; /* Цвет ползунка под цвет хедера */
    border-radius: 10px; /* Скругление углов ползунка */
    border: 2px solid #fff; /* Белая рамка вокруг ползунка для выделения */
}

/* При наведении на ползунок, его цвет становится светлее */
.burger-menu::-webkit-scrollbar-thumb:hover {
    background-color: #146f7e; /* Немного темнее цвет при наведении */
}

/* Дополнительно можно добавить стиль для углов */
.burger-menu::-webkit-scrollbar-corner {
    background-color: #f1f1f1; /* Цвет уголков полосы прокрутки */
}

.no-scroll {
    position: fixed; /* Фиксируем позицию */
    top: 0;
    left: 0;
    width: 100%; /* Задаем ширину страницы */
    overflow-y: scroll; /* Оставляем полосу прокрутки */
}
.catalog-categories {
    position: fixed;
    top: 0;
    left: -100%; /* Каталог скрыт за пределами экрана */
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1100;
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    padding: 24px;
}

.catalog-categories.active {
    left: 0; /* Появляется, сдвигаясь с правой стороны */
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343A40;
}

.catalog-header .back-to-category,
.catalog-header-content .back-to-sub-category {
    background: none;
    border: none;
    color: #343A40;
    font-size: 1rem;
    cursor: pointer;
}

.catalog-header .close-menu .close-line{
    background-color: #6C757D;
}

.catalog-categories .catalog-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 16px;
}

.catalog-list-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-radius: 41px;
}

.catalog-list-item a:hover{
    background-color: #1E8194;
    color: #FFFFFF;
}

.catalog-list-item a:hover svg path{
    fill: white;
}

.catalog-list-two li a:hover svg circle,  .catalog-list-two li a:hover svg rect{
    fill: white;
}

.catalog-list-two li a:hover {
    background-color: #6C757D;
}

.catalog-list-item .catalog-list-item__content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.catalog-list-item__new, .catalog-list-item__sale{
    background-color: #B9EAF3;
    border-radius: 41px;
}

.catalog-list-item__sale {
    width: 95%;
}

.sub-categories, .third-level {
    position: fixed;
    top: 0;
    left: -100%; /* Каталог скрыт за пределами экрана */
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1100;
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    padding: 24px;
    cursor: auto;
}

.sub-categories.active {
    left: 0;
}

.third-level.active {
    left: 0;
}

.sub-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    cursor: auto;
}

.sub-category-header .catalog-header-content,
.third-level .catalog-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}

.sub-category-header .back-to-category,
.catalog-header-content .back-to-sub-category {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #212529; 
    border-radius: 50%; 
    cursor: pointer;
}

.sub-category-header .back-to-category svg path{
    width: 25px;
    height: 25px;
    fill: #FFFFFF; 
}

.sub-category-header .icons {
    display: flex;
    gap: 10px; 
}

@media (max-width: 1024px){
    .burger-menu, .catalog-categories, .sub-categories, .third-level {
        width: 40%;
    }

}

@media (max-width: 768px) {
    .burger-menu, .catalog-categories, .sub-categories, .third-level {
        width: 75%;
    }
}

@media (max-width: 480px){
    .burger-menu, .catalog-categories, .sub-categories, .third-level{
        width: 85%;
    }

    .burger-menu-header {
        padding: 12px;
    }

    .menu-list-wrapper {
        padding: 12px;
    }

    .lang-select {
        padding: 12px 0;
    }
}