/* Carnival Countdown Block */

.dbr-carnival-countdown {
  /*
   * Documented block-local fallback with no global token:
   * - on-surface: readable white text/digits over the primary-blue strip.
   */
  --dbr-carnival-countdown-on-surface: #ffffff;

  position: relative;
  background: var(--dbr-color-primary);
  padding-block: var(--dbr-space-6);
  overflow: hidden;
}

/* Festive confetti accents on the strip edges (mock reference). */
.dbr-carnival-countdown::before,
.dbr-carnival-countdown::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120'%3E%3Cg fill='%23ffffff' fill-opacity='0.55'%3E%3Ccircle cx='18' cy='22' r='4'/%3E%3Ccircle cx='70' cy='18' r='3'/%3E%3Ccircle cx='120' cy='28' r='4'/%3E%3Ccircle cx='170' cy='16' r='3'/%3E%3Ccircle cx='205' cy='26' r='4'/%3E%3Ccircle cx='40' cy='58' r='3'/%3E%3Ccircle cx='95' cy='66' r='4'/%3E%3Ccircle cx='150' cy='56' r='3'/%3E%3Ccircle cx='195' cy='64' r='4'/%3E%3Ccircle cx='25' cy='96' r='4'/%3E%3Ccircle cx='80' cy='102' r='3'/%3E%3Ccircle cx='135' cy='94' r='4'/%3E%3Ccircle cx='185' cy='100' r='3'/%3E%3Crect x='12' y='40' width='8' height='14' rx='2' transform='rotate(24 16 47)'/%3E%3Crect x='105' y='44' width='8' height='14' rx='2' transform='rotate(-18 109 51)'/%3E%3Crect x='160' y='80' width='8' height='14' rx='2' transform='rotate(30 164 87)'/%3E%3Crect x='60' y='82' width='8' height='14' rx='2' transform='rotate(-26 64 89)'/%3E%3C/g%3E%3Cg fill='%23ffcd2a' fill-opacity='0.7'%3E%3Ccircle cx='48' cy='34' r='3.5'/%3E%3Ccircle cx='140' cy='46' r='3.5'/%3E%3Ccircle cx='60' cy='76' r='3.5'/%3E%3Ccircle cx='180' cy='42' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 120px;
  background-repeat: repeat-y;
  pointer-events: none;
}

.dbr-carnival-countdown::before {
  left: 0;
}

.dbr-carnival-countdown::after {
  right: 0;
  transform: scaleX(-1);
}

.dbr-carnival-countdown__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dbr-space-6);
}

.dbr-carnival-countdown__info {
  color: var(--dbr-carnival-countdown-on-surface);
}

.dbr-carnival-countdown__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: #ffcd2a; /* mock: yellow title on the blue strip */
}

.dbr-carnival-countdown__date {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dbr-carnival-countdown-on-surface);
  opacity: 0.85;
  margin: var(--dbr-space-1) 0 0;
}

.dbr-carnival-countdown__timer {
  display: flex;
  align-items: center;
  gap: var(--dbr-space-5);
}

.dbr-carnival-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reserve a fixed width so JS-driven digit updates cause no layout shift. */
  min-width: 2.5ch;
}

.dbr-carnival-countdown__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--dbr-carnival-countdown-on-surface);
  font-variant-numeric: tabular-nums;
}

.dbr-carnival-countdown__caption {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--dbr-carnival-countdown-on-surface);
  opacity: 0.75;
  margin-top: var(--dbr-space-1);
}

.dbr-carnival-countdown__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--dbr-space-3) var(--dbr-space-6);
  border-radius: var(--dbr-radius-md);
  background: var(--dbr-carnival-countdown-on-surface);
  color: var(--dbr-color-text, #333333);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 160ms ease, transform 160ms ease;
}

.dbr-carnival-countdown__cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.dbr-carnival-countdown__cta:focus-visible {
  outline: 3px solid var(--dbr-color-focus, #47cacb);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 767px) {
  .dbr-carnival-countdown__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--dbr-space-4);
  }

  .dbr-carnival-countdown__info {
    text-align: center;
  }

  .dbr-carnival-countdown__timer {
    justify-content: center;
    gap: var(--dbr-space-4);
  }

  .dbr-carnival-countdown__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dbr-carnival-countdown__cta {
    transition: none;
  }

  .dbr-carnival-countdown__cta:hover {
    transform: none;
  }
}