/* 🔔 Benachrichtigungsstile */

.aura-notification {
    /* 📍 Positionierung */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    
    /* 📏 Größe und Form */
    min-width: 280px;
    max-width: 350px;
    padding: 16px;
    border-radius: 8px;
    
    /* 🎨 Aussehen */
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #1436F5;
    
    /* ⚡ Animation */
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    
    /* 📝 Text */
    font-family: 'Inter', sans-serif;
    
    /* 🧩 Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 🎭 Verschiedene Benachrichtigungstypen */
.aura-notification.success {
    border-left-color: #10B981;
}

.aura-notification.error {
    border-left-color: #EF4444;
}

.aura-notification.info {
    border-left-color: #3B82F6;
}

/* ✨ Einblendanimation */
.aura-notification.show {
    transform: translateX(0);
    opacity: 1;
}

/* 📝 Inhalt der Benachrichtigung */
.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 🔣 Icon */
.notification-icon {
    font-size: 20px;
}

/* 📄 Nachrichtentext */
.notification-message {
    font-size: 14px;
    color: #374151;
}

/* ❌ Schließen-Button */
.notification-close {
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    line-height: 1;
    transition: color 0.2s ease;
}

.notification-close:hover {
    color: #4B5563;
}

/* 📱 Responsive Design */
@media (max-width: 640px) {
    .aura-notification {
        left: 20px;
        right: 20px;
        max-width: calc(100% - 40px);
    }
}