/* ✅ Common Alert Box Styling */
.alert {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  animation: fadeIn 0.5s ease-in-out;
  display: flex;
  align-items: center;
}

/* ✅ Success Alert (Green Gradient) */
.alert-success {
  background: linear-gradient(135deg, #d4edda, #a8e6cf, #81c784);
  color: #0f5132;
  border: none;
}

/* ✅ Error Alert (Red Gradient) */
.alert-danger {
  background: linear-gradient(135deg, #f8d7da, #f5a6a6, #ef5350);
  color: #842029;
  border: none;
}

/* ✅ Warning Alert (Yellow/Orange Gradient) */
.alert-warning {
  background: linear-gradient(135deg, #fff3cd, #ffd27f, #ffb74d);
  color: #664d03;
  border: none;
}

/* ✅ Close Button Styling */
.alert .btn-close {
  filter: invert(0.5);
  opacity: 0.8;
  margin-left: auto;
}
.alert .btn-close:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* ✅ Smooth Fade-in Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}