/* aeo-audit: aeo-upsell-banner - Overview/module free-plan banner.
 *
 * Sits below the alerts banner with the same purple chrome (rounded-2xl,
 * border-[#F1D6D6], bg-cstm-primary-gradient-light). Compact: an icon tile, a
 * one-line condensed summary (line 1) and a single no-wrap row of feature chips
 * (line 2), plus the Upgrade CTA + dismiss. Only the MISSING parts carry red
 * (the unaudited count and the locked-feature chips); everything else stays
 * neutral on the purple gradient. The gradient is light in both themes, so
 * fixed colors read in light + dark (same approach as the alerts banner). */

.aeo-upsell-banner {
    display: flex;
    align-items: center;
    gap: 1rem; /* match the alerts banner's gap-4 */
    padding: 1rem 1.5rem; /* match the alerts banner exactly: py-4 (16px) px-6 (24px) */
}

.aeo-upsell-banner__icon {
    width: 40px; /* match the alerts banner's 40px icon tile */
    height: 40px;
    border-radius: 0.625rem;
    background-color: #ffffff;
    border: 1px solid #f1d6d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.aeo-upsell-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Line 1: condensed summary, single line. Comfortable line-height matching the
   alerts banner's text rhythm (not squeezed). */
.aeo-upsell-banner__line1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #4b5563;
}
.aeo-upsell-banner__plan {
    font-weight: 700;
    color: #111827;
}
.aeo-upsell-banner__sep {
    color: #9ca3af;
}
.aeo-upsell-banner__cap {
    color: #4b5563;
}
/* The unaudited count is the "missing" signal -> red. */
.aeo-upsell-banner__miss {
    font-weight: 700;
    color: #a32d2d;
}

/* Line 2: a "Locked on {plan}:" lead-in + one no-wrap row of compact red-tinted
   chips; truncate on overflow. The lead-in frames the chips as missing/locked
   features rather than a bare list of names. */
.aeo-upsell-pills {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem; /* comfortable heading->pills breathing room */
    overflow: hidden;
}

.aeo-upsell-pills__lead {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    font-size: 0.6875rem; /* ~11px, matches the chips */
    font-weight: 700;
    white-space: nowrap;
    color: #a32d2d;
}
.aeo-upsell-pills__lead-icon {
    font-size: 0.875rem;
    color: #a32d2d;
    flex: 0 0 auto;
}

.aeo-upsell-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem; /* comfortable chip, readable not squished */
    border-radius: 9999px;
    font-size: 0.6875rem; /* ~11px */
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    flex: 0 0 auto;
    background-color: #fcebeb;
    border: 1px solid #f7c1c1;
    color: #a32d2d;
}
.aeo-upsell-pill__icon {
    font-size: 0.875rem;
    color: #a32d2d;
    flex: 0 0 auto;
}

.aeo-upsell-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex: 0 0 auto;
}