/* Flash Messages - Standardized
 * Positions alerts at bottom center with responsive sizing
 */

.flash-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 600px;
  z-index: 1060; /* Above modals (1055) */
  animation: slideUp 0.3s ease-out;
}

/* Slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Responsive sizing */
@media (min-width: 576px) {
  .flash-message {
    width: 80vw;
  }
}

@media (min-width: 768px) {
  .flash-message {
    width: 60vw;
  }
}

@media (min-width: 992px) {
  .flash-message {
    width: 500px;
  }
}

/* Ensure text is readable */
.flash-message {
  word-wrap: break-word;
}

/* Add bottom margin if multiple alerts stack */
.flash-message + .flash-message {
  bottom: calc(20px + 80px); /* Stack second alert above first */
}