/* ═══════════════════════════════════════════════════════════════════
   TOAST BASE
   Controls the overall toast container and shared child elements.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast {
    padding: 10px 14px !important;        /* ← left/right breathing room */
    border-radius: 10px !important;       /* ← toast corner rounding */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease;
    /* gap removed — was causing height expansion */
}

.swal2-popup.swal2-toast:hover {
    transform: scale(1.02);
}

/* ── Hide the native SweetAlert2 icon entirely ──────────────────────
   We replace it with a ::before pseudo-element on the title instead.
   This avoids all the CSS shape complexity for success and error icons.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-icon {
    display: none !important;
}

/* ── Title (main message text) ─────────────────────────────────────
   The icon is injected as a ::before on the title using unicode.
   display:flex + align-items:center keeps the icon and text aligned.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;                  /* ← space between icon and text */
}

/* ── Icon injected via ::before on the title ───────────────────────
   font-size controls icon size. content = the unicode character.
   Each variant overrides content + color below.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-title::before {
    font-size: 16px !important;           /* ← icon size — adjust here */
    font-weight: 400 !important;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Body text (sub-message, if used) ──────────────────────────────
   Shown when a toast has both a title and a body message.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-html-container {
    font-size: 12px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    opacity: 0.85;
}

/* ── Close button (×) ──────────────────────────────────────────────
   font-size controls the × button size.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-close {
    font-size: 1.2em !important;
    opacity: 0.5;
    color: inherit !important;
}

.swal2-popup.swal2-toast .swal2-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0) !important;
    color: inherit !important;
    transform: none;
}

/* ── Timer progress bar ─────────────────────────────────────────────
   The thin bar at the bottom that counts down before auto-dismiss.
────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    height: 3px;                          /* ← progress bar thickness */
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════════
   SUCCESS — bg: #C5F7DD  accent: #38C37A
   Icon: ✓ checkmark unicode
   To retheme: change both hex values in this block.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast.swal2-icon-success {
    background-color: #C5F7DD !important;
    border-left: 4px solid #38C37A !important;
    color: #38C37A !important;
}

.swal2-popup.swal2-toast.swal2-icon-success .swal2-title {
    color: #38C37A !important;
}

.swal2-popup.swal2-toast.swal2-icon-success .swal2-title::before {
    content: "✔";                         /* ← swap unicode here to change icon */
    color: #38C37A !important;
}

.swal2-popup.swal2-toast.swal2-icon-success .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    background: #38C37A !important;
}


/* ═══════════════════════════════════════════════════════════════════
   WARNING — bg: #FFE8C3  accent: #E8A22A
   Icon: ⚠ warning triangle unicode
   To retheme: change both hex values in this block.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast.swal2-icon-warning {
    background-color: #FFE8C3 !important;
    border-left: 4px solid #E8A22A !important;
    color: #E8A22A !important;
}

.swal2-popup.swal2-toast.swal2-icon-warning .swal2-title {
    color: #E8A22A !important;
}

.swal2-popup.swal2-toast.swal2-icon-warning .swal2-title::before {
    content: "⚠";                         /* ← swap unicode here to change icon */
    color: #E8A22A !important;
}

.swal2-popup.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    background: #E8A22A !important;
}


/* ═══════════════════════════════════════════════════════════════════
   INFO — bg: #CCE3FF  accent: #3E83E9
   Icon: ℹ info unicode
   To retheme: change both hex values in this block.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast.swal2-icon-info {
    background-color: #CCE3FF !important;
    border-left: 4px solid #3E83E9 !important;
    color: #3E83E9 !important;
}

.swal2-popup.swal2-toast.swal2-icon-info .swal2-title {
    color: #3E83E9 !important;
}

.swal2-popup.swal2-toast.swal2-icon-info .swal2-title::before {
    content: "ℹ";                         /* ← swap unicode here to change icon */
    color: #3E83E9 !important;
}

.swal2-popup.swal2-toast.swal2-icon-info .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    background: #3E83E9 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ERROR — bg: #FFD0CB  accent: #F1594C
   Icon: ✕ cross unicode
   To retheme: change both hex values in this block.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast.swal2-icon-error {
    background-color: #FFD0CB !important;
    border-left: 4px solid #F1594C !important;
    color: #F1594C !important;
}

.swal2-popup.swal2-toast.swal2-icon-error .swal2-title {
    color: #F1594C !important;
}

.swal2-popup.swal2-toast.swal2-icon-error .swal2-title::before {
    content: "✕";                         /* ← swap unicode here to change icon */
    color: #F1594C !important;
}

.swal2-popup.swal2-toast.swal2-icon-error .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    background: #F1594C !important;
}


/* ═══════════════════════════════════════════════════════════════════
   QUESTION — bg: #E9E8EB  accent: #737680
   Icon: ? question mark unicode
   To retheme: change both hex values in this block.
═══════════════════════════════════════════════════════════════════ */

.swal2-popup.swal2-toast.swal2-icon-question {
    background-color: #E9E8EB !important;
    border-left: 4px solid #737680 !important;
    color: #737680 !important;
}

.swal2-popup.swal2-toast.swal2-icon-question .swal2-title {
    color: #737680 !important;
}

.swal2-popup.swal2-toast.swal2-icon-question .swal2-title::before {
    content: "?";                         /* ← swap unicode here to change icon */
    color: #737680 !important;
}

.swal2-popup.swal2-toast.swal2-icon-question .swal2-timer-progress-bar-container .swal2-timer-progress-bar {
    background: #737680 !important;
}