/* Made by Vortaxis Studio — sale visuals v1 (Sophia, 2026-11-04)
   Additive: load AFTER marketplace.css and store-system.css. Works on David's existing markup
   (.mp-sale-banner, .mp-sale-price, .mp-sale-timer, [data-sale-countdown]); no PHP change needed. */

/* Global banner: a slim lime strip with a dark countdown chip and a dark CTA */
.mp-sale-banner{position:relative;overflow:hidden;gap:8px 22px;padding:11px 24px;background:linear-gradient(90deg,#c9f45e,#e2ff8f 50%,#c9f45e);color:#162008;font-size:13.5px}
.mp-sale-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,#ffffff55 50%,transparent 60%) -200% 0/200% 100% no-repeat;animation:mp-sheen 6s ease-in-out infinite;pointer-events:none}
.mp-sale-banner strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.mp-sale-banner [data-sale-countdown],.mp-sale-timer [data-sale-countdown]{white-space:nowrap}
.mp-sale-banner [data-sale-countdown]{display:inline-block;margin-left:4px;padding:2px 9px;border-radius:7px;background:#162008;color:#d7f970;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.mp-sale-banner a{text-decoration:none;padding:6px 14px;border-radius:99px;background:#162008;color:#e9ffb0!important;font-size:12.5px;transition:transform .2s}
.mp-sale-banner a:hover{transform:translateX(2px)}

/* Price: old price struck through in red, new price in accent */
.mp-sale-price{gap:8px}
.mp-sale-price del{font-size:.62em;font-weight:500;color:#8d957f;text-decoration-color:#ff6b6b;text-decoration-thickness:2px}
.mp-plan:has(input:checked) .mp-sale-price,.mp-card .mp-sale-price{color:var(--mp-accent)}

/* Timer on the product page and the card: pill with a live dot */
.mp-sale-timer{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin:14px 0 4px;padding:7px 13px 7px 11px;border-radius:99px;background:#d7f9700f;border:1px solid #d7f97045;color:var(--mp-accent);font-size:12.5px;font-weight:700;letter-spacing:.1px}
.mp-sale-timer:before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#ff6b6b;box-shadow:0 0 0 0 #ff6b6b88;animation:mp-pulse 1.8s infinite}
.mp-sale-timer [data-sale-countdown]{color:var(--mp-ink);font-variant-numeric:tabular-nums}
.mp-card-bottom>.mp-sale-timer{width:auto;margin:2px 0 0;padding:0;border:0;background:none;font-size:11.5px}
.mp-card .mp-price .mp-sale-price{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mp-card .mp-price .mp-sale-price del{font-size:15px}

/* "Sale" tags: on the plan that is discounted and on the card cover */
.mp-plan:has(.mp-sale-price):after{content:"Sale";position:absolute;top:-9px;left:14px;padding:2px 9px;border-radius:99px;background:#ff6b6b;color:#2a0707;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.mp-card:has(.mp-sale-price) .mp-meta:after{content:"Sale";position:static;padding:4px 11px;border-radius:99px;background:#ff6b6b;color:#2a0707;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 6px 20px #ff6b6b40}

@keyframes mp-sheen{0%,70%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes mp-pulse{0%{box-shadow:0 0 0 0 #ff6b6b88}70%{box-shadow:0 0 0 7px #ff6b6b00}100%{box-shadow:0 0 0 0 #ff6b6b00}}
@media(max-width:600px){.mp-sale-banner{padding:10px 16px;font-size:12.5px}.mp-sale-banner a{padding:5px 12px}}
@media(prefers-reduced-motion:reduce){.mp-sale-banner:after,.mp-sale-timer:before{animation:none}}
#licences .mp-sale-timer{color:var(--mp-accent)}

/* Integration: product badges stay in metadata, keeping covers clear. */
.mp-product-badges{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}.mp-card .mp-meta{flex-wrap:wrap}.mp-sale-banner[hidden],.mp-sale-timer[hidden]{display:none}