/* Layout Generale */
.mappa-container {
    display: flex; /* Mappa a sinistra, Legenda a destra */
    max-width: 100%;
    margin: 0 auto;
}

.mappa-layers-wrapper {
    position: relative;
    min-width: 0;
    height:0; 
    width: 55%;
    overflow: hidden; /* Importante per contenere la mappa */
}

/* Stile per tutti i layer della mappa */
.mappa-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
}

/* Legenda */
.mappa-legenda-wrapper {
    padding: 20px;
    width: 45%;
}

/* Il layer base (grigio) è sempre visibile */
.mappa-base-layer {
    opacity: 1;
    z-index: 1; /* Primo livello */
}

/* Il layer default (colorato) è visibile di default sopra la base */
.mappa-default-layer {
    opacity: 1; 
    z-index: 2; /* Secondo livello */
}

/* Classe aggiunta da JS per mostrare un layer specifico */
.mappa-layer.active-layer {
    opacity: 1;
    z-index: 3; /* Terzo livello, sopra il default */
}

/* Stile Legenda */
.legenda-list {
    list-style: none;
    padding: 0;
    padding-bottom: 25px;
}

.legenda-item {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.legenda-item:hover,
.legenda-item.is-active {
    color: var(--e-global-color-accent); /* Colore di evidenziazione */
}

/* Stili per l'Accordion */
.accordion-parent {
    list-style: none;
    margin-bottom: 5px;
}

.accordion-trigger {
    display: block;
    cursor: pointer;
    padding: 5px 0;
    color: #333;
    transition: color 0.2s;
}

.accordion-trigger:hover {
    color: var(--e-global-color-accent);
}

/* Nasconde il contenuto dell'accordion */
.accordion-content {
    list-style: none;
    padding-left: 70px; /* Rientro per le singole strutture */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Mostra il contenuto quando la classe 'is-open' è aggiunta dal JS */
.accordion-parent.is-open .accordion-content {
    /* Impostiamo un valore alto per mostrare il contenuto. Regola se hai molte voci! */
    max-height: 500px; 
}

.accordion-parent.is-open .accordion-trigger {
    color: var(--e-global-color-accent);
}

.single-unit-map, .collection-unit-map {
    text-transform: capitalize;
}

.title-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-4fb4ff4-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: var(--e-global-typography-4fb4ff4-text-transform);
    line-height: var(--e-global-typography-4fb4ff4-line-height);
    padding-bottom: 30px;
}

.categories-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: var(--e-global-typography-4fb4ff4-text-transform);
    line-height: var(--e-global-typography-4fb4ff4-line-height);
}

.collections-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: capitalize;
    line-height: var(--e-global-typography-4fb4ff4-line-height);
}

.collections-map::after{
    content:'+';
}

.is-open .collections-map::after{
    content:'−';
}

.collections-map{
    padding-left:20px;
}

.mappa-layers-wrapper {
    position: relative;
    width: 100%;
    height: 0; /* Altezza gestita dal padding-bottom nel PHP */
    overflow: hidden;
    padding-bottom: 65%;
}

/* Regola base per le immagini interne */
.mappa-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* 1. LA BASE GRIGIA: Deve essere SEMPRE visibile */
.mappa-base {
    z-index: 1;
    opacity: 1 !important; /* Forza la visibilità */
}

/* 2. LA BASE COLORATA: Visibile all'inizio, sparisce al click */
#default-colorata {
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 3. L'AFTER (Il layer dinamico della selezione) */
.mappa-layers-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    background-image: var(--layer-img);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; /* Invisibile finché non si seleziona qualcosa */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* --- STATO ATTIVO (Quando l'utente clicca) --- */

/* Mostra l'After */
.mappa-layers-wrapper.has-selection::after {
    opacity: 1;
}

/* NASCONDE la base colorata (ma la GRIGIA resta sotto!) */
.mappa-layers-wrapper.has-selection #default-colorata {
    opacity: 0;
}

.img-pre-category{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.collections-map span.category-name{
    margin-left:15px;
}

/*[data-accordion-id="servizi-generale"] {
    margin-left: 35px;
}

[data-accordion-id="servizi-generale"] .img-pre-category{
    width: 0px;
}*/


@media screen and (max-width: 767px) {
    .mappa-container{
        flex-direction: column;
    }
    .mappa-layers-wrapper{
        padding-bottom: 85%;
    }
    .mappa-legenda-wrapper{
        width: 100%;;
    }
}