/* ==========================================================================
   TheCyberPicks Design Enhancements — tcp-enhancements.css
   Additive visual upgrades — loads AFTER all page-specific CSS.
   Uses LOCKED design system tokens only. Pure CSS, no JS.
   ========================================================================== */


/* =========================================================================
   1. SCORE CIRCLE — transforms rating display into a visual circle
   Add class "tcp-score-circle" to a container with data-score attribute.
   <div class="tcp-score-circle" data-score="4.8">
     <span class="tcp-score-value">4.8</span>
     <span class="tcp-score-label">/ 5</span>
   </div>
   ========================================================================= */

.tcp-score-circle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--tcp-primary);
  background: var(--tcp-bg);
  flex-shrink: 0;
}

.tcp-score-circle--green  { border-color: var(--tcp-accent); }
.tcp-score-circle--amber  { border-color: var(--tcp-warning); }
.tcp-score-circle--red    { border-color: var(--tcp-danger); }

.tcp-score-value {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tcp-text);
}

.tcp-score-label {
  font-size: 0.625rem;
  color: var(--tcp-text-muted);
  line-height: 1;
  margin-top: 1px;
}

.tcp-score-stars {
  display: flex;
  gap: 1px;
  margin-top: var(--tcp-space-1);
}

.tcp-score-stars svg {
  width: 12px;
  height: 12px;
}

.tcp-score-stars .tcp-star-filled { color: var(--tcp-rating-star); }
.tcp-score-stars .tcp-star-empty  { color: var(--tcp-border); }
.tcp-score-stars .tcp-star-half   { color: var(--tcp-rating-star); }


/* =========================================================================
   2. COMPARISON TABLE UPGRADES
   ========================================================================= */

/* Sticky header */
.tcp-comparison-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tcp-bg-alt);
  box-shadow: 0 1px 0 var(--tcp-border);
}

/* Alternating row stripes */
.tcp-comparison-table tbody tr:nth-child(even) {
  background: var(--tcp-bg-alt);
}

.tcp-comparison-table tbody tr:nth-child(even):hover {
  background: rgba(11, 95, 255, 0.04);
}

.tcp-comparison-table tbody tr:nth-child(odd):hover {
  background: rgba(11, 95, 255, 0.03);
}

/* Row hover left accent */
.tcp-comparison-table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-left: 3px solid transparent;
}

.tcp-comparison-table tbody tr:hover {
  border-left-color: var(--tcp-primary);
}

/* BEST PICK badge — pill with subtle pulse */
.tcp-best-pick-badge {
  background: var(--tcp-primary);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .tcp-best-pick-badge {
    animation: tcp-badge-pulse 2.5s ease-in-out infinite;
  }

  @keyframes tcp-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(11, 95, 255, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(11, 95, 255, 0); }
  }
}

/* Mini progress bar below rating */
.tcp-rating-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--tcp-border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.tcp-rating-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--tcp-accent);
  transition: width 0.4s ease;
}

/* CTA column: gradient button */
.tcp-comparison-table .tcp-cta-button {
  background: linear-gradient(135deg, var(--tcp-primary), var(--tcp-primary-dark));
  box-shadow: 0 2px 8px rgba(11, 95, 255, 0.2);
  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.15s ease;
}

.tcp-comparison-table .tcp-cta-button:hover {
  box-shadow: 0 4px 14px rgba(11, 95, 255, 0.35);
  transform: translateY(-1px);
}

/* Logo placeholder */
.tcp-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--tcp-bg-alt);
  border: 1px solid var(--tcp-border);
  flex-shrink: 0;
  color: var(--tcp-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}


/* =========================================================================
   3. REVIEW PAGE ENHANCEMENTS
   ========================================================================= */

/* At-a-glance box: gradient header bar */
.tcp-review-summary {
  overflow: hidden;
  position: relative;
  padding-top: calc(var(--tcp-space-6) + 4px);
}

.tcp-review-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tcp-primary), var(--tcp-primary-dark));
  border-radius: 8px 8px 0 0;
}

/* Score circle in summary — positioned top-right on desktop */
.tcp-review-summary .tcp-score-circle {
  position: absolute;
  top: var(--tcp-space-4);
  right: var(--tcp-space-4);
}

/* Pros: pill background per item */
.tcp-pros-list li,
.tcp-aag-pros li {
  background: rgba(0, 200, 150, 0.08);
  border-radius: 6px;
  padding: var(--tcp-space-2) var(--tcp-space-3);
  margin-bottom: var(--tcp-space-1);
}

/* Cons: pill background per item */
.tcp-cons-list li,
.tcp-aag-cons li {
  background: rgba(230, 57, 70, 0.06);
  border-radius: 6px;
  padding: var(--tcp-space-2) var(--tcp-space-3);
  margin-bottom: var(--tcp-space-1);
}

/* Speed data: color-coded cells — apply via class on <td> */
.tcp-speed-fast    { color: var(--tcp-accent); font-weight: 600; }
.tcp-speed-medium  { color: var(--tcp-warning); font-weight: 600; }
.tcp-speed-slow    { color: var(--tcp-danger); font-weight: 600; }

/* Status badges: pill style for streaming/feature tables */
.tcp-badge-yes {
  display: inline-block;
  background: rgba(0, 200, 150, 0.12);
  color: var(--tcp-accent);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
}

.tcp-badge-no {
  display: inline-block;
  background: rgba(230, 57, 70, 0.08);
  color: var(--tcp-danger);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
}

.tcp-badge-partial {
  display: inline-block;
  background: rgba(255, 159, 28, 0.1);
  color: var(--tcp-warning);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
}

/* Section H2: left accent border + hover tint */
.tcp-review-content h2,
.tcp-bestfor-content h2 {
  padding-left: var(--tcp-space-4);
  border-left: 4px solid var(--tcp-primary);
  transition: background 0.15s ease;
  border-radius: 0 4px 4px 0;
}

.tcp-review-content h2:hover,
.tcp-bestfor-content h2:hover {
  background: rgba(11, 95, 255, 0.03);
}

/* Override for FAQ/related H2 which shouldn't get double borders */
.tcp-faq-section h2,
.tcp-related-section h2 {
  border-left: none;
  padding-left: 0;
}


/* =========================================================================
   4. PILLAR PAGE ENHANCEMENTS
   ========================================================================= */

/* Quick-pick boxes: left colored strip + hover shadow */
.tcp-quick-pick {
  border-left: 4px solid var(--tcp-primary);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tcp-quick-pick:hover {
  box-shadow: 0 6px 20px rgba(26, 35, 50, 0.1);
  border-left-color: var(--tcp-accent);
}

.tcp-quick-pick--highlight {
  border-left-color: var(--tcp-accent);
}

/* Alternating product sections */
.tcp-product-section:nth-child(even) {
  background: var(--tcp-bg-alt);
  margin-left: calc(-1 * var(--tcp-space-4));
  margin-right: calc(-1 * var(--tcp-space-4));
  padding-left: var(--tcp-space-4);
  padding-right: var(--tcp-space-4);
  border-radius: 8px;
}

/* Methodology section: distinct background */
.tcp-methodology-section {
  background: var(--tcp-bg-alt);
  border-top: 1px solid var(--tcp-border);
  border-bottom: 1px solid var(--tcp-border);
  margin-left: calc(-1 * var(--tcp-space-4));
  margin-right: calc(-1 * var(--tcp-space-4));
  padding: var(--tcp-space-8) var(--tcp-space-4);
}


/* =========================================================================
   5. TYPOGRAPHY ENHANCEMENTS
   ========================================================================= */

/* H1: heavier weight + subtle shadow */
h1 {
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Key stat callout */
.tcp-stat-callout {
  text-align: center;
  padding: var(--tcp-space-4) var(--tcp-space-6);
}

.tcp-stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--tcp-primary);
  line-height: 1.1;
}

.tcp-stat-label {
  display: block;
  font-size: var(--tcp-fs-small);
  color: var(--tcp-text-muted);
  margin-top: var(--tcp-space-1);
}

/* "Last updated" badge */
.tcp-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tcp-space-2);
  background: var(--tcp-bg-alt);
  border: 1px solid var(--tcp-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--tcp-text-muted);
  font-weight: 500;
}

.tcp-updated-badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--tcp-text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='2' width='12' height='12' rx='2' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5 1v2M11 1v2M2 6h12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='2' width='12' height='12' rx='2' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M5 1v2M11 1v2M2 6h12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* =========================================================================
   6. TRUST STRIP (homepage)
   ========================================================================= */

.tcp-trust-icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 50%;
  background: var(--tcp-bg);
  border: 1px solid var(--tcp-border);
  box-shadow: 0 2px 8px rgba(26, 35, 50, 0.06);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tcp-trust-pillar:hover .tcp-trust-icon {
  border-color: var(--tcp-primary);
  color: var(--tcp-primary);
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.12);
}

/* Stat number above pillar */
.tcp-trust-stat {
  display: block;
  font-size: var(--tcp-fs-h3);
  font-weight: 800;
  color: var(--tcp-primary);
  margin-bottom: var(--tcp-space-2);
}


/* =========================================================================
   7. CATEGORY CARDS (homepage)
   ========================================================================= */

.tcp-category-card {
  position: relative;
  overflow: hidden;
}

.tcp-category-card--active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 95, 255, 0.03), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tcp-category-card--active:hover::after {
  opacity: 1;
}

/* Coming Soon badge: amber pill, top-right */
.tcp-coming-soon-badge {
  position: absolute;
  top: var(--tcp-space-3);
  right: var(--tcp-space-3);
  background: var(--tcp-warning);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}

/* Featured badge for active category */
.tcp-featured-badge {
  position: absolute;
  top: var(--tcp-space-3);
  right: var(--tcp-space-3);
  background: var(--tcp-accent);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}


/* =========================================================================
   8. SECTION VISUAL SEPARATION
   ========================================================================= */

/* Alternating section backgrounds — apply .tcp-section-stripe to alternate */
.tcp-section-stripe:nth-child(even) {
  background: var(--tcp-bg-alt);
}

/* First H2 top accent */
.tcp-content > h2:first-of-type,
.tcp-bestfor-content > h2:first-of-type,
.tcp-review-content > h2:first-of-type {
  border-top: 3px solid var(--tcp-primary);
  padding-top: var(--tcp-space-6);
}

/* Section padding increase */
.tcp-section {
  padding: var(--tcp-space-12) 0;
}

@media (min-width: 1024px) {
  .tcp-section {
    padding: 5rem 0;
  }

  .tcp-table-section,
  .tcp-categories-section,
  .tcp-latest-section,
  .tcp-trust-section,
  .tcp-newsletter-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}


/* =========================================================================
   9. BUTTONS GLOBAL UPGRADE
   ========================================================================= */

/* Primary CTA: gradient + shadow + arrow */
.tcp-cta-button {
  background: linear-gradient(135deg, var(--tcp-primary), var(--tcp-primary-dark));
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.25);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
  padding-right: calc(var(--tcp-space-6) + 18px);
}

.tcp-cta-button::after {
  content: "\2192";
  position: absolute;
  right: var(--tcp-space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tcp-cta-button:hover,
.tcp-cta-button:focus {
  box-shadow: 0 6px 20px rgba(11, 95, 255, 0.35);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: no-preference) {
  .tcp-cta-button:hover::after {
    transform: translateY(-50%) translateX(3px);
    opacity: 1;
  }
}

/* Secondary / outline buttons */
.tcp-cta-button.tcp-cta-secondary {
  background: transparent;
  box-shadow: none;
  border: 2px solid var(--tcp-primary);
  color: var(--tcp-primary);
  padding-right: calc(var(--tcp-space-6) + 18px);
}

.tcp-cta-button.tcp-cta-secondary::after {
  color: var(--tcp-primary);
}

.tcp-cta-button.tcp-cta-secondary:hover,
.tcp-cta-button.tcp-cta-secondary:focus {
  background: var(--tcp-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.25);
}

.tcp-cta-button.tcp-cta-secondary:hover::after {
  color: #FFFFFF;
}

/* Smaller table CTAs: reduce arrow spacing */
.tcp-comparison-table .tcp-cta-button {
  padding-right: calc(var(--tcp-space-4) + 14px);
}

.tcp-comparison-table .tcp-cta-button::after {
  right: var(--tcp-space-2);
  font-size: 0.875rem;
}


/* =========================================================================
   10. PICK CARD ENHANCEMENTS (best-for pages)
   ========================================================================= */

.tcp-pick-card {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  border-left: 4px solid var(--tcp-primary);
}

.tcp-pick-card:hover {
  box-shadow: 0 6px 24px rgba(26, 35, 50, 0.1);
  border-left-color: var(--tcp-accent);
}

/* First pick card (rank #1): accent border */
.tcp-pick-card:first-of-type {
  border-left-color: var(--tcp-accent);
  border-left-width: 4px;
}

/* Rank badge enhancement */
.tcp-pick-card-rank {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
  box-shadow: 0 2px 6px rgba(11, 95, 255, 0.2);
}


/* =========================================================================
   11. FAQ SECTION ENHANCEMENTS
   ========================================================================= */

.tcp-faq-item {
  transition: background 0.15s ease;
  border-radius: 6px;
  padding: var(--tcp-space-4) var(--tcp-space-3);
  margin: 0 calc(-1 * var(--tcp-space-3));
}

.tcp-faq-item:hover {
  background: rgba(11, 95, 255, 0.02);
}

.tcp-faq-item h3 {
  position: relative;
  padding-left: var(--tcp-space-6);
}

.tcp-faq-item h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--tcp-primary);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
}


/* =========================================================================
   12. AUTHOR BYLINE ENHANCEMENT
   ========================================================================= */

.tcp-author-avatar {
  box-shadow: 0 2px 8px rgba(26, 35, 50, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tcp-author-byline:hover .tcp-author-avatar {
  border-color: var(--tcp-primary);
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.12);
}


/* =========================================================================
   13. DISCLOSURE BOX ENHANCEMENT
   ========================================================================= */

.tcp-disclosure {
  border-radius: 0 6px 6px 0;
  position: relative;
  overflow: hidden;
}

.tcp-disclosure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tcp-primary), var(--tcp-accent));
  border-radius: 4px 0 0 4px;
}


/* =========================================================================
   14. TABLE SCROLL INDICATOR (mobile)
   ========================================================================= */

.tcp-comparison-table-wrapper,
.tcp-data-table-wrapper {
  position: relative;
}

.tcp-comparison-table-wrapper::after,
.tcp-data-table-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
  border-radius: 0 8px 8px 0;
}

@media (min-width: 768px) {
  .tcp-comparison-table-wrapper::after,
  .tcp-data-table-wrapper::after {
    display: none;
  }
}


/* =========================================================================
   15. VERDICT BOX ENHANCEMENT
   ========================================================================= */

.tcp-verdict-box {
  position: relative;
  overflow: hidden;
}

.tcp-verdict-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tcp-primary), var(--tcp-accent));
}


/* =========================================================================
   16. MOBILE RESPONSIVE ENHANCEMENTS
   ========================================================================= */

@media (max-width: 639px) {
  /* Score circle: center on mobile */
  .tcp-review-summary .tcp-score-circle {
    position: static;
    margin: 0 auto var(--tcp-space-4);
  }

  /* Pick cards: top accent instead of left */
  .tcp-pick-card {
    border-left: 1px solid var(--tcp-border);
    border-top: 4px solid var(--tcp-primary);
  }

  .tcp-pick-card:first-of-type {
    border-left: 1px solid var(--tcp-border);
    border-top-color: var(--tcp-accent);
  }

  .tcp-pick-card:hover {
    border-left-color: var(--tcp-border);
  }

  /* Quick-pick boxes: top strip instead of left */
  .tcp-quick-pick {
    border-left: 1px solid var(--tcp-border);
    border-top: 4px solid var(--tcp-primary);
  }

  .tcp-quick-pick--highlight {
    border-top-color: var(--tcp-accent);
  }

  /* Section padding mobile */
  .tcp-section {
    padding: var(--tcp-space-8) 0;
  }

  .tcp-table-section,
  .tcp-categories-section,
  .tcp-latest-section,
  .tcp-trust-section,
  .tcp-newsletter-section {
    padding-top: var(--tcp-space-8);
    padding-bottom: var(--tcp-space-8);
  }

  /* Button arrow: slightly less right padding on small screens */
  .tcp-cta-button {
    padding-right: calc(var(--tcp-space-4) + 16px);
    font-size: var(--tcp-fs-small);
  }

  .tcp-cta-button::after {
    right: var(--tcp-space-3);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .tcp-section {
    padding: var(--tcp-space-12) 0;
  }
}


/* =========================================================================
   17. REDUCED MOTION — disable all animations
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tcp-cta-button,
  .tcp-cta-button::after,
  .tcp-quick-pick,
  .tcp-pick-card,
  .tcp-category-card,
  .tcp-article-card,
  .tcp-trust-icon,
  .tcp-author-avatar,
  .tcp-comparison-table tbody tr,
  .tcp-faq-item,
  .tcp-review-content h2,
  .tcp-bestfor-content h2,
  .tcp-rating-bar-fill {
    transition: none;
    animation: none;
  }

  .tcp-best-pick-badge {
    animation: none;
  }

  .tcp-cta-button:hover {
    transform: none;
  }

  .tcp-category-card:hover,
  .tcp-article-card:hover {
    transform: none;
  }
}