/* ============================================================
   Vira-Cure — Brand Overrides
   Teal-Blue Medical Palette over base style.css
   ============================================================ */

/* ── Vira-Cure brand colours ── */
:root {
  --vc-primary:   #0a6e6e;   /* deep teal */
  --vc-secondary: #0d9e9e;   /* mid teal  */
  --vc-accent:    #14c8c8;   /* bright cyan-teal */
  --vc-light:     #e0f7f7;
  --vc-pale:      #f0fafa;
  --vc-gradient:  linear-gradient(135deg, #0a2463 0%, #0a6e6e 55%, #14c8c8 100%);
  --vc-gradient2: linear-gradient(135deg, #0d9e9e 0%, #14c8c8 100%);
  --vc-hero-grad: linear-gradient(160deg, #0a1628 0%, #0a3355 30%, #0a6e6e 70%, #14c8c8 100%);
}

/* ── Hero ── */
.vc-hero { background: var(--vc-hero-grad) !important; }

.vc-hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(10,22,40,0.90) 0%,
    rgba(10,51,85,0.75) 40%,
    rgba(10,110,110,0.60) 80%,
    rgba(20,200,200,0.40) 100%
  ) !important;
}

.vc-gradient-text {
  background: var(--vc-gradient2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.vc-glow-ring {
  border-color: rgba(20,200,200,0.35) !important;
}

/* ── Nav ── */
.vc-logo-icon { background: var(--vc-gradient) !important; }

.vc-nav-cta {
  background: var(--vc-gradient) !important;
}

/* ── Buttons ── */
.vc-btn-primary {
  background: var(--vc-gradient) !important;
  box-shadow: 0 4px 20px rgba(10,110,110,0.35) !important;
}

.vc-btn-primary:hover {
  box-shadow: 0 8px 30px rgba(14,200,200,0.5) !important;
}

/* ── Section eyebrow (pills) ── */
.vc-eyebrow {
  color: var(--vc-accent) !important;
  background: rgba(20,200,200,0.12) !important;
  border-color: rgba(20,200,200,0.3) !important;
}

/* ── Highlight text ── */
.vc-highlight { color: var(--vc-accent) !important; }

/* ── Pain cards icons ── */
.vc-pain-icon {
  background: linear-gradient(135deg, rgba(10,110,110,0.1) 0%, rgba(20,200,200,0.15) 100%) !important;
  color: var(--vc-primary) !important;
}

/* ── Solution section ── */
.vc-solution {
  background: var(--vc-hero-grad) !important;
}

/* ── Check icons ── */
.vc-check { color: var(--vc-accent) !important; }

/* ── Solution badges ── */
.vc-badge {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(20,200,200,0.3) !important;
}

/* ── Steps ── */
.vc-step-card::before { background: var(--vc-gradient) !important; }
.vc-step-card:hover { border-color: var(--vc-accent) !important; }
.vc-step-icon { background: var(--vc-gradient) !important; }
.vc-step-tag { background: var(--vc-gradient) !important; }

/* ── Play button ── */
.vc-play-btn { background: var(--vc-gradient) !important; }

/* ── BA result badge ── */
.vc-badge-stat {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
  color: var(--vc-accent) !important;
}

/* ── Testimonials ── */
.vc-avatar { background: var(--vc-gradient) !important; }

.vc-testi-badge {
  background: rgba(10,110,110,0.25) !important;
  color: var(--vc-accent) !important;
}

/* ── Product cards ── */
.vc-featured-card { border-color: var(--vc-accent) !important; box-shadow: 0 8px 32px rgba(10,110,110,0.2) !important; }

.vc-card-badge { background: var(--vc-gradient) !important; }

.vc-img-wrap { background: var(--vc-pale) !important; }

.vc-tag {
  color: var(--vc-primary) !important;
  background: rgba(10,110,110,0.1) !important;
}

.vc-check-icon { color: var(--vc-accent) !important; }

/* ── WA strip ── */
.vc-wa-strip { background: var(--vc-gradient) !important; }

/* ── Science icons ── */
.vc-science-icon { background: var(--vc-gradient) !important; }

/* ── Comparison table — Vira-Cure column: teal bg + WHITE text ── */
th.col-us,
td.col-us {
  background: var(--vc-gradient) !important;
  color: #ffffff !important;
}

/* Force ALL child elements white — catches icons, spans, strong tags */
th.col-us *,
td.col-us * {
  color: #ffffff !important;
}

/* Slightly tinted variants so checks/crosses still look distinct on teal */
td.col-us .fas.fa-check-circle { color: #a0ffe0 !important; }
td.col-us .fas.fa-times-circle { color: #ffb3b3 !important; }
td.col-us .fas.fa-minus-circle { color: #ffe8a0 !important; }

/* ── Power CTA overlay ── */
.vc-pcta-overlay {
  background: linear-gradient(
    to right,
    rgba(10,22,40,0.15) 0%,
    rgba(10,51,85,0.45) 35%,
    rgba(10,110,110,0.92) 60%,
    var(--dark) 80%
  ) !important;
}

/* ── Order section ── */
.vc-order-section { background: var(--vc-hero-grad) !important; }

/* ── Final CTA ── */
.vc-final-cta { background: var(--vc-gradient) !important; }

/* ── Popup left panel ── */
.vc-popup-left { background: var(--vc-gradient) !important; }
.vc-popup-left h2 span { color: #a5f3f3 !important; }

/* ── Discount code box ── */
.vc-code {
  border-color: var(--vc-accent) !important;
  color: var(--vc-primary) !important;
}

/* ── Footer ── */
.vc-footer { background: #040f1a !important; }

.vc-logo-color { color: var(--vc-accent) !important; }

/* ── Social proof bar ── */
.vc-proof-bar { background: var(--vc-primary) !important; }

/* ── Active milestone in timeline ── */
.active-milestone { background: var(--vc-gradient) !important; }
.active-milestone strong { color: var(--vc-accent) !important; }

/* ── FAQ hover ── */
.faq-question[aria-expanded="true"] { color: var(--vc-primary) !important; }
.faq-icon { color: var(--vc-accent) !important; }

/* ── Step tag + connector ── */
.step-connector { color: var(--vc-accent) !important; }

/* ═══════════════════════════════════════════════════
   WHITE TEXT FIXES — dark-background sections
   ═══════════════════════════════════════════════════ */

/* Before & After section header — force all text white */
.ba-section-header,
.ba-section-header h2,
.ba-section-header h2 span,
.ba-section-header p {
  color: #ffffff !important;
}

/* Section eyebrow in the BA header stays teal */
.ba-section-header .vc-eyebrow {
  color: var(--vc-accent) !important;
}

/* The .vc-highlight span inside dark headings */
.ba-section-header .vc-highlight {
  color: var(--vc-accent) !important;
}

/* Solution section — white text on teal/dark bg */
.vc-solution h2,
.vc-solution p,
.vc-solution .solution-desc {
  color: #ffffff !important;
}

/* Order section — white text */
.vc-order-section h2,
.vc-order-section p {
  color: #ffffff !important;
}

/* Final CTA — white text */
.vc-final-cta h2,
.vc-final-cta p {
  color: #ffffff !important;
}

/* Power CTA right panel */
.pcta-content h2,
.pcta-content p,
.pcta-content .pcta-desc,
.pcta-content .pcta-checklist li {
  color: #ffffff !important;
}

/* Testimonials section heading */
.testimonials-section h2,
.testimonials-section .section-eyebrow.light {
  color: #ffffff !important;
}

/* Video section heading */
.video-section h2 {
  color: #ffffff !important;
}

/* BA slide badge text — already white but force it */
.ba-badge-name,
.ba-badge-weeks,
.ba-badge-stars {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Results disclaimer at bottom of BA section */
.ba-fullscreen-section .results-disclaimer {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Global: any h2 inside a section with dark bg class */
.parallax-section h2 {
  color: #ffffff !important;
}

/* ── Hero section heading always white ── */
.vc-hero .hero-title,
.vc-hero .hero-subtitle,
.vc-hero .hero-badge,
.vc-hero .hero-trust {
  color: #ffffff !important;
}