/*
 * GAMERSX — Global SweetAlert2 Theme
 * Applies automatically to every Swal dialog sitewide.
 * Design tokens from gx-layout.css :root variables.
 * Do NOT modify individual Swal calls — override here only.
 */

/* ── Backdrop ─────────────────────────────────────────────────── */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Popup shell ──────────────────────────────────────────────── */
.swal2-popup {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--gx-card-bg, #ffffff) !important;
  border-radius: var(--gx-radius-xl, 16px) !important;
  padding: 36px 32px 28px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.14),
    0 8px 25px rgba(0, 0, 0, 0.08) !important;
  max-width: 420px !important;
  width: 100% !important;
}

/* ── Title ────────────────────────────────────────────────────── */
.swal2-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gx-text-primary, #0F172A) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
}

.swal2-title:empty {
  display: none !important;
  margin: 0 !important;
}

/* ── Body text ────────────────────────────────────────────────── */
.swal2-html-container,
.swal2-content {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gx-text-secondary, #334155) !important;
  line-height: 1.65 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

/* ── Icon wrapper ─────────────────────────────────────────────── */
/* Only override margin — do NOT touch width/height/font-size/border-width
   because SweetAlert2's internal checkmark/X lines are absolutely
   positioned relative to the default 80px container. Resizing it
   pushes those elements outside the circle. */
.swal2-icon {
  margin: 0 auto 20px !important;
}

/* ── Warning → --gx-warning #F59E0B ──────────────────────────── */
.swal2-icon.swal2-warning {
  border-color: var(--gx-warning, #F59E0B) !important;
  color: var(--gx-warning, #F59E0B) !important;
}

/* ── Success → --gx-success #10B981 ──────────────────────────── */
.swal2-icon.swal2-success {
  border-color: var(--gx-success, #10B981) !important;
  color: var(--gx-success, #10B981) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.28) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: var(--gx-success, #10B981) !important;
}
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--gx-card-bg, #ffffff) !important;
}

/* ── Error → --gx-danger #EF4444 ─────────────────────────────── */
.swal2-icon.swal2-error {
  border-color: var(--gx-danger, #EF4444) !important;
  color: var(--gx-danger, #EF4444) !important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: var(--gx-danger, #EF4444) !important;
}

/* ── Info → --gx-info #3B82F6 ────────────────────────────────── */
.swal2-icon.swal2-info {
  border-color: var(--gx-info, #3B82F6) !important;
  color: var(--gx-info, #3B82F6) !important;
}

/* ── Question → --gx-primary #39278F ─────────────────────────── */
.swal2-icon.swal2-question {
  border-color: var(--gx-primary, #39278F) !important;
  color: var(--gx-primary, #39278F) !important;
}

/* ── Actions row ──────────────────────────────────────────────── */
.swal2-actions {
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 10px !important;
  justify-content: center !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* ── Button base ──────────────────────────────────────────────── */
/* Use .swal2-popup .swal2-styled.swal2-confirm (3 classes) to beat
   SweetAlert2's own injected .swal2-styled.swal2-confirm (2 classes).
   Without this, SweetAlert2's dynamically injected <style> wins even
   with !important when specificity is tied. */
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-deny {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--gx-radius-md, 8px) !important;
  padding: 10px 24px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: var(--gx-transition, all 0.2s ease) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  min-width: 100px !important;
  flex: 1 !important;
  max-width: 160px !important;
}

/* ── Confirm / Primary ────────────────────────────────────────── */
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-confirm:focus,
.swal2-popup .swal2-styled.swal2-confirm:focus-visible {
  background-color: var(--gx-primary-contrast, #7a4ecc) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
  text-decoration: none !important;
  background-color: var(--bb-primary-button-background-hover, #6a3eb8) !important;
  color: var(--bb-primary-button-text-hover, #fff) !important;
  border-color: var(--bb-primary-button-border-hover, transparent) !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* ── Cancel → neutral gray ────────────────────────────────────── */
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-cancel:focus,
.swal2-popup .swal2-styled.swal2-cancel:focus-visible {
  background-color: var(--gx-content-bg, #F1F5F9) !important;
  color: var(--gx-text-secondary, #334155) !important;
  outline: none !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
  background-color: var(--gx-card-border, #E2E8F0) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Deny → soft red ──────────────────────────────────────────── */
.swal2-popup .swal2-styled.swal2-deny,
.swal2-popup .swal2-styled.swal2-deny:focus,
.swal2-popup .swal2-styled.swal2-deny:focus-visible {
  background-color: var(--gx-status-rejected-btn-bg, #fee2e2) !important;
  color: var(--gx-status-rejected-dark, #b91c1c) !important;
  border: 1px solid var(--gx-status-rejected-border, #fca5a5) !important;
  outline: none !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-styled.swal2-deny:hover {
  background-color: var(--gx-danger, #EF4444) !important;
  color: #ffffff !important;
  border-color: var(--gx-danger, #EF4444) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Close (×) button ─────────────────────────────────────────── */
.swal2-close {
  font-size: 20px !important;
  color: var(--gx-text-muted, #64748B) !important;
  top: 12px !important;
  right: 16px !important;
  transition: var(--gx-transition, all 0.2s ease) !important;
}
.swal2-close:hover {
  color: var(--gx-text-primary, #0F172A) !important;
  background: transparent !important;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.swal2-loader {
  border-color: var(--gx-primary, #39278F) transparent var(--gx-primary, #39278F) transparent !important;
}

/* ── Timer progress bar ───────────────────────────────────────── */
.swal2-timer-progress-bar {
  background: var(--gx-primary, #39278F) !important;
  opacity: 0.7 !important;
}

/* ── Input / textarea / select (when Swal has an input) ───────── */
.swal2-input,
.swal2-textarea,
.swal2-select {
  font-family: 'Poppins', sans-serif !important;
  border-radius: var(--gx-radius-md, 8px) !important;
  border: 1px solid var(--gx-card-border, #E2E8F0) !important;
  color: var(--gx-text-primary, #0F172A) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--gx-primary, #39278F) !important;
  box-shadow: 0 0 0 3px rgba(57, 39, 143, 0.12) !important;
  outline: none !important;
}

/* ── Validation message ───────────────────────────────────────── */
.swal2-validation-message {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  border-radius: var(--gx-radius-sm, 6px) !important;
  background: var(--gx-status-rejected-btn-bg, #fee2e2) !important;
  color: var(--gx-status-rejected-dark, #b91c1c) !important;
  border: 1px solid var(--gx-status-rejected-border, #fca5a5) !important;
}