/*
 * Plain, self-contained CSS for the Telnyx pages (features/telnyx-support.php,
 * how-to-connect-telnyx.php). The public site's Tailwind build (css/final.css)
 * is a frozen/purged snapshot — utility classes not already present in it at
 * build time are silently inert. This exact page has hit that bug THREE
 * separate times (emerald-* color classes, mb-14/mt-14, p-7/h-11/py-20) —
 * every visual treatment below is written as real, guaranteed-working plain
 * CSS instead of gambling on which Tailwind utility happened to be baked in.
 */

.tb-tx-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 18px rgba(16,185,129,0.35);
}

.tb-tx-card-active { border: 2px solid #059669; background: #ecfdf5; }
.tb-tx-card-active .tb-tx-card-title { color: #064e3b; }
.tb-tx-card-active .tb-tx-card-label { color: #059669; }

.tb-tx-eyebrow, .tb-tx-accent-text { color: #059669; }

.tb-tx-step-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 8px 20px rgba(16,185,129,0.3);
}

.tb-tx-info-box { background: #ecfdf5; border: 1px solid #a7f3d0; }
.tb-tx-info-box p, .tb-tx-info-box span { color: #065f46; }

.tb-tx-link { color: #059669; }
.tb-tx-link:hover { color: #047857; }

.tb-tx-summary-card { background: #064e3b; }
.tb-tx-summary-card a { color: #34d399; }

.tb-tx-cta-section, .tb-tx-cta-card {
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 12px 30px rgba(16,185,129,0.3);
}
.tb-tx-cta-card:hover { background: linear-gradient(135deg, #059669, #065f46); box-shadow: 0 16px 40px rgba(16,185,129,0.4); }

.tb-tx-btn-primary { background: #fff; color: #059669; }
.tb-tx-btn-primary:hover { background: #ecfdf5; }

.tb-tx-btn-secondary { border: 1px solid #fff; color: #fff; background: transparent; }
.tb-tx-btn-secondary:hover { background: #10b981; }

.tb-tx-hero-radial {
    background:
        radial-gradient(circle at top right, rgba(16,185,129,0.16), transparent 55%),
        radial-gradient(circle at bottom left, rgba(34,211,238,0.10), transparent 50%),
        #020617;
}

.tb-tx-hero-gradient-text {
    background: linear-gradient(to right, #34d399, #22d3ee, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tb-tx-feature-card {
    background: linear-gradient(160deg, #065f46, #022c22);
    box-shadow: 0 25px 60px rgba(6,95,70,0.35);
    border: 1px solid rgba(52,211,153,0.25);
}
.tb-tx-feature-card .tb-tx-check { color: #34d399; }
.tb-tx-blob-cyan { background: rgba(34,211,238,0.12); }

/* Headings on these two pages sometimes wrapped a single word alone onto
   their own last line at in-between viewport widths that no single
   hand-picked <br> breakpoint could cover. text-wrap:balance lets the
   browser pick line breaks itself so this never happens, at any width. */
h1, h2 { text-wrap: balance; }

/* ---------- Ambient background glows ----------
   Reusable decorative accent for otherwise-flat white/light sections —
   two soft blurred color blobs, absolutely positioned, zero interaction
   with content (pointer-events:none, low opacity). Apply alongside
   `relative overflow-hidden` on the section. */
.tb-tx-glow-bg { position: relative; overflow: hidden; }
.tb-tx-glow-bg::before {
    content: '';
    position: absolute;
    top: -140px; right: -160px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(16,185,129,0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.tb-tx-glow-bg::after {
    content: '';
    position: absolute;
    bottom: -160px; left: -180px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(34,211,238,0.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.tb-tx-glow-bg > * { position: relative; z-index: 1; }

/* ---------- Trust / non-reseller section ---------- */
.tb-tx-trust-card {
    background: linear-gradient(180deg, #ffffff, #f0fdf9);
    border: 1px solid #d1fae5;
    border-top: 3px solid #10b981;
    border-radius: 1.5rem;
    box-shadow: 0 6px 20px rgba(16,185,129,0.07);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tb-tx-trust-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(16,185,129,0.16); }
.tb-tx-trust-card .tb-tx-trust-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8px 18px rgba(16,185,129,0.35);
}

/* ---------- Per-feature detail cards ----------
   Each card gets a themed accent (top border + icon glow) via a modifier
   class, so the 8-card grid reads as distinct features rather than a
   monotone wall of gray. Base rule provides the shared shape/motion;
   modifiers only swap two CSS variables. */
.tb-tx-detail-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--tx-accent, #059669);
    border-radius: 1.5rem;
    box-shadow: 0 6px 18px rgba(15,23,42,0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tb-tx-detail-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(15,23,42,0.12); }

.tb-tx-detail-card--cyan    { --tx-accent: #0891b2; --tx-accent-soft: #ecfeff; }
.tb-tx-detail-card--blue    { --tx-accent: #2563eb; --tx-accent-soft: #eff6ff; }
.tb-tx-detail-card--purple  { --tx-accent: #7c3aed; --tx-accent-soft: #f5f3ff; }
.tb-tx-detail-card--amber   { --tx-accent: #d97706; --tx-accent-soft: #fffbeb; }
.tb-tx-detail-card--rose    { --tx-accent: #e11d48; --tx-accent-soft: #fff1f2; }
.tb-tx-detail-card--emerald { --tx-accent: #059669; --tx-accent-soft: #ecfdf5; }
.tb-tx-detail-card--teal    { --tx-accent: #0d9488; --tx-accent-soft: #f0fdfa; }
.tb-tx-detail-card--indigo  { --tx-accent: #4f46e5; --tx-accent-soft: #eef2ff; }

/* Icon boxes on both card types: sized here directly (not via Tailwind's
   w-11/h-11) since h-11 was confirmed silently absent from the frozen
   final.css build — same purge issue this whole stylesheet exists to
   avoid. Width/height 44px matches the originally-intended size. */
.tb-tx-trust-icon, .tb-tx-detail-icon {
    width: 44px;
    height: 44px;
    box-shadow: 0 6px 14px rgba(15,23,42,0.08);
}
.tb-tx-detail-card .tb-tx-detail-icon { background: var(--tx-accent-soft, #ecfdf5); }

/* ---------- Why Telnyx cards ---------- */
.tb-tx-why-card {
    background: linear-gradient(160deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow: 0 6px 18px rgba(15,23,42,0.05);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.tb-tx-why-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(15,23,42,0.12); }
.tb-tx-why-card .tb-tx-why-num {
    background: linear-gradient(135deg, #10b981, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Technical integration list ---------- */
.tb-tx-tech-card {
    background: linear-gradient(160deg, #0f172a, #081120);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 1.5rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tb-tx-tech-card:hover {
    border-color: rgba(52,211,153,0.5);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(16,185,129,0.15);
}
.tb-tx-tech-card code { background: #1e293b; color: #6ee7b7; border-radius: 0.4rem; padding: 2px 8px; font-size: 0.85em; }
.tb-tx-tech-card .tb-tx-tech-label { color: #6ee7b7; }

/* ---------- FAQ accordion (mirrors blog-faq styling, emerald-themed) ---------- */
.tb-tx-faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.1rem 1.4rem;
    margin-bottom: 0.9rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tb-tx-faq-item:hover { border-color: #a7f3d0; }
.tb-tx-faq-item[open] {
    border-color: #6ee7b7;
    box-shadow: 0 10px 26px rgba(16,185,129,0.1);
}
.tb-tx-faq-item summary {
    cursor: pointer;
    font-weight: 800;
    color: #0f172a;
    list-style: none;
    font-size: 1.05rem;
}
.tb-tx-faq-item summary::-webkit-details-marker { display: none; }
.tb-tx-faq-item summary::before { content: "＋"; color: #059669; font-weight: 900; margin-right: 10px; }
.tb-tx-faq-item[open] summary::before { content: "－"; }
.tb-tx-faq-item p { margin: 0.9rem 0 0.2rem; color: #475569; line-height: 1.65; }