/* ============================================================================
   swal-premium.css — AIToolsay premium theme for SweetAlert2 v11 + toastr
   Load AFTER sweetalert2.min.css (all pages) and toastr.min.css (admin).
   Token-driven (--aits-*), dark-aware via token re-resolution, RTL-safe
   (logical properties only), WCAG-AA, reduced-motion guarded.
   Design: Stripe / Linear / Vercel — semantic-forward, calm, expensive.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. Local alias layer — resolve --aits-* ONCE with literal fallbacks.
   Everything downstream uses --sp-*; dark comes free via token re-resolution.
   Only literals THIS file introduces (backdrop dim, glass ghost fill) get an
   explicit .theme-dark override.
   --------------------------------------------------------------------------- */
.swal2-container,
#toast-container {
  --sp-card:         var(--aits-card, #fff);
  --sp-surface-2:    var(--aits-surface-2, #fafafa);
  --sp-surface-3:    var(--aits-surface-3, #f7f7f8);
  --sp-ink:          var(--aits-ink, #111);
  --sp-ink-soft:     var(--aits-ink-soft, #2b2b2b);
  --sp-txt:          var(--aits-txt, #444);
  --sp-mut:          var(--aits-mut, #666);
  --sp-faint:        var(--aits-faint, #999);
  --sp-line:         var(--aits-line, #ececec);
  --sp-line-strong:  var(--aits-line-strong, #e0e0e0);

  --sp-blue:         var(--aits-blue, #3680ed);
  --sp-blue-dark:    var(--aits-blue-dark, #2060c0);
  --sp-blue-light:   var(--aits-blue-light, #60a4f5);
  --sp-blue-tint:    var(--aits-blue-tint, #eaf2fd);
  --sp-blue-line:    var(--aits-blue-line, #cfe0fa);
  --sp-focus:        var(--aits-focus, rgba(54,128,237,.28));

  --sp-green:        var(--aits-green, #0ca678);
  --sp-green-soft:   var(--aits-green-soft, #e6fcf3);
  --sp-green-ink:    var(--aits-green-ink, #087f5b);
  --sp-amber:        var(--aits-amber, #d97706);
  --sp-amber-soft:   var(--aits-amber-soft, #fff5e1);
  --sp-amber-ink:    var(--aits-amber-ink, #b45309);
  --sp-red:          var(--aits-red, #e03131);
  --sp-red-soft:     var(--aits-red-soft, #ffecec);
  --sp-red-ink:      var(--aits-red-ink, #b71c1c);
  --sp-violet:       var(--aits-violet, #7048e8);
  --sp-violet-soft:  var(--aits-violet-soft, #eee6ff);
  --sp-violet-ink:   #5a34c9;

  /* Theme-aware link color: darker in light (AA on white), lighter in dark */
  --sp-link:         var(--aits-blue-dark, #2060c0);

  --sp-r-sm:   var(--r-sm, 8px);
  --sp-r-md:   var(--r-md, 10px);
  --sp-r-lg:   var(--r-lg, 14px);
  --sp-r-xl:   var(--r-xl, 18px);
  --sp-r-2xl:  var(--r-2xl, 24px);
  --sp-r-pill: var(--r-pill, 999px);

  --sp-sh-sm:    var(--sh-sm, 0 2px 6px rgba(15,23,42,.08));
  --sp-sh-md:    var(--sh-md, 0 8px 24px rgba(15,23,42,.12));
  --sp-sh-lg:    var(--sh-lg, 0 12px 32px rgba(15,23,42,.16));
  --sp-sh-pop:   var(--sh-pop, 0 16px 48px rgba(15,23,42,.16));
  --sp-ring:     var(--ring, 0 0 0 3px var(--sp-focus));

  --sp-ease:   var(--ease, cubic-bezier(.16,1,.3,1));
  --sp-t-fast: var(--t-fast, .12s);
  --sp-t:      var(--t, .18s);
  --sp-t-slow: var(--t-slow, .25s);
  --sp-font:   var(--font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  /* Literals this file introduces (dark-overridden below) */
  --sp-backdrop:      rgba(17,20,28,.44);
  --sp-backdrop-solid: rgba(17,20,28,.58);   /* no-blur fallback */
  --sp-ghost-bg:      var(--aits-card, #fff);
  --sp-ghost-hover:   var(--aits-surface-3, #f7f7f8);

  /* Per-dialog semantic accent — overridden by icon type via :has() below.
     Default = brand blue, which is also the graceful :has()-unsupported state. */
  --sp-accent:      var(--sp-blue);
  --sp-accent-ink:  var(--sp-blue-dark);
  --sp-accent-soft: var(--sp-blue-tint);
  --sp-accent-glow: var(--sp-focus);
  /* Confirm-button accent — usually follows --sp-accent, but warning => red */
  --sp-btn:         var(--sp-blue);
  --sp-btn-ink:     var(--sp-blue-dark);
  --sp-btn-glow:    var(--sp-focus);
}
body.theme-dark .swal2-container,
body.theme-dark #toast-container,
body.admin-shell.theme-dark .swal2-container,
body.admin-shell.theme-dark #toast-container {
  --sp-backdrop:       rgba(2,4,8,.62);
  --sp-backdrop-solid: rgba(2,4,8,.74);
  --sp-ghost-bg:       var(--aits-surface-2, #18181b);
  --sp-ghost-hover:    var(--aits-surface-3, #1c1c1f);
  --sp-sh-pop:         var(--sh-pop, 0 18px 50px rgba(0,0,0,.65));
  /* Brand blue is legible on dark backgrounds — use the lighter link tone */
  --sp-link:           var(--aits-blue-light, #60a4f5);
}

/* ===========================================================================
   1. OVERLAY / BACKDROP / PORTAL
   =========================================================================== */
.swal2-container {
  padding: clamp(12px, 4vw, 40px);
  font-family: var(--sp-font);
  -webkit-tap-highlight-color: transparent;
}
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation,
.swal2-container.swal2-shown:not(.swal2-toast-shown) {
  background: var(--sp-backdrop-solid);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .swal2-container.swal2-backdrop-show,
  .swal2-container.swal2-noanimation,
  .swal2-container.swal2-shown:not(.swal2-toast-shown) {
    background: var(--sp-backdrop);
    -webkit-backdrop-filter: saturate(118%) blur(6px);
            backdrop-filter: saturate(118%) blur(6px);
  }
}
.swal2-container.swal2-backdrop-show { animation: sp-backdrop-in var(--sp-t-slow) var(--sp-ease); }
.swal2-container.swal2-backdrop-hide {
  background: transparent !important;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  animation: sp-backdrop-out var(--sp-t) var(--sp-ease);
}
@keyframes sp-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

/* Toast-position containers must NEVER dim/blur the page */
.swal2-container.swal2-top-start,   .swal2-container.swal2-top,
.swal2-container.swal2-top-end,     .swal2-container.swal2-center-start,
.swal2-container.swal2-center-end,  .swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom,      .swal2-container.swal2-bottom-end,
.swal2-container.swal2-grow-row,    .swal2-container.swal2-grow-fullscreen {
  background: transparent !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 16px;
}

/* ===========================================================================
   2. POPUP (MODAL CARD) — hero surface with a semantic top accent bar
   =========================================================================== */
.swal2-popup {
  box-sizing: border-box;
  width: 32em;
  max-width: min(94vw, 460px);
  padding: 30px 30px 26px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-2xl);
  background: var(--sp-card);
  color: var(--sp-txt);
  box-shadow: var(--sp-sh-pop);
  font-family: var(--sp-font);
  font-size: 15px;
  overflow: hidden;
}
.swal2-popup.swal2-modal { position: relative; }
.swal2-popup.swal2-modal::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--sp-accent), var(--sp-accent-ink));
  opacity: .95;
  pointer-events: none;
}
.swal2-popup:focus { outline: none; }

/* --- Per-type semantic accent driven off the rendered icon via :has() ------
   Sets the top bar, icon chip glow, focus, progress steps AND confirm button.
   --sp-btn defaults to the accent; warning/error force a RED confirm. -------- */
.swal2-popup:has(.swal2-icon.swal2-success) {
  --sp-accent: var(--sp-green); --sp-accent-ink: var(--sp-green-ink);
  --sp-accent-soft: var(--sp-green-soft); --sp-accent-glow: rgba(12,166,120,.30);
  --sp-btn: var(--sp-green); --sp-btn-ink: var(--sp-green-ink); --sp-btn-glow: rgba(12,166,120,.32);
}
.swal2-popup:has(.swal2-icon.swal2-info) {
  --sp-accent: var(--sp-blue); --sp-accent-ink: var(--sp-blue-dark);
  --sp-accent-soft: var(--sp-blue-tint); --sp-accent-glow: rgba(54,128,237,.30);
  --sp-btn: var(--sp-blue); --sp-btn-ink: var(--sp-blue-dark); --sp-btn-glow: rgba(54,128,237,.30);
}
.swal2-popup:has(.swal2-icon.swal2-question) {
  --sp-accent: var(--sp-violet); --sp-accent-ink: var(--sp-violet-ink);
  --sp-accent-soft: var(--sp-violet-soft); --sp-accent-glow: rgba(112,72,232,.30);
  --sp-btn: var(--sp-violet); --sp-btn-ink: var(--sp-violet-ink); --sp-btn-glow: rgba(112,72,232,.30);
}
/* Warning: amber chip + bar (correct severity) but a RED confirm — the swal
   delete-confirmation convention uses icon:'warning'. */
.swal2-popup:has(.swal2-icon.swal2-warning) {
  --sp-accent: var(--sp-amber); --sp-accent-ink: var(--sp-amber-ink);
  --sp-accent-soft: var(--sp-amber-soft); --sp-accent-glow: rgba(217,119,6,.30);
  --sp-btn: var(--sp-red); --sp-btn-ink: var(--sp-red-ink); --sp-btn-glow: rgba(224,49,49,.32);
}
.swal2-popup:has(.swal2-icon.swal2-error) {
  --sp-accent: var(--sp-red); --sp-accent-ink: var(--sp-red-ink);
  --sp-accent-soft: var(--sp-red-soft); --sp-accent-glow: rgba(224,49,49,.30);
  --sp-btn: var(--sp-red); --sp-btn-ink: var(--sp-red-ink); --sp-btn-glow: rgba(224,49,49,.32);
}

/* Entrance / exit spring */
.swal2-popup.swal2-show { animation: sp-modal-in var(--sp-t-slow) var(--sp-ease); }
.swal2-popup.swal2-hide { animation: sp-modal-out var(--sp-t) var(--sp-ease); }
@keyframes sp-modal-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sp-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(.96); }
}

/* Modal timer progress bar (non-toast). Toast rules below win on specificity. */
.swal2-popup .swal2-timer-progress-bar-container {
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 4px;
  overflow: hidden;
  background: transparent;
}
.swal2-popup .swal2-timer-progress-bar {
  block-size: 4px;
  background: linear-gradient(90deg, var(--sp-accent-ink), var(--sp-accent));
}

/* ===========================================================================
   3. TITLE + HTML BODY
   =========================================================================== */
.swal2-title {
  margin: 6px 0 4px;
  padding: 0;
  color: var(--sp-ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.014em;
  text-align: center;
}
.swal2-html-container {
  margin: 8px 4px 2px;
  padding: 0;
  color: var(--sp-txt);
  font-size: .975rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: break-word;
}
.swal2-html-container a {
  color: var(--sp-link);
  text-decoration: none;
  font-weight: 600;
  border-block-end: 1px solid var(--sp-blue-line);
}
.swal2-html-container a:hover { border-block-end-color: var(--sp-link); }

/* ===========================================================================
   4. ICONS — soft-tinted squircle chips, shape-carried marks
   =========================================================================== */
.swal2-icon {
  position: relative;
  box-sizing: border-box;
  inline-size: 78px;
  block-size: 78px;
  margin: 4px auto 16px;
  border: 0 !important;
  border-radius: var(--sp-r-2xl);
  background: var(--sp-accent-soft);
  box-shadow:
    0 10px 26px -8px var(--sp-accent-glow),
    inset 0 0 0 1px color-mix(in srgb, var(--sp-accent) 22%, transparent);
  animation: sp-icon-pop var(--sp-t-slow) var(--sp-ease) both;
}
.swal2-icon.swal2-icon-show { animation: sp-icon-pop var(--sp-t-slow) var(--sp-ease) both; }
@keyframes sp-icon-pop {
  0%   { opacity: 0; transform: scale(.6) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(0); }
  100% { opacity: 1; transform: scale(1); }
}
.swal2-icon .swal2-icon-content {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

/* color-mix fallback for older engines (inset ring) */
@supports not (color: color-mix(in srgb, red, blue)) {
  .swal2-icon { box-shadow: 0 10px 26px -8px var(--sp-accent-glow); }
}

/* --- SUCCESS --- */
.swal2-icon.swal2-success {
  background: var(--sp-green-soft);
  box-shadow: 0 10px 26px -8px rgba(12,166,120,.32), inset 0 0 0 1px rgba(12,166,120,.22);
}
.swal2-icon.swal2-success .swal2-success-ring,
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { display: none !important; }
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--sp-green);
  block-size: 5px;
  border-radius: var(--sp-r-pill);
}
.swal2-icon.swal2-success .swal2-success-line-tip  { inset-inline-start: 18px; inset-block-start: 40px; inline-size: 18px; }
.swal2-icon.swal2-success .swal2-success-line-long { inset-inline-end: 14px;  inset-block-start: 34px; inline-size: 34px; }

/* --- ERROR --- */
.swal2-icon.swal2-error {
  background: var(--sp-red-soft);
  box-shadow: 0 10px 26px -8px rgba(224,49,49,.32), inset 0 0 0 1px rgba(224,49,49,.22);
}
.swal2-icon.swal2-error .swal2-x-mark { position: relative; display: block; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--sp-red);
  block-size: 5px;
  border-radius: var(--sp-r-pill);
  inset-block-start: 37px;
  inline-size: 40px;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left']  { inset-inline-start: 19px; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] { inset-inline-end: 19px; }

/* --- WARNING / INFO / QUESTION glyph chips --- */
.swal2-icon.swal2-warning {
  background: var(--sp-amber-soft);
  color: var(--sp-amber);
  box-shadow: 0 10px 26px -8px rgba(217,119,6,.30), inset 0 0 0 1px rgba(217,119,6,.22);
}
.swal2-icon.swal2-info {
  background: var(--sp-blue-tint);
  color: var(--sp-blue);
  box-shadow: 0 10px 26px -8px rgba(54,128,237,.30), inset 0 0 0 1px rgba(54,128,237,.22);
}
.swal2-icon.swal2-question {
  background: var(--sp-violet-soft);
  color: var(--sp-violet);
  box-shadow: 0 10px 26px -8px rgba(112,72,232,.30), inset 0 0 0 1px rgba(112,72,232,.22);
}

/* ===========================================================================
   5. ACTIONS + BUTTONS — one system for native .swal2-styled AND Bootstrap .btn
   =========================================================================== */
.swal2-actions {
  gap: 10px;
  margin: 22px 0 2px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--sp-line);
  inline-size: 100%;
  flex-wrap: wrap;
}

/* Shared base */
.swal2-actions .swal2-styled,
body .swal2-actions .btn {
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  padding: 11px 20px;
  min-inline-size: 108px;
  min-block-size: 44px;
  border: 1px solid transparent;
  border-radius: var(--sp-r-md);
  font-family: var(--sp-font);
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--sp-t-fast) var(--sp-ease),
              box-shadow var(--sp-t) var(--sp-ease),
              background-color var(--sp-t) var(--sp-ease),
              border-color var(--sp-t) var(--sp-ease),
              color var(--sp-t) var(--sp-ease),
              filter var(--sp-t) var(--sp-ease);
}
.swal2-actions .swal2-styled:hover,
body .swal2-actions .btn:hover { transform: translateY(-1px); }
.swal2-actions .swal2-styled:active,
body .swal2-actions .btn:active { transform: translateY(0) scale(.985); }
/* kill swal default focus box; keyboard-only ring */
.swal2-actions .swal2-styled:focus,
body .swal2-actions .btn:focus { outline: none; box-shadow: none; }
.swal2-actions .swal2-styled:focus-visible,
body .swal2-actions .btn:focus-visible { outline: none; box-shadow: var(--sp-ring); }
.swal2-actions .swal2-styled:disabled,
body .swal2-actions .btn:disabled,
.swal2-actions .swal2-styled[disabled],
.swal2-actions .swal2-styled.swal2-disabled {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: none;
}

/* PRIMARY / CONFIRM — semantic solid, follows dialog type (--sp-btn).
   Resting bg darkened via color-mix so WHITE label meets WCAG AA (>=4.5:1);
   the plain var() line is the vibrant fallback for engines without color-mix. */
.swal2-actions .swal2-styled.swal2-confirm,
body .swal2-actions .btn-primary {
  background: var(--sp-btn);
  background: color-mix(in srgb, var(--sp-btn) 80%, #000);
  border-color: color-mix(in srgb, var(--sp-btn) 62%, #000 38%);
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--sp-btn-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.swal2-actions .swal2-styled.swal2-confirm:hover,
body .swal2-actions .btn-primary:hover {
  background: var(--sp-btn-ink);
  border-color: var(--sp-btn-ink);
  box-shadow: 0 10px 24px -6px var(--sp-btn-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
/* Always-green success confirm (buttonsStyling:false, .btn-success) */
body .swal2-actions .btn-success {
  background: var(--sp-green);
  background: color-mix(in srgb, var(--sp-green) 80%, #000);
  border-color: color-mix(in srgb, var(--sp-green) 62%, #000 38%);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(12,166,120,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
body .swal2-actions .btn-success:hover { background: var(--sp-green-ink); border-color: var(--sp-green-ink); }
/* Always-red danger confirm (delete flows, .btn-danger) */
body .swal2-actions .btn-danger,
.swal2-actions .swal2-styled.swal2-confirm.btn-danger {
  background: var(--sp-red);
  background: color-mix(in srgb, var(--sp-red) 80%, #000);
  border-color: color-mix(in srgb, var(--sp-red) 62%, #000 38%);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(224,49,49,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
body .swal2-actions .btn-danger:hover,
.swal2-actions .swal2-styled.swal2-confirm.btn-danger:hover { background: var(--sp-red-ink); border-color: var(--sp-red-ink); }

/* SECONDARY / CANCEL / DENY — quiet ghost */
.swal2-actions .swal2-styled.swal2-cancel,
.swal2-actions .swal2-styled.swal2-deny,
body .swal2-actions .btn-light,
body .swal2-actions .btn-secondary,
body .swal2-actions .btn-default {
  background: var(--sp-ghost-bg);
  border-color: var(--sp-line-strong);
  color: var(--sp-ink-soft);
  box-shadow: var(--sp-sh-sm);
}
.swal2-actions .swal2-styled.swal2-cancel:hover,
.swal2-actions .swal2-styled.swal2-deny:hover,
body .swal2-actions .btn-light:hover,
body .swal2-actions .btn-secondary:hover,
body .swal2-actions .btn-default:hover {
  background: var(--sp-ghost-hover);
  border-color: var(--sp-mut);
  color: var(--sp-ink);
}
/* deny leans quietly danger — signalled by a red-tinted BORDER (not text),
   so text keeps AA contrast on the ghost surface in both light and dark. */
.swal2-actions .swal2-styled.swal2-deny {
  color: var(--sp-ink-soft);
  border-color: color-mix(in srgb, var(--sp-red) 34%, var(--sp-line-strong));
}
.swal2-actions .swal2-styled.swal2-deny:hover { border-color: var(--sp-red); color: var(--sp-ink); }

/* ===========================================================================
   6. LOADER — premium accent spinner
   =========================================================================== */
.swal2-loader {
  margin: 18px auto;
  inline-size: 2.4em;
  block-size: 2.4em;
  border-width: 3px;
  border-style: solid;
  border-color: var(--sp-accent) transparent var(--sp-accent) transparent;
}

/* ===========================================================================
   7. INPUTS
   =========================================================================== */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 44px;
  margin: 12px auto 4px;
  padding: 11px 14px;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-r-md);
  background: var(--sp-card);
  color: var(--sp-ink);
  font-family: var(--sp-font);
  font-size: .95rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--sp-t) var(--sp-ease), box-shadow var(--sp-t) var(--sp-ease);
}
.swal2-textarea { min-block-size: 96px; resize: vertical; line-height: 1.55; }
.swal2-input::placeholder,
.swal2-textarea::placeholder { color: var(--sp-mut); }
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
  outline: none;
  border-color: var(--sp-accent);
  box-shadow: var(--sp-ring);
}
.swal2-input.swal2-inputerror,
.swal2-textarea.swal2-inputerror,
.swal2-select.swal2-inputerror {
  border-color: var(--sp-red) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-red) 22%, transparent) !important;
}
.swal2-input-label {
  margin: 10px auto 2px;
  color: var(--sp-ink-soft);
  font-size: .875rem;
  font-weight: 600;
}

/* range */
.swal2-range { margin: 12px auto; background: transparent; }
.swal2-range input { inline-size: 80%; accent-color: var(--sp-accent); }
.swal2-range output {
  color: var(--sp-ink);
  font-weight: 650;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

/* checkbox / radio */
.swal2-checkbox,
.swal2-radio {
  gap: 8px;
  margin: 12px auto;
  padding: 8px 12px;
  border-radius: var(--sp-r-sm);
  background: var(--sp-surface-3);
  color: var(--sp-txt);
  font-size: .95rem;
}
.swal2-checkbox input,
.swal2-radio input {
  margin-inline: 0 8px;
  accent-color: var(--sp-accent);
  inline-size: 1.05em;
  block-size: 1.05em;
}

/* validation message — danger pill with shape-bearing badge */
.swal2-validation-message {
  margin: 12px 0 0;
  padding: 9px 14px;
  border-radius: var(--sp-r-md);
  background: var(--sp-red-soft) !important;
  color: var(--sp-red-ink) !important;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
.swal2-validation-message::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  margin-inline: 0 8px;
  border-radius: var(--sp-r-pill);
  background: var(--sp-red);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
}

/* ===========================================================================
   8. CLOSE + FOOTER
   =========================================================================== */
.swal2-close {
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--sp-r-sm);
  color: var(--sp-mut);
  font-size: 26px;
  line-height: 1;
  transition: color var(--sp-t) var(--sp-ease), background-color var(--sp-t) var(--sp-ease);
}
.swal2-close:hover { color: var(--sp-ink-soft); background: var(--sp-surface-3); }
.swal2-close:focus-visible { outline: none; color: var(--sp-ink-soft); box-shadow: var(--sp-ring); }
.swal2-footer {
  margin: 20px 0 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--sp-line);
  color: var(--sp-mut);
  font-size: .85rem;
  line-height: 1.5;
}
.swal2-footer a { color: var(--sp-link); font-weight: 600; text-decoration: none; }
.swal2-footer a:hover { text-decoration: underline; }

/* ===========================================================================
   9. IMAGE
   =========================================================================== */
.swal2-image {
  margin: 16px auto 6px;
  border-radius: var(--sp-r-lg);
  max-inline-size: 100%;
  box-shadow: var(--sp-sh-sm);
}

/* ===========================================================================
   10. PROGRESS STEPS — premium stepper
   =========================================================================== */
.swal2-progress-steps {
  margin: 4px auto 20px;
  padding: 0;
  gap: 0;
  font-weight: 650;
}
.swal2-progress-steps .swal2-progress-step {
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--sp-r-pill);
  background: var(--sp-surface-3);
  color: var(--sp-mut);
  font-size: .8rem;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}
/* Active step uses the darker accent-ink so the white numeral meets AA. */
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: var(--sp-accent-ink);
  color: #fff;
  box-shadow: 0 0 0 4px var(--sp-accent-soft);
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step,
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: var(--sp-surface-3);
}
.swal2-progress-steps .swal2-progress-step-line {
  inline-size: 30px;
  block-size: 3px;
  margin-inline: 0;
  background: var(--sp-accent);
}

/* ===========================================================================
   11. TOAST (swal) — compact card, semantic left rail, accent timer bar
   =========================================================================== */
.swal2-popup.swal2-toast {
  box-sizing: border-box;
  inline-size: auto;
  max-inline-size: 380px;
  padding: 14px 16px;
  gap: 2px;
  border: 1px solid var(--sp-line);
  border-inline-start: 4px solid var(--sp-blue);
  border-radius: var(--sp-r-lg);
  background: var(--sp-card) !important;
  box-shadow: var(--sp-sh-md);
  overflow: hidden;
}
.swal2-popup.swal2-toast::before { display: none; } /* no modal top bar on toast */
.swal2-popup.swal2-toast.swal2-icon-success,
.swal2-popup.swal2-toast:has(.swal2-success) { border-inline-start-color: var(--sp-green); }
.swal2-popup.swal2-toast.swal2-icon-error,
.swal2-popup.swal2-toast:has(.swal2-error)   { border-inline-start-color: var(--sp-red); }
.swal2-popup.swal2-toast.swal2-icon-warning,
.swal2-popup.swal2-toast:has(.swal2-warning) { border-inline-start-color: var(--sp-amber); }
.swal2-popup.swal2-toast.swal2-icon-info,
.swal2-popup.swal2-toast:has(.swal2-info)    { border-inline-start-color: var(--sp-blue); }
.swal2-popup.swal2-toast.swal2-icon-question,
.swal2-popup.swal2-toast:has(.swal2-question){ border-inline-start-color: var(--sp-violet); }

.swal2-popup.swal2-toast .swal2-title {
  margin: 0;
  color: var(--sp-ink);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: start;
}
.swal2-popup.swal2-toast .swal2-html-container {
  margin: 2px 0 0;
  color: var(--sp-txt);
  font-size: .82rem;
  line-height: 1.45;
  text-align: start;
}
.swal2-popup.swal2-toast .swal2-icon {
  inline-size: 30px;
  block-size: 30px;
  min-inline-size: 30px;
  margin: 0;
  margin-inline: 2px 12px;
  border-radius: var(--sp-r-sm);
  box-shadow: none;
  animation: none;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: 1.05rem; }
.swal2-popup.swal2-toast .swal2-success .swal2-success-line-tip  { inset-block-start: 15px; inset-inline-start: 6px; inline-size: 7px;  block-size: 3px; }
.swal2-popup.swal2-toast .swal2-success .swal2-success-line-long { inset-block-start: 12px; inset-inline-end: 5px;  inline-size: 14px; block-size: 3px; }
.swal2-popup.swal2-toast .swal2-error [class^='swal2-x-mark-line'] { inset-block-start: 14px; block-size: 3px; inline-size: 16px; }
.swal2-popup.swal2-toast .swal2-error [class^='swal2-x-mark-line'][class$='left']  { inset-inline-start: 7px; }
.swal2-popup.swal2-toast .swal2-error [class^='swal2-x-mark-line'][class$='right'] { inset-inline-end: 7px; }
.swal2-popup.swal2-toast .swal2-actions { margin: 8px 0 0; padding-block-start: 0; border: 0; gap: 6px; }
.swal2-popup.swal2-toast .swal2-styled { min-inline-size: 0; padding: 6px 12px; min-block-size: 32px; font-size: .8rem; }
.swal2-popup.swal2-toast .swal2-close { inline-size: 26px; block-size: 26px; font-size: 20px; inset-block-start: 6px; inset-inline-end: 6px; }

/* toast timer bar — accent gradient keyed to the icon */
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  block-size: 3px;
  background: linear-gradient(90deg, var(--sp-blue-light), var(--sp-blue));
}
.swal2-popup.swal2-toast.swal2-icon-success .swal2-timer-progress-bar,
.swal2-popup.swal2-toast:has(.swal2-success) .swal2-timer-progress-bar { background: linear-gradient(90deg, var(--sp-green-ink), var(--sp-green)); }
.swal2-popup.swal2-toast.swal2-icon-error .swal2-timer-progress-bar,
.swal2-popup.swal2-toast:has(.swal2-error) .swal2-timer-progress-bar   { background: linear-gradient(90deg, var(--sp-red-ink), var(--sp-red)); }
.swal2-popup.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar,
.swal2-popup.swal2-toast:has(.swal2-warning) .swal2-timer-progress-bar { background: linear-gradient(90deg, var(--sp-amber-ink), var(--sp-amber)); }
.swal2-popup.swal2-toast.swal2-icon-question .swal2-timer-progress-bar,
.swal2-popup.swal2-toast:has(.swal2-question) .swal2-timer-progress-bar { background: linear-gradient(90deg, var(--sp-violet-ink), var(--sp-violet)); }

/* toast entrance/exit — corner slide-in, RTL-mirrored */
.swal2-popup.swal2-toast.swal2-show { animation: sp-toast-in var(--sp-t-slow) var(--sp-ease); }
.swal2-popup.swal2-toast.swal2-hide { animation: sp-toast-out var(--sp-t) var(--sp-ease); }
@keyframes sp-toast-in  { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes sp-toast-out { from { opacity: 1; transform: translateX(0) scale(1); }    to { opacity: 0; transform: translateX(24px) scale(.96); } }
[dir="rtl"] .swal2-popup.swal2-toast.swal2-show { animation-name: sp-toast-in-rtl; }
[dir="rtl"] .swal2-popup.swal2-toast.swal2-hide { animation-name: sp-toast-out-rtl; }
@keyframes sp-toast-in-rtl  { from { opacity: 0; transform: translateX(-24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes sp-toast-out-rtl { from { opacity: 1; transform: translateX(0) scale(1); }     to { opacity: 0; transform: translateX(-24px) scale(.96); } }
/* bottom-anchored toasts rise from below */
.swal2-container.swal2-bottom-end .swal2-popup.swal2-toast.swal2-show,
.swal2-container.swal2-bottom .swal2-popup.swal2-toast.swal2-show,
.swal2-container.swal2-bottom-start .swal2-popup.swal2-toast.swal2-show { animation-name: sp-toast-in-up; }
@keyframes sp-toast-in-up { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ===========================================================================
   12. toastr (admin) — MATCHED to the swal toast card language
   =========================================================================== */
#toast-container { font-family: var(--sp-font); }
#toast-container > .toast,
#toast-container > div.toast {
  position: relative;
  box-sizing: border-box;
  inline-size: 340px;
  max-inline-size: calc(100vw - 32px);
  padding: 14px 16px;
  padding-inline: 46px 16px;      /* room for the icon chip (logical) */
  margin-block-end: 12px;
  border: 1px solid var(--sp-line);
  border-inline-start: 4px solid var(--sp-blue);
  border-radius: var(--sp-r-lg);
  background-color: var(--sp-card) !important;
  background-image: none !important;   /* kill toastr's default sprite PNGs */
  color: var(--sp-txt);
  box-shadow: var(--sp-sh-md) !important;
  opacity: 1;
  overflow: hidden;
  transition: transform var(--sp-t) var(--sp-ease), box-shadow var(--sp-t) var(--sp-ease);
}
#toast-container > .toast:hover {
  box-shadow: var(--sp-sh-lg) !important;
  transform: translateY(-1px);
  opacity: 1;
}
/* semantic icon chip via ::before (inline SVG mask, no external assets) */
#toast-container > .toast::before {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: 14px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--sp-r-sm);
  background: var(--sp-blue);
  -webkit-mask: center / 13px no-repeat;
          mask: center / 13px no-repeat;
}
#toast-container > .toast-success { border-inline-start-color: var(--sp-green); }
#toast-container > .toast-success::before {
  background: var(--sp-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
#toast-container > .toast-error { border-inline-start-color: var(--sp-red); }
#toast-container > .toast-error::before {
  background: var(--sp-red);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
#toast-container > .toast-warning { border-inline-start-color: var(--sp-amber); }
#toast-container > .toast-warning::before {
  background: var(--sp-amber);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}
#toast-container > .toast-info { border-inline-start-color: var(--sp-blue); }
#toast-container > .toast-info::before {
  background: var(--sp-blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
[dir="rtl"] #toast-container > .toast::before { -webkit-mask-position: center; mask-position: center; }

.toast-title {
  color: var(--sp-ink);
  font-weight: 650;
  font-size: .9rem;
  line-height: 1.35;
}
.toast-message {
  color: var(--sp-txt);
  font-size: .82rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.toast-message a { color: var(--sp-link); font-weight: 600; }
.toast-close-button {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--sp-r-sm);
  color: var(--sp-mut);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
  transition: color var(--sp-t) var(--sp-ease), background-color var(--sp-t) var(--sp-ease);
}
.toast-close-button:hover,
.toast-close-button:focus {
  background: var(--sp-surface-3);
  color: var(--sp-ink);
  opacity: 1;
  outline: none;
}
.toast-close-button:focus-visible { box-shadow: var(--sp-ring); }
/* timer / progress — accent bar keyed to type */
#toast-container > .toast .toast-progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  opacity: 1;
  background-color: var(--sp-blue);
}
#toast-container > .toast-success .toast-progress { background-color: var(--sp-green); }
#toast-container > .toast-error .toast-progress   { background-color: var(--sp-red); }
#toast-container > .toast-warning .toast-progress { background-color: var(--sp-amber); }
#toast-container > .toast-info .toast-progress    { background-color: var(--sp-blue); }

/* ===========================================================================
   13. RESPONSIVE — small screens
   =========================================================================== */
@media (max-width: 420px) {
  .swal2-popup { padding: 24px 20px 20px; border-radius: var(--sp-r-xl); }
  .swal2-title { font-size: 1.18rem; }
  .swal2-actions { flex-direction: column-reverse; }
  .swal2-actions .swal2-styled,
  body .swal2-actions .btn { inline-size: 100%; }
  #toast-container > .toast { inline-size: auto; max-inline-size: calc(100vw - 28px); }
}

/* ===========================================================================
   14. REDUCED MOTION — disable every animation / transition / hover-lift
   (incl. SweetAlert2's own success-line / x-mark draw animations)
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .swal2-container,
  .swal2-container.swal2-backdrop-show,
  .swal2-container.swal2-backdrop-hide,
  .swal2-popup, .swal2-popup.swal2-show, .swal2-popup.swal2-hide,
  .swal2-popup.swal2-toast.swal2-show, .swal2-popup.swal2-toast.swal2-hide,
  [dir="rtl"] .swal2-popup.swal2-toast.swal2-show,
  [dir="rtl"] .swal2-popup.swal2-toast.swal2-hide,
  .swal2-icon, .swal2-icon.swal2-icon-show, .swal2-icon *,
  .swal2-icon .swal2-icon-content,
  .swal2-success-line-tip, .swal2-success-line-long,
  .swal2-icon.swal2-error [class^='swal2-x-mark-line'],
  .swal2-actions .swal2-styled, body .swal2-actions .btn,
  .swal2-input, .swal2-textarea, .swal2-select, .swal2-file,
  .swal2-close,
  #toast-container > .toast, .toast-close-button {
    animation: none !important;
    transition: none !important;
  }
  .swal2-actions .swal2-styled:hover,
  body .swal2-actions .btn:hover,
  .swal2-actions .swal2-styled:active,
  body .swal2-actions .btn:active,
  #toast-container > .toast:hover { transform: none !important; }
}