/*
[roa_testimonials] - ROA_SC_Testimonials.

Sits inside the "Testimonial Carousel Box" container (template 18756), which supplies the amber
box, its padding and the quote mark. Text colour and font are inherited from it. Sizes are
listing 18708's, and breakpoints are Elementor's (tablet 1024, mobile 767).
*/

.roa-testimonials {
  --roa-t-amber: var(--e-global-color-primary, #f3af34);
  --roa-t-ink: var(--e-global-color-text, #01323d);
  --roa-t-hover: var(--e-global-color-c208b9d, #ffffff);
  position: relative;
}

.roa-testimonials__item {
  margin: 0;
  height: auto;
}

/* Theme and Elementor blockquote styles would add a border, italics and indents. */
.roa-testimonials .roa-testimonials__quote {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  quotes: none;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  color: inherit;
}

.roa-testimonials .roa-testimonials__quote::before,
.roa-testimonials .roa-testimonials__quote::after {
  content: none;
}

.roa-testimonials .roa-testimonials__quote p {
  margin: 0 0 0.75em;
}

.roa-testimonials .roa-testimonials__quote p:last-child {
  margin-bottom: 0;
}

/* The theme italicises figcaption. */
.roa-testimonials .roa-testimonials__cite {
  display: block;
  font-style: normal;
  line-height: 1.3;
}

.roa-testimonials__name,
.roa-testimonials__position {
  display: block;
}

.roa-testimonials__name {
  font-size: 18px;
  font-weight: 800;
}

.roa-testimonials__position {
  font-size: 14px;
  font-weight: 400;
}

/*
Arrows at top right, above the first line of the quote - where JetEngine put them: 25px
squares 37.5px above the slider (its -25px top plus a -12.5px margin), prev at right 10px and
next at right -15px, reaching into the container's right padding. The dark rule between them
is the prev arrow's right border.

Two classes deep throughout: the Elementor kit styles every button as .elementor-kit-N button
(pill shape, 18px padding, no border, a lighter yellow on hover), which beats one class. Its
custom CSS also strips button focus outlines with !important, so keyboard focus is a
box-shadow ring instead.
*/
.roa-testimonials .roa-testimonials__arrow {
  position: absolute;
  top: -37.5px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--roa-t-amber);
  color: var(--roa-t-ink);
  font-size: 0;
  cursor: pointer;
  user-select: none;
}

.roa-testimonials .roa-testimonials__arrow:hover,
.roa-testimonials .roa-testimonials__arrow:focus {
  background: var(--roa-t-amber);
  color: var(--roa-t-hover);
}

.roa-testimonials .roa-testimonials__arrow:focus-visible {
  box-shadow: 0 0 0 2px var(--roa-t-ink);
}

.roa-testimonials .roa-testimonials__arrow svg {
  width: auto;
  height: 30px;
  flex: none;
}

.roa-testimonials .roa-testimonials__arrow svg path {
  fill: currentColor;
}

.roa-testimonials .roa-testimonials__arrow--prev {
  right: 10px;
  border-right: 2px solid var(--roa-t-ink);
}

.roa-testimonials .roa-testimonials__arrow--next {
  right: -15px;
  transform: scaleX(-1);
}

.roa-testimonials__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
}

.roa-testimonials__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 3px;
  border: 1px solid var(--roa-t-ink);
  border-radius: 50%;
  background: var(--roa-t-amber);
  opacity: 1;
  cursor: pointer;
}

.roa-testimonials__dots .swiper-pagination-bullet:hover,
.roa-testimonials__dots .swiper-pagination-bullet-active {
  background: var(--roa-t-ink);
}

@media (max-width: 1024px) {
  .roa-testimonials__name,
  .roa-testimonials__position {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .roa-testimonials .roa-testimonials__quote {
    font-size: 18px;
  }
}