/*=========================================================
    Morex Premium Toast UI
    Version : 1.0
=========================================================*/

:root{
    --toast-radius:8px;
    --toast-shadow:0 18px 45px rgba(0,0,0,.18);
    --toast-width:380px;
    --toast-gap:14px;

    --toast-success:#16a34a;
    --toast-success-dark:#15803d;

    --toast-error:#ef4444;
    --toast-error-dark:#dc2626;

    --toast-warning:#f59e0b;
    --toast-warning-dark:#d97706;

    --toast-info:#2563eb;
    --toast-info-dark:#1d4ed8;

    --toast-white:#ffffff;
}

/*=========================================================
    Container
=========================================================*/

.toast-container{

    position:fixed;

    top:20px;
    right:20px;

    display:flex;
    flex-direction:column;
    gap:var(--toast-gap);

    width:var(--toast-width);

    z-index:2147483647;

    pointer-events:none;
}

/*=========================================================
    Toast
=========================================================*/

.toast{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
    width:100%;
    border-radius:var(--toast-radius);
    padding:10px 12px;
    color:#fff;
    backdrop-filter:blur(16px);
    box-shadow:var(--toast-shadow);
    pointer-events:auto;
    transform:translateX(120%);
    opacity:0;
    transition: transform .35s ease, opacity .35s ease;
}

/*=========================================================
    Active
=========================================================*/

.toast.show{

    transform:translateX(0);

    opacity:1;
}

/*=========================================================
    Hide
=========================================================*/

.toast.hide{

    opacity:0;

    transform:translateX(120%);
}

/*=========================================================
    Icon
=========================================================*/

.toast-icon{

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    flex-shrink:0;

    color:#fff;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);
}

/*=========================================================
    Content
=========================================================*/

.toast-content{

    flex:1;
}

.toast-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:3px;

    line-height:1.3;
}

.toast-message{

    font-size:14px;

    line-height:1.5;

    opacity:.96;

    word-break:break-word;
}

/*=========================================================
    Close Button
=========================================================*/

.toast-close{

    width:20px;

    height:20px;

    font-size:12px;

    border:none;

    background:rgba(255,255,255,.12);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;
}

.toast-close:hover{

    background:rgba(255,255,255,.22);

    transform:rotate(90deg);
}

/*=========================================================
    Progress
=========================================================*/

.toast-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:rgba(255,255,255,.18);
}

.toast-progress span{

    display:block;

    width:100%;

    height:100%;

    background:#fff;

    transform-origin:left center;
}

/*=========================================================
    Success
=========================================================*/

.toast-success{

    background:
    linear-gradient(
        135deg,
        var(--toast-success),
        var(--toast-success-dark)
    );
}

/*=========================================================
    Error
=========================================================*/

.toast-error{

    background:
    linear-gradient(
        135deg,
        var(--toast-error),
        var(--toast-error-dark)
    );
}

/*=========================================================
    Warning
=========================================================*/

.toast-warning{

    background:
    linear-gradient(
        135deg,
        var(--toast-warning),
        var(--toast-warning-dark)
    );
}

/*=========================================================
    Info
=========================================================*/

.toast-info{

    background:
    linear-gradient(
        135deg,
        var(--toast-info),
        var(--toast-info-dark)
    );
}

/*=========================================================
    Hover
=========================================================*/

.toast:hover{

    transform:translateY(-2px);

    box-shadow:
    0 25px 55px rgba(0,0,0,.22);
}

/*=========================================================
    Animation
=========================================================*/

@keyframes toastProgress{

    from{

        transform:scaleX(1);
    }

    to{

        transform:scaleX(0);
    }
}

.toast.show .toast-progress span{

    animation:
    toastProgress linear forwards;
}

/*=========================================================
    Mobile
=========================================================*/

@media(max-width:768px){

    .toast-container{

        top:15px;

        right:15px;

        left:15px;

        width:auto;
    }

    .toast{

        padding:16px;
    }

    .toast-title{

        font-size:15px;
    }

    .toast-message{

        font-size:13px;
    }

    .toast-icon{

        width:20px;

        height:20px;

        font-size:12px;
    }
}

/*=========================================================
    Small Mobile
=========================================================*/

@media(max-width:480px){

    .toast{

        gap:12px;
    }

    .toast-close{
        width:18px;
        height:18px;
        font-size: 10px;
    }

    .toast-icon{

        width:18px;

        height:18px;

        font-size:10px;
    }
}

/*=========================================================
    Dark Theme Ready
=========================================================*/

body.dark .toast{

    border:1px solid rgba(255,255,255,.08);
}

/*=========================================================
    End
=========================================================*/