/* =========================================================
   TESTIMONIALS SLIDER — styling
   Scoped to .testimonials-slider so it won't affect your
   theme's global fonts/colors elsewhere.
   ========================================================= */

.testimonials-slider {
	--ts-card-bg: #201f1b;
	--ts-accent: #ffc71f;
	--ts-text-muted: #8a93a6;
	--ts-white: #ffffff;

	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.testimonials-slider *,
.testimonials-slider *::before,
.testimonials-slider *::after {
	box-sizing: border-box;
}

/* IMPORTANT: keep this hidden (default). Do NOT set to visible —
   that lets neighboring slides bleed into view, which is the
   overlapping/cut-off-text bug you saw. */
.testimonials-slider .slick-list {
	overflow: hidden;
	padding-bottom: 10px;
}

.testimonials-slider .slick-track {
	display: flex !important;
}

.testimonials-slider .slick-slide {
	height: auto;
}

.testimonials-slider .slick-slide > div {
	height: 100%;
}

.testimonial-slide {
	padding: 0 14px;
	height: 100%;
}

.testimonial-wrap {
	max-width: 460px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ---------- One seamless card: quote block + footer stacked ---------- */
.quote-card {
	position: relative;
	background: var(--ts-card-bg);
	border-radius: 24px 24px 0 0;
	padding: 40px 34px 4px;
	z-index: 1;
	flex: 1 1 auto;
	overflow: hidden;
}

.quote-card .ti-quote-icon {
    display: block;
    font-style: normal;
    color: var(--ts-accent);
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
    width: 40px;
}
.quote-card .ti-quote-icon svg {
	width: 40px;
	height: 30px;
	display: block;
}

.star-rating {
	position: absolute;
	white-space: nowrap;
}

.star-rating .star, .star-rating .filled:before {
	color: #ffc71f !important;
	font-size: 15px;
	letter-spacing: 2px;
}

.star-rating .star.filled {
	color: var(--ts-accent);
}

.quote-text {
	color: var(--ts-text-muted);
	font-size: 15px;
	line-height: 1.8;
	margin: 12px 0 30px;
	word-wrap: break-word;
}

/* ---------- Footer: avatar peeks up over the card's bottom edge ---------- */
.profile-card {
	position: relative;
	background: var(--ts-card-bg);
	border-radius: 0 0 24px 24px;
	margin: 0;
	max-width: none;
	padding: 0 34px 26px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.profile-card img {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid var(--ts-card-bg);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
	flex: 0 0 64px;
	background: #333;
	max-width: none;
}
.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-name {
	color: var(--ts-white);
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.profile-role {
	color: #9a9a9a;
	font-size: 13px;
	margin: 4px 0 0;
}

/* ---------- Slick dots ---------- */
.testimonials-slider .slick-dots {
	position: static;
	margin-top: 30px;
}

.testimonials-slider .slick-dots li button:before {
	font-size: 10px;
	color: transparent;
	background: transparent;
	border: 1px solid #888;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	opacity: 1;
	content: "";
}

.testimonials-slider .slick-dots li.slick-active button:before {
	background: var(--ts-accent);
	border-color: var(--ts-accent);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
	.quote-card {
		padding: 34px 26px 4px;
	}

	.profile-card {
		padding: 0 26px 22px;
	}
}