/* Toast container position */
#toast-container {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto !important;
}

/* Success Toast */
#toast-container .toast-success {
    background-color: #16a34a; /* Green */
    border-color: #15803d;
}

/* Error Toast */
#toast-container .toast-error {
    background-color: #E60001; /* Your main theme red */
    border-color: #b20001;
}

/* Info Toast */
#toast-container .toast-info {
    background-color: #3b82f6; /* Tailwind blue-500 */
    border-color: #2563eb;
}

/* Warning Toast */
#toast-container .toast-warning {
    background-color: #facc15; /* Yellow */
    border-color: #ca8a04;
    color: #000; /* Better contrast on light background */
}

/* Close button */
#toast-container .toast-close-button {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.2rem;
    margin-left: auto;
    padding-left: 8px;
}

/* Optional: Hover effect on close button */
#toast-container .toast-close-button:hover {
    color: #fff !important;
}

/* Optional animation (smooth fade like JS apps) */
#toast-container > div.toast {
    animation: fadeInSlideUp 0.4s ease;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}