/* ========================================
   UI ALERT COMPONENT
   ======================================== */

.ui-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    border: 1px solid;
    margin-bottom: var(--space-5);
}

.ui-alert-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.ui-alert-message {
    flex: 1;
}

.ui-alert-dismiss {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    line-height: 1;
}

.ui-alert-dismiss:hover {
    opacity: 1;
}

/* Alert Types */
.ui-alert-error {
    background-color: var(--color-error-light);
    border-color: var(--color-error-border);
    color: var(--color-error-text);
}

.ui-alert-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ui-alert-warning {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
    color: #92400e;
}

.ui-alert-info {
    background-color: var(--color-info-light);
    border-color: var(--color-info);
    color: #0c5460;
}

/* Animation - hidden by default, shown via JS */
.ui-alert[hidden] {
    display: none;
}

.ui-alert.ui-alert-shake {
    animation: ui-alert-shake 0.5s ease-in-out;
}

@keyframes ui-alert-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}