/* ═══════════════════════════════════════
   lovable-colors.css
   Exact color patch to match Lovable mobile
   Add AFTER maharasa.css in header.php
═══════════════════════════════════════ */

:root {
  /* ── EXACT LOVABLE COLORS (pixel-sampled) ── */
  --bg:          #100b08;   /* warm brown-black — NOT purple */
  --bg2:         #180e0a;   /* card bg */
  --bg3:         #1f1208;   /* elevated surface */
  --card:        #1a0f0b;   /* card background */

  /* Gold — warm amber, NOT cool yellow */
  --gold:        #e8a73f;   /* badge / accent gold */
  --gold2:       #f0b84e;   /* hover state */
  --gold-cta:    #e59c33;   /* CTA button gold (deeper) */
  --gold-dim:    rgba(232,167,63,0.5);
  --gold-faint:  rgba(232,167,63,0.10);
  --gold-gradient: linear-gradient(135deg, #f0b84e 0%, #e8a73f 45%, #c8831a 100%);

  /* Text */
  --text:        #f5f0eb;   /* warm white — NOT pure white */
  --muted:       rgba(245,240,235,0.55);
  --muted2:      rgba(245,240,235,0.32);

  /* Borders */
  --border:      rgba(232,167,63,0.18);
  --border2:     rgba(232,167,63,0.38);

  /* Urgency bar */
  --urgency-bg:  #e4a031;   /* exact amber from strip */
  --urgency-text:#1a0800;   /* near-black text on gold */
}

/* ── OVERRIDE URGENCY BAR ── */
.urgency-bar {
  background: var(--urgency-bg) !important;
  color: var(--urgency-text) !important;
}

/* ── OVERRIDE BODY BG ── */
body { background: var(--bg) !important; }

/* ── OVERRIDE HERO ── */
.lv-hero { background: var(--bg) !important; }
.lv-hero-bg img { opacity: .22 !important; }

/* ── OVERRIDE HERO BG GRADIENT ── */
.lv-hero-bg-fade {
  background: linear-gradient(
    to right,
    rgba(16,11,8,.96) 45%,
    rgba(16,11,8,.35) 100%
  ) !important;
}

/* ── GOLD BUTTONS — warmer amber ── */
.btn-lv-gold,
.mr-nav-cta,
.mr-sticky-btn {
  background: var(--gold-gradient) !important;
  box-shadow: 0 8px 28px -8px rgba(232,160,48,.55) !important;
}

/* ── GOLD GRADIENT TEXT ── */
.gold-italic {
  background: linear-gradient(135deg, #f5c45a 0%, #e8a73f 50%, #c8831a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── BADGE ── */
.lv-hero-badge {
  border-color: rgba(232,167,63,.45) !important;
  background: rgba(232,167,63,.12) !important;
  color: var(--gold) !important;
}
.lv-hero-badge-dot { background: var(--gold) !important; }

/* ── STARS ── */
.stars svg { fill: var(--gold) !important; }
.review-card .stars svg { fill: var(--gold) !important; }
.lv-hero-stars { color: var(--muted) !important; }
.lv-hero-stars strong { color: var(--text) !important; }

/* ── NAV ── */
.mr-nav {
  background: rgba(16,11,8,.92) !important;
  border-color: rgba(232,167,63,.15) !important;
}

/* ── CARDS ── */
.problem-card,
.benefit-card,
.ing-card,
.review-card,
.howto-card,
.buy-card,
.faq-item {
  background: rgba(24,14,10,.65) !important;
  border-color: rgba(232,167,63,.18) !important;
}
.buy-card.featured {
  background: linear-gradient(to bottom,rgba(232,167,63,.14),rgba(24,14,10,.85)) !important;
  border-color: var(--gold) !important;
}

/* ── VERSUS TABLE ── */
.versus-table { border-color: rgba(232,167,63,.2) !important; }
.versus-row { background: rgba(24,14,10,.6) !important; border-color: rgba(232,167,63,.12) !important; }
.versus-thead { background: var(--gold-gradient) !important; }
.versus-row div:nth-child(2) { color: var(--gold) !important; }

/* ── INGREDIENT CERT CARD ── */
.ing-cert-card {
  border-color: rgba(232,167,63,.4) !important;
  background: rgba(232,167,63,.06) !important;
}

/* ── SECTIONS ── */
.trust-strip,
.story-section,
.ingredients-section,
.reviews-section,
.buy-section {
  background: rgba(16,11,8,1) !important;
}
.benefits-section,
.howto-section,
.faq-section,
.versus-section { background: var(--bg) !important; }

/* ── MARQUEE ── */
.marquee-section {
  background: rgba(20,13,8,.5) !important;
  border-color: rgba(232,167,63,.12) !important;
}

/* ── STICKY BAR ── */
.mr-sticky {
  background: rgba(16,11,8,.97) !important;
  border-color: rgba(232,167,63,.25) !important;
}

/* ── MOBILE FIXES — match Lovable exactly ── */
@media (max-width: 640px) {

  /* Hero h1 — same size as Lovable mobile */
  .lv-hero h1 {
    font-size: clamp(2.6rem, 11vw, 3.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }

  /* Full desc visible — no truncation */
  .lv-hero-desc {
    font-size: 1rem !important;
    line-height: 1.72 !important;
    color: rgba(245,240,235,.72) !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Stars row compact */
  .lv-hero-stars {
    font-size: .82rem !important;
    margin-bottom: 20px !important;
  }

  /* CTA full width pill — Lovable style */
  .btn-lv-gold {
    width: 100% !important;
    padding: 18px 20px !important;
    font-size: .92rem !important;
    border-radius: 100px !important;
    justify-content: center !important;
  }

  /* Outline button full width */
  .btn-lv-outline {
    width: 100% !important;
    padding: 15px 16px !important;
    font-size: .82rem !important;
    flex-wrap: wrap !important;
  }
  .btn-lv-outline .unlock-badge {
    font-size: .62rem !important;
  }

  /* Hero padding — match Lovable tight padding */
  .lv-hero-left {
    padding: 28px 20px 20px !important;
  }

  /* Badge smaller on mobile */
  .lv-hero-badge {
    font-size: .62rem !important;
    padding: 5px 12px !important;
    margin-bottom: 14px !important;
  }

  /* WhatsApp btn position — not overlapping text */
  .wa-float {
    bottom: 88px !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Nav compact */
  .mr-nav {
    padding: 0 16px !important;
    height: 54px !important;
  }
  .mr-nav-logo { height: 28px !important; }
  .mr-nav-cta {
    padding: 8px 16px !important;
    font-size: .75rem !important;
  }
}