/* Wrapper che centra l'alert senza toccare il layout della pagina */ .alert-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; /* sta sopra tutto */ pointer-events: none; /* opzionale: evita interazioni col resto della pagina */ } /* Box dell'alert */ .alert-box { width: 300px; padding: 15px 20px; background: #ffeeba; border: 3px solid #2763AB; color: #8a6d3b; border-radius: 10px; box-shadow: 30px 30px 50px rgba(0,0,0,0.50); font-family: Arial, sans-serif; text-align: center; animation: fadein 0.5s ease-out; pointer-events: auto; /* permette click sul bottone di chiusura */ position: relative; } /* Bottone per chiudere l'alert */ .alert-box .close-btn { position: absolute; top: 8px; right: 10px; cursor: pointer; font-size: 20px; font-weight: bold; color: #8a6d3b; } /* Animazione di apparizione */ @keyframes fadein { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }