/* Стили для контейнера сайдбара */
.sidebar {
    flex-basis: 30%; 
    flex-grow: 0;    
    flex-shrink: 0;  
    min-width: 20px; 
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Отступы между элементами */
    padding: 12px; 
    padding-top: 0;
    background-color: hsl(210, 20%, 95%); /* Светлый фон для сайдбара */
    z-index: 1000; /* Поверх другого контента */
    height: 380px; /* Устанавливаем авто-высоту для подстройки под содержимое */
    border-radius: 8px;
}

/* Стили для ссылок внутри сайдбара */
.menu-item-link {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет от родительского элемента */
}

/* Стили для кнопок в контейнере */
.menu-item-container {
    width: 100%;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: linear-gradient(135deg, hsl(0, 0%, 95%), hsl(0, 0%, 85%));
    padding: 15px; 
    box-sizing: border-box;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Плавный переход для всех свойств */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}

/* Анимация при наведении на контейнер */
.menu-item-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, hsl(0, 0%, 85%), hsl(0, 0%, 75%));
}

/* Анимация при нажатии на контейнер */
.menu-item-container:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, hsl(0, 0%, 80%), hsl(0, 0%, 70%));
}

/* Стили для изображений внутри кнопок */
.menu-item-container img {
    max-height: 100%;
    max-width: 50px; 
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Стили для текста внутри кнопок */
.menu-item-container {
    color: hsl(210, 20%, 20%); /* Темный текст для контраста */
    font-weight: 600; /* Полужирный текст */
    font-size: 1em; /* Умеренный размер текста */
    display: flex;
    align-items: center;
    gap: 10px; /* Умеренный отступ между текстом и иконкой */
    color: #203a44c5; /*Цвет текста*/
}

/* Анимация для текста при наведении */
.menu-item-link:hover .menu-item-container {
    color: hsl(210, 20%, 10%); /* Более темный текст при наведении */
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); /* Легкое свечение текста при наведении */
}



/* Медиазапрос для маленьких экранов для сайдбара!!! */
@media (max-width: 1220px) {
    .sidebar {
        flex-basis: 12%; /* Уменьшаем ширину сайдбара */
    }
    
    .menu-item-container {
        flex-direction: column; /* Разместить элементы вертикально */
        align-items: center; /* Центрировать по горизонтали */
        justify-content: center; /* Центрировать по вертикали */
        gap: 0;
        max-height: 100px;
    }
    .menu-item-container span {
        order: 2; /* Текст становится вторым */
        font-size: 14px; /* Размер шрифта */
        
    }
}

@media (max-width: 768px) {
    .sidebar {
        flex-basis: auto; /* Автоматическая ширина сайдбара */
        position: fixed; /* Закрепляет элемент относительно окна просмотра */
        bottom: 0; /* Располагает элемент в нижней части окна */
        left: 49.9%; /* Центрируем по горизонтали */
        transform: translateX(-50%); /* Смещаем на половину ширины для центрирования */
        display: flex;
        flex-direction: row;
        width: 100%; /* Ширина в 100% от окна просмотра */
        justify-content: center; /* Центрируем содержимое внутри сайдбара */
        animation: slideUp 0.5s ease-out; /* Добавляем анимацию */
        gap: 8px;
        padding: 6px;
        height: auto; /* Автоматическая высота по содержимому */
        box-sizing: border-box; /* Учитываем padding и border в расчете размеров */
        background: rgb(228, 232, 243);
        box-shadow: 0px -10px 8px rgba(51, 51, 51, 0.089);
        border-radius: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    
    .menu-item-container {
        flex-grow: 1; /* Позволяем элементам расширяться, чтобы занимать доступное пространство */
        flex-basis: 0; /* Базовая ширина элементов может быть нулевой, остальные параметры определяются flex-grow */
        border: 2px solid hsl(0, 4%, 80%); /*Бордюр*/
        display: flex;
        justify-content: center; /* Центрируем содержимое */
        align-items: center; /* Центрируем содержимое по вертикали */
        padding: 10px; /* Отступы внутри контейнера */
        gap: 0;
        box-sizing: border-box; /* Включаем padding в ширину */
        max-height: 100px;
        font-family: 'Roboto', sans-serif; /* Пример изменения шрифта */
    }
    
    .menu-item-container img {
        max-width: 100%; /* Изображение подстраивается под контейнер */
        max-height: 70px; /* Задаем максимальную высоту для изображений */
        height: auto;
        object-fit: contain; /* Сохраняем пропорции изображения */
    }
    .menu-item-container span {
        font-size: 14px; /* Уменьшаем размер шрифта для лучшего вхождения текста */
        text-overflow: ellipsis; /* Обрезка текста с троеточием, если он выходит за пределы */
        white-space: nowrap; /* Запрещаем перенос текста на новую строку */
        
    }
}
@media (max-width: 425px) {
    .menu-item-container{
        padding: 4px;
    }
    .menu-item-container span {
        font-size: 10px; /* Уменьшаем размер шрифта для лучшего вхождения текста */
        text-overflow: ellipsis; /* Обрезка текста с троеточием, если он выходит за пределы */
        white-space: nowrap; /* Запрещаем перенос текста на новую строку */
    }
    .sidebar {
        gap: 2px;
    }
}



/* Определяем анимацию плавного выезда снизу */
@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%); /* Начальная позиция снизу */
        opacity: 0; /* Прозрачность в начале */
    }
    to {
        transform: translateX(-50%) translateY(0); /* Финальная позиция */
        opacity: 1; /* Полная непрозрачность в конце */
    }
}