/* CS Tools – Discount Manager storefront shortcodes.
   Role sets the color (savings = green, countdown = red, combined = accent);
   the cs-style-* variant sets the shape/fill. Add [style="none"] for plain text. */

.cs-save,
.cs-countdown,
.cs-sale {
    --cs-accent: #2271b1;
    --cs-accent-bg: #eef4fb;
    display: inline-block;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Role colors */
.cs-save {
    --cs-accent: #1a7f37;
    --cs-accent-bg: #e8f5ec;
}
.cs-countdown {
    --cs-accent: #c0392b;
    --cs-accent-bg: #fdecea;
}

/* ── Variant: Urgency (solid filled pill) ───────────────────────── */
.cs-style-urgency {
    padding: 0.25em 0.7em;
    border-radius: 999px;
    color: #fff;
    background: var(--cs-accent);
}

/* ── Variant: Chip (outlined, tinted) ───────────────────────────── */
.cs-style-chip {
    padding: 0.2em 0.65em;
    border-radius: 999px;
    color: var(--cs-accent);
    background: var(--cs-accent-bg);
    border: 1px solid var(--cs-accent);
}

/* ── Variant: Subtle (bold colored text) ────────────────────────── */
.cs-style-subtle {
    color: var(--cs-accent);
}

/* ── Variant: Box (square filled, uppercase) ────────────────────── */
.cs-style-box {
    padding: 0.22em 0.55em;
    border-radius: 3px;
    color: #fff;
    background: var(--cs-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9em;
}

/* Optional urgency pulse — add class="cs-pulse" to any shortcode */
.cs-pulse {
    animation: cs-pulse 1.6s ease-in-out infinite;
}
@keyframes cs-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-pulse { animation: none; }
}