/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/
/* Скрыть цену на всех страницах             

.price, .amount {
    display: none !important;
}

 */
/* Основной контейнер кнопки */
/* Настройки самой кнопки */
.us-btn-style_2 {
    position: relative;
    z-index: 1; /* Поднимаем текст кнопки выше анимации */
    /* Убедитесь, что здесь стоит правильное скругление вашей кнопки */
    border-radius: 30px !important; 
    /* Убираем overflow: hidden, чтобы волна могла выйти наружу */
    overflow: visible !important; 
}

/* Создаем псевдоэлемент для волны */
.us-btn-style_2::before {
    content: '';
    position: absolute;
    z-index: -1; /* Отправляем на задний план */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* ЦВЕТ ВОЛНЫ: 
       Используем белый с прозрачностью 0.6.
       Можно заменить на светло-зеленый: rgba(144, 238, 144, 0.6) 
    */
    background: rgba(144, 238, 144, 0.6); 
    
    /* Наследуем скругление от кнопки */
    border-radius: inherit; 
    
    /* Параметры анимации: имя, длительность, бесконечность */
    animation: pulse-ripple-out 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Сама анимация */
@keyframes pulse-ripple-out {
    0% {
        transform: scale(1); /* Начальный размер = размеру кнопки */
        opacity: 0.8; /* Почти непрозрачный в начале */
    }
    100% {
        transform: scale(1.5); /* Конечный размер = в 1.5 раза больше кнопки */
        opacity: 0; /* Полностью исчезает в конце */
    }
}

/* button 4 */

/* Основной контейнер кнопки */
.us-btn-style_4 {
    position: relative;
    /* Обязательно делаем фон прозрачным, чтобы видеть слои внутри */
    background: transparent !important; 
    overflow: hidden; /* Обрезает все, что выходит за границы */
    /* Убедимся, что скругление углов передается псевдоэлементам */
    border-radius: 25px; /* Подставьте сюда ваше реальное скругление, если оно другое */
    border: none !important; /* Убираем стандартные рамки темы, если есть */
}

/* СЛОЙ 1: Вращающийся градиент (Анимация) */
.us-btn-style_4::before {
    content: '';
    position: absolute;
    /* Центрируем и делаем большим */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0; /* Самый нижний уровень */
    
    /* Конический градиент. 
       Используем ЯРКИЙ неон-зеленый (#39FF14) для контраста с зеленым фоном колонки.
       Меняйте этот цвет, если нужен другой оттенок.
    */
    background: conic-gradient(transparent, transparent, #30a34a, transparent 40%);
    
    /* Анимация вращения */
    animation: rotate-inner 4s linear infinite;
}

/* СЛОЙ 2: Внутренняя "заглушка" (Фон кнопки) */
.us-btn-style_4::after {
    content: '';
    position: absolute;
    z-index: 1; /* Лежит поверх анимации */
    
    /* Свойство inset определяет отступ внутрь.
       3px - это толщина вашей внутренней светящейся линии.
       Хотите линию тоньше? Поставьте 1px или 2px.
    */
    inset: 5px; 
    
    /* Цвет фона самой кнопки. Должен отличаться от фона колонки */
    background: #efefef; 
    
    /* Наследует скругление от родителя */
    border-radius: inherit; 
}

/* СЛОЙ 3: Текст кнопки */
.us-btn-style_4 .w-btn-label,
.us-btn-style_4 span {
    position: relative;
    z-index: 2; /* Текст должен быть выше всех слоев */
    color: #333; /* Цвет текста */
}

/* Сама анимация вращения */
@keyframes rotate-inner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}