/* =========================================================================
   SweetAlert2 (v11) theme — matches the modern dashboard design
   (Montserrat, Modern-Clean/Light tokens, gradient buttons). Applies to all
   swal.fire dialogs app-wide. Targets the library's .swal2-* class names.
   ========================================================================= */
:root {
  --sw-blue: #00b4ff;
  --sw-blue-2: #2b9cd3;
  --sw-green: #36bea6;
  --sw-green-2: #2cdd9b;
  --sw-ink: #1f2a37;
  --sw-ink-2: #5b6b7f;
  --sw-ink-3: #8a99ad;
  --sw-line: #d8e0ea;
  --sw-red: #e8533a;
}

/* dim/backdrop */
.swal2-container.swal2-backdrop-show {
  background: rgba(16, 24, 40, 0.45);
}

/* popup card */
.swal2-popup {
  font-family: "Montserrat", sans-serif !important;
  border-radius: 16px !important;
  padding: 26px 26px 22px !important;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28) !important;
  color: var(--sw-ink) !important;
}

/* title */
.swal2-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--sw-ink) !important;
  letter-spacing: -0.01em;
  padding: 0 0 4px !important;
}

/* body text */
.swal2-html-container {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--sw-ink-2) !important;
  margin-top: 6px !important;
}

/* inputs (e.g. the change-email field) */
.swal2-input,
.swal2-textarea,
.swal2-select {
  font-family: inherit !important;
  font-size: 14px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--sw-ink) !important;
  height: auto !important;
  padding: 11px 14px !important;
  margin: 16px auto 6px !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--sw-ink-3) !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  outline: none !important;
  border-color: var(--sw-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.14) !important;
}
.swal2-validation-message {
  font-family: inherit !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}
/* wider input for the Change Email Address dialog (centered, fits on mobile) */
.swal2-input.swal-email-input {
  width: 360px !important;
  max-width: 100% !important;
}

/* actions row + buttons */
.swal2-actions {
  gap: 10px;
  margin-top: 18px !important;
}
.swal2-styled {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  box-shadow: none !important;
  transition: filter 0.15s ease;
}
.swal2-styled:focus {
  box-shadow: none !important;
}
/* confirm = brand blue gradient (overrides inline confirmButtonColor) */
.swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, #2b9cd3, #00b4ff) !important;
  background-image: linear-gradient(135deg, #2b9cd3, #00b4ff) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 180, 255, 0.28) !important;
}
.swal2-styled.swal2-confirm:hover {
  filter: brightness(1.05);
}
/* cancel = neutral ghost */
.swal2-styled.swal2-cancel {
  background: #f7f9fc !important;
  background-image: none !important;
  color: var(--sw-ink-2) !important;
  border: 1px solid var(--sw-line) !important;
}
.swal2-styled.swal2-cancel:hover {
  background: #eef2f7 !important;
}
/* deny (rare) = red */
.swal2-styled.swal2-deny {
  background: var(--sw-red) !important;
  background-image: none !important;
  color: #fff !important;
}

/* tone the status icons to the theme palette */
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--sw-green) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(54, 190, 166, 0.35) !important;
}
.swal2-icon.swal2-info {
  border-color: rgba(0, 180, 255, 0.4) !important;
  color: var(--sw-blue) !important;
}
.swal2-icon.swal2-warning {
  border-color: rgba(255, 184, 92, 0.5) !important;
  color: #e0a13a !important;
}
.swal2-icon.swal2-error {
  border-color: rgba(232, 83, 58, 0.4) !important;
  color: var(--sw-red) !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--sw-red) !important;
}

/* close button */
.swal2-close {
  color: var(--sw-ink-3) !important;
}
.swal2-close:hover {
  color: var(--sw-red) !important;
}

/* responsive / mobile */
@media (max-width: 480px) {
  .swal2-popup {
    width: calc(100% - 28px) !important;
    padding: 22px 18px 18px !important;
  }
  .swal2-title {
    font-size: 19px !important;
  }
  .swal2-actions {
    flex-wrap: wrap;
  }
  .swal2-styled {
    flex: 1 1 auto;
  }
}