/* ==========================================================================
   Kahoo Testimonial Widget - Base Styles
   نکته مهم: مقادیر پیش‌فرض هرگز به‌صورت مستقیم روی .kahoo-testimonial-wrapper
   تعریف نمی‌شوند، چون این کار مقدار ارث‌بری‌شده از پنل المنتور (که روی والدِ
   این المنت ست می‌شود) را همیشه بی‌اثر می‌کند. به‌جای آن از سینتکس
   var(--name, fallback) استفاده شده تا مقدار المنتور همیشه اولویت داشته باشد.
   ========================================================================== */

.kahoo-testimonial-wrapper {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: var( --kahoo-bg-color, #f8f8f8 );
	font-family: 'Vazir', sans-serif;
	direction: rtl;
}

.kahoo-testimonial-wrapper * {
	box-sizing: border-box;
}

/* ---------- متن نظر ---------- */
.kahoo-review-section {
	min-height: 150px;
	padding: 20px 55px 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.kahoo-review-text {
	max-width: 760px;
	margin: 0;
	color: var( --kahoo-text-color, #282828 );
	text-align: center;
	font-size: 17px;
	line-height: 2.15;
}

.kahoo-text-out-left {
	animation: kahooTextOutLeft 0.32s forwards;
}

.kahoo-text-in-right {
	animation: kahooTextInRight 0.38s forwards;
}

.kahoo-text-out-right {
	animation: kahooTextOutRight 0.32s forwards;
}

.kahoo-text-in-left {
	animation: kahooTextInLeft 0.38s forwards;
}

@keyframes kahooTextOutLeft {
	to {
		opacity: 0;
		transform: translateX(-90px);
	}
}

@keyframes kahooTextInRight {
	from {
		opacity: 0;
		transform: translateX(90px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes kahooTextOutRight {
	to {
		opacity: 0;
		transform: translateX(90px);
	}
}

@keyframes kahooTextInLeft {
	from {
		opacity: 0;
		transform: translateX(-90px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---------- خط جداکننده ---------- */
.kahoo-divider {
	width: 99%;
	height: 1px;
	margin: auto;
	background: var( --kahoo-line-color, #d8d8d8 );
}

/* ---------- بخش مشتریان ---------- */
.kahoo-clients-section {
	min-height: 195px;
	padding: 30px 20px 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.kahoo-client-name {
	min-height: 32px;
	margin: 0 0 18px;
	color: var( --kahoo-text-color, #282828 );
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

.kahoo-carousel-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --kahoo-button-gap, 18px );
}

/* ---------- دکمه‌های ناوبری ---------- */
.kahoo-carousel-button {
	width: var( --kahoo-button-size, 38px );
	height: var( --kahoo-button-size, 38px );
	flex-shrink: 0;
	border: 1px solid var( --kahoo-btn-border, #d3d3d3 );
	border-radius: var( --kahoo-button-radius, 50% );
	background: var( --kahoo-btn-bg, #ffffff );
	color: var( --kahoo-btn-color, #333333 );
	font-size: var( --kahoo-button-icon-size, 22px );
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
	user-select: none;
	padding: 0;
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
}

.kahoo-carousel-button:hover {
	background: var( --kahoo-btn-bg-hover, #242424 );
	color: var( --kahoo-btn-color-hover, #ffffff );
	border-color: var( --kahoo-btn-bg-hover, #242424 );
	outline: none;
	box-shadow: none;
}

.kahoo-carousel-button:active,
.kahoo-carousel-button:focus,
.kahoo-carousel-button:focus-visible,
.kahoo-carousel-button:focus-within {
	background: var( --kahoo-btn-bg-active, #242424 );
	color: var( --kahoo-btn-color-active, #ffffff );
	border-color: var( --kahoo-btn-border-active, #242424 );
	outline: none;
	box-shadow: none;
}

.kahoo-carousel-button:active {
	transform: scale(0.88);
}

/* ---------- کروسل ---------- */
.kahoo-carousel-window {
	width: var( --kahoo-window-width, 420px );
	max-width: calc(100vw - 130px);
	overflow-x: hidden;
	overflow-y: visible;
	padding: 15px 0 7px;
}

.kahoo-carousel-track {
	display: flex;
	align-items: center;
	gap: var( --kahoo-avatar-gap, 20px );
	will-change: transform;
	transition: transform var( --kahoo-transition-speed, 550ms ) cubic-bezier(0.22, 0.75, 0.25, 1);
}

.kahoo-carousel-item {
	width: var( --kahoo-avatar-size, 58px );
	height: var( --kahoo-avatar-size, 58px );
	flex: 0 0 var( --kahoo-avatar-size, 58px );
	border-radius: 50%;
	overflow: hidden;
	opacity: var( --kahoo-inactive-opacity, 0.28 );
	filter: grayscale( var( --kahoo-grayscale, 100% ) );
	transform: translateY(5px) scale(0.92);
	border: var( --kahoo-active-border-width, 1.5px ) solid transparent;
	cursor: pointer;
	transition: transform var( --kahoo-transition-speed, 550ms ), opacity var( --kahoo-transition-speed, 550ms ),
		filter var( --kahoo-transition-speed, 550ms ), border-color var( --kahoo-transition-speed, 550ms );
}

.kahoo-carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kahoo-carousel-item.kahoo-active {
	opacity: 1;
	filter: grayscale(0%);
	margin-top: 5px;
	transform: translateY(-12px) scale( var( --kahoo-active-scale, 1.15 ) );
	border-color: var( --kahoo-active-color, #c83f57 );
	box-shadow: 0 0 0 2px var( --kahoo-ring-color, #ffffff );
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 767px) {
	.kahoo-review-section {
		min-height: 180px;
	}

	.kahoo-review-text {
		font-size: 15px;
		line-height: 2;
	}
}