/* WhatsApp CTA Button with Gemini Animation */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.whatsapp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: transparent !important;
    /* Transparent to show pseudo-elements behind */
    color: #333;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid #e5e7eb;
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-top: 1rem;
    isolation: isolate;
    /* Create stacking context */
    overflow: visible !important;
    /* Ensure pseudo-elements are not clipped */
}

.whatsapp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
}

.whatsapp-cta img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    /* Ensure content is on top */
}

.whatsapp-cta span {
    position: relative;
    z-index: 2;
    /* Ensure content is on top */
}

/* White Background Layer (sits between content and gradient) */
.whatsapp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    border-radius: inherit;
    /* Inherit border radius from parent */
    z-index: -1;
}

/* Gemini Border Animation Layer (sits at the very bottom) */
.whatsapp-cta::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    /* Thinner border */
    border-radius: inherit;
    /* Inherit border radius from parent */
    padding: 1.5px;
    /* Match inset for border width */
    /* Conic gradient for traveling light effect - Google Colors (Green, Yellow, Red, Blue) */
    background: conic-gradient(from var(--angle),
            transparent 0%,
            transparent 40%,
            #34a853 50%,
            /* Green */
            #fbbc05 60%,
            /* Yellow */
            #ea4335 70%,
            /* Red */
            #4285f4 80%,
            /* Blue */
            transparent 100%);
    z-index: -2;
    opacity: 0;
    animation: gemini-spin 2s linear 1s forwards;
    filter: blur(0.5px);
    /* Slight blur for light effect */
}

@keyframes gemini-spin {
    0% {
        --angle: 0deg;
        opacity: 1;
    }

    100% {
        --angle: 360deg;
        opacity: 0;
    }
}