/* Стили для кастомного хедера */

/* Обертка хедера - "липкий", на всю ширину, поверх остальных блоков */
.custom-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50; /* Поверх остальных элементов */
    /* Эффект матового стекла (frosted glass) с затемнением 30% */
    background-color: rgba(0, 0, 0, 0.2); /* Темный фон с 20% непрозрачности */
    backdrop-filter: blur(5px); /* Размытие фона для эффекта матового стекла */
    -webkit-backdrop-filter: blur(5px); /* Поддержка Safari */
    transition: background-color 0.6s ease, backdrop-filter 0.6s ease; /* Плавный переход */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Более темная тень */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Светлая граница снизу для контраста */
}

/* Класс для хедера при прокрутке */
.custom-header-wrapper.scrolled {
    background-color: white; /* Белый фон при прокрутке */
    backdrop-filter: none; /* Убираем эффект матового стекла при прокрутке */
    -webkit-backdrop-filter: none; /* Убираем эффект для Safari */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Более темная граница при прокрутке */
}

/* Контейнер содержимого хедера */
.custom-header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px; /* Отступы по бокам */
    height: 80px; /* Высота хедера */
    display: flex;
    align-items: center; /* Центрирование по вертикали */
    justify-content: space-between; /* Центрирование элементов */
    background-color: transparent; /* Всегда прозрачный */
}

/* Стили для логотипа */
.custom-logo img {
    max-height: 60px; /* Максимальная высота логотипа */
    width: auto; /* Сохранение пропорций */
}

/* Стили для навигации */
.custom-nav {
    flex-grow: 1; /* Занимает доступное пространство */
    display: flex;
    align-items: center;
}

.custom-main-menu {
    display: flex;
    align-items: center;
    height: 100%; /* Занимает всю высоту контейнера */
    margin: 10px 20px;
    padding: 0;
    justify-content: center;

}

.custom-main-menu > div {
    margin-right: 30px; /* Отступ между пунктами меню */
    height: 100%; /* Занимает всю высоту контейнера */
    position: relative; /* Для позиционирования подменю */
}

.custom-main-menu > div:last-child {
    margin-right: 0; /* Убираем отступ у последнего элемента */
}

.custom-main-menu > div > a {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    color: white; /* Цвет текста по умолчанию (для прозрачного фона) */
    font-weight: bold;
    transition: color 0.3s ease; /* Плавный переход цвета */
}

/* Темный текст для меню на неглавных страницах и при прокрутке */
.custom-header-wrapper.scrolled .custom-main-menu > div > a,
body:not(.home) .custom-header-wrapper .custom-main-menu > div > a {
    color: #000000;
}

/* Стили для подменю (если есть) */
.custom-sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white; /* Белый фон */
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10000;
    padding: 0;
    margin: 0;
}

.custom-main-menu > div:hover > .custom-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-sub-menu > div {
    width: 100%;
    margin-right: 0;
    border-bottom: 1px solid #eee;
}

.custom-sub-menu > div:last-child {
    border-bottom: none;
}

.custom-sub-menu > div > a {
    color: black !important; /* Текст черный, важный стиль */
    padding: 10px 15px;
    display: block;
    white-space: nowrap;
}

/* Шеврон для пункта меню с подменю */
.custom-main-menu .menu-item-has-children > a::after {
    content: ''; /* Убираем существующий символ */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff; /* Цвет шеврона (белый) */
    border-right: 2px solid #ffffff; /* Цвет шеврона (белый) */
    transform: rotate(135deg);
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* Вращаем шеврон при открытии подменю (наведении) */
.custom-main-menu .menu-item-has-children:hover > a::after {
    transform: rotate(-45deg);
    margin-top: -5px; /* Корректируем позицию после вращения */
}

/* Стили для темной версии хедера (когда он белый) */
.custom-header-wrapper.scrolled .custom-main-menu .menu-item-has-children > a::after,
body:not(.home) .custom-header-wrapper .custom-main-menu .menu-item-has-children > a::after {
    border-top-color: #000000; /* Черный цвет шеврона */
    border-right-color: #000000; /* Черный цвет шеврона */
}

/* Стили для иконок */
.custom-icons {
    height: 100%; /* Гарантируем высоту для дочерних элементов */
    display: flex;
    align-items: center;
}

.custom-icons .header-icons-container {
    display: flex;
    align-items: center;
    height: 100%; /* Занимает всю высоту контейнера */
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100; /* Убедимся, что иконки поверх фона хедера */
}

.custom-icons .header-icons-container > div {
    margin-left: 16px; /* Отступ между иконками 16px */
    height: 100%; /* Занимает всю высоту контейнера */
    display: flex;
    align-items: center; /* Центрирование иконки по вертикали */
}

.custom-icons .header-icons-container > div:first-child {
    margin-left: 0; /* Убираем отступ у первой иконки */
}

.custom-icons .header-icons-container a {
    color: #ffffff !important; /* Белый цвет иконок по умолчанию */
    text-decoration: none;
    font-size: 20px !important; 
    transition: color 0.3s ease; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px; 
}

.custom-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Темные иконки на неглавных страницах и при прокрутке */
.custom-header-wrapper.scrolled .custom-icons .header-icons-container a,
body:not(.home) .custom-header-wrapper .custom-icons .header-icons-container a {
    color: #000000 !important;
}

/* Независимые стили для иконок поиска и корзины */
.custom-icons .header-icons-container #phone-btn a,
.custom-icons .header-icons-container #email-btn a,
.custom-icons .header-icons-container #search-btn a,
.custom-icons .header-icons-container .nectar-woo-cart a {
    color: #ffffff !important; /* Белый цвет иконок */
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Стили для иконок при прокрутке страницы и на внутренних страницах */
.custom-header-wrapper.scrolled .custom-icons .header-icons-container #phone-btn a,
.custom-header-wrapper.scrolled .custom-icons .header-icons-container #email-btn a,
.custom-header-wrapper.scrolled .custom-icons .header-icons-container #search-btn a,
.custom-header-wrapper.scrolled .custom-icons .header-icons-container .nectar-woo-cart a,
body:not(.home) .custom-header-wrapper .custom-icons .header-icons-container #phone-btn a,
body:not(.home) .custom-header-wrapper .custom-icons .header-icons-container #email-btn a,
body:not(.home) .custom-header-wrapper .custom-icons .header-icons-container #search-btn a,
body:not(.home) .custom-header-wrapper .custom-icons .header-icons-container .nectar-woo-cart a {
    color: #000000 !important; /* Темный цвет иконок */
}

/* Специфические стили для иконки корзины */
.nectar-woo-cart .cart-outer {
    height: 100%;
    display: flex;
    align-items: center;
}

.nectar-woo-cart .cart-contents {
    height: 100%;
    display: flex;
    align-items: center;
}

.nectar-woo-cart .cart-icon-wrap {
    height: 100%;
    display: flex;
    align-items: center;
}

.nectar-woo-cart .cart-wrap {
    margin-left: 5px; /* Отступ между иконкой и числом */
}

/* Стили для мобильной версии */
@media (max-width: 768px) {
    .custom-header-container {
        padding: 0 15px; /* Меньше отступы на мобильных */
        height: 60px; /* Меньше высота */
        justify-content: space-between;
    }

    .custom-logo img {
        max-height: 54px !important; /* Уменьшаем логотип на 10% */
    }

    .custom-icons {
        margin-right: 5px; /* Отступ от правого края экрана */
    }

    .custom-nav {
        display: none; /* Скрываем десктопное меню на мобильных */
    }

    .custom-icons .header-icons-container div.slide-out-widget-area-toggle {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin-left: 12px;
    }

    .custom-icons .header-icons-container div.slide-out-widget-area-toggle a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Центрируем иконку внутри ссылки */
        height: 100% !important;
        width: 32px;
        color: white; /* Цвет по умолчанию */
        transition: color 0.3s ease;
    }

    /* Темный гамбургер на внутренних страницах и при скролле */
    .custom-header-wrapper.scrolled .slide-out-widget-area-toggle a,
    body:not(.home) .custom-header-wrapper .slide-out-widget-area-toggle a {
        color: #000000 !important;
    }

    .hamburger-svg {
        width: 28px;
        height: 28px;
        transition: transform 0.3s ease;
    }

    .hamburger-svg line {
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }

    /* Позиционирование линий в закрытом состоянии */
    .line-top {
        transform: translateY(-7px);
    }

    .line-bot {
        transform: translateY(7px);
        stroke-dasharray: 14 20;
        stroke-dashoffset: -6;
    }

    /* Анимация превращения в крестик */
    .slide-out-widget-area-toggle a.open .hamburger-svg .line-top {
        transform: translateY(0) rotate(45deg);
    }

    .slide-out-widget-area-toggle a.open .hamburger-svg .line-mid {
        opacity: 0;
        transform: scaleX(0);
    }

    .slide-out-widget-area-toggle a.open .hamburger-svg .line-bot {
        stroke-dasharray: 20 20;
        stroke-dashoffset: 0;
        transform: translateY(0) rotate(-45deg);
    }
}

/* Стили для счетчика корзины */
.nectar-woo-cart .cart-icon-wrap {
    position: relative;
}

.nectar-woo-cart .cart-icon-wrap .cart-wrap span {
    background-color: #05ad40;
    color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -10px;
}

/* Анимация вспышки и вращения */
@keyframes flash-and-spin {
    0% {
        transform: scale(1) rotateY(0deg);
        background-color: #05ad40; /* Начальный зеленый цвет */
    }
    25% {
        transform: scale(1.5) rotateY(180deg);
        background-color: #ffde59; /* Ярко-желтая вспышка */
    }
    50% {
        transform: scale(1.5) rotateY(180deg);
        background-color: #ffde59; /* Держим вспышку */
    }
    100% {
        transform: scale(1) rotateY(360deg);
        background-color: #05ad40; /* Возвращаем зеленый цвет */
    }
}

/* Класс для запуска анимации */
.nectar-woo-cart .cart-icon-wrap .cart-wrap span.item-added {
    animation: flash-and-spin 0.7s ease-out; /* Увеличим длительность для более плавного эффекта */
}

/* ФИКС ДЛЯ AJAX SEARCH PRO - УСТРАНЕНИЕ КОНФЛИКТА Z-INDEX */
/* Контейнер поиска должен быть поверх хедера */
#ajaxsearchpro1_1,
#ajaxsearchpro1_2,
div.asp_m.asp_m_1 {
    position: relative;
    z-index: 101 !important; /* Выше чем z-index хедера (100) */
}

/* Поле ввода поиска */
#ajaxsearchpro1_1 .probox .proinput input.orig,
#ajaxsearchpro1_2 .probox .proinput input.orig,
div.asp_m.asp_m_1 .probox .proinput input.orig {
    position: relative;
    z-index: 102 !important;
}

/* Оверлей поиска (уже имеет высокий z-index, но на всякий случай) */
#wpd_modal_bg {
    z-index: 9999998 !important;
}

#wpd_modal {
    z-index: 99999999 !important;
}


/* Стили для выпадающей панели поиска */
#dropdown-search-panel {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    padding: 15px;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

.dropdown-search-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.dropdown-search-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Стили для Ajax Search Pro в выпадающей панели */
#dropdown-search-panel .asp_m.asp_m_1 .probox {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .proinput input.orig {
    background-color: #f8f9fa !important;
    color: #333333 !important;
    border: none !important;
    border-radius: 6px !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .proinput input.orig:focus {
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .promagnifier {
    background-color: #007cba !important;
    border-color: #007cba !important;
    border-radius: 0 6px 6px 0 !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .promagnifier .innericon {
    background-color: #ffffff !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .promagnifier:hover {
    background-color: #005a87 !important;
    border-color: #005a87 !important;
}

#dropdown-search-panel .asp_m.asp_m_1 .proinput input.orig::placeholder {
    color: #6c757d !important;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    #dropdown-search-panel {
        width: 280px;
        right: -50px;
    }

    #dropdown-search-panel .asp_m.asp_m_1 .probox {
        background-color: #ffffff !important;
    }

    #phone-btn, 
    #email-btn {
        display: none !important; /* Скрываем новые иконки на мобильных */
    }
}

/* Стили для кастомных кнопок в мобильном меню (Off Canvas) */
.ocm-custom-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0; /* Отступы сверху и снизу от меню */
    padding: 0 20px;
}

.ocm-icon-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Очень тонкая рамка */
    border-radius: 14px; /* iOS style rounded corners */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Более быстрый и плавный переход */
    background: rgba(0, 0, 0, 0.35); /* Более темный фон для контраста */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Легкая тень */
    line-height: 0 !important;
    text-decoration: none !important;
}

.ocm-icon-btn svg {
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.ocm-icon-btn:active {
    background: rgba(0, 0, 0, 0.5); /* Затемнение при нажатии */
    transform: scale(0.92); /* Эффект уменьшения (тактильный отклик) */
    transition: all 0.1s ease;
}

/* Убираем ховер-эффект для мобильных, так как он мешает */
@media (hover: hover) {
    .ocm-icon-btn:hover {
        background: rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* Дополнительные стили для верхнего блока иконок */
.top-ocm-icons {
    margin: 15px 0 25px 0; /* Чуть меньше отступы для верхнего блока */
}

/* Убедимся, что иконки в мобильном меню всегда белые, 
   так как фон этого меню обычно темный в Salient */
.ocm-icon-btn svg {
    stroke: #ffffff;
}

/* Страховка для скрытия старого текста, если JS не успел отработать */
.mobile-contact-info a {
    font-size: 0 !important; /* Скрываем текст */
}

/* Оформление инжектированного блока */
.js-injected-icons {
    margin: 0 !important;
    display: flex !important;
    gap: 20px;
}

.js-injected-icons .ocm-icon-btn {
    width: 54px !important; /* Чуть увеличим для удобства нажатия */
    height: 54px !important;
}