/* ════════════════════════════════════════════════════════════════════
   SweetAlert2 — Global Theme Overrides
   ────────────────────────────────────────────────────────────────────
   THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL SWAL POPUP STYLING.
   Edit this file to change appearance of EVERY SweetAlert across
   the entire site (backend + public/frontend).

   Loaded globally via:
     • app/Views/layouts/backend-header.php  (backend pages)
     • app/Views/layouts/footer.php          (public pages)
     • app/Views/layouts/footer1.php         (public alt layout)

   Selectors targeted:
     .swal2-popup        — the main modal box
     .swal2-actions      — button row
     .swal2-confirm      — confirm button
     .swal2-cancel       — cancel button
     .swal2-icon         — icon circle (success/error/warning/info)
     .swal2-title        — heading text
     .swal2-html-container — body text
   ════════════════════════════════════════════════════════════════════ */

/* ── Main popup box — rounded rectangle ─────────────────────────── */
.swal2-popup {
  border-radius: 24px !important;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.35),
              0 0 0 1px rgba(15, 23, 42, 0.05) !important;
  padding: 28px 32px !important;
  font-family: 'Inter', 'Poppins', 'Segoe UI', sans-serif !important;
}

/* ── Buttons — rounded too, matching the box ────────────────────── */
.swal2-actions {
  margin-top: 18px !important;
  gap: 8px !important;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  border-radius: 14px !important;
  padding: 10px 26px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.25) !important;
  transition: opacity 0.18s, transform 0.18s !important;
}

.swal2-confirm:hover,
.swal2-cancel:hover,
.swal2-deny:hover {
  opacity: 0.93 !important;
  transform: translateY(-1px) !important;
}

/* Default Confirm = teal (matches site primary)
   Override per-call via Swal.fire({ confirmButtonColor: '#xxx' }) if needed. */
.swal2-confirm {
  background-color: #0d9488 !important;
}
.swal2-cancel {
  background-color: #e2e8f0 !important;
  color: #475569 !important;
}
.swal2-deny {
  background-color: #dc2626 !important;
}

/* ── Title + message ────────────────────────────────────────────── */
.swal2-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: 8px !important;
}

.swal2-html-container,
.swal2-content {
  font-size: 0.92rem !important;
  color: #475569 !important;
  margin-top: 4px !important;
}

/* ── Icon circle — slightly less circular if you want rectangle vibe
       (leaving as native circle — adjust if pure rectangle preferred) */
.swal2-icon {
  margin-top: 12px !important;
}

/* ── Input fields inside SweetAlert (prompts) ───────────────────── */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18) !important;
}

/* ── Backdrop slightly darker for emphasis ─────────────────────── */
.swal2-container.swal2-backdrop-show {
  background-color: rgba(15, 23, 42, 0.55) !important;
}

/* ── Toast variant (Swal.fire({ toast: true })) ─────────────────── */
.swal2-toast {
  border-radius: 16px !important;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.3) !important;
  padding: 12px 16px !important;
}