/* ─────────────────────────────────────────────────────────────────────────────
   ai-chatbots-overrides.css
   Enforces the homepage cream/dark design system across all /ai-chatbots/ pages.
   Loaded AFTER chatbot-overrides.css to win the cascade and neutralise the
   legacy purple/white theme set in that file.
───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Reset CSS Custom Properties (overrides chatbot-overrides.css :root) ── */
:root {
  /* Background palette */
  --bg: #f0ede8 !important;
  --bg2: #e8e4dd !important;
  --bg3: #ddd9d2 !important;
  --card-bg: #ffffff !important;

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

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

  /* Brand accents — 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;

  /* Typography */
  --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. Google Fonts — Playfair + Inter ── */
@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 Page ── */
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. Body / Section backgrounds ── */
body > section,
main > section,
section {
  background-color: #f0ede8 !important;
}

/* ── 6. Tailwind Colour 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;
}

/* Purple → Teal */
.text-purple-600, .text-purple-500, .text-purple-400,
.text-violet-600, .text-violet-500,
.text-indigo-600, .text-indigo-500 {
  color: #0d9488 !important;
}

/* 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;
}

/* Purple bg sections → cream */
.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;
}

/* ── 7. Buttons ── */

/* Primary buttons → dark */
.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;
}

/* Secondary → outlined */
.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;
}

/* Teal CTA */
.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;
  border-color: #0f766e !important;
  transform: translateY(-1px) !important;
}

/* ── 8. 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;
}

/* Teal pills for positives */
.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;
}

/* Amber pills for highlights */
.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;
}

/* ── 9. Cards & Containers ── */
.card, .feature-card, .stat-card, .stat-box,
.integration-card, .use-case-card, .benefit-card,
.chatbot-card, .section-card, .faq-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;
}

/* ── 10. FAQ Accordion ── */
.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; }

/* ── 11. Steps & Icon Containers ── */
.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;
}

/* Teal/amber icon accents */
[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;
}

/* ── 12. Section Backgrounds from Tailwind ── */
.bg-\[\#6c47ff\], [class*="bg-\[#6c47ff\]"] {
  background-color: rgba(13, 148, 136, 0.08) !important;
}
[class*="bg-purple-"], [class*="bg-indigo-"], [class*="bg-violet-"] {
  background-color: rgba(13, 148, 136, 0.06) !important;
}

/* Inline style overrides for hardcoded purple background values */
[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;
}

/* Inline purple text */
[style*="color: #6c47ff"],
[style*="color:#6c47ff"],
[style*="color: rgb(108, 71, 255)"] {
  color: #0d9488 !important;
}

/* ── 13. 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;
}

/* ── 14. Rounded corners → sharp ── */
.rounded-full:not(img):not(video):not(.online-dot):not(.avatar-img) {
  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; }

/* ── 15. Gradient text → editorial dark ── */
.gradient-text, [class*="gradient-text"],
[class*="bg-gradient-to-r"][class*="bg-clip-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 gradient */
.stat-number .gradient-text,
.metric .gradient-text,
.stat-val {
  background: linear-gradient(120deg, #0d9488, #d97706) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

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

/* ── 17. Section header badges / labels ── */
.section-tag, .section-eyebrow, .section-label,
.tag, .badge, .label-tag,
[class*="-tag"], [class*="tag-"], [class*="-badge"], [class*="badge-"] {
  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;
}

/* ── 18. Chat Bubble colours ── */
.chat-bubble-bot, .msg-bot, .bot-bubble, .ai-bubble {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #111111 !important;
  border-radius: 6px !important;
}

.chat-bubble-user, .msg-user, .user-bubble {
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

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

/* ── 20. Table ── */
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;
}

/* ── 21. Stats grid containers ── */
.stats-grid, .metrics-grid, .results-grid {
  background: transparent !important;
}
.stat-item, .metric-item, .result-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
}
.stat-number, .metric-number {
  color: #111111 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Teal/amber stat highlights */
.stat-teal .stat-number, .metric-teal .metric-number { color: #0d9488 !important; -webkit-text-fill-color: #0d9488 !important; }
.stat-amber .stat-number, .metric-amber .metric-number { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; }

/* ── 22. 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;
}

/* ── 23. Prose text colour ── */
p, li, span, td, th, label {
  color: inherit;
}

/* ── 24. Inline Tailwind text-white on spans/divs ── */
div.text-white, span.text-white, p.text-white, h1.text-white, h2.text-white, h3.text-white {
  color: #111111 !important;
}

/* ── 25. Remove radial glows and dark blobs ── */
.radial-blur-glow,
[class*="radial-blur"],
[class*="animate-pulse-slow"],
[class*="glow"] {
  opacity: 0 !important;
  display: none !important;
}

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

/* ── 27. Links within content ── */
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;
}

/* ── 28. Testimonial / quote cards ── */
.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;
}

/* ── 29. CTA / Banner sections (commonly dark) ── */
.cta-banner, .cta-section, .hero-cta-bg, .dark-cta {
  background: #111111 !important;
  color: #f0ede8 !important;
}
.cta-banner *, .cta-section *, .dark-cta * {
  color: inherit;
}
.cta-banner h2, .cta-section h2, .dark-cta h2,
.cta-banner h3, .cta-section h3, .dark-cta h3 {
  color: #ffffff !important;
}

/* ── 30. Ensure hero section is cream, not white ── */
.hero-section, #hero, section.hero {
  background-color: #f0ede8 !important;
}