/* Universal Inline Form Validation & Error Styling */
:root {
  --danger: #dc3545;
  --error-red: #dc3545;
}

/* Invalid Form Control Highlight */
.is-invalid, 
.form-control.is-invalid, 
input.is-invalid, 
select.is-invalid, 
textarea.is-invalid,
.is-invalid:focus,
.form-control.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18) !important;
  background-image: none !important;
}

/* Global Error Message Styling for ALL form validation & error containers */
.field-error-msg,
.invalid-feedback,
.error-msg,
.error-text,
.form-error,
.validation-error,
.validation-msg,
.field-error,
.error,
ul.errorlist,
ul.errorlist li,
.errorlist,
.errorlist li,
.help-block.error,
.help-inline.error {
  color: #dc3545 !important;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 2px;
  line-height: 1.35;
}

/* Flex layout for inline error message containers */
.field-error-msg,
.invalid-feedback,
.error-msg,
.validation-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeInError 0.2s ease-in-out;
}

/* Inner text elements inside error containers */
.field-error-msg *,
.invalid-feedback *,
.error-msg *,
.error-text *,
.form-error *,
.validation-error *,
.validation-msg *,
.field-error *,
.errorlist li * {
  color: #dc3545 !important;
}

/* Error Icons (FontAwesome, SVG, etc.) */
.field-error-msg i,
.field-error-msg svg,
.invalid-feedback i,
.invalid-feedback svg,
.error-msg i,
.error-msg svg,
.error-text i,
.error-text svg,
.form-error i,
.form-error svg,
.validation-error i,
.validation-error svg,
.field-error i,
.field-error svg,
.errorlist i,
.errorlist svg,
.alert-danger i,
.alert-danger svg,
i.error-icon,
svg.error-icon,
i.fa-exclamation-circle,
i.fa-exclamation-triangle,
i.fa-times-circle {
  color: #dc3545 !important;
  fill: #dc3545 !important;
  font-size: 0.85rem;
  flex-shrink: 0;
}

@keyframes fadeInError {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group-custom, .form-field, .mb-3, .mb-4, .item-field {
  position: relative;
}

/* Django Error List Formatting */
ul.errorlist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

ul.errorlist li {
  color: #dc3545 !important;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Top Alert & Status Notification Styling */
.global-top-alert {
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 0.95rem !important;
  animation: slideDownAlert 0.3s ease-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.alert-success-custom {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.08) !important;
}

.alert-danger,
.alert-error-custom,
.msgs-box .msg.error,
.msg-list li.error {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc3545 !important;
  border-left: 4px solid #dc3545 !important;
  box-shadow: 0 4px 14px rgba(220, 53, 69, 0.08) !important;
}

.alert-danger *,
.alert-error-custom *,
.msgs-box .msg.error *,
.msg-list li.error * {
  color: #dc3545 !important;
}

.alert-info-custom {
  background-color: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

.btn-close-alert {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  color: inherit !important;
  opacity: 0.65;
  border-radius: 8px !important;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.btn-close-alert:hover,
.btn-close-alert:focus {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.07) !important;
  transform: scale(1.08);
  outline: none !important;
}

@keyframes slideDownAlert {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reusable WhatsApp input helper/guidance text */
.whatsapp-hint-text {
  color: #dc2626 !important;
  font-size: 12.5px !important;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.35;
  display: block;
}