/* ═══════════════════════════════════════════════
   ScoreCaster v4 — Plans & Pricing
   Uses the shared design tokens from app.css
   ═══════════════════════════════════════════════ */

.plans-page { padding: 1.75rem 0 3.5rem; }

/* ── View switch ────────────────────────────────────
   Two radio inputs at the top of .container are the
   real state; the pills and the "Compare features"
   button are their labels. Everything below is driven
   by sibling selectors, so the switch works with
   JavaScript disabled. The inputs themselves are
   visually hidden but NOT display:none, so they stay
   keyboard-focusable. */
.plans-view-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#plans-view-cards:checked ~ .plans-view-table,
#plans-view-table:checked ~ .plans-view-cards { display: none; }
#plans-view-cards:checked ~ .plans-view-cards ~ .plans-compare-cta { display: none; }

/* ── Hero ───────────────────────────────────────────────
   Only the view switcher and the sign-in CTA remain here; the
   headline and stat strip were removed to keep the plans and
   their prices as the first thing on the page. */
.plans-hero { text-align: center; margin: 0 auto 2rem; }

/* ── Segmented pill switch ───────────────────────────── */
.plans-pills {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.plans-pill {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.plans-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--primary-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition) var(--easing-smooth);
  z-index: -1;
}
.plans-pill:hover { color: var(--text); }
.plans-pill:hover::before { transform: scaleX(1); color: #fff; }

/* The active pill is whichever radio is checked. Both
   radios precede .plans-hero, hence the sibling chain. */
#plans-view-cards:checked ~ .plans-hero .plans-pill[for="plans-view-cards"],
#plans-view-table:checked ~ .plans-hero .plans-pill[for="plans-view-table"] {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Keyboard focus ring on the hidden radio, surfaced on its pill. */
#plans-view-cards:focus-visible ~ .plans-hero .plans-pill[for="plans-view-cards"],
#plans-view-table:focus-visible ~ .plans-hero .plans-pill[for="plans-view-table"] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.plans-header-cta { margin-top: 1.25rem; }

/* ── Current plan banner ─────────────────────────── */
.plans-current-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.8rem 1.15rem; margin-bottom: 1.15rem;
  border: 1px solid var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-md);
}
.plans-current-label {
  font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--primary); font-weight: 700; margin-right: 0.5rem;
}
.plans-current-meta { color: var(--text-muted); font-size: 0.85rem; }

/* ── Comparison table ────────────────────────────── */
.plans-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
}
.plans-table {
  width: 100%; border-collapse: collapse; min-width: 720px;
}
.plans-table th,
.plans-table td {
  padding: 0.8rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
}
.plans-table thead th {
  background: var(--slate-grad);
  color: #fff;
  border-bottom: none;
  vertical-align: bottom;
}
.plans-table th.plans-feature-col,
.plans-table td.plans-feature-col {
  text-align: left; font-weight: 600; min-width: 180px;
}
.plans-table thead th.plans-feature-col { color: #fff; }
.plans-table tbody tr:hover td { background: var(--card-hover); }
.plans-table tfoot td { border-bottom: none; padding-top: 1.1rem; padding-bottom: 1.25rem; }

/* Plan name/price/tags live inside the dark slate <thead>, so they must
   override the body-text colors set further down. */
.plans-table thead .plans-plan-name { color: #fff; }
.plans-table thead .plans-plan-price { color: var(--brand-green); }
.plans-table thead .plans-plan-tag.current {
  background: var(--primary-grad); color: #fff;
}
.plans-table thead .plans-plan-tag.pending {
  background: rgba(255, 193, 7, 0.18); color: #ffd54a;
  border: 1px solid rgba(255, 213, 74, 0.45);
}

.plans-plan-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
.plans-plan-price { color: var(--primary); font-weight: 700; font-size: 1rem; }
.plans-table thead th.is-current { box-shadow: inset 0 3px 0 var(--brand-green); }

.plans-plan-tag {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.8px; text-transform: uppercase;
  font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 999px;
}
.plans-plan-tag.current { background: var(--primary-grad); color: #fff; }
.plans-plan-tag.pending {
  background: rgba(255,215,0,0.15); color: #ffd700;
  border: 1px solid rgba(255,215,0,0.4);
}

/* ── Cells ───────────────────────────────────────── */
.plans-cell { color: var(--text-muted); }
.plans-tick {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--success);
}
.plans-cross { color: var(--text-muted); opacity: 0.5; }

.plans-cta { width: 100%; max-width: 220px; }
.plans-cta:disabled { opacity: 0.65; cursor: default; }

/* ── Plan cards ─────────────────────────────────────
   The primary view. A responsive grid (1 / 2 / 4 columns)
   that replaces the old table-first layout, so no
   horizontal scrolling is ever needed on a phone. */
.plans-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.75rem;
}

.plans-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.plans-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition) var(--easing-smooth);
}
.plans-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}
.plans-tile:hover::before { transform: scaleX(1); }
.plans-tile.is-current { border-color: var(--primary); }

/* No card is singled out any more: same frame, same weight, same hover. */

.plans-tile-head { margin-bottom: 1rem; }
.plans-tile-name { font-size: 1.15rem; font-weight: 700; }
.plans-tile-tagline {
  margin-top: 0.25rem;
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Price block ─────────────────────────────────── */
.plans-tile-price {
  display: flex;
  align-items: baseline;
  /* The struck-through price and the percent-off pill make this row wider
     than a single price; on a narrow card they wrap rather than overflow. */
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
  margin-bottom: 0.15rem;
}
.plans-tile-amount {
  font-family: var(--font-heading);
  font-size: 2.25rem; font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.plans-tile-period {
  font-size: 0.875rem;
  color: var(--text-muted);
}
/* Struck-through "was" price, sat to the left of the real one. Muted and
   smaller so the price being charged stays the loudest thing in the row. */
.plans-tile-was {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}
/* Percent-off pill, on the price baseline at the end of the row. */
.plans-tile-save {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.15rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #e7f7ee;
  color: #0a7a2f;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.plans-tile-saving {
  font-size: 0.735rem;
  font-weight: 600;
  color: #0a7a2f;
  margin-bottom: 0.2rem;
}
.plans-tile-price-label {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

/* ── Card CTA ────────────────────────────────────── */
.plans-tile-cta { margin-bottom: 0.5rem; }
.plans-tile-btn { width: 100%; }
.plans-tile-btn.is-primary {
  background: var(--primary-grad);
  color: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(13, 110, 47, 0.08);
}
.plans-tile-btn.is-primary:hover {
  background: var(--primary-grad-hover);
  color: #fff;
  box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(-2px);
}
.plans-tile-btn.is-primary:active { transform: translateY(0); }
.plans-tile-btn.is-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.plans-tile-btn.is-outline:hover:not(:disabled) {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--text);
}
.plans-tile-btn:disabled { opacity: 0.6; cursor: default; }

.plans-tile-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* ── Included features ───────────────────────────── */
.plans-tile-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.plans-tile-list li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  transition: color var(--transition);
}
.plans-tile-list li:hover { color: var(--primary); }
.plans-tile-list svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--success);
  transition: transform var(--transition);
}
.plans-tile-list li:hover svg { transform: scale(1.15); }

.plans-tile-subhead {
  font-size: 0.775rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}

/* ── Spec list (quota, ads, themes, support) ─────── */
.plans-tile-specs { margin: 0 0 1rem; }
.plans-tile-spec {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
}
.plans-tile-spec dt { color: var(--text-muted); }
.plans-tile-spec dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

/* ── Status badge on a card ──────────────────────── */
.plans-tile-badge {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.plans-tile-badge.current { background: var(--primary-grad); color: #fff; }
.plans-tile-badge.pending {
  background: rgba(255, 215, 0, 0.15);
  color: #b8860b;
  border: 1px solid rgba(255, 215, 0, 0.4);
}
[data-theme="dark"] .plans-tile-badge.pending {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
}

/* ── Compare features button ────────────────────── */
.plans-compare-cta {
  display: flex; justify-content: center;
  margin-bottom: 2rem;
}
.plans-compare-btn {
  cursor: pointer;
  border: 1px solid var(--border);
  font-weight: 600;
  transition: all var(--transition);
}
.plans-compare-btn:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--text);
}

.plans-footnote {
  margin-top: 1.5rem; text-align: center;
  color: var(--text-muted); font-size: 0.85rem;
}

@media (max-width: 720px) {
  .plans-tile-amount { font-size: 2rem; }

  /* Two pills at 1.25rem side padding are wider than a 320px screen, so the
     labels wrapped onto two lines. Tighten them instead of shrinking type. */
  .plans-pills { padding: 0.2rem; }
  .plans-pill { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

  /* The compare table is wider than a phone on purpose, but without a pinned
     first column the feature name scrolls away with the plans and the reader
     loses the row. Pin "Features" to the left edge and give the plans the
     rest of the screen. */
  .plans-table { min-width: 560px; }
  .plans-table th,
  .plans-table td { padding: 0.65rem 0.6rem; font-size: 0.85rem; }
  .plans-table th.plans-feature-col,
  .plans-table td.plans-feature-col {
    min-width: 8.5rem; max-width: 9rem;
    position: sticky; left: 0; z-index: 1;
    background: var(--card);
    box-shadow: 1px 0 0 var(--border-light);
  }
  .plans-table thead th.plans-feature-col { background: var(--slate-grad); }
  .plans-table tbody tr:hover td.plans-feature-col { background: var(--card-hover); }
}