/* ============================================================
   Compare Page — Page-scoped styles
   Loaded via @push('styles') in compare.blade.php
   All generic utilities live in ipshield.css; only
   compare-specific rules belong here.
   ============================================================ */

/* ---------- Hero ---------- */
.cmp-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border-bottom: 1px solid var(--ip-border);
}
.cmp-hero-title { font-size: clamp(2rem, 5vw, 3rem); }
.cmp-hero-subtitle { max-width: 600px; margin: 0 auto; }

/* ---------- Feature card accent tops ---------- */
.feature-card--danger  { border-top: 3px solid var(--ip-danger); }
.feature-card--primary { border-top: 3px solid var(--ip-primary); }
.feature-card--success { border-top: 3px solid var(--ip-success); }

/* ---------- Icon circles ----------
   Usage: <div class="size-md circle-full icon-circle-danger d-flex align-items-center justify-content-center">
   (size-md / size-lg + circle-full come from ipshield.css) */
.icon-circle-danger  { background: #fef2f2; }
.icon-circle-primary { background: #eff6ff; }
.icon-circle-success { background: #ecfdf5; }
.icon-circle-warning { background: #fffbeb; }

/* ---------- Icon size gap (ipshield.css stops at icon-md=22px, icon-lg=28px) ---------- */
.icon-24 { font-size: 24px; }

/* ---------- Comparison table ---------- */
.cmp-table { font-size: .875rem; }

.cmp-thead-row { background: #f8fafc; }

.cmp-th-feature {
  width: 35%;
  border-bottom: 2px solid var(--ip-border);
}
.cmp-th-ours {
  color: var(--ip-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--ip-primary);
  background: #eff6ff;
}
.cmp-th-comp {
  border-bottom: 2px solid var(--ip-border);
}

/* Exclusive rows (chargeback DB, AI scoring, CPA fraud) */
.cmp-row-exclusive { background: #fffbeb; }

/* "Our Platform" data column tint */
.cmp-col-ours { background: #f8fbff; }
.cmp-row-exclusive .cmp-col-ours { background: #eff6ff; }

/* Partial / neutral check icon */
.text-neutral { color: #94a3b8; }

/* ---------- "Beyond VPN Detection" section ---------- */
.cmp-section-subtitle { max-width: 620px; margin: 0 auto; }

.cmp-card-verdict--danger {
  font-size: .8125rem;
  color: var(--ip-danger);
  font-weight: 600;
  margin: 1.25rem 0 0;
}
.cmp-card-verdict--success {
  font-size: .8125rem;
  color: var(--ip-success);
  font-weight: 600;
  margin: 1.25rem 0 0;
}

/* ---------- Reinforcement callout strip ---------- */
.cmp-layer-callout {
  background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 50%, #ecfdf5 100%);
  border: 1px solid var(--ip-border);
}

/* ---------- CTA ---------- */
.cmp-cta {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 2px solid var(--ip-border);
}