/* ===== Vypr Countdown Banner (scoped) — updated ===== */

/* Force font just inside the component */
.vypr-cd,
.vypr-cd * { font-family: 'Montserrat', Arial, sans-serif !important; }

.vypr-cd {
  --cd-border: #FF0000; /* was #ff2a2a */
  --cd-bg-start: #320808;          /* deep red gradient (left) */
  --cd-bg-end:   #1a0505;          /* deep red gradient (right) */
  --cd-glow: rgba(255, 0, 0, .35); /* outer red glow */
  --cd-text: #ffffff;
  --cd-sub:  #ffffff;

  display: flex;               /* center the inner wrap */
  justify-content: center;
  color: var(--cd-text);
  padding: 0;
}

.vypr-cd__wrap {
  display: flex;
  align-items: center;
  gap: 16px; /* was 20px */
  padding: 16px 22px; /* was 18px 26px */
  border-radius: 10px;
  border: 1px solid var(--cd-border); /* was 2px */
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(255,0,0,.25) 0%, transparent 40%),
    linear-gradient(90deg, var(--cd-bg-start), var(--cd-bg-end));
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 26px var(--cd-glow);

  /* Strong cap + center (smaller for desktop) */
  max-width: 640px;   /* was 900px; tweak 600–700 as desired */
  width: 100%;
  margin: 0 auto;

  /* allow wrapping when space is tight */
  flex-wrap: wrap;
}

.vypr-cd__icon svg {
  display: block;
  fill: #FF6E6E; /* was #ff5a5a */
  filter: drop-shadow(0 0 6px rgba(255,0,0,.35));
  width: 28px; height: 28px;
}

.vypr-cd__label {
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 16px; /* was 20px */
  text-transform: uppercase;
  color: #EE2F2F; /* was #ff6b6b */
  white-space: nowrap;
}

.vypr-cd__segments {
  display: flex;
  align-items: baseline;
  gap: 14px; /* was 18px */
  margin-left: 6px;
  flex-wrap: nowrap;
}

.vypr-cd__colon {
  font-weight: 800;
  line-height: 1;
  font-size: 24px; /* was 32px */
  transform: translateY(2px);
  opacity: .9;
}

.vypr-cd__seg {
  display: grid;
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-width: 48px; /* was 58px */
}

.vypr-cd__num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 28px; /* was 36px */
  line-height: 1;
  color: var(--cd-text);
}

.vypr-cd__unit {
  font-size: 10px; /* was 12px */
  font-weight: 700;
  opacity: .95;
  color: var(--cd-sub);
  letter-spacing: .04em;
}


/* ---------- Tablet (icon + label centered on first line; numbers below) ---------- */
@media (max-width: 900px) {
  .vypr-cd__wrap {
    gap: 12px;
    padding: 14px 16px;
    flex-direction: row;  /* keep a row */
    flex-wrap: wrap;      /* allow wrap */
    align-items: center;
    justify-content: center; /* center the first line (icon+label) */
    text-align: center;      /* center label text */
    max-width: 100%;
  }
  .vypr-cd__icon { order: 0; margin-right: 6px; }
  .vypr-cd__label { order: 1; white-space: normal; font-size: 15px; margin-bottom: 0; }

  .vypr-cd__segments {
    order: 2;
    flex-basis: 100%;        /* push numbers to their own line */
    margin-left: 0;
    gap: 12px;
    justify-content: center; /* center the numbers row */
    flex-wrap: nowrap;
  }
  .vypr-cd__seg { min-width: 44px; }
  .vypr-cd__num { font-size: 26px; }
  .vypr-cd__colon { font-size: 20px; }
}


/* ---------- Mobile (tighter; never overflow) ---------- */
@media (max-width: 560px) {
  .vypr-cd__wrap { padding: 12px 14px; gap: 10px; }
  .vypr-cd__segments { gap: 10px; }
  .vypr-cd__seg { min-width: auto; }      /* allow free shrink */
  .vypr-cd__num { font-size: 24px; }      /* was 26px */
  .vypr-cd__colon { font-size: 20px; transform: translateY(1px); } /* was 22px */
  .vypr-cd__unit { font-size: 10px; }
  .vypr-cd__icon svg { width: 24px; height: 24px; }

}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .vypr-cd__wrap { padding: 12px 12px; gap: 8px; }
  .vypr-cd__segments { gap: 8px; }
  .vypr-cd__num { font-size: 22px; }
  .vypr-cd__colon { font-size: 18px; }
  .vypr-cd__unit { font-size: 9px; letter-spacing: .03em; }
}