/* ==========================================================================
   Vita Google Reviews

   Three presets set a small palette (--vr-accent, --vr-fg, --vr-muted …).
   Every element reads its own --vr-* variable first, falling back to the
   palette — the Elementor widget's Style tab sets those per element.
   ========================================================================== */

/* ---------- presets ---------- */

.vr {
	/* Dark & gold (default) */
	--vr-accent: #c49c5c;
	--vr-accent-bright: #d3ad6d;
	--vr-fg: #fcfcfc;
	--vr-muted: #a3a694;
	--vr-line: rgba(196, 156, 92, 0.18);
	--vr-on-accent: #101a08;
	--vr-ring: #101a08;
	--vr-tile-top: #1b2a10;
	--vr-tile-mid: #14200a;
	--vr-tile-btm: #0c1406;

	color: var(--vr-fg);
	font-weight: 300;
	line-height: 1.65;
}

.vr--preset-light {
	--vr-accent: #a8854a;
	--vr-accent-bright: #a8854a;
	--vr-fg: #1f1f1c;
	--vr-muted: #66655f;
	--vr-line: rgba(31, 31, 28, 0.12);
	--vr-on-accent: #ffffff;
	--vr-ring: #ffffff;
	--vr-card-bg-preset: #ffffff;
	--vr-card-shadow-preset: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Uses the site's own text colour and Elementor's global accent colour. */
.vr--preset-site {
	--vr-accent: var(--e-global-color-accent, currentColor);
	--vr-accent-bright: var(--e-global-color-accent, currentColor);
	--vr-fg: currentColor;
	--vr-muted: color-mix(in srgb, currentColor 70%, transparent);
	--vr-line: color-mix(in srgb, currentColor 16%, transparent);
	--vr-on-accent: #ffffff;
	--vr-ring: transparent;
	--vr-card-bg-preset: transparent;

	color: inherit;
	font-weight: inherit;
}

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

.vr [hidden] {
	display: none !important;
}

/* ---------- heading ---------- */

.vr .vr-rule {
	display: block;
	width: var(--vr-rule-width, min(400px, 78%));
	max-width: 100%;
	height: 24px;
	margin: 0 var(--vr-rule-mr, auto) 0 var(--vr-rule-ml, auto);
	color: var(--vr-rule-color, var(--vr-accent));
}

.vr .vr-rule--line {
	height: 0;
	border-top: var(--vr-rule-thickness, 1px) solid currentColor;
}

.vr .vr-rule--image {
	height: auto;
	object-fit: contain;
}

.vr .vr-head {
	padding: 26px 0 8px;
	text-align: var(--vr-head-align, center);
}

.vr .vr-title {
	margin: 0 0 22px;
	color: var(--vr-title-color, var(--vr-fg));
	font-size: clamp(24px, 3.4vw, 40px);
	font-weight: 300;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

.vr .vr-summary {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
}

.vr .vr-score,
.vr .vr-big-score {
	color: var(--vr-score-color, var(--vr-fg));
	font-size: 44px;
	font-weight: 200;
	line-height: 1;
}

.vr .vr-summary-meta {
	text-align: left;
}

.vr .vr-count {
	display: block;
	color: var(--vr-count-color, var(--vr-muted));
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* ---------- stars (part-filled for ratings like 4.7) ---------- */

.vr .vr-stars {
	--vr-s: var(--vr-star-size, 16px);

	position: relative;
	display: inline-flex;
	line-height: 0;
	vertical-align: middle;
	color: var(--vr-card-star-color, var(--vr-star-color, var(--vr-accent-bright)));
}

.vr .vr-head .vr-stars,
.vr .vr-photos--rating .vr-stars {
	--vr-s: var(--vr-star-size-lg, 20px);

	color: var(--vr-star-color, var(--vr-accent-bright));
}

.vr .vr-stars__base,
.vr .vr-stars__fill {
	display: inline-flex;
	gap: calc(var(--vr-s) * 0.18);
}

.vr .vr-stars__base {
	opacity: 0.25;
}

.vr .vr-stars__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.vr .vr-stars svg {
	flex: none;
	width: var(--vr-s);
	height: var(--vr-s);
	fill: currentColor;
	stroke: none;
}

/* Themes often restyle every svg (fill: currentColor) — keep our line icons as lines. */
.vr .vr-rule line,
.vr .vr-rule path,
.vr .vr-arrow svg,
.vr .vr-arrow svg path {
	fill: none;
	stroke: currentColor;
}

/* ---------- buttons ---------- */

.vr .vr-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--vr-head-justify, center);
	gap: 12px 26px;
	margin: 26px 0 44px;
}

.vr .vr-actions .vr-btn {
	display: inline-block;
	padding: 13px 34px;
	border: 1px solid var(--vr-btn-border, var(--vr-accent));
	border-radius: 0;
	background: var(--vr-btn-bg, transparent);
	color: var(--vr-btn-color, var(--vr-accent-bright));
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vr .vr-actions .vr-btn:hover,
.vr .vr-actions .vr-btn:focus-visible {
	border-color: var(--vr-btn-hover-border, var(--vr-accent));
	background: var(--vr-btn-hover-bg, var(--vr-accent));
	color: var(--vr-btn-hover-color, var(--vr-on-accent));
}

.vr .vr-actions .vr-link {
	color: var(--vr-link-color, var(--vr-muted));
	font-size: 13px;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vr .vr-actions .vr-link:hover,
.vr .vr-actions .vr-link:focus-visible {
	color: var(--vr-link-hover, var(--vr-accent-bright));
}

/* ---------- review card ---------- */

.vr .vr-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.vr .vr-card > .vr-stars {
	align-self: flex-start;
	margin-bottom: 14px;
}

.vr .vr-text {
	flex: 1;
	margin: 0 0 22px;
	color: var(--vr-text-color, var(--vr-muted));
	font-size: 15px;
}

.vr .vr-text.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--vr-lines, 5);
}

.vr .vr-card .vr-more,
.vr .vr-card .vr-more:hover,
.vr .vr-card .vr-more:focus {
	align-self: flex-start;
	min-height: 0;
	margin: -12px 0 18px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--vr-more-color, var(--vr-accent-bright));
	font: inherit;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: none;
	cursor: pointer;
}

.vr .vr-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--vr-line);
}

.vr .vr-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--vr-avatar-size, 40px);
	height: var(--vr-avatar-size, 40px);
	overflow: hidden;
	border: 1px solid var(--vr-avatar-ring, var(--vr-accent));
	border-radius: 50%;
	color: var(--vr-accent-bright);
	font-size: calc(var(--vr-avatar-size, 40px) * 0.38);
	font-weight: 400;
}

.vr .vr-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vr .vr-who {
	min-width: 0;
}

.vr .vr-name {
	display: block;
	color: var(--vr-name-color, var(--vr-fg));
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-decoration: none;
}

.vr a.vr-name:hover {
	text-decoration: underline;
}

.vr .vr-date {
	display: block;
	color: var(--vr-date-color, var(--vr-muted));
	font-size: 12px;
	letter-spacing: 0.06em;
}

.vr .vr-source {
	margin-left: auto;
	color: var(--vr-source-color, var(--vr-muted));
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---------- navigation ---------- */

.vr .vr-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

.vr .vr-nav .vr-arrow,
.vr .vr-nav .vr-arrow:hover,
.vr .vr-nav .vr-arrow:focus {
	display: grid;
	place-items: center;
	width: var(--vr-arrow-size, 42px);
	height: var(--vr-arrow-size, 42px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--vr-arrow-border, var(--vr-line));
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--vr-arrow-color, var(--vr-accent-bright));
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.vr .vr-nav .vr-arrow:hover,
.vr .vr-nav .vr-arrow:focus-visible {
	border-color: var(--vr-arrow-hover-border, var(--vr-accent));
}

.vr .vr-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* 22px tap target around an 8px dot */
.vr .vr-dots .vr-dot,
.vr .vr-dots .vr-dot:hover,
.vr .vr-dots .vr-dot:focus {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.vr .vr-dots .vr-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border: 1px solid var(--vr-dot-color, var(--vr-accent));
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.vr .vr-dots .vr-dot.is-active::before {
	background: var(--vr-dot-color, var(--vr-accent));
}

.vr .vr-powered {
	margin: 30px 0 0;
	color: var(--vr-powered-color, var(--vr-muted));
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	opacity: 0.8;
}

.vr .vr-powered a {
	color: inherit;
}

.vr .vr-sample-note {
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 1px dashed var(--vr-accent);
	color: var(--vr-muted);
	font-size: 12.5px;
	text-align: center;
}

/* ==========================================================================
   Carousel
   ========================================================================== */

.vr--carousel .vr-track {
	display: grid;
	grid-auto-columns: calc((100% - (var(--vr-per-view, 3) - 1) * var(--vr-gap, 26px)) / var(--vr-per-view, 3));
	grid-auto-flow: column;
	gap: var(--vr-gap, 26px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vr--carousel .vr-track::-webkit-scrollbar {
	display: none;
}

.vr.vr--carousel .vr-card {
	padding: 30px 28px 24px;
	border: 1px solid var(--vr-card-border, var(--vr-line));
	background: var(--vr-card-bg, var(--vr-card-bg-preset, radial-gradient(120% 95% at 50% 0%, var(--vr-tile-top) 0%, var(--vr-tile-mid) 58%, var(--vr-tile-btm) 100%)));
	box-shadow: var(--vr-card-shadow-preset, none);
	scroll-snap-align: start;
}

/* ==========================================================================
   Spotlight — one review at a time, with photos / rating beside it
   ========================================================================== */

.vr--spotlight .vr-body {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 24px 50px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 54px 64px 46px;
	border: 1px solid var(--vr-frame-border, var(--vr-accent));
	border-radius: 14px;
	background: var(--vr-frame-bg, transparent);
}

.vr--spotlight .vr-body--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
	text-align: center;
}

/* "Same height": all reviews share one grid cell, so the frame is as tall as
   the longest and the page never jumps. Each review and its name are centred
   together, so spare space is shared above and below rather than in between. */
.vr--spotlight .vr-track {
	position: relative;
	display: grid;
	/* Sideways swipes change the review; the page still scrolls up and down. */
	touch-action: pan-y;
}

.vr.vr--spotlight .vr-card {
	grid-area: 1 / 1;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(var(--vr-x, 0px));
	transition:
		opacity 0.45s ease,
		visibility 0.45s,
		transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* While swiping, the review follows the finger and fades as it goes. */
.vr.vr--spotlight .vr-card.is-active {
	transform: translateX(var(--vr-drag, var(--vr-x, 0px)));
}

.vr.vr--spotlight.is-dragging .vr-card.is-active {
	opacity: var(--vr-drag-fade, 1);
	transition: none;
}

/* The review leaving stays visible while it slides and fades out of the way. */
.vr.vr--spotlight .vr-card.is-leaving {
	visibility: visible;
	opacity: 0;
}


.vr--spotlight.is-dragging {
	user-select: none;
	-webkit-user-select: none;
}

.vr.vr--spotlight .vr-text {
	flex: none;
}

/* "Fit each review": only the current review takes up space; the height is
   animated by vita-reviews.js. */
.vr--spotlight.vr--adaptive .vr-track {
	overflow: hidden;
	transition: height 0.45s ease;
}

/* Measure each review at its natural height, not stretched to the current one. */
.vr.vr--spotlight.vr--adaptive .vr-card {
	align-self: start;
}

.vr.vr--spotlight.vr--adaptive .vr-card:not(.is-active) {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

.vr.vr--spotlight .vr-card.is-active {
	opacity: 1;
	visibility: visible;
}

.vr--spotlight .vr-text {
	margin-bottom: 24px;
	color: var(--vr-text-color, var(--vr-fg));
	font-size: 17px;
}

.vr--spotlight .vr-author {
	padding-top: 0;
	border-top: 0;
}

.vr--spotlight .vr-nav {
	grid-column: 2;
	justify-content: flex-start;
	margin-top: 4px;
}

.vr--spotlight .vr-body--single .vr-card {
	align-items: center;
}

.vr--spotlight .vr-body--single .vr-card > .vr-stars {
	align-self: center;
}

.vr--spotlight .vr-body--single .vr-author,
.vr--spotlight .vr-body--single .vr-nav {
	grid-column: 1;
	justify-content: center;
}

.vr--spotlight .vr-body--single .vr-source {
	margin-left: 6px;
}

/* ---------- photos column ---------- */

.vr .vr-photos {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vr .vr-photo {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--vr-photo-size, 190px);
	height: var(--vr-photo-size, 190px);
	overflow: hidden;
	border: var(--vr-photo-ring-width, 5px) solid var(--vr-photo-ring, var(--vr-ring));
	border-radius: 50%;
	background: radial-gradient(120% 95% at 50% 20%, var(--vr-tile-top), var(--vr-tile-btm));
}

.vr .vr-photo + .vr-photo {
	margin-left: calc(var(--vr-photo-size, 190px) * var(--vr-photo-overlap, 0.23) * -1);
}

.vr .vr-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.vr .vr-photo--empty {
	color: var(--vr-muted);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

/* Reviewer's photo — one per review, cross-faded with the review. */
.vr .vr-photos--faces {
	display: grid;
	justify-items: center;
}

.vr .vr-face {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.vr .vr-face.is-active {
	opacity: 1;
}

.vr .vr-initial {
	color: var(--vr-accent-bright);
	font-size: calc(var(--vr-photo-size, 190px) * 0.36);
	font-weight: 300;
}

/* Rating badge */
.vr .vr-photos--rating {
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.vr .vr-photos--rating .vr-big-score {
	font-size: 76px;
}

/* ==========================================================================
   Tablet & phone (Elementor's default breakpoints; the widget's responsive
   controls override these)
   ========================================================================== */

@media (max-width: 1024px) {

	.vr {
		--vr-per-view: 2;
	}

	.vr--spotlight .vr-body {
		padding: 44px 40px 38px;
	}
}

@media (max-width: 767px) {

	.vr {
		--vr-per-view: 1;
	}

	.vr .vr-actions {
		flex-direction: column;
	}

	.vr .vr-score {
		font-size: 38px;
	}

	.vr.vr--carousel .vr-card {
		padding: 26px 22px 20px;
	}

	/* Spotlight stacks: small photos on top, the review leads. */
	.vr--spotlight .vr-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 30px 22px 24px;
		text-align: center;
	}

	.vr--spotlight .vr-card {
		align-items: center;
	}

	.vr--spotlight .vr-card > .vr-stars {
		align-self: center;
	}

	.vr--spotlight .vr-text {
		margin-bottom: 18px;
		font-size: 15.5px;
	}

	.vr--spotlight .vr-author,
	.vr--spotlight .vr-nav {
		grid-column: 1;
		justify-content: center;
	}

	.vr--spotlight .vr-source {
		margin-left: 6px;
	}

	.vr .vr-photo--empty {
		font-size: 0;
	}

	.vr .vr-photos--rating .vr-big-score {
		font-size: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.vr *,
	.vr *::before,
	.vr *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}