/* ─────────────────────────────────────────────
   REVIEW PAGE ADDON STYLES
   Drop this into public/styles/ alongside your theme files.
   Works with ALL 10 themes via CSS variables.
   No theme-specific selectors needed — uses var(--*) throughout.
───────────────────────────────────────────── */

/* ── REVIEW HERO overrides ── */
.review-hero {
  padding-bottom: 0 !important;
}

.rh-title {
  font-family: var(--font-display) !important;
  color: var(--text-strong) !important;
}

/* Score block picks up theme bg/border */
.rh-score-block {
  background: var(--bg-2);
  border-color: var(--border);
}

.rh-score-num,
.fv-score-num {
  color: var(--text-strong);
  font-family: var(--font-display);
}

.rh-badge {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.rh-price-range {
  color: var(--accent);
  font-family: var(--font-display);
}

/* ── RATING BREAKDOWN ── */
.rb-wrap {
  background: var(--bg-2);
  border-color: var(--border);
}

.rb-overall-num {
  color: var(--accent);
  font-family: var(--font-display);
}

.rb-overall-label { color: var(--text-muted); }

.rb-overall {
  border-color: var(--border);
}

.rb-label { color: var(--text-muted); }

.rb-track { background: var(--bg-3); }

.rb-fill { background: var(--accent); }

.rb-score {
  color: var(--text-strong);
  font-family: var(--font-display);
}

/* ── TESTING SCENARIOS ── */
.ts-card {
  background: var(--bg-2);
  border-color: var(--border);
}

.ts-pass    { border-top-color: var(--green) !important; }
.ts-partial { border-top-color: var(--gold, var(--accent)) !important; }
.ts-fail    { border-top-color: var(--red) !important; }

.ts-icon-wrap { background: var(--bg-3); }

.ts-pass    .ts-result-badge { background: rgba(61,170,106,0.12);  color: var(--green); }
.ts-partial .ts-result-badge { background: rgba(201,168,76,0.12);  color: var(--gold, var(--accent)); }
.ts-fail    .ts-result-badge { background: rgba(192,57,43,0.12);   color: var(--red); }

.ts-title {
  color: var(--text-strong);
  font-family: var(--font-display);
}

.ts-subtitle { color: var(--text-muted); }
.ts-body     { color: var(--text-muted); }

/* ── WHO IS IT FOR ── */
.wif-card {
  background: var(--bg-2);
  border-color: var(--border);
}

.wif-yes { border-top-color: var(--green) !important; }
.wif-no  { border-top-color: var(--red)   !important; }

.wif-yes .wif-label { color: var(--green); }
.wif-no  .wif-label { color: var(--red); }

.wif-card li {
  color: var(--text-muted);
  border-color: var(--border);
}

.wif-yes li::before { color: var(--green); }
.wif-no  li::before { color: var(--red); }

/* ── FINAL VERDICT ── */
.fv-wrap {
  background: var(--bg-2);
  border-color: var(--border);
}

.fv-score-strip { border-bottom-color: var(--border); }
.fv-score-left  { border-color: var(--border); }

.fv-score-num { color: var(--accent); }
.fv-score-label { color: var(--text-muted); }

.fv-verdict-label { color: var(--accent); }
.fv-verdict-text  { color: var(--text-muted); }

.fv-guidance { background: var(--border); }
.fv-buy, .fv-skip { background: var(--bg-2); }

.fv-buy  .fv-guide-label { color: var(--green); }
.fv-skip .fv-guide-label { color: var(--red); }

.fv-buy-icon  { background: rgba(61,170,106,0.15); color: var(--green); }
.fv-skip-icon { background: rgba(192,57,43,0.15);  color: var(--red); }

.fv-buy  p { color: var(--text-muted); }
.fv-skip p { color: var(--text-muted); }

.fv-cta-row { border-top: 1px solid var(--border); }

/* ── ALTERNATIVES BAR ── */
.alt-bar {
  background: var(--bg-2);
  border-color: var(--border);
}

.alt-label { color: var(--text-muted); }

.alt-item::before { color: var(--accent); }

.alt-name { color: var(--text-strong); }
a.alt-name:hover { color: var(--accent); }
.alt-note { color: var(--text-muted); }

/* ── QUICK SPECS layout ── */
.qs-row { border-color: var(--border); }
.qs-key { color: var(--text-muted); }
.qs-val { color: var(--text-strong); }

/* ── SECTION INTRO TEXT ── */
.section-intro { color: var(--text-muted); }

/* ── Theme-specific font overrides for new headings ── */
[data-theme="sport"]   .rh-title   { text-transform: uppercase; letter-spacing: 1px; }
[data-theme="outdoor"] .rh-title   { text-transform: uppercase; letter-spacing: 1px; }
[data-theme="luxury"]  .rh-title   { letter-spacing: 3px; text-transform: uppercase; }
[data-theme="minimal"] .rh-title   { letter-spacing: -1px; }
[data-theme="tech"]    .ts-title   { font-size: 15px !important; }
[data-theme="luxury"]  .ts-title   { letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px !important; }
[data-theme="beauty"]  .fv-verdict-text { font-family: var(--font-display); }
[data-theme="luxury"]  .fv-verdict-text { font-family: var(--font-display); }
[data-theme="minimal"] .fv-verdict-text { font-family: var(--font-display); font-size: 18px; }

/* sport theme: yellow score on black bg needs special treatment */
[data-theme="sport"] .rh-score-num { color: var(--accent); }
[data-theme="sport"] .fv-score-num { color: var(--accent); }
[data-theme="sport"] .rb-overall-num { color: var(--accent); }

/* luxury theme: use champagne for large score numbers */
[data-theme="luxury"] .rh-score-num { color: var(--champagne, var(--text-strong)); }

/* office theme: white card backgrounds */
[data-theme="office"] .ts-card    { background: #fff; }
[data-theme="office"] .wif-card   { background: #fff; }
[data-theme="office"] .fv-wrap    { background: #fff; }
[data-theme="office"] .fv-buy,
[data-theme="office"] .fv-skip    { background: #fff; }
[data-theme="office"] .rb-wrap    { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

/* minimal theme: no filled backgrounds, use borders only */
[data-theme="minimal"] .ts-card   { background: var(--bg); border-left: none; border-right: none; border-radius: 0; border-top-width: 2px; }
[data-theme="minimal"] .wif-card  { background: var(--bg); border-radius: 0; border-top-width: 2px; }
[data-theme="minimal"] .rb-wrap   { background: var(--bg); border-radius: 0; }
[data-theme="minimal"] .fv-wrap   { background: var(--bg); border-radius: 0; }
[data-theme="minimal"] .alt-bar   { background: var(--bg); border-radius: 0; }