/**
 * WhatsApp In - Frontend Styles
 * @package WhatsAppIn
 * @version 1.0.0
 */

/* ── Floating Button Container ─────────────────────────── */
.whatsapp-in-button {
    position: fixed;
    z-index: 9999;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 50%;
    /* Size is set inline via PHP */
}

.whatsapp-in-button:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 6px 18px rgba(37, 211, 102, 0.55));
}

/* ── Link wrapper ───────────────────────────────────────── */
.whatsapp-in-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-decoration: none;
    outline: none;
}

.whatsapp-in-link:focus-visible {
    outline: 3px solid #25d366;
    outline-offset: 3px;
}

/* ── Icon image ─────────────────────────────────────────── */
.whatsapp-in-icon {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

/* ── Pulse animation ────────────────────────────────────── */
@keyframes whatsapp-in-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-in-button {
    animation: whatsapp-in-pulse 2.5s infinite;
}

/* ── Entrance animation ─────────────────────────────────── */
@keyframes whatsapp-in-fadein {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1);   }
}

.whatsapp-in-button {
    animation:
        whatsapp-in-fadein 0.4s ease forwards,
        whatsapp-in-pulse 2.5s 0.5s infinite;
}

/* ── Reduce motion accessibility ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-in-button {
        animation: none;
        transition: none;
    }
}