/* ============================================================
   TeknikScout — comp-page.css
   GPU comparison page styles
   Load alongside ts-styles.css on all vs pages
   ============================================================ */

/* ── PRICE COMPARISON ROW ── */
.comp-price-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}

.comp-price-card {
  background: var(--color-background-secondary, #0d1424);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
}

.comp-card-a {
  border-color: rgba(0,200,232,0.25);
  background: rgba(0,200,232,0.04);
}

.comp-card-b {
  border-color: rgba(255,183,0,0.25);
  background: rgba(255,183,0,0.04);
}

.comp-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey, #8899aa);
  margin-bottom: 8px;
}

.comp-card-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--gold, #ffb700);
  line-height: 1;
  margin-bottom: 6px;
}

.comp-card-sub {
  font-size: 12px;
  color: var(--grey, #8899aa);
  opacity: 0.7;
}

.comp-vs {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,0.2);
  letter-spacing: 2px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .comp-price-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .comp-vs {
    text-align: center;
    padding: 4px 0;
  }
}

/* ── COMPARISON TABLE ── */
.comp-table thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 16px;
}

.comp-label {
  color: var(--grey, #8899aa);
  font-size: 13px;
  width: 38%;
}

.comp-val-a {
  color: var(--cyan, #00c8e8);
  font-weight: 600;
  font-size: 13px;
}

.comp-val-b {
  color: var(--gold, #ffb700);
  font-weight: 600;
  font-size: 13px;
}

/* Alternating row on comp table */
.comp-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* ── MARKET BUTTONS (reused from gpu-page.css pattern) ── */
.mkt-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 9px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.mkt-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.mkt-btn:active { transform: scale(0.97); }
.mkt-blocket { background: #e8002d; color: #fff; }
.mkt-tradera { background: #ffb700; color: #000; }
.mkt-swec    { background: #1a6fbf; color: #fff; }

/* ── VERDICT COLUMNS: neutral bullets, no ✓ or ✗ ── */
.ts-do ul li::before,
.ts-dont ul li::before {
  content: "·" !important;
  color: var(--grey, #8899aa) !important;
  font-size: 1.4em;
  line-height: 1;
}

/* VS page - New vs Begagnat differentiation */
.comp-new-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.comp-new-label.is-new {
  background: rgba(0,200,232,0.15);
  color: #00c8e8;
  border: 1px solid rgba(0,200,232,0.3);
}
.comp-new-label.is-used {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Smaller begagnat buttons */
.mkt-btn-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px;
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 5px;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.mkt-btn-sm:hover { opacity: 1; }
.mkt-btn-sm.mkt-blocket { background: #e8002d; color: #fff; }
.mkt-btn-sm.mkt-tradera { background: #ffb700; color: #000; }
.mkt-btn-sm.mkt-swec    { background: #1a6fbf; color: #fff; }

/* Bigger new retail buttons */
.mkt-btn-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 8px;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mkt-btn-lg:hover { opacity: 0.9; transform: translateY(-1px); }
.mkt-btn-lg.mkt-inet { background: linear-gradient(135deg, #0077cc, #0099ff); color: #fff; }
.mkt-btn-lg.mkt-blocket { background: #e8002d; color: #fff; }
.mkt-btn-lg.mkt-tradera { background: #ffb700; color: #000; }
.mkt-btn-lg.mkt-swec { background: #1a6fbf; color: #fff; }