/* =================================
   SEO LANDING PAGES — Shared Styles
   For: accurate_vedic_horoscope.html, personalized_daily_horoscope.html
   Extracted from inline styles. Colors use design-tokens.css variables.
   These pages use --color-indigo-600 (#4F46E5) as their primary,
   not the site-wide --color-primary (#4b0082).
   ================================= */

/* --- Mobile Floating CTA Bar --- */
.seo-floating-cta {
  z-index: 1000;
  border-top: 2px solid var(--color-indigo-600);
}

.seo-floating-cta__btn {
  background-color: var(--color-indigo-600);
  color: var(--text-on-dark);
  font-weight: 600;
}

/* --- Hero Section --- */
.seo-hero__title {
  color: var(--color-indigo-600);
}

/* --- Badges --- */
.seo-badge--green {
  background-color: var(--color-success-accent);
}

.seo-badge--indigo {
  background-color: var(--color-indigo-600);
}

.seo-badge--amber {
  background-color: var(--color-amber);
}

/* --- CTA Buttons --- */
.seo-btn-primary {
  background-color: var(--color-indigo-600);
  color: var(--text-on-dark);
  font-weight: 600;
}

.seo-btn-primary--bold {
  font-weight: 600;
}

/* --- Featured Snippet / Authority Box --- */
.seo-featured-snippet--green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
  border-left: 4px solid var(--color-success-accent);
}

.seo-featured-snippet--green .seo-snippet__title {
  color: var(--color-success-accent);
}

.seo-featured-snippet--indigo {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  border-left: 4px solid var(--color-indigo-600);
}

.seo-featured-snippet--indigo .seo-snippet__title {
  color: var(--color-indigo-600);
}

/* --- Definition Cards --- */
.seo-defcard--blue {
  background-color: var(--bg-blue-tint);
  border-left: 4px solid var(--color-indigo-600);
}

.seo-defcard--blue h3 {
  color: var(--color-indigo-600);
}

.seo-defcard--amber {
  background-color: var(--bg-amber-tint);
  border-left: 4px solid var(--color-amber);
}

.seo-defcard--amber h3 {
  color: var(--color-secondary-accessible);
}

/* --- Section Headings --- */
.seo-section-heading {
  color: var(--color-indigo-600);
}

/* --- Card Headings (inside Bootstrap cards) --- */
.seo-card-heading {
  color: var(--color-indigo-600);
}

/* --- Icon Circles (Dasha planets / process steps) --- */
.seo-icon-circle {
  width: 60px;
  height: 60px;
}

.seo-icon-circle--amber {
  background-color: var(--color-amber);
  color: var(--gray-800);
}

.seo-icon-circle--gray {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.seo-icon-circle--red {
  background-color: var(--color-danger);
  color: var(--text-on-dark);
}

.seo-icon-circle--indigo {
  background-color: var(--color-indigo-600);
  color: var(--text-on-dark);
}

.seo-icon-circle--green {
  background-color: var(--color-success-accent);
  color: var(--text-on-dark);
}

/* --- Light Section Background --- */
.seo-bg-light {
  background-color: var(--bg-slate-light);
}

/* --- Blockquote / Authority Quote --- */
.seo-blockquote-amber {
  background-color: var(--bg-amber-tint);
  border-color: var(--color-amber) !important;
}

/* --- Sample Card Header --- */
.seo-card-header--indigo {
  background-color: var(--color-indigo-600);
}

/* --- Comparison Table Header --- */
.seo-thead-indigo {
  background-color: var(--color-indigo-600);
  color: var(--text-on-dark);
}

/* --- Gradient CTA Section --- */
.seo-cta-gradient {
  background: linear-gradient(135deg, var(--color-indigo-600) 0%, var(--color-indigo-500) 100%);
}

/* --- Resource Links Section --- */
.seo-resources-section {
  background: rgba(79, 70, 229, 0.05);
}

.seo-resource-card-heading {
  color: var(--color-indigo-600);
}