/* Review Carousel — front end
   ------------------------------------------------------------------ */

.rvc {
	--rvc-card-w: 230px;
	--rvc-gap: 16px;
	--rvc-lines: 4;
	--rvc-set-w: 0px;
	--rvc-duration: 0s;
	--rvc-delay: 0s;
	--rvc-radius: 14px;
	--rvc-card-bg: #fff;
	--rvc-name: #16181d;
	--rvc-meta: #7a8290;
	--rvc-text: #545c6b;
	--rvc-star: #f5b301;
	--rvc-star-empty: #e3e6ea;
	--rvc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -6px rgba(16, 24, 40, .08);

	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

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

.rvc-viewport {
	overflow: hidden;
	padding: 14px 0 22px;
	cursor: grab;
	-webkit-tap-highlight-color: transparent;
}

.rvc.is-dragging .rvc-viewport {
	cursor: grabbing;
}

.rvc-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: -webkit-max-content;
	width: max-content;
	max-width: none;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* The scroll itself is a CSS animation, so it runs with or without
   JavaScript. --rvc-set-w is the width of one full set of cards; travelling
   exactly that far and restarting is invisible because the set is duplicated. */
@-webkit-keyframes rvc-marquee {
	from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	to { -webkit-transform: translate3d(calc(var(--rvc-set-w) * -1), 0, 0); transform: translate3d(calc(var(--rvc-set-w) * -1), 0, 0); }
}

@keyframes rvc-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(var(--rvc-set-w) * -1), 0, 0); }
}

.rvc--animate .rvc-track {
	-webkit-animation: rvc-marquee var(--rvc-duration) linear var(--rvc-delay) infinite both;
	animation: rvc-marquee var(--rvc-duration) linear var(--rvc-delay) infinite both;
}

/* direction="right" */
.rvc--reverse .rvc-track {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

/* Paused while hovered, and while the visitor is dragging. */
.rvc--pause-hover:hover .rvc-track,
.rvc--pause-hover:focus-within .rvc-track,
.rvc.is-holding .rvc-track {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

/* JavaScript takes the wheel during a drag. */
.rvc.is-dragging .rvc-track {
	-webkit-animation: none !important;
	animation: none !important;
}

.rvc-set {
	display: flex;
	align-items: stretch;
	gap: var(--rvc-gap);
	padding-right: var(--rvc-gap);
}

/* Card ------------------------------------------------------------- */

.rvc-card {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	flex: 0 0 var(--rvc-card-w);
	width: var(--rvc-card-w);
	padding: 18px;
	background: var(--rvc-card-bg);
	border-radius: var(--rvc-radius);
	box-shadow: var(--rvc-shadow);
	user-select: none;
	-webkit-user-select: none;
}

.rvc-card-head {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 34px;
	padding-right: 0;
}

.rvc-avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	background: #eceff3;
	color: #5f6b7a;
}

.rvc-who {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
	padding-top: 1px;
}

.rvc-name {
	/* Keeps clear of the source badge in the top-right corner. */
	padding-right: 56px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--rvc-name);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rvc-meta {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--rvc-meta);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Source badge ----------------------------------------------------- */

.rvc-source {
	position: absolute;
	top: 2px;
	right: 0;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	max-width: 62px;
}

.rvc-source svg {
	display: block;
	width: 15px;
	height: 15px;
}

.rvc-source--hipages {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -.3px;
	color: #f2682a;
}

.rvc-source--custom img {
	display: block;
	width: auto;
	max-width: 62px;
	max-height: 16px;
	object-fit: contain;
}

/* Stars ------------------------------------------------------------ */

.rvc-stars {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 13px;
}

.rvc-star {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
}

.rvc-star-bg,
.rvc-star-fg {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.rvc-star-bg svg {
	fill: var(--rvc-star-empty);
}

.rvc-star-fg svg {
	fill: var(--rvc-star);
}

.rvc-star-svg {
	display: block;
	width: 13px;
	height: 13px;
}

/* Text ------------------------------------------------------------- */

.rvc-text {
	margin: 14px 0 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.62;
	color: var(--rvc-text);
	display: -webkit-box;
	-webkit-line-clamp: var(--rvc-lines);
	line-clamp: var(--rvc-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rvc-link {
	margin-top: auto;
	padding-top: 12px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--rvc-meta);
	text-decoration: none;
}

.rvc-link:hover,
.rvc-link:focus {
	color: var(--rvc-name);
	text-decoration: underline;
}

.rvc-empty {
	padding: 12px 14px;
	border: 1px dashed #d5d9e0;
	border-radius: 8px;
	color: #6b7280;
	font-size: 13px;
}

/* Optional modifiers ----------------------------------------------- */

/* [review_carousel class="rvc--fade"] — soft edges instead of a hard cut. */
.rvc--fade .rvc-viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* [review_carousel class="rvc--bordered"] */
.rvc--bordered .rvc-card {
	border: 1px solid #eceff3;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Only when "Respect reduced motion" is enabled in the settings. */
@media (prefers-reduced-motion: reduce) {
	.rvc--respect-motion .rvc-track {
		-webkit-animation: none;
		animation: none;
		will-change: auto;
	}
}