.top-header-banner-container {
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #ffffff;

  /* Override Blocksy / WordPress default block spacing */
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* Static Left Label */
.thm-availability-label {
  position: relative;
  z-index: 10;
  background: #000;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Wrapper handling the fade effect and clipping */
.marquee-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Strict 15px fade on both sides */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15px, #000 calc(100% - 15px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 15px, #000 calc(100% - 15px), transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.marquee-content {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Group container handles ALL horizontal spacing */
.month-group {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

/* The Month Badge Background */
.month-badge {
  background: #2a2a2a;
  color: #fff;
  padding: 0 8px;
  height: 22px; /* Matches the exact height of the date pills */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #ffffff; /* The requested white border */
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}

/* Container holding the individual date pills */
.date-ranges-container {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced slightly since we have more pills now */
}

/* The fixed-size individual date pill */
.date-pill {
  background: #151515; 
  border: 1px solid #2a2a2a; 
  width: 22px; 
  height: 22px; 
  display: flex;
  align-items: center;
  justify-content: center; 
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0; 
  box-sizing: border-box;
}

/* Explicit colors based on availability */
.date-pill.available {
  color: #ffffff;
}

.date-pill.unavailable {
  color: #4a4a4a; /* Dimmer text for dates you are booked/unavailable */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.top-header-banner-container:hover .marquee-track {
  animation-play-state: paused;
}

div[data-row="top"] div.ct-container {
  width: 100% !important;
  max-width: 100% !important;
}