/* ==========================================================================
   Template condiviso dei moduli soci (ordinari e partner).
   Si carica DOPO hompage.css, da cui eredita i token (--primary, --radius…).

   Principi:
   - una sola superficie con ombra: .mod-foglio
   - il bordo indica che si puo' scegliere: solo .mod-scelta e .mod-conferma
   - un solo raggio: --radius
   - un solo accento per volta
   ========================================================================== */

:root {
  /* Unico colore d'attenzione: sostituisce i colori scritti a mano
     nella vecchia sezione statuto. */
  --attenzione: #b45309;
  --attenzione-bg: #fffbeb;
  --attenzione-bordo: #fcd34d;
}

/* --- Superficie -------------------------------------------------------- */

.mod-foglio {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  /* 2.5rem sopra: il foglio segue il riquadro informativo dei benefici e con
     1.5rem i due box restavano troppo vicini. */
  margin: 2.5rem auto 1.5rem;
}

.mod-testata {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.mod-testata img {
  height: 48px;
  display: block;
  margin-bottom: 0.85rem;
}

.mod-titolo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.mod-sottotitolo {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

/* --- Sezioni: separate da spazio e tipografia, mai da un bordo ---------- */

.mod-sezione {
  margin-top: 1.75rem;
  /* Serve anche sotto: dopo l'ultima sezione tornano dei campi liberi
     (.mod-campo), che hanno solo margine inferiore e senza questo
     resterebbero attaccati alla sezione precedente. Fra due sezioni
     consecutive i margini si fondono e la distanza non raddoppia. */
  margin-bottom: 1.75rem;
  border: 0;      /* azzera il bordo di <fieldset> */
  padding: 0;
  min-width: 0;   /* evita che <fieldset> imponga la larghezza del contenuto */
}

/* :first-child, non :first-of-type. Nei due moduli il form comincia con dei
   campi liberi e solo dopo arrivano le sezioni: con :first-of-type la prima
   sezione avrebbe perso il margine e sarebbe rimasta appiccicata all'ultimo
   campo. Cosi' il margine si azzera solo se la sezione apre davvero il form. */
.mod-sezione:first-child {
  margin-top: 0;
}

.mod-sezione-titolo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.85rem;
  padding: 0;   /* azzera il padding di <legend> */
}

/* --- Campi ------------------------------------------------------------- */

.mod-campo {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;
}

.mod-campo label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.mod-campo input,
.mod-campo select,
.mod-campo textarea {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;   /* sotto 16px iOS ingrandisce la pagina da solo */
  font-family: inherit;
  background: var(--light);
  width: 100%;
}

.mod-campo input:focus,
.mod-campo select:focus,
.mod-campo textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  background: var(--white);
}

/* Due campi affiancati solo da tablet in su */
.mod-riga {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 768px) {
  .mod-riga {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Prezzo ------------------------------------------------------------ */

.mod-prezzo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.mod-prezzo .voce {
  font-size: 0.9rem;
  color: var(--text-light);
}

.mod-prezzo .cifra {
  font-size: 1.5rem;
  font-weight: 800;
}

/* --- Scelta di pagamento ----------------------------------------------- */

.mod-scelta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  min-height: 56px;
  font: inherit;
  cursor: pointer;
}

.mod-scelta:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Lo stato attivo segue il radio nativo: nessun JS in piu'.
   :has() richiede Safari 15.4+ / Chrome 105+. Su browser piu' vecchi la
   card non si evidenzia, ma il pallino del radio resta visibile: si perde
   la rifinitura, non la funzione. */
.mod-scelta:has(input:checked) {
  border-color: var(--primary);
  background: #f5fbff;
  box-shadow: 0 0 0 1px var(--primary);
}

.mod-scelta input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--primary);
}

.mod-scelta .testo {
  flex: 1;
  min-width: 0;
}

.mod-scelta .testo b {
  display: block;
  font-size: 0.95rem;
}

.mod-scelta .testo span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Pannello con i dettagli della modalita' scelta.
   display:none iniziale: lo apre il JS gia' esistente. */
.mod-pannello {
  display: none;
  margin: 0 0 0.6rem;
}

/* --- Azioni ------------------------------------------------------------ */

.mod-azione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--primary);
  color: var(--white);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  min-height: 48px;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.mod-azione:hover {
  background: var(--primary-dark);
}

.mod-azione--secondaria {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.mod-azione--secondaria:hover {
  background: var(--light);
  color: var(--primary-dark);
}

/* --- Dati bancari ------------------------------------------------------ */

.mod-dati {
  list-style: none;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}

.mod-dati li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.mod-dati li:last-child {
  border-bottom: 0;
}

.mod-dati .k {
  color: var(--text-light);
  flex: none;
}

.mod-dati .v {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* --- Avvisi ------------------------------------------------------------ */

.mod-avviso {
  display: flex;
  gap: 0.6rem;
  background: var(--info-bg, #eff6ff);
  border-radius: var(--radius);
  padding: 0.9rem;
  font-size: 0.9rem;
  color: var(--text-medium, #334155);
  margin-top: 1rem;
}

.mod-avviso i {
  color: var(--primary);
  margin-top: 0.2em;
  flex: none;
}

/* --- Sezione statuto --------------------------------------------------- */

/* Unico elemento colorato della sezione. */
.mod-scadenza {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--attenzione-bg);
  border: 1px solid var(--attenzione-bordo);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 1.25rem;
}

.mod-scadenza i {
  color: var(--attenzione);
  margin-top: 0.15em;
  flex: none;
}

.mod-scadenza b {
  color: var(--attenzione);
  display: block;
  font-size: 0.95rem;
}

.mod-scadenza span {
  font-size: 0.9rem;
  color: var(--text-medium, #334155);
}

.mod-passi {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.mod-passo {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.mod-passo .num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.mod-passo .etich {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 0.1rem;
}

.mod-passo .valore {
  font-weight: 600;
  font-size: 0.95rem;
  word-break: break-word;
}

.mod-passo .valore a {
  color: var(--primary);
  text-decoration: none;
}

.mod-passo .valore a:hover {
  text-decoration: underline;
}

.mod-oggetto {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  display: inline-block;
  margin-top: 0.15rem;
  font-weight: 400;
}

.mod-conseguenza {
  font-size: 0.875rem;
  color: var(--text-light);
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1rem;
}

.mod-conseguenza strong {
  color: var(--text-medium, #334155);
}

/* Nota di servizio sotto un'azione: come .mod-conseguenza ma senza
   separatore, perche' non chiude una sezione. */
.mod-nota {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-top: 0.6rem;
}

/* --- Conferme e consensi ----------------------------------------------- */

/* L'area toccabile comprende il testo, non solo il quadratino. */
.mod-conferma {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
  cursor: pointer;
  min-height: 44px;
  background: var(--light);
  margin-bottom: 0.6rem;
}

.mod-conferma:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.mod-conferma input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--primary);
}

/* Il <label> compare al posto dello <span> quando il testo contiene un link:
   in quel caso il label resta separato con for=, altrimenti toccare il link
   spunterebbe la casella. Le due varianti devono apparire identiche. */
.mod-conferma span,
.mod-conferma > label {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}

.mod-conferma a {
  color: var(--primary);
  font-weight: 600;
}

/* --- Utilita' ----------------------------------------------------------- */

/* Il JS del modulo partner aggiunge e toglie .hidden al campo «Altro
   (specificare)». Serve !important perche' altrimenti perderebbe contro
   .mod-campo { display: flex }: stessa specificita', e vince chi viene dopo
   nell'ordine dei fogli. Cosi' la regola non dipende dall'ordine. */
.hidden {
  display: none !important;
}

/* --- Larghezza di lettura su schermi ampi ------------------------------- */

@media (min-width: 768px) {
  .mod-foglio {
    padding: 2rem;
    max-width: 52rem;
  }

  .mod-titolo {
    font-size: 1.6rem;
  }

  /* Su desktop space-between spingeva "Quota annuale" e la cifra ai due
     bordi del foglio, lasciando in mezzo un vuoto largo mezzo schermo.
     Affiancati si leggono come una cosa sola; la linea sotto resta piena
     perche' e' il separatore della sezione. */
  .mod-prezzo {
    justify-content: flex-start;
    gap: 1.25rem;
  }
}