#custom-alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; 
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* Allows you to click things UNDER the container */
}

.custom-alert {
  pointer-events: auto; /* Re-enables clicking the alert itself if needed */
  padding: 14px 24px;
  border-radius: 12px; /* Matching your LYNX theme */
  color: white;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  min-width: 280px;
  max-width: 400px;
  animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Theme Colors */
.custom-alert.success { background-color: #10b981; } /* Modern Green */
.custom-alert.error   { background-color: var(--danger); }
.custom-alert.warning { background-color: #f59e0b; color: #fff; }
.custom-alert.info    { background-color: var(--accent); }

/* Desktop Animation */
@keyframes slideIn {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* =========================================
   MOBILE ADAPTATION
   ========================================= */
@media (max-width: 600px) {
  #custom-alert-container {
    top: 20px;
    left: 20px;
    right: 20px;
    align-items: center; /* Center the alerts on the screen */
  }

  .custom-alert {
    width: 100%; /* Make alert full width (minus margins) */
    max-width: none;
    min-width: 0;
    text-align: center;
    /* Mobile-specific animation: Slide down from top instead of side */
    animation: slideDown 0.4s ease forwards;
  }

  @keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}