/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* --- Variabili CSS Globali (per coerenza e facile aggiornamento) --- */
:root {
    --primary-red: #E50506;
    --secondary-red: #e50c14; /* Leggermente più scuro, usato per category background */
    --tertiary-red: #a13313; /* Usato per il titolo della campagna */
    --orange-highlight: #f89d35;
    --form-background: #fbf1e5;
    --text-dark: #1d1d1d;
    --text-medium: #421f1d;
    --text-light: #ffffff;
    --background-light-grey: #f0f0f1;
    --background-white: #fff;
    --font-montserrat: 'Montserrat', sans-serif;
}

/* --- Stili Globali e di Base --- */
body {
    background-color: var(--background-light-grey);
    font-family: var(--font-montserrat); /* Imposta il font principale qui */
}

/* Centralizzazione del font per gli elementi specifici di Charitable che non ereditano dal body */
.charitable-campaign-field.charitable-campaign-field-campaign-description .charitable-campaign-builder-placeholder-template-text,
.charitable-campaign-wrap.template-disaster-relief .charitable-campaign-row > *,
.charitable-campaign-field.charitable-campaign-field-text,
.charitable-donation-form.charitable-template-minimal .charitable-fieldset .charitable-form-header,
.charitable-donation-form.charitable-template-minimal .donation-amounts li span.description,
.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount::before {
    font-family: var(--font-montserrat);
}

/*Nasconde la barra di progresso e percentuale standard di Charitable*/
.charitable-campaign-loop .charitable-progress-bar,
.charitable-campaign-loop .charitable-progress-bar-percentage,
.campaign-summary .campaign-donors,
.comments-area {
    display: none !important; /* Mantenuto !important per sovrascrivere stili Charitable di default */
}

/* Assicura che l'excerpt sia visibile se nascosto altrove */
.single-campaign .campaign-description {
    margin-bottom:0;
    font-size:2rem;
    color:#421F1D;
    line-height: 2.08rem;


}

/* Assicura che la barra circolare e l'importo raccolto siano visibili se nascosti altrove */
#campaign-right-sidebar-area .charitable-circular-progress,
.campaign-summary .campaign-figures { /* Questo è il contenitore che spesso include l'importo donato */
    display: flex !important;
    flex-direction: row;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    line-height: 30px;
    font-size: 20px !important;
    justify-content: center;
    gap: 20px;
    text-align: center;
}



/* --- Stili Comuni per Intestazione, Footer, Contenuto Principale --- */
/* Razionalizzato: Queste regole sembrano voler impostare la larghezza massima al 100% per vari elementi del layout.
    Vengono applicate a tutte le dimensioni dello schermo, quindi non c'è bisogno di media query separate per questo.
    Il padding-inline-start/end è stato spostato qui.
*/
.page-header .entry-title,
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*='elementor-page-']) .site-main {
    max-width: 100%; /* Rimosso !important se non strettamente necessario */
    padding-inline-start: 0;
    padding-inline-end: 0;
}

/* Disabilita il clearfix hack (::before) che occupa il primo slot della griglia */
.campaign-loop.campaign-grid::before {
    content: none !important; /* Rimuove il contenuto generato */
    display: none !important;  /* Assicura che non occupi spazio */
    width: 0 !important;      /* Precauzione aggiuntiva */
    height: 0 !important;     /* Precauzione aggiuntiva */
    margin: 0 !important;     /* Precauzione aggiuntiva */
    padding: 0 !important;    /* Precauzione aggiuntiva */
}


/* Applica il display flex al contenitore principale della tua loop carousel (il wrapper dello swiper) */
/* Questo è il primo passo per far sì che i tuoi slide si allineino correttamente */
/* Nasconde il carousel all'inizio */
.elementor-widget-loop-carousel .swiper {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Aggiungi una transizione fluida */
}

/* Quando il carousel è pronto (Swiper aggiunge .swiper-initialized) lo rende visibile */
.elementor-widget-loop-carousel .swiper.swiper-initialized {
    visibility: visible;
    opacity: 1;
}

.elementor-widget-loop-carousel .swiper-wrapper {
    display: flex;
    align-items: stretch; /* Questo è cruciale: fa sì che gli elementi figli (.swiper-slide) si estendano in altezza */
}

/* Forziamo ogni singolo slide ad occupare tutta l'altezza disponibile data dal swiper-wrapper */
.elementor-widget-loop-carousel .swiper-slide {
    height: auto; /* Permetti a Swiper di gestire l'altezza iniziale */
    flex-shrink: 0; /* Impedisce allo slide di restringersi */
    /* Potresti aggiungere una min-height se vuoi una base minima, ma con align-items: stretch non dovrebbe essere necessario */
}

.charitable-modal {
    margin-left: -35% !important;
    max-width: 70% !important;
    background-color: var(--form-background) !important;

}

@media screen and (max-width: 920px) {
    .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-1, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-10, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-2, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-5, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-7, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-8, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-9 {
        grid-template-columns: 1fr 1fr;
    }


    .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-4, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-6 {
        grid-template-columns: 1fr 1fr !important;
    }

    .charitable-modal {
        width: 80% !important;
        margin-left: -40% !important;
        max-width: 80% !important;
        padding: 1em !important;
    }
}
 

/* Tutti i CSS precedenti vanno bene, ma ecco i selettori precisi per la tua loop: */

/* 1. Assicurati che ogni singolo articolo (loop item) sia un contenitore flex e occupi l'intera altezza della sua cella. */
.elementor-widget-loop-carousel .e-loop-item {
    display: flex;
    flex-direction: column; /* Contenuto interno impilato verticalmente */
    height: 100%; /* Permette all'articolo di allinearsi all'altezza della riga di griglia più alta */
}

/* 2. Rendi il contenitore principale di tutti gli elementi all'interno dell'articolo (immagine, categorie, testo, bottone) flessibile. */
/* Il tuo HTML mostra data-id="522528f6" come contenitore principale dell'e-loop-item */
.elementor-widget-loop-carousel .e-loop-item > .elementor-element-522528f6 {
    display: flex;
    flex-direction: column; /* Impila verticalmente immagine, categorie e il blocco di testo/bottone */
    flex-grow: 1; /* Permetti a questo contenitore di occupare tutto lo spazio disponibile all'interno dell'articolo */
    height: 100%; /* Assicura che si estenda per l'intera altezza del suo genitore (.e-loop-item) */
}

/* 3. Il contenitore del titolo, della descrizione (excerpt) e del bottone (data-id="36920a29"). */
/* Ho corretto l'ID, prima avevi 0ee8cbc, ma dal tuo HTML è 36920a29 per il div che racchiude testo e bottone. */
.elementor-widget-loop-carousel .e-loop-item .elementor-element-36920a29 {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Cruciale: questo blocco occupa tutto lo spazio rimanente per mantenere l'altezza uniforme */
    justify-content: space-between; /* Spinge il blocco di testo/titolo in alto e il bottone in basso */
    /* Aggiungi un padding o margin per lo spazio tra il testo e il bottone se necessario */
    padding-bottom: 20px; /* Regola questo valore per lo spazio desiderato */
}

/* 4. Il contenitore specifico di titolo ed excerpt (data-id="405c08cf"). */
/* Dal tuo HTML, questo è il contenitore diretto di titolo e excerpt. */
.elementor-widget-loop-carousel .e-loop-item .elementor-element-405c08cf {
    flex-grow: 1; /* Questo fa sì che questo contenitore si espanda, garantendo l'altezza uguale */
    display: flex;
    flex-direction: column;
}


/* 6. Il bottone (data-id="433f7f7a"). */
.elementor-widget-loop-carousel .elementor-element-433f7f7a {
    margin-top: auto; /* Spinge il bottone verso il fondo del contenitore flex-column */
    flex-shrink: 0; /* Impedisce al bottone di rimpicciolirsi */
}

/* Opzionale: Enforce consistent image height (data-id="2c44a3c7") */
.elementor-widget-loop-carousel .elementor-element-2c44a3c7 img {
    height: 200px; /* Regola l'altezza desiderata per le immagini */
    object-fit: cover;
    width: 100%;
}
/* --- Stili Pagina Campagne (Singola Pagina / Template PHP) --- */

/* Colore di sfondo generale per la pagina singola campagna e il lato destro */
body.single-campaign { /* Questa classe è solitamente aggiunta da WordPress per le singole pagine post type 'campaign' */
    background-color: var(--form-background); /* #fbf1e5 */
}

/* Stile per la COLONNA SINISTRA (Modulo donazione, statistiche, ecc.) */
.campaign-left {
    background-color: var(--background-white); /* #fbf1e5, o lascialo #f9f9f9 se preferisci */
    padding: 20px;
}


/* Titolo della Campagna */
.charitable-campaign-field.charitable-campaign-field-campaign-title h1 {
    color: var(--tertiary-red) !important; /* Mantenuto !important se Elementor sovrascrive */
    font-size: 36px;
    text-transform: uppercase;
    line-height: 42px; /* Rimosso !important */
    font-weight: 600;
    text-align: center; /* Rimosso !important */
    margin: 0 auto; /* Spostato qui per applicare sempre */
}

/* Sezione Sticky nel sidebar (se applicabile) */
.section .charitable-field-section {
    position: sticky !important; /* Mantenuto !important per funzionalità sticky */
    top: 0;
}

/* Background per le colonne pari (template disaster-relief) */
.charitable-campaign-column:nth-child(even) {
    max-width: 100% !important; /* Mantenuto !important */
    background-color: var(--form-background);
}

/* Nasconde la row 1 del template disaster-relief (se non utilizzata) */
.charitable-campaign-wrap.template-disaster-relief #charitable-template-row-1 {
    display: none;
}

/* Stili per le intestazioni h5 nel template disaster-relief */
.charitable-campaign-wrap.template-disaster-relief .charitable-campaign-row h5 {
    font-size: 24px !important; /* Mantenuto !important */
}

/* Layout del bottone Dona Ora nella singola campagna */
.campaign-right-sidebar-area .campaign-donation {
    display: flex;
    justify-content: center;
    text-align: center;
    /*margin-top: 20px; 
}
    padding: 0 15px;*/
}

/* Stili per il bottone dona ora specifico del template disaster-relief */
.charitable-campaign-wrap.template-disaster-relief .charitable-campaign-field-donate-button a.donate-button {
    border-radius: 35px;
    background-color: var(--primary-red) !important; /* Mantenuto !important */
    color: var(--text-light);
    text-align: center !important; /* Mantenuto !important */
    text-decoration: none !important; /* Mantenuto !important */
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    width: 60%;
}

.charitable-campaign-wrap.template-disaster-relief .charitable-campaign-field-donate-button a.donate-button:hover {
    filter: none !important; /* Mantenuto !important */
}

/* Stili per il summary della campagna (larghezze) */
.campaign-summary .campaign-summary-item {
    width: 100% !important; /* Mantenuto !important */
}

/* --- Stili Griglia Campagne in Loop (Archivi) --- */

/* Contenitore principale della griglia delle campagne */
.campaign-loop.campaign-grid .campaign-donation {
    margin-bottom: 40px !important;
}
@media (min-width: 1200px){
.campaign-loop.campaign-grid.campaign-grid-3 {
    display: grid; /* Abilita il layout a griglia */
    grid-template-columns: repeat(3, 1fr) !important; /* Default: 3 colonne di uguale larghezza (sopra 1200px) */
    gap: 30px !important; /* Spazio tra gli elementi della griglia */
    list-style: none; /* Rimuove i pallini della lista se è un <ol> o <ul> */
    margin: 0; /* Rimuove i margini predefiniti della lista */
    padding: 0; /* Rimuove i padding predefiniti della lista */
}
}

/* Stili per le singole campagne all'interno della griglia */
.campaign-loop.campaign-grid > li.campaign {
    width: auto !important; /* Annulla eventuali width: 100% !important; o simili che interferirebbero con la griglia */
    box-sizing: border-box; /* Assicurati che padding e border siano inclusi nella larghezza */
    background-color: var(--form-background); /* Sfondo bianco per le card */
    border-radius: 8px; /* Bordo arrotondato */
    padding: 20px; /* Padding interno */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra leggera */
    text-align: center; /* Centra il contenuto delle card */
    display: flex; /* Mantiene flexbox per l'allineamento verticale all'interno della card */
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
}

/* Immagine in miniatura della campagna */
.campaign-loop.campaign-grid > li.campaign img { /* Selettore più specifico */
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px; /* Spazio sotto l'immagine */
    border-radius: 4px; /* Bordo arrotondato per le immagini */
}

.campaign-loop.campaign-grid .campaign img.attachment-medium {
    height: 300px !important; /* Imposta un'altezza fissa per tutte le immagini. Puoi modificarla a tuo piacimento. */
    object-fit: cover !important; /* Assicura che l'immagine copra l'intero contenitore, ritagliando le parti in eccesso. */
    width: 100% !important; /* Assicura che l'immagine occupi tutta la larghezza disponibile nel suo contenitore. */
}

/* Stili per il titolo all'interno delle card */
.campaign-loop.campaign-grid > li.campaign h3 {
    font-size: 27px; /* Dimensione del font per i titoli delle campagne */
    line-height: 27px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 25px 10px 25px; 
    color: var(--primary-red); /* Applica il colore del titolo anche qui */
}

/* Stili per la descrizione */
.campaign-loop.campaign-grid > li.campaign .campaign-description {
    font-size: 1em;
    color: var(--text-medium);
    margin-bottom: auto; /* Spinge il contenuto verso il basso, utile per altezze uniformi */
    text-align: left; /* Ritorna allineamento testo a sinistra per descrizioni */
    padding: 0 25px 15px;
}

/* Stile per il contenitore del cerchio e delle statistiche */
.campaign-loop.campaign-grid > li.campaign .campaign-progress-and-stats {
    display: flex; /* Rendi questo contenitore un flex container */
    flex-direction: row; /* Impila gli elementi orizzontalmente */
    align-items: center; /* Centra orizzontalmente gli elementi figli */
    margin-top: 15px; /* Spazio sopra */
    margin-bottom: 15px; /* Spazio sotto */
    padding: 0 25px; /* Rimuovi padding se lo vuoi centrato senza margini laterali interni */
    background-color: var(--background-white);
}

/* Stile per il contenitore del cerchio di progresso. */
.campaign-loop.campaign-grid .charitable-progress-circle {
    flex-shrink: 0; /* Impedisce al cerchio di rimpicciolirsi */
    width: 60px; /* Dimensione del contenitore del cerchio */
    height: 60px;
    margin: 0 auto; /* Centra il cerchio */
}

.campaign-loop.campaign-grid .charitable-progress-circle svg {
    width: 100%; /* Assicurati che l'SVG riempia il suo contenitore */
    height: 100%;
}

.campaign-loop.campaign-grid .charitable-progress-circle .bg {
    stroke: #e0e0e0;
    stroke-width: 8px; /* Spessore del tratto del cerchio per il loop */
}

.campaign-loop.campaign-grid .charitable-progress-circle .progress {
    stroke: var(--secondary-red); /* #e50c14 */
    stroke-width: 8px; /* Spessore del tratto del cerchio per il loop */
}

.campaign-loop.campaign-grid .charitable-progress-circle .percentage-text {
    font-size: 14px; /* Dimensione del font per il testo percentuale nel loop */
    fill: var(--secondary-red);
}

/* Stile per il contenitore delle statistiche affiancate (nel loop) */
.campaign-loop.campaign-grid > li.campaign .campaign-donation-stats-inline {
    display: flex;
    justify-content: space-around; /* Spazia gli elementi */
    width: 100%; /* Occupa tutta la larghezza disponibile */
    margin-top: 15px; /* Spazio sopra le statistiche */
    flex-wrap: wrap; /* Permette agli elementi di andare a capo su schermi piccoli */
}

/* Stile per ogni singola voce statistica (es. Obiettivo) */
.campaign-loop.campaign-grid > li.campaign .campaign-donation-stats-inline .stat-item {
    text-align: center;
    flex: 1 1 45%; /* Due item per riga su schermi medi, uno per riga su schermi molto piccoli */
    margin: 5px;
}

/* Stile per i valori numerici delle statistiche */
.campaign-loop.campaign-grid > li.campaign .campaign-donation-stats-inline .stat-item span.amount,
.campaign-loop.campaign-grid > li.campaign .campaign-donation-stats-inline .stat-item span.goal-amount {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-red);
    line-height: 1.2;
}

/* Stile per le etichette delle statistiche */
.campaign-loop.campaign-grid > li.campaign .campaign-donation-stats-inline .stat-item span.label {
    display: block;
    font-size: 0.9em;
    color: var(--text-medium);
    line-height: 1.2;
}

/* Stile per il bottone "Dona Ora" nel loop */
.campaign-loop.campaign-grid > li.campaign .campaign-donation .button { /* Selettore più specifico */
    margin-top: 0;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--secondary-red);
    border: 2px solid var(--secondary-red);
    border-radius: 50px;
    text-decoration: none;
    padding: 6px 20px;
    display: inline-block;
    line-height: 34px;
    background-color: transparent;
    text-transform: uppercase;
}


/* --- Media Queries per Griglia Campagne --- */

/* Media Query per desktop < 1200px (2 colonne) */
@media (max-width: 1199px) { /* Applica quando la larghezza è da 0 a 1199px */
    .campaign-loop.campaign-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne */
        gap: 25px; /* Spazio leggermente ridotto */
    }
}

/* Media Query per tablet < 850px (1 colonna) */
@media (max-width: 849px) { /* Applica quando la larghezza è da 0 a 849px */
    .campaign-loop.campaign-grid {
        grid-template-columns: 1fr; /* 1 colonna */
        gap: 20px; /* Spazio leggermente ridotto */
    }
    /* Potresti voler centrare le card a colonna singola */
    .campaign-loop.campaign-grid {
        justify-items: center; /* Centra gli elementi nella griglia a singola colonna */
    }
    .campaign-loop.campaign-grid > li.campaign {
        max-width: 400px; /* Limita la larghezza massima della card su mobile se necessario */
        width: 90%; /* Occupa quasi tutta la larghezza disponibile */
    }
}


/* --- Vecchie Media Queries e Stili che potresti voler rivedere/pulire --- */
/* NOTA: Molte delle regole 'max-width' qui sotto potrebbero ora essere ridondanti o conflittuali
   con la nuova logica CSS Grid per `.campaign-loop.campaign-grid`.
   Ti consiglio di testare attentamente e rimuovere quelle che causano problemi o non sono più necessarie.
*/

/* Questo blocco era destinato a un layout a colonne tradizionale o masonry, non più necessario con CSS Grid */
/*
@media (max-width: 767px) {
    .campaign-loop.campaign-grid .campaign,
    .campaign-loop.campaign-grid .campaign.hentry {
        width: 49% !important;
    }
}
*/

/* Vecchie media queries per tablet che potrebbero sovrapporsi */
@media (max-width: 1023px) {
    /* Le seguenti regole non sono più necessarie per la griglia delle campagne,
       poiché gestita dalle nuove media query più specifiche per `campaign-loop.campaign-grid` */
    /*
    .campaign-loop.campaign-grid .campaign.hentry,
    .campaign-loop.campaign-grid li.campaign {
        max-width: 49% !important;
        margin: 25px 0;
    }
    */
    .campaign-loop.campaign-grid > li.campaign .campaign-progress-and-stats {
    flex-direction: column; /* Impila gli elementi verticalmente */
    }
}


/* --- Altre Media Queries e Stili del tuo file originale (NON MODIFICATI) --- */

/* Desktop Large (> 1200px) - se necessario, ma sembra ridondante */
@media (min-width: 1200px) {
    /* Il max-width: 100% è stato spostato in una regola generale sopra */
}

/* Tablet Verticale (max 939px) */
@media (max-width: 939px) { /* Corretto */
    .charitable-campaign-wrap.template-disaster-relief #charitable-template-row-0 {
        max-width: 100% !important; /* Mantenuto !important */
    }
}

/* Desktop Medium (min 940px) */
@media (min-width: 940px) { /* Corretto */
    .charitable-campaign-wrap.template-disaster-relief #charitable-template-row-0 .charitable-campaign-column:nth-child(odd) {
        max-width: 100% !important; /* Mantenuto !important */
        padding-left: 7% !important; /* Mantenuto !important */
    }
}
/*
/* Tablet Portrait (max 767px) */
@media (max-width: 767px) {
    
    .campaign-loop.campaign-grid.campaign-grid-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1em;
    }

    .campaign-loop.campaign-grid > li.campaign h3 {
    font-size: 27px;
    line-height: 27px;
    margin: 0 5% 10px 5%;
    }

    /* Modulo Donazione: Campi Gateway */
    .charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector {
        flex-direction: column; /* Impila i bottoni di pagamento */
        align-items: center;
        gap: 20px;
        margin: 20px 0 50px 0 !important; /* Mantenuto !important */
        justify-content: space-between; /* Mantenuto, ma potrebbe essere meno rilevante con column */
    }

    .charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector li {
        max-width: 80% !important; /* Mantenuto !important */
        width: 100% !important; /* Mantenuto !important */
    }

    /* Campi Radio */
    .charitable-form-field.charitable-radio-list li {
        line-height: 1em;
        text-align: center;
        width: 40%;
    }

}

/* Smartphone / Tablet Small (max 650px) */
@media (max-width: 650px) {
    .charitable-campaign-wrap.template-disaster-relief #charitable-template-row-0 .charitable-campaign-column:nth-child(even) {
        max-width: 100% !important; /* Mantenuto !important */
    }

    /* Modulo Donazione: Campo Numero 1 */
    .charitable-donation-form.charitable-template-minimal #charitable-donor-fields #charitable-user-fields .charitable-form-group.charitable-form-group-number-1 {
        margin: 0 8% !important; /* Mantenuto !important */
    }
    .charitable-form-field.charitable-submit-field {
        width: auto !important;
    }   
}

/* Smartphone (max 599px) */
@media (max-width: 599px) {
    .charitable-donation-form .donation-amounts .donation-amount {
        max-width: inherit;
        width: 100%;
    }

    /* Modulo Donazione: Griglia Ammontare */
    .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-4,
    .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-6 {
        grid-template-columns: 1fr !important; /* Mantenuto !important */
        gap: 25px;
    }

    /* Modulo Donazione: Campo Donazione Libera */
    .charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount li {
        background: var(--form-background) !important; /* Mantenuto !important */
        width: 100% !important; /* Mantenuto !important */
        padding: 0;
    }

    /* Campi Radio Ricorrenti */
    ul.charitable-radio-list.charitable-form-field.charitable-form-field-radio.recurring-donation-period.recurring-donation-frequency.required-field.even {
        gap: 25px;
        flex-direction: column;
        align-items: center;
    }

    .charitable-form-field.charitable-radio-list li {
        width: 60% !important; /* Mantenuto !important */
        margin: 0 auto !important; /* Mantenuto !important */
    }

    #campaign-right-sidebar-area .charitable-circular-progress, .campaign-summary .campaign-figures {
        display: flex !important
;
    flex-direction: column;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    line-height: 30px;
    font-size: 20px !important;
    justify-content: center;
    gap: 10px;
    text-align: center;
    }
}

/* --- Stili Pagina Campagne con Contenuti Personalizzati Elementor (Singola Pagina) --- */
.campaign .page-content {
    max-width: 65% !important; /* Mantenuto !important */
    margin: 0 auto;
}

.campaign .page-content img {
    margin: 0 auto;
}

/* --- Stili Modulo Donazione (Generale) --- */

/* Nasconde le intestazioni dei fieldset nei form di Charitable (es. Dettagli Donatore) */
.charitable-form-fields .charitable-fieldset-field-wrapper .charitable-fieldset-field-header {
    display: none;
}

/* Modulo Donazione: Intestazione principale */
.charitable-donation-form.charitable-template-minimal .charitable-fieldset .charitable-form-header {
    font-size: 29px !important; /* Mantenuto !important */
    line-height: 41px !important; /* Mantenuto !important */
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    color: #db6a1a; /* Colore specifico, potresti aggiungerlo alle variabili */
    margin-bottom: 10px;
}

/* Modulo Donazione: Gruppo di Campi Numero 1 (probabilmente email/nome) */
.charitable-donation-form.charitable-template-minimal #charitable-donor-fields #charitable-user-fields .charitable-form-group.charitable-form-group-number-1 {
    display: flex;
    flex-direction: row;
    align-content: center;
    width: auto !important; /* Mantenuto !important */
    gap: 15px;
    flex-wrap: wrap;
    margin: 0 15%;
}

/* Modulo Donazione: Campo singolo all'interno del gruppo */
.charitable-donation-form.charitable-template-minimal #charitable-donor-fields #charitable-user-fields .charitable-form-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Modulo Donazione: Ammontari suggeriti */
.charitable-donation-form .donation-amounts .donation-amount {
    display: block;
    width: auto !important; /* Mantenuto !important */
    padding: .5em 1em;
    margin: 0 !important; /* Mantenuto !important */
    font-size: 1em;
    cursor: pointer;
    padding: 25px;
    background-color: var(--text-light);
}

.charitable-donor-details {
    text-align: center;
}

.charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount label > .amount::before {
    content: "Con ";
    font-size: 26px;
}

.charitable-donation-form .donation-amounts .donation-amount .custom-donation-amount-wrapper, .charitable-donation-form .donation-amounts .donation-amount>label {
    font-size: 26px !important;
}

.charitable-donation-form .suggested-donation-amount label {
    color: var(--text-dark);
}

.charitable-donation-form.charitable-template-minimal .donation-amounts li span.description.donation-amount.selected label {
    color: var(--text-light);
}

.charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-4 .donation-amount {
    background-color: var(--text-light);
    gap: 30px !important; /* Mantenuto !important */
    padding: 15px;
    margin: 0 !important; /* Mantenuto !important */
}

/* Modulo Donazione: Campo Donazione Libera */
.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount span.custom-donation-amount-wrapper {
    display: flex;
    align-items: center;
    background: var(--form-background) !important; /* Mantenuto !important */
    padding: 0 !important; /* Mantenuto !important */
}

.charitable-donation-form .donation-amounts .donation-amount.custom-donation-amount .custom-donation-amount-wrapper::before,
.charitable-donation-form .donation-amounts li.custom-donation-amount .custom-donation-amount-wrapper::before,
.charitable-donation-form .charitable-radio-list .donation-amount.custom-donation-amount .custom-donation-amount-wrapper::before,
.charitable-donation-form .charitable-radio-list li.custom-donation-amount .custom-donation-amount-wrapper::before {
    top: 20px;
    content: "\20AC";
    left: 8%;
    z-index: 500;
    font-size: 30px;
}

.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount li input[type=text],
.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount li,
.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount li.selected {
    background: var(--form-background) !important; /* Mantenuto !important */
    color: var(--text-dark) !important; /* Mantenuto !important */
    font-size: 18px !important; /* Mantenuto !important */
    padding: 0 15px !important; /* Mantenuto !important */
}

/* Modulo Donazione: Campi Periodici */
#charitable_field_recurring_donation::before {
    display: block !important; /* Mantenuto !important */
    width: 100%;
    content: "Donazioni periodiche";
    text-align: center;
    padding: 20px;
}

.charitable-donation-form ul.charitable-radio-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.charitable-donation-form ul.charitable-radio-list li input {
    display: none;
}

.charitable-donation-form ul.charitable-radio-list li label {
    width: 100%;
    display: block;
    padding: 20px;
    cursor: pointer;
    background-color: var(--text-light);
}

.charitable-donation-form ul.charitable-radio-list li input:checked + label {
    background: var(--primary-red);
    color: var(--text-light);
}

.charitable-form-field.charitable-radio-list li {
    margin: 0 !important; /* Mantenuto !important */
}

/* Modulo Donazione: Campi Gateway (metodi di pagamento) */
.charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector li {
    max-width: 50%;
    width: 30%;
    height: auto;
    text-align: center;
}

.charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector li input[type=radio]:checked+label {
    background-color: var(--primary-red) !important; /* Mantenuto !important */
    color: var(--text-light) !important; /* Mantenuto !important */
}

#charitable-gateway-selector li:nth-child(2) label {
    word-break: break-word !important;
    hyphens: auto;
}

.charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector li label {
    padding: 25px !important; /* Mantenuto !important */
    min-height: 100%;
    justify-content: center;
    line-height: 22px !important;
    font-size: 18px !important;
    height: 100%;
}

.charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector li input[type=radio]:checked+label::before {
    display: none;
}

.charitable-donation-form.charitable-template-minimal #charitable-gateway-fields #charitable-gateway-selector {
    margin: 20px 1% 50px 1%; 
    justify-content: space-between;
}

/* Modulo Donazione: Campo invio */
.charitable-form-field.charitable-submit-field {
    width: 300px;
    margin: 30px auto;
}

/* --- Bottoni Menu --- */
.butt-dona {
    background-color: var(--primary-red) !important; /* Mantenuto !important */
    color: var(--text-light) !important; /* Mantenuto !important */
    border-radius: 25px 0 0 25px !important;
}

.butt-dona-mobile, .butt-dona-mobile a {
    background-color: var(--primary-red) !important; /* Mantenuto !important */
    color: var(--text-light) !important; /* Mantenuto !important */
}

li.butt-anno .elementor-item {
    font-family: verveine, sans-serif !important;
    font-size: 22px !important;
    line-height: 26px !important;
    color: rgb(219, 106, 1) !important;
    font-weight: 400 !important;
}

/* Stile per il background dell'elemento di menu selezionato (attivo) */
/* Applicato ESCLUSIVAMENTE al menu con ID #menu-2-f3cd85f */
#menu-2-f3cd85f .menu-item.current-menu-item > .elementor-item,
#menu-2-f3cd85f .menu-item.current_page_item > .elementor-item,
#menu-2-f3cd85f .elementor-item-active {
    background-color: rgb(241, 241, 241) !important; /* Colore grigio chiaro per lo stato selezionato */
    /* Puoi anche voler regolare il colore del testo per contrasto */
    /* color: black !important; */
}

/* Stile per l'hover dell'elemento di menu selezionato */
/* Mantieni lo stesso background lightgray anche al passaggio del mouse sull'elemento attivo */
#menu-2-f3cd85f .menu-item.current-menu-item > .elementor-item:hover,
#menu-2-f3cd85f .menu-item.current_page_item > .elementor-item:hover,
#menu-2-f3cd85f .elementor-item-active:hover {
    background-color: rgb(241, 241, 241) !important; /* Mantiene il background lightgray anche in hover */
    /* Se avevi cambiato il colore del testo per l'hover normale, qui puoi impostarlo per l'hover dello stato attivo */
    /* color: black !important; */
}

/* Stile per il bottone Donate now - Sovrascrive Elementor */
.elementor-100284 .elementor-element.elementor-element-57ffcd3 .elementor-nav-menu--main li.butt-dona .elementor-item {
    color: white !important;
    fill: white !important;
}

/* Stile per il bottone Donate now al passaggio del mouse */
.elementor-100284 .elementor-element.elementor-element-57ffcd3 .elementor-nav-menu--main li.butt-dona .elementor-item:hover {
    color: white !important;
    fill: white !important;
}

/* Stile per il bordo, se vuoi che sia sul li */
.elementor-100284 .elementor-element.elementor-element-57ffcd3 .elementor-nav-menu--main li.butt-dona {
    border-radius: 25px 0 0 25px !important;
}

/*.menu-item-98821 > a {
    color: var(--text-light) !important; /* Mantenuto !important */
/*}*/

.menu-item-98827 > a {
    background-color: var(--primary-red) !important; /* Mantenuto !important */
    color: var(--text-light) !important; /* Mantenuto !important */
    line-height: 15px;
    padding: 9px 24px !important; /* Mantenuto !important */
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

/* --- Unlimited Elements Plugin Post Carousel --- */
.ue-grid-item-category {
    background-color: var(--secondary-red);
    min-height: 60px;
    align-content: center;
    text-align: left;
}

.owl-item.active {
    margin-bottom: 30px;
}

/* --- Bottoni Invia Ninja Form --- */
.butt-form {
    background-color: white !important; /* Mantenuto !important */
    color: var(--text-medium) !important; /* Mantenuto !important */
    border: 1px solid #666 !important; /* Mantenuto !important */
    border-radius: 5px !important; /* Mantenuto !important */
    padding: 12px !important; /* Mantenuto !important */
    font-size:16px !important;
    line-height: 12px !important;
}


.butt-form:hover {
    background-color: var(--text-light) !important; /* Mantenuto !important */
    color: var(--text-dark) !important; /* Specifico, potresti aggiungere una variabile */
    border: 0 solid var(--text-dark) !important; /* Mantenuto !important */
    border-radius: 5px !important; /* Mantenuto !important */
}

#nf-form-2_1-cont .nf-field-label label {
    font-weight: 400 !important;
}

#nf-form-2-cont .nf-field-container.submit-container .nf-field-element, #nf-form-15-cont .nf-field-container.submit-container .nf-field-element {
    text-align: center !important;

}

/* --- Pagine Login/Registrazione (Nascondi Footer) --- */
/* Raggruppato: Selettori specifici per pagina ID e classi Elementor per nascondere footer o sezioni */
body.page-id-741 .elementor-element.elementor-element-40945aa.e-con-full.e-flex.wpr-particle-no.wpr-jarallax-no.wpr-parallax-no.wpr-sticky-section-no.e-con.e-child,
body.page-id-741 .elementor-97558 .elementor-element.elementor-element-27e85b7,
body.page-id-849 .elementor-element.elementor-element-40945aa.e-con-full.e-flex.wpr-particle-no.wpr-jarallax-no.wpr-parallax-no.wpr-sticky-section-no.e-con.e-child,
body.page-id-849 .elementor-97558 .elementor-element.elementor-element-27e85b7 {
    display: none !important; /* Mantenuto !important per sicurezza */
}

@media (max-width: 768px) { /* Applica queste regole per schermi fino a 768px di larghezza */

    /* Regole generali per qualsiasi contenitore di campo Ninja Forms */
    .nf-form-cont .nf-field-container {
        width: 100% !important; /* Ogni campo occuperà il 100% della larghezza */
        float: none !important; /* Rimuove qualsiasi float applicato per layout a colonne */
        clear: both !important; /* Assicura che ogni campo inizi su una nuova riga */
        margin-left: 0 !important; /* Rimuove margini laterali indesiderati */
        margin-right: 0 !important; /* Rimuove margini laterali indesiderati */
        margin-bottom: 20px !important; /* Aggiungi un po' di spazio tra i campi */
        padding: 0 10px !important; /* Aggiungi un piccolo padding orizzontale se necessario */
        box-sizing: border-box; /* Assicura che padding e border siano inclusi nella larghezza */
        display: block !important; /* Assicura che il contenitore sia un blocco normale */
    }

    /* Regole per sovrascrivere le classi di layout specifiche di Ninja Forms (es. one-half, one-third) */
    .nf-form-cont .nf-field-container.one-half,
    .nf-form-cont .nf-field-container.one-third,
    .nf-form-cont .nf-field-container.first, /* La classe 'first' a volte resetta i margini */
    .nf-form-cont .nf-field-container.last { /* La classe 'last' a volte resetta i margini */
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}



    /* Regole per la label e la checkbox della privacy (o simili) */
    .nf-form-cont .nf-field-container.checkbox-container .nf-field-label label {
        display: block !important; /* La label del testo deve essere un blocco per andare a capo */
        white-space: normal !important; /* Permette al testo di andare a capo */
        width: auto !important; /* L'altezza si adatta al testo */
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .nf-form-cont .nf-field-container.checkbox-container .nf-field-element input[type="checkbox"] {
        display: inline-block !important; /* La checkbox rimane in linea, ma occupa spazio */
        vertical-align: middle !important; /* Allineamento verticale con il testo */
        margin-right: 10px !important; /* Spazio a destra della checkbox */
    }

    /* Se hai un messaggio di campi obbligatori che va a capo male */
    .nf-form-cont .nf-form-fields-required {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 10px; /* Adatta il padding al contenitore */
    }

    /* Se il wrapper dei campi ha stili flex o grid che impediscono il wrapping */
    .nf-form-cont .nf-form-layout form > div {
        display: block !important;
    }
}




.charitable-donation-form.charitable-template-minimal .donation-amounts li span.description.donation-amount.selected label {
  color: white;
}
.charitable-donation-form .donation-amounts .donation-amount.selected {
  background-color: #e50506 !important;
  color: white;
}

.post-45 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:first-child, .post-3614 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:first-child, .elementor-element-907d11a .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:first-child, #popmake-98028 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:first-child {

  background-image: url('/wp-content/uploads/ico_educazione.svg');
  background-repeat: no-repeat;
  background-size: 100px;
  padding-top: 150px !important;
  background-position: center 15px !important;

}  
.post-45 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount, .post-3614 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount, .elementor-element-907d11a .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount, #popmake-98028 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount {

  background-image: url('/wp-content/uploads/ico_salute-1.svg');
  background-repeat: no-repeat;
  background-size: 100px;
  padding-top: 150px !important;
  background-position: center 15px !important;

}

.post-45 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:last-child, .post-3614 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:last-child, #popmake-98028 .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:last-child, .elementor-element-907d11a .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount:last-child {

  background-image: url('/wp-content/uploads/ico_formazione-1.svg');
  background-repeat: no-repeat;
  background-size: 100px;
  padding-top: 150px !important;
  background-position: center 15px !important;

}

.charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3 .donation-amount {
  background-color: white;
}

.charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-3, .charitable-donation-form.charitable-template-minimal .donation-amounts.has-suggested-amounts.donation-amounts-count-4 {
  gap: 30px;
  margin-bottom: 30px;
}
.post-45 .elementor-element.elementor-element-27e85b7.e-con-full.e-flex.wpr-particle-no.wpr-jarallax-no.wpr-parallax-no.wpr-sticky-section-no.e-con.e-child {

        display: none !important;
    }


    .charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount::before{
content: "OPPURE UNA DONAZIONE LIBERA";
    font-size: 24px;
    font-weight: bolder;
    color: black;
    text-transform: uppercase;
    line-height: 32px;
    text-align: center;
    padding-bottom: 30px;

}
.charitable-donation-form.charitable-template-minimal .donation-amounts.donation-suggested-amount{
flex-direction: column !important;
background-color: white;
padding: 30px;
}

/*/* Stili per le immagini delle campagne nelle loop (es. pagine archivio)
/* Rende le immagini responsive e fluid, ignorando gli attributi width/height nell'HTML 
/*.campaign-loop-item img.attachment-medium.size-medium,
/*.campaign-loop-item img.wp-post-image {
/*    width: 100% !important; /* Forza la larghezza al 100% del contenitore */
/*    height: auto !important; /* Mantiene le proporzioni */
/*    max-width: 100% !important; /* Assicura che non superi mai il 100% */
/*    }
/*    
/*    /* Potrebbe essere utile anche per il contenitore dell'immagine, a seconda del markup del tuo tema/plugin */
/*    .campaign-loop-item {
/*        display: block; /* O flex, a seconda del layout desiderato del singolo elemento */
/*        margin-bottom: 20px; /* Spazio tra gli elementi della loop */
/*        /* Aggiungi qui regole per la disposizione degli elementi della loop (es. griglia) se non già presenti */
/*        }
/*        
/*        /* Esempio di come potresti voler disporre gli elementi della loop in una griglia */
/*        .campaigns-archive-grid { /* Assumi un contenitore per tutti gli elementi della loop */
/*            display: grid;
/*            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 colonne su schermi larghi, 1 su mobile */
/*            gap: 30px; /* Spazio tra le colonne e le righe */
/*            }
/*            
/*            /* Rendere le immagini delle campagne nelle loop completamente responsive */
/*            /* Questo selettore è molto specifico per le immagini all'interno delle card campagna */
/*li.campaign img.attachment-medium,
/*li.campaign img.size-medium,
/*li.campaign img.wp-post-image {
/*    width: 100% !important;     /* Forza la larghezza al 100% del contenitore */
/*    height: auto !important;    /* Mantiene le proporzioni automaticamente */
/*    max-width: 100% !important; /* Assicura che non superi mai il 100% */
/*    display: block !important; /* Rende l'immagine un blocco per evitare spazi extra e migliorare il layout */
/*    margin-bottom: 15px !important; /* Aggiunge uno spazio sotto l'immagine, se desiderato */
/*}
/*
/* Stili per la disposizione delle card delle campagne in una griglia */
/*/* Basato sulla classe 'campaign' che hai fornito per ogni <li> */
/*/* Se le tue 'li.campaign' sono contenute in un <ul> o <div> con una classe specifica (es. .charitable-campaigns-archive), puoi renderlo ancora più specifico: */
/*/* .charitable-campaigns-archive ul, .charitable-campaigns-archive div { ... */
/*.charitable-campaigns-list.charitable-campaigns-loop, /* Classe comune del plugin Charitable per la lista delle campagne */
/*.charitable-campaigns-wrapper ul.products, /* A volte le liste di Charitable sono in <ul> con classe 'products' */
/*ul.campaigns-grid-list, /* Esempio se il tuo tema ha una classe specifica per la griglia delle campagne */
/*.campaigns-archive-container { /* Esempio di un div contenitore per la griglia */
/*    display: grid;
/*    /* La griglia si adatta: minimo 280px per colonna, crescono per occupare spazio, max 3 colonne */
/*    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/*    gap: 30px; /* Spazio tra le card (colonne e righe) */
/*    list-style: none; /* Rimuove i puntini della lista se il contenitore è un <ul> */
/*    padding: 0; /* Rimuove il padding predefinito del <ul> */
/*    margin: 0; /* Rimuove il margine predefinito del <ul> */
/*}
/*
/* Stili per ogni singola card della campagna (se necessario per il layout) */
/*li.campaign {
/*    border: 1px solid #eee; /* Bordo sottile per delineare la card */
/*    border-radius: 8px; /* Angoli arrotondati */
/*    overflow: hidden; /* Assicura che i contenuti non escano dai bordi */
/*    display: flex; /* Utilizza flexbox per il layout interno della card */
/*    flex-direction: column; /* I contenuti della card si impilano in colonna */
/*    height: 100%; /* Assicura che le card abbiano la stessa altezza se disposte in griglia */
/*    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra leggera */
/*    text-align: center; /* Centra il testo all'interno della card */
/*}
/*
/*li.campaign a {
/*    text-decoration: none; /* Rimuove la sottolineatura dal link principale */
/*    color: inherit; /* Eredita il colore del testo */
/*    display: block; /* Rende il link un blocco per includere immagine e titolo */
/*}
/*
/*li.campaign h3 {
/*    font-size: 1.3em;
/*    margin: 15px;
/*    color: #333; /* Colore del titolo */
/*}
/*
/*li.campaign .campaign-description {
/*    font-size: 1em;
/*    padding: 0 15px 15px;
/*    color: #666;
/*    flex-grow: 1; /* Permette alla descrizione di occupare lo spazio rimanente */
/*}
/*
/*li.campaign .campaign-progress-and-stats {
/*    padding: 15px;
/*    display: flex;
/*    flex-direction: column;
/*    align-items: center;
/*    gap: 10px;
/*}
/*
/*li.campaign .campaign-donation {
/*    padding: 15px;
/*    text-align: center;
/*}
/*
/* Media query per schermi più piccoli (es. mobile) */
/*@media (max-width: 768px) {
/*    /* La griglia si adatta a una singola colonna su mobile automaticamente con 'auto-fit' e 'minmax' */
/*    li.campaign {
/*        margin-bottom: 20px; /* Assicura spazio tra le card su mobile */
/*    }
/*} */

/* IL TUO CSS ESISTENTE VA QUI SOPRA */

/* --- NUOVE REGOLE SPOSTATE DAL PLUGIN "charitable-circular-progress-da-ai" --- */

/* Margini per il contenitore del cerchio (ora gestiti dal tuo tema) */
.charitable-progress-container {
    margin-top: 15px; /* Spazio sopra il cerchio */
    margin-bottom: 15px; /* Spazio sotto il cerchio */
}


/* Stili per l'estratto della campagna (sopra il cerchio) */
/* NOTA: Hai già una classe .campaign-description nel tuo CSS esistente.
   Assicurati che queste regole non la duplichino o la sovrascrivano involontariamente.
   Se .campaign-description nel tuo CSS è per il contenuto principale, potresti aver bisogno
   di un selettore più specifico qui, ad esempio .campaign-right .campaign-description.
   Per ora li sposto così come sono dal plugin. */


/* Stili per le statistiche (Raccolti/Obiettivo) sotto il cerchio */
.campaign-donation-stats {
    text-align: center;
    font-size: 0.9em; /* Rendi il testo leggermente più piccolo */
    color: #666; /* Colore grigio chiaro */
    margin-top: 5px; /* Spazio sopra le statistiche */
    margin-bottom: 5px; /* Spazio sotto le statistiche */
}

.campaign-donation-stats .amount {
    font-size: 18px; /* Rendi l'importo leggermente più grande e in evidenza */
    font-weight: bold;
    color: #333;
}

.campaign-donation-stats .goal-amount {
    font-weight: bold;
    color: #333;
}

.campaign-donation .button {
    display: inline-block;
    padding: 10px 20px; /* Padding del pulsante */
    background-color: var(--secondary-red); /* Colore rosso del pulsante */
    color: white;
    text-decoration: none;
    border-radius: 50px; /* Bordi arrotondati */
    font-size: 20px;
    line-height: 34px;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 200px;
    transition: background-color 0.3s ease;
}

.campaign-donation .button:hover {
    background-color: var(--orange-highlight); /* Colore più scuro al hover */
    color: white;
}

/* REGOLE PER NASCONDERE GLI ARTEFATTI DI ELEMENTOR (X rosse, ecc.) */
/* Queste dovrebbero andare nel tuo CSS principale, perché sono generiche. */
.elementor-editor-element-remove, /* Icona X */
.elementor-highlighted-element,   /* Elemento con "barre rosse" */
.elementor-element--hidden-tablet,
.elementor-element--hidden-mobile {
    display: none !important;
}

@media (min-width: 992px) { /* Applica solo su schermi più larghi di 991px (desktop) */
    .campaign-summary .campaign-summary-item {
        display: flex;
        flex-direction: column;
        font-size: 15px;
        justify-content: space-between;
        text-align: center;
        }

    .campaign-summary .campaign-figures .amount, .campaign-summary .campaign-raised .amount {
    display: flex;
    flex-direction: row;
    font-size: 25px !important;
    font-weight: bolder;
    justify-content: center;
    gap: 20px;
    }    
}

/* Stili base per la griglia principale (desktop, 2 colonne) */
.charitable-campaign-grid {
    display: grid;
    /* Definisci le aree per il layout desktop */
    grid-template-areas:
        "title-area    right-sidebar-area"
        "thumbnail-area right-sidebar-area"
        "campaign-description   right-sidebar-area"
        "content-area   right-sidebar-area";
    /* Definisci le larghezze delle colonne per desktop */
    grid-template-columns: 2fr 1fr;
    gap: 0px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 20px;
}

#campaign-thumbnail-area, #campaign-title-area, .single-campaign .campaign-description {
    background-color: white;
    margin: 0;
}

#campaign-title-area {
    padding: 30px 20px;
}

.single-campaign .campaign-description {
    padding: 0 20px;
}

/* Assegna le aree grid agli elementi per desktop */
#campaign-title-area { grid-area: title-area; }
#campaign-thumbnail-area { grid-area: thumbnail-area; }
#campaign-right-sidebar-area { grid-area: right-sidebar-area; }
#campaign-content-area { grid-area: content-area; }

/* Stili per le immagini e i testi (assicurati che questi selettori siano corretti) */
.campaign-thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.campaign-title {
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--tertiary-red);
}

.campaign-description {
    /*margin-bottom: 20px; /* Spazio sotto l'estratto */
    /* Esempio: rendila corsiva */
    color: var(--text-medium);
    display: block ;
    text-align: left; /* Allinea il testo a sinistra */
    margin-top: 10px; /* Spazio sopra l'estratto */
    line-height: 1.6; /* Interlinea per una migliore leggibilità */
    
}
.campaign-main-content {
    font-size: 1rem;
    line-height: 1.6;
    background-color: white;
    padding: 20px;
}

.campaign-main-content .campaign-summary {
    display: none;
}

.campaign-main-content .campaign-description {
    display: none;
}

/* Stili per la colonna destra (sfondo, padding, bordi) */
.campaign-right { /* Questo si applica ancora alla div con l'ID */
    background: transparent;
    padding: 20px;
    border-radius: 10px;
}

/* Stili per la colonna destra sticky (Solo su Desktop) */
@media (min-width: 992px) {
    #campaign-right-sidebar-area { /* Usa l'ID */
        position: sticky;
        z-index: 10; /* Assicurati che sia sopra il contenuto normale */
        top: 120px; /* Regola questo valore a seconda delle tue esigenze */
        align-self: flex-start;

    }
}

/* Media Query per la responsività (Schermi inferiori a 992px) */
@media (max-width: 991px) {
    .charitable-campaign-grid {
        /* Definisci le aree per il layout mobile/tablet */
        grid-template-areas:
            "title-area"
            "thumbnail-area"
            "campaign-description"
            "right-sidebar-area"
            "content-area";
        /* Una singola colonna */
        grid-template-columns: 1fr;
        gap: 0px; /* Riduci il gap per schermi più piccoli */
        padding: 20px 5%;
    }

    /* Rimuovi la posizione sticky su mobile/tablet */
    #campaign-right-sidebar-area { /* Usa l'ID */
        position: static;
        top: auto;
        margin-top: 0px; /* Spazio sopra quando è sotto */
        background-color: white;
    }

    .campaign-title {
        font-size: 35px; /* Riduci la dimensione del titolo su schermi più piccoli */
        
    }
}

@media (max-width: 767px) {
    .charitable-campaign-grid {
        display: block; /* Rimuove il layout grid/flex per desktop, facendo impilare gli elementi */
        /* O, se preferisci grid anche su mobile: */
        /* display: grid; */
        /* grid-template-columns: 1fr; */ /* Una singola colonna */
        /* gap: 20px; */

        width: 100%; /* Assicura che il contenitore principale occupi tutta la larghezza */
        box-sizing: border-box; /* Essenziale per includere padding/border nel 100% */
        padding: 0 15px; /* Aggiungi un padding interno al contenitore per evitare che il contenuto tocchi i bordi dello schermo */
        overflow-x: hidden; /* Nasconde l'overflow orizzontale */
    }

    .campaign-title {
        font-size: 32px !important;
        line-height: 34px !important;
    }

    .campaign-right {
    background: transparent;
    padding: 40px 20px 20px 20px;
    border-radius: 0;
    }

    p {
    margin-block-start: 0;
    margin-block-end: 0 !important;
    }

}




/* Nascondi il campo "X% raccolto" */
.campaign-raised.campaign-summary-item {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Nasconde il contenuto Elementor che si duplica all'interno della descrizione della campagna */
/* Questo serve per le campagne dove Elementor ha generato il contenuto anche per la description.php */
.campaign-description > .elementor {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.campaign-loop.campaign-grid .campaign-progress-bar {
    width: auto !important;
    height: 15px !important;
    background-color: #e6e6e6;
    margin: 0 25px 20px 25px !important;
}