/*
 * Technophobia SEO Tool: Google reviews.
 * Contrast is checked for both themes (text 4.5:1 or more, controls and focus 3:1 or more).
 * Override the custom properties to restyle; keep the contrast when you do.
 */
.tseo-gr {
	--tseo-gr-bg: #f1f3f4;
	--tseo-gr-card: #ffffff;
	--tseo-gr-text: #202124;
	--tseo-gr-muted: #4d5156;
	--tseo-gr-border: #757575;
	--tseo-gr-star: #fbbc04;
	--tseo-gr-star-off: #c4c7c5;
	--tseo-gr-link: #1a56c4;
	--tseo-gr-focus: #1a56c4;
	--tseo-gr-radius: 12px;
	color: var(--tseo-gr-text);
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
}
.tseo-gr--dark {
	--tseo-gr-bg: #202124;
	--tseo-gr-card: #2d2e31;
	--tseo-gr-text: #ffffff;
	--tseo-gr-muted: #d2d4d7;
	--tseo-gr-border: #9aa0a6;
	--tseo-gr-star-off: #5f6368;
	--tseo-gr-link: #9ec2ff;
	--tseo-gr-focus: #9ec2ff;
}
.tseo-gr *, .tseo-gr *::before, .tseo-gr *::after { box-sizing: inherit; }

/* Visually hidden, still read out. */
.tseo-gr-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tseo-gr a:focus-visible,
.tseo-gr button:focus-visible,
a.tseo-gr__badge:focus-visible {
	outline: 3px solid var(--tseo-gr-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--tseo-gr-bg);
}

/* Stars: grey row underneath, gold row clipped to the rating on top. */
.tseo-gr__stars {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
	white-space: nowrap;
}
.tseo-gr__stars svg { width: 1.25em; height: 1.25em; }
.tseo-gr__stars-bg svg { fill: var(--tseo-gr-star-off); }
.tseo-gr__stars-fg {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
}
.tseo-gr__stars-fg svg { fill: var(--tseo-gr-star); }

.tseo-gr__google { height: 1.5em; width: auto; vertical-align: middle; }

/* ---- Badge ---- */
.tseo-gr__badge,
.tseo-gr--badge.tseo-gr__badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .6em;
	padding: .75em 1.25em;
	background: var(--tseo-gr-bg);
	color: var(--tseo-gr-text);
	border: 1px solid transparent; /* shows in forced-colours mode */
	border-radius: var(--tseo-gr-radius);
	text-decoration: none;
	font-weight: 700;
	max-width: 100%;
}
a.tseo-gr__badge:hover .tseo-gr__count { text-decoration: underline; }
.tseo-gr__word { text-transform: uppercase; letter-spacing: .02em; }

/* Plain: no background, the surrounding text colour, for a coloured top bar or
   footer. The text contrast is then the site's own (white on navy, say), and the
   Google wordmark goes one colour, as Google allows on dark backgrounds. */
.tseo-gr--plain.tseo-gr__badge,
.tseo-gr--plain .tseo-gr__badge {
	background: transparent;
	color: inherit;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-size: .8em; /* of the bar's own text, so it sits on one line beside it */
	--tseo-gr-focus: currentColor;
}
.tseo-gr--plain .tseo-gr__google path { fill: currentColor; }
.tseo-gr--plain .tseo-gr__stars-bg svg { fill: currentColor; opacity: .35; }
a.tseo-gr--plain.tseo-gr__badge:focus-visible { box-shadow: none; }

/* ---- Floating badge ---- */
.tseo-gr--floating {
	position: fixed;
	bottom: 1rem;
	z-index: 9990;
	display: flex;
	align-items: flex-start;
	gap: .25rem;
	max-width: calc(100vw - 2rem);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.tseo-gr--floating[hidden], .tseo-gr__close[hidden] { display: none; }
.tseo-gr--bottom-left { left: 1rem; }
.tseo-gr--bottom-right { right: 1rem; flex-direction: row-reverse; }
.tseo-gr--floating .tseo-gr__badge { font-size: .9rem; }
.tseo-gr__close {
	min-width: 24px; min-height: 24px;   /* WCAG 2.5.8 target size */
	padding: 0 .4em;
	border: 1px solid var(--tseo-gr-border);
	border-radius: 50%;
	background: var(--tseo-gr-bg);
	color: var(--tseo-gr-text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
/* Small or zoomed screens: a fixed badge would cover content, so it sits in the page instead. */
@media (max-width: 480px), (max-height: 420px) {
	.tseo-gr--floating {
		position: static;
		margin: 1rem;
		filter: none;
	}
}

/* ---- Lists of reviews ---- */
.tseo-gr__heading { margin: 0 0 .5em; }
.tseo-gr__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .6em;
	margin: 0 0 1em;
	font-weight: 700;
}
.tseo-gr__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tseo-gr__item { margin: 0; padding: 0; }
.tseo-gr__review {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .75em;
	padding: 1.25em;
	background: var(--tseo-gr-card);
	border: 1px solid var(--tseo-gr-border);
	border-radius: var(--tseo-gr-radius);
}
.tseo-gr__text { margin: 0; padding: 0; border: 0; font-style: normal; }
.tseo-gr__text p { margin: 0; }
.tseo-gr__author {
	display: flex;
	align-items: center;
	gap: .75em;
	margin-top: auto;
	font-size: .95em;
}
.tseo-gr__photo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.tseo-gr__who { display: flex; flex-direction: column; gap: .15em; }
.tseo-gr__name { font-weight: 700; color: var(--tseo-gr-text); }
a.tseo-gr__name { color: var(--tseo-gr-link); text-decoration: underline; }
.tseo-gr__stars svg { width: 1.1em; height: 1.1em; }
.tseo-gr__summary .tseo-gr__stars svg,
.tseo-gr__badge .tseo-gr__stars svg { width: 1.4em; height: 1.4em; }
.tseo-gr__date { color: var(--tseo-gr-muted); font-size: .9em; }
.tseo-gr__more { margin: 1em 0 0; }
.tseo-gr__more a { color: var(--tseo-gr-link); }
.tseo-gr--dark { background: var(--tseo-gr-bg); padding: 1.25em; border-radius: var(--tseo-gr-radius); }

.tseo-gr__toggle {
	display: inline-block;
	margin-top: .5em;
	padding: .25em 0;
	min-height: 24px;
	background: none;
	border: 0;
	color: var(--tseo-gr-link);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* Grid */
.tseo-gr--grid .tseo-gr__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
}
/* List */
.tseo-gr--list .tseo-gr__item + .tseo-gr__item { margin-top: 1rem; }

/* Carousel: without the script it is simply the grid. */
.tseo-gr--carousel .tseo-gr__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
}
.tseo-gr--carousel.is-ready .tseo-gr__items { display: flex; gap: 1rem; }
.tseo-gr--carousel.is-ready .tseo-gr__item { flex: 0 0 calc((100% - (var(--tseo-gr-per, 1) - 1) * 1rem) / var(--tseo-gr-per, 1)); }
.tseo-gr--carousel.is-ready .tseo-gr__item[hidden] { display: none; }
.tseo-gr__controls {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
}
.tseo-gr__btn {
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 .75em;
	background: var(--tseo-gr-card);
	color: var(--tseo-gr-text);
	border: 1px solid var(--tseo-gr-border);
	border-radius: 999px;
	font: inherit;
	cursor: pointer;
}
.tseo-gr__btn:hover { background: var(--tseo-gr-bg); }
.tseo-gr__btn svg { width: 1.25em; height: 1.25em; fill: currentColor; }
.tseo-gr__pos { color: var(--tseo-gr-muted); margin-left: .25rem; }

@media (prefers-reduced-motion: no-preference) {
	.tseo-gr--carousel.is-ready .tseo-gr__item:not([hidden]) { animation: tseo-gr-in .25s ease-out; }
	@keyframes tseo-gr-in { from { opacity: 0; } to { opacity: 1; } }
}

@media (forced-colors: active) {
	.tseo-gr__stars-fg svg { fill: CanvasText; }
	.tseo-gr__stars-bg svg { fill: GrayText; }
	.tseo-gr__review, .tseo-gr__badge, .tseo-gr__btn { border-color: CanvasText; }
}

.tseo-gr-note { padding: .75em 1em; border-left: 4px solid #d63638; background: #fcf0f1; color: #1d2327; }