/* ==========================================================================
   SahiCar.in — Dark/Teal Theme Override
   Drop this file in your images-adjacent root, then add ONE line before
   <link rel="stylesheet" href="sahicar-dark-theme.css">\n</head> on every page, AFTER the existing inline <style> block:
     <link rel="stylesheet" href="sahicar-dark-theme.css">
   Works because every page already shares the same class names and
   :root custom properties — this file only overrides them.
   ========================================================================== */

:root {
  --navy: #0B1D3A;
  --navy-2: #12294D;
  --navy-deep: #060F20;
  --red: #FB7185;          /* warm accent for "cons"/negative markers only */
  --yellow: #17E3B8;       /* single bold accent — teal */
  --yellow-deep: #0FBE99;
  --yellow-pale: rgba(23,227,184,0.12);
  --white: #000000;        /* body/page background is now black */
  --gray-bg: #0D0D0D;      /* card fill */
  --gray-border: #1F1F1F;  /* card border */
  --text: #FFFFFF;
  --text-mid: rgba(255,255,255,0.65);
  --text-light: rgba(255,255,255,0.5);
}

body { background: #000000 !important; color: #FFFFFF !important; }

/* SAFETY NET: --navy is intentionally left dark (used for real backgrounds like
   nav/footer), which means any plain text using color:var(--navy) silently stays
   dark-on-dark once the page background goes black. This catches every heading
   and bold-text instance across all pages, regardless of which wrapper class
   or template variant it's in — far more reliable than chasing each class name. */
h1, h2, h3, h4, h5, h6 { color: #FFFFFF !important; }
p strong, p b, li strong, li b, .callout strong, .callout b { color: #FFFFFF !important; }
.car-examples-title, .related-links h2, .faq-section h2 { color: #FFFFFF !important; }
.price-tag { color: #17E3B8 !important; }
.callout { background: var(--gray-bg) !important; border-left-color: #17E3B8 !important; }
.callout p { color: rgba(255,255,255,0.75) !important; }

/* NAV */
nav { background: var(--navy) !important; border-bottom: 1px solid rgba(23,227,184,0.25) !important; }
.logo, .logo em { color: #FFFFFF !important; }
.logo em { color: #17E3B8 !important; }
.logo img { border-color: #17E3B8 !important; }
.nav-back { background: #17E3B8 !important; color: #062A24 !important; }

/* Optional search bar — paste this snippet into <nav>, between .logo and .nav-back,
   on any page you want the search box added to:
<div style="display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:8px;padding:0.5rem 0.75rem;width:160px;">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="rgba(255,255,255,0.5)" stroke-width="2"/><line x1="21" y1="21" x2="16.65" y2="16.65" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/></svg>
  <input type="text" placeholder="Search cars..." style="background:none;border:none;outline:none;color:white;font-family:'Poppins',sans-serif;font-size:12px;width:100%;">
</div>
*/

/* HERO BANDS (car-hero, vs-hero, page-hero, hero) */
.car-hero, .vs-hero, .page-hero, .hero {
  background: radial-gradient(ellipse 120% 100% at 20% 0%, var(--navy-2) 0%, var(--navy-deep) 55%, var(--navy-deep) 100%) !important;
  border-bottom: 1px solid rgba(23,227,184,0.2) !important;
}
.car-hero-img-wrap, .vs-car-box, .hero-card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.car-hero-img-wrap img, .vs-car-box img { background: var(--gray-bg) !important; }
.vs-badge { background: #17E3B8 !important; color: #062A24 !important; }
.quiz-cta-btn, .hero .btn-red { background: #17E3B8 !important; color: #062A24 !important; }

/* SECTIONS / CARDS */
.section h2 { color: #FFFFFF !important; border-bottom-color: #17E3B8 !important; }
.section p, .section ul li { color: rgba(255,255,255,0.65) !important; }
.spec-box, .contact-card, .related-card, .faq-item, .variant-row, .step-card, .feat-card, .testi-card, .brand-chip {
  background: var(--gray-bg) !important;
  border-color: var(--gray-border) !important;
}
.spec-label, .hc-lbl { color: rgba(255,255,255,0.5) !important; }
.spec-val, .hc-val, .contact-card h3, .related-card span { color: #FFFFFF !important; }
.related-card:hover { border-color: #17E3B8 !important; background: rgba(23,227,184,0.08) !important; }

/* CLICKABLE CAR IMAGES in example lists and recommendation cards */
.car-examples-list { display:flex; flex-wrap:wrap; gap:0.6rem; }
.car-examples-list { display:flex; flex-wrap:wrap; gap:0.85rem; }
.cx-chip {
  display:inline-flex; flex-direction:column; align-items:center;
  width:140px; background:#0D0D0D; border:1px solid #1F1F1F; border-radius:14px;
  padding:0.85rem 0.6rem 0.7rem; text-decoration:none; transition:all 0.2s;
}
.cx-chip:hover { border-color:#17E3B8; background:rgba(23,227,184,0.06); transform:translateY(-2px); }
.cx-chip img { width:100%; height:80px; object-fit:contain; margin-bottom:0.55rem; }
.cx-chip span { font-size:12.5px; font-weight:700; color:rgba(255,255,255,0.82); text-align:center; line-height:1.3; white-space:normal; }
.cx-text { font-size:13px; color:rgba(255,255,255,0.5); align-self:center; }

.info-car-img-link {
  flex-shrink:0; display:block; width:120px; height:88px;
  background:#141414; border:1px solid #1F1F1F; border-radius:12px;
  padding:0.5rem; overflow:hidden;
}
.info-car-img { width:100%; height:100%; object-fit:contain; display:block; }
.info-car-img-link:hover { border-color:#17E3B8; }

/* PROS / CONS */
.pros-box { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.35) !important; }
.cons-box { background: rgba(244,63,94,0.08) !important; border-color: rgba(244,63,94,0.3) !important; }
.pros { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.35) !important; }
.cons { background: rgba(244,63,94,0.08) !important; border-color: rgba(244,63,94,0.3) !important; }
.pros-box .pc-title { color: #4ADE80 !important; }
.cons-box .pc-title { color: #FB7185 !important; }
.pc-list li, .variant-feat-list li { color: rgba(255,255,255,0.75) !important; }
.cons .pc-list li::before { color: #FB7185 !important; }

/* BEST FOR / HIGHLIGHT */
.best-for-banner, .highlight-box {
  background: linear-gradient(135deg, rgba(23,227,184,0.14), rgba(23,227,184,0.03)) !important;
  border: 1px solid rgba(23,227,184,0.35) !important;
}
.best-for-label { color: #17E3B8 !important; }
.best-for-text, .highlight-box p { color: rgba(255,255,255,0.8) !important; }

/* VARIANTS */
.variant-head { background: var(--gray-bg) !important; }
.variant-head:hover { background: #141414 !important; }
.variant-name, .variant-price { color: #FFFFFF !important; }
.variant-price { color: #17E3B8 !important; }
.variant-specs span { background: #1A1A1A !important; color: rgba(255,255,255,0.6) !important; }
.variant-toggle { color: #17E3B8 !important; }
.variant-detail { background: #080808 !important; border-top-color: var(--gray-border) !important; }
.variant-feat-box.included { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.3) !important; }
.variant-feat-box.excluded { background: rgba(244,63,94,0.08) !important; border-color: rgba(244,63,94,0.25) !important; }

/* TABLES */
.table-wrap { border-color: var(--gray-border) !important; }
table th { background: var(--navy) !important; color: #FFFFFF !important; }
table td { color: rgba(255,255,255,0.7) !important; border-bottom-color: var(--gray-border) !important; }
table td:first-child { color: #FFFFFF !important; }
tr:nth-child(even) td { background: #0A0A0A !important; }

/* VERDICT BOXES */
.verdict-box { background: var(--gray-bg) !important; border-color: var(--gray-border) !important; }
.verdict-box h3 { color: #FFFFFF !important; }
.verdict-box p { color: rgba(255,255,255,0.65) !important; }
.verdict-box a { background: #17E3B8 !important; color: #062A24 !important; }

/* FAQ */
.faq-q { background: var(--gray-bg) !important; color: #FFFFFF !important; }
.faq-q:hover { background: #141414 !important; }
.faq-q span { color: #17E3B8 !important; }
.faq-a { color: rgba(255,255,255,0.6) !important; }

/* CTA BANDS */
.blog-cta, .cta-box {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  border: 1px solid rgba(23,227,184,0.3) !important;
}
.blog-cta a, .cta-box a { background: #17E3B8 !important; color: #062A24 !important; }

/* FOOTER */
footer { background: var(--navy-deep) !important; border-top-color: rgba(23,227,184,0.2) !important; }
footer a { color: #17E3B8 !important; }

/* BRAND CHIPS */
.brand-chip:hover { border-color: #17E3B8 !important; background: rgba(23,227,184,0.08) !important; }

/* BRAND PAGE (brand.html) */
.brand-count { background: rgba(23,227,184,0.12) !important; color: #17E3B8 !important; }
.brand-overview { background: #000000 !important; }
.brand-pros { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.35) !important; }
.brand-cons { background: rgba(244,63,94,0.08) !important; border-color: rgba(244,63,94,0.3) !important; }
.brand-pros .pc-title { color: #4ADE80 !important; }
.brand-cons .pc-title { color: #FB7185 !important; }
.filters-bar { background: #0D0D0D !important; border-bottom-color: var(--gray-border) !important; }
.filter-btn { background: #1A1A1A !important; border-color: var(--gray-border) !important; color: rgba(255,255,255,0.6) !important; }
.filter-btn:hover, .filter-btn.active { background: #17E3B8 !important; border-color: #17E3B8 !important; color: #062A24 !important; }
.car-card { background: var(--gray-bg) !important; border-color: var(--gray-border) !important; }
.car-card:hover { border-color: #17E3B8 !important; }
.car-img-wrap { background: #141414 !important; border-bottom-color: var(--gray-border) !important; }
.car-img-placeholder { color: #333333 !important; }
.car-name, .car-spec-val { color: #FFFFFF !important; }
.car-price { color: #17E3B8 !important; }
.car-spec { background: #141414 !important; }
.car-spec-label { color: rgba(255,255,255,0.45) !important; }
.car-tag { background: rgba(23,227,184,0.1) !important; border-color: #17E3B8 !important; color: #17E3B8 !important; }
.safety-4 { color: #5EEAD4 !important; }
.safety-nr { color: rgba(255,255,255,0.4) !important; }
.car-quiz-btn { background: #17E3B8 !important; color: #062A24 !important; }
.car-quiz-btn:hover { background: #0FBE99 !important; }
.car-detail-btn { background: #17E3B8 !important; color: #062A24 !important; }
.car-card-link:hover .car-detail-btn { background: #0FBE99 !important; color: #062A24 !important; }
.no-results, .loading { color: rgba(255,255,255,0.5) !important; }

/* TOC / GUIDE PAGES (engine-guide, fuel-guide, gearbox-guide, etc.) */
.toc { background: rgba(23,227,184,0.1) !important; border-color: rgba(23,227,184,0.35) !important; }
.toc-title { color: #17E3B8 !important; }
.toc a { color: #FFFFFF !important; }
.toc a:hover { color: #17E3B8 !important; }
.blog-intro { background: var(--gray-bg) !important; border-left-color: #17E3B8 !important; color: rgba(255,255,255,0.75) !important; }

.engine-section-header, .info-card-header { background: var(--navy) !important; }
.engine-number, .info-number { background: #17E3B8 !important; color: #062A24 !important; }
.gear-number, .fuel-number, .tyre-number, .battery-number { background: #17E3B8 !important; color: #062A24 !important; }
.engine-section-body, .info-body { background: var(--gray-bg) !important; border-color: var(--gray-border) !important; }
.engine-section-title, .info-title { color: #FFFFFF !important; }
.engine-section-subtitle, .info-subtitle { color: rgba(255,255,255,0.55) !important; }
.fact-box { background: #141414 !important; }
.fact-label { color: rgba(255,255,255,0.5) !important; }
.fact-val, .engine-body-text { color: #FFFFFF !important; }
.engine-body-text { color: rgba(255,255,255,0.65) !important; }
.engine-section-img { filter: brightness(0.85); }

.comparison-section h2 { color: #FFFFFF !important; }
.badge.b-best { background: rgba(34,197,94,0.14) !important; color: #4ADE80 !important; }
.badge.b-good { background: rgba(23,227,184,0.14) !important; color: #17E3B8 !important; }
.badge.b-avg { background: #1A1A1A !important; color: rgba(255,255,255,0.55) !important; }

/* QUIZ RESULTS PAGE */
.res-head h2 { color: #FFFFFF !important; }
.res-head p { color: rgba(255,255,255,0.55) !important; }
.res-notice { background: rgba(23,227,184,0.1) !important; border-color: rgba(23,227,184,0.35) !important; color: #FFFFFF !important; }
.res-card { background: var(--gray-bg) !important; border-color: var(--gray-border) !important; }
.res-card-link:hover { box-shadow: 0 8px 32px rgba(23,227,184,0.15) !important; }
.rank-1, .rank-2 { background: rgba(23,227,184,0.14) !important; color: #17E3B8 !important; border-color: #17E3B8 !important; }
.rank-3, .rank-4 { background: #1A1A1A !important; color: rgba(255,255,255,0.55) !important; }
.rank-suggested { background: rgba(244,63,94,0.1) !important; color: #FB7185 !important; border-color: rgba(244,63,94,0.3) !important; }
.res-section-divider { border-top-color: var(--gray-border) !important; }
.res-section-divider span { background: #000000 !important; color: rgba(255,255,255,0.55) !important; }
.res-car-photo-wrap { background: #141414 !important; border-color: var(--gray-border) !important; }
.res-name { color: #FFFFFF !important; }
.res-price { color: #17E3B8 !important; }
.res-specs { background: #141414 !important; }
.res-spec { color: rgba(255,255,255,0.6) !important; }
.res-spec-val { color: #FFFFFF !important; }
.res-why-title { color: #FFFFFF !important; }
.res-reason { color: rgba(255,255,255,0.6) !important; }
.res-tag { background: rgba(23,227,184,0.12) !important; border-color: #17E3B8 !important; color: #17E3B8 !important; }
.res-view-btn { background: #17E3B8 !important; color: #062A24 !important; }
.res-card-link:hover .res-view-btn { background: #0FBE99 !important; color: #062A24 !important; }
.res-restart { border-color: var(--gray-border) !important; color: rgba(255,255,255,0.55) !important; }
.res-restart:hover { border-color: #FB7185 !important; color: #FB7185 !important; }
.empty-state h2 { color: #FFFFFF !important; }
.empty-state p { color: rgba(255,255,255,0.6) !important; }
.empty-state a { background: #17E3B8 !important; color: #062A24 !important; }