/* VPN comparison variant (us-vpn): overrides on top of styles.css + mediaquery.css */

:root {
  --vpn-accent: #3266fa;
  --vpn-rank1: #f69b45;
  --vpn-rank2: #5388d8;
  --vpn-muted: #727574;
  --vpn-line: #e3e2e2;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
[id] { scroll-margin-top: 16px; }

/* header logo */
header .logo { height: auto; }
header .logo img { width: 200px; height: auto; max-height: none; }

/* badges: wrap nicely on phones */
.badge-wrapper { flex-wrap: wrap; gap: 8px 12px; }

/* byline without photo */
.vpn-byline-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: #e8eefc; color: var(--vpn-accent);
  display: flex; align-items: center; justify-content: center;
}

.vpn-section-title { text-align: center; }

/* ---------- quick picks (top 3) ---------- */
.comparison-cards-section.vpn-quick-picks { display: block; padding: 24px 0 40px; }
.vpn-quick-picks .comparison-cards-wrapper { flex-direction: column; align-items: stretch; gap: 16px; }
.vpn-quick-picks .comparison-card.best-overall { order: -1; margin-top: 26px; }
.vpn-quick-picks .comparison-card .rating-score { margin-bottom: 12px; border-radius: 4px; }
.vpn-quick-picks .comparison-card .provider-logo { height: 40px; margin-bottom: 8px; }
.vpn-quick-picks .comparison-card .provider-logo img,
.vpn-quick-picks .comparison-card.best-overall .provider-logo img {
  width: 160px; height: 40px; max-width: 160px; max-height: 40px; object-fit: contain;
}
.vpn-quick-picks .comparison-card.best-overall .provider-logo { margin-bottom: 8px; }
.vpn-quick-picks .pick-rank {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--secondary-font); font-weight: 700; font-size: 13px; color: var(--vpn-muted);
}
.vpn-quick-picks .pick-label {
  font-family: var(--secondary-font); font-weight: 700; font-size: 13px;
  color: var(--vpn-accent); margin-bottom: 6px; line-height: 1.3;
}
.vpn-quick-picks .comparison-card .provider-tagline,
.vpn-quick-picks .comparison-card.best-overall .provider-tagline {
  min-height: 0; max-width: 260px; margin-bottom: 14px; font-size: 14px; line-height: 1.4; display: block;
}
.vpn-quick-picks .comparison-card.best-overall .best-badge { color: #fff; }

@media (min-width: 640px) {
  .vpn-quick-picks .comparison-cards-wrapper { flex-direction: row; align-items: flex-end; gap: 0; }
  .vpn-quick-picks .comparison-card.best-overall { order: 0; margin-top: 0; }
  .vpn-quick-picks .comparison-card:not(.best-overall) { margin-bottom: 0; }
}

/* ---------- ranked cards ---------- */
.product-wrapper { max-width: 100%; }
.product-card.vpn-card {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: visible;
}
.product-card.vpn-card > *:not(:last-child) { margin-bottom: 0; }
.vpn-card .vpn-rank-pill {
  position: absolute; top: -12px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 32px);
  padding: 4px 12px;
  border-radius: 999px;
  background: #e5e5e5; color: var(--primary-text-color);
  font-family: var(--secondary-font); font-weight: 700; font-size: 12px; line-height: 16px;
  text-transform: uppercase; letter-spacing: .02em;
}
.vpn-card[data-rank="1"] .vpn-rank-pill { background: var(--vpn-rank1); color: #fff; }
.vpn-card[data-rank="2"] .vpn-rank-pill { background: var(--vpn-rank2); color: #fff; }
.vpn-card .vpn-rank-pill .rank-label:empty { display: none; }

.vpn-card .vpn-card-main {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 16px 16px;
}
.vpn-card .left { padding-top: 0; flex-direction: row; gap: 0; }
.vpn-card .left .left-wrapper {
  max-width: none; width: 100%;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.vpn-card .logo { height: auto; margin: 0; }
.vpn-card .logo img,
.product-card.vpn-card .logo img {
  width: 150px; height: 40px; max-width: 150px; max-height: 40px; object-fit: contain; object-position: left center;
}
.vpn-card .rating-box { width: 96px; padding: 8px 6px; flex-shrink: 0; }
.vpn-card .rating-box .score { font-size: 28px; }
.vpn-card .rating-box .score-scale { font-size: 10px; line-height: 13px; color: var(--vpn-muted); }
.vpn-card .middle { gap: 10px; }
.vpn-card .title { font-size: 17px; line-height: 1.3; }
.vpn-card .offer {
  text-transform: none; font-family: var(--primary-font); font-size: 13px; line-height: 1.4; font-weight: 500;
}
.vpn-card .vpn-proscons { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vpn-card .list-wrapper:not(:last-child) { margin-bottom: 0; }
.vpn-card ul { font-size: 13px; line-height: 1.4; }
.vpn-card ul.pros li, .vpn-card ul.cons li { padding-left: 16px; text-indent: -16px; }
.vpn-card ul.pros li::before, .vpn-card ul.cons li::before { display: inline-block; width: 12px; text-indent: 0; margin-right: 4px; }
.vpn-card ul.cons li::before { content: "\2013"; color: #9a6b2f; font-weight: 700; }
.vpn-card .right { align-items: stretch; }
.vpn-card ul.features { margin-bottom: 12px; color: var(--primary-text-color); }
.vpn-card ul.features li { gap: 8px; }
.vpn-card ul.features li svg { color: var(--vpn-accent); }
.vpn-card .btn { width: 100%; margin-bottom: 6px; }
.vpn-card .cta-note { font-size: 11px; color: var(--vpn-muted); text-align: center; }
.vpn-card .no-link-note {
  border: 1px dashed #c9ced6; border-radius: 10px; background: #f5f6f8;
  padding: 10px 12px; font-size: 12px; line-height: 1.4; color: var(--vpn-muted); text-align: center;
}
.vpn-card .no-link-note b { display: block; color: var(--primary-text-color); font-size: 13px; margin-bottom: 2px; }
.vpn-card.is-unlinked { box-shadow: none; }

/* more info */
.vpn-card .show-more-content { width: 100%; }
.vpn-card .show-more-content .content-wrapper { padding: 0 16px; }
.vpn-card .show-more-content.active .content-wrapper { padding: 4px 16px 16px; }
.vpn-card .show-more-btn { padding: 8px 0; color: #8a8a8a; }
.vpn-more { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vpn-more .list-title { color: var(--vpn-muted); font-size: 12px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.subscore { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.subscore i { display: block; height: 8px; border-radius: 4px; background: #e6e8ec; overflow: hidden; }
.subscore em { display: block; height: 100%; background: var(--vpn-accent); border-radius: 4px; }
.subscore b { text-align: right; }
.subscore[data-v=""] { display: none; }
.vpn-subscores:not(:has(.subscore:not([data-v=""])))  { display: none; }
table.kf-card { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kf-card tr { display: block; }
table.kf-card td {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid #eceff3; text-align: right;
}
table.kf-card td::before { content: attr(data-label); color: var(--vpn-muted); text-align: left; flex-shrink: 0; }

.vpn-others-title {
  font-family: var(--secondary-font); font-size: 20px; line-height: 1.3;
  margin: 8px 0 24px; padding-top: 8px; text-align: center; color: var(--vpn-muted);
}

@media (min-width: 640px) {
  .vpn-card .vpn-card-main {
    flex-direction: row; align-items: flex-start; gap: 24px; padding: 32px 24px 20px;
  }
  .vpn-card .left { width: 160px; max-width: 160px; margin: 0; flex-shrink: 0; }
  .vpn-card .left .left-wrapper { flex-direction: column; align-items: center; gap: 14px; }
  .vpn-card .logo img, .product-card.vpn-card .logo img { object-position: center; }
  .vpn-card .rating-box { width: 110px; }
  .vpn-card .middle { max-width: none; flex: 1; min-width: 0; }
  .vpn-card .right { max-width: 240px; width: 240px; flex-shrink: 0; }
  .vpn-card .vpn-proscons { grid-template-columns: 1fr 1fr; gap: 16px; }
  .vpn-card .btn { margin-bottom: 6px; }
  .vpn-more { grid-template-columns: 1fr 1fr; gap: 32px; }
  .vpn-card .show-more-content.active .content-wrapper { padding: 4px 24px 20px; }
}
/* the template hides .mobile-only/.desktop-only children; our card does not use them */
.product-card.vpn-card .show-more-btn { display: flex; }

/* top pick block */
.top-pick-product-section .vpn-card .vpn-rank-pill { top: -12px; }

/* ---------- key facts table ---------- */
.vpn-table-section { padding: 24px 0 32px; }
.kf-wrap { width: 100%; }
.kf-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card-bg); }
.kf-table th, .kf-table td { padding: 10px 8px; border-bottom: 1px solid var(--vpn-line); text-align: left; vertical-align: top; line-height: 1.35; }
.kf-table thead th { font-family: var(--secondary-font); font-size: 13px; background: #e7eaef; }
.kf-table tbody th a { color: var(--primary-text-color); font-weight: 700; white-space: nowrap; }
.kf-table .kf-rank { color: var(--vpn-muted); font-weight: 500; }
.kf-table tbody tr[data-rank="1"] { background: #fff7ef; }
.kf-note { font-size: 13px; color: var(--vpn-muted); margin-top: 12px; font-style: italic; }

@media (max-width: 899px) {
  .kf-table thead { display: none; }
  .kf-table, .kf-table tbody, .kf-table tr { display: block; width: 100%; }
  .kf-table tr { border: 1px solid var(--vpn-line); border-radius: 12px; margin-bottom: 12px; padding: 4px 12px; background: var(--card-bg); }
  .kf-table tbody tr[data-rank="1"] { border-color: #fbbb7f; }
  .kf-table th, .kf-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eceff3; padding: 7px 0; text-align: right; }
  .kf-table th { font-size: 16px; border-bottom: 1px solid var(--vpn-line); }
  .kf-table td:last-child { border-bottom: 0; }
  .kf-table td::before { content: attr(data-label); color: var(--vpn-muted); text-align: left; flex-shrink: 0; font-size: 13px; }
}

/* ---------- text sections ---------- */
.vpn-steps { padding-left: 20px; margin: 0 0 16px; }
.vpn-steps li { margin-bottom: 8px; }
.vpn-faq details {
  border: 1px solid var(--vpn-line); border-radius: 12px; background: var(--card-bg);
  margin-bottom: 10px; padding: 0 16px;
}
.vpn-faq summary {
  cursor: pointer; font-weight: 700; padding: 14px 24px 14px 0; position: relative; list-style: none;
}
.vpn-faq summary::-webkit-details-marker { display: none; }
.vpn-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 20px; color: var(--vpn-accent); }
.vpn-faq details[open] summary::after { content: "\2212"; }
.vpn-faq details p { padding-bottom: 14px; }
.vpn-disclosure { background: #e7eaef; padding: 32px 0; margin-top: 24px; }
.vpn-disclosure p { font-size: 15px; }

/* recommended (desktop) */
.recommended-provider-card .provider-logo-wrapper img { width: 140px; height: 36px; max-width: 140px; object-fit: contain; }
.recommended-provider-card .provider-rating small { font-size: 12px; color: var(--vpn-muted); margin-left: 2px; }

/* footer */
footer .footer-logo img { width: 200px; height: auto; }

/* ---------- mobile sticky bar ---------- */
.vpn-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #fff; color: var(--primary-text-color);
  border-top: 1px solid var(--vpn-line); box-shadow: 0 -6px 16px rgba(4, 30, 112, .08);
  font-size: 14px;
  transform: translateY(110%); transition: transform .25s ease;
}
.vpn-sticky .vpn-sticky-go {
  flex-shrink: 0; background: var(--primary-gradient); color: #fff; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
}
.vpn-sticky.visible { transform: translateY(0); }
@media (max-width: 639px) {
  .vpn-sticky { display: flex; }
  body { padding-bottom: 64px; }
}
.verified-badge-section .badge-icon-wrapper .badge-icon-text { white-space: nowrap; }