/* Flash Messages Component - Glass Morphism Overlay */

.flash-message {
  padding: var(--spacing-md) var(--spacing-lg);
  margin: 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 2vw + 0.5rem, 1rem);
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  animation: flyInFromTop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  max-width: calc(100vw - 2 * var(--spacing-md));
  min-width: 300px;
  will-change: transform, opacity;
}

.flash-notice {
  background: rgba(148, 239, 213, 0.15);
  color: var(--brand-3);
  border-color: rgba(148, 239, 213, 0.3);
}

.flash-alert {
  background: rgba(254, 195, 199, 0.15);
  color: var(--brand-1);
  border-color: rgba(254, 195, 199, 0.3);
}

.flash-message.fade-out {
  animation: flyOutToTop 0.3s ease-in forwards;
}

@keyframes flyInFromTop {
  0% {
    transform: translateX(-50%) translateY(-100%);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes flyOutToTop {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(-100%);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .flash-message {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    min-width: 280px;
    max-width: calc(100vw - 2 * var(--spacing-sm));
  }
}