/* ============================================================================
   SALIO SWEETALERT2
   Brand-aligned overrides for SweetAlert2 toasts and modals. Hooks come
   from config/sweetalert.php (`customClass.*` -> `salio-swal*`). Targets
   both the custom hook and SweetAlert's own `.swal2-*` classes so we
   capture toasts, modals, icons, the timer bar, and animations.
   ============================================================================ */

/* ── Container: pulls toasts off the very edge ─────────────────────────── */
.salio-swal-container.swal2-container {
    padding: 1rem !important;
    z-index: 1090 !important;
}
.salio-swal-container.swal2-container.swal2-top-end,
.salio-swal-container.swal2-container.swal2-top-right { padding-top: 5rem !important; }

/* ── Shared popup chrome (modal + toast) ───────────────────────────────── */
.salio-swal.swal2-popup {
    font-family: var(--font-family, 'Inter', sans-serif);
    color: var(--text-strong, #0f172a);
    border: 1px solid rgba(14, 23, 51, .08);
    border-radius: var(--border-radius-lg, 14px);
    box-shadow:
        0 18px 48px rgba(14, 23, 51, .14),
        0 4px 12px  rgba(14, 23, 51, .06);
    background: #ffffff;
}

/* ── TOAST mode ────────────────────────────────────────────────────────── */
.salio-swal.swal2-popup.swal2-toast {
    position: relative;
    overflow: hidden;
    padding: .85rem 1rem .85rem .9rem !important;
    min-width: 320px;
    max-width: 420px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(14, 23, 51, .08);
    box-shadow:
        0 10px 30px rgba(14, 23, 51, .12),
        0 2px 6px   rgba(14, 23, 51, .06);
}

/* Color-coded left accent strip per status. Drawn as ::before so it works
   for both vendor toast structure (`.swal2-icon-*`) and our class hooks. */
.salio-swal.swal2-popup.swal2-toast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--secondary-color, #4f46e5);
    border-radius: 12px 0 0 12px;
}
.salio-swal.swal2-popup.swal2-toast.swal2-icon-success::before { background: var(--success-color, #16a34a); }
.salio-swal.swal2-popup.swal2-toast.swal2-icon-error::before   { background: var(--danger-color,  #dc2626); }
.salio-swal.swal2-popup.swal2-toast.swal2-icon-warning::before { background: var(--accent-color,  #10b981); }
.salio-swal.swal2-popup.swal2-toast.swal2-icon-info::before    { background: var(--info-color,    #0891b2); }
.salio-swal.swal2-popup.swal2-toast.swal2-icon-question::before{ background: var(--primary-color, #0e1733); }

/* Header lays out icon + title + close button in one row */
.salio-swal.swal2-popup.swal2-toast .swal2-header {
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* ── Title typography ──────────────────────────────────────────────────── */
.salio-swal__title.swal2-title {
    font-family: var(--font-family-display, 'Sora', 'Inter', sans-serif);
    font-weight: 600;
    color: var(--text-strong, #0f172a);
    letter-spacing: -.005em;
}
.salio-swal.swal2-popup.swal2-toast .salio-swal__title.swal2-title {
    font-size: .92rem;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    text-align: left;
    flex: 1;
}
.salio-swal.swal2-popup:not(.swal2-toast) .salio-swal__title.swal2-title {
    font-size: 1.25rem;
    line-height: 1.3;
    padding: .25rem 0 0;
    margin: .25rem 0 .5rem;
}

/* ── Body / supporting copy ────────────────────────────────────────────── */
.salio-swal__content,
.salio-swal__content.swal2-html-container {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-default, #334155);
    margin: .35rem 0 0;
    padding: 0;
    text-align: left;
}
.salio-swal.swal2-popup:not(.swal2-toast) .salio-swal__content.swal2-html-container {
    font-size: .95rem;
    text-align: center;
    margin: .25rem 0 .5rem;
}

/* ── Icon: compact circular badge for toast, vendor sizing for modal ───── */
.salio-swal.swal2-popup.swal2-toast .swal2-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0 .65rem 0 0;
    border-width: 2px;
    font-size: .7em;
    transform: scale(.95);
}
.salio-swal.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: 1.1em; }

/* Recolor each icon variant to brand palette. Borders + glyph strokes. */
.salio-swal.swal2-popup .swal2-icon.swal2-success {
    border-color: var(--success-color, #16a34a);
    color: var(--success-color, #16a34a);
}
.salio-swal.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--success-color, #16a34a);
}
.salio-swal.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(22, 163, 74, .35);
}

.salio-swal.swal2-popup .swal2-icon.swal2-error {
    border-color: var(--danger-color, #dc2626);
    color: var(--danger-color, #dc2626);
}
.salio-swal.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--danger-color, #dc2626);
}

.salio-swal.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--accent-color, #10b981);
    color: var(--accent-dark-color, #059669);
}

.salio-swal.swal2-popup .swal2-icon.swal2-info {
    border-color: var(--info-color, #0891b2);
    color: var(--info-color, #0891b2);
}

.salio-swal.swal2-popup .swal2-icon.swal2-question {
    border-color: var(--primary-color, #0e1733);
    color: var(--primary-color, #0e1733);
}

/* ── Close button: subtle, brand-aware hover ───────────────────────────── */
.salio-swal__close.swal2-close {
    position: static;
    align-self: flex-start;
    width: 24px;
    height: 24px;
    margin: -2px -2px 0 .25rem;
    padding: 0;
    line-height: 1;
    font-size: 1.5rem;
    color: var(--text-muted, #94a3b8);
    background: transparent;
    border-radius: 6px;
    box-shadow: none;
    transition: background .15s ease, color .15s ease;
}
.salio-swal__close.swal2-close:hover,
.salio-swal__close.swal2-close:focus {
    background: var(--surface-3, #f1f5f9);
    color: var(--primary-color, #0e1733);
    outline: none;
}

/* Modal close stays in its corner. */
.salio-swal.swal2-popup:not(.swal2-toast) .salio-swal__close.swal2-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    margin: 0;
}

/* ── Timer progress bar: gold accent in a soft track ───────────────────── */
.salio-swal.swal2-popup .swal2-timer-progress-bar-container {
    height: 3px;
    background: rgba(14, 23, 51, .06);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.salio-swal.swal2-popup .swal2-timer-progress-bar {
    background: linear-gradient(90deg,
        var(--secondary-color, #4f46e5) 0%,
        var(--accent-color,    #10b981) 100%);
    height: 100%;
    border-radius: 0;
}
.salio-swal.swal2-popup.swal2-icon-success .swal2-timer-progress-bar { background: var(--success-color, #16a34a); }
.salio-swal.swal2-popup.swal2-icon-error   .swal2-timer-progress-bar { background: var(--danger-color,  #dc2626); }
.salio-swal.swal2-popup.swal2-icon-warning .swal2-timer-progress-bar { background: var(--accent-color,  #10b981); }
.salio-swal.swal2-popup.swal2-icon-info    .swal2-timer-progress-bar { background: var(--info-color,    #0891b2); }

/* ── Buttons (modal) ───────────────────────────────────────────────────── */
.salio-swal__actions.swal2-actions {
    gap: .5rem;
    margin: 1.1rem 0 .25rem;
}
.salio-swal__btn.swal2-styled {
    border-radius: var(--border-radius-pill, 9999px);
    padding: .55rem 1.25rem;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .005em;
    box-shadow: none !important;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.salio-swal__btn.swal2-styled:focus { box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 70, 229,.28)) !important; }
.salio-swal__btn.swal2-styled:hover { transform: translateY(-1px); }

.salio-swal__btn--primary.swal2-styled {
    background: var(--primary-color, #0e1733) !important;
    color: #fff !important;
}
.salio-swal__btn--primary.swal2-styled:hover {
    background: var(--primary-light-color, #1e2a57) !important;
}
.salio-swal__btn--ghost.swal2-styled {
    background: var(--surface-3, #f1f5f9) !important;
    color: var(--text-dark, #1e293b) !important;
}
.salio-swal__btn--ghost.swal2-styled:hover {
    background: #e2e8f0 !important;
}

/* ── Hide unused form fields ───────────────────────────────────────────── */
/* SweetAlert2 ships a permanently-present <input>/<select>/<textarea>/etc.
   inside every popup and toggles visibility via an inline `display:` style
   when an `input:` config is passed. The minimal vendor bundle we ship
   doesn't carry the default `display:none` for these, so empty fields leak
   into our toasts and modals. Hide any field without an explicit inline
   display rule; SweetAlert's runtime style wins when a field is actually
   in use because inline styles take priority. */
.salio-swal.swal2-popup .swal2-input:not([style*="display"]),
.salio-swal.swal2-popup .swal2-file:not([style*="display"]),
.salio-swal.swal2-popup .swal2-textarea:not([style*="display"]),
.salio-swal.swal2-popup .swal2-select:not([style*="display"]),
.salio-swal.swal2-popup .swal2-radio:not([style*="display"]),
.salio-swal.swal2-popup .swal2-checkbox:not([style*="display"]),
.salio-swal.swal2-popup .swal2-input-label:not([style*="display"]),
.salio-swal.swal2-popup .swal2-validation-message:not([style*="display"]) {
    display: none !important;
}

/* ── Modal backdrop: deeper navy tint ──────────────────────────────────── */
/* Only modals get a backdrop. Toasts share the same container class but
   must stay transparent so they don't dim the page behind them. */
.salio-swal-container.swal2-container.swal2-backdrop-show {
    background: rgba(10, 18, 32, .55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.salio-swal-container.swal2-container:has(.swal2-toast) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
}
.salio-swal-container.swal2-container:has(.swal2-toast) .swal2-toast {
    pointer-events: auto;
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes salioSwalToastIn {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes salioSwalToastOut {
    from { opacity: 1; transform: translateY(0)    scale(1);   }
    to   { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@keyframes salioSwalModalIn {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
@keyframes salioSwalModalOut {
    from { opacity: 1; transform: scale(1)   translateY(0);   }
    to   { opacity: 0; transform: scale(.97) translateY(4px); }
}
.salio-swal.swal2-popup.swal2-toast.swal2-show { animation: salioSwalToastIn .25s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.salio-swal.swal2-popup.swal2-toast.swal2-hide { animation: salioSwalToastOut .2s ease-in forwards; }
.salio-swal.swal2-popup:not(.swal2-toast).swal2-show { animation: salioSwalModalIn .22s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.salio-swal.swal2-popup:not(.swal2-toast).swal2-hide { animation: salioSwalModalOut .18s ease-in forwards; }

/* ── Small screens: slide toasts from the top centre, full-width ───────── */
@media (max-width: 575px) {
    .salio-swal-container.swal2-container.swal2-top-end,
    .salio-swal-container.swal2-container.swal2-top-right {
        padding: .75rem !important;
        justify-content: center !important;
    }
    .salio-swal.swal2-popup.swal2-toast {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .salio-swal.swal2-popup.swal2-show,
    .salio-swal.swal2-popup.swal2-hide { animation: none !important; }
    .salio-swal__btn.swal2-styled:hover { transform: none; }
}