/*
 * [fgr_reviews] — review cards inside page content.
 * Self-contained: every rule is scoped to .fgr-rv and resets what themes commonly style.
 * Override colours in a theme with the custom properties below.
 */
.fgr-rv {
	--fgr-rv-card-bg: #fff;
	--fgr-rv-border: #e6e2db;
	--fgr-rv-text: #2a2a2a;
	--fgr-rv-muted: #6f6f6f;
	--fgr-rv-star: #f6b704;
	--fgr-rv-star-empty: #dcd8d1;
	--fgr-rv-radius: 12px;
	--fgr-rv-gap: 20px;
	--fgr-rv-lines: 5;
	--fgr-rv-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1 27 26'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.9-5.3 4.9 1.4 7.1L12 17.8l-6.3 3.5 1.4-7.1L1.8 9.3l7.1-.9z'/%3E%3C/svg%3E");
	container: fgr-rv / inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding: 0;
	text-align: left;
}

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

.fgr-rv [hidden] {
	display: none !important;
}

/* Layout: summary beside the cards on wide containers, above them on narrow ones. */
.fgr-rv .fgr-rv__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}

@container fgr-rv (min-width: 860px) {
	.fgr-rv.fgr-rv--with-summary .fgr-rv__inner {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 32px;
	}
}

/* Summary */
.fgr-rv .fgr-rv__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: inherit;
}

.fgr-rv .fgr-rv__verdict {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.fgr-rv .fgr-rv__score {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
	opacity: .8;
}

.fgr-rv .fgr-rv__score strong {
	font-weight: 700;
}

.fgr-rv .fgr-rv__google {
	display: inline-block;
	margin-top: 4px;
	font: 700 26px/1 Arial, Helvetica, sans-serif;
	letter-spacing: -.5px;
	text-decoration: none !important;
	border: 0;
	box-shadow: none;
}

.fgr-rv a.fgr-rv__google:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Stars: masked bar, partial fill for averages such as 4.7 */
.fgr-rv .fgr-rv__stars {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc(5 * 1.1em);
	height: 1.1em;
	font-size: 17px;
	background: var(--fgr-rv-star-empty);
	-webkit-mask: var(--fgr-rv-star-mask) 0 0 / 1.1em 1.1em repeat-x;
	mask: var(--fgr-rv-star-mask) 0 0 / 1.1em 1.1em repeat-x;
}

.fgr-rv .fgr-rv__stars--lg {
	font-size: 28px;
}

.fgr-rv .fgr-rv__stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	background: var(--fgr-rv-star);
}

/* Cards area */
.fgr-rv .fgr-rv__main {
	container: fgr-rv-main / inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
	row-gap: 14px;
	min-width: 0;
}

.fgr-rv.has-nav .fgr-rv__main {
	grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.fgr-rv .fgr-rv__track {
	container: fgr-rv-track / inline-size;
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fgr-rv.has-nav .fgr-rv__track {
	grid-column: 2;
}

/* Cards per view follow the width of the card area itself (roughly 210px minimum per card). */
.fgr-rv .fgr-rv__card {
	--fgr-rv-c: var(--fgr-rv-cols, 3);
}

@container fgr-rv-track (max-width: 919px) {
	.fgr-rv .fgr-rv__card { --fgr-rv-c: min(var(--fgr-rv-cols, 3), 3); }
}

@container fgr-rv-track (max-width: 679px) {
	.fgr-rv .fgr-rv__card { --fgr-rv-c: min(var(--fgr-rv-cols, 3), 2); }
}

@container fgr-rv-track (max-width: 439px) {
	.fgr-rv .fgr-rv__card { --fgr-rv-c: 1; }
}

/* Carousel: native horizontal scroll with snapping, so touch swipe works without JavaScript. */
.fgr-rv.fgr-rv--carousel .fgr-rv__track {
	display: flex;
	align-items: stretch;
	gap: var(--fgr-rv-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 2px 8px;
}

.fgr-rv.fgr-rv--carousel .fgr-rv__track::-webkit-scrollbar {
	display: none;
}

.fgr-rv.fgr-rv--carousel .fgr-rv__track:focus-visible {
	outline: 2px solid var(--fgr-rv-star);
	outline-offset: 2px;
	border-radius: var(--fgr-rv-radius);
}

.fgr-rv.fgr-rv--carousel .fgr-rv__card {
	flex: 0 0 calc((100% - (var(--fgr-rv-c) - 1) * var(--fgr-rv-gap)) / var(--fgr-rv-c));
	scroll-snap-align: start;
}

.fgr-rv.fgr-rv--grid .fgr-rv__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(min(210px, 100%), calc((100% - (var(--fgr-rv-cols, 3) - 1) * var(--fgr-rv-gap)) / var(--fgr-rv-cols, 3))), 1fr));
	gap: var(--fgr-rv-gap);
}

/* Arrows */
.fgr-rv .fgr-rv__nav {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	grid-row: 1;
	width: 42px;
	height: 42px;
	color: var(--fgr-rv-text);
	background: var(--fgr-rv-card-bg);
	border: 1px solid var(--fgr-rv-border);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(20, 20, 20, .06);
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

.fgr-rv .fgr-rv__nav--prev { grid-column: 1; }
.fgr-rv .fgr-rv__nav--next { grid-column: 3; }

.fgr-rv .fgr-rv__nav:hover {
	box-shadow: 0 4px 14px rgba(20, 20, 20, .12);
	transform: translateY(-1px);
}

.fgr-rv .fgr-rv__nav:focus-visible {
	outline: 2px solid var(--fgr-rv-star);
	outline-offset: 2px;
}

.fgr-rv .fgr-rv__nav svg {
	display: block;
	width: 18px;
	height: 18px;
}

.fgr-rv:not(.has-nav) .fgr-rv__nav {
	display: none;
}

/* Phones: arrows below the cards so a card can use the full width. */
@container fgr-rv (max-width: 560px) {
	.fgr-rv.has-nav .fgr-rv__main {
		grid-template-columns: 1fr 1fr;
	}

	.fgr-rv.has-nav .fgr-rv__track {
		grid-column: 1 / -1;
	}

	.fgr-rv .fgr-rv__nav {
		grid-row: 2;
	}

	.fgr-rv .fgr-rv__nav--prev { grid-column: 1; justify-self: end; }
	.fgr-rv .fgr-rv__nav--next { grid-column: 2; justify-self: start; }
}

/* Card */
.fgr-rv .fgr-rv__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 22px 22px 18px;
	color: var(--fgr-rv-text);
	background: var(--fgr-rv-card-bg);
	border: 1px solid var(--fgr-rv-border);
	border-radius: var(--fgr-rv-radius);
	box-shadow: 0 1px 3px rgba(20, 20, 20, .04);
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}

.fgr-rv .fgr-rv__head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	margin: 0 0 14px;
}

.fgr-rv .fgr-rv__avatar {
	position: relative;
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	color: #fff;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.fgr-rv .fgr-rv__avatar img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fgr-rv .fgr-rv__who {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-width: 0;
}

.fgr-rv .fgr-rv__name {
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fgr-rv .fgr-rv__company {
	overflow: hidden;
	color: var(--fgr-rv-muted);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fgr-rv .fgr-rv__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: center;
}

.fgr-rv .fgr-rv__badge svg {
	display: block;
	width: 18px;
	height: 18px;
}

.fgr-rv .fgr-rv__text {
	display: -webkit-box;
	margin: 12px 0 0;
	padding: 0;
	overflow: hidden;
	color: inherit;
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--fgr-rv-lines);
	line-clamp: var(--fgr-rv-lines);
}

.fgr-rv .fgr-rv__card.is-expanded .fgr-rv__text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
}

.fgr-rv .fgr-rv__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 22px;
	margin-top: auto;
	padding-top: 12px;
}

.fgr-rv .fgr-rv__more {
	all: unset;
	color: var(--fgr-rv-muted);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

.fgr-rv .fgr-rv__more:hover {
	color: var(--fgr-rv-text);
	text-decoration: underline;
}

.fgr-rv .fgr-rv__more:focus-visible {
	outline: 2px solid var(--fgr-rv-star);
	outline-offset: 2px;
	border-radius: 2px;
}

.fgr-rv .fgr-rv__date {
	margin-left: auto;
	color: var(--fgr-rv-muted);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.fgr-rv.fgr-rv--carousel .fgr-rv__track { scroll-behavior: auto; }
	.fgr-rv .fgr-rv__nav { transition: none; }
}