/* ==========================================================================
   BPS — Voice Bot SEO Page
   Inherits base styles from page-chatbot-ai.css via shared .chatbot-* classes.
   This file only adds voice-specific overrides and components introduced by
   page-voice-bot.php (flow cards, tech cards).
   ========================================================================== */

/* ---------- Wrapper differentiation ---------- */
.bps-voicebot-page .chatbot-hero__glow,
.voicebot-hero__glow {
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.22), transparent 70%);
}

.bps-voicebot-page .chatbot-eyebrow {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(0, 229, 255, 0.18));
}

/* Slight tint on alternating section background to set voicebot apart visually */
.bps-voicebot-page .chatbot-block--alt {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(0, 229, 255, 0.02));
}

/* ---------- Figure container (voice-themed glow) ---------- */
.voicebot-figure {
    margin-block: 2rem 0;
}

.voicebot-figure__media {
    position: relative;
    border-radius: var(--bps-radius-lg, 18px);
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(124, 58, 237, 0.35),
                0 10px 30px -10px rgba(0, 229, 255, 0.15);
}

.voicebot-figure__media svg {
    display: block;
    width: 100%;
    height: auto;
}

.voicebot-figure__caption {
    margin-block-start: 0.85rem;
    color: var(--bps-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: center;
    max-width: 920px;
    margin-inline: auto;
}

/* ---------- Inbound / Outbound / Hybrid flow cards ---------- */
.voicebot-flows {
    margin-block: 1.5rem 0.5rem;
}

.voicebot-flow {
    display: block;
    padding: 1.4rem 1.4rem 1.5rem;
}

.voicebot-flow__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: 'Heebo', 'Assistant', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-block-end: 0.85rem;
    border: 1px solid var(--bps-border);
    background: rgba(0, 229, 255, 0.06);
    color: #00e5ff;
}

.voicebot-flow--inbound .voicebot-flow__tag {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.35);
    color: #00e5ff;
}

.voicebot-flow--outbound .voicebot-flow__tag {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
    color: #b794f4;
}

.voicebot-flow--hybrid .voicebot-flow__tag {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(124, 58, 237, 0.1));
    border-color: rgba(124, 58, 237, 0.4);
    color: #c5d1ff;
}

.voicebot-flow__title {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bps-text);
    line-height: 1.35;
}

.voicebot-flow p {
    margin: 0;
    color: var(--bps-text-muted, #9ca3af);
    line-height: 1.7;
    font-size: 0.97rem;
}

/* Override .chatbot-card alignment for flow cards (no dot, full content) */
.voicebot-flow.chatbot-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ---------- Core tech (STT / NLU / Dialog / TTS / Latency / Routing) ---------- */
.voicebot-tech {
    margin-block: 1.5rem 0.5rem;
}

.voicebot-tech__card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.4rem 1.4rem 1.5rem;
}

.voicebot-tech__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    background: var(--bps-accent-grad);
    color: #0a0a0f;
    font-family: 'Heebo', 'Assistant', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block-end: 0.85rem;
    width: max-content;
    box-shadow: 0 4px 16px -4px rgba(0, 229, 255, 0.45);
}

.voicebot-tech__name {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bps-text);
    line-height: 1.35;
}

.voicebot-tech__card p {
    margin: 0;
    color: var(--bps-text-muted, #9ca3af);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .voicebot-flow,
    .voicebot-tech__card {
        padding: 1.15rem 1.15rem 1.25rem;
    }

    .voicebot-flow__title {
        font-size: 1.05rem;
    }

    .voicebot-tech__badge {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .voicebot-figure__caption {
        font-size: 0.85rem;
    }

    .voicebot-flow__tag,
    .voicebot-tech__badge {
        font-size: 0.7rem;
        padding: 0.28rem 0.6rem;
    }
}

/* ---------- Reduced motion (matches base SVG animations approach) ---------- */
@media (prefers-reduced-motion: reduce) {
    .voicebot-figure__media svg * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}