/**
 * JT Premium Testimonials widget styles.
 *
 * Ported verbatim from the reference "customer love" testimonial grid,
 * scoped by the widget's stable wrapper class (.jt-testimonials-wrapper).
 * Desktop/tablet use a CSS grid; mobile switches to a native horizontal
 * swipeable row (no JS), same pattern as the category slider / Instagram
 * gallery widgets.
 *
 * .jt-testi-card and .jt-testimonials-track are kept as class names on
 * purpose (rather than a fresh prefix) - assets/css/pro-style.css already
 * hooks a global performance fix onto them (backface-visibility on cards,
 * -webkit-overflow-scrolling on the scroll track).
 *
 * Defaults are never declared directly on .jt-testimonials-wrapper itself -
 * only as the var(--x, fallback) argument at each usage site. A custom
 * property declared directly on an element always wins over one inherited
 * from an ancestor (regardless of source order), which would otherwise
 * silently cancel every Elementor color/size control.
 */

.jt-testimonials-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 20px; font-family: 'Poppins', sans-serif; }

.jt-testimonials-header { text-align: center; margin: 0 0 22px; }

.jt-testimonials-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var( --jt-testi-accent, #FD317E );
	margin-bottom: 6px;
}
.jt-testimonials-eyebrow::before,
.jt-testimonials-eyebrow::after {
	content: "";
	width: 22px; height: 1.5px;
	background: var( --jt-testi-accent, #FD317E );
}

.jt-testimonials-heading { font-size: 29px; font-weight: 700; color: var( --jt-testi-title-color, #1a1a1a ); margin: 0 0 6px; letter-spacing: -0.5px; }
.jt-testimonials-subheading { font-size: 13.5px; color: var( --jt-testi-subtitle-color, #9a9aa5 ); margin: 0; }

.jt-testimonials-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 14px 0 26px;
	flex-wrap: wrap;
}
.jt-testimonials-summary-score { font-size: 22px; font-weight: 700; color: var( --jt-testi-summary-score-color, #1a1a1a ); }
.jt-testimonials-summary-stars { color: var( --jt-testi-star, #f5a623 ); font-size: 16px; letter-spacing: 2px; }
.jt-testimonials-summary-count { font-size: 12.5px; color: var( --jt-testi-subtitle-color, #9a9aa5 ); }

.jt-testimonials-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --jt-testi-gap, 20px ); }

.jt-testi-card {
	background: var( --jt-testi-card-bg, #ffffff );
	border: 1px solid var( --jt-testi-card-border, #f0f0f0 );
	border-radius: var( --jt-testi-radius, 20px );
	padding: 24px;
	position: relative;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.jt-testi-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(253, 49, 126, 0.12);
	border-color: var( --jt-testi-card-border-hover, #ffd6e6 );
}

.jt-testi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.jt-testi-stars { color: var( --jt-testi-star, #f5a623 ); font-size: 13px; letter-spacing: 2px; }
.jt-testi-product-thumb {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 9px;
	overflow: hidden;
	background: var( --jt-testi-thumb-bg, #fff5f9 );
	border: 1px solid var( --jt-testi-thumb-border, #fbdce9 );
}
.jt-testi-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.jt-testi-feedback {
	font-size: 13.5px;
	color: var( --jt-testi-feedback-color, #4a4a52 );
	line-height: 1.7;
	margin: 0 0 20px;
	min-height: 72px;
}
.jt-testi-feedback b { color: var( --jt-testi-accent, #FD317E ); font-weight: 600; }

.jt-testi-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #f5f5f5; }
.jt-testi-avatar {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient( 135deg, var( --jt-testi-accent, #FD317E ), var( --jt-testi-accent-2, #ff5c96 ) );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 700;
}
.jt-testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.jt-testi-name-row { display: flex; align-items: center; gap: 6px; }
.jt-testi-name { font-size: 13px; font-weight: 700; color: var( --jt-testi-name-color, #1a1a1a ); }
.jt-testi-verified-badge {
	width: 14px; height: 14px;
	background: var( --jt-testi-accent, #FD317E );
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.jt-testi-verified-badge svg { width: 8px; height: 8px; }
.jt-testi-verified-badge i { font-size: 8px; line-height: 1; }
.jt-testi-desig { font-size: 11px; color: var( --jt-testi-meta-color, #9a9aa5 ); }

/* Tablet */
@media (max-width: 992px) {
	.jt-testimonials-track { grid-template-columns: repeat(2, 1fr); }
	.jt-testimonials-heading { font-size: 24px; }
}

/* Mobile - horizontal scroll */
@media (max-width: 576px) {
	.jt-testimonials-wrapper { padding: 0 0 0 14px; }
	.jt-testimonials-header { text-align: left; margin-bottom: 14px; padding-right: 14px; }
	.jt-testimonials-eyebrow { display: none; }
	.jt-testimonials-heading { font-size: 19px; margin-bottom: 4px; }
	.jt-testimonials-subheading { font-size: 12px; }
	.jt-testimonials-summary { justify-content: flex-start; margin: 10px 0 18px; }
	.jt-testimonials-summary-score { font-size: 18px; }
	.jt-testimonials-summary-stars { font-size: 13px; }

	.jt-testimonials-track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-right: 14px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.jt-testimonials-track::-webkit-scrollbar { display: none; }
	.jt-testi-card {
		flex: 0 0 var( --jt-testi-mobile-card-w, 82% );
		scroll-snap-align: start;
		padding: 19px;
	}
	.jt-testi-top { margin-bottom: 13px; }
	.jt-testi-product-thumb { width: 32px; height: 32px; }
	.jt-testi-feedback { font-size: 12.5px; min-height: auto; margin-bottom: 16px; }
	.jt-testi-meta { padding-top: 13px; }
	.jt-testi-avatar { width: 36px; height: 36px; font-size: 12px; }
	.jt-testi-name { font-size: 12px; }
	.jt-testi-desig { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.jt-testi-card { transition: none !important; }
}