/* طراحی آلرت - بر اساس example/alert (استفاده در کل سایت) */
* { box-sizing: border-box; }

.alert-container { position: relative; margin-bottom: 15px; }

.alert {
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.alert.show { transform: translateX(0); opacity: 1; }
.alert.hide { transform: translateX(100%); opacity: 0; }

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: #10b981;
    border-left: 4px solid #10b981;
}
.alert-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
    color: #fbbf24;
    border-left: 4px solid #fbbf24;
}
.alert-error {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15), rgba(248, 113, 113, 0.05));
    color: #f87171;
    border-left: 4px solid #f87171;
}
.alert-info {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.05));
    color: #60a5fa;
    border-left: 4px solid #60a5fa;
}

.alert-icon { width: 24px; height: 24px; flex-shrink: 0; }
.alert-icon svg { width: 100%; height: 100%; stroke-width: 2.5; }
.alert-content { flex: 1; }
.alert-content h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.alert-content p { font-size: 14px; opacity: 0.9; }
.alert-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.alert-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); }