/* Стили для вылетающего промо-блока */
.flyout-promo {
    position: fixed;
    bottom: -150px; /* Скрыто за экраном */
    right: 20px; /* Отступ справа */
    width: 300px;
    height: 150px; /* Увеличиваем высоту */
    background-image: url('/assets/components/img/bg/blue-sky.png'); /* Фон с облаками */
    background-size: cover; /* Для фоновой картинки */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px; /* Максимальное скругление */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center; /* Выравнивание содержимого по центру */
    justify-content: space-between; /* Распределение содержимого */
    padding: 10px 15px;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: bottom 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease, visibility 0.8s; /* Анимация */
    z-index: 99999; /* Поверх всех элементов */
    border: 5px solid white; /* Белая рамка */
}

/* Анимация вращения для приглашения */
@keyframes rotate-subtle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.flyout-promo.is-visible {
    bottom: 70px; /* Поднимаем табличку вверх на 50px (20 + 50) */
    opacity: 1;
    visibility: visible;
    transform: translateY(-100px); /* Используем для плавного подъема */
    animation: rotate-subtle 3s infinite ease-in-out; /* Применяем анимацию вращения */
}

/* Анимация контр-вращения для текста */
@keyframes counter-rotate-text {
    0% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(-50%) rotate(-5deg); }
    50% { transform: translateY(-50%) rotate(0deg); }
    75% { transform: translateY(-50%) rotate(5deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

.flyout-promo-content {
    display: block; /* Изменяем на block для абсолютного позиционирования лого */
    position: relative; /* Для абсолютного позиционирования лого */
    width: 100%;
    height: 100%;
}

.flyout-promo-text {
    color: black; /* Черный цвет текста */
    font-size: 10px; /* Уменьшаем размер шрифта на треть */
    line-height: 1.3;
    margin-left: 0; /* Сбрасываем margin-left */
    margin-right: 0; /* Сбрасываем margin-right */
    text-shadow: none; /* Убираем тень, т.к. фон светлый */
    position: absolute; /* Абсолютное позиционирование для контроля */
    left: 105px; /* Начало текстового сообщения правее логотипа на 40px */
    right: 0px; /* Отступ справа */
    top: 50%; /* Центрируем по вертикали */
    /* transform: translateY(-50%); */ /* Удаляем отсюда, перемещаем в keyframes */
    padding-right: 0; /* Сбрасываем padding-right */
    text-align: center; /* Центровка текста */
    white-space: pre-line; /* Сохраняем переносы строк */
    animation: counter-rotate-text 3s infinite ease-in-out; /* Применяем контр-вращение */
}

.flyout-promo-small-text {
    font-size: 0.66em; /* Уменьшаем шрифт последней строчки в 1.5 раза (1/1.5 = 0.66) */
}

.flyout-promo-logo {
    position: absolute; /* Абсолютное позиционирование */
    width: 80px; /* Увеличенный размер логотипа */
    height: 80px;
    object-fit: contain;
    top: 50%; /* Центрируем по вертикали */
    left: -15px; /* Перемещаем влево и наезжаем на рамку */
    transform: translateY(-50%); /* Точная вертикальная центровка */
    border-radius: 50%; /* Круглая форма */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Тень для логотипа */
}