/* ==========================================================================
   SweetAlert2 v11.x – modern skin for the D-Link VPP pages
   Matches the new login / signup design (Inter, 4px corners, brand blue).
   CSS only: no JavaScript changes needed, existing Swal.fire(...) calls keep working.
   Load it AFTER the sweetalert2 CSS (and after any old swal2 overrides).
   ========================================================================== */

:root {
    --sw-brand: #0a6cff;
    --sw-brand-dark: #0852c4;
    --sw-accent: #ffb606;
    --sw-ok: #16a34a;
    --sw-err: #e5484d;
    --sw-ink: #1b2437;
    --sw-muted: #667085;
    --sw-line: #d9dde5;
}

/* ---------- backdrop ---------- */
/*div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
    background: rgba(10, 16, 36, .6) !important;
    backdrop-filter: blur(3px);
}*/

.swal2-actions button[type="button"] {
    font-size: 0.9rem !important
}

/* ---------- popup ---------- */
    div:where(.swal2-container) div:where(.swal2-popup) {
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        width: min(26em, 92vw);
        padding: 1.6em 1.6em 1.3em;
        border-radius: 8px;
        background: #fff;
        color: var(--sw-ink);
        box-shadow: 0 20px 50px rgba(15, 27, 61, .3);
        overflow: hidden;
    }
        /* brand bar on top of the dialog (not on toasts) */
        div:where(.swal2-container) div:where(.swal2-popup):not(.swal2-toast)::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--sw-brand), var(--sw-accent));
        }
    /* ---------- title / text ---------- */
    div:where(.swal2-container) h2:where(.swal2-title) {
        margin: .2em 0 0;
        padding: 0;
        font-size: 1.2rem !important;
        font-weight: 700;
        line-height: 1.35;
        color: var(--sw-ink);
    }

    div:where(.swal2-container) div:where(.swal2-html-container) {
        margin: .7em 0 0;
        padding: 0;
        font-size: .92rem !important;
        line-height: 1.55;
        color: var(--sw-muted);
    }
    /* ---------- close button ---------- */
    div:where(.swal2-container) button:where(.swal2-close) {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f1f3f8;
        color: var(--sw-muted);
        font-size: 1.5rem;
        transition: background .15s, color .15s;
    }

        div:where(.swal2-container) button:where(.swal2-close):hover {
            background: #e2e7f1;
            color: var(--sw-ink);
        }
    /* ---------- buttons ---------- */
    div:where(.swal2-container) div:where(.swal2-actions) {
        gap: .6em;
        margin: 1.3em 0 0;
    }

    div:where(.swal2-container) button:where(.swal2-styled) {
        margin: 0;
        min-width: 6.5em;
        padding: .6em 1.3em;
        border: 0;
        border-radius: 4px;
        font-family: inherit;
        font-size: .9rem !important;
        font-weight: 600;
        box-shadow: none;
        transition: background .15s, transform .05s;
    }

        div:where(.swal2-container) button:where(.swal2-styled):active {
            transform: translateY(1px);
        }

        div:where(.swal2-container) button:where(.swal2-styled):focus {
            box-shadow: 0 0 0 3px rgba(10, 108, 255, .25) !important;
        }

        div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
            background: var(--sw-brand) !important;
            color: #fff;
        }

            div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
                background: var(--sw-brand-dark) !important;
            }

        div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
            background: #eef1f7 !important;
            color: var(--sw-ink);
        }

            div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover {
                background: #e2e7f1 !important;
            }

        div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
            background: var(--sw-err) !important;
            color: #fff;
        }

            div:where(.swal2-container) button:where(.swal2-styled).swal2-deny:hover {
                background: #cf3a3f !important;
            }
    /* ---------- icons (smaller, flatter, brand colours) ---------- */
    div:where(.swal2-container) div:where(.swal2-icon) {
        width: 4.2em;
        height: 4.2em;
        margin: .3em auto 1em;
        border-width: .2em;
        font-size: 1rem;
    }

    div:where(.swal2-icon).swal2-success {
        color: var(--sw-ok);
        border-color: var(--sw-ok);
    }

        div:where(.swal2-icon).swal2-success [class^='swal2-success-line'] {
            background-color: var(--sw-ok);
        }

        div:where(.swal2-icon).swal2-success .swal2-success-ring {
            border-color: rgba(22, 163, 74, .25);
        }

    div:where(.swal2-icon).swal2-error {
        color: var(--sw-err);
        border-color: var(--sw-err);
    }

        div:where(.swal2-icon).swal2-error [class^='swal2-x-mark-line'] {
            background-color: var(--sw-err);
        }

    div:where(.swal2-icon).swal2-warning {
        color: var(--sw-accent);
        border-color: var(--sw-accent);
    }

    div:where(.swal2-icon).swal2-info {
        color: var(--sw-brand);
        border-color: var(--sw-brand);
    }

    div:where(.swal2-icon).swal2-question {
        color: var(--sw-brand);
        border-color: var(--sw-brand);
    }
    /* ---------- inputs inside alerts ---------- */
    div:where(.swal2-container) input:where(.swal2-input),
    div:where(.swal2-container) textarea:where(.swal2-textarea),
    div:where(.swal2-container) select:where(.swal2-select) {
        height: 34px;
        margin: 1em auto 0;
        padding: 0 10px;
        border: 1px solid var(--sw-line);
        border-radius: 4px;
        background: #fff;
        box-shadow: none;
        font-family: inherit;
        font-size: 13px;
        color: var(--sw-ink);
        transition: border-color .15s, box-shadow .15s;
    }

    div:where(.swal2-container) textarea:where(.swal2-textarea) {
        height: auto;
        padding: 7px 10px;
    }

        div:where(.swal2-container) input:where(.swal2-input):focus,
        div:where(.swal2-container) textarea:where(.swal2-textarea):focus,
        div:where(.swal2-container) select:where(.swal2-select):focus {
            border-color: var(--sw-brand);
            box-shadow: 0 0 0 2px rgba(10, 108, 255, .15);
        }

    div:where(.swal2-container) div:where(.swal2-validation-message) {
        margin: .9em 0 0;
        padding: .55em 1em;
        border-radius: 4px;
        background: #fdecec;
        color: var(--sw-err);
        font-size: .85rem;
        font-weight: 500;
    }

        div:where(.swal2-container) div:where(.swal2-validation-message)::before {
            background: var(--sw-err);
        }
    /* ---------- progress / timer ---------- */
div:where(.swal2-container) .swal2-timer-progress-bar {
    /* background: var(--sw-brand);*/
    height: 3px;
}

    div:where(.swal2-container) .swal2-timer-progress-bar-container {
        height: 3px;
    }
    /* ---------- toasts (top-end notifications) ---------- */
    div:where(.swal2-container) div:where(.swal2-popup).swal2-toast {
        width: auto !important;
        max-width: 92vw;
        padding: .7em 1em .7em .9em;
        border-radius: 6px;
        border-left: 4px solid var(--sw-brand);
        box-shadow: 0 8px 24px rgba(15, 27, 61, .18);
    }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast:has(.swal2-icon-show.swal2-success) {
            border-left-color: var(--sw-ok);
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast:has(.swal2-icon-show.swal2-error) {
            border-left-color: var(--sw-err);
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast:has(.swal2-icon-show.swal2-warning) {
            border-left-color: var(--sw-accent);
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast h2:where(.swal2-title) {
            margin: 0.5rem;
            font-size: .92rem !important;
            font-weight: 600;
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast div:where(.swal2-icon) {
            width: 1.8em;
            height: 1.8em;
            margin: 0 .3em 0 0;
            min-width: 1.8em;
            border-width: .12em;
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast div:where(.swal2-html-container) {
            margin: .2em .5em;
            font-size: .85rem !important;
        }

        div:where(.swal2-container) div:where(.swal2-popup).swal2-toast button:where(.swal2-styled) {
            min-width: 0;
            padding: .4em .9em;
            font-size: .82rem !important;
        }