/* ==========================================================================
   ROOX Motion — Marquee
   Base layout and loop animation. Defaults use :where() (zero specificity)
   so every Elementor control always wins without !important.
   ========================================================================== */

/* ---------- viewport + loop ---------- */
.roox-content-marquee-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.roox-content-marquee {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	direction: ltr; /* the loop math assumes LTR; item text keeps its own direction below */
}

/* Two identical tracks sit side by side and both slide by their own width,
   so the second one lands exactly where the first began: a seamless loop.
   marquee.js repeats the items until one track is at least as wide as the
   viewport, so "Space Between" is always the exact gap. */
.roox-content-marquee-items-wrapper {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-start;
	animation: roox-marquee-x 30s linear infinite; /* duration comes from the "Animation Duration" control */
	will-change: transform;
}

.roox-marquee-item {
	flex-shrink: 0;
	box-sizing: border-box;
}

:where([dir="rtl"], .rtl) .roox-marquee-item { direction: rtl; }

/* vertical */
.roox-marquee-vertical .roox-content-marquee { flex-direction: column; }
.roox-marquee-vertical .roox-content-marquee-items-wrapper {
	flex-direction: column;
	animation-name: roox-marquee-y;
}

/* direction = where the items travel */
.roox-marquee-direction-right .roox-content-marquee-items-wrapper,
.roox-marquee-direction-bottom .roox-content-marquee-items-wrapper {
	animation-direction: reverse;
}

@keyframes roox-marquee-x { to { transform: translate3d(-100%, 0, 0); } }
@keyframes roox-marquee-y { to { transform: translate3d(0, -100%, 0); } }

/* Keyboard users can stop the loop by tabbing into it (links inside stay reachable). */
.roox-content-marquee:focus-within .roox-content-marquee-items-wrapper,
/* marquee.js adds this while the widget is out of view — no work for pixels nobody sees */
.roox-content-marquee.is-offscreen .roox-content-marquee-items-wrapper {
	animation-play-state: paused;
}

/* ---------- edge gradients ---------- */
.roox-marquee-left-gradient-overlay,
.roox-marquee-right-gradient-overlay,
.roox-marquee-top-gradient-overlay,
.roox-marquee-bottom-gradient-overlay {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}
.roox-marquee-left-gradient-overlay,
.roox-marquee-right-gradient-overlay { top: 0; bottom: 0; width: 200px; }
.roox-marquee-left-gradient-overlay  { left: 0;  background: linear-gradient(to right, #fff 0%, transparent 100%); }
.roox-marquee-right-gradient-overlay { right: 0; background: linear-gradient(to left,  #fff 0%, transparent 100%); }

.roox-marquee-top-gradient-overlay,
.roox-marquee-bottom-gradient-overlay { left: 0; right: 0; height: 200px; }
.roox-marquee-top-gradient-overlay    { top: 0;    background: linear-gradient(to bottom, #fff 0%, transparent 100%); }
.roox-marquee-bottom-gradient-overlay { bottom: 0; background: linear-gradient(to top,    #fff 0%, transparent 100%); }

/* ---------- content marquee (images / templates) ---------- */
:where(.elementor-widget-roox-content-marquee) .roox-marquee-item {
	overflow: hidden;
	transition: opacity .3s, filter .3s, box-shadow .3s, border-color .3s, border-radius .3s;
}
.elementor-widget-roox-content-marquee .roox-marquee-item > a { display: block; height: 100%; }
.elementor-widget-roox-content-marquee .elementor-repeater-item-type-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.elementor-widget-roox-content-marquee .elementor-repeater-item-type-template { height: auto; }

/* ---------- text marquee ---------- */
:where(.elementor-widget-roox-text-marquee) .roox-marquee-item {
	font-size: clamp(2.5rem, 1rem + 5vw, 6rem);
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}
.elementor-widget-roox-text-marquee .roox-marquee-text-item { display: inline-block; }

/* ---------- testimonial marquee ---------- */
.elementor-widget-roox-testimonial-marquee .roox-content-marquee-items-wrapper { align-items: flex-start; }
.roox-marquee-testimonial-height-equal .roox-content-marquee-items-wrapper { align-items: stretch; }

:where(.elementor-widget-roox-testimonial-marquee) .roox-marquee-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	white-space: normal;
	transition-property: opacity, padding, border-color, border-radius, box-shadow;
	transition-duration: .3s;
}
.elementor-widget-roox-testimonial-marquee .roox-marquee-item-has-link > a {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.roox-marquee-card-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; }
.roox-marquee-card-header { display: flex; align-items: center; gap: 16px; }
.roox-marquee-card-header img {
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
}
.roox-marquee-card-name-rating { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

:where(.roox-marquee-card-name) { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
:where(.roox-marquee-card-twitter-handle) { font-size: .875rem; opacity: .7; }
.roox-marquee-card-content-wrapper { display: flex; flex-direction: column; }
:where(.roox-marquee-card-heading) { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
:where(.roox-marquee-card-content) { margin: 0; line-height: 1.6; }

/* leave room for the platform badge in the corner */
.roox-marquee-testimonial-type-twitter .roox-marquee-card-header,
.roox-marquee-testimonial-type-g2 .roox-marquee-card-header,
.roox-marquee-testimonial-type-trustpilot .roox-marquee-card-header { padding-inline-end: 36px; }

/* stars — glyphs from Elementor's eicons font ( full,  empty) */
.roox-marquee-item .elementor-star-rating {
	display: inline-flex;
	align-items: center;
	font-family: eicons;
	font-size: 16px;
	line-height: 1;
	color: #FFC61E;
}
.roox-marquee-item .elementor-star-rating i { display: inline-block; font-style: normal; }
.roox-marquee-testimonial-type-g2 .elementor-star-rating i { color: #FF492C; }

/* Trustpilot: white star on a green square, grey when unmarked */
.roox-marquee-testimonial-type-trustpilot .elementor-star-rating i {
	display: inline-grid;
	place-items: center;
	width: calc(1em + 7px);
	height: calc(1em + 7px);
	background: #DCDCE6;
}
.roox-marquee-testimonial-type-trustpilot .elementor-star-rating i.active { background: #00B67A; }
.roox-marquee-testimonial-type-trustpilot .rating-trustpilot::after {
	content: "";
	width: 1em;
	height: 1em;
	background: #fff;
	-webkit-mask: var(--roox-star) center / contain no-repeat;
	mask: var(--roox-star) center / contain no-repeat;
}

/* platform badge (top corner) */
.roox-marquee-card-link {
	position: absolute;
	top: 24px;
	inset-inline-end: 24px;
	z-index: 1;
	width: 24px;
	height: 24px;
}
/* star shape shared by the Trustpilot rating squares and badge */
.roox-marquee-testimonial-type-trustpilot { --roox-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.8-6.3 3.8 1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E"); }

.roox-marquee-testimonial-type-twitter .roox-marquee-card-link {
	color: #111;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.4l-5.8-7.59-6.64 7.59H.47l8.6-9.83L0 1.15h7.6l5.24 6.93zm-1.29 19.5h2.04L6.49 3.24H4.3z'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.4l-5.8-7.59-6.64 7.59H.47l8.6-9.83L0 1.15h7.6l5.24 6.93zm-1.29 19.5h2.04L6.49 3.24H4.3z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.roox-marquee-testimonial-type-trustpilot .roox-marquee-card-link {
	background: #00B67A;
	-webkit-mask: var(--roox-star) center / contain no-repeat;
	mask: var(--roox-star) center / contain no-repeat;
}
.roox-marquee-testimonial-type-g2 .roox-marquee-card-link {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #FF492C;
	color: #fff;
	font: 800 10px/1 system-ui, sans-serif;
	text-decoration: none;
}
.roox-marquee-testimonial-type-g2 .roox-marquee-card-link::before { content: "G2"; }

/* ---------- reduced motion: no loop, let people scroll the row themselves ---------- */
@media (prefers-reduced-motion: reduce) {
	.roox-content-marquee-items-wrapper { animation: none; }
	.roox-duplicated-content { display: none; }
	.roox-marquee-horizontal .roox-content-marquee { overflow-x: auto; }
	.roox-marquee-vertical .roox-content-marquee { overflow-y: auto; }
}