/* ═══════════════════════════════════════════════════════════════════
   mac_swal.css — Macchinaa SweetAlert2 Dark Theme Override
   Overrides the default white SweetAlert2 to match system dark design
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ROOT VARIABLES ─── */
:root {
  --mac-bg:       #111118;
  --mac-bg2:      #16161e;
  --mac-border:   rgba(255,255,255,0.07);
  --mac-text:     #f0f0f0;
  --mac-muted:    #888;
  --mac-orange:   #FF6500;
  --mac-orange3:  #e55800;
  --mac-red:      #ef4444;
  --mac-green:    #22c55e;
  --mac-yellow:   #fbbf24;
  --mac-blue:     #60a5fa;
}

/* ─── BACKDROP ─── */
.swal2-container {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.swal2-backdrop-show,
.swal2-container.swal2-backdrop-show {
  background: rgba(0, 0, 0, 0.78) !important;
}

/* ─── POPUP BOX ─── */
.swal2-popup {
  background: var(--mac-bg) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 20px !important;
  padding: 32px 28px 28px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  direction: rtl;
  /* Top accent line — injected by JS per type */
}

/* Accent top border by type */
.swal2-popup.mac-type-success  { border-top: 3px solid var(--mac-green)  !important; }
.swal2-popup.mac-type-error    { border-top: 3px solid var(--mac-red)    !important; }
.swal2-popup.mac-type-warning  { border-top: 3px solid var(--mac-orange) !important; }
.swal2-popup.mac-type-info     { border-top: 3px solid var(--mac-blue)   !important; }
.swal2-popup.mac-type-question { border-top: 3px solid var(--mac-yellow) !important; }

/* ─── TITLE ─── */
.swal2-title {
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

/* ─── CONTENT TEXT ─── */
.swal2-html-container,
.swal2-content {
  color: var(--mac-muted) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.swal2-html-container strong,
.swal2-html-container b {
  color: var(--mac-text) !important;
}

/* ─── ICON CIRCLES ─── */
.swal2-icon {
  border-width: 2px !important;
  width: 68px !important;
  height: 68px !important;
  margin: 0 auto 18px !important;
}

/* Warning icon — orange */
.swal2-icon.swal2-warning {
  border-color: rgba(255,101,0,0.35) !important;
  color: var(--mac-orange) !important;
  background: rgba(255,101,0,0.1) !important;
}
.swal2-icon.swal2-warning .swal2-icon-content {
  color: var(--mac-orange) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
}

/* Error icon — red */
.swal2-icon.swal2-error {
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.1) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark'] {
  background: var(--mac-red) !important;
}
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background: var(--mac-red) !important;
}

/* Success icon — green */
.swal2-icon.swal2-success {
  border-color: rgba(34,197,94,0.35) !important;
  background: rgba(34,197,94,0.1) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(34,197,94,0.3) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background: var(--mac-green) !important;
}

/* Info icon — blue */
.swal2-icon.swal2-info {
  border-color: rgba(96,165,250,0.35) !important;
  color: var(--mac-blue) !important;
  background: rgba(96,165,250,0.1) !important;
}
.swal2-icon.swal2-info .swal2-icon-content {
  color: var(--mac-blue) !important;
}

/* Question icon — yellow */
.swal2-icon.swal2-question {
  border-color: rgba(251,191,36,0.35) !important;
  color: var(--mac-yellow) !important;
  background: rgba(251,191,36,0.1) !important;
}
.swal2-icon.swal2-question .swal2-icon-content {
  color: var(--mac-yellow) !important;
}

/* ─── ACTIONS (BUTTONS AREA) ─── */
.swal2-actions {
  gap: 10px !important;
  flex-direction: row-reverse !important;
  margin-top: 22px !important;
}

/* CONFIRM button — Orange */
.swal2-popup .swal2-actions .swal2-confirm,
.swal2-popup .swal2-actions .swal2-confirm.swal2-styled {
  background: var(--mac-orange) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  padding: 11px 30px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  min-width: 100px !important;
  box-shadow: 0 4px 15px rgba(255,101,0,0.25) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}
.swal2-popup .swal2-actions .swal2-confirm:hover,
.swal2-popup .swal2-actions .swal2-confirm.swal2-styled:hover {
  background: var(--mac-orange3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255,101,0,0.4) !important;
}
.swal2-popup .swal2-actions .swal2-confirm:focus,
.swal2-popup .swal2-actions .swal2-confirm.swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(255,101,0,0.3) !important;
}

/* CANCEL button — Subtle dark */
.swal2-popup .swal2-actions .swal2-cancel,
.swal2-popup .swal2-actions .swal2-cancel.swal2-styled {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: var(--mac-muted) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  padding: 11px 30px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  min-width: 100px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}
.swal2-popup .swal2-actions .swal2-cancel:hover,
.swal2-popup .swal2-actions .swal2-cancel.swal2-styled:hover {
  background: rgba(255,255,255,0.11) !important;
  color: var(--mac-text) !important;
}

/* DENY button — Red */
.swal2-popup .swal2-actions .swal2-deny,
.swal2-popup .swal2-actions .swal2-deny.swal2-styled {
  background: rgba(239,68,68,0.12) !important;
  background-image: none !important;
  color: var(--mac-red) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  padding: 11px 30px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.swal2-popup .swal2-actions .swal2-deny:hover {
  background: rgba(239,68,68,0.22) !important;
}

/* ─── INPUT FIELDS ─── */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  background: var(--mac-bg2) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 9px !important;
  color: var(--mac-text) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  outline: none !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--mac-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,101,0,0.15) !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--mac-muted) !important;
  opacity: 0.7;
}
/* input label */
.swal2-input-label {
  color: var(--mac-muted) !important;
  font-size: 12px !important;
}

/* ─── FOOTER ─── */
.swal2-footer {
  border-top: 1px solid var(--mac-border) !important;
  color: var(--mac-muted) !important;
  font-size: 11px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
}

/* ─── CLOSE BUTTON ─── */
.swal2-popup .swal2-close {
  color: var(--mac-muted) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 12px !important;
  /* In RTL popup: place close on the left */
  left: 12px !important;
  right: auto !important;
  background: rgba(255,255,255,0.05) !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.swal2-popup .swal2-close:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}
/* Hide close button by default unless explicitly shown */
.swal2-popup:not(.mac-show-close) .swal2-close {
  display: none !important;
}

/* ─── TIMER PROGRESS BAR ─── */
.swal2-timer-progress-bar {
  background: var(--mac-orange) !important;
  height: 3px !important;
  border-radius: 99px !important;
}
.swal2-timer-progress-bar-container {
  border-radius: 0 0 17px 17px !important;
  overflow: hidden !important;
}

/* ─── LOADING SPINNER ─── */
.swal2-loader {
  border-color: var(--mac-orange) transparent var(--mac-orange) transparent !important;
  border-width: 3px !important;
}

/* ─── VALIDATION MESSAGE ─── */
.swal2-validation-message {
  background: rgba(239,68,68,0.1) !important;
  color: var(--mac-red) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  border: none !important;
}
.swal2-validation-message::before {
  background: var(--mac-red) !important;
}

/* ─── TOAST VARIANT ─── */
.swal2-popup.swal2-toast {
  background: var(--mac-bg) !important;
  border: 1px solid var(--mac-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  padding: 14px 18px !important;
}
.swal2-popup.swal2-toast .swal2-title {
  font-size: 13px !important;
  color: var(--mac-text) !important;
}
.swal2-popup.swal2-toast .swal2-html-container {
  font-size: 11px !important;
}

/* ─── ANIMATE IN ─── */
@keyframes mac-swal-in {
  from { opacity: 0; transform: scale(0.93) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.swal2-show {
  animation: mac-swal-in 0.22s cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes mac-swal-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.9); }
}
.swal2-hide {
  animation: mac-swal-out 0.15s ease !important;
}