/* =========================================================
   PREMIUM TOAST NOTIFICATION
   CSS ONLY
   HTML + JS remain unchanged
   ========================================================= */

.notify {
    position: fixed;
    top: 20px;
    left: 50%;
    width: 420px;
    max-width: calc(100vw - 30px);
    min-height: 68px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #e6e8ee !important;
    border-left: 5px solid #243474 !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(20, 30, 55, 0.14), 0 4px 10px rgba(20, 30, 55, 0.06);
    color: #252a36 !important;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    opacity: 0;
    transform: translate(-50%, -25px);
    transition: top 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    z-index: 99999;
    overflow: hidden;
}


    /* =========================================================
   SHOW
   ========================================================= */

    .notify.show {
        top: 20px;
        opacity: 1;
        transform: translate(-50%, 0);
    }


    /* =========================================================
   HIDE
   ========================================================= */

    .notify.hide {
        top: -90px;
        opacity: 0;
        transform: translate(-50%, -20px);
    }


    /* =========================================================
   SUCCESS
   ========================================================= */

    .notify.alert-success {
        border-left-color: #16a34a !important;
        background: #ffffff !important;
        color: #252a36 !important;
    }

        .notify.alert-success::before {
            content: "✓";
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            border-radius: 50%;
            background: #e6f7ed;
            color: #16a34a;
            font-size: 18px;
            font-weight: 700;
        }


    /* =========================================================
   ERROR
   ========================================================= */

    .notify.alert-danger {
        border-left-color: #ef3340 !important;
        background: #ffffff !important;
        color: #252a36 !important;
    }

        .notify.alert-danger::before {
            content: "!";
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            border-radius: 50%;
            background: #fde7e9;
            color: #ef3340;
            font-size: 18px;
            font-weight: 700;
        }


    /* =========================================================
   WARNING
   ========================================================= */

    .notify.alert-warning {
        border-left-color: #f59e0b !important;
        background: #ffffff !important;
        color: #252a36 !important;
    }

        .notify.alert-warning::before {
            content: "!";
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            border-radius: 50%;
            background: #fff2d8;
            color: #f59e0b;
            font-size: 18px;
            font-weight: 700;
        }


    /* =========================================================
   LOGOUT
   ========================================================= */

    .notify.logout-toast {
        background: #ffffff !important;
        color: #252a36 !important;
        border-left-color: #243474 !important;
        padding: 14px 18px;
    }

.logout-toast .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9edff;
    color: #243474;
    font-size: 19px;
    animation: wave 1.5s infinite;
}

.logout-toast strong {
    color: #202638;
    font-size: 14px;
    font-weight: 700;
}

.logout-toast small {
    color: #7d8491;
    font-size: 12px;
}


/* =========================================================
   REMOVE BOOTSTRAP ALERT DEFAULTS
   ========================================================= */

.notify.alert {
    margin-bottom: 0 !important;
    border-top: 1px solid #e6e8ee !important;
    border-right: 1px solid #e6e8ee !important;
    border-bottom: 1px solid #e6e8ee !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.notify:hover {
    box-shadow: 0 18px 42px rgba(20, 30, 55, 0.18), 0 5px 12px rgba(20, 30, 55, 0.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .notify {
        top: 14px;
        width: calc(100vw - 24px);
        max-width: none;
        min-height: 62px;
        padding: 12px 14px;
        border-radius: 10px !important;
        font-size: 13px;
    }

        .notify.show {
            top: 14px;
        }

        .notify.alert-success::before,
        .notify.alert-danger::before,
        .notify.alert-warning::before {
            width: 32px;
            height: 32px;
            min-width: 32px;
            margin-right: 10px;
            font-size: 16px;
        }

        .notify.logout-toast {
            padding: 12px 14px;
        }

    .logout-toast .icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 16px;
    }

    .logout-toast strong {
        font-size: 13px;
    }

    .logout-toast small {
        font-size: 11px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .notify {
        width: calc(100vw - 18px);
        padding: 11px 12px;
    }
}