/* ============================================================
   ProposalFlowLab — Compare Page Styles
   ============================================================ */

/* --- Compare Hero Header --- */
.compare-header {
  margin-bottom: var(--space-8);
}
.compare-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.compare-hero-tool {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.compare-tool-name {
  font-size: var(--font-size-xl);
  font-weight: 800;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
}
.vs-circle {
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  flex-shrink: 0;
}
.compare-h1 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: var(--space-4);
}

/* --- Quick Verdict (top of compare page) --- */
.compare-quick-verdict {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.compare-quick-verdict h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}
.quick-verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.qv-card {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
}
.qv-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.qv-tool {
  font-size: var(--font-size-xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.qv-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

/* --- Two-column Pricing --- */
.two-col-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}
.two-col-pricing-card {
  border: 2px solid;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.two-col-pricing-header {
  color: white;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--font-size-base);
}
.tcp-logo {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.25);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-size-sm);
}
.tcp-body { padding: var(--space-3) var(--space-4); }
.tcp-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tcp-plan:last-child { border-bottom: none; }
.tcp-plan.featured { background: var(--color-accent-light); border-radius: var(--border-radius-sm); padding: var(--space-2) var(--space-2); margin: var(--space-1) 0; }
.tcp-plan-name { font-size: var(--font-size-sm); font-weight: 600; }
.tcp-plan-price { font-size: var(--font-size-base); font-weight: 700; color: var(--color-primary); }
.tcp-plan-price small { font-weight: 400; color: var(--color-muted); font-size: 0.75em; }
.tcp-plan-note { font-size: var(--font-size-xs); color: var(--color-muted); width: 100%; }

/* --- Feature Compare Block --- */
.feature-compare-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.fcb-col {
  border-radius: var(--border-radius-md);
  padding: var(--space-4);
}
.pandadoc-col {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
}
.bp-col {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
}
.fcb-col h4 { font-size: var(--font-size-base); margin-bottom: var(--space-3); }
.fcb-col ul { padding-left: var(--space-5); margin: 0; }
.fcb-col li { font-size: var(--font-size-sm); margin-bottom: var(--space-2); line-height: 1.5; }
.winner-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px var(--space-2);
  border-radius: var(--border-radius-sm);
  margin-top: var(--space-3);
}
.pandadoc-winner { background: #DCFCE7; color: #166534; }
.bp-winner       { background: #FED7AA; color: #92400E; }
.loser-label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: var(--space-3);
  font-style: italic;
}

/* --- Final Verdict Compare --- */
.final-verdict-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.fvc-card {
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.fvc-header {
  color: white;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
}
.fvc-logo {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.25);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-size-sm);
  color: white;
}
.fvc-card ul {
  list-style: none;
  padding: var(--space-4);
  margin: 0;
}
.fvc-card li {
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fvc-card li::before {
  content: '✔';
  color: #16A34A;
  font-weight: 700;
  flex-shrink: 0;
}
.fvc-card li:last-child { border-bottom: none; }
.fvc-card .btn { margin: 0 var(--space-4) var(--space-4); }

/* --- Proposify column color --- */
.proposify-col {
  background: #F5F3FF;
  border: 1px solid #C4B5FD;
}
.proposify-winner { background: #EDE9FE; color: #5B21B6; }

/* --- Who Box (choose / don't choose) --- */
.who-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.who-col {
  border-radius: var(--border-radius-md);
  padding: var(--space-4);
}
.who-yes {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
}
.who-no {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
}
.who-col h4 { font-size: var(--font-size-sm); font-weight: 700; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.who-yes h4 { color: #166534; }
.who-no  h4 { color: #9F1239; }
.who-col ul { padding-left: var(--space-4); margin: 0; }
.who-col li { font-size: var(--font-size-sm); line-height: 1.6; margin-bottom: var(--space-2); }

/* --- Compare Score Summary --- */
.compare-score-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  flex-wrap: wrap;
}
.css-card {
  text-align: center;
  flex: 1;
  min-width: 160px;
  border: 2px solid;
  border-radius: var(--border-radius-lg);
  padding: var(--space-5);
  background: var(--color-white);
}
.css-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-sm);
  background: #3DC96C;
  color: white;
  font-weight: 800;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.css-name  { font-weight: 700; font-size: var(--font-size-base); margin-bottom: var(--space-1); }
.css-score { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1.1; }
.css-score small { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-muted); }
.css-wins  { font-size: var(--font-size-xs); font-weight: 700; margin-top: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; }
.css-sub   { font-size: var(--font-size-xs); color: var(--color-muted); margin-top: var(--space-1); }
.css-divider { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-muted); }

/* --- FVC body padding fix --- */
.fvc-body { padding-bottom: var(--space-2); }

/* --- Related Links Grid --- */
.related-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.related-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: all var(--transition);
}
.related-link-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.rlc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: white;
  background: var(--color-accent);
  flex-shrink: 0;
}
.rlc-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); }
.rlc-sub   { font-size: var(--font-size-xs); color: var(--color-muted); }

/* --- Sidebar tool links --- */
.sidebar-tool-links { margin-top: var(--space-5); }
.sidebar-tool-links h4 { font-size: var(--font-size-sm); font-weight: 700; margin-bottom: var(--space-3); }
.sidebar-tool-links ul { list-style: none; padding: 0; margin: 0; }
.sidebar-tool-links li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.sidebar-tool-links li:last-child { border-bottom: none; }
.sidebar-tool-links a { font-size: var(--font-size-sm); color: var(--color-accent); text-decoration: none; display: flex; align-items: center; gap: var(--space-2); }
.sidebar-tool-links a:hover { text-decoration: underline; }

/* --- Qwilr column color --- */
.qwilr-col {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}
.qwilr-winner { background: #DBEAFE; color: #1D4ED8; }

/* --- Better Proposals winner label (bp-winner already exists; add standalone) --- */
.bp-standalone-winner { background: #FFEDD5; color: #9A3412; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .related-links-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .quick-verdict-grid { grid-template-columns: 1fr; }
  .two-col-pricing { grid-template-columns: 1fr; }
  .feature-compare-block { grid-template-columns: 1fr; }
  .final-verdict-compare { grid-template-columns: 1fr; }
  .compare-hero-badges { gap: var(--space-3); }
  .who-box { grid-template-columns: 1fr; }
  .compare-score-summary { flex-direction: column; }
  .related-links-grid { grid-template-columns: 1fr; }
}