.alert.st-alert {
    background: transparent !important;
    border: none !important;
    border-radius: 10px;
    padding: 10px;
    color: #1a3a5c;
}

/* Inner: white card */
.st-alert__inner {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    border-left: 4px solid var(--color-blue);
    box-shadow: 0 4px 16px rgba(26, 58, 92, 0.18);
}

.st-alert__icon {
    margin-top: 2px;
    flex: 0 0 auto;
    color: var(--color-blue);
}

.st-alert__content {
    flex: 1 1 auto;
    min-width: 0;
}

.st-alert__title {
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--color-blue);
}

.st-alert__message {
    margin: 0;
    color: #1a3a5c;
}

.st-alert__brand {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.st-alert__brand img {
    height: 22px;
    width: auto;
    opacity: 0.9;
}

/* Dismiss button: keep inside inner card */
.alert.st-alert.alert-dismissible {
    padding-right: 10px; /* override bootstrap spacing */
}

.alert.st-alert.alert-dismissible .st-alert__inner {
    padding-right: 44px;
}

.alert.st-alert.alert-dismissible .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.25rem;
    margin: 0;
}

.st-alert--compact {
    padding: 8px;
}

.st-alert--compact .st-alert__inner {
    padding: 10px 12px;
}

/* Subtle per-level accents */
.alert.st-alert.alert-success .st-alert__inner { border-left-color: var(--color-green); }
.alert.st-alert.alert-success .st-alert__icon  { color: var(--color-green); }

.alert.st-alert.alert-info .st-alert__inner { border-left-color: var(--color-blue); }
.alert.st-alert.alert-info .st-alert__icon  { color: var(--color-blue); }

.alert.st-alert.alert-warning .st-alert__inner { border-left-color: var(--color-orange); }
.alert.st-alert.alert-warning .st-alert__icon  { color: var(--color-orange); }

.alert.st-alert.alert-danger .st-alert__inner { border-left-color: #dc3545; }
.alert.st-alert.alert-danger .st-alert__icon  { color: #dc3545; }

.st-alert--topbar {
    margin: 0 20px 10px 20px;
}

/* Modals: the panel is light blue; the alert itself is the white inner card. */
.st-modal .alert.st-alert {
    /* Opaque light blue (no alpha) so it doesn't look transparent */
    background: #eaf3ff !important;
    padding: 0;
}

.st-modal .alert.st-alert.alert-dismissible {
    padding-right: 0;
}

@media (max-width: 576px) {
    .alert.st-alert {
        padding: 8px;
    }

    .st-alert--topbar {
        margin: 0 12px 10px 12px;
    }
}