/* Remove shadow from Bootstrap carousel indicator buttons */

.carousel-indicators button {
  box-shadow: none !important;
  filter: none !important;
}

/* Remove shadow for active, focus and active-state selectors */

.carousel-indicators button:focus, .carousel-indicators button:active, .carousel-indicators button.active, .carousel-indicators .active {
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/* Ensure any pseudo-elements won't add a shadow */

.carousel-indicators button::before, .carousel-indicators button::after {
  box-shadow: none !important;
  filter: none !important;
}

/* Make inactive carousel indicator buttons light gray and keep the active one orange.
   - Inactive buttons: light gray (#d1d5db)
   - Active button: site accent (uses --brand-accent / fallback #F17720)
   Using !important to override default Bootstrap indicator colors when necessary. */

.carousel-indicators button {
  background-color: #d1d5db !important;
  background-clip: padding-box !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
  opacity: 1 !important;
}

.carousel-indicators button.active, .carousel-indicators button[aria-current="true"], .carousel-indicators .active {
  background-color: var(--brand-accent, #F17720) !important;
  box-shadow: none !important;
}