/* assets/products-upgrades.css */

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 10000;
}
.skip-link:focus { left: 10px; }

/* Page polish */
.page-header .lead { margin-top: 24px; }
.affiliate-disclaimer {
  border-left: 3px solid rgba(70,99,172,.25);
  padding-left: 10px;
  margin: 24px 0 12px;
}

/* Mini TOC */
.mini-toc {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}
.mini-toc a {
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(70,99,172,.18);
  background: rgba(70,99,172,.06);
  padding: 8px 10px;
  border-radius: 999px;
}

/* Filter bar */

.filter-bar {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 12px;
  align-items: end;
}
.filter-field input,
.filter-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(70,99,172,.18);
  background: rgba(70,99,172,.04);
  color: inherit;
}
.filter-actions { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .filter-bar { grid-template-columns: 1fr; }
  .filter-actions { justify-content: stretch; }
}

/* Table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: 12px 10px;
  border: 1px solid rgba(70,99,172,.15);
  text-align: left;
  vertical-align: top;
}
.compare-table th { background: rgba(70,99,172,.05); }
.btn.btn-sm { padding: 8px 10px; font-size: 14px; }

/* Product card upgrades */
.p-card.upgraded .p-title {
  margin: 10px 0 0;
  font-size: 18px;
}
.rank-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(124, 92, 255, .18);
  border: 1px solid rgba(124, 92, 255, .35);
  margin-bottom: 10px;
}

.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 6px;
}

.pros {
  margin: 16px 0 0;
  padding-left: 18px;
}
.pros li { margin: 10px 0; }

/* Methodology checklist */
.checklist {
  margin: 0;
  padding-left: 18px;
}
.checklist li { margin: 12px 0; }

/* FAQ */
.faq details {
  border: 1px solid rgba(70,99,172,.15);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 16px 0;
  background: rgba(70,99,172,.05);
}
.faq summary { cursor: pointer; font-weight: 700; }

/* Sticky bar */
.sticky-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  z-index: 800; /* ✅ lower than header/dropdowns */
  transition: transform .25s ease, opacity .25s ease;
}
.sticky-bar.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
.sticky-bar a {
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
}
.sticky-bar .sticky-cta {
  border-color: rgba(124, 92, 255, .55);
  background: rgba(124, 92, 255, .18);
  font-weight: 600;
}