/* ============================================================
   AGENT CALL BUTTON — shared states for elements with data-agent-id
   - Paired with /assets/js/agent-call.js
   - Applied in addition to each page's existing button styling
   ============================================================ */

[data-agent-id] {
    cursor: pointer;
    transition: background 0.35s ease, transform 0.2s ease, box-shadow 0.35s ease;
}

[data-agent-id].agent-call-connecting {
    cursor: progress;
    pointer-events: none;
    opacity: 0.92;
}

[data-agent-id].agent-call-active {
    background: linear-gradient(90deg, #ef4444, #f87171) !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.45);
    animation: agent-call-live-pulse 1.6s ease-in-out infinite;
}

@keyframes agent-call-live-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(239, 68, 68, 0.45); }
    50%       { box-shadow: 0 10px 42px rgba(239, 68, 68, 0.70); }
}

/* ------------------------------------------------------------
   Desktop / tablet: widen the industry-page CTA so it matches the
   elongated proportion used on the Peruvian site and sits centered
   under the sub-headline. Mobile layout is left untouched.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    button.demo-button[data-agent-id] {
        min-width: 22rem;
        padding-left: 2.75rem;
        padding-right: 2.75rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    button.demo-button[data-agent-id] {
        min-width: 26rem;
    }
}