/*
 * Alert Component Styling
 *
 * This implementation replaces Bootstrap's default alert styling with a more
 * modern, left-border accent design that maintains consistency with the
 * email template design language.
 */

/* Base alert styles */
.alert {
    position: relative;
    padding: 1rem 1rem;
    border: 0;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    font-family: 'Poppins', 'Mulish', sans-serif;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-left: 4px solid var(--color-green);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Alert variants */
.alert-success {
    background-color: rgba(54, 224, 160, 0.1);
    border-left-color: var(--color-success);
}

.alert-danger {
    background-color: rgba(255, 101, 101, 0.1);
    border-left-color: var(--color-danger);
}

.alert-warning {
    background-color: rgba(230, 123, 9, 0.1);
    border-left-color: var(--color-warning);
}

.alert-info {
    background-color: rgba(70, 117, 153, 0.1);
    border-left-color: #467599; /* Using middle-blue from your commented colors */
}

/* Alert icon styles */
.alert i.fa,
.alert i.fas,
.alert i.far {
    margin-right: 0.75rem;
    font-size: 1rem;
    vertical-align: middle;
}

.alert-success i {
    color: var(--color-success);
}

.alert-danger i {
    color: var(--color-danger);
}

.alert-warning i {
    color: var(--color-warning);
}

.alert-info i {
    color: #467599; /* Using middle-blue from your commented colors */
}

/* Alert close button */
.alert .btn-close {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    padding: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.alert .btn-close:hover {
    opacity: 0.75;
}

/* Alert headings */
.alert-heading {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Alert links */
.alert a {
    font-weight: 600;
    text-decoration: none;
}

.alert-success a {
    color: var(--color-green-dark);
}

.alert-danger a {
    color: #d23939; /* Darker variant of danger */
}

.alert-warning a {
    color: #b35a00; /* Darker variant of warning */
}

.alert-info a {
    color: #2c4b61; /* Darker variant of info */
}

/* Animation support for fade class */
.alert.fade {
    transition: opacity 0.15s linear;
}

.alert.fade:not(.show) {
    opacity: 0;
}

/* Dismissible alert spacing adjustment */
.alert-dismissible {
    padding-right: 3rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .alert {
        padding: 0.75rem;
    }

    .alert-dismissible {
        padding-right: 2.5rem;
    }
}