/* ========= Slider Layout (wrapper + absolute slides) ========= */

.hs-counter-stars-slider {
  position: relative;
  min-height: calc(var(--slider-min-vh, 60) * 1vh);
}

@supports (min-height: 100dvh) { .hs-counter-stars-slider{ min-height: calc(var(--slider-min-vh, 60) * 1dvh); } }
@supports (min-height: 100svh) and (not (min-height: 100dvh)) { .hs-counter-stars-slider{ min-height: calc(var(--slider-min-vh, 60) * 1svh); } }

.hs-counter-stars-slider > .hs-counter-stars {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-time, 1.2s) ease;
}

.hs-counter-stars-slider > .hs-counter-stars.is-active {
  opacity: 1;
  visibility: visible;
}

/* ========= Chevron Buttons ========= */

.hs-counter-stars-slider .hs-stars-prev,
.hs-counter-stars-slider .hs-stars-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--nav-color, #fff);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hs-counter-stars-slider .hs-stars-prev:hover { opacity: 0.8; transform: translateY(-50%) translateX(-2px); }
.hs-counter-stars-slider .hs-stars-next:hover { opacity: 0.8; transform: translateY(-50%) translateX(2px); }

.hs-counter-stars-slider .hs-chevron { width: 20px; height: 20px; }

.hs-counter-stars-slider .hs-stars-prev .hs-chevron { transform: none; }
.hs-counter-stars-slider .hs-stars-next .hs-chevron { transform: scaleX(-1); }

.hs-counter-stars-slider .hs-stars-prev { left: 40px; }
.hs-counter-stars-slider .hs-stars-next { right: 40px; }

/* ========= Dot Navigation ========= */

.hs-counter-stars-slider .hs-stars-dots {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 6;
}

.hs-counter-stars-slider .hs-stars-dots button {
  width: 8px; height: 8px; aspect-ratio: 1 / 1;
  border-radius: 50%; border: none;
  background: var(--nav-color, #fff);
  opacity: 0.4; cursor: pointer; padding: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hs-counter-stars-slider .hs-stars-dots button:hover { opacity: 0.8; }
.hs-counter-stars-slider .hs-stars-dots button.is-active { opacity: 0.8; transform: scale(1.2); }

/* ========= Slide Content Styling ========= */

.hs-counter-stars {
  z-index: 0;
  width: 100%;
  overflow: hidden;
  font-family: Jost;
  color: #fff;
}

.hs-counter-stars__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Content auto-centers; width is set dynamically by JS */
.hs-counter-stars__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  text-align: center;
  padding: clamp(16px, 4vw, 32px);
  margin-inline: auto; /* center block */
}

/* Title */
.title {
  font-size: var(--title-fs, clamp(20px, 2vw, 24px));
  color: var(--title-color, #fff);
  text-align: center;
}

/* Stat line */
.statline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;   /* was flex-end */
  text-align: center;        /* was right */
  gap: var(--stat-gap, 1.2em);
  line-height: 1;
  white-space: nowrap;
  position: relative;
}

.statline .value {
  font-size: var(--counter-fs, clamp(60px, 12vw, 120px));
  font-weight: 900;
  letter-spacing: var(--value-letter-spacing, 0);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
  color: var(--value-color, #fff);
}

.statline .unit {
  font-size: var(--unit-fs, clamp(40px, 8vw, 80px));
  font-weight: 700;
  color: var(--unit-color, #fff);
}

/* Caption */
.caption {
  font-size: var(--caption-fs, clamp(16px, 2vw, 20px));
  font-weight: 700;
  color: var(--caption-color, #fff);
  text-align: center;
}

.value-wrap { display: grid; }
.value-wrap > .value       { grid-area: 1 / 1; }
.value-wrap > .value--ghost{ grid-area: 1 / 1; visibility: hidden; }

/* ========= Mobile ========= */

@media (max-width: 768px) {
  .hs-counter-stars-slider .hs-stars-prev,
  .hs-counter-stars-slider .hs-stars-next { display: none !important; }
  .hs-counter-stars-slider .hs-stars-dots { gap: 12px; }
  .hs-counter-stars-slider .hs-stars-dots button { width: 12px; height: 12px; aspect-ratio: 1 / 1; }
}