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

.alert {
 display: flex;
 align-items: center;
 gap: 8px;
 position: relative;
 min-width: 260px;   
 max-width: 380px;  
 padding: 14px 22px;
 border-radius: 10px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 16px;
 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;
}

.alert.success {
 background: linear-gradient(145deg, #28a745, #0F5132);
}

.alert.error {
 background: linear-gradient(145deg, #dc3545, #842029);
}

.alert .icon-circle {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 15px;
 flex-shrink: 0;
 background-color: rgba(255,255,255,0.2);
 color: #ffffff;
 margin-right: 2px;
}

.alert span {
 flex: 1;
 font-size: 15px;
 line-height: 1.4;
 font-weight: 600;
 color: #ffffff;
 margin-left: 0;
}

.alert .close-btn {
 font-weight: bold;
 font-size: 20px;
 margin-left: 8px;
 cursor: pointer;
 opacity: 0.9;
 transition: 0.2s;
 color: #ffffff;
}

.alert .close-btn:hover {
 opacity: 1;
 transform: scale(1.1);
}

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

@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%; 
 }
}

/* Mobile safety */
@media (max-width:480px){

.alert.success {
 background: linear-gradient(145deg, #28a745, #0F5132);
}

.alert.error {
 background: linear-gradient(145deg, #dc3545, #842029);
}

}