/* =========================================================
   :ROOT – Ezek csak a hibauzenetek cuccai, nyugodtan alligatsd izlesed szerint.
   ========================================================= */
:root {
    /* --- success, error, warning --- */
    --success-bg: #00bfa533;
    --success-border: #007a7a33;
    --success-text: white;

    --error-bg: #bf000033;
    --error-border: #7a000033;
    --error-text: white;
    
    --warning-bg: #bf730033;
    --warning-border: #7a490033;
    --warning-text: white;
}

/* =========================================================
   USER MESSAGE CONTAINER (RIGHT SIDE TOAST)
   ========================================================= */
.user-message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Messages styling */
.user-message {
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeSlideOut 4s forwards;

    opacity: 1;
    transform: translateY(0);
}

/* Success */
.user-message.success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}

/* Error */
.user-message.error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}

/* Warning */
.user-message.warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
}

@keyframes fadeSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}