/**
 * Nx Testimonials, Swiper layout.
 *
 * Only structure and defaults live here. Colours, sizes and padding come from
 * the Elementor controls, so the client can change them in the panel.
 */

.nx-testimonials {
	position: relative;
}

/* Swiper 8 uses .swiper, Swiper 5 used .swiper-container. Both classes are on
   the element, so target both here. */
.nx-testimonials__swiper {
	overflow: hidden;
	/* Room for the card border and any focus ring, which would otherwise be
	   clipped by the overflow above. */
	padding: 4px;
	margin: -4px;
}

/* Equal height slides. Without this a short review leaves a stubby card next to
   a tall one, which is the most common complaint about testimonial carousels. */
.nx-testimonials .swiper-slide {
	height: auto;
	display: flex;
}

/* ---------- pre-init and failure states ----------
   Before Swiper runs, .swiper-slide has no width and the cards collapse into
   an unreadable squash. These rules give them a sensible width immediately, so
   the section looks right from first paint and Swiper simply takes over. If
   Swiper never arrives, this is also what the visitor is left with: a normal
   horizontally scrolling row, which is a perfectly usable fallback. */
.nx-testimonials:not(.nx-is-ready) .swiper-wrapper,
.nx-testimonials.nx-is-failed .swiper-wrapper {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.nx-testimonials:not(.nx-is-ready) .swiper-wrapper::-webkit-scrollbar,
.nx-testimonials.nx-is-failed .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

.nx-testimonials:not(.nx-is-ready) .swiper-slide,
.nx-testimonials.nx-is-failed .swiper-slide {
	flex: 0 0 83%;   /* matches the 1.2 slides-per-view default */
	scroll-snap-align: start;
}

@media (min-width: 1025px) {
	.nx-testimonials:not(.nx-is-ready) .swiper-wrapper,
	.nx-testimonials.nx-is-failed .swiper-wrapper {
		gap: 24px;
	}

	.nx-testimonials:not(.nx-is-ready) .swiper-slide,
	.nx-testimonials.nx-is-failed .swiper-slide {
		flex: 0 0 calc((100% - 24px) / 2);   /* matches 2 per view */
	}
}

/* Arrows and dots do nothing without Swiper, so hide them if it failed. */


/* ---------- card ---------- */
.nx-testimonial {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	min-height: 360px;
	background: #fff;
	border: 1px solid var(--borderColor,#e6e8eb);
	border-radius:var(--site-border-radius,5px);
	overflow: hidden;
}

.nx-testimonial__media {
	flex: 0 0 36%;
	position: relative;
	overflow: hidden;
	background: #f3f4f6;
}

.nx-testimonial__img,
.nx-testimonial__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nx-testimonial__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------- stars ---------- */
.nx-testimonial__stars {
	--nx-star: #f5811f;
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.nx-testimonial__star { fill: #dfe2e6; flex: none; }
.nx-testimonial__star.is-on { fill: var(--nx-star); }

/* ---------- name and badge ---------- */
.nx-testimonial__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 14px;
	line-height: 1.4;
}

.nx-testimonial__name {
	font-weight: 600;
	font-size: 15px;
	color: #1a1a1a;
}

.nx-testimonial__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-style: italic;
	color: #6b7280;
	white-space: nowrap;
}

.nx-testimonial__verified svg { flex: none; }

/* ---------- review text ---------- */
.nx-testimonial__text {
	font-size: 15px;
	line-height: 1.7;
	color: #3f4652;
}

.nx-testimonial__text p { margin: 0 0 0.8em; }
.nx-testimonial__text p:last-child { margin-bottom: 0; }

/* ---------- arrows ---------- */
.nx-testimonials__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	background: #fff;
	box-shadow: 0 2px 10px rgba(16, 24, 40, .14);
	cursor: pointer;
	transition: box-shadow .15s ease, opacity .15s ease;
	height: 40px !important;
    width: 40px !important;
    border-radius: 100%;
    border: 1px solid #0000001a;
    background-color: #fff;
    padding: 0 !important;
}

.nx-testimonials__nav:hover { box-shadow: 0 4px 16px rgba(16, 24, 40, .2); }

.nx-testimonials__nav:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nx-testimonials__nav--prev { left: -14px; }
.nx-testimonials__nav--next { right: -14px; }

/* Swiper adds this class at either end when loop is off. Dimmed rather than
   hidden, so the layout does not shift. */
.nx-testimonials__nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	box-shadow: 0 2px 10px rgba(16, 24, 40, .1);
}

/* Hidden entirely when every slide already fits. */
.nx-testimonials__nav.swiper-button-lock { display: none; }

/* ---------- pagination dots ----------
   Written to stand on its own. Swiper's stylesheet supplies the bullet size and
   colour by default, but on installs where that CSS is deferred or not loaded
   the bullets render as zero-size spans and vanish. Every property they need is
   declared here, and the selectors are doubled up on .nx-testimonials so they
   win against Swiper's own rules regardless of stylesheet order. */
 
 .nx-testimonials .swiper-pagination{
     margin-top: 30px;
        position: relative;
 }
 


/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.nx-testimonial { min-height: 320px; }
	.nx-testimonial__body { padding: 24px; }
}

@media (max-width: 767px) {
	.nx-testimonial {
		flex-direction: column;
		min-height: 0;
	}

	.nx-testimonial__media {
		flex: none;
		height: 220px;
	}

	.nx-testimonial__body { padding: 20px; }

	/* At 1.2 slides per view the next card is deliberately visible at the edge,
	   so the arrows are tucked inside rather than hanging off. */
	.nx-testimonials__nav--prev { left: 4px; }
	.nx-testimonials__nav--next { right: 4px; }
}