/* Flash Messages Styling */
.flash-messages {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 90%;
  max-width: 600px;
}

.flash-messages .alert {
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.flash-messages .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.flash-messages .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.flash-messages .alert-warning {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

/* Close button styling with !important to override existing CSS */
.flash-messages .btn-close {
  background: transparent !important;
  border: none !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #000 !important;
  text-shadow: 0 1px 0 #fff !important;
  opacity: 0.5 !important;
  padding: 0.25rem 0.25rem !important;
  margin: -0.125rem -0.125rem -0.125rem auto !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
}

.flash-messages .btn-close:hover {
  opacity: 0.75 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.flash-messages .btn-close:focus {
  opacity: 1 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
  outline: none !important;
  background: transparent !important;
  border: none !important;
}

/* Bootstrap close button content */
.flash-messages .btn-close::before {
  content: "\00d7" !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Auto-hide flash messages after 5 seconds */
.flash-messages .alert {
  animation: fadeOut 5s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Hover to pause auto-hide */
.flash-messages .alert:hover {
  animation-play-state: paused;
}