/**
 * JHR Testimonial Carousel
 *
 * Self-contained: includes the Swiper core layout rules, scoped to this widget,
 * so the carousel lays out correctly whether Elementor ships Swiper v5 or v8 CSS.
 *
 * Specificity note: every default lives either in a var() fallback or in a
 * single-class rule. Elementor writes its generated CSS at ".elementor-element-X
 * .selector" (0,2,0), so panel values always win regardless of load order.
 */

/* =====================================================================
 * Outer container + Swiper core (scoped)
 * ================================================================== */
.jhr-tc {
	position: relative;
}

.jhr-tc-swiper {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.jhr-tc-swiper > .swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	box-sizing: content-box;
	width: 100%;
	height: 100%;
	transition-property: transform;
	transform: translate3d(0, 0, 0);
}

.jhr-tc-swiper .swiper-slide {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 100%;
	height: auto;
	transition-property: transform;
}

.jhr-tc-swiper.swiper-horizontal {
	touch-action: pan-y;
}

.jhr-tc-swiper.swiper-backface-hidden .swiper-slide {
	backface-visibility: hidden;
	transform: translateZ(0);
}

.jhr-tc__wrapper-link,
.jhr-testimonial__link {
	color: inherit;
	text-decoration: none;
}

.jhr-testimonial__link {
	display: flex;
	flex: 1 1 auto;
}

/* =====================================================================
 * Testimonial card
 * ================================================================== */
.jhr-testimonial {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	align-items: var(--jhr-tc-items, center);
	text-align: var(--jhr-tc-text-align, center);
	gap: var(--jhr-tc-content-gap, 20px);
	border-style: solid;
	border-width: 0;
	/* Honours the Width control together with Alignment. */
	margin-left: var(--jhr-tc-ms, auto);
	margin-right: var(--jhr-tc-me, auto);
}

.jhr-testimonial__content {
	box-sizing: border-box;
	width: 100%;
}

.jhr-testimonial__text {
	margin: 0;
}

.jhr-testimonial__footer {
	display: flex;
	align-items: center;
	justify-content: var(--jhr-tc-justify, center);
	gap: var(--jhr-tc-image-gap, 15px);
	max-width: 100%;
}

.jhr-testimonial__image {
	flex-shrink: 0;
	line-height: 0;
}

.jhr-testimonial__image img {
	display: block;
	box-sizing: border-box;
	width: var(--jhr-tc-image-size, 60px);
	height: var(--jhr-tc-image-size, 60px);
	object-fit: cover;
	border-radius: var(--jhr-tc-image-radius, 50%);
	border-style: solid;
	border-width: var(--jhr-tc-image-border-width, 0px);
	border-color: var(--jhr-tc-image-border-color, #ffffff);
}

.jhr-testimonial__cite {
	display: flex;
	flex-direction: column;
	font-style: normal;
	line-height: 1.4;
}

.jhr-testimonial__name {
	font-weight: 700;
}

.jhr-testimonial__title {
	font-size: 0.85em;
	opacity: 0.85;
}

/* Target of the Style > Slides controls (background / border / radius / padding). */
.jhr-testimonial__box {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}

/* ------------------------------ Layouts ------------------------------ */

/* Image Inline (default) — image and cite side by side, beneath the text. */
.jhr-testimonial--layout-image_inline .jhr-testimonial__footer {
	flex-direction: row;
}

/* Image Stacked — image above the cite. */
.jhr-testimonial--layout-image_stacked .jhr-testimonial__footer {
	flex-direction: column;
	align-items: var(--jhr-tc-items, center);
}

/* Image Above — the whole footer moves above the text. */
.jhr-testimonial--layout-image_above .jhr-testimonial__footer {
	order: -1;
	flex-direction: row;
}

/* Image Left / Right — image beside the text block. */
.jhr-testimonial--layout-image_left,
.jhr-testimonial--layout-image_right {
	flex-direction: row;
	align-items: center;
	gap: var(--jhr-tc-image-gap, 15px);
}

.jhr-testimonial--layout-image_right {
	flex-direction: row-reverse;
}

.jhr-testimonial__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	align-items: var(--jhr-tc-items, center);
	gap: var(--jhr-tc-content-gap, 20px);
}

/* ---------------------------- Bubble skin ---------------------------- */
.jhr-testimonial__bubble {
	position: relative;
	background-color: var(--jhr-tc-bubble-bg, #f1f2f3);
	padding: 20px;
	border-radius: 5px;
}

.jhr-testimonial__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-bottom: 0;
	border-top-color: var(--jhr-tc-bubble-bg, #f1f2f3);
}

/* Image Above: the tail points up towards the footer instead. */
.jhr-testimonial--layout-image_above .jhr-testimonial__bubble::after {
	top: auto;
	bottom: 100%;
	border-top: 0;
	border-bottom: 10px solid var(--jhr-tc-bubble-bg, #f1f2f3);
	border-top-color: transparent;
}

/* Side layouts have no vertical tail. */
.jhr-testimonial--layout-image_left .jhr-testimonial__bubble::after,
.jhr-testimonial--layout-image_right .jhr-testimonial__bubble::after {
	display: none;
}

/* =====================================================================
 * Arrows
 * ================================================================== */
.jhr-tc__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: #7a7a7a;
	background: none;
	border: 0;
	padding: 0;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.jhr-tc__arrow:hover {
	opacity: 0.75;
}

.jhr-tc__arrow--prev {
	left: 10px;
}

.jhr-tc__arrow--next {
	right: 10px;
}

.jhr-tc__arrow--disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.jhr-tc--rtl .jhr-tc__arrow--prev {
	left: auto;
	right: 10px;
}

.jhr-tc--rtl .jhr-tc__arrow--next {
	right: auto;
	left: 10px;
}

/* =====================================================================
 * Pagination
 * ================================================================== */
.jhr-tc__pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
	line-height: 1;
}

/* Dots */
.jhr-tc__pagination .swiper-pagination-bullet {
	display: inline-block;
	width: var(--jhr-tc-dot-size, 6px);
	height: var(--jhr-tc-dot-size, 6px);
	margin: 0 var(--jhr-tc-dot-spacing, 5px);
	border-radius: 50%;
	background: var(--jhr-tc-dot-color, #d5d8dc);
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.jhr-tc__pagination .swiper-pagination-bullet-active {
	background: var(--jhr-tc-dot-active-color, #a4afb7);
}

/* Fraction */
.jhr-tc__pagination.swiper-pagination-fraction {
	font-size: var(--jhr-tc-fraction-size, 14px);
	color: var(--jhr-tc-dot-color, #a4afb7);
}

.jhr-tc__pagination .swiper-pagination-current {
	color: var(--jhr-tc-dot-active-color, #a4afb7);
}

/* Progress */
.jhr-tc__pagination.swiper-pagination-progressbar {
	position: relative;
	width: 100%;
	height: var(--jhr-tc-progress-size, 4px);
	overflow: hidden;
	background: var(--jhr-tc-dot-color, #d5d8dc);
}

.jhr-tc__pagination .swiper-pagination-progressbar-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transform-origin: left top;
	background: var(--jhr-tc-dot-active-color, #a4afb7);
}

.jhr-tc--rtl .jhr-tc__pagination .swiper-pagination-progressbar-fill {
	transform-origin: right top;
}

/* Swiper hides these itself when there is nothing to navigate. */
.jhr-tc__pagination.swiper-pagination-lock,
.jhr-tc .swiper-button-lock {
	display: none;
}

/* =====================================================================
 * Editor helper — before Swiper initialises, keep slides from stacking wide.
 * ================================================================== */
.jhr-tc-swiper:not(.swiper-initialized) .swiper-wrapper {
	overflow: hidden;
}