/* Stili per la paginazione */
.paginazione {
    margin-top: 2rem;
    text-align: center;
}
.pagination-list {
    display: inline-flex;
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.pagination-item a {
    display: block;
    padding: 0.5rem 1rem;
    color: #007bff;
    text-decoration: none;
    border-right: 1px solid #ddd;
}
.pagination-item:last-child a {
    border-right: none;
}
.pagination-item a:hover {
    background-color: #f2f2f2;
}
.pagination-item.active a {
    background-color: #007bff;
    color: white;
    pointer-events: none; /* Non rende cliccabile la pagina corrente */
}


/*  Stili per l'inserimento immagini galleria */

.galleria-riga {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.galleria-riga input {
    flex-grow: 1;
}
.galleria-riga .rimuovi-riga-galleria {
    margin-left: 1rem;
    background-color: #e44;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}


/* Stili per la pagina di dettaglio della struttura */

.struttura-hero {
    display: flex; /* Attiva Flexbox per affiancare gli elementi */
    flex-wrap: wrap; /* Permette di andare a capo su schermi piccoli */
    gap: 1.5rem; /* Spazio tra immagine e mappa */
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.hero-immagine-container {
    flex: 2; /* L'immagine occupa 2/3 dello spazio */
    min-width: 300px;
}

.hero-immagine-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.hero-mappa-container {
    flex: 1; /* La mappa occupa 1/3 dello spazio */
    min-width: 300px;
}

/* QUESTA È LA REGOLA FONDAMENTALE PER RISOLVERE IL BUG */
#mappa-struttura {
    width: 100%;
    height: 400px !important; /* Aggiungi !important */
    border-radius: 5px;
    background-color: #f0f0f0; /* Aggiungi un colore di sfondo per vederlo anche se vuoto */
}