/*
Theme Name: ShieldReviews
Theme URI: https://shieldreviews.com
Author: ShieldReviews Team
Author URI: https://shieldreviews.com
Description: A high-performance WordPress theme for product and service reviews with ratings, comparisons, SEO schema markup, ad management, and full theme customization.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shieldreviews
Tags: reviews, ratings, blog, custom-colors, custom-logo, editor-style, featured-images, theme-options

ShieldReviews WordPress Theme - Built for Review Websites
*/

/* ══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Controlled by Customizer)
   ══════════════════════════════════════════════════════════ */
:root {
  --sr-primary: #2563eb;
  --sr-accent: #7c3aed;
  --sr-success: #059669;
  --sr-warning: #d97706;
  --sr-danger: #dc2626;
  --sr-header-bg: #0f172a;
  --sr-header-text: #ffffff;
  --sr-hero-bg: #0f172a;
  --sr-hero-text: #ffffff;
  --sr-body-bg: #ffffff;
  --sr-card-bg: #ffffff;
  --sr-text-primary: #0f172a;
  --sr-text-secondary: #64748b;
  --sr-border: #e5e7eb;
  --sr-footer-bg: #0f172a;
  --sr-footer-text: #94a3b8;
  --sr-radius: 12px;
  --sr-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dark mode */
body.dark-mode {
  --sr-body-bg: #0b0f1a;
  --sr-card-bg: #141925;
  --sr-text-primary: #e8eaf0;
  --sr-text-secondary: #8b92a5;
  --sr-border: #1e2536;
  --sr-header-bg: #070a12;
  --sr-hero-bg: #070a12;
  --sr-footer-bg: #070a12;
}

/* ══════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sr-font);
  background: var(--sr-body-bg);
  color: var(--sr-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sr-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sr-accent); }

img { max-width: 100%; height: auto; display: block; }

/* Skip to content */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sr-primary); color: #fff; padding: 10px 20px;
  font-weight: 700; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */
.sr-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.sr-container--narrow { max-width: 780px; }
.sr-container--wide { max-width: 1200px; }

.sr-grid { display: grid; gap: 20px; }
.sr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sr-grid--sidebar { grid-template-columns: 1fr 280px; }

.sr-flex { display: flex; align-items: center; gap: 12px; }
.sr-flex--wrap { flex-wrap: wrap; }
.sr-flex--between { justify-content: space-between; }
.sr-flex--center { justify-content: center; }
.sr-flex--col { flex-direction: column; align-items: stretch; }

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sr-font);
  color: var(--sr-text-primary);
  font-weight: 800;
  line-height: 1.2;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; margin-bottom: 16px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin-bottom: 16px; color: var(--sr-text-secondary); line-height: 1.75; }

.sr-text-sm { font-size: 13px; }
.sr-text-xs { font-size: 11px; }
.sr-text-muted { color: var(--sr-text-secondary); }
.sr-text-upper { text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.sr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: calc(var(--sr-radius) - 2px);
  font-family: var(--sr-font); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: all .2s;
  text-decoration: none; line-height: 1;
}
.sr-btn--primary {
  background: var(--sr-primary); color: #fff;
  box-shadow: 0 3px 12px rgba(37,99,235,.25);
}
.sr-btn--primary:hover { background: #1d4ed8; color: #fff; transform: translateY(-1px); }
.sr-btn--outline {
  background: transparent; color: var(--sr-primary);
  border: 1.5px solid var(--sr-primary);
}
.sr-btn--outline:hover { background: var(--sr-primary); color: #fff; }
.sr-btn--sm { padding: 8px 18px; font-size: 13px; }
.sr-btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.sr-card {
  background: var(--sr-card-bg);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: 20px;
  transition: box-shadow .2s;
}
.sr-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.sr-card--featured {
  border: 2px solid rgba(37,99,235,.15);
  box-shadow: 0 4px 24px rgba(37,99,235,.06);
}

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.sr-header { background: var(--sr-header-bg); position: sticky; top: 0; z-index: 100; }

.sr-header__affiliate {
  padding: 6px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(255,255,255,.7);
}
.sr-header__affiliate a { color: var(--sr-primary); font-weight: 600; }

.sr-header__main {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 58px;
}

.sr-header__logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.sr-header__logo-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--sr-primary), var(--sr-accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 17px;
}
.sr-header__logo-text {
  font-weight: 800; font-size: 19px; color: var(--sr-header-text);
  letter-spacing: -0.3px;
}

.sr-header__nav { display: flex; gap: 4px; align-items: center; }
.sr-header__nav-item {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8);
  padding: 8px 14px; border-radius: 8px; transition: all .2s;
  position: relative; cursor: pointer; text-decoration: none;
}
.sr-header__nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }

.sr-header__search {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; transition: background .2s;
  font-size: 12px; color: rgba(255,255,255,.55);
}
.sr-header__search:hover { background: rgba(255,255,255,.15); }

.sr-header__darkmode {
  background: rgba(255,255,255,.1); border: none; border-radius: 6px;
  padding: 4px 12px; cursor: pointer; font-size: 11px;
  font-weight: 600; color: #fff; font-family: var(--sr-font);
}

/* Mega Menu */
.sr-megamenu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--sr-card-bg); border-bottom: 1px solid var(--sr-border);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
  padding: 24px 32px; display: none; z-index: 50;
}
.sr-header__nav-item:hover .sr-megamenu { display: block; }
.sr-megamenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 960px; margin: 0 auto; }
.sr-megamenu__title { font-size: 10px; font-weight: 700; color: var(--sr-text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.sr-megamenu__link { display: block; font-size: 13px; color: var(--sr-text-primary); padding: 4px 0; }
.sr-megamenu__link:hover { color: var(--sr-primary); }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.sr-hero {
  background: var(--sr-hero-bg); padding: 60px 24px 52px;
  text-align: center; position: relative; overflow: hidden;
}
.sr-hero::before {
  content: ''; position: absolute; inset: 0; opacity: .07;
  background: radial-gradient(ellipse at 30% 30%, var(--sr-primary), transparent 55%),
              radial-gradient(ellipse at 70% 70%, var(--sr-accent), transparent 55%);
}
.sr-hero__content { position: relative; max-width: 620px; margin: 0 auto; }
.sr-hero h1 { font-size: 40px; font-weight: 900; color: var(--sr-hero-text); line-height: 1.12; margin-bottom: 16px; }
.sr-hero h1 span { color: var(--sr-primary); }
.sr-hero p { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 28px; }

.sr-hero__stats { display: flex; justify-content: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.sr-hero__stat-num { font-size: 22px; font-weight: 900; color: var(--sr-hero-text); }
.sr-hero__stat-label { font-size: 11px; color: rgba(255,255,255,.4); }

/* ══════════════════════════════════════════════════════════
   SCORE BADGE
   ══════════════════════════════════════════════════════════ */
.sr-score {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
}
.sr-score__value {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sr-radius); color: #fff;
  font-weight: 800; font-family: var(--sr-font);
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
.sr-score--lg .sr-score__value { width: 56px; height: 56px; font-size: 22px; }
.sr-score--md .sr-score__value { width: 44px; height: 44px; font-size: 17px; }
.sr-score--sm .sr-score__value { width: 34px; height: 34px; font-size: 13px; }

.sr-score__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

.sr-score--excellent .sr-score__value { background: var(--sr-success); }
.sr-score--excellent .sr-score__label { color: var(--sr-success); }
.sr-score--good .sr-score__value { background: var(--sr-primary); }
.sr-score--good .sr-score__label { color: var(--sr-primary); }
.sr-score--average .sr-score__value { background: var(--sr-warning); }
.sr-score--average .sr-score__label { color: var(--sr-warning); }
.sr-score--poor .sr-score__value { background: var(--sr-danger); }
.sr-score--poor .sr-score__label { color: var(--sr-danger); }

/* ══════════════════════════════════════════════════════════
   STAR RATINGS
   ══════════════════════════════════════════════════════════ */
.sr-stars { display: inline-flex; gap: 2px; }
.sr-stars svg { width: 14px; height: 14px; }
.sr-stars--interactive svg { cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.sr-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 6px; letter-spacing: .3px;
}
.sr-badge--primary { background: rgba(37,99,235,.08); color: var(--sr-primary); }
.sr-badge--success { background: rgba(5,150,105,.08); color: var(--sr-success); }
.sr-badge--warning { background: rgba(217,119,6,.08); color: var(--sr-warning); }
.sr-badge--danger { background: rgba(220,38,38,.08); color: var(--sr-danger); }
.sr-badge--accent { background: rgba(124,58,237,.08); color: var(--sr-accent); }

/* ══════════════════════════════════════════════════════════
   E-E-A-T BADGES
   ══════════════════════════════════════════════════════════ */
.sr-eeat { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sr-eeat__badge {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
}
.sr-eeat__badge--tested { background: rgba(5,150,105,.06); color: var(--sr-success); border: 1px solid rgba(5,150,105,.15); }
.sr-eeat__badge--checked { background: rgba(37,99,235,.06); color: var(--sr-primary); border: 1px solid rgba(37,99,235,.15); }
.sr-eeat__badge--independent { background: rgba(124,58,237,.06); color: var(--sr-accent); border: 1px solid rgba(124,58,237,.15); }
.sr-eeat__badge--updated { background: rgba(217,119,6,.06); color: var(--sr-warning); border: 1px solid rgba(217,119,6,.15); }

/* ══════════════════════════════════════════════════════════
   REVIEW CARDS (Archive listing)
   ══════════════════════════════════════════════════════════ */
.sr-review-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: var(--sr-card-bg);
  border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
  cursor: pointer; transition: all .2s;
}
.sr-review-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.sr-review-card__title { font-size: 15px; font-weight: 700; margin: 0; }
.sr-review-card__meta { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--sr-text-secondary); }

/* ══════════════════════════════════════════════════════════
   SINGLE REVIEW
   ══════════════════════════════════════════════════════════ */
.sr-review-layout { display: grid; grid-template-columns: 1fr 240px; gap: 24px; }

/* Key Takeaways */
.sr-takeaways {
  background: rgba(37,99,235,.04); border: 2px solid rgba(37,99,235,.15);
  border-radius: var(--sr-radius); padding: 18px 22px; margin-bottom: 20px;
}
.sr-takeaways__title { font-size: 12px; font-weight: 800; color: var(--sr-primary); text-transform: uppercase; margin-bottom: 8px; }
.sr-takeaways ol { padding-left: 18px; font-size: 13px; line-height: 2; }

/* Pros & Cons */
.sr-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.sr-pros {
  background: rgba(5,150,105,.05); border: 1px solid rgba(5,150,105,.15);
  border-radius: var(--sr-radius); padding: 16px;
}
.sr-cons {
  background: rgba(220,38,38,.05); border: 1px solid rgba(220,38,38,.15);
  border-radius: var(--sr-radius); padding: 16px;
}
.sr-pros__title { font-size: 13px; font-weight: 700; color: var(--sr-success); margin-bottom: 8px; }
.sr-cons__title { font-size: 13px; font-weight: 700; color: var(--sr-danger); margin-bottom: 8px; }
.sr-pros__item, .sr-cons__item { font-size: 12px; padding: 3px 0; color: var(--sr-text-primary); }

/* Score sidebar */
.sr-sidebar-score { position: sticky; top: 80px; }
.sr-sidebar-score__card { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 16px; margin-bottom: 14px; }
.sr-sub-score { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sr-sub-score__label { font-size: 10px; color: var(--sr-text-secondary); width: 60px; }
.sr-sub-score__bar { flex: 1; height: 5px; background: var(--sr-border); border-radius: 3px; overflow: hidden; }
.sr-sub-score__fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.sr-sub-score__fill--high { background: var(--sr-success); }
.sr-sub-score__fill--mid { background: var(--sr-primary); }
.sr-sub-score__fill--low { background: var(--sr-warning); }
.sr-sub-score__num { font-size: 10px; font-weight: 700; width: 20px; text-align: right; }

/* Speed chart */
.sr-speed-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sr-speed-bar__label { font-size: 11px; color: var(--sr-text-secondary); width: 80px; }
.sr-speed-bar__track { flex: 1; height: 18px; background: #f1f5f9; border-radius: 4px; overflow: hidden; position: relative; }
.sr-speed-bar__fill { height: 100%; border-radius: 4px; }
.sr-speed-bar__value { position: absolute; right: 6px; top: 1px; font-size: 10px; font-weight: 700; }

/* Pricing table */
.sr-price-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sr-price-table th { padding: 8px 10px; text-align: left; font-weight: 700; font-size: 11px; color: var(--sr-text-secondary); background: #f8fafc; }
.sr-price-table td { padding: 9px 10px; border-bottom: 1px solid var(--sr-border); }

/* Coupon box */
.sr-coupon {
  background: var(--sr-hero-bg); border-radius: calc(var(--sr-radius) + 4px);
  padding: 16px 20px; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.sr-coupon__title { font-size: 15px; font-weight: 800; color: var(--sr-hero-text); }
.sr-coupon__code {
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.3);
  border-radius: 8px; padding: 8px 16px; font-family: monospace;
  font-size: 14px; font-weight: 700; color: var(--sr-hero-text); letter-spacing: 2px;
}
.sr-coupon__copy {
  background: var(--sr-primary); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 12px;
  font-weight: 700; cursor: pointer; font-family: var(--sr-font);
}

/* Video embed placeholder */
.sr-video-placeholder {
  background: #0f172a; border-radius: var(--sr-radius);
  padding: 44px 24px; text-align: center; margin-bottom: 20px;
}
.sr-video-placeholder__play {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(37,99,235,.8); margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Helpful vote */
.sr-helpful { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.sr-helpful__box {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 14px; text-align: center;
}
.sr-helpful__btn {
  border: none; border-radius: 8px; padding: 6px 16px;
  font-family: var(--sr-font); font-size: 12px; font-weight: 700; cursor: pointer;
}
.sr-helpful__btn--yes { background: rgba(5,150,105,.1); color: var(--sr-success); }
.sr-helpful__btn--yes.active { background: var(--sr-success); color: #fff; }
.sr-helpful__btn--no { background: rgba(220,38,38,.1); color: var(--sr-danger); }
.sr-helpful__btn--no.active { background: var(--sr-danger); color: #fff; }

/* TOC sidebar */
.sr-toc { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 14px; }
.sr-toc__title { font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.sr-toc__item {
  font-size: 11px; padding: 3px 0 3px 10px;
  border-left: 2px solid transparent; cursor: pointer;
  color: var(--sr-text-secondary);
}
.sr-toc__item.active { color: var(--sr-primary); border-left-color: var(--sr-primary); }

/* Author box */
.sr-author-box {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 18px;
  display: flex; gap: 14px; align-items: center; margin-bottom: 20px;
}
.sr-author-box__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(37,99,235,.1); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--sr-primary);
  flex-shrink: 0;
}
.sr-author-box__name { font-size: 14px; font-weight: 700; }
.sr-author-box__role { font-size: 12px; color: var(--sr-primary); font-weight: 600; }
.sr-author-box__bio { font-size: 11px; color: var(--sr-text-secondary); }

/* FAQ Accordion */
.sr-faq { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); overflow: hidden; margin-bottom: 20px; }
.sr-faq__item { border-bottom: 1px solid var(--sr-border); }
.sr-faq__item:last-child { border-bottom: none; }
.sr-faq__question {
  padding: 12px 16px; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; font-size: 13px; font-weight: 600;
}
.sr-faq__question:hover { background: rgba(37,99,235,.03); }
.sr-faq__answer { padding: 0 16px 12px; font-size: 12px; color: var(--sr-text-secondary); line-height: 1.65; display: none; }
.sr-faq__item.active .sr-faq__answer { display: block; }
.sr-faq__toggle { font-size: 16px; color: var(--sr-text-secondary); transition: transform .2s; }
.sr-faq__item.active .sr-faq__toggle { transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════════
   COMPARISON TABLE
   ══════════════════════════════════════════════════════════ */
.sr-comparison { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: calc(var(--sr-radius) + 4px); overflow: hidden; }
.sr-comparison__header { background: rgba(37,99,235,.05); padding: 18px 24px; display: flex; justify-content: space-around; align-items: center; }
.sr-comparison__vs { font-size: 20px; font-weight: 900; color: var(--sr-text-secondary); }
.sr-comparison table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr-comparison td { padding: 10px 16px; text-align: center; border-bottom: 1px solid var(--sr-border); }
.sr-comparison td.winner { font-weight: 700; color: var(--sr-success); background: rgba(5,150,105,.05); }

/* ══════════════════════════════════════════════════════════
   STATIC PAGES (Contact, Terms, etc.)
   ══════════════════════════════════════════════════════════ */
.sr-static-header {
  background: linear-gradient(135deg, var(--sr-card-bg), rgba(37,99,235,.04));
  border: 1px solid var(--sr-border); border-radius: calc(var(--sr-radius) + 4px);
  padding: 24px 22px; display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.sr-static-header__icon {
  width: 48px; height: 48px; border-radius: var(--sr-radius);
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.sr-static-header h1 { font-size: 24px; margin: 0; }
.sr-static-header p { margin: 3px 0 0; font-size: 13px; }

.sr-legal-sections { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: calc(var(--sr-radius) + 4px); overflow: hidden; }
.sr-legal-section { padding: 18px 22px; border-bottom: 1px solid var(--sr-border); }
.sr-legal-section:last-child { border-bottom: none; }
.sr-legal-section h3 { font-size: 14px; margin-bottom: 6px; }
.sr-legal-section p { font-size: 13px; margin: 0; line-height: 1.7; }

.sr-affiliate-disclosure {
  background: #fef3c7; border: 1px solid #fde68a;
  border-radius: var(--sr-radius); padding: 12px 16px;
  margin-bottom: 20px; font-size: 12px; color: #92400e;
}

/* Contact form */
.sr-form { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: calc(var(--sr-radius) + 4px); padding: 24px; margin-bottom: 24px; }
.sr-form__label { font-size: 10px; font-weight: 700; color: var(--sr-text-secondary); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; display: block; }
.sr-form__input, .sr-form__textarea {
  width: 100%; background: #f8fafc; border: 1px solid var(--sr-border);
  border-radius: calc(var(--sr-radius) - 4px); padding: 10px 12px;
  font-family: var(--sr-font); font-size: 14px; color: var(--sr-text-primary);
  margin-bottom: 12px;
}
.sr-form__textarea { min-height: 100px; resize: vertical; }
.sr-form__input:focus, .sr-form__textarea:focus { outline: none; border-color: var(--sr-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* Cookie toggles */
.sr-cookie-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--sr-border);
}
.sr-cookie-toggle:last-child { border-bottom: none; }
.sr-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  position: relative; cursor: pointer; border: none;
}
.sr-toggle--on { background: var(--sr-success); }
.sr-toggle--off { background: #d1d5db; }
.sr-toggle__knob {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 3px; transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.sr-toggle--on .sr-toggle__knob { left: 21px; }
.sr-toggle--off .sr-toggle__knob { left: 3px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.sr-footer { background: var(--sr-footer-bg); padding: 48px 24px 0; margin-top: 40px; }
.sr-footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sr-footer__brand { font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 12px; }
.sr-footer__desc { font-size: 12px; color: var(--sr-footer-text); line-height: 1.7; margin-bottom: 16px; }
.sr-footer__heading { font-weight: 700; font-size: 11px; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.sr-footer__link { display: block; font-size: 12px; color: var(--sr-footer-text); padding: 4px 0; text-decoration: none; }
.sr-footer__link:hover { color: #fff; }

.sr-footer__social { display: flex; gap: 8px; margin-bottom: 16px; }
.sr-footer__social-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.08); display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .2s;
}
.sr-footer__social-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.sr-footer__newsletter { background: rgba(255,255,255,.05); border-radius: var(--sr-radius); padding: 14px; border: 1px solid rgba(255,255,255,.08); }
.sr-footer__newsletter-title { font-size: 10px; font-weight: 700; color: var(--sr-footer-text); text-transform: uppercase; margin-bottom: 6px; }
.sr-footer__newsletter-form { display: flex; gap: 4px; }
.sr-footer__newsletter-input {
  flex: 1; background: rgba(255,255,255,.06); border: none;
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
  color: var(--sr-footer-text); font-family: var(--sr-font);
}
.sr-footer__newsletter-btn {
  background: var(--sr-primary); color: #fff; border: none;
  border-radius: 6px; padding: 8px 14px; font-size: 11px;
  font-weight: 700; cursor: pointer; font-family: var(--sr-font);
}

.sr-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; font-size: 11px; color: rgba(148,163,184,.4);
  flex-wrap: wrap; gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   AD ZONES
   ══════════════════════════════════════════════════════════ */
.sr-ad-zone { display: flex; justify-content: center; padding: 12px 0; }
.sr-ad-zone--top { margin-bottom: 0; }
.sr-ad-zone--sidebar { margin-bottom: 14px; }
.sr-ad-zone--sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 170;
  background: var(--sr-card-bg); border-top: 1px solid var(--sr-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════ */
.sr-breadcrumb {
  font-size: 12px; color: var(--sr-text-secondary);
  margin-bottom: 20px; display: flex; gap: 4px; flex-wrap: wrap;
}
.sr-breadcrumb a { color: var(--sr-primary); }
.sr-breadcrumb__sep { margin: 0 4px; color: var(--sr-border); }

/* ══════════════════════════════════════════════════════════
   READING PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
.sr-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 600; background: rgba(0,0,0,.05);
}
.sr-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sr-primary), var(--sr-accent));
  transition: width .1s;
}

/* ══════════════════════════════════════════════════════════
   SOCIAL SHARE FLOAT
   ══════════════════════════════════════════════════════════ */
.sr-share {
  position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 140; display: flex; flex-direction: column; gap: 6px;
}
.sr-share__btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: all .2s;
}
.sr-share__btn:hover { transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════
   SCROLL TO TOP
   ══════════════════════════════════════════════════════════ */
.sr-scroll-top {
  position: fixed; bottom: 24px; right: 20px; z-index: 150;
  width: 44px; height: 44px; border-radius: var(--sr-radius);
  background: var(--sr-primary); color: #fff; border: none;
  cursor: pointer; font-size: 18px; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
  transition: opacity .3s;
}
.sr-scroll-top.visible { display: flex; }

/* ══════════════════════════════════════════════════════════
   COOKIE CONSENT
   ══════════════════════════════════════════════════════════ */
.sr-cookie-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--sr-header-bg); border-top: 1px solid rgba(255,255,255,.1);
  padding: 14px 24px; display: flex; justify-content: center;
}
.sr-cookie-consent__inner {
  max-width: 960px; display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap; width: 100%;
}
.sr-cookie-consent__text { flex: 1; min-width: 220px; }
.sr-cookie-consent__title { font-size: 14px; font-weight: 700; color: #fff; }
.sr-cookie-consent__desc { font-size: 12px; color: rgba(255,255,255,.55); margin: 0; }

/* ══════════════════════════════════════════════════════════
   DEALS POPUP
   ══════════════════════════════════════════════════════════ */
.sr-popup-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.sr-popup {
  background: var(--sr-card-bg); border-radius: calc(var(--sr-radius) + 6px);
  max-width: 420px; width: 92%; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sr-popup__header {
  background: var(--sr-hero-bg); padding: 28px 24px; text-align: center;
}
.sr-popup__close {
  position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.2);
  border: none; border-radius: 50%; width: 28px; height: 28px;
  cursor: pointer; color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════════════════ */
.sr-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 400; background: var(--sr-success); color: #fff;
  padding: 10px 24px; border-radius: 10px; font-size: 13px;
  font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  animation: sr-toast-in .3s ease;
}
@keyframes sr-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ══════════════════════════════════════════════════════════
   COMMENTS
   ══════════════════════════════════════════════════════════ */
.sr-comment {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 14px; margin-bottom: 8px;
}
.sr-comment__avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(124,58,237,.1); display: flex;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--sr-accent);
}
.sr-comment__reply {
  margin-top: 8px; margin-left: 16px; padding: 10px;
  background: rgba(37,99,235,.04); border-radius: calc(var(--sr-radius) - 2px);
  border-left: 3px solid var(--sr-primary);
}

/* ══════════════════════════════════════════════════════════
   TRUST BADGES
   ══════════════════════════════════════════════════════════ */
.sr-trust {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 28px;
}
.sr-trust__label { font-size: 10px; font-weight: 700; color: var(--sr-text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.sr-trust__brand { font-size: 13px; font-weight: 700; color: rgba(100,116,139,.6); }
.sr-trust__cert {
  background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.15);
  border-radius: 6px; padding: 3px 10px; font-size: 10px;
  font-weight: 700; color: var(--sr-success);
}

/* ══════════════════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════════════════ */
.sr-404 { text-align: center; padding: 80px 24px; }
.sr-404__code { font-size: 80px; font-weight: 900; opacity: .1; margin-bottom: 8px; }
.sr-404 h1 { font-size: 28px; margin-bottom: 8px; }
.sr-404 p { max-width: 400px; margin: 0 auto 24px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sr-review-layout { grid-template-columns: 1fr; }
  .sr-sidebar-score { position: static; }
  .sr-share { display: none; }
  .sr-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .sr-hero h1 { font-size: 28px; }
  .sr-header__nav { display: none; }
  .sr-grid--2, .sr-grid--3 { grid-template-columns: 1fr; }
  .sr-proscons { grid-template-columns: 1fr; }
  .sr-helpful { grid-template-columns: 1fr; }
  .sr-comparison__header { flex-direction: column; gap: 8px; }
  .sr-footer__grid { grid-template-columns: 1fr; }
  .sr-header__main { padding: 0 16px; }
  .sr-container { padding: 0 16px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
}

@media (max-width: 480px) {
  .sr-hero { padding: 40px 16px 32px; }
  .sr-hero h1 { font-size: 24px; }
  .sr-hero__stats { gap: 16px; }
  .sr-review-card { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   TIER 1-3 EXTENDED COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Mobile Hamburger Menu (#20) */
.sr-header__mobile-toggle {
  display: none; background: rgba(255,255,255,.1); border: none;
  border-radius: 6px; padding: 6px 12px; font-size: 20px;
  color: #fff; cursor: pointer; font-family: var(--sr-font);
}
@media (max-width: 768px) {
  .sr-header__mobile-toggle { display: flex; align-items: center; }
  .sr-header__nav { display: none; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--sr-header-bg);
    border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 20px; z-index: 90; }
  .sr-header__nav.active { display: flex; }
  .sr-header__nav-item { padding: 10px 0; }
}

/* "Best For" Tags (#7) */
.sr-best-for { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.sr-best-for__tag {
  display: inline-block; background: rgba(124,58,237,.08); color: var(--sr-accent);
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Pricing Tiers (#8) */
.sr-pricing-tiers { margin-bottom: 24px; }
.sr-pricing-tiers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sr-pricing-tier {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 20px; display: flex;
  flex-direction: column; text-align: center;
}
.sr-pricing-tier--featured { border: 2px solid var(--sr-primary); box-shadow: 0 4px 20px rgba(37,99,235,.1); }
.sr-pricing-tier__name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.sr-pricing-tier__price { font-size: 28px; font-weight: 900; color: var(--sr-success); }
.sr-pricing-tier__period { font-size: 12px; color: var(--sr-text-secondary); margin-bottom: 12px; }
.sr-pricing-tier__devices { font-size: 12px; color: var(--sr-text-secondary); margin-bottom: 12px; }
.sr-pricing-tier__features { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.sr-pricing-tier__features li { font-size: 13px; padding: 4px 0; color: var(--sr-text-primary); }

/* Company Background (#13) */
.sr-company-bg {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 18px; margin-bottom: 20px;
}
.sr-company-bg__title { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.sr-company-bg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sr-company-bg__item { padding: 8px 12px; background: #f8fafc; border-radius: 8px; }
.sr-company-bg__label { display: block; font-size: 10px; font-weight: 700; color: var(--sr-text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.sr-company-bg__value { font-size: 14px; font-weight: 600; color: var(--sr-text-primary); }

/* Leak Test Results (#14) */
.sr-leak-test {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--sr-border);
}
.sr-leak-test:last-child { border-bottom: none; }
.sr-leak-test__name { font-size: 13px; font-weight: 600; }

/* Screenshots Gallery (#15) */
.sr-screenshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sr-screenshots__item { border-radius: var(--sr-radius); overflow: hidden; border: 1px solid var(--sr-border); }
.sr-screenshots__item img { width: 100%; height: auto; display: block; }
.sr-screenshots__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* Callout Boxes / Pro Tips (#12) */
.sr-callout {
  border-radius: var(--sr-radius); padding: 16px 20px; margin: 16px 0;
}
.sr-callout--tip { background: rgba(5,150,105,.05); border-left: 4px solid var(--sr-success); }
.sr-callout--info { background: rgba(37,99,235,.05); border-left: 4px solid var(--sr-primary); }
.sr-callout--warning { background: rgba(217,119,6,.05); border-left: 4px solid var(--sr-warning); }
.sr-callout__title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sr-callout--tip .sr-callout__title { color: var(--sr-success); }
.sr-callout--info .sr-callout__title { color: var(--sr-primary); }
.sr-callout--warning .sr-callout__title { color: var(--sr-warning); }
.sr-callout__text { font-size: 13px; color: var(--sr-text-secondary); line-height: 1.65; }

/* Video Embed (#3) */
.sr-video-embed { margin-bottom: 24px; }
.sr-video-embed__wrapper { border-radius: var(--sr-radius); overflow: hidden; }

/* Multi-Author Attribution (#5) */
.sr-multi-author {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 16px;
  padding: 10px 16px; background: rgba(37,99,235,.03);
  border-radius: var(--sr-radius); border: 1px solid rgba(37,99,235,.08);
}
.sr-multi-author__item { font-size: 12px; color: var(--sr-text-secondary); }

/* Changelog (#24) */
.sr-changelog {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 18px; margin-bottom: 20px;
}
.sr-changelog h3 { font-size: 14px; margin-bottom: 12px; }
.sr-changelog__entry {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 12px; color: var(--sr-text-secondary);
}
.sr-changelog__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sr-primary); flex-shrink: 0;
}

/* Platforms Tested (#23) */
.sr-platforms { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }

/* Reading time on archive cards (#26) */
.sr-review-card__meta .sr-read-time { color: var(--sr-text-secondary); }

/* Deals page (#17) */
@media (max-width: 768px) {
  .sr-pricing-tiers__grid { grid-template-columns: 1fr; }
  .sr-company-bg__grid { grid-template-columns: 1fr 1fr; }
  .sr-screenshots { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   V2 FEATURES CSS
   ══════════════════════════════════════════════════════════ */

/* Auto Table of Contents (#13) */
.sr-auto-toc {
  background: rgba(37,99,235,.03); border: 1px solid rgba(37,99,235,.1);
  border-radius: var(--sr-radius); padding: 18px 22px; margin-bottom: 24px;
}
.sr-auto-toc__title { font-size: 13px; font-weight: 800; color: var(--sr-primary); margin-bottom: 10px; text-transform: uppercase; }
.sr-auto-toc ul { list-style: none; padding: 0; margin: 0; }
.sr-auto-toc__item { padding: 4px 0; }
.sr-auto-toc__item a { font-size: 13px; color: var(--sr-text-secondary); text-decoration: none; display: block; padding: 2px 0 2px 12px; border-left: 2px solid transparent; transition: all .2s; }
.sr-auto-toc__item a:hover { color: var(--sr-primary); border-left-color: var(--sr-primary); }
.sr-auto-toc__item--h3 a { padding-left: 24px; font-size: 12px; }

/* Notification Bar (#9) */
.sr-notif-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: linear-gradient(90deg, var(--sr-primary), var(--sr-accent));
  padding: 8px 20px; box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.sr-notif-bar__inner {
  max-width: 1100px; margin: 0 auto; display: flex;
  align-items: center; gap: 12px; color: #fff;
  font-size: 13px; font-weight: 600;
}
body:has(.sr-notif-bar) .sr-header { top: 40px; }

/* Pricing Tiers enhanced */
.sr-pricing-tier { transition: transform .2s; }
.sr-pricing-tier:hover { transform: translateY(-4px); }

/* Category hub #24 */
.sr-hub-hero {
  background: var(--sr-hero-bg); border-radius: calc(var(--sr-radius) + 4px);
  padding: 36px 32px; margin-bottom: 28px;
}
.sr-hub-hero h1 { color: var(--sr-hero-text); margin-bottom: 6px; }
.sr-hub-hero p { color: rgba(255,255,255,.7); margin: 0; }

/* Scroll animations (#27) */
.sr-animate { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.sr-animate.sr-visible { opacity: 1; transform: translateY(0); }

/* Glossary */
.sr-glossary-letter { scroll-margin-top: 80px; }

/* Savings calculator */
.sr-calc-result { transition: color .3s; }

/* Blog featured */
@media (max-width: 768px) {
  .sr-auto-toc__item--h3 a { padding-left: 16px; }
  .sr-notif-bar__inner { font-size: 11px; }
}

/* Maintenance page (#28) */
.sr-maintenance { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }

/* ══════════════════════════════════════════════════════════
   V3 DESIGN UPGRADES (2026 Trends)
   ══════════════════════════════════════════════════════════ */

/* #1 Dark mode overhaul - tinted neutrals */
body.dark-mode {
  --sr-body-bg: #09090B;
  --sr-card-bg: #111318;
  --sr-text-primary: #ECEDEE;
  --sr-text-secondary: #8B8D98;
  --sr-border: #1C1E27;
  --sr-header-bg: #050507;
  --sr-hero-bg: #050507;
  --sr-footer-bg: #050507;
}

/* #2 Glassmorphism cards */
.sr-card--glass {
  background: rgba(255,255,255,.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.3); box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
body.dark-mode .sr-card--glass {
  background: rgba(20,25,37,.7); border-color: rgba(255,255,255,.06);
}

/* #3 Gradient system */
.sr-gradient-primary { background: linear-gradient(135deg, var(--sr-primary), var(--sr-accent)); }
.sr-gradient-success { background: linear-gradient(135deg, #059669, #0891b2); }
.sr-gradient-glow::before {
  content: ''; position: absolute; inset: 0; opacity: .06; border-radius: inherit;
  background: radial-gradient(ellipse at 30% 20%, var(--sr-primary), transparent 60%),
              radial-gradient(ellipse at 70% 80%, var(--sr-accent), transparent 60%);
  pointer-events: none;
}

/* #4 Micro-animations */
.sr-btn { transition: all .25s cubic-bezier(.4,0,.2,1); }
.sr-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.sr-btn:active { transform: translateY(0); }
.sr-card { transition: all .3s cubic-bezier(.4,0,.2,1); }
.sr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.sr-review-card { transition: all .25s ease; }
.sr-review-card:hover { transform: translateX(4px); }
.sr-badge { transition: transform .2s; }
.sr-badge:hover { transform: scale(1.05); }

/* #5 Kinetic hero text */
@keyframes sr-hero-word { 0%,100% { opacity: 0; transform: translateY(8px); } 10%,90% { opacity: 1; transform: translateY(0); } }
.sr-hero-rotate { display: inline-block; animation: sr-hero-word 3s ease infinite; }

/* #6 Bento grid */
.sr-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 14px; }
.sr-bento > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 768px) { .sr-bento { grid-template-columns: 1fr; } .sr-bento > :first-child { grid-column: span 1; grid-row: span 1; } }

/* #8 Radial score ring */
.sr-ring { display: inline-flex; }
.sr-ring__circle { transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1); }

/* #9 Tinted neutral overrides */
:root {
  --sr-neutral-50: #f8fafc; --sr-neutral-100: #f1f5f9;
  --sr-neutral-200: #e2e8f0; --sr-neutral-800: #1e293b;
}

/* #12 Light/Dark customizer pairs handled by existing CSS vars */

/* #13 Quick answer box */
.sr-quick-answer {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.06));
  border: 2px solid rgba(37,99,235,.12); border-radius: calc(var(--sr-radius) + 4px);
  padding: 20px 24px; margin-bottom: 22px; position: relative; overflow: hidden;
}
.sr-quick-answer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sr-primary), var(--sr-accent)); }
.sr-quick-answer__label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--sr-primary); margin-bottom: 6px; }
.sr-quick-answer__text { font-size: 15px; font-weight: 500; color: var(--sr-text-primary); line-height: 1.65; margin: 0; }

/* #14 Comparison wizard */
.sr-wizard { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: calc(var(--sr-radius) + 4px); padding: 28px; text-align: center; margin: 20px 0; }
.sr-wizard h3 { margin-bottom: 16px; }
.sr-wizard__options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sr-wizard__option {
  padding: 14px 24px; border-radius: var(--sr-radius); border: 2px solid var(--sr-border);
  background: var(--sr-card-bg); cursor: pointer; font-family: var(--sr-font);
  font-size: 14px; font-weight: 600; color: var(--sr-text-primary); transition: all .2s;
}
.sr-wizard__option:hover { border-color: var(--sr-primary); color: var(--sr-primary); transform: translateY(-2px); }

/* #15 Price alert */
.sr-price-alert {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(5,150,105,.04); border: 1px solid rgba(5,150,105,.12);
  border-radius: var(--sr-radius); padding: 14px 18px; margin-bottom: 18px;
}
.sr-price-alert__icon { color: var(--sr-success); }
.sr-price-alert__text { flex: 1; min-width: 160px; }
.sr-price-alert__form { display: flex; gap: 6px; }

/* #16 Score timeline */
.sr-timeline-chart {
  background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 14px; margin-bottom: 14px;
}

/* #18 Chat widget */
.sr-chat-btn {
  position: fixed; bottom: 24px; right: 76px; z-index: 140;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--sr-primary), var(--sr-accent));
  color: #fff; padding: 12px 20px; border-radius: 50px; text-decoration: none;
  font-family: var(--sr-font); font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 24px rgba(37,99,235,.35); transition: all .3s;
}
.sr-chat-btn:hover { transform: translateY(-3px) scale(1.03); color: #fff; }

/* #24 Skeleton loading */
@keyframes sr-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.sr-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 400px 100%; animation: sr-shimmer 1.5s infinite; border-radius: 8px; }

/* #27 Sponsored notice */
.sr-sponsored-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(217,119,6,.06); border: 1px solid rgba(217,119,6,.15);
  border-radius: var(--sr-radius); padding: 10px 16px; margin-bottom: 16px;
}

/* #31 Expert quote */
.sr-expert-quote {
  display: flex; gap: 16px; background: var(--sr-card-bg); border: 1px solid var(--sr-border);
  border-left: 4px solid var(--sr-accent); border-radius: var(--sr-radius);
  padding: 18px; margin: 20px 0;
}
.sr-expert-quote__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sr-expert-quote__text { font-size: 14px; color: var(--sr-text-primary); font-style: italic; line-height: 1.6; margin: 0 0 8px; }
.sr-expert-quote__author { font-size: 12px; color: var(--sr-text-secondary); font-style: normal; }
.sr-expert-quote__author strong { color: var(--sr-text-primary); }

/* #33 Poll */
.sr-poll { background: var(--sr-card-bg); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); padding: 18px; margin: 16px 0; }
.sr-poll__question { font-size: 15px; margin-bottom: 12px; }
.sr-poll__options { display: flex; flex-direction: column; gap: 6px; }
.sr-poll__option {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--sr-border);
  cursor: pointer; font-family: var(--sr-font); font-size: 13px; font-weight: 500;
  background: transparent; text-align: left; color: var(--sr-text-primary); transition: all .2s; overflow: hidden;
}
.sr-poll__option:hover { border-color: var(--sr-primary); }
.sr-poll__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(37,99,235,.08); transition: width .5s ease; z-index: 0; border-radius: 8px;
}
.sr-poll__label { position: relative; z-index: 1; }
.sr-poll__pct { position: relative; z-index: 1; font-weight: 700; font-size: 12px; color: var(--sr-primary); }

/* SVG icons */
.sr-icon { vertical-align: middle; flex-shrink: 0; }

/* Score color system refinement #10 */
.sr-score--excellent .sr-score__value { background: linear-gradient(135deg, #059669, #0d9488); }
.sr-score--good .sr-score__value { background: linear-gradient(135deg, #0891b2, #2563eb); }
.sr-score--average .sr-score__value { background: linear-gradient(135deg, #d97706, #ea580c); }
.sr-score--poor .sr-score__value { background: linear-gradient(135deg, #dc2626, #be123c); }

/* Enhanced button gradients #11 */
.sr-btn--primary { background: linear-gradient(135deg, var(--sr-primary), var(--sr-accent)); box-shadow: 0 4px 16px rgba(37,99,235,.25); }
.sr-btn--primary:hover { box-shadow: 0 8px 28px rgba(37,99,235,.35); }