/*
Theme Name: Атмосфера 9
Theme URI: https://atmosfera9.ru
Author: Твое Имя
Description: Премиум тема для деревянных окон и дверей.
Version: 1.0.0
*/


/* Dropdown меню - исправление */
.dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Показываем ТОЛЬКО ПЕРВЫЙ уровень при наведении на главный пункт */
.dropdown > .dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
}

.dropdown:hover > .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Базовые стили для всех выпадающих меню */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background: white;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
    border-radius: 16px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 50;
    border: 1px solid #f0f0f0;
}

/* Мостик для предотвращения потери ховера */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.dropdown-item {
    display: block;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #737373;
    border-radius: 12px;
    transition: all 0.2s;
    text-decoration: none;
}

.dropdown-item:hover {
    background: #fafafa;
    color: #1E4A3B;
}

.dropdown:hover > a {
    color: #1E4A3B;
}

/* СТИЛИ ДЛЯ ВТОРОГО УРОВНЯ */

/* Контейнер для пункта с подменю */
.dropdown-content .dropdown {
    position: relative;
}

/* Стиль для пунктов, у которых есть подменю */
.dropdown-item-with-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px; /* Добавляем отступ между текстом и стрелкой */
    white-space: nowrap; /* Запрещаем перенос текста */
}

/* Стрелка для подменю */
.dropdown-item-with-children svg {
    flex-shrink: 0; /* Запрещаем сжиматься */
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.dropdown-item-with-children:hover svg {
    opacity: 1;
}

/* Само подменю второго уровня */
.dropdown-content .dropdown .dropdown-content {
    position: absolute;
    top: 50px !important;
    left: calc(100% + 8px);
    width: 280px;
    background: white;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
    border-radius: 16px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999;
    border: 1px solid #f0f0f0;
}

/* Показываем подменю второго уровня при наведении */
.dropdown-content .dropdown:hover > .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Мостик для плавного перехода - делаем побольше */
.dropdown-content .dropdown .dropdown-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -16px; /* Увеличиваем область мостика */
    width: 16px;
    height: 40px;
    background: transparent;
}

/* Убеждаемся, что текст не переносится */
.dropdown-content .dropdown-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Для пунктов с подменю - текст может быть длинным */
.dropdown-content .dropdown-item-with-children span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Ограничиваем ширину текста */
}