/* ===============================
   Countdown Styles (External CSS)
   Scoped fixes for BODY VIDEO page
   =============================== */

body.body-video .countdown-label {
  margin-top: 24px;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.8;
  text-align: center;
}

body.body-video #countdown {
  margin-top: 8px;

  /* CRITICAL FIX:
     Global CSS sets #countdown { margin-bottom: 10rem; }
     That creates extra scroll + can cause footer overlap.
     Override ONLY on the video page. */
  margin-bottom: 2rem !important;

  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.body-video #countdown span {
  display: inline-block;
  min-width: 3ch;
}

/* Extra breathing room so footer never collides on mobile */
body.body-video .video-overlay {
  padding-bottom: 6.5rem;
}

@media (max-width: 768px) {
  body.body-video .video-overlay {
    padding-bottom: 8rem;
  }

  body.body-video #countdown {
    margin-bottom: 1.5rem !important;
  }
}