/* FA-17 Diamond Club enrollment (board 46). [data-look="v2"] only. See
   frontend/js/clubEnrollmentV2.js for the JS half (relocating the existing
   v1 tier list/name field/notes/error/submit into the pane below — nothing
   here re-derives tier data or submit logic). With the switch OFF this file
   has no effect and #club-v1 renders exactly as it does today.

   .club-tier-card/.club-tier-name/.club-tier-benefits/.club-terms are v1's
   own classes (style.css) — themed here with --field-* tokens rather than
   the v1 --card/--border/--ok tokens, which aren't remapped for the v2
   palettes (unlike --surface-2/--line). */

[data-look="v2"] #scr-club > #club-v1 {
  display: none;
}

[data-look="v2"] .club-tier-card {
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  padding: var(--field-space-4);
  margin-bottom: var(--field-space-3);
}
[data-look="v2"] .club-tier-card.picked {
  border-color: var(--field-action-fill);
  background: var(--field-surface);
}
[data-look="v2"] .club-tier-card.picked .club-tier-name,
[data-look="v2"] .club-tier-card.picked .club-tier-benefits li,
[data-look="v2"] .club-tier-card.picked .club-terms {
  color: var(--field-text-primary);
}
[data-look="v2"] .club-tier-name {
  font: var(--field-text-card-heading);
  color: var(--field-text-primary);
  margin-bottom: 8px;
}
[data-look="v2"] .club-tier-benefits li {
  color: var(--field-text-secondary);
  font: var(--field-text-body);
}
[data-look="v2"] .club-tier-benefits li::before { color: var(--field-action-fill); }
[data-look="v2"] .club-terms { color: var(--field-text-secondary); font: var(--field-text-meta); }