/* ============================================================================
   adesioni.css — la pagina «Adesioni e rinnovi». Si carica dopo base.css

   La prima parte sono le regole del disegno approvato (base-25), copiate
   com'erano. Unico cambio: .elenco e' diventato .ad-vantaggi, perche' quel
   nome e' gia' della sezione dell'elenco calzolerie.

   La seconda parte e' il modulo, che il disegno non aveva: fatto con i
   colori, i raggi e le distanze che il disegno usa gia'.
   ============================================================================ */

/* ---------------- adesioni — dal disegno ---------------- */
.adesioni{padding:5.5rem 0}
.ad-griglia{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem;align-items:start}
.prezzo{display:flex;align-items:baseline;gap:.6rem}
.prezzo b{font-family:var(--display);font-size:3rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.prezzo span{color:var(--grigio);font-size:.95rem}
.ad-vantaggi{list-style:none;margin:1.8rem 0 2.2rem;padding:0;display:grid;gap:.7rem}
.ad-vantaggi li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem}
.ad-vantaggi li::before{content:"";flex:none;margin-top:.42rem;width:16px;height:16px;border-radius:50%;
  background:rgba(0,164,78,.14);box-shadow:inset 0 0 0 4px var(--verde)}
.misura{max-width:36rem}
.rinnovo{background:var(--nebbia);border:1px solid var(--filo);border-radius:var(--r);padding:1.7rem}
.rinnovo h3{font-size:1.15rem;margin-bottom:.3rem}
.rinnovo .gia{font-size:.9rem;color:var(--grigio);margin-bottom:1.2rem}
.rinnovo dt{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio);margin-top:1rem}
.rinnovo dd{margin:.15rem 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.87rem;
  overflow-wrap:anywhere}
@media(max-width:900px){.ad-griglia{grid-template-columns:1fr;gap:2.2rem}}

/* ---------------- quello che il disegno non aveva ---------------- */
.adesioni{padding:3.5rem 0}           /* sotto la banda della pagina, meno aria che in home */
.ad-prima-volta{margin:-.8rem 0 1.6rem;font-size:.92rem}
.ad-prima-volta b{color:var(--ink)}

/* i due portali, sotto l'IBAN: stesso riquadro, un filo a separarli */
.ad-portali{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--filo)}
.ad-portali .gia{margin-bottom:.8rem}
.ad-portali .bottone{width:100%;margin-bottom:.6rem}
.ad-nota{font-size:.8rem;color:var(--grigio);line-height:1.5;margin-top:.2rem}

/* --- l'esito, dopo l'invio --- */
.ad-esito{padding:0 0 2rem}
.ad-fatto{display:flex;gap:1rem;align-items:flex-start;background:#E8F6EE;border:1px solid #9FD9BA;
  border-radius:var(--r);padding:1.4rem 1.6rem;color:#0B3D22}
.ad-fatto .segno{flex:none;width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.ad-fatto h2{font-size:1.3rem;margin-bottom:.5rem}
.ad-fatto p{margin-top:.5rem}

/* --- il modulo --- */

/* Un elemento con l'attributo hidden deve sparire SEMPRE. Senza questa riga,
   le regole piu' sotto che dicono display:block o display:flex vincevano
   sull'attributo: con «Nuova adesione» scelta si vedevano la nota della
   partita IVA del sostenitore e la dichiarazione dell'allievo. E' lo stesso
   difetto del campo file della redazione, e la stessa cura. */
.domanda [hidden]{display:none!important}
.ad-modulo{padding:3rem 0 4.5rem;background:var(--nebbia);border-top:1px solid var(--filo)}
/* lo spazio sotto il titolo: prima lo dava la frase che lo seguiva, ora tolta */
.ad-modulo h2{font-size:1.7rem;margin-bottom:1.6rem}

.domanda{max-width:46rem}
.domanda fieldset{border:1px solid var(--filo);border-radius:var(--r);background:#fff;
  padding:1.2rem 1.4rem 1.3rem;margin:0 0 1.1rem;min-width:0}
.domanda legend{font-family:var(--display);font-weight:600;font-size:1.02rem;padding:0 .4rem}
.domanda legend small{display:inline!important;margin:0 0 0 .3rem;font-family:var(--testo);
  font-weight:400;color:var(--grigio);font-size:.8rem}
.domanda label{display:block;font-size:.88rem;color:var(--grigio);margin-bottom:.8rem}
.domanda label:last-child{margin-bottom:0}
.domanda input[type=text],.domanda input[type=email],.domanda input[type=tel],
.domanda select,.domanda textarea{display:block;width:100%;margin-top:.3rem;font:1rem var(--testo);
  color:var(--ink);border:1px solid var(--filo);border-radius:10px;padding:.6rem .8rem;background:#fff}
.domanda input:focus,.domanda select:focus,.domanda textarea:focus{outline:none;border-color:var(--verde)}
.domanda input[type=file]{display:block;margin-top:.4rem;font-size:.9rem;max-width:100%}
.domanda small{display:block;margin-top:.3rem;font-size:.8rem;color:#8A90AE;line-height:1.5}
.domanda label small{display:inline}
.domanda label > small:last-child{display:block}
.ad-due{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.ad-due label{margin-bottom:.8rem}

/* le quattro scelte: riquadri che si toccano, il prezzo sotto il nome */
.ad-tipi{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ad-tipi legend{grid-column:1/-1}
.ad-tipo{display:flex;gap:.7rem;align-items:flex-start;margin:0!important;cursor:pointer;
  border:1px solid var(--filo);border-radius:12px;padding:.8rem .9rem;background:#fff;
  transition:border-color .15s,background .15s}
.ad-tipo input{margin-top:.25rem;flex:none;accent-color:var(--verde)}
.ad-tipo b{display:block;color:var(--ink);font-family:var(--display);font-weight:600}
.ad-tipo small{display:block;margin:.15rem 0 0}
.ad-tipo:has(input:checked){border-color:var(--verde);background:rgba(0,164,78,.05)}
/* la nota sul contributo volontario, sotto i quattro riquadri: tutta la larghezza */
.ad-nota-tipi{grid-column:1/-1;margin:.5rem .1rem 0;font-size:.86rem;line-height:1.55;color:var(--grigio)}

/* le spunte */
.domanda .spunta{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;
  color:var(--ink);margin:0 0 .9rem;line-height:1.5;cursor:pointer}
.domanda .spunta input{margin-top:.25rem;flex:none;accent-color:var(--verde)}
.domanda .spunta a{border-bottom:1px solid var(--verde)}

.ad-invia{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.ad-invia p{font-size:.88rem}

/* il campo trappola: non si vede e non si compila */
.domanda .niente{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* gli avvisi */
.ad-avviso{background:#FDECEC;border:1px solid #F0B4B4;color:#8A1113;border-radius:12px;
  padding:.8rem 1.1rem;margin-bottom:.6rem;font-size:.92rem;max-width:46rem}
.ad-prova,.ad-spento{background:#FFF4D6;border:1px solid #E8D9A8;color:#6B4E00;border-radius:12px;
  padding:.8rem 1.1rem;margin-bottom:1.2rem;font-size:.9rem;max-width:46rem;line-height:1.55}
.ad-spento a{border-bottom:1px solid currentColor}

/* ---------------- telefono ---------------- */
@media(max-width:700px){
  .adesioni{padding:2.2rem 0}
  .prezzo b{font-size:2.5rem}
  .ad-modulo{padding:2.2rem 0 3rem}
  .ad-due,.ad-tipi{grid-template-columns:1fr}
  .domanda fieldset{padding:1rem 1rem 1.1rem}
  .ad-fatto{padding:1.1rem 1.1rem}
  .ad-invia .bottone{width:100%}
}

/* --- la guida al pagamento, sotto il menu del modulo ---------------------
   Stesso riquadro grigio del «Come si paga» in cima: è la stessa cosa,
   ripetuta dove chi compila sta guardando. */
.ad-guida{background:var(--nebbia);border:1px solid var(--filo);border-radius:12px;
  padding:1rem 1.1rem;margin:0 0 1rem;font-size:.92rem;line-height:1.55}
.ad-guida p{margin-bottom:.7rem}
.ad-guida p:last-child{margin-bottom:0}
.ad-guida .bottone{margin:.2rem 0 .6rem}
.ad-guida dl{margin:0}
.ad-guida dt{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grigio);margin-top:.7rem}
.ad-guida dt:first-child{margin-top:0}
.ad-guida dd{margin:.15rem 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.87rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;overflow-wrap:anywhere}
.ad-quanto{font-weight:600;color:var(--ink)}
.ad-copia{border:1px solid var(--filo);background:#fff;border-radius:100px;padding:.2rem .8rem;
  font:500 .78rem var(--testo);color:var(--ink);cursor:pointer}
.ad-copia:hover{border-color:var(--verde)}

/* --- i pulsanti dei due portali, nei colori delle due aziende -------------
   Chi paga li riconosce a colpo d'occhio, prima ancora di leggere.

   PAYPAL: l'oro del suo pulsante di pagamento, con la scritta scura
   (contrasto 11,9 a 1).
   SATISPAY: il suo vermiglio, #FF3D00, con la scritta bianca — deciso da
   Simone. Bianco su vermiglio fa 3,5 a 1: basta per il testo grande, non per
   quello normale. Per questo la scritta dei due pulsanti è in grassetto, che
   la rende più leggibile.
   Colori presi dalle loro indicazioni di marca, settembre 2026. */
.bottone.paypal{background:#FFC439;color:#111;border-color:#FFC439}
.bottone.paypal:hover{background:#F2BA36;border-color:#F2BA36}
.bottone.satispay{background:#FF3D00;color:#fff;border-color:#FF3D00}
.bottone.paypal,.bottone.satispay{font-weight:600}
.bottone.satispay:hover{background:#E83700;border-color:#E83700}
.bottone.paypal:focus-visible,.bottone.satispay:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* I testi del blocco si scrivono in redazione, e l'elenco dei vantaggi può
   restare vuoto: senza elenco il pulsante verde tiene comunque la sua aria. */
.adesioni .bottone.ad-senza-elenco{margin-top:1.8rem}