/* Offer page only (loaded after styles.css). */
/* Cards wait until the Worker or offer.js has checked that codes are left (no flash before a redirect). */
html:not([data-promo-checked]) .claims { visibility: hidden; }

/* Free codes left per store: a large serif count over a slim bar that empties as codes go. */
.promo-count { --left: 1; display: grid; gap: 10px; }
.promo-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--secondary); font-size: 15px; }
.promo-left { font: 400 44px/1 var(--serif); color: var(--champagne); font-variant-numeric: tabular-nums; }
.promo-bar { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.promo-bar span {
  display: block; height: 100%; width: calc(var(--left) * 100%); border-radius: inherit;
  background: var(--champagne); transition: width 0.6s ease, background-color 0.3s ease;
}
.promo-count.is-low .promo-left { color: var(--error); }
.promo-count.is-low .promo-bar span { background: var(--error); }
@media (prefers-reduced-motion: reduce) {
  .promo-bar span { transition: none; }
}

/* A store that has run out: sold-out note and a button to the 90%-off offer, in place of claiming. */
.claim-soldout { display: grid; gap: 14px; }
.claim-soldout-note { display: flex; align-items: flex-start; gap: 10px; color: var(--secondary); font-size: 15px; }
.claim-soldout-note .sold-out-tag { margin-top: 1px; }
.claim-sale { text-align: center; }