/**
 * Sale Countdown Timer designs.
 * YayBoost plugin. One stylesheet for every design; the container carries
 * `data-design` plus the two merchant colors as custom properties:
 *   --yb-cd-text    settings.style.text_color
 *   --yb-cd-accent  settings.style.countdown_color
 *
 * Markup families (see SaleCountdownTimerHelper / countdown-format.js):
 *   inline, pill                 → .yayboost-sale-countdown__timer (single span)
 *   digital, boxed, flip, banner → .yayboost-sale-countdown__units (4 units)
 */

/* ============================================
   Base
   ============================================ */
.yayboost-sale-countdown {
  --yb-cd-text: #333333;
  --yb-cd-accent: #e53935;
  color: var(--yb-cd-text);
  margin: 0.5rem 0 1rem;
}

.yayboost-sale-countdown__timer {
  color: var(--yb-cd-accent);
  font-weight: 600;
}

/* ============================================
   Single-span designs
   ============================================ */
.yayboost-sale-countdown[data-design="pill"] {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  /* Plain hex first so browsers without color-mix() still get a tint. */
  background: #fdecea;
  background: color-mix(in srgb, var(--yb-cd-accent) 12%, transparent);
}

/* ============================================
   Units family — shared structure
   ============================================ */
.yayboost-sale-countdown__units {
  display: inline-flex;
  gap: 0.45em;
  align-items: flex-start;
  vertical-align: middle;
}

.yayboost-sale-countdown__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.4em;
}

/* A class rather than the `hidden` attribute: the inline-flex rule above
   would outrank the UA's [hidden] { display: none }. */
.yayboost-sale-countdown__unit.is-hidden {
  display: none;
}

.yayboost-sale-countdown__value {
  color: var(--yb-cd-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.yayboost-sale-countdown__label {
  font-size: 0.65em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ---- digital: monospace values with ":" separators, no boxes ---- */
.yayboost-sale-countdown[data-design="digital"] .yayboost-sale-countdown__units {
  gap: 0.7em;
}

.yayboost-sale-countdown[data-design="digital"] .yayboost-sale-countdown__unit {
  position: relative;
  min-width: 2em;
}

.yayboost-sale-countdown[data-design="digital"] .yayboost-sale-countdown__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15em;
}

.yayboost-sale-countdown[data-design="digital"]
  .yayboost-sale-countdown__unit:not(.is-hidden)
  ~ .yayboost-sale-countdown__unit::before {
  content: ":";
  position: absolute;
  left: -0.5em;
  top: 0;
  color: var(--yb-cd-accent);
  font-weight: 700;
  line-height: 1.1;
}

/* ---- boxed: outlined squares, label below ---- */
.yayboost-sale-countdown[data-design="boxed"] .yayboost-sale-countdown__unit {
  padding: 0.3em 0.5em;
  border: 1px solid var(--yb-cd-accent);
  border-radius: 6px;
}

.yayboost-sale-countdown[data-design="boxed"] .yayboost-sale-countdown__value {
  font-size: 1.15em;
}

/* ---- flip: solid tiles with a midline, label outside below ---- */
.yayboost-sale-countdown[data-design="flip"] .yayboost-sale-countdown__unit {
  min-width: 0;
}

.yayboost-sale-countdown[data-design="flip"] .yayboost-sale-countdown__value {
  position: relative;
  overflow: hidden;
  min-width: 2.4em;
  padding: 0.35em 0.45em;
  border-radius: 6px;
  background: var(--yb-cd-accent);
  color: #ffffff;
  font-size: 1.15em;
  text-align: center;
}

.yayboost-sale-countdown[data-design="flip"] .yayboost-sale-countdown__value::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
}

.yayboost-sale-countdown[data-design="flip"] .yayboost-sale-countdown__label {
  margin-top: 0.3em;
}

/* ---- banner: full-width strip, message and units on one line ---- */
.yayboost-sale-countdown[data-design="banner"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.75em;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75em 1em;
  border-left: 4px solid var(--yb-cd-accent);
  background: #fdecea;
  background: color-mix(in srgb, var(--yb-cd-accent) 12%, transparent);
}

.yayboost-sale-countdown[data-design="banner"] .yayboost-sale-countdown__unit {
  padding: 0.25em 0.45em;
  border-radius: 4px;
  background: var(--yb-cd-accent);
  color: #ffffff;
}

.yayboost-sale-countdown[data-design="banner"] .yayboost-sale-countdown__value {
  color: #ffffff;
}

.yayboost-sale-countdown[data-design="banner"] .yayboost-sale-countdown__label {
  opacity: 0.85;
}

/* ============================================
   Variable product: the wrapper already carries the outer margin
   ============================================ */
.yayboost-sale-countdown-variable .yayboost-sale-countdown {
  margin: 0;
}

/* ============================================
   Shop / category loop cards — units only, so the legacy inline
   text renders exactly as before on existing stores.
   ============================================ */
.yayboost-sale-countdown.is-compact .yayboost-sale-countdown__units {
  font-size: 0.8em;
}

.yayboost-sale-countdown.is-compact .yayboost-sale-countdown__unit {
  min-width: 2em;
}

.yayboost-sale-countdown.is-compact[data-design="banner"] {
  padding: 0.5em 0.75em;
}