/* ==========================================================================
   IRSML — configuratore-gratis-o-a-pagamento.css
   Stili specifici della guida ai piani (gratis vs a pagamento)
   ========================================================================== */

/* Toggle di fatturazione (CSS-only, senza JavaScript) --------------------- */
.pricing-switch { width: max-content; margin-bottom: var(--s-lg); }
#fatt-mensile:checked ~ .pricing-switch label[for="fatt-mensile"],
#fatt-annuale:checked ~ .pricing-switch label[for="fatt-annuale"] {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pricing-radio:focus-visible ~ .pricing-switch label { box-shadow: 0 0 0 2px var(--accent-blue); }

.price-annuale { display: none; }
#fatt-annuale:checked ~ .pricing-grid .price-mensile { display: none; }
#fatt-annuale:checked ~ .pricing-grid .price-annuale { display: inline; }

/* Checklist funzioni ------------------------------------------------------ */
.checklist-grid .card {
  position: relative;
  padding-left: var(--s-lg);
  border-left: 2px solid var(--hairline);
}
.checklist-grid .card h3 { color: var(--ink); }
.checklist-grid .card p { font-size: 14px; }

/* Segnali "quando passare a Pro" ------------------------------------------ */
.signals { display: block; max-width: var(--measure); }
.signals > li { padding-left: 52px; margin-bottom: var(--s-xl); }
.signals > li::before { position: absolute; }
.signals > li:last-child { margin-bottom: 0; }

/* Tabella lunga: prima colonna fissa in larghezza -------------------------- */
#confronto .table-wrap table { min-width: 640px; }
#confronto .table-wrap th:first-child { width: 34%; }

@media (max-width: 640px) {
  .signals > li { padding-left: 46px; }
}