/* ========================================================================== */
/* ПЛАВАЮЩАЯ КНОПКА ЗАПИСИ — callback-button.css                              */
/*                                                                              */
/* Только стили самой кнопки (круглая, пульсирует).                            */
/* Модальное окно, которое по клику на неё открывается, теперь общее для       */
/* всего сайта — его стили лежат отдельно в                                    */
/* assets/css/components/request-modal.css                                    */
/* ========================================================================== */

.callback-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2fd4c0, var(--accent, #22686D) 70%);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 6px 24px rgba(34, 104, 109, 0.55), 0 0 0 6px rgba(47, 212, 192, 0.18);
    animation: callback-pulse 3s ease-in-out infinite;
}

.callback-btn svg {
    width: 42px;
    height: 42px;
}

.callback-btn:hover {
    background: radial-gradient(circle at 35% 30%, #37e6d0, var(--accent-hover, #185458) 70%);
}

@keyframes callback-pulse {

    0%,
    70%,
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 6px 24px rgba(34, 104, 109, 0.55), 0 0 0 6px rgba(47, 212, 192, 0.18);
    }

    72% {
        transform: scale(1.1) rotate(-12deg);
    }

    76% {
        transform: scale(1.1) rotate(10deg);
    }

    80% {
        transform: scale(1.1) rotate(-8deg);
    }

    84% {
        transform: scale(1.1) rotate(6deg);
    }

    88% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 6px 30px rgba(47, 212, 192, 0.7), 0 0 0 10px rgba(47, 212, 192, 0.25);
    }
}

/* ========================================================================== */
/* АДАПТИВ */
/* ========================================================================== */

@media (max-width: 480px) {
    .callback-btn {
        right: 16px;
        bottom: 16px;
        width: 76px;
        height: 76px;
    }

    .callback-btn svg {
        width: 34px;
        height: 34px;
    }
}