/* ==========================================================
   K9 Paw – Testimonials Slider widget
   ========================================================== */
.k9tm {
	--k9-gold: #DCA54A;
	--k9-pv: 3;
	--k9-gap: 24px;
	--k9-side-w: 27%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #faf7f1 0%, #f5efe4 100%);
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #555;
}
.k9tm *, .k9tm *::before, .k9tm *::after { box-sizing: border-box; }

/* ---------- Left angled image ---------- */
.k9tm__side {
	position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
	width: var(--k9-side-w);
	clip-path: polygon(0 0, 42% 0, 100% 100%, 0 100%);
	overflow: hidden;
}
.k9tm__side img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; display: block; transition: transform 1.2s ease; }
.k9tm:hover .k9tm__side img { transform: scale(1.04); }
/* gold edge line */
.k9tm__side-line {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom right, transparent calc(50% - 3px), var(--k9-gold) calc(50% - 3px), var(--k9-gold) calc(50% + 1px), transparent calc(50% + 1px));
	clip-path: polygon(42% 0, 100% 0, 100% 100%);
	left: 0; pointer-events: none;
}
.k9tm--side::before {
	content: ""; position: absolute; top: 0; left: calc(var(--k9-side-w) * .30); z-index: 0;
	width: 70px; height: 220px;
	background: linear-gradient(180deg, #f0cf8c, var(--k9-gold));
	clip-path: polygon(0 0, 30% 0, 100% 100%, 70% 100%);
	pointer-events: none;
}

.k9tm__wm {
	position: absolute; top: 20px; right: 20px; z-index: 0; pointer-events: none;
	font-size: 380px; line-height: 1; color: rgba(220,165,74,.07);
}
.k9tm__wm svg { width: 380px; height: 380px; fill: currentColor; }

/* ---------- Main ---------- */
.k9tm__main {
	position: relative; z-index: 2;
	padding: 70px 70px 70px 0;
	margin-left: calc(var(--k9-side-w) * .82);
}
.k9tm:not(.k9tm--side) .k9tm__main { margin-left: 0; padding-left: 70px; }

.k9tm__head { text-align: center; max-width: 860px; margin: 0 auto 50px; }
.k9tm__sub { font-size: 17px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--k9-gold); margin-bottom: 14px; }
.k9tm__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 56px; font-weight: 800; line-height: 1.12; color: #111; margin: 0 0 18px;
}
.k9tm__title em { font-style: normal; color: var(--k9-gold); }
.k9tm__desc { font-size: 19px; line-height: 1.55; color: #555; }
.k9tm__desc p { margin: 0 0 8px; color: inherit; font: inherit; }
.k9tm__desc p:last-child { margin: 0; }

/* ---------- Slider ---------- */
.k9tm__slider { position: relative; }
.k9tm__track {
	display: flex; gap: var(--k9-gap);
	overflow-x: auto; overflow-y: visible;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 36px 4px 26px;           /* room for quote circle + shadow */
	scrollbar-width: none; -ms-overflow-style: none;
	outline: none;
}
.k9tm__track::-webkit-scrollbar { display: none; }
.k9tm__track:focus-visible { box-shadow: 0 0 0 2px var(--k9-gold); border-radius: 8px; }
.k9tm__slide {
	flex: 0 0 calc((100% - (var(--k9-pv) - 1) * var(--k9-gap)) / var(--k9-pv));
	scroll-snap-align: start;
	display: flex;
}

.k9tm__card {
	position: relative; width: 100%;
	display: flex; flex-direction: column;
	padding: 54px 38px 32px 42px;
	background: #fbf9f5;
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(60,40,0,.08);
	transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.k9tm__card:hover { transform: translateY(-6px); border-color: rgba(220,165,74,.45); box-shadow: 0 24px 46px rgba(60,40,0,.14); }

.k9tm__q {
	position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
	width: 68px; height: 68px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 35% 30%, #d9a54a, #b8862e 80%);
	color: #fff; font-size: 26px;
	box-shadow: 0 8px 18px rgba(184,134,46,.35);
	transition: transform .5s ease;
}
.k9tm__q svg { width: 26px; height: 26px; fill: currentColor; }
.k9tm__card:hover .k9tm__q { transform: translateX(-50%) rotateY(360deg); }

.k9tm__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; color: #c99636; font-size: 20px; }
.k9tm__text, .k9tm__text p { font-size: 18px; line-height: 1.5; color: #555; margin: 0; }
.k9tm__text { flex: 1; }
.k9tm__text p + p { margin-top: 8px; }
.k9tm__line { display: block; width: 86px; height: 1.5px; margin: 24px 0 22px; background: var(--k9-gold); opacity: .7; transition: width .4s ease; }
.k9tm__card:hover .k9tm__line { width: 140px; }

.k9tm__author { display: flex; align-items: center; gap: 18px; }
.k9tm__av {
	flex: 0 0 66px; width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f6e7cc; color: #222; font-size: 26px; font-weight: 500;
}
.k9tm__av img { width: 100%; height: 100% !important; object-fit: cover; }
.k9tm__who { display: flex; flex-direction: column; min-width: 0; }
.k9tm__name { font-size: 18px; font-weight: 700; color: #111; line-height: 1.3; }
.k9tm__role { font-size: 15px; color: #666; line-height: 1.4; }

/* Arrows */
.k9tm__arrow {
	position: absolute; top: calc(50% + 5px); z-index: 4;
	width: 66px; height: 66px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: #171717; font-size: 20px;
	box-shadow: 0 10px 26px rgba(0,0,0,.15);
	transform: translateY(-50%);
	transition: background-color .3s ease, color .3s ease, transform .3s ease, opacity .3s ease;
}
.k9tm__arrow svg { width: 20px; height: 20px; fill: currentColor; }
.k9tm__arrow:hover { background-color: var(--k9-gold); color: #171717; transform: translateY(-50%) scale(1.08); }
.k9tm__arrow:focus-visible { outline: 2px solid var(--k9-gold); outline-offset: 3px; }
.k9tm__arrow:disabled { opacity: .35; cursor: default; transform: translateY(-50%); }
.k9tm__arrow[hidden] { display: none; }
.k9tm__arrow--prev { left: -56px; }
.k9tm__arrow--next { right: -56px; }

/* Dots */
.k9tm__dots { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.k9tm__dot {
	width: 48px; height: 5px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
	background: #d8d4cc; transition: background .3s ease, width .3s ease;
}
.k9tm__dot.is-active { background: var(--k9-gold); width: 56px; }
.k9tm__dot:focus-visible { outline: 2px solid var(--k9-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.k9tm__track { scroll-behavior: auto; }
	.k9tm__card, .k9tm__q, .k9tm__side img { transition: none !important; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1500px) {
	.k9tm__title { font-size: 46px; }
	.k9tm__desc { font-size: 17px; }
	.k9tm__card { padding: 50px 28px 28px; }
	.k9tm__text, .k9tm__text p { font-size: 16px; }
	.k9tm__arrow { width: 56px; height: 56px; }
	.k9tm__arrow--prev { left: -40px; }
	.k9tm__arrow--next { right: -40px; }
	.k9tm__main { padding-right: 60px; }
}

@media (max-width: 1024px) {
	.k9tm { --k9-side-w: 22%; --k9-pv: 2; }
	.k9tm__main { padding: 60px 40px 60px 0; margin-left: calc(var(--k9-side-w) * .7); }
	.k9tm__title { font-size: 38px; }
	.k9tm__arrow--prev { left: -24px; }
	.k9tm__arrow--next { right: -24px; }
	.k9tm__wm { display: none; }
}

@media (max-width: 767px) {
	.k9tm { --k9-pv: 1; --k9-gap: 16px; }
	.k9tm__side { display: none; }
	.k9tm--side::before { display: none; }
	.k9tm--side-m .k9tm__side {
		display: block; position: relative; width: 100%; height: 220px;
		clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	}
	.k9tm--side-m .k9tm__side-line { display: none; }
	.k9tm__main, .k9tm:not(.k9tm--side) .k9tm__main { margin-left: 0; padding: 50px 16px 50px; }
	.k9tm__head { margin-bottom: 26px; }
	.k9tm__sub { font-size: 13px; }
	.k9tm__title { font-size: 30px; }
	.k9tm__desc { font-size: 15px; }
	.k9tm__track { padding: 36px 2px 20px; }
	.k9tm__card { padding: 46px 22px 24px; }
	.k9tm__q { width: 58px; height: 58px; top: -29px; font-size: 22px; }
	.k9tm__stars { font-size: 17px; margin-bottom: 14px; }
	.k9tm__text, .k9tm__text p { font-size: 15px; }
	.k9tm__av { flex-basis: 54px; width: 54px; height: 54px; font-size: 22px; }
	.k9tm__name { font-size: 16px; }
	.k9tm__role { font-size: 13px; }
	/* arrows move under the slider next to dots */
	.k9tm__arrow { position: static; transform: none; width: 46px; height: 46px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
	.k9tm__arrow:hover, .k9tm__arrow:disabled { transform: none; }
	.k9tm__slider { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
	.k9tm__track { order: 0; flex: 0 0 100%; }
	.k9tm__arrow--prev { order: 1; }
	.k9tm__arrow--next { order: 2; }
	.k9tm__dots { gap: 10px; margin-top: 16px; }
	.k9tm__dot { width: 28px; }
	.k9tm__dot.is-active { width: 36px; }
}