/* Toast Notification Styles */
.toast {
    min-width: 300px;
    max-width: 100%;
}

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

.toast-hide {
    transform: translateX(100%);
    opacity: 0;
}

/* Responsive positioning */
@media (max-width: 640px) {
    #toast-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}