/* static/css/user/alert.css */

.alert-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem; /* Positioned on bottom-right */
    z-index: 1100;
    max-width: 400px;
    width: 100%;
    
    /* New alerts appear on top of old ones */
    display: flex;
    flex-direction: column-reverse; 
}

.custom-alert {
    display: flex;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    width: 100%;
    
    /* Glassy effect from base.css */
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius-md);
    
    color: var(--text-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    
    /* Colored side border */
    border-left-width: 5px;
    border-left-style: solid;
    
    /* Animation */
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.4s ease-in-out;
}

.custom-alert.show {
    opacity: 1;
    transform: translateX(0);
}

.alert-icon {
    font-size: 1.25rem;
    margin-left: 1rem; /* RTL-friendly margin */
    padding-top: 0.1rem;
}

.alert-content {
    flex-grow: 1;
    font-weight: 500;
    font-size: 0.95rem;
}

.btn-close-alert {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    margin-right: -0.5rem; /* RTL-friendly margin */
    padding: 0 0.5rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.btn-close-alert:hover {
    opacity: 1;
    color: var(--text-light);
}

/* --- Color Variants --- */

.alert-success { border-left-color: #198754; }
.alert-success .alert-icon { color: #198754; }

.alert-danger { border-left-color: #dc3545; }
.alert-danger .alert-icon { color: #dc3545; }

.alert-warning { border-left-color: #ffc107; }
.alert-warning .alert-icon { color: #ffc107; }

.alert-info { border-left-color: var(--primary-color); }
.alert-info .alert-icon { color: var(--primary-color); }




/* --- Mobile Responsiveness --- */
@media (max-width: 991.98px) {
    .alert-container {
        /* Move from bottom-right to top-center */
        bottom: auto;
        top: 1.5rem;

        /* Span full-width with 1.5rem margins */
        left: 1.5rem;
        right: 1.5rem;

        /* Override desktop-specific widths */
        width: auto;
        max-width: 100%;

        /* New alerts should stack downwards from the top */
        flex-direction: column;
    }
}