/* Sfondo oscurato e sfocato */
.modal-overlay {
    display: none; /* Deve tornare a essere nascosto di base */
    position: fixed;
    z-index: 99999; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Nero trasparente */
    backdrop-filter: blur(8px);
}

/* Contenitore con effetto sollevato e margini di 2cm */
.modal-content {
    position: absolute;
    top: 2cm; right: 2cm; bottom: 2cm; left: 2cm;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    padding: 50px;
    overflow-y: auto;
}

/* Animazione di entrata Zoom */
.animate-zoom {
    animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-body { display: flex; gap: 50px; }
.modal-images { flex: 1.2; display: flex; flex-direction: column; gap: 20px; }
.modal-images img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.modal-text { flex: 1; font-family: 'Century Gothic', sans-serif; line-height: 1.8; color: #333; }

.modal-separator { width: 50px; border: 2px solid #8B0000; margin: 20px 0; }
.close-modal { position: absolute; top: 25px; right: 30px; font-size: 40px; cursor: pointer; color: #999; transition: 0.3s; }
.close-modal:hover { color: #8B0000; }

/* Mobile: rimuove i 2cm e imposta layout verticale */
@media (max-width: 1024px) {
    .modal-content { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; padding: 25px; }
    .modal-body { flex-direction: column; }
    .modal-images { order: 2; }
    .modal-text { order: 1; }
}