<!-- start Simple Custom CSS and JS -->
<style type="text/css">
/* ============================================================
   USIP - RESET STRUTTURALE E STILE AZIONE (FULL CSS)
   Versione Ottimizzata: Titolo Poppins, Label CF (ID 21), Flexbox Fix Larghezza
   ============================================================ */

/* ============================================================
   0. TITOLO PAGINA CIVICRM (Poppins & Grassetto)
   ============================================================ */
.donazione-civi h1,
.donazione-civi h2,
.donazione-civi .crm-title,
.donazione-civi #crm-container .crm-title,
.donazione-civi #crm-container h1,
.donazione-civi #crm-container h2 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

/* ============================================================
   1. NASCONDIAMO LE COSE INUTILI E PULIZIA GENERALE
   ============================================================ */
.donazione-civi #crm-container .crm-not-you-message,
.donazione-civi #crm-container .payment_processor-section > .label,
.donazione-civi #crm-container .is_recur-section > .label {
    display: none !important;
}

/* Nascondiamo TUTTE le label del blocco pre_profile */
.donazione-civi #crm-container .custom_pre_profile-group fieldset > div[class*='custom'] > .label {
    display: none !important;
}

/* FORZATURA ASSOLUTA: Ripristiniamo SOLO la label del Codice Fiscale (ID 21) */
.donazione-civi #crm-container .custom_pre_profile-group fieldset > div#editrow-custom_21 > .label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* DISTRUZIONE TOTALE DELLA GRIGLIA NATIVA CIVICRM */
.donazione-civi #crm-container .crm-section {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.donazione-civi #crm-container .crm-section > .label,
.donazione-civi #crm-container .crm-section > .content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Stile universale Etichette (FONT INGRANDITO A 18px) */
.donazione-civi #crm-container label {
    display: inline-block !important;
    font-weight: 700 !important;
    color: #003399 !important;
    margin-bottom: 8px !important;
    font-size: 18px !important;
}

/* ============================================================
   2. BLOCCO PREZZI E IMPORTI
   ============================================================ */

/* A. Occultamento "- nessuno -" */
.donazione-civi #crm-container .price-set-row:last-child:has(input[value="0"]),
.donazione-civi #crm-container .price-set-row:last-child:has(input[value=""]) {
    display: none !important;
}

/* B. Sistema a Card per i Radio Button */
.donazione-civi #crm-container .price-set-row input[type="radio"].crm-form-radio { 
    display: none !important;
}

.donazione-civi #crm-container .price-set-row:has(input[type="radio"]) { 
    display: inline-block !important; 
    margin: 0 10px 10px 0 !important;
}

/* La Card visiva */
.donazione-civi #crm-container .price-set-row input[type="radio"] + label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 60px !important;       
    min-width: 120px !important;   
    padding: 0 25px !important;    
    background-color: #ffffff !important;
    color: #003399 !important;
    border: 3px solid #003399 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin: 0 !important;
}

/* Card Selezionata */
.donazione-civi #crm-container .price-set-row input[type="radio"]:checked + label {
    background-color: #003399 !important;
    color: #ffffff !important;
}
.donazione-civi #crm-container .price-set-row input[type="radio"]:checked + label span {
    color: #ffffff !important;
}

/* C. Il campo testuale "Importo Personalizzato" */
.donazione-civi #crm-container input[id^="price_"][type="text"],
.donazione-civi #crm-container input[name^="price_"][type="text"] {
    width: 100% !important;
    min-width: 0 !important;
}
@media (min-width: 992px) {
    .donazione-civi #crm-container input[id^="price_"][type="text"],
    .donazione-civi #crm-container input[name^="price_"][type="text"] {
        width: 48% !important;
    }
}

/* D. Sezione Fee "vuoi farlo?" e Testi Descrittivi */
.donazione-civi #crm-container .crm-section:has(input[type="checkbox"][name*="price_"]) > .label {
    display: none !important;
}

/* Testo descrittivo verde (Ti chiediamo un piccolo gesto...) INGRANDITO */
.donazione-civi #crm-container .crm-section .description,
.donazione-civi #crm-container .helprow-custom p {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.donazione-civi #crm-container .price-set-row:has(input[type="checkbox"]) {
    display: block !important;
    margin-top: 15px !important;
}

/* Checkbox "Sì, aggiungo 1€" INGRANDITA */
.donazione-civi #crm-container .price-set-row input[type="checkbox"] + label {
    display: inline-block !important;
    background-color: transparent !important;
    color: #333 !important;
    border: none !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* E. Importo Totale */
.donazione-civi #crm-container #pricesetTotal { 
    display: flex !important;
    flex-direction: column !important; 
    justify-content: flex-start !important; 
    align-items: flex-start !important; 
    margin: 30px 0 5px 0 !important; 
    border-top: 1px solid #dbe2e8 !important;
    padding-top: 20px !important;
    width: 100% !important;
}
.donazione-civi #crm-container #pricesetTotal .label { 
    width: auto !important;
    margin-right: 0 !important; 
    margin-bottom: 5px !important; 
    font-size: 20px !important; 
    color: #003399 !important;
}
.donazione-civi #crm-container #pricesetTotal .content { 
    width: auto !important; 
    font-size: 45px !important; 
    font-weight: 900 !important;
    color: #003399 !important; 
    line-height: 1 !important; 
    margin: 0 !important;
}

/* ============================================================
   3. INPUT, SELECT E TEXTAREA (TESTO DIGITATO INGRANDITO A 18px)
   ============================================================ */

/* FORZATURA STRUTTURALE PER I MENU A TENDINA (Risolve il problema dei campi "ristretti") */
.donazione-civi #crm-container .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.donazione-civi #crm-container input.crm-form-text,
.donazione-civi #crm-container textarea,
.donazione-civi #crm-container select.crm-form-select,
.donazione-civi #crm-container .select2-container .select2-choice,
.donazione-civi #crm-container .select2-container .select2-selection--single {
    height: 55px !important;
    background-color: #f4f6f9 !important;
    background-image: none !important;
    border: 1px solid #dbe2e8 !important;
    border-radius: 6px !important;
    padding: 0 15px !important;
    font-size: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    color: #333 !important;
    line-height: 53px !important;
}

.donazione-civi #crm-container input.crm-form-text:focus,
.donazione-civi #crm-container textarea:focus {
    border: 2px solid #003399 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 51, 153, 0.1) !important;
    outline: none !important;
}

.donazione-civi #crm-container textarea {
    height: auto !important;
    min-height: 100px !important;
    padding-top: 15px !important;
}

/* ============================================================
   4. CHECKBOX GLOBALI E RICORRENTE 
   ============================================================ */
.donazione-civi #crm-container input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 20px !important;
    height: 20px !important;
    accent-color: #003399 !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* Riga Ricorrente */
.donazione-civi #crm-container .is_recur-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.donazione-civi #crm-container .is_recur-section .content {
    display: flex !important; 
    justify-content: flex-start !important; 
    align-items: center !important;
    flex-wrap: wrap !important;
}

.donazione-civi #crm-container .is_recur-section .content label {
    margin-right: 15px !important;
    font-size: 18px !important;
}

.donazione-civi #crm-container .is_recur-section .content select,
.donazione-civi #crm-container .is_recur-section .content .select2-container { 
    margin-left: 5px !important; 
    width: 150px !important;
    margin-bottom: 0 !important;
}

/* Riga Privacy */
.donazione-civi #crm-container .custom_pre_profile-group fieldset > div:has(input[type="checkbox"]) { 
    width: 100% !important; 
    margin-top: 10px !important; 
}
.donazione-civi #crm-container .custom_pre_profile-group fieldset > div:has(input[type="checkbox"]) .content { display: flex !important; align-items: center !important;
}
.donazione-civi #crm-container .custom_pre_profile-group fieldset > div:has(input[type="checkbox"]) label {
    font-size: 16px !important; 
    font-weight: 400 !important;
}

/* ============================================================
   5. GRIGLIA ANAGRAFICA E CAMPI A LARGHEZZA TOTALE (FLEXBOX)
   ============================================================ */

.donazione-civi #crm-container .custom_pre_profile-group:before { display: none !important; }
.donazione-civi #crm-container fieldset { border: none !important; padding: 0 !important; margin: 0 !important; }

@media (min-width: 992px) {
    /* Utilizzo di Flexbox per impedire lo "schiacciamento" dei campi */
    .donazione-civi #crm-container .custom_pre_profile-group fieldset {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    /* Pulizia dei div vuoti generati da CiviCRM che rompono la griglia */
    .donazione-civi #crm-container .custom_pre_profile-group fieldset > .clear {
        display: none !important;
    }

    /* Impostazione base per TUTTI i campi anagrafici a due colonne (48%) */
    .donazione-civi #crm-container .custom_pre_profile-group fieldset > div.crm-section {
        width: 48% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    /* ECCEZIONI: CAMPI A LARGHEZZA TOTALE (100%) */
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div#editrow-custom_21,
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div[id*="street_address"],
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div[class*='street_address'],
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div:has(textarea),
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div[class*='note'],
    .donazione-civi #crm-container .custom_pre_profile-group fieldset div[class*='Note'] {
        width: 100% !important;
    }

    /* FORZATURA DIRETTA SULL'INPUT DEL CODICE FISCALE (ID 21) */
    .donazione-civi #crm-container input[id^="custom_21"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   6. PULSANTE SUBMIT
   ============================================================ */
.donazione-civi #crm-container .crm-submit-buttons { 
    text-align: left !important;
    margin-top: 15px !important; 
}

.donazione-civi #crm-container #_qf_Main_upload-bottom { text-indent: -9999px !important; background: transparent !important; border: none !important; padding: 0 !important;
    width: auto !important; display: inline-block !important; }
.donazione-civi #crm-container #_qf_Main_upload-bottom:after { content: 'DONA ORA' !important; text-indent: 0 !important; display: block !important;
    background-color: #003399 !important; color: #ffffff !important; padding: 15px 50px !important; border-radius: 6px !important; font-size: 20px !important; font-weight: 800 !important;
    cursor: pointer !important; }

/* ============================================================
   7. CUSTOM SCROLLBAR (Eleganza e Leggerezza)
   ============================================================ */

::-webkit-scrollbar { width: 8px !important; }
::-webkit-scrollbar-track { background-color: #f4f6f9 !important; border-radius: 10px !important; }
::-webkit-scrollbar-thumb { background-color: #c0c8d1 !important; border-radius: 10px !important; border: 2px solid #f4f6f9 !important; }
::-webkit-scrollbar-thumb:hover { background-color: #a0abb6 !important; }

* { scrollbar-width: thin !important; scrollbar-color: #c0c8d1 #f4f6f9 !important; }</style>
<!-- end Simple Custom CSS and JS -->
