/*** Remote carousel nav **/
.remote-carousel-controls {
  display: flex;
  align-items: center;
}

.remote-carousel-controls button {
  background: transparent;           
  border: none;
  padding: 0.5em;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease;
  line-height: 1;
  font-size: inherit;
}

.remote-carousel-controls .js-prev {
  margin-right: 10px;
}

.remote-carousel-controls .js-prev:focus,
.remote-carousel-controls .js-next:focus {
  outline: none !important;
  box-shadow: none !important;
  background-color: inherit;
  color: inherit;
}

/*.remote-carousel-controls .js-next:hover {
  transform: translateX(4px);
}

.remote-carousel-controls .js-prev:hover {
  transform: translateX(-4px);
}

.remote-carousel-controls button:active {
  transform: translateY(1px);
} */

/* Ensure icons follow Elementor color controls */
.remote-carousel-controls .js-prev svg,
.remote-carousel-controls .js-next svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  fill: currentColor;    /* Font Awesome uses fill */
  transition: fill 0.3s ease, transform 0.3s ease;
}

.remote-carousel-controls .js-prev svg path,
.remote-carousel-controls .js-next svg path {
  fill: currentColor;    /* FA icons */
  stroke: currentColor;  /* your fallback arrows */
}

/* Hover/focus colors apply to SVGs as well */
.remote-carousel-controls .js-prev:hover svg,
.remote-carousel-controls .js-next:hover svg,
.remote-carousel-controls .js-prev:focus svg,
.remote-carousel-controls .js-next:focus svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.remote-carousel-controls .slide-counter {
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.remote-carousel-controls .slide-counter.hidden {
  opacity: 0;
  visibility: hidden;
}