/* Jackpotz lottery countdown styles (moved out of the old Flip Countdown plugin, unchanged). */
/**
 * Modern lottery countdown — v8.
 * v7 sized itself with CSS container queries (cqw units + @container),
 * which turned out unreliable in practice: labels rendered at nearly the
 * same size regardless of the actual card width, and "overflow-wrap:
 * break-word" then chopped the oversized word apart mid-letter ("HOUR" /
 * "S"). Replaced entirely with JS-measured sizing: lc-countdown-v8.js
 * measures each countdown's real rendered width with ResizeObserver and
 * writes a --lc-scale custom property (0.5–1), which every font-size below
 * is calc()'d from. This can't silently fail the way container queries did
 * — it's driven by an actual pixel measurement, not a CSS feature that may
 * or may not be supported/applied.
 *
 * Labels are also back to a plain single line with ellipsis truncation
 * instead of word-wrapping, so a label can shrink or truncate but never
 * breaks apart mid-word again.
 *
 * Filename versioned (v8) — Cloudflare on this domain caches static assets
 * by path, so each revision needs a new filename to guarantee a fresh fetch.
 */

.lc-countdown {
  --lc-pink: #E0157F;
  --lc-pink-pale: #FFD9F1;
  --lc-green: #33FF6A;
  --lc-red: #FF3B3B;
  --lc-ink: #1B1B1F;
  --lc-sub: #9C8B95;
  --lc-active: var(--lc-green);
  --lc-scale: 1; /* set by JS from the element's actual measured width */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.lc-countdown * { box-sizing: border-box; min-width: 0; }

/* ---------- Info line: date on the left, amount "at" time on the right ---------- */

.lc-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  width: 100%;
  max-width: 100%;
  font-size: calc(0.78rem * var(--lc-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lc-ink);
}

/* Below a measured width of ~230px, JS adds lc-narrow: stack date above amount/time */
.lc-countdown.lc-narrow .lc-info {
  flex-direction: column;
  align-items: stretch;
  gap: 0.15em;
}

.lc-countdown.lc-narrow .lc-info-right { justify-content: flex-start; }

.lc-info-left,
.lc-info-right {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-info-right { justify-content: flex-end; }

.lc-dot {
  width: 0.5em;
  height: 0.5em;
  min-width: 0.5em;
  border-radius: 50%;
  background: var(--lc-green);
  box-shadow: 0 0 5px var(--lc-green);
  animation: lc-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes lc-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

.lc-prize { color: var(--lc-pink); font-weight: 700; }
.lc-info-at { opacity: 0.55; font-weight: 500; }

/* ---------- Ticker: one continuous strip, shared white frame ---------- */

.lc-ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: calc(0.32em * var(--lc-scale)) calc(0.12em * var(--lc-scale));
  overflow: hidden;
}

/* ---------- Each digit segment: thin, subtle looping pulse border ---------- */

.lc-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 calc(0.08em * var(--lc-scale));
  padding: calc(0.28em * var(--lc-scale)) calc(0.1em * var(--lc-scale));
  border-radius: 10px;
  border: 1px solid var(--lc-pink-pale);
}

.lc-seg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--lc-active);
  opacity: 0.3;
  animation: lc-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lc-pulse {
  0%, 100% { opacity: 0.25; box-shadow: 0 0 0 rgba(51, 255, 106, 0); }
  50%      { opacity: 0.85; box-shadow: 0 0 5px rgba(51, 255, 106, 0.45); }
}

.lc-num {
  position: relative;
  z-index: 1;
  display: block;
  font-size: calc(1.75rem * var(--lc-scale));
  font-weight: 800;
  line-height: 1;
  color: var(--lc-pink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lc-label {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0.2em;
  font-size: calc(0.5rem * var(--lc-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lc-sub);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lc-colon {
  align-self: center;
  font-size: calc(1.75rem * var(--lc-scale));
  font-weight: 800;
  line-height: 1;
  color: var(--lc-pink-pale);
}

/* ---------- Urgency: final 15 minutes — pulse turns red, a touch quicker ---------- */

.lc-countdown.lc-urgent { --lc-active: var(--lc-red); }

.lc-countdown.lc-urgent .lc-seg::before {
  animation-name: lc-pulse-red;
  animation-duration: 1.3s;
}

@keyframes lc-pulse-red {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 0 rgba(255, 59, 59, 0); }
  50%      { opacity: 0.95; box-shadow: 0 0 6px rgba(255, 59, 59, 0.55); }
}

.lc-countdown.lc-urgent .lc-num { color: var(--lc-red); }
.lc-countdown.lc-urgent .lc-dot {
  background: var(--lc-red);
  box-shadow: 0 0 5px var(--lc-red);
}

/* ---------- Ended: pulse stops, light red cross over the 00:00:00:00 ---------- */

.lc-countdown.lc-ended .lc-seg::before {
  animation-play-state: paused;
  opacity: 0.15;
}

.lc-countdown.lc-ended .lc-info,
.lc-countdown.lc-ended .lc-num,
.lc-countdown.lc-ended .lc-colon {
  opacity: 0.45;
}

.lc-ended-overlay { display: none; }

.lc-countdown.lc-ended .lc-ended-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lc-countdown.lc-ended .lc-ended-overlay::before,
.lc-countdown.lc-ended .lc-ended-overlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108%;
  height: 3px;
  background: rgba(255, 59, 59, 0.6);
  border-radius: 2px;
}

.lc-countdown.lc-ended .lc-ended-overlay::before { transform: translate(-50%, -50%) rotate(35deg); }
.lc-countdown.lc-ended .lc-ended-overlay::after  { transform: translate(-50%, -50%) rotate(-35deg); }

@media (prefers-reduced-motion: reduce) {
  .lc-dot,
  .lc-seg::before {
    animation: none !important;
  }
}