/* ========================================
   Django notification messages
======================================== */

.messages-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 1000;
    width: auto;
    max-width: 360px;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 10px;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--enerinno-surface);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.alert-success {
    border-color: #b8dfc2;
    color: #155724;
}

.alert-error {
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-warning {
    border-color: #ffeeba;
    color: #856404;
}

.alert-info {
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
}

.alert-success .alert-icon {
    color: #ffffff;
    background: var(--enerinno-success);
}

.alert-error .alert-icon,
.alert-warning .alert-icon {
    color: #ffffff;
    background: var(--enerinno-danger);
}

.alert-info .alert-icon {
    color: #ffffff;
    background: var(--enerinno-orange);
}

.alert-message {
    flex: 1;
}

.alert-close {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.alert.hide {
    opacity: 0;
    transform: translateX(30px);
}

@media (max-width: 600px) {
    .messages-container {
        right: 12px;
        left: 12px;
        max-width: none;
    }
}