/* Top VPN Ratings — frontend styles for plugin-rendered components.
   Brand palette is set via CSS variables in the theme; this file uses them
   with sensible fallbacks so the plugin works against any compatible theme. */

:root {
  --tvr-navy: #071B33;
  --tvr-blue: #2563EB;
  --tvr-cyan: #06B6D4;
  --tvr-bg:   #F5F7FB;
  --tvr-card: #FFFFFF;
  --tvr-text: #111827;
  --tvr-muted:#4B5563;
  --tvr-border:#E5E7EB;
  --tvr-success:#16A34A;
  --tvr-danger: #DC2626;
  --tvr-radius: 14px;
  --tvr-radius-sm: 10px;
  --tvr-shadow: 0 1px 2px rgba(7,27,51,.06), 0 8px 24px rgba(7,27,51,.06);
  --tvr-shadow-lg: 0 10px 30px rgba(7,27,51,.10);
}

/* ---------- Buttons ---------- */
.tvr-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.1rem; border-radius:999px; font-weight:600; line-height:1.1;
  text-decoration:none; transition:all .15s ease; border:1px solid transparent;
  font-size:.95rem; cursor:pointer; max-width:100%; text-align:center;
}
.tvr-btn--primary { background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan)); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.30); }
.tvr-btn--primary:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.40); color:#fff; }
.tvr-btn--ghost { background:transparent; color:var(--tvr-blue); border-color:var(--tvr-blue); }
.tvr-btn--ghost:hover { background:var(--tvr-blue); color:#fff; }
.tvr-btn--lg { padding:.95rem 1.6rem; font-size:1.05rem; }
.tvr-btn--small { padding:.45rem .8rem; font-size:.85rem; }
.tvr-btn--block { width:100%; }

/* ---------- Score pill ---------- */
.tvr-score-pill {
  display:inline-flex; align-items:baseline; gap:.15rem;
  padding:.35rem .65rem; border-radius:999px;
  font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan));
  font-size:.95rem;
}
.tvr-score-pill__suffix { font-weight:500; opacity:.8; font-size:.75em; }
.tvr-score-pill.tier-excellent { background:linear-gradient(135deg, #16A34A, #0EA5E9); }
.tvr-score-pill.tier-great     { background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan)); }
.tvr-score-pill.tier-good      { background:linear-gradient(135deg, #6366F1, #8B5CF6); }
.tvr-score-pill.tier-okay      { background:linear-gradient(135deg, #F59E0B, #F97316); }
.tvr-score-pill.tier-mid       { background:linear-gradient(135deg, #6B7280, #9CA3AF); }
.tvr-score-pill--small { padding:.25rem .55rem; font-size:.8rem; }
.tvr-score-pill--lg    { padding:.55rem .9rem;  font-size:1.15rem; }
.tvr-score-pill--xl    { padding:.7rem 1.1rem;  font-size:1.5rem; }

/* ---------- Stars ---------- */
.tvr-stars { color:#F59E0B; letter-spacing:1px; font-size:1rem; }
.tvr-star--empty { color:#D1D5DB; }

/* ---------- Logo ----------
   Default explicit pixel width with auto height preserves SVG aspect ratio
   and works whether the SVG carries width/height attributes or not. The
   wrapping context (.tvr-card__logo, .tvr-comparison__name, etc.) overrides
   width as needed. */
.tvr-vpn-logo {
  display:inline-block;
  width:140px; height:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:8px;
  box-sizing:content-box;
}
.tvr-vpn-logo--placeholder {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:12px;
  background:linear-gradient(135deg, var(--tvr-navy), var(--tvr-blue));
  color:#fff; font-weight:800; letter-spacing:.5px; font-size:1rem;
  box-sizing:border-box;
}

/* ---------- Cards ---------- */
.tvr-section-heading {
  font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:800;
  color:var(--tvr-navy); margin:2rem 0 1rem;
}
.tvr-ranking__list { display:grid; gap:1.25rem; }
.tvr-card {
  position:relative;
  display:grid; grid-template-columns:120px 1fr 220px; gap:1.25rem;
  background:var(--tvr-card); border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius); padding:1.25rem 1.4rem;
  box-shadow:var(--tvr-shadow); align-items:center;
}
.tvr-card__rank-badge {
  position:absolute; top:-.6rem; left:1rem;
  background:var(--tvr-navy); color:#fff;
  border-radius:999px; padding:.25rem .65rem; font-weight:700; font-size:.8rem;
  letter-spacing:.04em;
}
.tvr-card__logo { display:flex; align-items:center; justify-content:center; min-height:74px; }
.tvr-card__logo .tvr-vpn-logo {
  width:100%; max-width:132px; height:58px; object-fit:contain;
  background:#fff; padding:6px 8px; border-radius:10px;
  box-shadow:0 1px 2px rgba(7,27,51,.06);
}
.tvr-card__title { font-size:1.25rem; margin:0 0 .15rem; color:var(--tvr-navy); }
.tvr-card__title a { color:inherit; text-decoration:none; }
.tvr-card__title a:hover { color:var(--tvr-blue); }
.tvr-card__bestfor { color:var(--tvr-muted); font-size:.9rem; margin:0 0 .5rem; font-weight:500; }
.tvr-card__summary { color:var(--tvr-text); margin:.4rem 0; }
.tvr-card__pros { list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.25rem; }
.tvr-card__pros li::before { content:"✓"; color:var(--tvr-success); font-weight:800; margin-right:.4rem; }
.tvr-card__score { display:grid; gap:.5rem; justify-items:center; align-content:center; text-align:center; padding:.6rem; background:var(--tvr-bg); border-radius:var(--tvr-radius-sm); }
.tvr-card__price { color:var(--tvr-muted); font-size:.9rem; }
.tvr-card__price strong { color:var(--tvr-navy); }

@media (max-width: 820px) {
  .tvr-card { grid-template-columns:90px 1fr; padding:1rem; }
  .tvr-card__score { grid-column: 1 / -1; padding:.85rem; }
}

/* ---------- Top 3 ---------- */
.tvr-top3__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
@media (max-width: 900px) { .tvr-top3__grid { grid-template-columns:1fr; } }
.tvr-top3card {
  background:var(--tvr-card); border:1px solid var(--tvr-border);
  border-radius:var(--tvr-radius); padding:1.5rem 1.25rem; text-align:center;
  box-shadow:var(--tvr-shadow); display:grid; gap:.5rem;
  position:relative; overflow:hidden;
}
.tvr-top3card:nth-child(1) { box-shadow:var(--tvr-shadow-lg); border-color:var(--tvr-blue); }
.tvr-top3card__badge {
  display:inline-block; align-self:start; justify-self:center;
  background:linear-gradient(135deg, var(--tvr-blue), var(--tvr-cyan));
  color:#fff; padding:.25rem .7rem; border-radius:999px; font-size:.75rem;
  font-weight:700; letter-spacing:.04em;
}
.tvr-top3card__logo { display:flex; align-items:center; justify-content:center; min-height:84px; }
.tvr-top3card__logo .tvr-vpn-logo {
  width:190px; height:64px; object-fit:contain;
  background:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:0 2px 6px rgba(7,27,51,.08);
}
.tvr-top3card__title { font-size:1.3rem; margin:.2rem 0 0; color:var(--tvr-navy); }
.tvr-top3card__title a { color:inherit; text-decoration:none; }
.tvr-top3card__bestfor { color:var(--tvr-muted); font-size:.9rem; margin:0; }
.tvr-top3card__price { color:var(--tvr-muted); font-size:.9rem; }
.tvr-top3card__price strong { color:var(--tvr-navy); }
.tvr-link { color:var(--tvr-blue); text-decoration:none; font-weight:600; }
.tvr-link:hover { text-decoration:underline; }

/* ---------- Comparison table ---------- */
.tvr-table-wrap { width:100%; border-radius:var(--tvr-radius); box-shadow:var(--tvr-shadow); background:var(--tvr-card); margin:1rem 0; }
/* Full table (dedicated comparison page) keeps horizontal scroll as a fallback. */
.tvr-table-wrap:not(.tvr-table-wrap--compact) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tvr-table-wrap:not(.tvr-table-wrap--compact) .tvr-comparison { min-width:980px; }
/* Compact (homepage preview) NEVER scrolls — columns hide progressively. */
.tvr-table-wrap--compact { overflow:hidden; }
.tvr-table-wrap--compact .tvr-comparison { width:100%; min-width:0; table-layout:fixed; }

.tvr-comparison { width:100%; border-collapse:collapse; }
.tvr-comparison th, .tvr-comparison td { padding:.85rem .55rem; text-align:left; border-bottom:1px solid var(--tvr-border); vertical-align:middle; font-size:.9rem; }
.tvr-comparison thead th { background:var(--tvr-navy); color:#fff; font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.tvr-comparison tbody tr:hover { background:var(--tvr-bg); }
.tvr-comparison__rank { font-weight:800; color:var(--tvr-navy); white-space:nowrap; padding-left:1rem !important; }
.tvr-comparison__bestfor { line-height:1.3; }
.tvr-comparison__price, .tvr-comparison__refund { white-space:nowrap; }
.tvr-comparison__servers { line-height:1.3; }
.tvr-comparison__cta-cell { padding-right:1rem !important; white-space:nowrap; text-align:right; }
.tvr-comparison__cta-cell .tvr-btn { padding:.5rem .85rem; font-size:.82rem; }

/* Column widths (compact) — proportional, designed to fit ~720px and up. */
.tvr-comparison--compact .tvr-col-rank      { width:6%; }
.tvr-comparison--compact .tvr-col-vpn       { width:30%; }
.tvr-comparison--compact .tvr-col-score     { width:11%; }
.tvr-comparison--compact .tvr-col-streaming { width:11%; }
.tvr-comparison--compact .tvr-col-torrenting{ width:13%; }
.tvr-comparison--compact .tvr-col-refund    { width:11%; }
.tvr-comparison--compact .tvr-col-cta       { width:18%; }

/* Progressive column hide as viewport narrows. The table still fits cleanly. */
@media (max-width: 720px) {
  .tvr-comparison--compact .tvr-col-streaming,
  .tvr-comparison--compact .tvr-col-torrenting { display:none; }
  .tvr-comparison--compact .tvr-col-rank     { width:8%; }
  .tvr-comparison--compact .tvr-col-vpn      { width:34%; }
  .tvr-comparison--compact .tvr-col-score    { width:14%; }
  .tvr-comparison--compact .tvr-col-refund   { width:18%; }
  .tvr-comparison--compact .tvr-col-cta      { width:26%; }
  .tvr-comparison--compact .tvr-score-pill   { padding:.3rem .55rem; font-size:.85rem; }
  .tvr-comparison--compact .tvr-comparison__name .tvr-vpn-logo { width:48px; }
}
@media (max-width: 520px) {
  .tvr-comparison--compact .tvr-col-refund   { display:none; }
  .tvr-comparison--compact .tvr-col-vpn      { width:42%; }
  .tvr-comparison--compact .tvr-col-score    { width:18%; }
  .tvr-comparison--compact .tvr-col-cta      { width:32%; }
  .tvr-comparison--compact th, .tvr-comparison--compact td { padding:.7rem .35rem; font-size:.82rem; }
  .tvr-comparison--compact .tvr-comparison__name { gap:.4rem; }
  .tvr-comparison--compact .tvr-comparison__name strong { font-size:.82rem; line-height:1.2; }
  .tvr-comparison--compact .tvr-comparison__name .tvr-vpn-logo { width:40px; }
  .tvr-comparison--compact .tvr-comparison__cta-cell .tvr-btn { padding:.4rem .65rem; font-size:.78rem; }
  .tvr-comparison--compact .tvr-score-pill__suffix { display:none; }
}

.tvr-comparison__name { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--tvr-navy); max-width:100%; }
.tvr-comparison__name strong { font-size:.95rem; line-height:1.2; min-width:0; }
.tvr-comparison__name .tvr-vpn-logo {
  flex:0 0 auto;
  width:64px; height:34px; object-fit:contain;
  background:#fff; padding:3px 5px; border-radius:6px;
  box-shadow:0 1px 2px rgba(7,27,51,.06);
}

/* ---------- Score box ---------- */
.tvr-score-box { background:var(--tvr-card); border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1.25rem 1.4rem; box-shadow:var(--tvr-shadow); }
.tvr-score-box__title { margin:0 0 .75rem; color:var(--tvr-navy); font-size:1.15rem; }
.tvr-score-box__overall { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.tvr-score-box__list { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.tvr-score-row { display:grid; grid-template-columns:160px 1fr 50px; gap:.75rem; align-items:center; font-size:.9rem; }
.tvr-score-row__label { color:var(--tvr-muted); }
.tvr-score-row__bar { background:var(--tvr-bg); border-radius:999px; height:8px; overflow:hidden; }
.tvr-score-row__fill { display:block; height:100%; background:linear-gradient(90deg, var(--tvr-blue), var(--tvr-cyan)); border-radius:999px; }
.tvr-score-row__value { font-weight:700; color:var(--tvr-navy); text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Pros/Cons ---------- */
/* When inside the narrow review aside (~360px) we always stack. */
.tvr-proscons { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.25rem 0; }
@media (max-width:680px) { .tvr-proscons { grid-template-columns:1fr; } }
.tvr-review__aside .tvr-proscons { grid-template-columns:1fr; gap:.75rem; }
.tvr-proscons__col { background:var(--tvr-card); border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1rem 1.25rem; }
.tvr-proscons__col h3 { margin:0 0 .6rem; font-size:1.05rem; }
.tvr-proscons__col--pros { border-top:3px solid var(--tvr-success); }
.tvr-proscons__col--cons { border-top:3px solid var(--tvr-danger); }
.tvr-proscons__col ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.tvr-proscons__col--pros li::before { content:"✓"; color:var(--tvr-success); font-weight:800; margin-right:.4rem; }
.tvr-proscons__col--cons li::before { content:"✕"; color:var(--tvr-danger);  font-weight:800; margin-right:.4rem; }

/* ---------- Summary card ---------- */
.tvr-summary { background:var(--tvr-card); border:1px solid var(--tvr-border); border-radius:var(--tvr-radius); padding:1.25rem 1.4rem; box-shadow:var(--tvr-shadow); }
.tvr-summary__head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.tvr-summary__head .tvr-vpn-logo {
  width:132px; height:58px; object-fit:contain;
  background:#fff; padding:6px 10px; border-radius:10px;
  box-shadow:0 1px 2px rgba(7,27,51,.06);
}
.tvr-summary__title { margin:0; color:var(--tvr-navy); font-size:1.5rem; }
.tvr-summary__bestfor { margin:.1rem 0 0; color:var(--tvr-muted); }
.tvr-summary__score { margin-left:auto; }
.tvr-summary__text { color:var(--tvr-text); margin:1rem 0; }
.tvr-summary__facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem 1rem; margin:0; }
.tvr-summary__facts > div { background:var(--tvr-bg); padding:.6rem .85rem; border-radius:var(--tvr-radius-sm); }
.tvr-summary__facts dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tvr-muted); margin:0; }
.tvr-summary__facts dd { margin:.15rem 0 0; font-weight:600; color:var(--tvr-navy); }
@media (max-width:680px) { .tvr-summary__facts { grid-template-columns:1fr 1fr; } }

/* ---------- Related ---------- */
.tvr-related__list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; }
.tvr-related__list a { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:var(--tvr-card); border:1px solid var(--tvr-border); border-radius:var(--tvr-radius-sm); text-decoration:none; color:var(--tvr-navy); }
.tvr-related__list a:hover { border-color:var(--tvr-blue); }
.tvr-related__list span { flex:1; }
.tvr-related__list .tvr-vpn-logo {
  width:62px; height:34px; object-fit:contain;
  background:#fff; padding:3px 5px; border-radius:6px;
  flex:0 0 auto;
}

/* ---------- Print/edge tweaks ---------- */
@media (max-width:480px) {
  .tvr-card { padding:1rem; }
  .tvr-comparison th, .tvr-comparison td { padding:.7rem .55rem; font-size:.85rem; }
}