/*
  Dookun quotation page color consistency.
  Loaded only on /quotation/ and loaded after the older inline/global CSS.
  Purpose: stop light/dark color conflicts without changing quote logic.
*/

/* ---------- Page base ---------- */

body.quotation-step-flow-page {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html.dark body.quotation-step-flow-page,
html[data-theme="dark"] body.quotation-step-flow-page {
  background: #020617 !important;
  color: #f8fafc !important;
}

/* ---------- Main white/dark cards ---------- */

body.quotation-step-flow-page section,
body.quotation-step-flow-page .rounded-3xl,
body.quotation-step-flow-page .rounded-2xl {
  color: #0f172a !important;
}

html.dark body.quotation-step-flow-page section,
html.dark body.quotation-step-flow-page .rounded-3xl,
html.dark body.quotation-step-flow-page .rounded-2xl,
html[data-theme="dark"] body.quotation-step-flow-page section,
html[data-theme="dark"] body.quotation-step-flow-page .rounded-3xl,
html[data-theme="dark"] body.quotation-step-flow-page .rounded-2xl {
  color: #f8fafc !important;
}

/* ---------- Typography ---------- */

body.quotation-step-flow-page h1,
body.quotation-step-flow-page h2,
body.quotation-step-flow-page h3,
body.quotation-step-flow-page h4,
body.quotation-step-flow-page strong,
body.quotation-step-flow-page .font-bold,
body.quotation-step-flow-page .font-semibold,
body.quotation-step-flow-page .font-medium {
  color: inherit !important;
}

body.quotation-step-flow-page p,
body.quotation-step-flow-page li,
body.quotation-step-flow-page span,
body.quotation-step-flow-page .text-slate-500,
body.quotation-step-flow-page .text-slate-600,
body.quotation-step-flow-page .dark\:text-slate-300,
body.quotation-step-flow-page .dark\:text-slate-400 {
  color: #475569 !important;
}

html.dark body.quotation-step-flow-page p,
html.dark body.quotation-step-flow-page li,
html.dark body.quotation-step-flow-page span,
html.dark body.quotation-step-flow-page .text-slate-500,
html.dark body.quotation-step-flow-page .text-slate-600,
html.dark body.quotation-step-flow-page .dark\:text-slate-300,
html.dark body.quotation-step-flow-page .dark\:text-slate-400,
html[data-theme="dark"] body.quotation-step-flow-page p,
html[data-theme="dark"] body.quotation-step-flow-page li,
html[data-theme="dark"] body.quotation-step-flow-page span,
html[data-theme="dark"] body.quotation-step-flow-page .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page .text-slate-600,
html[data-theme="dark"] body.quotation-step-flow-page .dark\:text-slate-300,
html[data-theme="dark"] body.quotation-step-flow-page .dark\:text-slate-400 {
  color: #cbd5e1 !important;
}

/* Keep brand text purple/blue instead of inheriting grey. */

body.quotation-step-flow-page .text-brand-500,
body.quotation-step-flow-page .text-brand-600,
body.quotation-step-flow-page .dark\:text-brand-300 {
  color: #7c3aed !important;
}

html.dark body.quotation-step-flow-page .text-brand-500,
html.dark body.quotation-step-flow-page .text-brand-600,
html.dark body.quotation-step-flow-page .dark\:text-brand-300,
html[data-theme="dark"] body.quotation-step-flow-page .text-brand-500,
html[data-theme="dark"] body.quotation-step-flow-page .text-brand-600,
html[data-theme="dark"] body.quotation-step-flow-page .dark\:text-brand-300 {
  color: #c4b5fd !important;
}

/* ---------- Progress pills ---------- */

body.quotation-step-flow-page .quotation-progress button {
  background: #ffffff !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

html.dark body.quotation-step-flow-page .quotation-progress button,
html[data-theme="dark"] body.quotation-step-flow-page .quotation-progress button {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

body.quotation-step-flow-page .quotation-progress button.is-active {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border-color: #7c3aed !important;
}

html.dark body.quotation-step-flow-page .quotation-progress button.is-active,
html[data-theme="dark"] body.quotation-step-flow-page .quotation-progress button.is-active {
  background: #2e1065 !important;
  color: #ffffff !important;
  border-color: #a78bfa !important;
}

/* ---------- Forms ---------- */

body.quotation-step-flow-page input,
body.quotation-step-flow-page textarea,
body.quotation-step-flow-page select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.dark body.quotation-step-flow-page input,
html.dark body.quotation-step-flow-page textarea,
html.dark body.quotation-step-flow-page select,
html[data-theme="dark"] body.quotation-step-flow-page input,
html[data-theme="dark"] body.quotation-step-flow-page textarea,
html[data-theme="dark"] body.quotation-step-flow-page select {
  background: #020617 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

body.quotation-step-flow-page input::placeholder,
body.quotation-step-flow-page textarea::placeholder {
  color: #64748b !important;
}

html.dark body.quotation-step-flow-page input::placeholder,
html.dark body.quotation-step-flow-page textarea::placeholder,
html[data-theme="dark"] body.quotation-step-flow-page input::placeholder,
html[data-theme="dark"] body.quotation-step-flow-page textarea::placeholder {
  color: #94a3b8 !important;
}

body.quotation-step-flow-page input[type="checkbox"],
body.quotation-step-flow-page input[type="radio"] {
  accent-color: #7c3aed;
}

/* ---------- Package, add-on, payment cards ---------- */

body.quotation-step-flow-page .package-preset,
body.quotation-step-flow-page .quote-option,
body.quotation-step-flow-page .payment-plan-option,
body.quotation-step-flow-page .quote-payment-card,
body.quotation-step-flow-page .quote-chatbot-option,
body.quotation-step-flow-page #contact-maintenance-summary {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe3ee !important;
}

html.dark body.quotation-step-flow-page .package-preset,
html.dark body.quotation-step-flow-page .quote-option,
html.dark body.quotation-step-flow-page .payment-plan-option,
html.dark body.quotation-step-flow-page .quote-payment-card,
html.dark body.quotation-step-flow-page .quote-chatbot-option,
html.dark body.quotation-step-flow-page #contact-maintenance-summary,
html[data-theme="dark"] body.quotation-step-flow-page .package-preset,
html[data-theme="dark"] body.quotation-step-flow-page .quote-option,
html[data-theme="dark"] body.quotation-step-flow-page .payment-plan-option,
html[data-theme="dark"] body.quotation-step-flow-page .quote-payment-card,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-option,
html[data-theme="dark"] body.quotation-step-flow-page #contact-maintenance-summary {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.quotation-step-flow-page .package-preset *,
body.quotation-step-flow-page .quote-option *,
body.quotation-step-flow-page .payment-plan-option *,
body.quotation-step-flow-page .quote-payment-card *,
body.quotation-step-flow-page .quote-chatbot-option * {
  color: inherit !important;
}

/* Secondary text inside cards */

body.quotation-step-flow-page .quote-feature-price,
body.quotation-step-flow-page .quote-option .text-slate-500,
body.quotation-step-flow-page .package-preset .text-slate-500,
body.quotation-step-flow-page .payment-plan-option .text-slate-500,
body.quotation-step-flow-page .quote-chatbot-option .text-slate-500,
body.quotation-step-flow-page .quote-chatbot-option .text-slate-600 {
  color: #64748b !important;
}

html.dark body.quotation-step-flow-page .quote-feature-price,
html.dark body.quotation-step-flow-page .quote-option .text-slate-500,
html.dark body.quotation-step-flow-page .package-preset .text-slate-500,
html.dark body.quotation-step-flow-page .payment-plan-option .text-slate-500,
html.dark body.quotation-step-flow-page .quote-chatbot-option .text-slate-500,
html.dark body.quotation-step-flow-page .quote-chatbot-option .text-slate-600,
html[data-theme="dark"] body.quotation-step-flow-page .quote-feature-price,
html[data-theme="dark"] body.quotation-step-flow-page .quote-option .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page .package-preset .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page .payment-plan-option .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-option .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-option .text-slate-600 {
  color: #cbd5e1 !important;
}

/* ---------- Selected / recommended cards ---------- */

body.quotation-step-flow-page .package-preset.package-selected,
body.quotation-step-flow-page .quote-option.quote-addon-included,
body.quotation-step-flow-page .quote-option.ai-selected-addon,
body.quotation-step-flow-page .payment-plan-option:has(input:checked) {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #2e1065 !important;
  box-shadow: inset 4px 0 0 #7c3aed !important;
}

html.dark body.quotation-step-flow-page .package-preset.package-selected,
html.dark body.quotation-step-flow-page .quote-option.quote-addon-included,
html.dark body.quotation-step-flow-page .quote-option.ai-selected-addon,
html.dark body.quotation-step-flow-page .payment-plan-option:has(input:checked),
html[data-theme="dark"] body.quotation-step-flow-page .package-preset.package-selected,
html[data-theme="dark"] body.quotation-step-flow-page .quote-option.quote-addon-included,
html[data-theme="dark"] body.quotation-step-flow-page .quote-option.ai-selected-addon,
html[data-theme="dark"] body.quotation-step-flow-page .payment-plan-option:has(input:checked) {
  background: #2e1065 !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
  box-shadow: inset 4px 0 0 #a78bfa !important;
}

/* Optional AI-suggested add-ons */

body.quotation-step-flow-page .quote-option.ai-optional-addon {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #0f172a !important;
  box-shadow: inset 4px 0 0 #60a5fa !important;
}

html.dark body.quotation-step-flow-page .quote-option.ai-optional-addon,
html[data-theme="dark"] body.quotation-step-flow-page .quote-option.ai-optional-addon {
  background: #172554 !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  box-shadow: inset 4px 0 0 #60a5fa !important;
}

/* Hide old pseudo labels. The real labels are inside the cards. */

body.quotation-step-flow-page .quote-option.ai-selected-addon::after,
body.quotation-step-flow-page .quote-option.ai-optional-addon::after {
  display: none !important;
  content: none !important;
}

/* ---------- Chatbot cards ---------- */

body.quotation-step-flow-page .quote-chatbot-basic {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #064e3b !important;
}

html.dark body.quotation-step-flow-page .quote-chatbot-basic,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-basic {
  background: rgba(16, 185, 129, .14) !important;
  border-color: rgba(16, 185, 129, .55) !important;
  color: #d1fae5 !important;
}

body.quotation-step-flow-page .quote-chatbot-advanced {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.quotation-step-flow-page .quote-chatbot-advanced:hover {
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
}

body.quotation-step-flow-page .quote-chatbot-advanced:has(input:checked) {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #2e1065 !important;
}

html.dark body.quotation-step-flow-page .quote-chatbot-advanced,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-advanced {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark body.quotation-step-flow-page .quote-chatbot-advanced:hover,
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-advanced:hover {
  border-color: #a78bfa !important;
  background: #1e1b4b !important;
}

html.dark body.quotation-step-flow-page .quote-chatbot-advanced:has(input:checked),
html[data-theme="dark"] body.quotation-step-flow-page .quote-chatbot-advanced:has(input:checked) {
  background: #2e1065 !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
}

/* ---------- Quote summary panel ---------- */

body.quotation-step-flow-page #quote-live-panel,
html.dark body.quotation-step-flow-page #quote-live-panel,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

body.quotation-step-flow-page #quote-live-panel *,
body.quotation-step-flow-page #quote-live-panel h1,
body.quotation-step-flow-page #quote-live-panel h2,
body.quotation-step-flow-page #quote-live-panel h3,
body.quotation-step-flow-page #quote-live-panel h4,
body.quotation-step-flow-page #quote-live-panel strong {
  color: inherit !important;
}

body.quotation-step-flow-page #quote-live-panel p,
body.quotation-step-flow-page #quote-live-panel span,
body.quotation-step-flow-page #quote-live-panel .text-slate-500,
body.quotation-step-flow-page #quote-live-panel .dark\:text-slate-400 {
  color: #cbd5e1 !important;
}

body.quotation-step-flow-page #quote-live-panel #total-usd,
body.quotation-step-flow-page #quote-live-panel #monthly-6,
body.quotation-step-flow-page #quote-live-panel #monthly-12,
body.quotation-step-flow-page #quote-live-panel #ongoing-monthly,
body.quotation-step-flow-page #quote-live-panel #monthly-6-plus-care,
body.quotation-step-flow-page #quote-live-panel #monthly-12-plus-care {
  color: #ffffff !important;
}

/* CMS included card inside quote panel */

body.quotation-step-flow-page #quote-live-panel .bg-emerald-500\/10,
body.quotation-step-flow-page #quote-live-panel .border-emerald-400\/30 {
  background: rgba(16, 185, 129, .14) !important;
  border-color: rgba(16, 185, 129, .45) !important;
  color: #d1fae5 !important;
}

body.quotation-step-flow-page #quote-live-panel .bg-emerald-500\/10 *,
body.quotation-step-flow-page #quote-live-panel .border-emerald-400\/30 * {
  color: inherit !important;
}

/* ---------- CTA buttons ---------- */

body.quotation-step-flow-page .quotation-primary-btn,
body.quotation-step-flow-page .quotation-next-btn,
body.quotation-step-flow-page #contact-panel button[type="submit"] {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  border: 0 !important;
}

body.quotation-step-flow-page #show-contact {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(255,255,255,.85) !important;
}

body.quotation-step-flow-page #show-contact:hover {
  background: #e2e8f0 !important;
}

/* ---------- Safety hide old custom build remnants ---------- */

body.quotation-step-flow-page #enterprise-discuss-btn,
body.quotation-step-flow-page [id="enterprise-interest"],
body.quotation-step-flow-page [id="enterprise-interest-label"] {
  display: none !important;
}

/* === Chatbot option contrast fix inside dark quote summary panel === */
/* The quote summary panel stays dark, but chatbot cards can be light in light mode.
   These rules must come after #quote-live-panel text overrides. */

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic *,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic span,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic p {
  color: #064e3b !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced *,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced span,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced p {
  color: #0f172a !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:hover {
  background: #f5f3ff !important;
  border-color: #7c3aed !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
}

body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked),
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) *,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) span,
body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) p {
  color: #2e1065 !important;
}

/* Preserve the dark-mode look that is already working. */

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic *,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic span,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic p,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic *,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic span,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic p {
  color: #d1fae5 !important;
}

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-basic {
  background: rgba(16, 185, 129, .14) !important;
  border-color: rgba(16, 185, 129, .55) !important;
}

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced {
  background: #111827 !important;
  border-color: #334155 !important;
}

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced *,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced span,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced p,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced *,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced span,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced p {
  color: #f8fafc !important;
}

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked),
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) {
  background: #2e1065 !important;
  border-color: #a78bfa !important;
}

html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked),
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) *,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) span,
html.dark body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) p,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked),
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) *,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) span,
html[data-theme="dark"] body.quotation-step-flow-page #quote-live-panel .quote-chatbot-advanced:has(input:checked) p {
  color: #ffffff !important;
}



/* === Contact payment build duration clarity === */
body.quotation-step-flow-page #contact-build-duration-summary {
  background: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #2e1065 !important;
}

body.quotation-step-flow-page #contact-build-duration-summary * {
  color: inherit !important;
}

body.quotation-step-flow-page #contact-build-duration-summary .text-slate-500,
body.quotation-step-flow-page #contact-build-duration-summary .dark\:text-slate-400 {
  color: #5b21b6 !important;
}

html.dark body.quotation-step-flow-page #contact-build-duration-summary,
html[data-theme="dark"] body.quotation-step-flow-page #contact-build-duration-summary {
  background: #2e1065 !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
}

html.dark body.quotation-step-flow-page #contact-build-duration-summary .text-slate-500,
html.dark body.quotation-step-flow-page #contact-build-duration-summary .dark\:text-slate-400,
html[data-theme="dark"] body.quotation-step-flow-page #contact-build-duration-summary .text-slate-500,
html[data-theme="dark"] body.quotation-step-flow-page #contact-build-duration-summary .dark\:text-slate-400 {
  color: #ddd6fe !important;
}