/* 
 * Toast Notification Styles
 * 
 * Using Bootstrap toast component with brand-specific styling overrides.
 * Bootstrap handles animations, positioning, and structure.
 */

/* Toast container - Bootstrap handles positioning, we just override for brand needs */
.toast-container {
  /* Bootstrap position-fixed handles positioning */
  /* Custom margin-top to account for navbar */
  max-width: 400px;
}

/* Brand-specific toast styling - override Bootstrap defaults */
.toast.toast-error {
  background: rgba(254, 226, 226, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #991b1b;
}

.toast.toast-error .toast-header {
  background: transparent;
  color: #991b1b;
  border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.toast.toast-error .toast-body {
  color: #991b1b;
}

.toast.toast-success {
  background: rgba(220, 252, 231, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: #166534;
}

.toast.toast-success .toast-header {
  background: transparent;
  color: #166534;
  border-bottom: 1px solid rgba(22, 163, 74, 0.1);
}

.toast.toast-success .toast-body {
  color: #166534;
}

/* Toast icon styling */
.toast-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .toast-container {
    right: 1rem !important;
    left: 1rem !important;
    max-width: none;
    margin-top: 70px !important;
  }
}