/* Form styles */
/* =========== */
.form-section-header {
  margin-top: 3rem;
}

.form-section {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;

  @media (width <=768px) {
    padding: 0;
  }
}

.form-field {
  margin-bottom: 1rem;
}

/* Inline "Saved" flash for auto-saving preference switches. Fades out shortly
   after appearing so it's a transient confirmation, not a persistent badge. */
.pref-saved {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-success);
  opacity: 0;
  animation: pref-saved-flash 2s ease forwards;
}

.pref-saved::before {
  content: "✓ ";
}

.pref-saved--error {
  color: var(--bs-danger);
  /* Errors persist (don't auto-fade) so the user notices the failure. */
  opacity: 1;
  animation: none;
}

.pref-saved--error::before {
  content: "";
}

@keyframes pref-saved-flash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}