@font-face {
font-display:swap;
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url('//optimizatorseo.ru/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.4') format("woff2");
}

:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(148,163,184);
	--wd-text-font-size: 16px;
	--wd-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-transform: none;
	--wd-title-color: rgb(148,163,184);
	--wd-entities-title-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cabin", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 15px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,102,255);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(232,58,58);
	--btn-accented-bgcolor-hover: rgb(210,51,57);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(255,255,255);
	background-image: url();
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(32,32,32);
	background-image: url();
	background-size: cover;
	background-position: center center;
}
.page .wd-page-content {
	background-color: rgb(3,7,18);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* 1. БЛЮР НА HEADER */
.whb-header, .whb-sticky-real, .whb-main-header {
/*     background-color: transparent !important; */
	background-color: #02020A !important;
}

/* 2. Исходное состояние (когда мы в самом верху) */
.whb-main-header {
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1) !important;
    border-bottom: 1px solid transparent !important;
}

/* 3. Состояние ПРИ СКРОЛЛЕ (когда появляется класс whb-sticked) */
body .whb-sticked .whb-main-header {
    /* Фон как на happ-proxy (bg-surface/80) */
    background-color: rgba(10, 11, 13, 0.75) !important; 
    
    /* Тот самый блюр */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Бордер снизу (border-line/50) */
    border-bottom: 1px solid #0D799C !important;
    
    /* Тень */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Фикс для элементов внутри шапки, чтобы они не имели своего фона */
.whb-sticked .whb-row, .whb-sticked .whb-container {
    background-color: transparent !important;
}

/* Акцентный текст */

.neon {
    color: #50C4FF;
}

.neonli::marker {
    color: #50C4FF;
}

html {
    scroll-behavior: smooth; /* Плавная прокрутка */
}

/* Применяем ко всем секциям с ID (якорям) */
section[id], div[id] {
    scroll-margin-top: 50px; /* Укажи высоту своего хедера */
}

/* @media (max-width: 768px) {
    section[id], div[id] {
        scroll-margin-top: 40px; 
    }
} */






















/* 1. ГРАДИЕНТ МЕНЮ (Слева направо) */
.wd-nav-main > li > a {
    color: rgb(148, 163, 184) !important;
    transition: color 0.3s ease !important;
}
.wd-nav-main > li > a:after {
    content: '';
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 0;
    height: 2px;
    /* Уточненный неоновый градиент: Blue -> Purple */
/*     background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%) !important; */
background: linear-gradient(90deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%) !important;
    transition: width 0.3s ease !important;
}
.wd-nav-main > li:hover > a {
    color: #ffffff !important;
}
.wd-nav-main > li:hover > a:after {
    width: 100% !important;
}








/* КНОПКА ВОЙТИ */

/* Основной контейнер кнопки */
body .hp-login-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    height: 42px !important;
    min-width: 110px !important;
    /* УБРАН SCALE, добавлена плавная задержка для тени */
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: none !important; /* Жесткий запрет на трансформации */
    isolation: isolate;
}

/* АНИМИРОВАННЫЙ ФОН (Перелив) */
body .hp-button-bg {
    position: absolute !important;
    top: 0; left: 0; width: 400%; height: 100% !important;
    /* Твои цвета: Синий(2) и Фиолетовый(1) */
    background: linear-gradient(90deg, #00d4ff 0%, #28a5ff 25%, #a855f7 50%, #28a5ff 75%, #00d4ff 100%) !important;
    /* Анимация 6 секунд, туда-обратно */
    animation: hp-move-bg 6s ease-in-out infinite alternate !important;
    z-index: 1 !important;
    transition: opacity 0.4s ease !important;
}

/* Рамка */
body .hp-button-border {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 2 !important;
    pointer-events: none;
}

/* Текст */
body .hp-button-text {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    /* Плавное изменение цвета или свечения текста */
    transition: all 0.4s ease !important;
}

/* ХОВЕР: Усиленное свечение (Цвет3) БЕЗ SCALE */
body .hp-login-button:hover {
    transform: none !important; /* Убираем scale, если Woodmart пытается его навязать */
    box-shadow: 0 0 15px #00d4ff, 
                0 0 35px rgba(0, 212, 255, 0.8), 
                0 0 60px rgba(0, 212, 255, 0.5) !important;
}

/* Отключаем увеличение при клике */
.hp-login-button:active {
/*     transform: none !important; */
}

/* KEYFRAMES (Сдвиг через transform для стабильности) */
@keyframes hp-move-bg {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}










/* ЛОГОТИП */

/* Общий контейнер */
.hp-logo-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    cursor: pointer;
}

/* Стили иконки-молнии */
.hp-logo-icon-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
}

/* Эффект свечения (как у кнопки) */
.hp-logo-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #00d4ff, #a855f7);
    border-radius: 12px;
    filter: blur(10px);
    opacity: 0; /* Скрыто в обычном состоянии */
    transition: opacity 0.4s ease;
}

.hp-logo-icon-box {
    position: relative;
    width: 100%;
    height: 100%;
/*     background: linear-gradient(135deg, #00d4ff, #28a5ff, #a855f7); */
	
	box-shadow: 0 0 10px #00d4ff, 
                0 0 10px rgba(0, 212, 255, 0.8), 
                0 0 30px rgba(0, 212, 255, 0.5) !important;
	
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.5s ease;
}

.hp-logo-svg {
    width: 20px;
    height: 20px;
    color: white;
}

/* Стили текста логотипа */
.hp-logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff; /* Начальное состояние - белый */
    transition: all 0.5s ease;
}

/* --- СИНХРОННЫЙ ХОВЕР --- */

/* При наведении на группу активируем свечение у лого */
.hp-logo-group:hover .hp-logo-glow {
	box-shadow: 0 0 15px #00d4ff, 
                0 0 35px rgba(0, 212, 255, 0.8), 
                0 0 60px rgba(0, 212, 255, 0.5) !important;
    opacity: 0.8; /* Уровень свечения вокруг лого */
}

/* При наведении на группу перекрашиваем текст в градиент */
.hp-logo-group:hover .hp-logo-text {
    background: linear-gradient(90deg, #00d4ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


















/* hero section */

/* База */
.hp-hero-section {
    position: relative;
    overflow: hidden; /* Обрезает фон, чтобы не было полос прокрутки */
    min-height: 80vh;
}

/* Фон-свечение (Conic Gradient) */
.hp-hero-section::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 600px;
    background: conic-gradient(from 90deg at 50% 0%, #1e40af 0deg, #7c3aed 120deg, #06b6d4 240deg, #1e40af 360deg);
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

/* Орбиты */
.hp-hero-section::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* блок с пульсирующей точкой */

  .pulse-container { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 16px; 
    height: 16px; 
  }
  .pulse-dot {
    width: 8px; height: 8px;
    background-color: #34d399;
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
  }
  @keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  }


.hp-dot-container {
/*     display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Размер зоны, чтобы точка не прилипала к тексту */ */
}

.hp-pulse-dot {
/*     width: 8px;
    height: 8px;
    background: #34d399; /* Зеленый цвет */ */
/*     border-radius: 50%;
    animation: hp-green-pulse 2s infinite ease-in-out; */
}

/* @keyframes hp-green-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
} */


/* 1. Переливание (Шиммер) для кнопки в 1 блоке - проигрывается 1 раз при наведении */
.hp-main-btn .elementor-button {
    overflow: hidden !important; /* Обязательно, чтобы блик обрезался границами кнопки */
    position: relative !important;
}

.hp-main-btn .elementor-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}

.hp-main-btn .elementor-button:hover::after {
    left: 100%;
}

/* 2. Смещение иконки на 10px вправо */
.hp-main-btn .elementor-button .elementor-button-icon {
    transition: transform 0.3s ease !important;
}

.hp-main-btn .elementor-button:hover .elementor-button-icon {
    transform: translateX(10px);
}






















/* pricing section */

/* --- 1. СЕТКА И ФОН --- */

.hp-pricing-section {
    /*  градиент фона */
    background: linear-gradient(180deg, #071F30 0%, #07101F 50%, #0B182D 100%) !important;
/* 	background: conic-gradient(from 180deg at 50% 0%, #071F30 0deg, #07101F 120deg, #071F30 240deg, #07101F 360deg); */
}

/* СЕТКА (Grid Overlay) */
.hp-pricing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.5) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(0, 212, 255, 0.5) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.02; /* Та самая едва заметная сетка */
    pointer-events: none;
    z-index: 1;
}

/* ПЛАВАЮЩИЕ ПЯТНА (Glows) */
.hp-pricing-section::after {
/*     content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle at 25% 0%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 100%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
    animation: hp-float 10s infinite alternate ease-in-out; */
}

/* @keyframes hp-float {
    0% { transform: translateY(-20px); }
    100% { transform: translateY(20px); }
} */

/* Создаем слой для перелива (SHIMMER) */
.hp-pricing-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
}

/* Зацикленная анимация при наведении */
.hp-pricing-card:hover::after {
    opacity: 1;
    animation: hp-loop-shimmer 1.5s infinite;
}

@keyframes hp-loop-shimmer {
    0% { left: 100%; }
    100% { left: -100%; }
}









/* Акцентная вторая карточка */
.hp-pricing-card-featured {
       /* Градиентная рамка */
    border: 1px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image: linear-gradient(#060a18, #060a18), 
                      linear-gradient(180deg, #00d4ff 0%, #a855f7 50%, #00d4ff 100%) !important;
    
    /* Свечение */
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.7), 0 0 10px rgba(168, 85, 247, 0.7) !important;
}

.hp-pricing-card-featured:hover {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.9), 0 0 10px rgba(168, 85, 247, 0.9) !important;
}

.hp-pricing-card-featured::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
	
}

/* Зацикленная анимация при наведении */
.hp-pricing-card-featured:hover::after {
    opacity: 1;
    animation: hp-loop-shimmer 1.5s infinite;
}

@keyframes hp-loop-shimmer {
    0% { left: 100%; }
    100% { left: -100%; }
}





.hp-strikethrough {
    text-decoration: line-through;
    text-decoration-color: #9D3C79 !important; /* Цвет линии (красный) */
    text-decoration-thickness: 2px;             /* Толщина линии */
    text-underline-offset: 0px;
}




/*  Стили для кнопки центральной карточки */
.hp-pricing-card-featured .hp-pricing-btn {
    position: relative !important;
    display: flex !important; /* Вместо inline-flex для растяжки */
    width: 100% !important;   /* На всю ширину */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    height: 55px !important;  /* Чуть выше для солидности */
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
    isolation: isolate;
    cursor: pointer;
    border: none !important;
    box-sizing: border-box !important;
}

/* Анимированный фон */
.hp-pricing-card-featured .hp-pricing-btn-bg {
    position: absolute !important;
    top: 0; left: 0; width: 400%; height: 100% !important;
    background: linear-gradient(90deg, #00d4ff 0%, #28a5ff 25%, #a855f7 50%, #28a5ff 75%, #00d4ff 100%) !important;
    animation: hp-move-bg 6s ease-in-out infinite alternate !important;
    z-index: 1 !important;
}

/* Рамка */
.hp-pricing-card-featured .hp-pricing-btn-border {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 2 !important;
    pointer-events: none;
}

/* Текст */
.hp-pricing-card-featured .hp-pricing-btn-text {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    pointer-events: none;
}

/* ХОВЕР: Усиленное свечение + SCALE */
.hp-pricing-card-featured .hp-pricing-btn:hover {
    transform: scale(1.03) !important; /* Небольшое увеличение */
    box-shadow: 0 0 15px #00d4ff, 
                0 0 35px rgba(0, 212, 255, 0.8), 
                0 0 60px rgba(0, 212, 255, 0.5) !important;
}


/* 3 блок (секция): цифры в кружках */

/* Базовый стиль кружка */
.hp-step-circle {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    transition: box-shadow 0.3s ease;
    margin-bottom: 20px;
}

/* ТОЧНЫЕ ГРАДИЕНТЫ (с учетом свечения и насыщенности референса) */
.hp-step-1 { background: linear-gradient(135deg, #07CCFF 0%, #22ACFF 100%); }
.hp-step-2 { background: linear-gradient(135deg, #3F97FE 0%, #9262F8 100%); }
.hp-step-3 { background: linear-gradient(135deg, #B353E7 0%, #E14AA9 100%); }
.hp-step-4 { background: linear-gradient(135deg, #03F2E1 0%, #0DC697 100%); }

/* ЭФФЕКТ СВЕЧЕНИЯ КРУЖКА */
.hp-step-card:hover .hp-step-circle.hp-step-1 { box-shadow: 0 0 25px #00d2ff; }
.hp-step-card:hover .hp-step-circle.hp-step-2 { box-shadow: 0 0 25px #8b5cf6; }
.hp-step-card:hover .hp-step-circle.hp-step-3 { box-shadow: 0 0 25px #ec4899; }
.hp-step-card:hover .hp-step-circle.hp-step-4 { box-shadow: 0 0 25px #10b981; }

/* ПЕРЕКРАСКА ТЕКСТА ПРИ НАВЕДЕНИИ НА КАРТОЧКУ */
 
.hp-step-card:hover p {
    color: #969DA8 !important;
    transition: color 0.6s ease;
}




/* 4 блок (секция): страны */

.my-cstm {
    font-size: 16px;
    font-family: Inter;
    color:rgb(148 163 184);
	margin-right: 8px;
}

.my-cstm:hover {
    color:rgb(241 245 249);
    transition: .5s ease;
}

.my-cstmnb {
    font-size: 16px;
    font-family: Inter;
    font-weight: 700;
    color: rgb(0 255 247);
}

.hp-step-card:hover .device-icon path {
    stroke: #ffffff !important; 
    transition: 0.3s ease;
}

/* @media (max-width: 768px) {
    .nocntr {
        display: none !important;
    }
} */

.fi {
    margin-right: 8px; /* Отступ между флагом и текстом */
    border-radius: 2px; /* Чуть скруглим углы */
    display: inline-block;
    width: 1.5em; /* Размер флага */
    line-height: 1em;
}







/* Блок FAQ */

/* 1. Общие настройки контейнера */
.wd-accordion {
    background: transparent !important;
    border: none !important;
    gap: 16px;
    display: flex;
    flex-direction: column;
}

/* 2. Стиль каждого элемента с твоим градиентом */
.wd-accordion-item {
    background: linear-gradient(135deg, #081F33, #08192D);
    backdrop-filter: blur(12px);
/*     border: 1px solid #00D4FF4D; */
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.wd-accordion-item:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(168, 85, 247, 0.15));
    border-color: rgba(255, 255, 255, 0.2);
}

/* Подсветка активного элемента */
.wd-accordion-item.wd-active {
    border-color: rgba(0, 212, 255, 0.5);
}

/* 3. Заголовок */
.wd-accordion-title {
    padding: 28px !important;
    border: none !important;
    color: #cbd5e1 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: color 0.3s ease;
}

.wd-accordion-title:hover {
    color: #ffffff !important;
}

/* --- 4. Кнопка-иконка (Логика анимации) --- */
.wd-accordion-opener {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    cursor: pointer;
    transition: transform 0.5s ease;
    /* Начальное состояние */
    background: #03172C !important;
    border: 1px solid #00D4FF4D !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Сама стрелка */
.wd-accordion-opener::before {
    content: "▼";
    font-size: 12px;
    color: #ffffff;
}

/* --- АНИМАЦИЯ ПРИ ОТКРЫТИИ (Добавляем класс при .wd-active) --- */
.wd-accordion-item.wd-active .wd-accordion-opener {
    animation: openerExpand 0.6s forwards;
    transform: rotate(180deg);
    background: linear-gradient(135deg, #9d4eff, #00d4ff);
  border: 2px rgba(255,255,255,1);
  box-shadow: 0 0 25px rgba(157, 78, 255, 0.6);
}

@keyframes openerExpand {
    0% { background: #04293E; border-color: #00D4FF4D; }
    50% { background: #04293E; border-color: #ffffff; }
    100% { background: linear-gradient(135deg, #00d4ff, #a855f7); border-color: transparent; }
}



/* --- АНИМАЦИЯ ПРИ ЗАКРЫТИИ (Когда класс .wd-active пропадает) --- */
.wd-accordion-item .wd-accordion-opener {
    animation: openerCollapse 0.6s forwards;
}

@keyframes openerCollapse {
    0% { background: linear-gradient(135deg, #00d4ff, #a855f7); border-color: transparent; }
    50% { background: #04293E; border-color: #ffffff; }
    100% { background: #04293E; border-color: #00D4FF4D; }
}

/* 5. Контент */
.wd-accordion-content {
    padding: 24px 24px 12px 24px !important;
    color: #94a3b8 !important;
    line-height: 1.7 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: -10px;
}

/* Убираем стандартные символы Woodmart */
.wd-accordion-title-text span {
    text-transform: none !important;
}









/* 1. Иконка Бургера (Стабильная) */
/* 1. Иконка Бургера (Стабильная) */
/* 1. Кнопка бургер (Фон полностью прозрачный) */
.custom-burger-btn {
    width: 40px !important; 
    height: 40px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    position: relative; 
    z-index: 10000; 
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin-right: 0 !important; /* Убрали auto, чтобы не толкало влево */
    margin-left: auto !important; /* (Опционально) гарантирует, что кнопка прижмется к правому краю */
}

/* Линии бургера */
.burger-lines {
    position: relative; width: 24px; height: 2px; background: #fff;
    transition: background 0.3s; border-radius: 2px;
}
.burger-lines::before, .burger-lines::after {
    content: ''; position: absolute; left: 0; width: 24px; height: 2px;
    background: #fff; transition: all 0.3s ease; border-radius: 2px;
}
.burger-lines::before { top: -8px; }
.burger-lines::after { bottom: -8px; }

/* Анимация Крестика */
.burger-active .burger-lines { background: transparent; }
.burger-active .burger-lines::before { top: 0; transform: rotate(45deg); }
.burger-active .burger-lines::after { bottom: 0; transform: rotate(-45deg); }

/* 2. Выпадающее меню */
.custom-mobile-dropdown {
    position: fixed;
    top: 70px; /* Высота шапки */
    left: 10px; right: 10px;
    background: #091A2B;
    /* Бордер только сверху, как просил */
    border-top: 1px solid #00D4FF4D; 
    border-left: none; border-right: none; border-bottom: none;
    border-radius: 12px 12px 12px 12px;
    padding: 10px 20px;
    opacity: 0; visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.custom-mobile-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Стили ссылок и списка */
.custom-mobile-dropdown nav ul { list-style: none; padding: 0; margin: 0; }
.custom-mobile-dropdown nav li { 
    padding: 12px 0; 
    border-bottom: none !important; /* Убрали все межстрочные линии */
}
.custom-mobile-dropdown nav a { 
    color: #94A3B8; /* Твой цвет */
    font-size: 16px; /* Твой размер */
    font-weight: 500;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}
.custom-mobile-dropdown nav a:hover { color: #fff; }

/* Прижимаем контейнер с иконкой к левому краю */
.my-custom-menu-container {
    display: flex !important;
    justify-content: flex-end !important; /* Теперь контент летит вправо */
    align-items: center !important;
    width: 100% !important;
}