/* ─────────────────────────────────────────────────────────────────────────────
   voice-ai-agents-overrides.css
   Enforces the homepage cream/dark design system across all /voice-ai-agents/ pages.
   Loaded AFTER voice-agent-dark.css to win the cascade and neutralise the
   legacy purple/white theme.
───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Reset CSS Custom Properties ── */
:root {
  --bg: #f0ede8 !important;
  --bg2: #e8e4dd !important;
  --bg3: #ddd9d2 !important;
  --card-bg: #ffffff !important;

  --text: #111111 !important;
  --text-dim: rgba(17, 17, 17, 0.65) !important;
  --text-mid: rgba(17, 17, 17, 0.75) !important;

  --border: rgba(0, 0, 0, 0.10) !important;
  --border-orange: rgba(0, 0, 0, 0.18) !important;

  /* Replace ALL purple with teal + amber */
  --orange: #0d9488 !important;
  --orange-light: #14b8a6 !important;
  --orange-dim: rgba(13, 148, 136, 0.08) !important;
  --teal: #0d9488 !important;
  --teal-light: #14b8a6 !important;
  --teal-dim: rgba(13, 148, 136, 0.07) !important;
  --green: #0d9488 !important;
  --green-light: #14b8a6 !important;
  --green-dim: rgba(13, 148, 136, 0.07) !important;
  --amber: #d97706 !important;
  --coral: #d97706 !important;
  --mint: #0d9488 !important;
  --rose: #d97706 !important;
  --yellow: #d97706 !important;
  --yellow-dim: rgba(217, 119, 6, 0.10) !important;
  --purple: #111111 !important;
  --purple-light: #333333 !important;

  --font-display: 'Playfair Display', Georgia, serif !important;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --radius: 4px !important;
  --radius-md: 6px !important;
  --radius-lg: 8px !important;
}

/* ── 2. Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── 3. Base ── */
html, body {
  background-color: #f0ede8 !important;
  color: #111111 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── 4. Headings → Playfair Display ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #111111 !important;
  letter-spacing: -0.02em !important;
}

/* ── 5. Section backgrounds ── */
section {
  background-color: #f0ede8 !important;
}

/* ── 6. Tailwind text overrides ── */
.text-white,
.text-zinc-100, .text-zinc-200, .text-zinc-300,
.text-gray-100, .text-gray-200, .text-gray-300,
.text-neutral-100, .text-neutral-200 {
  color: #111111 !important;
}
.text-zinc-400, .text-zinc-500, .text-zinc-600,
.text-gray-400, .text-gray-500, .text-gray-600 {
  color: rgba(17, 17, 17, 0.65) !important;
}
.text-zinc-800, .text-zinc-900, .text-gray-800, .text-gray-900 {
  color: #111111 !important;
}
.text-purple-600, .text-purple-500, .text-purple-400,
.text-violet-600, .text-violet-500,
.text-indigo-600, .text-indigo-500 {
  color: #0d9488 !important;
}

/* ── 7. Tailwind background overrides ── */
.bg-zinc-900, .bg-zinc-800, .bg-neutral-900, .bg-black,
.bg-gray-900, .bg-gray-800 {
  background-color: #f0ede8 !important;
}
.bg-zinc-50, .bg-zinc-100, .bg-gray-50, .bg-gray-100,
.bg-neutral-50, .bg-neutral-100, .bg-white {
  background-color: #ffffff !important;
}
.bg-purple-600, .bg-purple-500, .bg-purple-100, .bg-purple-50,
.bg-violet-600, .bg-violet-500,
.bg-indigo-600, .bg-indigo-100, .bg-indigo-50 {
  background-color: rgba(13, 148, 136, 0.07) !important;
  color: #0d9488 !important;
}

/* ── 8. Buttons ── */
.btn-primary, button.btn-primary, a.btn-primary {
  background: #111111 !important;
  color: #f0ede8 !important;
  border: 1.5px solid #111111 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.btn-primary:hover, a.btn-primary:hover {
  background: #2d2d2d !important;
  border-color: #2d2d2d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}
.btn-secondary, button.btn-secondary, a.btn-secondary {
  background: transparent !important;
  color: #111111 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 4px !important;
}
.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}
.btn-teal, a.btn-teal {
  background: #0d9488 !important;
  color: #ffffff !important;
  border-color: #0d9488 !important;
  border-radius: 4px !important;
}
.btn-teal:hover {
  background: #0f766e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.25) !important;
}

/* ── 9. Pills & Tags ── */
.pill,
.pill-orange, .pill-amber, .pill-teal, .pill-mint,
.pill-yellow, .pill-purple, .pill-green, .pill-coral, .pill-rose {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #111111 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
}
.pill-teal, .pill-mint, .pill-green {
  background: rgba(13, 148, 136, 0.07) !important;
  color: #0d9488 !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
}
.pill-amber, .pill-yellow, .pill-orange {
  background: rgba(217, 119, 6, 0.07) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

/* ── 10. Cards & Containers ── */
.card, .feature-card, .stat-card, .stat-box,
.use-case-card, .benefit-card, .voice-card,
.section-card, .faq-card, .step-card,
[class*="-card"], [class*="card-"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* ── 11. FAQ ── */
.faq-q, .faq-item, .faq-a, [class*="faq"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: #111111 !important;
}
.faq-a { color: rgba(17, 17, 17, 0.72) !important; }

/* ── 12. Steps & Icons ── */
.step-num, .step-number {
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}
.icon-wrap, .icon-box, .feature-icon, [class*="icon-"] {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #111111 !important;
  border-radius: 4px !important;
}
[class*="icon-teal"], [class*="icon-green"] {
  background: rgba(13, 148, 136, 0.08) !important;
  color: #0d9488 !important;
}
[class*="icon-amber"], [class*="icon-orange"] {
  background: rgba(217, 119, 6, 0.08) !important;
  color: #d97706 !important;
}

/* ── 13. Inline hardcoded purple overrides ── */
[style*="background: #6c47ff"],
[style*="background:#6c47ff"],
[style*="background-color: #6c47ff"],
[style*="background-color:#6c47ff"],
[style*="background: rgb(108, 71, 255)"],
[style*="background-color: rgb(108, 71, 255)"] {
  background: rgba(13, 148, 136, 0.08) !important;
  background-color: rgba(13, 148, 136, 0.08) !important;
}
[style*="color: #6c47ff"],
[style*="color:#6c47ff"],
[style*="color: rgb(108, 71, 255)"] {
  color: #0d9488 !important;
}

/* ── 14. Borders ── */
.border-zinc-700, .border-zinc-800, .border-zinc-900,
.border-white, .border-white\/10, .border-white\/20,
.border-gray-200, .border-zinc-200 {
  border-color: rgba(0, 0, 0, 0.10) !important;
}
.border-purple-600, .border-indigo-600, .border-violet-600 {
  border-color: rgba(13, 148, 136, 0.3) !important;
}

/* ── 15. Rounded corners → sharp ── */
.rounded-full:not(img):not(video):not(.online-dot):not(.avatar-img):not(.wave-bar) {
  border-radius: 4px !important;
}
.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 6px !important; }
.rounded-lg { border-radius: 6px !important; }
.rounded-md { border-radius: 4px !important; }
.rounded { border-radius: 4px !important; }

/* ── 16. Gradient text → editorial dark ── */
.gradient-text, [class*="gradient-text"] {
  background: linear-gradient(120deg, #111111 0%, #333333 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Stat/metric numbers → teal-amber gradient */
.stat-val, .stat-number, .metric-number {
  background: linear-gradient(120deg, #0d9488, #d97706) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 17. Muted text helpers ── */
.text-dim, .text-muted, .sub-text, .subtext,
.label-text, .caption, .section-sub, .hero-sub,
.hero-subtitle {
  color: rgba(17, 17, 17, 0.65) !important;
}

/* ── 18. Section eyebrow/label badges ── */
.section-tag, .section-eyebrow, .section-label,
.tag, .badge, .label-tag,
[class*="-tag"]:not(img), [class*="tag-"]:not(img),
[class*="-badge"]:not(img), [class*="badge-"]:not(img) {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #111111 !important;
  border-radius: 4px !important;
}
.section-eyebrow, .section-label {
  color: #0d9488 !important;
  background: rgba(13, 148, 136, 0.07) !important;
  border-color: rgba(13, 148, 136, 0.20) !important;
}

/* ── 19. Wave / Voice animation bars ── */
.wave-bar {
  background: #0d9488 !important;
  border-radius: 2px !important;
}
.waveform-bar, .voice-bar, [class*="wave-bar"] {
  background: #0d9488 !important;
}

/* ── 20. Call / Chat simulator panels ── */
.sim-panel, .call-panel, .chat-panel,
.transcript-box, .call-transcript {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
}
.sim-header, .call-header {
  background: #111111 !important;
  color: #ffffff !important;
}

/* ── 21. Dividers ── */
hr, .divider {
  border-color: rgba(0, 0, 0, 0.10) !important;
  opacity: 1 !important;
}

/* ── 22. Tables ── */
table thead th {
  background: #e8e4dd !important;
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
table tbody td {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
table tbody tr:nth-child(even) td {
  background: #f8f5f0 !important;
}

/* ── 23. Stat containers ── */
.stats-grid, .metrics-grid { background: transparent !important; }
.stat-item, .metric-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
}

/* ── 24. CTA / Dark banner sections ── */
.cta-banner, .cta-section, .dark-cta {
  background: #111111 !important;
  color: #f0ede8 !important;
}
.cta-banner h2, .cta-section h2, .dark-cta h2,
.cta-banner h3, .cta-section h3, .dark-cta h3 {
  color: #ffffff !important;
}

/* ── 25. Testimonials / Quotes ── */
.testimonial-card, .quote-card, blockquote {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-left: 3px solid #0d9488 !important;
  border-radius: 6px !important;
  color: #111111 !important;
}

/* ── 26. Content links ── */
main a:not([class*="btn"]):not([class*="button"]):not([class*="pill"]) {
  color: #0d9488;
}
main a:not([class*="btn"]):not([class*="button"]):not([class*="pill"]):hover {
  color: #0f766e;
  text-decoration: underline;
}

/* ── 27. Tailwind arbitrary purple values ── */
[class*="bg-\[#6c47ff\]"], [class*="text-\[#6c47ff\]"],
[class*="border-\[#6c47ff\]"] {
  background-color: rgba(13, 148, 136, 0.08) !important;
  color: #0d9488 !important;
  border-color: rgba(13, 148, 136, 0.3) !important;
}

/* ── 28. Remove glow / blob effects ── */
.radial-blur-glow, [class*="radial-blur"],
[class*="animate-pulse-slow"], [class*="glow"] {
  opacity: 0 !important;
  display: none !important;
}

/* ── 29. Focus rings ── */
*:focus-visible {
  outline: 2px solid #0d9488 !important;
  outline-offset: 2px !important;
}

/* ── 30. Integration / logo cards ── */
.integration-item, .partner-logo, .logo-grid-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
}