/**
 * Override for sp-lc-button-prev/next visibility in the static build.
 *
 * In the static build the arrows ended up outside .sp-lc-container, so use
 * direct class selectors with !important to win over Divi text styles.
 * A small JS fix reparents them so they sit on top of the carousel.
 *
 * Values mirror the plugin's style.min.css + the inline override the
 * server emitted in the live site (color #aaaaaa, transparent bg,
 * 1px border, line-height 28, hover #16a08b).
 */

/* Container needs to be the positioning context */
.logo-carousel-free-area,
.sp-lc-container,
.sp-logo-carousel {
  position: relative !important;
}

/* The arrows themselves — strong reset matching the live site exactly */
.sp-lc-button-prev,
.sp-lc-button-next {
  position: absolute !important;
  top: 0 !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  text-align: center !important;
  color: #000 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 22 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .3s ease !important;
  box-sizing: border-box !important;
}

.sp-lc-button-prev {
  right: 36px !important;
  left: auto !important;
}

.sp-lc-button-next {
  right: 0 !important;
  left: auto !important;
}

/* Hover state — site uses subtle color change */
.sp-lc-button-prev:hover,
.sp-lc-button-next:hover {
  color: #16a08b !important;
}

/* Arrow glyphs are provided by <i class="fa fa-angle-*"> inside the buttons.
   FontAwesome is bundled with the plugin (fontawesome-webfont.woff2).
   Ensure the glyph inherits the button's font-size and stays centered. */
.sp-lc-button-prev .fa,
.sp-lc-button-next .fa {
  font-family: "FontAwesome" !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: inherit !important;
  display: inline-block !important;
}

/* Reserve space above the carousel for the arrow row */
.sp-logo-carousel {
  padding-top: 46px !important;
}
