/* Toast notifications - bottom of viewport */
.toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
}

.toast {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-white);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-slide-in 0.25s ease-out;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-success {
    background-color: var(--success-color);
}

.toast-error {
    background-color: var(--error-color);
}

.toast-fade-out {
    animation: toast-fade-out 0.3s ease-out forwards;
}

@keyframes toast-fade-out {
    to {
        opacity: 0;
    }
}