/* =========================================
   СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО МЕНЮ И КНОПОК
   ========================================= */

/* 1. Делаем выпадающее меню объемным и отделяем от фона страницы */
.menu_container ul li ul {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 0 !important;
    background: #ffffff !important;
    margin-top: 5px !important; /* Небольшой отступ от главного меню */
}

/* 2. Настраиваем сами пункты внутри выпадающего списка */
.menu_container ul li ul li a {
    padding: 10px 16px !important;
    margin: 2px 8px !important; /* Отступы по краям, чтобы фон-кнопка не прилипал к рамке */
    border-radius: 6px !important; /* Скругляем углы у фона при наведении */
    display: block !important;
    transition: all 0.2s ease !important;
}

/* 3. Эффект ПРИ НАВЕДЕНИИ на пункт выпадающего меню (появляется кнопка) */
.menu_container ul li ul li a:hover {
    background-color: #f0f9ff !important; /* Светло-голубой фон-подложка */
    color: #0284c7 !important;            /* Синий цвет текста */
    transform: translateX(4px);           /* Приятный микро-сдвиг текста вправо */
}

/* 4. Скрываем синюю линию (которую мы делали ранее) именно внутри выпадающего списка, 
      так как там теперь есть красивый фон-кнопка */
.menu_container ul li ul li a::after {
    display: none !important;
}

/* 5. (Опционально) Делаем главные пункты меню тоже похожими на кнопки */
.menu_container > ul > li > a:hover {
    background-color: #f8fafc !important;
    border-radius: 6px;
}