/* Alert Type Styling */
.alert-type-success {
    border-left: 4px solid #4CAF50;
    background: linear-gradient(to right, rgba(76, 175, 80, 0.1), transparent);
}

.alert-type-warning {
    border-left: 4px solid #FF9800;
    background: linear-gradient(to right, rgba(255, 152, 0, 0.1), transparent);
}

.alert-type-error {
    border-left: 4px solid #F44336;
    background: linear-gradient(to right, rgba(244, 67, 54, 0.1), transparent);
}

.alert-type-info {
    border-left: 4px solid #2196F3;
    background: linear-gradient(to right, rgba(33, 150, 243, 0.1), transparent);
}

/* Icons */
.alert-icon {
    font-size: 24px;
    text-align: center;
    margin: 0 auto 20px auto;
    line-height: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.alert-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

.alert-icon-success {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.alert-icon-warning {
    color: #FF9800;
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.alert-icon-error {
    color: #F44336;
    background: rgba(244, 67, 54, 0.12);
    border: 1px solid rgba(244, 67, 54, 0.25);
}

.alert-icon-info {
    color: #2196F3;
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.25);
}

.alert-content.alert-type-success,.alert-content.alert-type-warning ,.alert-content.alert-type-error,.alert-content.alert-type-info   {
    background: inherit; /* Allow theme to specify background color */
}