/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - TOAST SYSTEM
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.toast-container {

    position: fixed;

    top: 100px;
    right: 24px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    z-index: 9999999999;

    pointer-events: none;

    isolation: isolate;
}

/*
|--------------------------------------------------------------------------
| TOAST
|--------------------------------------------------------------------------
*/

.toast {

    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 320px;
    max-width: 420px;

    padding:
        10px
        12px;

    border-radius: 22px;

    overflow: hidden;

    filter:
    blur(8px);

    backdrop-filter:
        blur(6px);

    transform:
        translateX(120%)
        scale(0.92);

    opacity: 0;

    transition:
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.58s ease,
        box-shadow 0.45s ease,
        filter 0.45s ease;

    pointer-events: auto;

    user-select: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/*
|--------------------------------------------------------------------------
| SHOW
|--------------------------------------------------------------------------
*/

.toast.show {

    transform:
        translateX(0)
        scale(1);

    opacity: 1;

    filter:
    blur(0px);
}

/*
|--------------------------------------------------------------------------
| SUCCESS
|--------------------------------------------------------------------------
*/

.toast-success {

    background:
        rgba(18,18,18,0.96);

    color:
        #1EFF7A;

    border:
        2px solid rgba(51,212,91,0.72);

    box-shadow:
        0 0 22px rgba(51,212,91,0.18),
        inset 0 0 18px rgba(51,212,91,0.04);

    position: relative;
}

.toast-success::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;
}

.toast-success::after {

    content: '';

    position: absolute;

    top: 0;
    right: 0;

    width: 5px;
    height: 100%;
}

/*
|--------------------------------------------------------------------------
| ERROR
|--------------------------------------------------------------------------
*/

.toast-error {

    background:
        rgba(18,18,18,0.96);

    color:
        #ff5555;

    border:
        2px solid rgba(255,44,44,0.72);

    box-shadow:
        0 0 22px rgba(255,44,44,0.18),
        inset 0 0 18px rgba(255,44,44,0.04);

    position: relative;
}

.toast-error::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;
}

.toast-error::after {

    content: '';

    position: absolute;

    top: 0;
    right: 0;

    width: 5px;
    height: 100%;

}

/*
|--------------------------------------------------------------------------
| INFO
|--------------------------------------------------------------------------
*/

.toast-info {

    background:
        rgba(18,18,18,0.96);

    color:
        #4BA3FF;

    border:
        2px solid rgba(59,164,255,0.72);

    box-shadow:
        0 0 22px rgba(59,164,255,0.18),
        inset 0 0 18px rgba(59,164,255,0.04);

    position: relative;
}

/*
|--------------------------------------------------------------------------
| WARNING / MESSAGE
|--------------------------------------------------------------------------
*/

.toast-warning {

    background:
        linear-gradient(
            135deg,
            rgba(18,18,18,0.98),
            rgba(24,24,24,0.98)
        );

    color:
        #7fd1ff;

    border:
        2px solid rgba(80,170,255,0.38);

    box-shadow:
        0 0 28px rgba(80,170,255,0.12),
        inset 0 0 22px rgba(80,170,255,0.04);

    position: relative;

    overflow: hidden;
}

.toast-warning::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(120,200,255,0.08),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        toastWarningShine 2.8s linear infinite;
}

.toast-warning::after {

    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            #62c7ff,
            #2f8fff
        );

    box-shadow:
        0 0 16px rgba(80,170,255,0.55);
}

/*
|--------------------------------------------------------------------------
| WARNING ICON
|--------------------------------------------------------------------------
*/

.toast-warning .toast-icon {

    background:
        rgba(80,170,255,0.12);

    color:
        #7fd1ff;

    box-shadow:
        0 0 16px rgba(80,170,255,0.16);
}

/*
|--------------------------------------------------------------------------
| WARNING CONTENT
|--------------------------------------------------------------------------
*/

.toast-warning .toast-content {

    color:
        rgba(255,255,255,0.92);

    font-weight: 600;

    letter-spacing: 0.2px;
}

/*
|--------------------------------------------------------------------------
| WARNING SHINE
|--------------------------------------------------------------------------
*/

@keyframes toastWarningShine {

    from {

        transform:
            translateX(-120%);
    }

    to {

        transform:
            translateX(120%);
    }
}

.toast.info::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        #3BA4FF;

    box-shadow:
        0 0 14px rgba(59,164,255,0.72);
}

.toast.info::after {

    content: '';

    position: absolute;

    top: 0;
    right: 0;

    width: 5px;
    height: 100%;

    background:
        #3BA4FF;

    box-shadow:
        0 0 14px rgba(59,164,255,0.72);
}

/*
|--------------------------------------------------------------------------
| ICON
|--------------------------------------------------------------------------
*/

.toast-icon {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 18px;

    z-index: 2;
}

/*
|--------------------------------------------------------------------------
| SUCCESS ICON
|--------------------------------------------------------------------------
*/

.toast-success .toast-icon {

    background:
        rgba(51,212,91,0.16);

    color:
        #33d45b;
}

/*
|--------------------------------------------------------------------------
| ERROR ICON
|--------------------------------------------------------------------------
*/

.toast-error .toast-icon {

    background:
        rgba(255,44,44,0.16);

    color:
        #ff2c2c;
}

/*
|--------------------------------------------------------------------------
| INFO ICON
|--------------------------------------------------------------------------
*/

.toast.info .toast-icon {

    background:
        rgba(59,164,255,0.16);

    color:
        #3BA4FF;
}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.toast-content {

    flex: 1;

    z-index: 2;
}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.toast-title {

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/

.toast-message {

    margin-top: 2px;

    color:
        rgba(255,255,255,0.78);

    font-size: 14px;

    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| PROGRESS
|--------------------------------------------------------------------------
*/

.toast-progress {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        rgba(255,255,255,0.04);
}

/*
|--------------------------------------------------------------------------
| PROGRESS FILL
|--------------------------------------------------------------------------
*/

.toast-progress-fill {

    width: 100%;
    height: 100%;

    background:
        currentColor;

    animation:
        toastProgress 4s linear forwards;
}

/*
|--------------------------------------------------------------------------
| HIDE
|--------------------------------------------------------------------------
*/

.toast.hide {

    transform:
        translateX(120%)
        scale(0.92);

    opacity: 0;
}

/*
|--------------------------------------------------------------------------
| MONEY ICON
|--------------------------------------------------------------------------
*/

.toast i {
    margin-right: 6px;

    color: #FF4747;
}

.toast-vip {

    background:
        rgba(18,18,18,0.96);

    color:
        #ffd95e;

    border:
        2px solid rgba(255,217,94,0.55);

    box-shadow:
        0 0 22px rgba(255,217,94,0.18);
}

.toast-vip .toast-icon {

    background:
        rgba(255,217,94,0.14);

    color:
        #ffd95e;
}

/*
|--------------------------------------------------------------------------
| PROGRESS ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes toastProgress {

    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .toast-container {

        top: 16px;
        right: 16px;
        left: 16px;
    }

    .toast {

        min-width: auto;

        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| LIGHT THEME TOASTS
|--------------------------------------------------------------------------
*/

body.theme-light .toast {

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);
}

/*
|--------------------------------------------------------------------------
| SUCCESS
|--------------------------------------------------------------------------
*/

body.theme-light .toast-success {

    background:
        #FFFFFF;

    color:
        #16A34A;

    border:
        2px solid rgba(22,163,74,0.20);

    box-shadow:
        0 10px 24px rgba(22,163,74,0.08);
}

body.theme-light .toast-success .toast-icon {

    background:
        rgba(22,163,74,0.12);

    color:
        #16A34A;
}

/*
|--------------------------------------------------------------------------
| ERROR
|--------------------------------------------------------------------------
*/

body.theme-light .toast-error {

    background:
        #FFFFFF;

    color:
        #DC2626;

    border:
        2px solid rgba(220,38,38,0.20);

    box-shadow:
        0 10px 24px rgba(220,38,38,0.08);
}

body.theme-light .toast-error .toast-icon {

    background:
        rgba(220,38,38,0.12);

    color:
        #DC2626;
}

/*
|--------------------------------------------------------------------------
| INFO
|--------------------------------------------------------------------------
*/

body.theme-light .toast-info {

    background:
        #FFFFFF;

    color:
        #2563EB;

    border:
        2px solid rgba(37,99,235,0.20);

    box-shadow:
        0 10px 24px rgba(37,99,235,0.08);
}

body.theme-light .toast-info .toast-icon {

    background:
        rgba(37,99,235,0.12);

    color:
        #2563EB;
}

/*
|--------------------------------------------------------------------------
| WARNING
|--------------------------------------------------------------------------
*/

body.theme-light .toast-warning {

    background:
        #FFFFFF;

    color:
        #2563EB;

    border:
        2px solid rgba(37,99,235,0.20);

    box-shadow:
        0 10px 24px rgba(37,99,235,0.08);
}

body.theme-light .toast-warning .toast-icon {

    background:
        rgba(37,99,235,0.12);

    color:
        #2563EB;
}

body.theme-light .toast-warning .toast-content {

    color:
        var(--text-color);
}

/*
|--------------------------------------------------------------------------
| VIP
|--------------------------------------------------------------------------
*/

body.theme-light .toast-vip {

    background:
        #FFFFFF;

    color:
        #D97706;

    border:
        2px solid rgba(217,119,6,0.20);

    box-shadow:
        0 10px 24px rgba(217,119,6,0.08);
}

body.theme-light .toast-vip .toast-icon {

    background:
        rgba(217,119,6,0.12);

    color:
        #D97706;
}

/*
|--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------
*/

body.theme-light .toast-title {

    color:
        #111111;
}

body.theme-light .toast-message {

    color:
        rgba(0,0,0,0.70);
}

body.theme-light .toast-progress {

    background:
        rgba(0,0,0,0.06);
}