/* ══════════════════════════════════════════════════════════════
   PropFirmChief — Review Page v5
   Dark/purple system matching the new homepage identity.
   ══════════════════════════════════════════════════════════════ */

html body .pfh-review-hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #1B0F3A 0%, var(--bg) 70%) !important;
  border-bottom: 1px solid var(--border) !important;
}
html body .pfh-review-logo {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
html body .pfh-review-info h1 {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
html body .pfh-score-number {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--green) !important;
}
html body .pfh-score-label { color: var(--text-mute) !important; }
html body .pfh-review-stars-lg { color: #FBBF24 !important; }

html body .pfh-review-quickfacts {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
html body .pfh-review-quickfacts-title { color: var(--text-mute) !important; }
html body .pfh-review-quickfact-value { color: var(--text) !important; }
html body .pfh-review-quickfacts-cta {
  background: linear-gradient(90deg, var(--purple), var(--magenta)) !important;
  border-radius: 100px !important;
}

html body .pfh-verdict-grid {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
html body .pfh-verdict-item strong.good { color: var(--green) !important; }
html body .pfh-verdict-item strong.bad { color: var(--red) !important; }

html body .pfh-tabs { border-bottom-color: var(--border) !important; }
html body .pfh-tab-btn { color: var(--text-dim) !important; font-weight: 600 !important; }
html body .pfh-tab-btn.active, html body .pfh-tab-btn[aria-selected="true"] {
  color: var(--magenta) !important; border-bottom-color: var(--magenta) !important;
}

html body .pfh-review-layout h2 {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
html body .pfh-review-layout p, html body .pfh-review-layout li { color: var(--text-dim) !important; }

html body .pfh-review-cta-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
html body .pfh-review-cta-top { background: var(--surface-2) !important; }
html body .pfh-review-cta-score {
  font-family: var(--font-head) !important;
  color: var(--green) !important;
}

html body .pfh-btn-brass, html body .pfh-btn-primary {
  background: linear-gradient(90deg, var(--purple), var(--magenta)) !important;
  border: none !important;
  border-radius: 100px !important;
}
html body .pfh-btn-outline {
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 100px !important;
}
html body .pfh-review-promo-pill {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
}
html body .pfh-copy-btn {
  background: linear-gradient(90deg, rgba(124,58,237,.16), rgba(217,70,239,.16)) !important;
  border: 1.5px dashed var(--purple, #7C3AED) !important;
  color: var(--purple, #7C3AED) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}
html body .pfh-copy-btn:hover {
  background: linear-gradient(90deg, var(--purple, #7C3AED), var(--magenta, #D946EF)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html body .pfh-copy-btn.is-revealed {
  background: linear-gradient(90deg, var(--purple, #7C3AED), var(--magenta, #D946EF)) !important;
  color: #fff !important;
  border-style: solid !important;
  border-color: transparent !important;
}
html body .pfh-badge-brass, html body .pfh-badge-jade {
  background: var(--green-dim) !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  border-radius: 100px !important;
}

/* Page body background must also flip dark for review pages */
html body { background: var(--bg) !important; }
html body .pfh-section { background: var(--bg) !important; }
html body .pfh-card, html body .pfh-review-body { background: var(--surface) !important; border-color: var(--border) !important; }

/* ── Mobile safety net ──
   The dark-theme color overrides above rely entirely on the base
   theme's existing responsive breakpoints (pfh-theme.css), which
   were originally tuned for the old light-theme layout. These rules
   don't change layout — only re-affirm dark colors survive at
   narrow widths, in case any base breakpoint reintroduces a light
   value via a more specific mobile-only selector. */
@media (max-width: 700px) {
  html body .pfh-review-hero,
  html body .pfh-verdict-grid,
  html body .pfh-review-cta-card,
  html body .pfh-review-quickfacts {
    background: var(--surface) !important;
  }
  html body .pfh-review-hero { background: var(--bg) !important; }
  html body .pfh-review-info h1 { font-size: 24px !important; }
  html body .pfh-score-number { font-size: 32px !important; }
}