{% scope_css %}

.countdown_section[data-countdown] {
  /* Defaults; overridden by inline CSS variables from HTML */
  --cd-bg: rgba(0,0,0,1);
  --cd-text: rgba(255,255,255,1);
  --cd-accent: rgba(93,190,198,1);
  --cd-justify: center; /* left/center/right → flex-start/center/flex-end */
  --cd-align: center;   /* top/middle/bottom  → flex-start/center/flex-end */

  background-color: var(--cd-bg);
  padding: 70px 0;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Kill any theme background panels */
.countdown_section[data-countdown] .wrapper,
.countdown_section[data-countdown] .countdown_container,
.countdown_section[data-countdown] .date_counter {
  background: transparent !important;
  box-shadow: none !important;
}

.countdown_section[data-countdown] .countdown_container {
  display: flex;
  justify-content: var(--cd-justify);
  align-items: var(--cd-align);
}

.countdown_section[data-countdown] .date_counter ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: 30px;
  letter-spacing: 1px;
}

.countdown_section[data-countdown] .date_counter ul li {
  width: 145px;
  text-align: center;
  margin: 0;
  border-right: 1px solid var(--cd-accent);
}

.countdown_section[data-countdown] .date_counter ul li:last-child {
  border-right: none;
}

.countdown_section[data-countdown] .date_counter ul li span.date_number {
  display: block;
  font-size: 50px;
  font-weight: 600;
  line-height: 70px;
  color: var(--cd-text);
}

.countdown_section[data-countdown] .date_counter ul li span.sub_tile_date {
  display: block;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cd-text);
}

/* Mobile */
@media (max-width: 767px) {
  .countdown_section[data-countdown] { padding: 32px 0; }

  /* Force a single row on mobile */
  .countdown_section[data-countdown] .date_counter .cd-typography .time {
    flex-wrap: nowrap;           /* 👈 no wrapping */
    justify-content: space-between;
    gap: 0;                      /* tighten spacing */
  }

  /* Let items shrink to fit one line */
  .countdown_section[data-countdown] .date_counter .cd-typography .time li {
    width: auto;                 /* no fixed width */
    flex: 1 1 0;                 /* shrink if needed */
    min-width: 0;
    padding: 0 6px;
  }
{% end_scope_css %}