/* ==========================================================================
   Recent-purchase toast (social proof).

   Lives in its own sheet because _fomo-toast.php is rendered by BOTH express
   landings. It used to sit in jum-express.css, which only /slimea-jum-express
   loads - on /slimea-express the markup rendered unstyled, in the page flow.
   The partial now declares this stylesheet itself so the two cannot drift.
   ========================================================================== */

:root {
    --fomo-brand: #FFB225;
    --fomo-tint: #FFF6DC;
    --fomo-ink: #1D1D1B;
    --fomo-muted: #6B7280;
    --fomo-green: #34A853;
    --fomo-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.jum-fomo {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9998;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    padding: 14px 16px;
    font-family: var(--fomo-font);
    color: var(--fomo-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.jum-fomo.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jum-fomo__avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--fomo-tint);
    color: var(--fomo-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.jum-fomo__badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fomo-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jum-fomo__name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.jum-fomo__action {
    font-size: 14px;
    line-height: 1.35;
}

.jum-fomo__time {
    font-size: 12px;
    color: var(--fomo-muted);
    margin-top: 2px;
}

.jum-fomo__verified {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fomo-ink);
}

.jum-fomo__verified i {
    color: var(--fomo-green);
}

/* Fallback sink for the pre-existing single-string FOMO format. */
.jum-fomo__legacy:empty {
    display: none;
}


@media (max-width: 575px) {
    .jum-fomo {
        left: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
        padding: 12px 14px;
    }
}