/* Brands SweetAlert2 popups to match the app's own look instead of its stock purple theme.
   Applied via Swal.fire's customClass option - see showAlert() in each page's JS. Relies on the
   --color-*/--font-* variables defined in style.css, which is always loaded alongside this file. *

.swal-branded-popup {
  /* !important: SweetAlert2 injects its own stylesheet at runtime, after this one in the DOM,
     so an equal-specificity rule without !important loses the cascade and this never visibly applies. */
  border-radius: 36px !important;
  font-family: var(--font-body);
}

.swal-branded-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 20px;
}

.swal-branded-confirm {
  background-color: var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
}

.swal-branded-confirm:hover {
  background-color: var(--color-primary-light) !important;
}

.swal-branded-confirm:focus {
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.25) !important;
}