/*
 * Fake stock booster — scarcity bar shown under the price on a product page,
 * and a one-line badge on a product card.
 *
 * Every colour comes from the --sf-ui-* contract, which the storefront resolves
 * from the active theme's palette and the landing layout maps onto its own. The
 * bar previously shipped its own reds and greys, so it read as a foreign patch
 * on nine of ten themes; now it belongs to whatever palette is around it. The
 * urgency tint is mixed from that palette rather than picked, so a merchant who
 * recolours the theme recolours this too.
 *
 * Everything is scoped to .fsb-* / .fake-stock-booster so the plugin can never
 * restyle a theme's own elements.
 */

.fake-stock-booster {
    --fsb-tone: var(--sf-ui-urgent, var(--sf-ui-accent, #ef4444));
    box-sizing: border-box;
    width: 100%;
    margin-block: 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--sf-ui-border, rgba(128, 128, 128, 0.25));
    border-radius: 0.85rem;
    background: var(--sf-ui-surface, #fff);
    color: var(--sf-ui-text, #111827);
    font-family: inherit;
    text-align: start;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    .fake-stock-booster {
        border-color: color-mix(in srgb, var(--fsb-tone) 30%, transparent);
        background: color-mix(in srgb, var(--fsb-tone) 7%, var(--sf-ui-surface, #fff));
    }
}

.fake-stock-booster *,
.fake-stock-booster *::before,
.fake-stock-booster *::after {
    box-sizing: border-box;
}

.fsb-message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fsb-indicator {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--fsb-tone);
}

.fsb-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: fsb-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fsb-text {
    min-width: 0;
    font-weight: 600;
}

.fsb-count {
    display: inline-block;
    font-size: 1em;
    font-weight: 800;
    color: var(--fsb-tone);
}

.fsb-subtext {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sf-ui-muted, #6b7280);
}

.fsb-progress-bg {
    width: 100%;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--sf-ui-soft, rgba(128, 128, 128, 0.18));
    overflow: hidden;
}

/* A tint of the bar's own colour, so the track reads on a dark theme's near
   black page as well as on a white one — --sf-ui-soft is the page background on
   themes that ship no soft surface, which leaves the track invisible. */
@supports (background: color-mix(in srgb, red 10%, white)) {
    .fsb-progress-bg {
        background: color-mix(in srgb, var(--fsb-tone) 20%, transparent);
    }
}

.fsb-progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--fsb-tone);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card badge: one quiet line under the price, no bar. */
.fsb-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sf-ui-urgent, var(--sf-ui-accent, #ef4444));
}

.fsb-card-badge::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}

@keyframes fsb-ping {
    75%,
    100% {
        transform: scale(3.2);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsb-pulse {
        animation: none;
    }

    .fsb-progress-bar {
        transition: none;
    }
}

@media (max-width: 480px) {
    .fake-stock-booster {
        padding: 0.7rem 0.8rem;
        border-radius: 0.7rem;
    }

    .fsb-message {
        font-size: 0.78rem;
    }
}