{"id":302,"date":"2016-05-12T07:47:41","date_gmt":"2016-05-12T07:47:41","guid":{"rendered":"http:\/\/raratheme.com\/preview\/benevolent\/?page_id=7"},"modified":"2026-07-27T17:41:34","modified_gmt":"2026-07-27T14:41:34","slug":"home","status":"publish","type":"page","link":"https:\/\/www.kisedet.org\/it\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- ============================================================ -->\n<!-- WIDGET DI DONAZIONE \u2014 versione \"in stile KISEDET NGO\"        -->\n<!--                                                              -->\n<!-- Struttura del file:                                          -->\n<!--   1. <style>  \u2014 tutto il CSS (variabili, layout, stati)      -->\n<!--   2. HTML     \u2014 markup del widget                            -->\n<!--   3. <script> \u2014 logica di aggiornamento e redirect PayPal    -->\n<!--                                                              -->\n<!-- Flusso utente:                                               -->\n<!--   a) l'utente sceglie \"Singola\" o \"Mensile\"                  -->\n<!--   b) sceglie un importo tra 10\/20\/50\/100 o digita il proprio -->\n<!--   c) sceglie il metodo di pagamento: PayPal o Bonifico       -->\n<!--      bancario                                                -->\n<!--   d) il riepilogo si aggiorna in tempo reale                 -->\n<!--   e) se PayPal \u2192 nuova scheda su PayPal con importo e tipo   -->\n<!--        donazione preimpostati (vedi note su hosted_button_id)-->\n<!--      se Bonifico \u2192 compaiono i dati bancari reali con una    -->\n<!--        causale generata automaticamente; se la donazione \u00e8   -->\n<!--        mensile, viene spiegato il bonifico periodico e viene -->\n<!--        offerto un promemoria via email\/SMS (opt-in)          -->\n<!--                                                              -->\n<!-- NOTE IMPORTANTI (leggere prima di modificare):                -->\n<!--                                                                -->\n<!-- 1) PAYPAL \u2014 hosted_button_id vs business:                     -->\n<!--    Attualmente si usa hosted_button_id perch\u00e9 l'account       -->\n<!--    PayPal business di Gruppo Tanzania ETS non \u00e8 ancora        -->\n<!--    abilitato a ricevere donazioni (PayPal mostra \"This        -->\n<!--    organization can't accept donations right now\" se si usa   -->\n<!--    business=info@gruppotanzaniaets.it). Con hosted_button_id  -->\n<!--    il pulsante FUNZIONA ma l'importo non si precompila sulla  -->\n<!--    pagina PayPal (va inserito a mano). Una volta abilitato    -->\n<!--    l'account, sostituire PAYPAL_BASE nello script per avere   -->\n<!--    anche il prefill dell'importo (vedi commento nello script).-->\n<!--                                                                -->\n<!-- 2) BONIFICO BANCARIO \u2014 perch\u00e9 niente form per carte\/IBAN:     -->\n<!--    NON \u00e8 stato implementato un modulo che raccoglie numeri di -->\n<!--    carta di credito o IBAN per l'addebito diretto (SEPA). Un  -->\n<!--    form del genere richiede un vero processore di pagamento   -->\n<!--    conforme PCI-DSS (Stripe, GoCardless, PayPal stesso) per   -->\n<!--    tokenizzare i dati in modo sicuro: un form HTML \"fatto in  -->\n<!--    casa\" che raccoglie dati di pagamento \u00e8 o inutile (nessun  -->\n<!--    posto sicuro dove instradarli) o pericoloso.                -->\n<!--    Per le donazioni MENSILI via bonifico, la soluzione        -->\n<!--    corretta e sicura \u00e8 il \"bonifico periodico \/ ordine        -->\n<!--    permanente\": il donatore lo imposta da solo nel proprio    -->\n<!--    homebanking, usando lo stesso IBAN e la stessa causale.    -->\n\n<!--    Nessun dato sensibile del donatore passa da questo widget. -->\n<!--    In quel caso il widget mostra un modulo REALE di Brevo     -->\n<!--    (incorporato via iframe), che raccoglie email\/nome\/WhatsApp -->\n<!--    per un promemoria mensile facoltativo: il salvataggio del   -->\n<!--    contatto avviene sui server di Brevo, non c'\u00e8 nessun mock   -->\n<!--    lato client. L'invio effettivo del promemoria va poi        -->\n<!--    impostato una volta sola su Brevo con un'automazione        -->\n<!--    (Automations \u2192 trigger \"contatto aggiunto alla lista\" \u2192     -->\n<!--    azione email\/WhatsApp ricorrente mensile).                  -->\n<!-- ============================================================ -->\n\n<style>\n  \/* \u2500\u2500 FONT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Carica da Google Fonts due famiglie:\n       - Poppins (pesi 600\/700\/800): usata per titoli, numeri,\n         etichette maiuscole \u2014 sans geometrico, forte e leggibile\n       - Open Sans (pesi 400\/600\/700): usata per tutto il testo\n         di corpo, label delle card, campi di input\n     \"display=swap\" fa s\u00ec che il browser usi subito il font di\n     sistema mentre Poppins\/Open Sans si scaricano in background,\n     evitando il flash di testo invisibile (FOIT).              *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap');\n\n  \/* \u2500\u2500 VARIABILI (DESIGN TOKENS) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Tutte le variabili CSS sono dichiarate su .donation-widget\n     invece che su :root. Questo le rende locali al widget: se\n     il file viene incollato in una pagina WordPress (come fa\n     KISEDET con il tema Benevolent), non possono accidentalmente\n     sovrascrivere variabili globali gi\u00e0 definite nel tema.\n\n     Convenzione di nomenclatura:\n       --color-primary     colore principale (blu istituzionale)\n       --color-*-dark      variante scura, usata su hover\/focus\n       --color-accent      arancio per CTA e accenti\n       --color-ink         colore del testo\n       --color-card        sfondo delle card\n       --color-bg-soft     grigio chiarissimo per aree neutre\n       --color-line        colore dei bordi a riposo\n       --font-heading      font per titoli e numeri\n       --font-body         font per testo corrente               *\/\n  .donation-widget {\n    --color-primary:     #1B5E83; \/* blu \u2013 fiducia\/istituzionale *\/\n    --color-primary-dark:#154A68; \/* blu scuro \u2013 hover e focus   *\/\n    --color-accent:      #F08A3C; \/* arancio \u2013 CTA e statistiche *\/\n    --color-accent-dark: #D9722A; \/* arancio scuro \u2013 hover CTA   *\/\n    --color-ink:         #2D2D2D; \/* quasi nero \u2013 testo          *\/\n    --color-card:        #FFFFFF; \/* bianco \u2013 sfondo card        *\/\n    --color-bg-soft:     #F4F6F8; \/* grigio \u2013 striscia stats     *\/\n    --color-line:        #E2E6EA; \/* grigio \u2013 bordi a riposo     *\/\n    --color-success-bg:  #EAF3EA; \/* verde chiaro \u2013 box bonifico *\/\n    --color-success-line:#BFDDC2; \/* verde \u2013 bordo box bonifico  *\/\n    --font-heading: 'Poppins',   'Segoe UI', sans-serif;\n    --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont,\n                    'Segoe UI', Roboto, sans-serif;\n\n    \/* Larghezza massima e centratura orizzontale del widget *\/\n    max-width: 760px;\n    margin: 0 auto;\n\n    \/* Font e colore di testo ereditati da tutti i figli *\/\n    font-family: var(--font-body);\n    color: var(--color-ink);\n  }\n\n  \/* \u2500\u2500 TITOLO PRINCIPALE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Poppins in grassetto: registro diretto, senza il tono\n     narrativo del widget \"Gruppo Tanzania ETS\" che usava\n     un serif morbido (Fraunces).                               *\/\n  .donation-title {\n    font-family: var(--font-heading);\n    font-size: 26px;\n    font-weight: 700;\n    line-height: 1.3;\n    margin: 0 0 8px;\n  }\n\n  \/* \u2500\u2500 SOTTOTITOLO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Testo grigio medio: meno prominente del titolo, usato per\n     il claim istituzionale del sito (\"Aiuta i bambini di strada\n     in Tanzania\").                                             *\/\n  .donation-tagline {\n    font-size: 15px;\n    color: #5b6770;\n    margin: 0 0 22px;\n  }\n\n  \/* \u2500\u2500 STRISCIA STATISTICHE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Griglia a 3 colonne di larghezza uguale (repeat(3, 1fr)):\n     mostra 3 numeri reali presi da kisedet.org prima del form,\n     come elemento di credibilit\u00e0 (\"social proof\").\n     Il gap minimo (4px) tra celle fa s\u00ec che il grigio dello\n     sfondo faccia da separatore visivo leggero.                *\/\n  .stats-strip {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 4px;\n    background: var(--color-bg-soft);\n    border-radius: 8px;\n    padding: 18px 8px;\n    margin-bottom: 26px;\n    text-align: center;\n  }\n\n  \/* Il numero grande: Poppins 800, arancio per risaltare\n     sul grigio dello sfondo della striscia.                    *\/\n  .stat-number {\n    display: block;       \/* <span> reso blocco per andare a capo *\/\n    font-family: var(--font-heading);\n    font-size: 24px;\n    font-weight: 800;\n    color: var(--color-accent);\n    line-height: 1.1;\n  }\n\n  \/* L'etichetta sotto il numero: maiuscola, piccola, grigia.\n     letter-spacing allarga leggermente le lettere per renderla\n     pi\u00f9 leggibile a dimensioni ridotte.                        *\/\n  .stat-label {\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: .04em;\n    color: #6b7680;\n    margin-top: 4px;\n  }\n\n  \/* \u2500\u2500 SEZIONI DEL FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Ogni sezione (tipo \/ importo \/ metodo) ha un margine\n     inferiore per separare visivamente le scelte.               *\/\n  .donation-section {\n    margin-bottom: 26px;\n  }\n\n  \/* Titolo di sezione come \"eyebrow\" maiuscolo:\n     - display:inline-block \u00e8 necessario affinch\u00e9 border-bottom\n       si estenda solo sotto il testo, non per tutta la riga\n     - border-bottom arancio \u00e8 il pattern tipico del tema\n       Benevolent \/ RaraThemes usato da KISEDET                 *\/\n  .donation-section h3 {\n    display: inline-block;\n    font-family: var(--font-heading);\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .03em;\n    color: var(--color-ink);\n    margin: 0 0 14px;\n    padding-bottom: 7px;\n    border-bottom: 3px solid var(--color-accent);\n  }\n\n  \/* \u2500\u2500 GRIGLIA DELLE OPZIONI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     auto-fit + minmax(140px, 1fr):\n       - ogni colonna \u00e8 larga almeno 140px\n       - se lo spazio non basta per una colonna in pi\u00f9, le\n         esistenti si espandono fino a 1fr (tutta la riga)\n       - risultato: card responsive senza media query esplicite  *\/\n  .option-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n  }\n\n  \/* Griglia dedicata al metodo di pagamento: solo 2 opzioni,\n     quindi minmax pi\u00f9 largo per non farle apparire troppo\n     strette su schermi ampi.                                    *\/\n  .method-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n  }\n\n  \/* position:relative permette di posizionare il segno di spunta\n     (.check) in alto a destra rispetto a questa card, usando\n     position:absolute nel selettore .check pi\u00f9 sotto.          *\/\n  .option-card {\n    position: relative;\n  }\n\n  \/* Il radio button reale viene reso completamente invisibile\n     (opacity:0) e non cliccabile (pointer-events:none):\n     tutta l'interazione avviene cliccando sulla <label>.\n     Il radio rimane nel DOM e partecipa allo stato del form,\n     ma l'utente non lo vede mai.                               *\/\n  .option-card input {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  \/* La <label> funge da pulsante visibile e cliccabile.\n     Grazie all'attributo \"for\" nel markup HTML, un click\n     sulla label attiva automaticamente il radio associato.\n     transition anima il cambio di colore al passaggio da\n     uno stato all'altro.                                       *\/\n  .option-card label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-height: 56px;\n    padding: 12px 14px;\n    border: 2px solid var(--color-line);   \/* bordo grigio a riposo *\/\n    border-radius: 6px;\n    background: var(--color-card);\n    cursor: pointer;\n    transition: border-color .15s ease, background .15s ease, color .15s ease;\n    text-align: center;\n    font-family: var(--font-body);\n    font-weight: 700;\n    font-size: 15px;\n  }\n\n  \/* Icona opzionale dentro la label (usata per PayPal \/ Bonifico) *\/\n  .option-card label i {\n    font-size: 18px;\n  }\n\n  \/* Al passaggio del mouse il bordo diventa blu,\n     anticipando visivamente la selezione.                      *\/\n  .option-card label:hover {\n    border-color: var(--color-primary);\n  }\n\n  \/* Il segno di spunta SVG: parte invisibile (opacity:0) e\n     rimpicciolito (scale(.5)). Quando la card \u00e8 selezionata,\n     il selettore qui sotto lo porta a opacity:1 e scale(1),\n     producendo un'animazione di \"pop in\".                      *\/\n  .option-card .check {\n    position: absolute;\n    top: -7px;\n    right: -7px;\n    opacity: 0;\n    transform: scale(.5);\n    transition: opacity .2s ease, transform .2s ease;\n  }\n\n  \/* TRUCCO CSS CHIAVE: il selettore \"input:checked + label\"\n     significa \"la <label> immediatamente successiva a un\n     <input> che \u00e8 in stato :checked\". Questo funziona perch\u00e9\n     nel markup HTML l'input viene sempre prima della label.\n     Quando l'utente clicca una label, il radio associato\n     diventa checked, e questo selettore CSS si attiva\n     automaticamente \u2014 senza JavaScript.\n     Qui la card selezionata passa a sfondo blu pieno \/ testo\n     bianco, stile \"interruttore acceso\".                       *\/\n  .option-card input:checked + label {\n    background: var(--color-primary);\n    border-color: var(--color-primary);\n    color: #fff;\n    box-shadow: 0 2px 8px rgba(27, 94, 131, .25);\n  }\n\n  \/* Quando la label \u00e8 selezionata, rende visibile il segno di\n     spunta che era nascosto. Il selettore \" .check\" (con spazio)\n     significa \"qualsiasi .check discendente di quella label\".  *\/\n  .option-card input:checked + label .check {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  \/* \u2500\u2500 CAMPO IMPORTO LIBERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Nascosto di default (display:none). Il JavaScript lo mostra\n     (display:block) solo quando l'utente seleziona il radio\n     \"Importo libero\", e lo rinascode per tutti gli altri.      *\/\n  .amount-input {\n    display: none;\n    margin-top: 14px;\n  }\n\n  \/* Stile del campo numerico: max-width impedisce che si allarghi\n     troppo su schermi grandi.                                  *\/\n  .amount-input input {\n    width: 100%;\n    max-width: 220px;\n    padding: 12px 14px;\n    border: 2px solid var(--color-line);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    color: var(--color-ink);\n    background: var(--color-card);\n  }\n\n  \/* Anello di focus accessibile: quando l'utente navega col\n     tasto Tab e arriva al campo, il bordo diventa blu e appare\n     un alone, segnalando chiaramente il focus senza usare\n     il predefinito del browser (che varia da browser a browser). *\/\n  .amount-input input:focus {\n    outline: none;\n    border-color: var(--color-primary);\n    box-shadow: 0 0 0 3px rgba(27, 94, 131, .15);\n  }\n\n  \/* \u2500\u2500 BOX DI RIEPILOGO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Sfondo grigio chiaro con bordo sinistro blu: pattern\n     \"alert informativo\" comune nei temi WordPress da ONG.      *\/\n  .donation-summary {\n    margin-top: 22px;\n    padding: 16px 18px;\n    background: var(--color-bg-soft);\n    border-left: 4px solid var(--color-primary);\n    border-radius: 6px;\n    font-size: 15px;\n    line-height: 1.5;\n  }\n\n  \/* Etichetta fissa \"RIEPILOGO\" in maiuscolo blu sopra il testo\n     dinamico. Sta in uno <span> FUORI dall'elemento #summary\n     aggiornato dal JS: cos\u00ec ogni innerHTML che riscrive #summary\n     non la cancella accidentalmente.                           *\/\n  .donation-summary .eyebrow {\n    display: block;\n    font-family: var(--font-heading);\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .06em;\n    color: var(--color-primary);\n    margin-bottom: 6px;\n  }\n\n  \/* I tag <strong> nel testo del riepilogo (tipo, importo, metodo)\n     vengono colorati in blu scuro per risaltare.              *\/\n  .donation-summary strong {\n    color: var(--color-primary-dark);\n  }\n\n  \/* \u2500\u2500 PROMEMORIA DONAZIONE MENSILE (PAYPAL) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Riga aggiuntiva dentro il box di riepilogo, separata da un\n     filo sottile in alto. Nascosta di default (display:none nel\n     markup) e mostrata via JS SOLO quando tipo === \"Mensile\" e\n     metodo === \"paypal\". Serve a compensare il fatto che PayPal\n     non offre un parametro URL per pre-spuntare la casella\n     \"rendi mensile\": avvisiamo l'utente PRIMA che arrivi su\n     PayPal, cos\u00ec sa cosa deve fare lui stesso in un secondo\n     passaggio manuale.                                          *\/\n  .donation-summary .reminder {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    margin-top: 10px;\n    padding-top: 10px;\n    border-top: 1px solid var(--color-line);\n    font-size: 13px;\n    color: var(--color-primary-dark);\n  }\n  .donation-summary .reminder i {\n    font-size: 16px;\n    margin-top: 1px;\n  }\n\n  \/* \u2500\u2500 BOX DATI BANCARI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Sfondo verde chiaro per distinguerlo visivamente dal box blu\n     di riepilogo (che resta per tipo\/importo\/metodo) e dal\n     promemoria PayPal. Nascosto di default, mostrato dal JS solo\n     quando metodo === \"bonifico\".                               *\/\n  .bank-details {\n    display: none;\n    margin-top: 16px;\n    padding: 18px 20px;\n    background: var(--color-success-bg);\n    border: 1px solid var(--color-success-line);\n    border-radius: 8px;\n  }\n  .bank-details h4 {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .04em;\n    color: #2f5c33;\n    margin: 0 0 12px;\n  }\n  \/* Ogni riga dato (Beneficiario \/ IBAN \/ SWIFT \/ Banca \/ Causale)\n     \u00e8 una coppia etichetta-valore su una riga, con un filo\n     sottile a separarle dalla riga successiva.                  *\/\n  .bank-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 0;\n    border-bottom: 1px solid rgba(0,0,0,.06);\n    font-size: 14px;\n  }\n  .bank-row:last-child { border-bottom: none; }\n  .bank-row .bank-label {\n    color: #4a5a4c;\n    font-weight: 600;\n    flex-shrink: 0;\n  }\n  .bank-row .bank-value {\n    font-family: var(--font-body);\n    font-weight: 700;\n    text-align: right;\n    word-break: break-word;\n  }\n  \/* Pulsante \"copia\" accanto all'IBAN e alla causale: piccolo,\n     discreto, cambia testo in \"Copiato!\" per 2 secondi dopo il\n     click (vedi funzione copyToClipboard nello script).         *\/\n  .copy-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    border: 1px solid var(--color-success-line);\n    background: #fff;\n    color: #2f5c33;\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 700;\n    padding: 5px 10px;\n    border-radius: 5px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: background .15s ease;\n  }\n  .copy-btn:hover { background: var(--color-success-bg); }\n  .copy-btn i { font-size: 14px; }\n\n  \/* \u2500\u2500 BOX CARTA DI CREDITO (STRIPE) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Nascosto di default, mostrato dal JS solo quando\n     metodo === \"stripe\". Sfondo neutro chiaro (diverso dal verde\n     del bonifico e dal blu del riepilogo) per non confonderlo\n     con gli altri due metodi.                                    *\/\n  .stripe-box {\n    display: none;\n    margin-top: 16px;\n    padding: 18px 20px;\n    background: #F6F5FB;\n    border: 1px solid #DCD9EF;\n    border-radius: 8px;\n  }\n  .stripe-box h4 {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: .04em;\n    color: #4b3f9e;\n    margin: 0 0 10px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .stripe-status {\n    font-size: 13px;\n    color: #5b6770;\n    margin: 0 0 4px;\n  }\n  .stripe-status.is-error {\n    color: #c0392b;\n  }\n  \/* Contenitore dove Stripe.js monta il vero modulo di pagamento.\n     Altezza minima solo mentre \u00e8 vuoto, cos\u00ec non lascia un buco\n     enorme prima che l'utente clicchi \"Vai al pagamento con\n     carta\"; una volta montato il modulo, Stripe gestisce da solo\n     l'altezza reale del contenuto.                                *\/\n  #stripeCheckout:not(:empty) {\n    margin-top: 10px;\n  }\n\n  \/* \u2500\u2500 AVVISO DONAZIONE MENSILE VIA BONIFICO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Spiega il bonifico periodico\/ordine permanente e introduce\n     il modulo di promemoria facoltativo. Nascosto di default,\n     mostrato dal JS solo quando tipo === \"Mensile\" E\n     metodo === \"bonifico\".                                      *\/\n  .monthly-bank-notice {\n    display: none;\n    margin-top: 16px;\n    padding: 16px 18px;\n    background: #FFF7EC;\n    border-left: 4px solid var(--color-accent);\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n  .monthly-bank-notice p {\n    margin: 0 0 12px;\n  }\n  .monthly-bank-notice p:last-of-type {\n    margin-bottom: 14px;\n  }\n\n  \/* Contenitore del modulo Brevo incorporato (iframe). Il modulo\n     vero e proprio \u2014 con i suoi campi EMAIL\/FIRSTNAME\/LASTNAME\/\n     WHATSAPP, la validazione, la protezione anti-spam Cloudflare\n     Turnstile e il salvataggio nella lista contatti \u2014 vive\n     interamente sui server di Brevo: qui ci limitiamo a\n     \"inquadrarlo\" dentro il widget con un bordo arrotondato\n     coerente con lo stile del resto della pagina.                *\/\n  .brevo-form-wrap {\n    border-radius: 8px;\n    overflow: hidden;         \/* arrotonda anche gli angoli dell'iframe *\/\n    border: 1px solid var(--color-line);\n    background: #fff;\n  }\n  .brevo-form-wrap iframe {\n    width: 100%;\n    height: 480px;            \/* altezza indicativa: il modulo Brevo\n                                  include email, nome, cognome, telefono\n                                  WhatsApp con selettore prefisso e il\n                                  captcha Turnstile, quindi serve pi\u00f9\n                                  spazio di un mini-form a due campi.\n                                  Regolare se in futuro si modificano\n                                  i campi del modulo su Brevo.       *\/\n    border: 0;\n    display: block;\n  }\n\n  \/* Messaggio di conferma mostrato dopo l'invio del modulo\n     promemoria (solo lato client \u2014 vedi nota nello script).     *\/\n  .reminder-confirmation {\n    display: none;\n    margin-top: 10px;\n    padding: 10px 12px;\n    background: var(--color-success-bg);\n    border: 1px solid var(--color-success-line);\n    border-radius: 6px;\n    font-size: 13px;\n    color: #2f5c33;\n  }\n\n  \/* \u2500\u2500 PULSANTE DI INVIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Arancio, maiuscolo, con piccola freccia \"\u203a\": replicato dal\n     pattern CTA tipico dei temi NGO (\"DONATE NOW \u203a\").\n     display:inline-flex per allineare verticalmente testo e\n     freccia senza trucchi di line-height.                      *\/\n  .donation-button {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 14px 26px;\n    border: 0;\n    border-radius: 4px;\n    background: var(--color-accent);\n    color: #fff;\n    font-family: var(--font-heading);\n    font-weight: 700;\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: .04em;\n    cursor: pointer;\n    text-decoration: none;\n    transition: background .15s ease, transform .15s ease;\n  }\n\n  \/* Al passaggio del mouse: scurisce il fondo e alza leggermente\n     il pulsante (translateY(-1px)) per effetto di \"sollevamento\". *\/\n  .donation-button:hover {\n    background: var(--color-accent-dark);\n    transform: translateY(-1px);\n  }\n\n  \/* \u2500\u2500 TOOLTIP SULLE CARD DEGLI IMPORTI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     TECNICA: attributo data-tooltip nell'HTML + pseudo-elementi\n     CSS ::before (bolla di testo) e ::after (freccetta).\n\n     Perch\u00e9 pseudo-elementi e non un <span> nel markup?\n     \u2192 zero HTML extra per ogni card; il testo vive nell'attributo\n       data-tooltip e viene \"iniettato\" nel CSS con:\n         content: attr(data-tooltip)\n       che legge il valore dell'attributo HTML direttamente.\n\n     Il selettore [data-tooltip] restringe queste regole solo\n     alle card che hanno quell'attributo (i 4 importi fissi):\n     le altre card non ne hanno uno, quindi non vengono toccate.\n\n     ATTENZIONE ALLO STACKING: ogni .option-card con\n     position:relative crea un contesto di impilamento; senza\n     aggiustamenti il tooltip potrebbe finire sotto le card\n     adiacenti. La regola :hover sotto alza temporaneamente il\n     z-index della card attiva sopra le sorelle.                *\/\n\n  \/* Alza la card col cursore sopra le adiacenti, cos\u00ec il tooltip\n     non viene coperto dalla card vicina.                       *\/\n  .option-card[data-tooltip]:hover {\n    z-index: 10;\n  }\n\n  \/* BOLLA DEL TOOLTIP (::before)\n     - content: attr(data-tooltip) \u2192 testo dall'attributo HTML\n     - bottom: calc(100% + 10px)  \u2192 10 px sopra il bordo card\n     - left: 50% + translateX(-50%) \u2192 centrato sull'asse della card\n     - translateY(6px) nello stato iniziale: parte leggermente\n       abbassata, poi sale a translateY(0) sull'hover per una\n       transizione di \"salita\" fluida.\n     - pointer-events:none: non blocca i click sul widget sotto   *\/\n  .option-card[data-tooltip]::before {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: calc(100% + 10px);\n    left: 50%;\n    transform: translateX(-50%) translateY(6px); \/* stato iniziale *\/\n    width: 230px;\n    padding: 10px 13px;\n    background: #1a2a36;      \/* quasi-nero con lieve tono blu    *\/\n    color: #fff;\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.55;\n    border-radius: 7px;\n    text-align: center;\n    z-index: 20;\n    opacity: 0;               \/* invisibile a riposo               *\/\n    pointer-events: none;\n    transition: opacity .22s ease, transform .22s ease;\n    white-space: normal;      \/* permette il testo a capo          *\/\n  }\n\n  \/* FRECCETTA (::after)\n     Trucco CSS classico: un elemento con larghezza\/altezza zero\n     e solo i bordi colorati forma un triangolo.\n     border: 7px solid transparent \u2192 crea un quadrato trasparente\n     border-top-color: #1a2a36    \u2192 colora solo il lato superiore\n     Il risultato \u00e8 un triangolo che punta verso il basso,\n     appoggiato sotto la bolla e sopra la card.                  *\/\n  .option-card[data-tooltip]::after {\n    content: '';\n    position: absolute;\n    bottom: calc(100% + 2px); \/* appena sopra la card             *\/\n    left: 50%;\n    transform: translateX(-50%) translateY(6px); \/* stato iniziale *\/\n    border: 7px solid transparent;\n    border-top-color: #1a2a36;\n    z-index: 20;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity .22s ease, transform .22s ease;\n  }\n\n  \/* STATO VISIBILE: entrambi i pseudo-elementi diventano opachi\n     e salgono alla posizione finale translateY(0).             *\/\n  .option-card[data-tooltip]:hover::before,\n  .option-card[data-tooltip]:hover::after {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n<\/style>\n\n<!-- Caricamento del webfont delle icone (Tabler Icons), usato per\n     le icone PayPal\/banca nelle card metodo di pagamento e per\n     l'icona informativa nel promemoria e nel box bonifico.       -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tabler-icons\/2.44.0\/iconfont\/tabler-icons.min.css\">\n\n<!-- \u2500\u2500 CONTENITORE PRINCIPALE DEL WIDGET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     La classe .donation-widget \u00e8 anche l'\u00e2ncora di tutte le\n     variabili CSS: se si incollano pi\u00f9 istanze del widget nella\n     stessa pagina, ciascuna \u00e8 indipendente.                      -->\n<div class=\"donation-widget\">\n\n  <!-- Titolo visibile in cima al widget -->\n  <div class=\"donation-title\">Sostienici con una donazione<\/div>\n\n  <!-- Claim istituzionale: traduzione del motto reale di kisedet.org\n       \"Help street children in Tanzania\"                          -->\n  <p class=\"donation-tagline\">Aiuta i bambini di strada in Tanzania.<\/p>\n\n  <!-- \u2500\u2500 STRISCIA STATISTICHE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       I tre numeri sono reali, pubblicati in home su kisedet.org.\n       Fungono da prova sociale prima che l'utente arrivi al form.\n       La struttura div.stat > span.stat-number + span.stat-label\n       \u00e8 la stessa usata dal widget \"Stats counter\" del tema\n       Benevolent \/ RaraThemes.                                    -->\n  <div class=\"stats-strip\">\n    <div class=\"stat\">\n      <span class=\"stat-number\">1.579<\/span>\n      <span class=\"stat-label\">Bambini scolarizzati<\/span>\n    <\/div>\n    <div class=\"stat\">\n      <span class=\"stat-number\">12<\/span>\n      <span class=\"stat-label\">Villaggi raggiunti<\/span>\n    <\/div>\n    <div class=\"stat\">\n      <span class=\"stat-number\">87<\/span>\n      <span class=\"stat-label\">Aule costruite<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 FORM PRINCIPALE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Un unico <form> raccoglie tutte le scelte. Il JS ascolta\n       l'evento \"submit\" su questo elemento e si comporta in modo\n       diverso a seconda del metodo di pagamento scelto.          -->\n  <form id=\"donationForm\">\n\n    <!-- \u2500\u2500 SEZIONE 1: TIPO DI DONAZIONE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Due radio button con name=\"tipo\": lo stesso attributo name\n         li rende mutualmente esclusivi (il browser deseleziona\n         l'altro automaticamente quando se ne sceglie uno).\n         \"checked\" sul primo imposta Singola come default.\n         Il SVG .check \u00e8 il segno di spunta che appare solo sulla\n         card selezionata (vedi CSS .option-card input:checked).   -->\n    <div class=\"donation-section\">\n      <h3>Tipo di donazione<\/h3>\n      <div class=\"option-grid\">\n\n        <!-- Donazione singola \u2014 selezionata di default (checked) -->\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"tipo-singola\" name=\"tipo\" value=\"Singola\" checked>\n          <!-- for=\"tipo-singola\" collega questa label al radio sopra:\n               un click sulla label attiva quel radio.             -->\n          <label for=\"tipo-singola\">Singola<\/label>\n          <!-- SVG: cerchio bianco con spunta blu. Parte nascosto\n               (opacity:0 via CSS) e compare solo quando l'input\n               fratello \u00e8 :checked (selettore CSS pi\u00f9 sopra).      -->\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Donazione mensile -->\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"tipo-mensile\" name=\"tipo\" value=\"Mensile\">\n          <label for=\"tipo-mensile\">Mensile<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 SEZIONE 2: IMPORTO DELLA DONAZIONE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Cinque radio con name=\"amount\": quattro importi fissi pi\u00f9\n         \"custom\" che fa apparire il campo di testo qui sotto.\n         Tutti condividono lo stesso name, quindi uno solo pu\u00f2\n         essere selezionato alla volta.                            -->\n    <div class=\"donation-section\">\n      <h3>Quanto vuoi donare?<\/h3>\n      <div class=\"option-grid\">\n\n        <!-- 10 \u20ac \u2014 selezionato di default (checked)\n             data-tooltip: testo letto dal CSS con content:attr(data-tooltip)\n             e visualizzato nella bolla ::before sull'hover.       -->\n        <div class=\"option-card\" data-tooltip=\"Offri un pasto caldo a un bambino o a un ragazzo di strada al drop in center per due settimane.\">\n          <input type=\"radio\" id=\"amt-10\" name=\"amount\" value=\"10\" checked>\n          <label for=\"amt-10\">10 \u20ac<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- 20 \u20ac -->\n        <div class=\"option-card\" data-tooltip=\"Sostieni i costi per accogliere un bambino o un ragazzo di strada al drop in center per due settimane.\">\n          <input type=\"radio\" id=\"amt-20\" name=\"amount\" value=\"20\">\n          <label for=\"amt-20\">20 \u20ac<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- 50 \u20ac -->\n        <div class=\"option-card\" data-tooltip=\"Sostieni i costi per accogliere un bambino o un ragazzo di strada nel drop in center per un mese.\">\n          <input type=\"radio\" id=\"amt-50\" name=\"amount\" value=\"50\">\n          <label for=\"amt-50\">50 \u20ac<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- 100 \u20ac -->\n        <div class=\"option-card\" data-tooltip=\"Sostieni i costi per accogliere una\/un bambina\/o o una\/un ragazza\/o per un mese nella casa di accoglienza a lungo termine &quot;Chigongwe Family&quot;. Garantirai l'assicurazione sanitaria e l'iscrizione alla scuola pubblica o ad un corso professionale.\">\n          <input type=\"radio\" id=\"amt-100\" name=\"amount\" value=\"100\">\n          <label for=\"amt-100\">100 \u20ac<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Importo libero: value=\"custom\" \u00e8 una stringa speciale\n             riconosciuta dal JS per mostrare il campo numerico\n             e leggere il valore digitato dall'utente.             -->\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"amt-custom\" name=\"amount\" value=\"custom\">\n          <label for=\"amt-custom\">Importo libero<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n      <\/div>\n\n      <!-- Campo numerico per l'importo libero.\n           Parte nascosto (display:none via CSS su .amount-input).\n           Il JS lo mostra quando amountSelected === 'custom' e\n           lo nasconde (e svuota) per tutti gli altri importi.\n           min=\"1\" blocca valori negativi o zero lato browser,\n           ma la validazione principale \u00e8 comunque nel JS.        -->\n      <div class=\"amount-input\" id=\"customAmountWrap\">\n        <input type=\"number\" id=\"customAmount\" min=\"1\" step=\"1\" placeholder=\"Inserisci importo\">\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 SEZIONE 3: METODO DI PAGAMENTO (NUOVA) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Due radio con name=\"metodo\": \"paypal\" (default) e\n         \"bonifico\". In base alla scelta il JS mostra\/nasconde\n         il box dei dati bancari e il box del promemoria mensile,\n         e cambia il comportamento del pulsante \"Dona ora\".        -->\n    <div class=\"donation-section\">\n      <h3>Metodo di pagamento<\/h3>\n      <div class=\"method-grid\">\n\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"metodo-paypal\" name=\"metodo\" value=\"paypal\" checked>\n          <label for=\"metodo-paypal\"><i class=\"ti ti-brand-paypal\" aria-hidden=\"true\"><\/i> PayPal<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"metodo-bonifico\" name=\"metodo\" value=\"bonifico\">\n          <label for=\"metodo-bonifico\"><i class=\"ti ti-building-bank\" aria-hidden=\"true\"><\/i> Bonifico bancario<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"option-card\">\n          <input type=\"radio\" id=\"metodo-stripe\" name=\"metodo\" value=\"stripe\">\n          <label for=\"metodo-stripe\"><i class=\"ti ti-credit-card\" aria-hidden=\"true\"><\/i> Carta di credito<\/label>\n          <svg class=\"check\" viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n            <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"#fff\"\/>\n            <path d=\"M6 10.5l2.5 2.5L14 7\" stroke=\"var(--color-primary)\" stroke-width=\"2.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 RIEPILOGO DINAMICO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Lo <span class=\"eyebrow\"> con il testo \"RIEPILOGO\" \u00e8\n         FUORI da #summary di proposito: il JS aggiorna solo\n         l'innerHTML di #summary, senza toccare l'etichetta fissa.\n         #reminder (promemoria \"spunta la casella mensile su\n         PayPal\") resta invariato dalla versione precedente e\n         compare solo per tipo=Mensile + metodo=paypal.           -->\n    <div class=\"donation-summary\">\n      <span class=\"eyebrow\">Riepilogo<\/span>\n      <div id=\"summary\">\n        Stai facendo una <strong>donazione Singola<\/strong> di <strong>10 \u20ac<\/strong> tramite <strong>PayPal<\/strong>.\n      <\/div>\n      <div class=\"reminder\" id=\"reminder\" style=\"display:none;\">\n        <i class=\"ti ti-info-circle\" aria-hidden=\"true\"><\/i>\n        <span>Nella pagina PayPal ricordati di spuntare la casella <strong>\"rendi questa una donazione mensile\"<\/strong>: PayPal non permette di pre-selezionarla automaticamente.<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 BOX DATI BANCARI (NUOVO) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Dati reali presi dal footer di gruppotanzaniaets.it.\n         Nascosto di default, mostrato dal JS quando metodo === \"bonifico\".\n         La causale (bank-causale) viene generata e aggiornata dal\n         JS in base a tipo e importo scelti, per restare coerente\n         con quanto selezionato nelle card sopra.                 -->\n    <div class=\"bank-details\" id=\"bankDetails\">\n      <h4><i class=\"ti ti-building-bank\" aria-hidden=\"true\"><\/i> Dati per il bonifico<\/h4>\n\n      <div class=\"bank-row\">\n        <span class=\"bank-label\">Beneficiario<\/span>\n        <span class=\"bank-value\">Gruppo Tanzania Ets<\/span>\n      <\/div>\n      <div class=\"bank-row\">\n        <span class=\"bank-label\">Banca<\/span>\n        <span class=\"bank-value\">Banca di Credito Cooperativo di Caravaggio<\/span>\n      <\/div>\n      <div class=\"bank-row\">\n        <span class=\"bank-label\">IBAN<\/span>\n        <span class=\"bank-value\">\n          <span id=\"ibanValue\">IT73E 08441 52680 000000 800774<\/span>\n          <button type=\"button\" class=\"copy-btn\" id=\"copyIbanBtn\" data-copy=\"IT73E0844152680000000800774\">\n            <i class=\"ti ti-copy\" aria-hidden=\"true\"><\/i> Copia\n          <\/button>\n        <\/span>\n      <\/div>\n      <div class=\"bank-row\">\n        <span class=\"bank-label\">SWIFT\/BIC<\/span>\n        <span class=\"bank-value\">ICRAITRRC90<\/span>\n      <\/div>\n      <div class=\"bank-row\">\n        <span class=\"bank-label\">Causale<\/span>\n        <span class=\"bank-value\">\n          <span id=\"bankCausale\">Donazione Singola 10\u20ac - Gruppo Tanzania ETS<\/span>\n          <button type=\"button\" class=\"copy-btn\" id=\"copyCausaleBtn\">\n            <i class=\"ti ti-copy\" aria-hidden=\"true\"><\/i> Copia\n          <\/button>\n        <\/span>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 AVVISO MENSILE VIA BONIFICO (NUOVO) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         Compare solo per tipo=Mensile + metodo=bonifico. Spiega il\n         bonifico periodico\/ordine permanente (che il donatore\n         imposta da solo nel proprio homebanking: nessun dato di\n         pagamento passa da questo widget) e offre un promemoria\n         mensile via email o SMS, con consenso esplicito.          -->\n    <div class=\"monthly-bank-notice\" id=\"monthlyBankNotice\">\n      <p>\n        Un bonifico non pu\u00f2 ripetersi automaticamente da solo. Il modo pi\u00f9 semplice e sicuro per rendere\n        <strong>mensile<\/strong> la tua donazione \u00e8 impostare un <strong>bonifico periodico (ordine permanente)<\/strong>\n        dal tuo homebanking, usando lo stesso IBAN e la stessa causale indicati sopra: lo fai tu, in autonomia,\n        senza comunicarci alcun dato bancario.\n      <\/p>\n      <p>\n        Se preferisci, possiamo anche inviarti un promemoria una volta al mese via email o WhatsApp, cos\u00ec non te ne dimentichi. Iscriviti qui sotto:\n      <\/p>\n\n      <!-- Modulo REALE gestito da Brevo (non pi\u00f9 un form \"fatto in\n           casa\"): raccoglie email, nome, cognome e numero WhatsApp,\n           con validazione e protezione anti-spam (Cloudflare\n           Turnstile) gi\u00e0 integrate da Brevo stesso, e salva\n           direttamente il contatto nella lista collegata al modulo.\n           Se in futuro il modulo su Brevo viene ricreato o\n           modificato, aggiornare qui il valore di \"src\" con il\n           nuovo link \"Share\"\/\"Embed\" fornito da Brevo.             -->\n      <div class=\"brevo-form-wrap\">\n        <iframe\n          src=\"https:\/\/30ad0a3e.sibforms.com\/serve\/MUIFAORYtOKkWBsJyjBfzCGMjSMnYPhPfkb2A84uw36tjGQ9_lPjJdFeO8v5j7srBPYN8laUCNcov7crSbei5IRzQTHliporyUWybAKIuO6KLGXq6LdtHQSX4nZnQVIuolmFUfX1_eEwPppDSJTmmZR3sIR0kV9gyoy24B3UPT_VnrJfkOJ4_gFfATOQXViTW4gdtNRl6NGEi_zgsw==\"\n          title=\"Iscrizione promemoria donazione mensile\"\n          loading=\"lazy\">\n        <\/iframe>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 BOX CARTA DI CREDITO \u2014 STRIPE EMBEDDED CHECKOUT (NUOVO) \u2500\u2500\n         Compare solo quando metodo === \"stripe\". #stripeCheckout \u00e8\n         il contenitore vuoto dove Stripe.js monta il vero modulo\n         di pagamento (campi carta, Apple Pay, Google Pay, ecc.):\n         quei campi sono iframe sicuri di Stripe, il numero di\n         carta non tocca mai n\u00e9 il nostro widget n\u00e9 il server di\n         Gruppo Tanzania ETS. #stripeStatus mostra un messaggio di\n         caricamento iniziale e, in caso di problemi, un messaggio\n         d'errore leggibile.                                       -->\n    <div class=\"stripe-box\" id=\"stripeBox\">\n      <h4><i class=\"ti ti-credit-card\" aria-hidden=\"true\"><\/i> Pagamento con carta<\/h4>\n      <p class=\"stripe-status\" id=\"stripeStatus\">Clicca \"Vai al pagamento con carta\" qui sotto per caricare il modulo sicuro di Stripe.<\/p>\n      <div id=\"stripeCheckout\"><\/div>\n    <\/div>\n\n    <!-- Pulsante di submit. Il tipo=\"submit\" fa scattare l'evento\n         \"submit\" sul form, che il JS intercetta con preventDefault()\n         e gestisce in modo diverso a seconda del metodo scelto:\n         PayPal   \u2192 apre una nuova scheda su PayPal\n         Bonifico \u2192 scorre fino ai dati bancari (e, se mensile,\n                    mostra il modulo Brevo per il promemoria)\n         Stripe   \u2192 chiama il Cloudflare Worker e monta il modulo\n                    di pagamento incorporato qui sopra              -->\n    <button type=\"submit\" class=\"donation-button\" id=\"submitButton\">\n      Dona ora <span class=\"arrow\">\u203a<\/span>\n    <\/button>\n\n  <\/form>\n<\/div>\n\n<!-- Libreria ufficiale Stripe.js: necessaria per inizializzare e\n     montare il modulo di pagamento incorporato (Embedded\n     Checkout). Va caricata una sola volta per pagina.             -->\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n\n<script>\n  \/\/ \u2500\u2500 RIFERIMENTI AL DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Vengono salvati subito in variabili per non dover interrogare\n  \/\/ il DOM pi\u00f9 volte: getElementById \u00e8 veloce, ma \u00e8 buona pratica\n  \/\/ non ripeterlo inutilmente ad ogni evento.\n  const form                 = document.getElementById('donationForm');\n  const summary              = document.getElementById('summary');\n  const reminder             = document.getElementById('reminder');             \/\/ promemoria \"spunta mensile su PayPal\"\n  const customAmountWrap     = document.getElementById('customAmountWrap');\n  const customAmount         = document.getElementById('customAmount');\n  const bankDetails          = document.getElementById('bankDetails');          \/\/ box dati bancari\n  const bankCausale          = document.getElementById('bankCausale');          \/\/ causale generata dinamicamente\n  const monthlyBankNotice    = document.getElementById('monthlyBankNotice');    \/\/ avviso bonifico periodico + iscrizione promemoria (iframe Brevo)\n  const stripeBox            = document.getElementById('stripeBox');           \/\/ box \"Carta di credito\"\n  const stripeStatus         = document.getElementById('stripeStatus');        \/\/ messaggio di stato\/errore Stripe\n  const stripeCheckoutEl     = document.getElementById('stripeCheckout');      \/\/ contenitore di mount del modulo Stripe\n  const submitButton         = document.getElementById('submitButton');\n\n  \/\/ \u2500\u2500 CONFIGURAZIONE STRIPE (DA COMPLETARE) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ WORKER_URL: l'indirizzo del Cloudflare Worker che crea le\n  \/\/   Checkout Session (vedi file stripe-checkout-worker.js) \u2014 va\n  \/\/   sostituito con l'URL reale una volta deployato il Worker, es.\n  \/\/   \"https:\/\/gruppotanzania-stripe-checkout.TUO-SUBDOMAIN.workers.dev\"\n  \/\/ STRIPE_PUBLISHABLE_KEY: la chiave PUBBLICABILE di Stripe\n  \/\/   (inizia con \"pk_live_...\" o, per fare prove, \"pk_test_...\").\n  \/\/   A differenza della chiave segreta, questa \u00e8 FATTA apposta per\n  \/\/   stare nel codice del browser: non permette di creare o\n  \/\/   modificare pagamenti, solo di mostrare il modulo di\n  \/\/   pagamento. La trovi su dashboard.stripe.com \u2192 Developers \u2192\n  \/\/   API keys \u2192 \"Publishable key\".\n  const STRIPE_CONFIG = {\n    WORKER_URL: 'https:\/\/gruppotanzania-stripe-checkout.fabiocomitangelo99.workers.dev\/',\n    \/\/ Chiave PUBBLICABILE di TEST: nessun addebito reale viene\n    \/\/ effettuato mentre \u00e8 questa. Prima di andare online con\n    \/\/ donazioni vere, sostituirla con la chiave pk_live_... e\n    \/\/ aggiornare STRIPE_SECRET_KEY nel Worker con la sk_live_...\n    \/\/ corrispondente (mai la sk_test_ con una pk_live_ o viceversa:\n    \/\/ vanno sempre in coppia, test con test o live con live).\n    STRIPE_PUBLISHABLE_KEY: 'pk_test_51TxjxY2N6Nd8Mb9SW5hGgCjdurJEUPVoEQfCT93R7db0Y6qEg7Pqw8FSnunAJ2j1cSQu1iWeUS90sIjT41dkAFlx006A7tMCti',\n  };\n\n  \/\/ Inizializzato solo al primo utilizzo (quando serve davvero),\n  \/\/ non al caricamento della pagina: evita di caricare Stripe.js\n  \/\/ per donatori che poi scelgono PayPal o bonifico.\n  let stripeInstance = null;\n  let embeddedCheckoutInstance = null;\n\n  \/\/ \u2500\u2500 FUNZIONE: initStripeCheckout() \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Chiamata quando l'utente, con metodo=\"stripe\" selezionato,\n  \/\/ clicca \"Vai al pagamento con carta\". Fa tre cose:\n  \/\/   1) carica l'oggetto Stripe (usando la chiave pubblicabile)\n  \/\/   2) chiama il Cloudflare Worker per creare una Checkout\n  \/\/      Session con l'importo e la frequenza scelti in quel\n  \/\/      momento nel widget\n  \/\/   3) monta il modulo di pagamento restituito da Stripe dentro\n  \/\/      #stripeCheckout\n  \/\/ Se l'utente cambia importo\/frequenza e riclicca, la vecchia\n  \/\/ istanza viene smontata e se ne crea una nuova coerente con le\n  \/\/ nuove scelte.\n  async function initStripeCheckout() {\n    const tipo = form.querySelector('input[name=\"tipo\"]:checked')?.value || 'Singola';\n    const amountSelected = form.querySelector('input[name=\"amount\"]:checked')?.value || '10';\n    const amountEur = amountSelected === 'custom' ? parseFloat(customAmount.value) : parseFloat(amountSelected);\n\n    if (!amountEur || amountEur < 1) {\n      stripeStatus.textContent = 'Inserisci prima un importo valido (almeno 1\u20ac).';\n      stripeStatus.classList.add('is-error');\n      return;\n    }\n\n    stripeStatus.classList.remove('is-error');\n    stripeStatus.textContent = 'Caricamento del modulo di pagamento sicuro\u2026';\n    stripeCheckoutEl.innerHTML = '';\n\n    \/\/ Smonta un'eventuale sessione di pagamento gi\u00e0 montata in\n    \/\/ precedenza (es. se l'utente ha cambiato importo e riprova),\n    \/\/ per evitare moduli doppi sovrapposti.\n    if (embeddedCheckoutInstance) {\n      try { embeddedCheckoutInstance.unmount(); } catch (err) { \/* gi\u00e0 smontato, ignora *\/ }\n      embeddedCheckoutInstance = null;\n    }\n\n    try {\n      if (!stripeInstance) {\n        if (typeof Stripe === 'undefined') {\n          throw new Error('La libreria Stripe.js non si \u00e8 caricata correttamente.');\n        }\n        stripeInstance = Stripe(STRIPE_CONFIG.STRIPE_PUBLISHABLE_KEY);\n      }\n\n      \/\/ fetchClientSecret \u00e8 la modalit\u00e0 raccomandata da Stripe\n      \/\/ (pi\u00f9 veloce del passare direttamente clientSecret): viene\n      \/\/ chiamata da Stripe.js stesso al momento giusto.\n      const fetchClientSecret = async () => {\n        const response = await fetch(STRIPE_CONFIG.WORKER_URL, {\n          method: 'POST',\n          headers: { 'Content-Type': 'application\/json' },\n          body: JSON.stringify({\n            amount: amountEur,\n            tipo: tipo,\n            \/\/ Pagina a cui Stripe riporta il donatore dopo il\n            \/\/ pagamento (o dopo l'eventuale autenticazione 3D\n            \/\/ Secure). Deve corrispondere a uno dei domini\n            \/\/ autorizzati nel Worker (ALLOWED_ORIGINS).\n            returnUrl: window.location.href.split('#')[0],\n          }),\n        });\n\n        const data = await response.json();\n\n        if (!response.ok || data.error) {\n          throw new Error(data.error || 'Errore nella creazione del pagamento.');\n        }\n\n        return data.clientSecret;\n      };\n\n      \/\/ createEmbeddedCheckoutPage \u00e8 il metodo attuale di Stripe.js\n      \/\/ per il checkout incorporato (in precedenza si chiamava\n      \/\/ initEmbeddedCheckout, ora deprecato).\n      embeddedCheckoutInstance = await stripeInstance.createEmbeddedCheckoutPage({ fetchClientSecret });\n      embeddedCheckoutInstance.mount('#stripeCheckout');\n\n      stripeStatus.textContent = '';\n\n    } catch (err) {\n      stripeStatus.classList.add('is-error');\n      stripeStatus.textContent = 'Non \u00e8 stato possibile caricare il modulo di pagamento. Riprova tra qualche istante o scegli un altro metodo. (' + err.message + ')';\n    }\n  }\n\n  \/\/ \u2500\u2500 FUNZIONE: updateSummary() \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Scopo: leggere le scelte correnti nel form (tipo, importo,\n  \/\/        metodo) e aggiornare tutto ci\u00f2 che dipende da esse:\n  \/\/        testo di riepilogo, campo importo libero, promemoria\n  \/\/        PayPal, box dati bancari, causale del bonifico, avviso\n  \/\/        mensile via bonifico e testo del pulsante finale.\n  \/\/ Viene chiamata:\n  \/\/   - all'avvio (fondo del file) per inizializzare lo stato\n  \/\/   - ad ogni 'change' su qualsiasi radio del form\n  \/\/   - ad ogni 'input' nel campo importo libero (in tempo reale)\n  function updateSummary() {\n\n    \/\/ querySelector con ':checked' trova il radio attualmente\n    \/\/ selezionato in ciascun gruppo. L'operatore ?. (optional\n    \/\/ chaining) evita un errore se nessun radio fosse selezionato;\n    \/\/ in quel caso il || fornisce un valore di ripiego.\n    const tipo   = form.querySelector('input[name=\"tipo\"]:checked')?.value   || 'Singola';\n    const metodo = form.querySelector('input[name=\"metodo\"]:checked')?.value || 'paypal';\n    const amountSelected = form.querySelector('input[name=\"amount\"]:checked')?.value || '10';\n\n    \/\/ Testo e valore numerico dell'importo (servono entrambi:\n    \/\/ amountText per il riepilogo leggibile, amountNumber per\n    \/\/ costruire la causale del bonifico in modo pulito).\n    let amountText = amountSelected + ' \u20ac';\n    let amountNumber = amountSelected;\n\n    if (amountSelected === 'custom') {\n      customAmountWrap.style.display = 'block';\n      amountText = customAmount.value ? customAmount.value + ' \u20ac' : 'importo libero';\n      amountNumber = customAmount.value || '';\n    } else {\n      customAmountWrap.style.display = 'none';\n      customAmount.value = '';\n    }\n\n    \/\/ Etichetta leggibile del metodo, usata sia nel riepilogo che\n    \/\/ (indirettamente) per decidere quale box mostrare.\n    const metodoText = metodo === 'bonifico' ? 'Bonifico bancario'\n      : metodo === 'stripe' ? 'Carta di credito'\n      : 'PayPal';\n\n    \/\/ Riscrive solo il contenuto di #summary (non l'etichetta\n    \/\/ .eyebrow, che sta fuori da questo elemento).\n    summary.innerHTML = `Stai facendo una <strong>donazione ${tipo}<\/strong> di <strong>${amountText}<\/strong> tramite <strong>${metodoText}<\/strong>.`;\n\n    \/\/ Promemoria \"spunta la casella mensile su PayPal\": ha senso\n    \/\/ mostrarlo SOLO se il metodo scelto \u00e8 PayPal (col bonifico\n    \/\/ il discorso \"mensile\" \u00e8 gestito dal box verde pi\u00f9 sotto, e\n    \/\/ con Stripe il mensile \u00e8 un vero abbonamento automatico: non\n    \/\/ serve nessun promemoria).\n    reminder.style.display = (tipo === 'Mensile' && metodo === 'paypal') ? 'flex' : 'none';\n\n    \/\/ Mostra il box dati bancari solo quando il metodo \u00e8 \"bonifico\".\n    bankDetails.style.display = (metodo === 'bonifico') ? 'block' : 'none';\n\n    \/\/ Aggiorna la causale suggerita in modo che rifletta sempre le\n    \/\/ scelte correnti (tipo + importo), cos\u00ec chi fa il bonifico\n    \/\/ scrive un riferimento coerente con quanto ha selezionato.\n    const importoPerCausale = amountNumber ? amountNumber + '\u20ac' : '';\n    bankCausale.textContent = `Donazione ${tipo} ${importoPerCausale} - Gruppo Tanzania ETS`.replace('  ', ' ');\n\n    \/\/ Mostra l'avviso \"bonifico periodico + promemoria\" solo per\n    \/\/ la combinazione tipo=Mensile + metodo=bonifico.\n    monthlyBankNotice.style.display = (tipo === 'Mensile' && metodo === 'bonifico') ? 'block' : 'none';\n\n    \/\/ Mostra il box \"Carta di credito\" solo quando metodo === \"stripe\".\n    \/\/ Se l'utente cambia importo\/tipo mentre il box \u00e8 gi\u00e0 aperto,\n    \/\/ NON rimonta automaticamente il modulo di pagamento (Stripe\n    \/\/ non permette di cambiare importo a sessione gi\u00e0 creata):\n    \/\/ deve ricliccare il pulsante principale per generarne una\n    \/\/ nuova coerente con la nuova scelta \u2014 per questo lo stato\n    \/\/ viene resettato al messaggio iniziale quando cambia importo,\n    \/\/ tipo o si torna su questo metodo.\n    if (metodo === 'stripe') {\n      stripeBox.style.display = 'block';\n    } else {\n      stripeBox.style.display = 'none';\n    }\n\n    \/\/ Il testo del pulsante finale cambia in base al metodo, per\n    \/\/ non promettere un'azione (es. \"Dona ora \u203a\") che in realt\u00e0\n    \/\/ porterebbe solo a leggere dei dati bancari o a dover\n    \/\/ ricliccare per caricare il modulo di pagamento.\n    if (metodo === 'bonifico') {\n      submitButton.innerHTML = (tipo === 'Mensile')\n        ? 'Conferma e vai ai dati bancari <span class=\"arrow\">\u203a<\/span>'\n        : 'Vai ai dati bancari <span class=\"arrow\">\u203a<\/span>';\n    } else if (metodo === 'stripe') {\n      submitButton.innerHTML = 'Vai al pagamento con carta <span class=\"arrow\">\u203a<\/span>';\n    } else {\n      submitButton.innerHTML = 'Dona ora <span class=\"arrow\">\u203a<\/span>';\n    }\n  }\n\n  \/\/ \u2500\u2500 LISTENER: cambio di qualsiasi radio \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ L'evento 'change' su <form> si propaga in su (bubble) da\n  \/\/ qualsiasi radio figlio che cambia stato: un unico listener\n  \/\/ copre tutti e tre i gruppi (tipo, amount, metodo) senza\n  \/\/ doverli ascoltare singolarmente.\n  form.addEventListener('change', updateSummary);\n\n  \/\/ \u2500\u2500 LISTENER: digitazione nell'importo libero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 'input' si attiva ad ogni tasto premuto (digitazione in tempo\n  \/\/ reale), a differenza di 'change' che scatta solo quando il\n  \/\/ campo perde il focus. Cos\u00ec riepilogo e causale si aggiornano\n  \/\/ istante per istante mentre l'utente digita.\n  customAmount.addEventListener('input', function() {\n    customAmount.style.borderColor = '';\n    updateSummary();\n  });\n\n  \/\/ \u2500\u2500 FUNZIONE: copyToClipboard(text, button) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Copia \"text\" negli appunti usando la Clipboard API del\n  \/\/ browser e d\u00e0 un feedback visivo temporaneo sul pulsante\n  \/\/ cliccato (testo \"Copiato!\" per 1.6 secondi, poi torna quello\n  \/\/ originale). Il testo originale del pulsante viene salvato in\n  \/\/ un data-attribute la prima volta, per poterlo ripristinare.\n  function copyToClipboard(text, button) {\n    navigator.clipboard.writeText(text).then(function() {\n      const originalHTML = button.dataset.originalHtml || button.innerHTML;\n      button.dataset.originalHtml = originalHTML;\n      button.innerHTML = '<i class=\"ti ti-check\" aria-hidden=\"true\"><\/i> Copiato!';\n      setTimeout(function() {\n        button.innerHTML = originalHTML;\n      }, 1600);\n    });\n  }\n\n  \/\/ Pulsante \"copia\" accanto all'IBAN: usa il valore in data-copy\n  \/\/ (IBAN senza spazi, formato pi\u00f9 comodo da incollare in un\n  \/\/ form bancario) invece del testo visibile (che ha gli spazi\n  \/\/ per la leggibilit\u00e0).\n  document.getElementById('copyIbanBtn').addEventListener('click', function() {\n    copyToClipboard(this.dataset.copy, this);\n  });\n\n  \/\/ Pulsante \"copia\" accanto alla causale: copia il testContent\n  \/\/ corrente di #bankCausale, che riflette sempre tipo+importo\n  \/\/ aggiornati da updateSummary().\n  document.getElementById('copyCausaleBtn').addEventListener('click', function() {\n    copyToClipboard(bankCausale.textContent, this);\n  });\n\n  \/\/ \u2500\u2500 ISCRIZIONE AL PROMEMORIA MENSILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ A differenza della versione precedente (un mini-form fatto in\n  \/\/ casa, solo visivo), l'iscrizione al promemoria ora passa\n  \/\/ interamente dal modulo Brevo incorporato via iframe (vedi\n  \/\/ #monthlyBankNotice nell'HTML). Quel modulo:\n  \/\/   - valida email\/nome\/WhatsApp per conto proprio\n  \/\/   - \u00e8 protetto da un captcha (Cloudflare Turnstile)\n  \/\/   - salva davvero il contatto nella lista collegata su Brevo\n  \/\/   - ha un proprio pulsante di invio, indipendente da quello\n  \/\/     principale del widget (\"Conferma e vai ai dati bancari\")\n  \/\/ Per questo qui non serve pi\u00f9 nessuna validazione JS lato\n  \/\/ nostro: il pulsante principale del widget si limita a portare\n  \/\/ l'utente sul box dei dati bancari, mentre l'iscrizione al\n  \/\/ promemoria (se la vuole) la completa lui stesso dentro\n  \/\/ l'iframe, con il suo bottone \"Invia\"\/\"Subscribe\".\n  \/\/ L'invio EFFETTIVO del promemoria mensile va poi impostato una\n  \/\/ sola volta lato Brevo con un'automazione (Automations \u2192\n  \/\/ Create a workflow \u2192 trigger \"quando un contatto entra nella\n  \/\/ lista\" + azione email\/WhatsApp ricorrente mensile).\n\n  \/\/ \u2500\u2500 URL BASE DI PAYPAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Costante con l'URL della pagina di donazione PayPal.\n  \/\/\n  \/\/ STORICO DEI TENTATIVI (utile se si deve fare debug in futuro):\n  \/\/   1) hosted_button_id \u2192 funziona sempre, ma PayPal ignora\n  \/\/      \"amount\" nell'URL: l'importo non si precompila.\n  \/\/   2) business=info@gruppotanzaniaets.it \u2192 PayPal rispondeva\n  \/\/      \"This organization can't accept donations right now\":\n  \/\/      quell'email non era quella giusta collegata all'account\n  \/\/      business abilitato alle donazioni.\n  \/\/   3) ATTUALE: business=info@gruppotanzaniaonlus.org \u2192 email\n  \/\/      business corretta fornita da Gruppo Tanzania ETS.\n  \/\/\n  \/\/ Se dopo il test questa email risultasse ANCORA non abilitata\n  \/\/ alle donazioni (stesso errore \"can't accept donations\"),\n  \/\/ tornare temporaneamente a:\n  \/\/   const PAYPAL_BASE = 'https:\/\/www.paypal.com\/donate?hosted_button_id=HTVCVQ2VLJZQW&currency_code=EUR&no_recurring=0';\n  \/\/ che \u00e8 la versione sempre funzionante (senza prefill importo).\n  \/\/\n  \/\/ Parametri fissi inclusi:\n  \/\/   business          email dell'account PayPal business di\n  \/\/                     Gruppo Tanzania ETS, con @ codificato\n  \/\/                     come %40\n  \/\/   currency_code=EUR forza la valuta in euro\n  \/\/   no_recurring=0    mostra SEMPRE la casella \"rendi questa\n  \/\/                     una donazione mensile\" nella pagina\n  \/\/                     PayPal, qualunque sia la scelta fatta qui\n  \/\/                     nel widget (0 = mostrata, 1 = nascosta \u2014\n  \/\/                     qui resta fissa a 0 per scelta esplicita)\n  const PAYPAL_BASE = 'https:\/\/www.paypal.com\/donate?business=info%40gruppotanzaniaonlus.org&currency_code=EUR&no_recurring=0';\n\n  \/\/ \u2500\u2500 LISTENER: invio del form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Il comportamento cambia radicalmente in base al metodo scelto:\n  \/\/   - PayPal   \u2192 costruisce l'URL con importo\/item_name e apre\n  \/\/                una nuova scheda (comportamento invariato dalla\n  \/\/                versione precedente del widget)\n  \/\/   - Bonifico \u2192 non c'\u00e8 nessun redirect: i dati bancari sono\n  \/\/                gi\u00e0 visibili nel box verde. Il pulsante si\n  \/\/                limita a far scorrere la pagina fino a quel box\n  \/\/                e, se la donazione \u00e8 mensile, a validare e\n  \/\/                \"attivare\" il modulo di promemoria.\n  form.addEventListener('submit', function(e) {\n\n    \/\/ Blocca il comportamento predefinito del browser in ogni caso:\n    \/\/ senza questo il form ricaricherebbe la pagina.\n    e.preventDefault();\n\n    const tipo   = form.querySelector('input[name=\"tipo\"]:checked')?.value   || 'Singola';\n    const metodo = form.querySelector('input[name=\"metodo\"]:checked')?.value || 'paypal';\n    const amountSelected = form.querySelector('input[name=\"amount\"]:checked')?.value || '10';\n\n    if (metodo === 'bonifico') {\n\n      \/\/ Porta l'utente sul box dei dati bancari con uno scroll\n      \/\/ fluido, cos\u00ec non deve cercarlo lui stesso nella pagina.\n      \/\/ Se la donazione \u00e8 mensile, il box #monthlyBankNotice (con\n      \/\/ l'iframe del modulo Brevo per il promemoria) \u00e8 gi\u00e0 visibile\n      \/\/ subito sopra: l'utente pu\u00f2 iscriversi l\u00ec con calma, usando\n      \/\/ il pulsante di invio del modulo stesso.\n      bankDetails.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      return;\n    }\n\n    if (metodo === 'stripe') {\n\n      \/\/ Valida l'importo libero PRIMA di chiamare il Worker, con\n      \/\/ lo stesso controllo usato per PayPal, cos\u00ec non si spreca\n      \/\/ una chiamata di rete per un importo non valido.\n      if (amountSelected === 'custom') {\n        const val = parseFloat(customAmount.value);\n        if (!val || val < 1) {\n          customAmount.style.borderColor = '#c0392b';\n          customAmount.focus();\n          return;\n        }\n        customAmount.style.borderColor = '';\n      }\n\n      \/\/ Porta l'utente sul box \"Carta di credito\" e avvia il\n      \/\/ caricamento del modulo di pagamento Stripe (vedi\n      \/\/ initStripeCheckout pi\u00f9 sopra).\n      stripeBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      initStripeCheckout();\n      return;\n    }\n\n    \/\/ \u2500\u2500 RAMO PAYPAL (comportamento invariato) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    let finalAmount;\n\n    if (amountSelected === 'custom') {\n      const val = parseFloat(customAmount.value);\n      if (!val || val < 1) {\n        customAmount.style.borderColor = '#c0392b';\n        customAmount.focus();\n        return;\n      }\n      customAmount.style.borderColor = '';\n      finalAmount = val.toFixed(2);\n    } else {\n      finalAmount = amountSelected;\n    }\n\n    const itemName = tipo === 'Mensile' ? 'Donazione mensile KISEDET' : 'Donazione singola KISEDET';\n    const paypalUrl = `${PAYPAL_BASE}&amount=${finalAmount}&item_name=${encodeURIComponent(itemName)}`;\n\n    window.open(paypalUrl, '_blank', 'noopener,noreferrer');\n  });\n\n  \/\/ \u2500\u2500 INIZIALIZZAZIONE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ Chiama subito updateSummary() al caricamento dello script,\n  \/\/ cos\u00ec riepilogo, causale del bonifico e visibilit\u00e0 dei vari box\n  \/\/ rispecchiano fin da subito i valori \"checked\" di default\n  \/\/ nell'HTML (Singola, 10 \u20ac, PayPal).\n  updateSummary();\n<\/script>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sostienici con una donazione Aiuta i bambini di strada in Tanzania. 1.579 Bambini scolarizzati 12 Villaggi raggiunti 87 Aule costruite Tipo di donazione Singola Mensile Quanto vuoi donare? 10 \u20ac 20 \u20ac 50 \u20ac 100 \u20ac Importo libero Metodo di pagamento PayPal Bonifico bancario Carta di credito Riepilogo Stai facendo una donazione Singola di 10 \u20ac tramite PayPal. Nella pagina &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"class_list":["post-302","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/pages\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":4,"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/pages\/302\/revisions"}],"predecessor-version":[{"id":6207,"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/pages\/302\/revisions\/6207"}],"wp:attachment":[{"href":"https:\/\/www.kisedet.org\/it\/wp-json\/wp\/v2\/media?parent=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}