.wpcm-countdown {
  --wpcm-text-color: #222;
  --wpcm-meter-track: #e5e7eb;
  --wpcm-meter-fill: #2563eb;
  --wpcm-alert: #d93025;
  box-sizing: border-box;
  max-width: 420px;
  margin: 1em 0;
  color: var(--wpcm-text-color);
  font-family: inherit;
}

.wpcm-countdown *,
.wpcm-countdown *::before,
.wpcm-countdown *::after {
  box-sizing: inherit;
}

.wpcm-countdown__text {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin-bottom: 0.45em;
  line-height: 1.2;
  font-weight: 700;
}

.wpcm-countdown--align-left .wpcm-countdown__text {
  justify-content: flex-start;
  text-align: left;
}

.wpcm-countdown--align-center .wpcm-countdown__text {
  justify-content: center;
  text-align: center;
}

.wpcm-countdown--align-right .wpcm-countdown__text {
  justify-content: flex-end;
  text-align: right;
}

.wpcm-countdown__prefix,
.wpcm-countdown__suffix,
.wpcm-countdown__ended {
  font-size: 1.05rem;
}

.wpcm-countdown__days {
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
}

.wpcm-countdown__days.is-red {
  color: var(--wpcm-alert);
}

.wpcm-countdown__meter {
  overflow: hidden;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--wpcm-meter-track);
}

.wpcm-countdown__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--wpcm-meter-fill);
  transition: width 240ms ease;
}

.wpcm-countdown.is-red .wpcm-countdown__bar {
  background: var(--wpcm-alert);
}

.wpcm-error {
  color: #b3261e;
  font-weight: 700;
}