.notification-container {
    position: fixed;
    top: var(--notification-top, 20px);
    right: var(--notification-right, 20px);
    z-index: var(--notification-z-index, 9999);
    display: flex;
    flex-direction: column;
    gap: var(--notification-gap, 10px);
    pointer-events: none;
}

.notification {
    color: var(--notification-text, #fff);
    background-color: var(--notification-bg, #323232);
    border-radius: var(--notification-radius, 8px);
    padding: var(--notification-padding, 12px 20px);
    box-shadow: var(--notification-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
    font-size: var(--notification-font-size, 14px);
    max-width: var(--notification-max-width, 320px);

    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
}

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

.notification.error {
    background-color: var(--notification-error-bg, #e53935);
}