/* ============================================================================ the gym's rules at the door
   (viste/app/regole.php): one choice per rule as two cards, the title and what it means; then how two subscriptions
   of the same member are used. Prefix rg-. */
.gx .rg-regole { max-width: 760px }
.gx .rg-regole + .rg-regole { margin-top: 16px }
.gx .rg-scelte { border: 0; margin: 0; padding: 0; display: grid; gap: 10px }
.gx .rg-scelte legend { padding: 0; margin-bottom: 6px }
.gx .rg-scelte legend h2 { margin: 0 }
.gx .rg-scelta { position: relative; margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid #d5d8e0;
  border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s }
.gx .rg-scelta input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--brand-primary); flex: none }
.gx .rg-scelta span { display: grid; gap: 2px }
.gx .rg-scelta b { font-weight: 700 }
.gx .rg-scelta small { color: var(--ink-2); font-size: 14px; font-weight: 400; line-height: 1.4 }
.gx .rg-scelta:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft) }
.gx .rg-scelta:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 2px }
.gx .rg-ordine { margin: 10px 0; padding-left: 22px; display: grid; gap: 4px; line-height: 1.45 }