/* ==========================================================================
   SuperSales Design System Theme for metacrawler.supersales.software
   Matching: https://supersales.software/
   ========================================================================== */

:root,
html,
html[data-theme="light"],
html[data-theme="dark"],
body {
  /* SuperSales Emerald Brand Tokens */
  --bolt-ds-brand: 0 166 81 !important;
  --bolt-ds-brandHover: 0 135 68 !important;
  --bolt-ds-onBrand: 255 255 255 !important;
  --bolt-ds-brandBgSubtle: #E8F7EE !important;
  --bolt-ds-brandBgSubtleHover: #DCF1E6 !important;
  --bolt-ds-onBrandBgSubtle: 0 135 68 !important;
  --bolt-ds-brandBorderSubtle: #B8E6CB !important;

  /* SuperSales Surfaces & Backgrounds */
  --bolt-ds-bg: 255 255 255 !important;
  --bolt-ds-bgHover: 244 245 247 !important;
  --bolt-ds-bgAlt: 251 252 253 !important;
  --bolt-ds-bgAltHover: 244 245 247 !important;
  --bolt-ds-bgSecondary: 244 245 247 !important;
  --bolt-ds-bgSecondaryHover: 232 247 238 !important;
  --bolt-ds-bgSecondaryAlt: 255 255 255 !important;
  --bolt-ds-bgTertiary: 240 240 243 !important;
  --bolt-ds-bgTertiaryHover: 232 247 238 !important;
  --bolt-ds-bgTertiaryAlt: 255 255 255 !important;

  /* SuperSales Inks & Typography */
  --bolt-ds-textPrimary: 28 32 36 !important;
  --bolt-ds-textSecondary: 96 100 108 !important;
  --bolt-ds-textTertiary: 128 131 141 !important;
  --bolt-ds-iconPrimary: 28 32 36 !important;
  --bolt-ds-iconSecondary: 96 100 108 !important;
  --bolt-ds-iconTertiary: 160 163 173 !important;

  /* SuperSales Borders & Dividers */
  --bolt-ds-borderPrimary: #E0E2E6 !important;
  --bolt-ds-borderSecondary: #E6E8EB !important;
  --bolt-ds-divider: #E0E2E6 !important;

  /* Status Colors */
  --bolt-ds-success: 0 166 81 !important;
  --bolt-ds-successHover: 0 135 68 !important;
  --bolt-ds-onSuccess: 255 255 255 !important;
  --bolt-ds-successBgSubtle: #E8F7EE !important;
  --bolt-ds-successBorderSubtle: #B8E6CB !important;

  /* Marketing Tokens */
  --marketing-brand: 0 166 81 !important;
  --marketing-brand-hover: 0 135 68 !important;
  --marketing-brand-ink: 0 135 68 !important;
  --marketing-surface: 255 255 255 !important;
  --marketing-surface-deep: 251 252 253 !important;
  --marketing-on-surface: 28 32 36 !important;

  /* SuperSales Color Variables */
  --ss-green: #00A651;
  --ss-green-hover: #008744;
  --ss-green-soft: #E8F7EE;
  --ss-green-border: #B8E6CB;
  --ss-ink: #1C2024;
  --ss-mute: #60646C;
  --ss-line: #E0E2E6;
  --ss-bg: #FBFCFD;
  --ss-card-bg: #FFFFFF;
}

/* ==========================================================================
   Page & Ambient Lighting
   ========================================================================== */
html, body {
  background-color: var(--ss-bg) !important;
  color: var(--ss-ink) !important;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Ambient Emerald Glow from top matching SuperSales 3D spheres */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 600px;
  background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(0, 166, 81, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Replace dark homepage background with SuperSales subtle grid */
._image_1lrrr_7 {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 166, 81, 0.08), transparent 70%), #FBFCFD !important;
}
._image_1lrrr_7:after {
  background-image: radial-gradient(circle, rgba(0, 166, 81, 0.15) 1px, transparent 1px) !important;
  opacity: 0.7 !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.mkt-nav,
header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid var(--ss-line) !important;
  box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04) !important;
}

.mkt-nav-link,
.mkt-nav-signin,
.mkt-nav a {
  color: var(--ss-ink) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

.mkt-nav-link:hover,
.mkt-nav-signin:hover {
  color: var(--ss-green) !important;
  background-color: #F4F4F6 !important;
}

.mkt-nav-logo svg path {
  fill: var(--ss-green) !important;
}

/* Header CTAs */
.mkt-nav a[href*="login"],
.mkt-nav a[href*="pricing"] {
  color: var(--ss-ink) !important;
}

.mkt-nav a[href*="pricing"]:hover {
  color: var(--ss-green) !important;
}

/* ==========================================================================
   Headings & Text Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--ss-ink) !important;
  letter-spacing: -0.02em !important;
}

p, span, div {
  color-scheme: light !important;
}

/* Shimmer or Gradient Text */
[class*="TextShimmer_"],
.text-transparent {
  background-image: linear-gradient(135deg, #1C2024 20%, #00A651 60%, #12946A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ==========================================================================
   Prompt Box & Textarea
   ========================================================================== */
/* Main prompt box outer container */
[class*="_PromptContainer_"],
.relative.bg-\[\#16171d\],
.bg-\[\#16171d\] {
  background-color: var(--ss-card-bg) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 166, 81, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[class*="_PromptContainer_"]:focus-within,
.relative.bg-\[\#16171d\]:focus-within {
  border-color: rgba(0, 166, 81, 0.6) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 166, 81, 0.16), 0 0 0 2px rgba(0, 166, 81, 0.2) !important;
}

/* Interactive Textarea */
#interactive-bolt-textarea {
  color: var(--ss-ink) !important;
  background: transparent !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#interactive-bolt-textarea::placeholder {
  color: #80838D !important;
}

/* Send Button */
button[aria-label="Send message"] {
  background-color: var(--ss-green) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.3) !important;
  transition: all 0.2s ease !important;
}

button[aria-label="Send message"]:hover:not(:disabled) {
  background-color: var(--ss-green-hover) !important;
  box-shadow: 0 4px 14px rgba(0, 166, 81, 0.45) !important;
  transform: translateY(-1px) !important;
}

button[aria-label="Send message"]:disabled {
  background-color: #E0E2E6 !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* Starter Buttons / Pills */
._surface_1ublg_6,
button[class*="rounded-full"],
button[class*="backdrop-blur"] {
  background-color: var(--ss-card-bg) !important;
  border: 1px solid var(--ss-line) !important;
  color: var(--ss-ink) !important;
  box-shadow: 0 1px 2px rgba(28, 32, 36, 0.04) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

._surface_1ublg_6:hover,
button[class*="rounded-full"]:hover {
  background-color: var(--ss-green-soft) !important;
  border-color: var(--ss-green) !important;
  color: var(--ss-green-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 166, 81, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Buttons (SuperSales cw-btn style)
   ========================================================================== */
.cw-btn-primary,
button.bg-bolt-ds-brand,
a.bg-bolt-ds-brand,
a[href*="signup"] {
  background-color: var(--ss-green) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.25) !important;
  transition: all 0.2s ease !important;
}

.cw-btn-primary:hover,
button.bg-bolt-ds-brand:hover,
a.bg-bolt-ds-brand:hover,
a[href*="signup"]:hover {
  background-color: var(--ss-green-hover) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 166, 81, 0.4) !important;
}

/* Secondary Buttons */
.cw-btn-secondary,
button.bg-bolt-ds-bgSecondary {
  background-color: var(--ss-card-bg) !important;
  color: var(--ss-ink) !important;
  border: 1px solid var(--ss-line) !important;
  box-shadow: 0 1px 2px rgba(28, 32, 36, 0.05) !important;
}

.cw-btn-secondary:hover,
button.bg-bolt-ds-bgSecondary:hover {
  background-color: #F9F9FB !important;
  border-color: #D0D3D9 !important;
}

/* ==========================================================================
   Marketing Cards, Features & Persona Sections
   ========================================================================== */
/* Section backgrounds */
section {
  color: var(--ss-ink) !important;
}

/* Marketing cards */
[class*="border-white"],
[class*="border-\[\#"],
.border-white\/10,
.border-white\/5 {
  border-color: var(--ss-line) !important;
}

.bg-white\/5,
.bg-white\/10,
.bg-black\/40,
.bg-\[\#121318\],
.bg-\[\#1c1d24\],
.bg-\[\#0c0d12\] {
  background-color: var(--ss-card-bg) !important;
  color: var(--ss-ink) !important;
}

/* Text overrides on light background */
.text-white {
  color: var(--ss-ink) !important;
}
.text-white\/80,
.text-white\/75,
.text-white\/70,
.text-white\/60 {
  color: var(--ss-mute) !important;
}
.text-white\/50,
.text-white\/40 {
  color: #80838D !important;
}

/* Ensure white text inside green buttons stays white */
button[aria-label="Send message"] *,
.cw-btn-primary *,
a.bg-bolt-ds-brand *,
button.bg-bolt-ds-brand *,
a[href*="signup"] *,
.ss-avatar-badge,
[class*="bg-emerald"] *,
[class*="bg-blue"] * {
  color: #FFFFFF !important;
}

/* ==========================================================================
   Pricing Page Specific Styles (/pricing)
   ========================================================================== */
/* Pricing cards */
[class*="PricingCard"],
div[class*="rounded-3xl border"],
div[class*="rounded-2xl border"] {
  background-color: var(--ss-card-bg) !important;
  border: 1px solid var(--ss-line) !important;
  color: var(--ss-ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease-out !important;
}

/* Pro / Highlighted tier card */
[class*="PricingCard"]:hover,
div[class*="rounded-3xl border"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 166, 81, 0.4) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 166, 81, 0.12), 0 0 0 1px rgba(0, 166, 81, 0.2) !important;
}

/* Most Popular Badge */
[class*="PlanBadge"],
span[class*="text-blue-"] {
  background-color: var(--ss-green-soft) !important;
  color: var(--ss-green-hover) !important;
  border: 1px solid var(--ss-green-border) !important;
  font-weight: 600 !important;
}

/* Plan feature checkmark icons */
svg:has(path[d*="m4.5 12.75"]),
svg:has(path[d*="M5 13l4 4L19 7"]),
[class*="check"] {
  color: var(--ss-green) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer,
.mkt-footer,
[class*="SiteFooter"] {
  background-color: #F4F5F7 !important;
  border-top: 1px solid var(--ss-line) !important;
  color: var(--ss-mute) !important;
}

footer a,
.mkt-footer a {
  color: var(--ss-mute) !important;
}

footer a:hover,
.mkt-footer a:hover {
  color: var(--ss-green) !important;
}

/* ==========================================================================
   SuperSales Meta Policy Search Modal
   ========================================================================== */
#bolt-preview-modal > div {
  background-color: #FFFFFF !important;
  border: 1px solid var(--ss-line) !important;
  color: var(--ss-ink) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 166, 81, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

#bolt-preview-modal p {
  color: var(--ss-mute) !important;
}

#bolt-preview-modal #modal-policy-results > div {
  background-color: #F9F9FB !important;
  border: 1px solid var(--ss-line) !important;
}

#bolt-preview-modal #modal-policy-results > div:hover {
  border-color: var(--ss-green) !important;
  box-shadow: 0 4px 16px rgba(0, 166, 81, 0.1) !important;
}

#bolt-preview-modal h4 {
  color: var(--ss-ink) !important;
}