<style>
.zoom-img {
transition: transform 0.3s ease-in-out;
}
.zoom-img:hover {
transform: scale(2.0) translate(5px, 5px);
}

/* MODALE EVENTI */

.btn-eventi {

position: fixed;

bottom: 20px;

right: 20px;

background-color: #c0392b;

color: white;

border: none;

border-radius: 50px;

padding: 12px 24px;

font-size: 16px;

font-weight: bold;

cursor: pointer;

z-index: 1000;

box-shadow: 0 2px 10px rgba(0,0,0,0.3);

transition: all 0.3s;

}

.btn-eventi:hover {

background-color: #e74c3c;

transform: scale(1.05);

}

.modale-overlay {

position: fixed;

top: 0; left: 0;

width: 100%; height: 100%;

background-color: rgba(0,0,0,0.92);

backdrop-filter: blur(5px);

z-index: 2000;

display: none;

justify-content: center;

align-items: center;

overflow-y: auto;

padding: 20px;

}

.modale-contenuto {

background: #1a1a2e;

max-width: 700px;

width: 100%;

max-height: 85vh;

overflow-y: auto;

border-radius: 20px;

padding: 30px;

position: relative;

box-shadow: 0 25px 50px rgba(0,0,0,0.5);

animation: fadeInUp 0.3s ease;

color: #eee;

}

.modale-contenuto::-webkit-scrollbar       { width: 8px; }

.modale-contenuto::-webkit-scrollbar-track { background: #2a2a3e; border-radius: 10px; }

.modale-contenuto::-webkit-scrollbar-thumb { background: #c0392b; border-radius: 10px; }

.chiudi-modale {

position: absolute;

top: 15px; right: 25px;

font-size: 35px;

font-weight: bold;

cursor: pointer;

color: #aaa;

transition: color 0.3s;

z-index: 10;

}

.chiudi-modale:hover { color: #e74c3c; }

.modale-contenuto h2 {

color: #e74c3c;

border-bottom: 2px solid #e74c3c;

padding-bottom: 10px;

margin-top: 0;

margin-bottom: 25px;

}

.evento {

margin-bottom: 30px;

padding-bottom: 20px;

border-bottom: 1px solid #333;

}

.evento:last-child  { border-bottom: none; }

.evento h3          { color: #e74c3c; margin: 0 0 10px 0; font-size: 1.3em; }

.data-scadenza {

display: inline-block;

background: #2c2c44;

padding: 4px 12px;

border-radius: 20px;

font-size: 0.85em;

margin-right: 10px;

margin-bottom: 10px;

}

.data-scadenza i { font-style: normal; }

.scaduto         { background: #5a1e1e; color: #ff9999; }

.data, .luogo    { margin: 8px 0; color: #ccc; }

.data strong, .luogo strong { color: #e74c3c; }

.locandina       { margin: 15px 0; text-align: center; }

.locandina img {

max-width: 100%;

max-height: 300px;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);

cursor: pointer;

transition: transform 0.3s;

}

.locandina img:hover            { transform: scale(1.02); }

.descrizione                    { line-height: 1.6; margin-top: 10px; }

.badge-novita {

display: inline-block;

background: #e74c3c;

color: white;

font-size: 0.7em;

padding: 3px 8px;

border-radius: 12px;

margin-left: 10px;

vertical-align: middle;

}

.filtri-eventi  { margin-bottom: 25px; display: flex; gap: 10px; flex-wrap: wrap; }

.filtro-btn {

background: #2c2c44;

border: none;

color: #eee;

padding: 6px 15px;

border-radius: 25px;

cursor: pointer;

transition: all 0.3s;

}

.filtro-btn.active { background: #e74c3c; color: white; }

.filtro-btn:hover  { background: #c0392b; }

.locandina a       { display: inline-block; text-decoration: none; }

.locandina a img   { transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }

.locandina a:hover  img { transform: scale(1.03); box-shadow: 0 8px 25px rgba(0,0,0,0.4); }

.locandina a:active img { transform: scale(0.98); }

@keyframes fadeInUp {

from { opacity: 0; transform: translateY(30px); }

to   { opacity: 1; transform: translateY(0); }

}

</style>