/****** Google Reviews - carousel design ******/
/* Colours come from the admin settings via CSS variables set on .gr in the template */

.gr {
	--gr-gap: 12px;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto 30px;
	padding: 24px 0px;
	background-color: var(--gr-bkg, #eeeeee);
	color: var(--gr-text, #222222);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
}
.gr *, .gr *::before, .gr *::after { box-sizing: border-box; }

/* ---------- header ---------- */
.gr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 26px;
}

.gr .gr-title {
	margin: 0;
	padding: 0;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--gr-title, #ee1d23);
}

.gr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.gr-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 12px;
	color: var(--gr-text, #222222);
}
.gr-score .gr-g { width: 18px; height: 18px; }
.gr-score-num { font-size: 13px; font-weight: 700; }
.gr-score .gr-stars { font-size: 17px; }

.gr-count a,
.gr-count strong {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gr-count a:hover { text-decoration-thickness: 2px; color: inherit; }

.gr .gr-write {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	background-color: var(--gr-accent, #ee1d23);
	color: var(--gr-btn-text, #ffffff);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	transition: filter .15s;
}
.gr .gr-write:hover,
.gr .gr-write:focus { color: var(--gr-btn-text, #ffffff); filter: brightness(.9); text-decoration: none; }

/* ---------- stars ---------- */
.gr-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}
.gr-stars .fa { margin-right: 1px; }
.gr-stars-base { color: #d6d6d6; }
.gr-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--gr-stars, #fbbc04);
}

/* ---------- slider ---------- */
.gr-slider { position: relative; }

.gr-track {
	display: flex;
	gap: var(--gr-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-track:focus-visible { outline: 2px solid var(--gr-accent, #ee1d23); outline-offset: 2px; }

.gr-card {
	flex: 0 0 calc((100% - 2 * var(--gr-gap)) / 3);
	display: flex;
	flex-direction: column;
	min-height: 250px;
	padding: 22px 20px 20px;
	background-color: var(--gr-card, #ffffff);
	scroll-snap-align: start;
}

.gr .gr-text {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--gr-text, #222222);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* author row sits at the bottom of every card */
.gr-author {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-right: 26px;
}

.gr-avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: #d0d0d0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.gr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-avatar span { color: #fff; font-weight: 700; font-size: 15px; }

.gr-meta { min-width: 0; }

.gr .gr-name {
	display: block;
	font-size: 14px;
	color: var(--gr-text, #222222);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gr .gr-name:hover { text-decoration: underline; }

.gr-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 3px;
}
.gr-meta-row .gr-stars { font-size: 13px; }
.gr-time { font-size: 13px; color: #8a8a8a; white-space: nowrap; }

.gr-author > .gr-g {
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 17px;
	height: 17px;
}

/* ---------- arrows ---------- */
.gr .gr-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--gr-accent, #ee1d23);
	color: #fff;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	transition: opacity .2s;
}
.gr-prev { left: 0; }
.gr-next { right: 0; }
.gr .gr-arrow:disabled { opacity: .45; cursor: default; }
.gr .gr-arrow:focus-visible { outline: 2px solid var(--gr-text, #222); outline-offset: 2px; }

/* ---------- dots ---------- */
.gr-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
}
.gr-dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #5f6670;
	cursor: pointer;
}
.gr-dots button.is-active { background: var(--gr-accent, #ee1d23); }

/* nothing to slide (e.g. only 1-3 reviews on desktop) */
.gr-static .gr-arrow,
.gr-static .gr-dots { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.gr-card { flex-basis: calc((100% - var(--gr-gap)) / 2); }
}

@media (max-width: 767px) {
	.gr { padding: 20px 0px; }
	.gr-head { display: block; margin-bottom: 20px; }
	.gr .gr-title { margin-bottom: 14px; }
	.gr-summary { display: block; }
	.gr-score { margin-bottom: 18px; }
	.gr .gr-write { height: 44px; padding: 0 18px; }

	/* one card + a peek of the next one */
	.gr-card { flex-basis: 86%; min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.gr-track { scroll-behavior: auto; }
}