#alert-container {
 position: fixed;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 9999;
 display: flex;
 flex-direction: column;
 gap: 18px;
 pointer-events: none;
 max-width: 90vw;
 align-items: center;
}

/* Alert box with gold + green gradient */
.alert {
 display: flex;
 align-items: center;
 gap: 18px;
 position: relative;
 min-width: 260px;   
 max-width: 380px;  
 padding: 20px 28px;
 border-radius: 10px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 17px;
 color: #fff;
 box-shadow: 0 10px 25px rgba(0,0,0,0.25);
 backdrop-filter: blur(12px);
 opacity: 0;
 pointer-events: all;
 cursor: pointer;
 overflow: hidden;
 flex-direction: row;
 animation: slideIn 0.5s forwards, fadeOut 0.5s 4.5s forwards;
 background: linear-gradient(145deg, #28a745, #0F5132);
}

/* Icon circle */
.alert .icon-circle {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 20px;
 flex-shrink: 0;
 background-color: rgba(255,255,255,0.2);
}

/* Message */
.alert span {
 flex: 1;
 font-size: 16px;
 line-height: 1.5;
 font-weight: 600;
}

/* Close button */
.alert .close-btn {
 font-weight: bold;
 font-size: 22px;
 margin-left: 12px;
 cursor: pointer;
 opacity: 0.8;
 transition: opacity 0.2s;
}
.alert .close-btn:hover { opacity: 1; }

/* Progress bar */
.alert::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 height: 4px;
 width: 50%;
 background: rgba(255,255,255,0.6);
 border-radius: 0 0 10px 10px;
 animation: progress 5s linear forwards;
}

/* Animations */
@keyframes slideIn {
 0% { opacity: 0; transform: translateY(-30px); }
 100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
 to { opacity: 0; transform: translateY(-30px); }
}
@keyframes progress { to { width: 0%; } }