@charset "utf-8";
/* CSS Document */

/* Container for the alert messages */
.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Base styles shared by all messages */
.loading, 
.error-message, 
.sent-message {
  display: none; /* Hidden by default; JavaScript reveals them */
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* 1. Loading State Styles */
.loading {
  background: #f8f9fa;
  color: #6c757d;
  border: 1px solid #dee2e6;
  position: relative;
}

/* Subtle animated dots for the loading state */
.loading::after {
  content: '.';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60% { content: '...'; }
  80%, 100% { content: ''; }
}

/* 2. Error Message Styles */
.error-message {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* 3. Sent/Success Message Styles */
.sent-message {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}