/*
 * Testimonial layout adapted from the Travlla Home-1 source.
 * ------------------------------------------------------
 * The thumbnail rail, active-card movement and Swiper geometry below follow
 * the official Travlla source kit (index.html + dz.carousel.js +
 * assets/css/components/swiper.css). The component remains internally LTR so
 * the Arabic site's global RTL bridge cannot mirror the official composition.
 */

#guest-reviews.orvana-travlla-testimonial-section {
  isolation: isolate;
}

/* Swiper's vertical rail is centered against this real-height stage. */
#guest-reviews.orvana-travlla-testimonial-section .orvana-testimonial-stage {
  min-height: 489px;
}

/* Keep the original image-left / copy-right flex composition. */
#guest-reviews.orvana-travlla-testimonial-section .testimonial-content-sld .swiper-slide > div {
  direction: ltr !important;
  text-align: left !important;
}
#guest-reviews.orvana-travlla-testimonial-section .orvana-official-testimonial-thumbs .swiper-slide > * {
  direction: ltr !important;
  text-align: left !important;
}

/* Main photo dimensions used by the official Home-1 card. */
#guest-reviews .testimonial-content-sld .swiper-slide {
  height: auto;
}
#guest-reviews .testimonial-content-sld .swiper-slide > div {
  min-height: 489px;
}
#guest-reviews .testimonial-content-sld .swiper-slide > div > div:first-child > img {
  display: block;
  width: 375px;
  max-width: 100%;
  height: 489px;
  object-fit: cover;
  object-position: center;
}

/* Official thumbnail image styling. The source theme does not fade the
   non-active cards; the active state is shown by the sideways movement. */
#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide {
  opacity: 1 !important;
}
#guest-reviews .orvana-official-testimonial-thumbs img {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0;
  object-fit: cover;
  object-position: center;
  transition: opacity .5s ease, margin .5s ease, transform .5s ease;
}

/* Exact Home-1 desktop rail geometry from the official Tailwind classes:
   left-128.75 = 515px, w-28.75 = 115px, h-92.5 = 370px. */
@media (min-width: 1199px) {
  #guest-reviews .orvana-official-testimonial-thumbs {
    position: absolute !important;
    top: 50% !important;
    left: 515px !important;
    right: auto !important;
    width: 115px !important;
    height: 370px !important;
    margin: 0 !important;
    overflow: hidden !important;
    /* The original xl:-translate-y-1/2 utility uses the CSS translate
       property. Keep transform neutral or the rail would be shifted twice. */
    transform: none !important;
    z-index: 12 !important;
  }
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-wrapper {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-slide {
    width: 115px !important;
    margin: 0 !important;
  }
}

/* Official 2XL active thumbnail movement: the centered active card moves
   30% to the right. This is intentionally NOT mirrored on Arabic pages. */
@media (min-width: 1400px) {
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active.swiper-slide-thumb-active img,
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active img,
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-active.swiper-slide-thumb-active img {
    margin-left: 30% !important;
    margin-right: 0 !important;
  }
}

/* Official horizontal rail below 1200px. */
@media (max-width: 1198px) {
  #guest-reviews.orvana-travlla-testimonial-section .orvana-testimonial-stage {
    min-height: 0;
  }
  #guest-reviews .orvana-official-testimonial-thumbs {
    position: relative !important;
    inset: auto !important;
    width: 250px !important;
    max-width: calc(100vw - 30px) !important;
    height: auto !important;
    margin: 20px auto 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-wrapper {
    flex-direction: row !important;
    gap: 0 !important;
  }
  #guest-reviews .orvana-official-testimonial-thumbs .swiper-slide {
    height: auto !important;
    margin: 0 !important;
  }
  #guest-reviews .testimonial-content-sld .swiper-slide > div {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  #guest-reviews.orvana-travlla-testimonial-section .orvana-testimonial-stage {
    min-height: 390px;
  }
  #guest-reviews .testimonial-content-sld .swiper-slide > div > div:first-child > img {
    height: 390px;
  }
}

@media (max-width: 479px) {
  #guest-reviews.orvana-travlla-testimonial-section .orvana-testimonial-stage {
    min-height: 350px;
  }
  #guest-reviews .testimonial-content-sld .swiper-slide > div > div:first-child > img {
    height: 350px;
  }
}


/* V29.26: user-requested testimonial polish
   - hide the yellow prev/next buttons completely
   - keep only the middle thumbnail bright; dim the upper/lower thumbnails
   - on Arabic pages move the name/role block to the right and place the quote
     mark in the former left-side position */
#guest-reviews .testimonial-content-sld-control {
  display: none !important;
}

#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide {
  opacity: .42 !important;
  transition: opacity .5s ease, transform .5s ease;
}
#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide img {
  filter: brightness(.58) saturate(.92);
}
#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1 !important;
}
#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-thumb-active img,
#guest-reviews .orvana-official-testimonial-thumbs .swiper-slide.swiper-slide-active img {
  filter: none;
}

@media (min-width: 640px) {
  .is-rtl #guest-reviews .testimonial-content-sld .swiper-slide > div > div:nth-child(2) > div:first-child {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .is-rtl #guest-reviews .testimonial-content-sld .swiper-slide > div > div:nth-child(2) > div:first-child > div:first-child {
    margin-left: auto !important;
    text-align: right !important;
  }
  .is-rtl #guest-reviews .testimonial-content-sld .swiper-slide > div > div:nth-child(2) > div:first-child > div:last-child {
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }
}