/**
 * Seresa TS Engine Signup - Gorilla "Ask me anything" CTA
 *
 * Step 5 call-to-action that opens the Gorilla Chat widget. A round
 * launcher button mirroring the site's Gorilla widget, with a rounded
 * "Ask me anything" label pill above it and an attention pulse ring
 * that fires a few times on step entry, then settles.
 *
 * @package Transmute_Engine_Signup_Seresa
 * @since   2.4.0
 */

/* Anchor the CTA to the top-right of the step. */
.seresa-signup-step--5 {
    position: relative;
}

/*
 * Reserve horizontal space so the heading and description never run
 * underneath the absolutely-positioned CTA (avatar is 96px wide plus the
 * "Ask me anything" pill, which can be wider). The mobile breakpoint below
 * overrides this with its own, smaller reservation.
 *
 * !important is required: the site theme's ds-page.css resets every paragraph
 * with `.ds p { padding: 0 !important }`, which the description (<p>) would
 * otherwise inherit — zeroing this reservation and letting the text run under
 * the CTA. The title (<h2>) is unaffected but is kept here for symmetry.
 */
.seresa-signup-step--5 .seresa-signup-step__title,
.seresa-signup-step--5 .seresa-signup-step__description {
    padding-right: 210px !important;
}

.seresa-signup-gorilla-cta {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Rounded "Ask me anything" pill sitting above the button. */
.seresa-signup-gorilla-cta__label {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.12);
    color: #2dd4bf;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Round launcher button. */
.seresa-signup-gorilla-cta__button {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 3px solid #de3163;
    border-radius: 50%;
    background: #de3163;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.seresa-signup-gorilla-cta__button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(222, 49, 99, 0.4);
}

.seresa-signup-gorilla-cta__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.seresa-signup-gorilla-cta__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/*
 * Attention pulse ring. Runs three times on step entry, then stops on a
 * fully-transparent final frame so the ring disappears. Because the step-5
 * markup is re-injected each time the step is shown, the animation replays
 * naturally whenever the user lands on this step.
 */
.seresa-signup-gorilla-cta__ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75);
    animation: seresa-gorilla-pulse 1.4s ease-out 3;
}

@keyframes seresa-gorilla-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Respect reduced-motion preferences: no pulse, no hover scaling. */
@media (prefers-reduced-motion: reduce) {
    .seresa-signup-gorilla-cta__ring {
        animation: none;
    }

    .seresa-signup-gorilla-cta__button:hover {
        transform: none;
    }
}

/* Smaller screens: shrink the launcher and keep it clear of the heading. */
@media (max-width: 600px) {
    .seresa-signup-gorilla-cta {
        gap: 8px;
    }

    .seresa-signup-gorilla-cta__label {
        font-size: 0.78rem;
        padding: 3px 10px;
    }

    .seresa-signup-gorilla-cta__button {
        width: 64px;
        height: 64px;
    }

    .seresa-signup-step--5 .seresa-signup-step__title,
    .seresa-signup-step--5 .seresa-signup-step__description {
        padding-right: 84px !important;
    }
}