/**
 * RF Testimonial Carousel — custom Rose Fit Elementor widget.
 *
 * Full-width black testimonial section holding one bordered card:
 *   [quote image] → [testimonial text] → [author name] → [author role]
 *
 * Everything is namespaced under .rf-testimonial-widget and driven by CSS
 * custom properties. Values are 1:1 with Figma node 105:232 (1440 frame).
 *
 * Carousel mechanics intentionally mirror Bootstrap 5's own slide rules so
 * the widget is self-sufficient even if the theme's compiled Bootstrap CSS
 * were absent, while never fighting it when present:
 *   - slides keep Bootstrap's float layout (required for slide overlap)
 *   - the next testimonial enters from the right, the current one exits left
 */

.rf-testimonial-widget {
	/* ---------- design tokens (Figma node 105:232, 1440 frame) ---------- */
	--rf-testimonial-bg: transparent;
	--rf-testimonial-text: #ffffff;
	--rf-testimonial-name: #ffb300;
	--rf-testimonial-role: #916037;

	/* Card: 801 x 226, 1px stroke, 10px radius.
	 * The stroke is a horizontal GRADIENT, not a flat line: solid on the two
	 * vertical edges and faded out to nothing by ~18% in from either end, so
	 * the top and bottom rules disappear across the middle. Sampled straight
	 * off the Figma render — #916037 at 0.41 alpha measures 63/255 on black,
	 * matching the design pixel for pixel. */
	--rf-testimonial-max-width: 801px;
	--rf-card-min-height: 226px;
	--rf-card-border-width: 1px;
	--rf-card-border-color: rgba(145, 96, 55, 0.41);
	--rf-card-border-fade: 18%;
	--rf-card-radius: 10px;
	/* (801 - 745) / 2 = 28px of breathing room either side of the quote. */
	--rf-card-padding-x: 28px;
	--rf-card-padding-y: 24px;

	--rf-section-padding-top: 0px; /* ponytail: spacing owned by Elementor section */
	--rf-section-padding-bottom: 0px;

	--rf-quote-size: 66px;
	--rf-quote-gap: 12px;
	--rf-quote-opacity: 1;

	--rf-name-gap: 12px;
	--rf-role-gap: 12px;

	--rf-transition-duration: 700ms;

	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	background: transparent !important;
	background-color: transparent !important;
	/* ponytail: !important beats Elementor's cached post CSS, which still
	 * carries a saved padding value from before the control was removed. */
	padding: 0 !important;
}

/* =========================================================
 * INNER LAYOUT — full width, no container constraints.
 * The testimonial content constrains its own width instead,
 * so Elementor container settings stay fully respected.
 * ========================================================= */
.rf-testimonial-widget__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

/* =========================================================
 * CAROUSEL SHELL — this element IS the bordered card.
 * It sits OUTSIDE .carousel-inner, so the frame stays put while
 * the testimonials slide through it. Scoped Bootstrap-compatible
 * mechanics (slide only) live below.
 * ========================================================= */
.rf-testimonial-widget .rf-testimonial-widget__carousel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--rf-testimonial-max-width), 100%);
	min-height: var(--rf-card-min-height);
	margin-left: auto;
	margin-right: auto;
	padding: var(--rf-card-padding-y) var(--rf-card-padding-x);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--rf-card-radius);
	background: transparent;
}

/* Gradient stroke. border-image cannot follow a border-radius, so the ring is
 * drawn as a filled pseudo-element with its own middle masked out — leaving
 * exactly `--rf-card-border-width` of gradient hugging the rounded corners. */
.rf-testimonial-widget .rf-testimonial-widget__carousel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	padding: var(--rf-card-border-width);
	background: linear-gradient(
		90deg,
		var(--rf-card-border-color) 0%,
		transparent var(--rf-card-border-fade),
		transparent calc(100% - var(--rf-card-border-fade)),
		var(--rf-card-border-color) 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.rf-testimonial-widget .carousel-inner {
	position: relative;
	overflow: hidden; /* BFC: contains floated slides + clips them mid-slide */
	width: 100%;
}

.rf-testimonial-widget .carousel-item {
	position: relative;
	display: none;
	float: left;
	margin-right: -100%;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	will-change: transform;
	transition-duration: var(--rf-transition-duration);
}

.rf-testimonial-widget .carousel-item.active,
.rf-testimonial-widget .carousel-item-next,
.rf-testimonial-widget .carousel-item-prev {
	display: block;
}

/* SLIDE transition — the next testimonial travels in from the right and
 * pushes the current one out to the left. Same rules Bootstrap 5 uses for a
 * plain `.carousel.slide`, restated here so the effect survives even if the
 * theme's compiled Bootstrap CSS is missing. */
.rf-testimonial-widget .carousel-item {
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

.rf-testimonial-widget .carousel-item-next:not(.carousel-item-start),
.rf-testimonial-widget .active.carousel-item-end {
	transform: translateX(100%);
}

.rf-testimonial-widget .carousel-item-prev:not(.carousel-item-end),
.rf-testimonial-widget .active.carousel-item-start {
	transform: translateX(-100%);
}

/* ---------------------------------------------------------
 * Vanilla-JS fallback engine (used only when Bootstrap's
 * Carousel JS could not be found). Slides stack in one grid
 * cell; the incoming slide travels in from +100% while the
 * outgoing one leaves at -100%, matching Bootstrap's slide.
 * --------------------------------------------------------- */
.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

/* Parked off-stage to the right with NO transition, so when .is-leaving is
 * dropped the slide snaps back to the queue instead of animating across. */
.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-item {
	grid-area: 1 / 1;
	float: none;
	margin-right: 0;
	display: block;
	opacity: 1;
	transform: translateX(100%);
	transition: none;
}

.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-item.is-active,
.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-item.is-leaving {
	transition: transform var(--rf-transition-duration) ease-in-out;
}

.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-item.is-active {
	transform: translateX(0);
	z-index: 1;
}

.rf-testimonial-widget .rf-testimonial-widget__carousel.rf--js-fallback .carousel-item.is-leaving {
	transform: translateX(-100%);
}

/* =========================================================
 * SLIDE CONTENT — the part that actually rotates. The frame,
 * padding and border all belong to the carousel shell above, so
 * only this column moves when a testimonial changes.
 * Figma 105:233: column flex, 12px gap, centred both axes.
 * ========================================================= */
.rf-testimonial {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: inherit;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	text-align: center;
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* ---------- uploaded quote image ---------- */
.rf-testimonial__quote {
	line-height: 0;
}

.rf-testimonial__quote-icon {
	display: block;
	width: var(--rf-quote-size);
	height: var(--rf-quote-size);
	max-width: 100%;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--rf-quote-gap);
	opacity: var(--rf-quote-opacity);
}

/* ---------- testimonial text ---------- */
.rf-testimonial__text {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	color: var(--rf-testimonial-text);
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.16px;
	text-wrap: pretty;
}

/* ---------- author name ---------- */
.rf-testimonial__author {
	margin: var(--rf-name-gap) 0 0;
	color: var(--rf-testimonial-name);
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0.18px;
}

/* ---------- author role ---------- */
.rf-testimonial__role {
	margin: var(--rf-role-gap) 0 0;
	color: var(--rf-testimonial-role);
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.13px;
}

/* =========================================================
 * OPTIONAL CONTROLS (rendered only when enabled in Elementor)
 * ========================================================= */

/* ---------- pagination indicators ---------- */
.rf-testimonial-widget .rf-testimonial-widget__indicators {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -34px;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-testimonial-widget .rf-testimonial-widget__indicators [data-bs-slide-to] {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(244, 189, 0, 0.28);
	text-indent: -9999px;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.rf-testimonial-widget .rf-testimonial-widget__indicators [data-bs-slide-to].active {
	background: #f4bd00;
	transform: scale(1.15);
}

.rf-testimonial-widget .rf-testimonial-widget__indicators [data-bs-slide-to]:focus-visible {
	outline: 1px solid rgba(244, 189, 0, 0.7);
	outline-offset: 3px;
}

/* ---------- previous / next arrows ---------- */
.rf-testimonial-widget .rf-testimonial-widget__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(154, 95, 36, 0.35);
	border-radius: 50%;
	background: rgba(5, 5, 5, 0.6);
	color: #b07a35;
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease;
	opacity: 0.85;
}

.rf-testimonial-widget .rf-testimonial-widget__arrow:hover,
.rf-testimonial-widget .rf-testimonial-widget__arrow:focus-visible {
	color: #f4bd00;
	border-color: rgba(244, 189, 0, 0.55);
	opacity: 1;
}

.rf-testimonial-widget .rf-testimonial-widget__arrow:focus-visible {
	outline: 1px solid rgba(244, 189, 0, 0.7);
	outline-offset: 3px;
}

.rf-testimonial-widget .rf-testimonial-widget__arrow svg {
	width: 18px;
	height: 18px;
}

/* The carousel element is the card, so the arrows hang just outside it. */
.rf-testimonial-widget .rf-testimonial-widget__arrow--prev {
	left: -56px;
}

.rf-testimonial-widget .rf-testimonial-widget__arrow--next {
	right: -56px;
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */
@media (max-width: 767.98px) {
	.rf-testimonial-widget .rf-testimonial-widget__indicators {
		bottom: -28px;
	}
}

@media (max-width: 575.98px) {
	.rf-testimonial-widget {
		--rf-card-padding-x: 20px;
		--rf-card-padding-y: 28px;
		--rf-quote-size: 52px;
	}

	.rf-testimonial-widget .rf-testimonial-widget__arrow {
		width: 34px;
		height: 34px;
	}

	.rf-testimonial-widget .rf-testimonial-widget__arrow--prev {
		left: 2px;
	}

	.rf-testimonial-widget .rf-testimonial-widget__arrow--next {
		right: 2px;
	}
}

/* =========================================================
 * ACCESSIBILITY — honour reduced-motion preferences
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.rf-testimonial-widget .carousel-item {
		transition-duration: 0.01ms !important;
	}

	.rf-testimonial-widget .rf-testimonial-widget__arrow,
	.rf-testimonial-widget .rf-testimonial-widget__indicators [data-bs-slide-to] {
		transition: none;
	}
}