/**
 * Стили для иконочного переключателя темы (Солнце/Луна)
 */

/* Контейнер кнопки */
.ec-header-mode-switch {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
    display: inline-flex !important; /* Гарантируем, что кнопка занимает место */
    align-items: center;
    justify-content: center;
    outline: none;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

/* Базовые стили для обеих SVG иконок */
.ec-header-mode-switch svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #444; /* Цвет солнца в светлой теме */
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

/* --- СОСТОЯНИЕ: СВЕТЛАЯ ТЕМА (по умолчанию) --- */
.ec-header-mode-switch .svg-moon {
    display: none !important; /* Скрываем луну */
}
.ec-header-mode-switch .svg-sun {
    display: block !important; /* Показываем солнце */
}

/* --- СОСТОЯНИЕ: ТЕМНАЯ ТЕМА (когда у body есть класс dark) --- */
body.dark .ec-header-mode-switch svg {
    stroke: #fff; /* Цвет иконок в темной теме */
}

body.dark .ec-header-mode-switch .svg-sun {
    display: none !important; /* Скрываем солнце */
}

body.dark .ec-header-mode-switch .svg-moon {
    display: block !important; /* Показываем луну */
}

/* Эффект при наведении */
.ec-header-mode-switch:hover {
    transform: scale(1.1);
}

.ec-header-mode-switch:hover svg {
    stroke: #ff9800 !important; /* Оранжевый при наведении */
}

/* Адаптивность для мобильных (если нужно скрыть/показать) */
@media (max-width: 991px) {
    .ec-header-mode-switch {
        margin-right: 10px;
        margin-left: 0;
    }
}