.toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
}

@media screen and (max-width: 500px) {
    .toast-container {
        left: 20px !important;
    }
}

.toast {
    background: linear-gradient(90deg, #ffffff, #f6f6f6) !important;
    color: #333 !important;
    padding: 15px 20px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 250px !important;
    opacity: 0 !important;
    transform: translateX(120%) scale(0.8) !important;
    transition: opacity 0.4s ease, transform 0.4s ease, scale 0.4s ease !important;
    border-left: 5px solid !important;
    overflow: hidden !important;
}

.toast.show-toast {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

.toast.success {
    background: linear-gradient(90deg, #e6ffed, #d4f7dd) !important;
    border-left-color: #28a745 !important;
    color: #1a531f !important;
}

.toast.error {
    background: linear-gradient(90deg, #ffe6e6, #f7d4d4) !important;
    border-left-color: #dc3545 !important;
    color: #5c1e24 !important;
}

.toast .icon {
    margin-right: 10px !important;
    font-size: 20px !important;
}

.toast .close {
    margin-left: 15px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    color: #666 !important;
    transition: color 0.2s !important;
}

.toast .close:hover {
    color: #000 !important;
}