/* ============================================================
   ZOLARA — Aura Bright for SALES template pages
   (oracle-reading, birth-blueprint, soulmate, career, soul-guide,
    soul-mirror, cosmic-blueprint, twin-flame, yearly-forecast,
    numerology-reading, ...)
   Load ORDER on these pages:  aura-theme.css  →  aura-sales.css
   aura-theme.css supplies: aura bg on .cosmic-bg, hides .stars,
   light nav, Playfair headings. This file flips the template's
   CSS variables + panels from dark to light.
   ============================================================ */

/* ---- flip the design tokens the whole template reads from ---- */
:root{
  --purple:#8a6280 !important;
  --purple-light:#a986a0 !important;
  --gold:#9a6a20 !important;        /* deep readable gold on light  */
  --gold-light:#b07d2f !important;
  --gold-dim:#8f6117 !important;
  --midnight:transparent !important;         /* body bg comes from aura */
  --midnight-card:rgba(255,252,249,.88) !important;
  --text:#241820 !important;
  --text-dim:#5a4650 !important;
  --text-bright:#1c0e15 !important;
  --accent:#74506B !important;
  --accent-glow:rgba(116,80,107,.22) !important;
}

body{ background:transparent !important; color:#241820 !important; }

/* ---- dark panels → soft light panels ---- */
.included-item,
.benefit-card,
.faq-item,
.testimonial-block,
.price-box,
.guarantee-box,
.system-badge,
.step-card,
.bonus-card{
  background:rgba(255,252,249,.85) !important;
  border:1px solid rgba(162,110,78,.18) !important;
  box-shadow:0 18px 40px rgba(122,96,109,.14) !important;
}

/* ---- leftover hardcoded light text (inline styles) ---- */
[style*="color:#F0D55B"], [style*="color: #F0D55B"],
[style*="color:#f0d77b"]{ color:#8f6117 !important; }
[style*="color:#fff"], [style*="color:#FFF"],
[style*="color: #FFF"], [style*="color: #fff"],
[style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"]{
  color:#241820 !important;
}

/* gold star ratings stay gold but deeper for contrast */
.z-star, .z-stars i, .testimonial-stars{ color:#8f6117 !important; text-shadow:none !important; }

/* price glow that was tuned for dark bg */
.price-tag{ text-shadow:0 1px 14px rgba(255,251,247,.9) !important; color:#1c0e15 !important; }

/* CTA buttons keep gold but ensure dark label */
.cta-btn{ color:#3a2508 !important; }

/* ============================================================
   HERO is an intentional DARK cinematic cover photo
   (images/heros/hero-*.png + navy gradient). It stays dark on
   purpose (focuses the eye on the VSL video + works for sales).
   So inside .hero ONLY, force text back to LIGHT for contrast.
   .hero is isolated to the top band; all sections below it are
   light — this scope does not leak into them.
   ============================================================ */
/* everything in the hero → light (broad), then re-gild the accents below */
.hero *{
  color:#F4ECFF !important;
  -webkit-text-fill-color:#F4ECFF !important;
  text-shadow:0 2px 16px rgba(4,10,30,.55) !important;
}
/* gold emphasis + price stay gold on the dark hero (higher specificity wins) */
.hero .gold, .hero h1 em, .hero h2 em, .hero h3 em, .hero em, .hero em.gold,
.hero .price-tag, .hero .hero-price, .hero .price-note{
  color:#F0D55B !important;
  -webkit-text-fill-color:#F0D55B !important;
  background:none !important;
  background-image:none !important;
  text-shadow:0 0 24px rgba(212,175,55,.4) !important;
}
/* badge text light (beats aura-theme's .hero .hero-badge dark rule) */
.hero .hero-badge, .hero .hero-badge *,
.hero .system-badge, .hero .system-badge *{
  color:#F4ECFF !important;
  -webkit-text-fill-color:#F4ECFF !important;
}
/* badge pill styled for the dark hero */
.hero .system-badge, .hero .hero-badge{
  border:1px solid rgba(240,213,123,.42) !important;
  background:rgba(255,255,255,.06) !important;
}
/* CTA button inside hero keeps its gold fill + dark label (already fine) */
.hero .cta-btn{ color:#3a2508 !important; -webkit-text-fill-color:#3a2508 !important; }

/* ---- form controls (order form, birth-data inputs) ---- */
input, select, textarea{
  background:rgba(255,252,249,.92) !important;
  color:#241820 !important;
  border-color:rgba(162,110,78,.38) !important;
}
input::placeholder, textarea::placeholder{ color:#8a7480 !important; }
label{ color:#4a3641 !important; }

/* scrollbar tuned for light */
::-webkit-scrollbar-track{ background:#e9dccc !important; }
::-webkit-scrollbar-thumb{ background:#b99a77 !important; }