/* ПОЛНОСТЬЮ ИЗОЛИРОВАННОЕ решение с максимальной специфичностью */

/* Сброс наследуемых стилей БЕЗ блокировки анимаций */
#flyout-promo,
#flyout-promo *,
#flyout-promo *::before,
#flyout-promo *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    list-style: none !important;
    font-family: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    vertical-align: baseline !important;
    color: inherit !important;
    font-size: inherit !important;
    /* НЕ сбрасываем background, line-height, text-align, white-space - они нужны для анимаций */
}

/* ДЕСКТОПНЫЙ баннер */
#flyout-promo.flyout-promo {
    position: fixed !important;
    bottom: -150px !important;
    right: 20px !important;
    width: 280px !important;
    height: 120px !important;
    background-image: url('/assets/components/img/bg/blue-sky.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: bottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, visibility 0.8s !important;
    z-index: 99999 !important;
    border: 3.5px solid white !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    /* Убираем transform: none чтобы не блокировать анимации */
}

#flyout-promo.flyout-promo.is-visible {
    bottom: 70px !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: rotate-subtle 3s infinite ease-in-out !important;
    transition: bottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, visibility 0.8s, transform 10s ease !important;
    /* БЫСТРЫЕ переходы для появления/исчезновения + ОЧЕНЬ МЕДЛЕННЫЙ переход для hover-эффекта (10 секунд) */
}

/* HOVER эффект - только увеличение на 20% */
#flyout-promo.flyout-promo.is-visible:hover {
    transform: scale(1.2) !important;
    animation: none !important;
    /* Останавливаем анимацию вращения при hover */
}

/* Убрали неиспользуемую анимацию gradient-shift */

/* Единые анимации - БЕЗ !important в keyframes */
@keyframes rotate-subtle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes counter-rotate-text {
    0% {
        transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
    }

    25% {
        transform: translate(-50%, -50%) scale(1.15) rotate(-5deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
    }

    75% {
        transform: translate(-50%, -50%) scale(1.15) rotate(5deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.15) rotate(0deg);
    }
}

@keyframes telegram-3d-rotate-bounce {
    0% {
        transform: translateY(-50%) rotateY(0deg) scale(1);
    }

    16.66% {
        transform: translateY(-50%) rotateY(360deg) scale(1);
    }

    25% {
        transform: translateY(-60%) rotateY(360deg) scale(1.1);
    }

    50% {
        transform: translateY(-50%) rotateY(360deg) scale(1);
    }

    75% {
        transform: translateY(-60%) rotateY(360deg) scale(1.1);
    }

    100% {
        transform: translateY(-50%) rotateY(360deg) scale(1);
    }
}

/* Убрали неиспользуемую анимацию shake-call-to-action */



/* Контент */
#flyout-promo .flyout-promo-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ДЕСКТОПНЫЙ текст - УВЕЛИЧЕННЫЙ и СМЕЩЕННЫЙ */
#flyout-promo .flyout-promo-text {
    color: #1b377b !important;
    font-size: 22px !important;
    /* УВЕЛИЧЕНО еще на 10%: 20px * 1.1 = 22px */
    line-height: 26px !important;
    /* УВЕЛИЧЕНО еще на 10%: 24px * 1.1 = 26.4px ≈ 26px */
    text-align: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 57% !important;
    /* СМЕЩЕНО ВПРАВО на 17% ширины текста: было 50%, стало 57% (сдвинуто на 3% левее) */
    transform: translate(-50%, -50%) scale(1.15);
    /* УВЕЛИЧЕН на 15% (уменьшен на 5% от 1.21) + убираем !important для анимации */
    animation: counter-rotate-text 3s infinite ease-in-out !important;
    white-space: normal !important;
    font-family: inherit !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    /* Убираем медленные transition-эффекты при наведении */
}

/* Убираем hover-эффекты для текста */

#flyout-promo .flyout-promo-text strong {
    font-weight: bold !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

#flyout-promo .flyout-promo-small-text {
    font-size: 16px !important;
    /* УВЕЛИЧЕНО на 20%: 13px * 1.2 = 15.6px ≈ 16px */
    line-height: 18px !important;
    /* УВЕЛИЧЕНО на 20%: 15px * 1.2 = 18px */
    display: block !important;
    margin-top: 4px !important;
    color: #1b377b !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    font-weight: normal !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    /* Убираем transition-эффекты при наведении */
}

/* Убираем hover-эффекты для подписи */

/* ДЕСКТОПНЫЙ логотип */
#flyout-promo .flyout-promo-logo {
    position: absolute !important;
    left: -45px !important;
    top: 50% !important;
    transform: translateY(-50%);
    /* Убираем !important чтобы анимация могла изменять transform */
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    animation: telegram-3d-rotate-bounce 3s ease-in-out infinite !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    right: auto !important;
    bottom: auto !important;
    /* Убираем transition-эффекты при наведении */
}

/* Убираем hover-эффекты для логотипа */

/* МОБИЛЬНАЯ версия - ТОЧНОЕ масштабирование */
@media (max-width: 768px) {
    #flyout-promo.flyout-promo {
        width: 187px !important;
        /* 280px ÷ 1.5 */
        height: 80px !important;
        /* 120px ÷ 1.5 */
        right: 13px !important;
        /* 20px ÷ 1.5 */
        bottom: -100px !important;
        /* -150px ÷ 1.5 */
        padding: 7px 10px !important;
        border-radius: 17px !important;
        /* 25px ÷ 1.5 */
        border: 2.3px solid white !important;
        /* 3.5px ÷ 1.5 */
    }

    #flyout-promo.flyout-promo.is-visible {
        bottom: 47px !important;
        /* 70px ÷ 1.5 */
    }

    /* МОБИЛЬНЫЙ текст - УВЕЛИЧЕННЫЙ и СМЕЩЕННЫЙ пропорционально */
    #flyout-promo .flyout-promo-text {
        font-size: 15px !important;
        /* 22px ÷ 1.5 = 14.67px ≈ 15px - увеличено и смещено */
        line-height: 17px !important;
        /* 26px ÷ 1.5 = 17.33px ≈ 17px - увеличено */
        position: absolute !important;
        top: 50% !important;
        left: 57% !important;
        /* СМЕЩЕНО ВПРАВО как на десктопе (сдвинуто на 3% левее) */
        transform: translate(-50%, -50%) scale(1.15);
        /* УВЕЛИЧЕН на 15% (уменьшен на 5% от 1.21) + убираем !important для анимации */
        /* Убираем медленные transition-эффекты при наведении */
    }

    #flyout-promo .flyout-promo-small-text {
        font-size: 11px !important;
        /* 16px ÷ 1.5 = 10.67px ≈ 11px - увеличено на 20% */
        line-height: 12px !important;
        /* 18px ÷ 1.5 = 12px - увеличено на 20% */
        margin-top: 3px !important;
        /* 4px ÷ 1.5 = 2.67px ≈ 3px */
    }

    /* МОБИЛЬНЫЙ логотип */
    #flyout-promo .flyout-promo-logo {
        left: -30px !important;
        /* -45px ÷ 1.5 */
        width: 60px !important;
        /* 90px ÷ 1.5 */
        height: 60px !important;
        /* 90px ÷ 1.5 */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* МОБИЛЬНЫЕ HOVER эффекты - только увеличение на 20% */
    #flyout-promo.flyout-promo.is-visible:hover {
        transform: scale(1.2) !important;
        animation: none !important;
        /* Останавливаем анимацию вращения при hover */
    }
}