/* =============================================================================
 * flash-banner.css — the durable "invoice/quote sent" confirmation on a list
 * page. Paired with assets/js/components/flash-banner.js, fed by flash.php via
 * window.KEEPR_FLASH. The list settles, then this drops in a beat later (the JS
 * delays it) and stays until dismissed — a toast would be gone before someone
 * back from their email tab saw it. Keepr is light-only.
 * ========================================================================== */

.keepr-flash-banner {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    /* max-height target is set by the JS from the measured height, so a long
       client name that wraps is never clipped. */
    transition: max-height 0.42s cubic-bezier(0.2, 0.85, 0.3, 1.02),
                opacity 0.34s ease, margin 0.42s ease;
}
.keepr-flash-banner.is-in { opacity: 1; margin: 0 0 18px; }

.keepr-flash-body {
    display: flex;
    align-items: center;
    gap: 11px;
    /* the on-grey tint: the pale standard success green washes out on the page. */
    background: var(--color-alert-success-bg-on-grey, #d1ecd8);
    border-radius: var(--radius);
    padding: 13px 15px;
}
.keepr-flash-icon {
    flex: none;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;                 /* a crisp white disc on the green bar */
    display: grid; place-items: center;
    transform: scale(0.4);
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}
.keepr-flash-banner.is-in .keepr-flash-icon { transform: scale(1); }
.keepr-flash-text { flex: 1; font-size: 13.5px; color: var(--color-alert-success-text, #2d6e3f); line-height: 1.35; }
/* the global `* { color: var(--color-text) }` sets grey straight onto <b>, so
   inherit is unreliable — set the bold's green explicitly (see base.css:352). */
.keepr-flash-text b { font-weight: 500; color: var(--color-alert-success-text, #2d6e3f); }
.keepr-flash-link { color: var(--color-primary-hover); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.keepr-flash-link:hover { text-decoration: underline; }
.keepr-flash-x { border: 0; background: transparent; color: #8fb79c; font-size: 20px; line-height: 14px; cursor: pointer; padding: 0 2px; }
.keepr-flash-x:hover { color: #2d6e3f; }

.keepr-flash-tick { width: 15px; height: 15px; }
.keepr-flash-tick path { fill: none; stroke: var(--color-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.keepr-flash-banner.is-in .keepr-flash-tick path { animation: keeprFlashDraw 0.5s 0.2s cubic-bezier(0.5, 0, 0.3, 1) forwards; }
@keyframes keeprFlashDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .keepr-flash-banner, .keepr-flash-icon, .keepr-flash-tick path { transition: none !important; animation: none !important; }
    .keepr-flash-icon { transform: none !important; }
    .keepr-flash-tick path { stroke-dashoffset: 0 !important; }
}