/* Custom notification styles */
.notification-container {
  @apply transform transition-all duration-300;
}

/* Stacking support for multiple notifications */
#alerts > div:not(:first-child) {
  @apply mt-4;
}

/* Glass morphism effect */
.notification-glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Custom shadows for notifications */
.notification-shadow-purple {
  box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.25), 
              0 8px 10px -6px rgba(124, 58, 237, 0.1);
}

.notification-shadow-red {
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.25), 
              0 8px 10px -6px rgba(239, 68, 68, 0.1);
}

.notification-shadow-amber {
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.25), 
              0 8px 10px -6px rgba(245, 158, 11, 0.1);
}

.notification-shadow-violet {
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25), 
              0 8px 10px -6px rgba(139, 92, 246, 0.1);
}

/* Hover effects */
.notification-container:hover {
  @apply scale-105;
}

/* Progress bar animation */
@keyframes progress-countdown {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Slide animations */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

.animate-slide-out-right {
  animation: slide-out-right 0.3s ease-in forwards;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .notification-container {
    @apply right-2 left-2 max-w-none;
  }
}