/*body {*/

/*    background-color: #f8f9ff;*/

/*    font-family: "Inter", sans-serif;*/

/*    padding: 40px 15px;*/

/*}*/



.gm-ui-hover-effect {

    display: none !important;

}

/* === CARD COMITATO === */

.comitato-card {

    border: none;

    border-radius: 32px;

    padding: 16px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    height: 150px;

    margin-bottom: 15px;

}



.comitato-card-header {

    display: flex;

    align-items: center;

    gap: 15px;

}



.comitato-avatar {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    flex-shrink: 0;

}



.comitato-name {

    font-weight: 600;

    font-size: 1.1rem;

    margin-bottom: 2px;

}


/*
.comitato-role {

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

}
*/

.comitato-role {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.comitato-btn {

    border-radius: 20px;

    height: 42px;

    padding: 16px 24px;

    text-decoration: none;

}



@media (min-width: 768px) {

    .comitato-btn {

        height: 60px;

        padding: 16px 24px;

    }



    .comitato-card {

        border: none;

        border-radius: 32px;

        padding: 24px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

        max-width: 700px;

        height: 200px;

        margin-bottom: 20px;

    }



    .circolo-card {

        border: none;

        border-radius: 32px;

        padding: 24px;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

        height: 130px;

        margin-bottom: 20px;

    }

}



.comitato-btn-light {

    background: #fff;

    border: none;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.comitato-btn-light:hover {

    background: #f2f2f2;

}



/* === PRESIDENTE === */





.comitato-card-president .comitato-btn-light {



    box-shadow: none;

}



.comitato-card-president .comitato-btn-light:hover {}





/*.comitato-container {*/

/*    background: #fff;*/

/*    border-radius: 50px;*/

/*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/

/*    padding: 30px;*/

/*    max-width: 100%;*/

/*    margin: 3%;*/

/*}*/



/*.sezione-dati {*/

/*    background: #fff;*/

/*    border-radius: 20px;*/

/*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/

/*    margin: 0 auto;*/

/*}*/



.comitato-btn {

    border: none;

    border-radius: 12px;

    font-weight: 500;

    padding: 10px;

    width: 100%;

    margin-top: 10px;

    transition: 0.2s;

}



.comitato-btn:hover {

    opacity: 0.9;

}


/*
#comitatoMap {

    width: 100%;

    aspect-ratio: 14/16;

    border-radius: 20px;

}
*/

/* Stato di default (nessuna ricerca ancora effettuata): mappa più
   contenuta in altezza, per non spingere troppo in basso il resto
   della pagina prima che l'utente abbia interagito. */
#comitatoMap {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 20px;
}

@media (max-width: 767.98px) {
    #comitatoMap {
        aspect-ratio: 3/4;
    }
}

/* Dopo una ricerca (classe aggiunta via JS al submit del form): la
   mappa può occupare più spazio, dato che l'utente ha già ottenuto
   il risultato e lo consulta insieme alla scheda sottostante. */
/*.ricerca-effettuata #comitatoMap {
    aspect-ratio: 16/9;
}

@media (max-width: 767.98px) {
    .ricerca-effettuata #comitatoMap {
        aspect-ratio: 1/1;
    }
}
*/
/* Dopo una ricerca (classe aggiunta via JS al submit del form): con il
   nuovo layout affiancato lista+mappa (vedi spostaMappaAccantoLista in
   comitati.js), la mappa ha bisogno di più altezza assoluta per essere
   leggibile quando ci sono molti marker ravvicinati - un rapporto troppo
   largo (16/9) la schiaccia eccessivamente in verticale.
   Con il nuovo layout affiancato, la mappa è nella colonna col-lg-5
   (~40% larghezza) invece che occupare tutta la larghezza: un ratio
   più verticale mantiene un'altezza assoluta adeguata comunque. */
/*.ricerca-effettuata #comitatoMap {
    aspect-ratio: 4/5;
    min-height: 500px;
}

@media (max-width: 991.98px) {
    .ricerca-effettuata #comitatoMap {
        aspect-ratio: 4/3;
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .ricerca-effettuata #comitatoMap {
        aspect-ratio: 1/1;
        min-height: 350px;
    }
}

*/

.ricerca-effettuata #comitatoMap-slot-originale #comitatoMap {
    aspect-ratio: 16/9;
    min-height: 350px;
}

/* Flusso CIRCOLI: la mappa viene spostata da spostaMappaAccantoLista()
   dentro #mappa-circoli-slot, in colonna stretta -> ratio verticale
   per mantenere un'altezza leggibile con molti marker. */
.ricerca-effettuata #mappa-circoli-slot #comitatoMap {
    aspect-ratio: 4/5;
    min-height: 500px;
}

@media (max-width: 991.98px) {
    .ricerca-effettuata #comitatoMap-slot-originale #comitatoMap {
        aspect-ratio: 16/9;
        min-height: 300px;
    }

    .ricerca-effettuata #mappa-circoli-slot #comitatoMap {
        aspect-ratio: 4/3;
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .ricerca-effettuata #comitatoMap-slot-originale #comitatoMap {
        aspect-ratio: 16/9;
        min-height: 220px;
    }

    .ricerca-effettuata #mappa-circoli-slot #comitatoMap {
        aspect-ratio: 1/1;
        min-height: 350px;
    }
}










#listaCircoliContainer {

    background-color: #fff;

}



.circolo-card {

    border: none;

    border-radius: 32px;

    padding: 16px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    margin-bottom: 15px;

}



/* Hover: effetto quando ci passi sopra */

.circolo-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    background: linear-gradient(0deg, var(--grad-1-from) 0%, var(--grad-1-to) 100%);

}



.circolo-card:hover .small {

    color: var(--color-ghost-white);

}



.circolo-card:hover .display-xs {

    color: var(--color-ghost-white);

}



/* Active: effetto quando è selezionato */

.circolo-card.active {

    background: linear-gradient(0deg, var(--grad-1-from) 0%, var(--grad-1-to) 100%);

    box-shadow: 0 0 0 3px rgba(30, 10, 82, 0.1);

}



.circolo-card.active .small {

    color: var(--color-ghost-white);

}



.circolo-card.active .display-xs {

    color: var(--color-ghost-white);

}


/*
#cercaCircolo,
#ricerca-luogo,
#filtro-distanza {

    border-radius: 32px;

}
*/
#cercaCircolo,
#ricerca-luogo,
#filtro-distanza,
#select-cambia-regione {
    border-radius: 32px;
}


#selectComitato,
#selectCircolo {

    border-radius: 20px;

    padding: 20px 24px;

}



.scheda-circolo {

    border: none;

    border-radius: 32px;

    padding: 24px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    margin-bottom: 20px;

}



/* Quando la mappa viene spostata accanto alla lista circoli, lo slot
   originale in alto resta vuoto: lo nascondiamo automaticamente con
   :empty, senza bisogno di toggle JS aggiuntivi. */
#comitatoMap-slot-originale:empty {
    display: none;
}

#mappa-circoli-slot {
    min-height: 1px;
}