#toast-container{
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:99999;
    pointer-events:none;
}

.toast{
    min-width:280px;
    max-width:360px;
    padding:14px 16px;
    border-radius:14px;
    background: var(--Mainbg);
    color: var(--color);
    font:500 14px/1.5 "Outfit",sans-serif;
    display:flex;
    align-items:center;
    gap:12px;
    border: var(--border);
    backdrop-filter:blur(18px);
    pointer-events:auto;
    animation:toastIn .25s ease;
    font-family:'Outfit-Regular'
}

.toast i{
    font-size:18px;
}

.toast.success i{
    color:#22c55e;
}

.toast.error i{
    color:#ef4444;
}

.toast.info i{
    color:#3b82f6;
}

.toast.hide{
    animation:toastOut .2s ease forwards;
}

/* Default animations - slide from bottom */
@keyframes toastIn{
    from{
        opacity:0;
        transform:translateY(16px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes toastOut{
    to{
        opacity:0;
        transform:translateY(16px);
    }
}

/* Mobile styles - centered at top, slide from top */
@media(max-width:768px){
    #toast-container{
        top:70px;
        bottom:auto;
        left:50%;
        right:auto;
        transform:translateX(-50%); /* Center horizontally */
        width:90%; /* Takes 90% of screen width */
        max-width:400px; /* Optional max width */
    }
    
    .toast{
        max-width:none;
        min-width:0;
        width:100%; /* Full width of container */
        animation:toastInMobile .3s ease;
    }
    
    .toast.hide{
        animation:toastOutMobile .2s ease forwards;
    }
}

/* Mobile slide in from top */
@keyframes toastInMobile{
    from{
        opacity:0;
        transform:translateY(-100%); /* Start from above screen */
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Mobile slide out to top */
@keyframes toastOutMobile{
    to{
        opacity:0;
        transform:translateY(-100%); /* Exit to top */
    }
}

.toast-loader{
    width:20px;
    height:20px;
    flex-shrink:0;
    overflow:visible;
    transform-origin:center;
    animation:toastLoaderRotate .8s linear infinite;
}

.toast-loader-track{
    stroke:currentColor;
    opacity:.15;
}

.toast-loader-car{
    stroke:currentColor;
    stroke-dasharray:25 75;
    stroke-dashoffset:0;
    stroke-linecap:round;
}

@keyframes toastLoaderRotate{
    to{
        transform:rotate(360deg);
    }
}