/* Alert animations */
.alert-enter {
  opacity: 0;
  transform: translateX(1rem);
  transition: all 0.3s ease-out;
}

.alert-enter-active {
  opacity: 1;
  transform: translateX(0);
}

.alert-leave {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease-in;
}

.alert-leave-active {
  opacity: 0;
  transform: translateX(1rem);
}

/* Alert container for stacking */
#alerts {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

#alerts > * {
  pointer-events: auto;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #alerts {
    left: 1rem;
    right: 1rem;
  }
  
  .alert-enter {
    transform: translateY(-1rem);
  }
  
  .alert-leave-active {
    transform: translateY(-1rem);
  }
}