/**
 * Desk9 Reviews for Google · frontend styles.
 *
 * Design model:
 *   .rdgfg-scheme-*  sets the palette (light / dark / auto)
 *   .rdgfg-preset-*  sets the card look (inherit / clean / soft / outline / dark)
 *   inline CSS vars  carry geometry, typography and — for the custom preset —
 *                    every color.
 *
 * Everything is scoped to .rdgfg-rating-display, inherits the theme font and
 * works on any background. No external assets, no icon fonts.
 */

/* -- Palette: light (default) --------------------------------------------- */
.rdgfg-rating-display {
	--rdgfg-background: transparent;
	--rdgfg-text-color: #1d1f26;
	--rdgfg-muted-color: #5f6572;
	--rdgfg-surface: #fff;
	--rdgfg-line-soft: #e3e5e9;
	--rdgfg-line-strong: #2a2e37;
	--rdgfg-avatar-bg: #e7e9ee;
	--rdgfg-avatar-text: #3c4250;
	--rdgfg-star-color: #fbbc04;
	--rdgfg-star-empty-color: #d7d9de;
	--rdgfg-focus-color: #2f6fdd;
	--rdgfg-accent-color: #4c9a5f;
	--rdgfg-btn-bg: #1d1f26;
	--rdgfg-btn-text: #fff;
	--rdgfg-btn-bg-hover: #353a47;
	--rdgfg-btn-text-hover: #fff;
	--rdgfg-btn-line-color: transparent;

	/* Geometry fallbacks — the plugin always sends real values. */
	--rdgfg-card-background: var(--rdgfg-surface);
	--rdgfg-line-color: var(--rdgfg-line-soft);
	--rdgfg-line-width: 1px;
	--rdgfg-radius: 10px;
	--rdgfg-card-padding: 20px;
	--rdgfg-gap: 20px;
	--rdgfg-shadow: none;
	--rdgfg-shadow-hover: 0 4px 14px rgba(20, 23, 30, 0.1);
	--rdgfg-star-size: 16px;
	--rdgfg-star-gap: 2px;
	--rdgfg-value-size: 32px;
	--rdgfg-value-size-min: 24px;
	--rdgfg-text-size: 14px;
	--rdgfg-author-size: 14px;
	--rdgfg-meta-size: 12px;
	--rdgfg-line-height: 1.55;
	--rdgfg-author-weight: 600;
	--rdgfg-value-weight: 700;
	--rdgfg-avatar-size: 36px;
	--rdgfg-avatar-radius: 50%;
	--rdgfg-btn-radius: 8px;
	--rdgfg-btn-pad-x: 20px;
	--rdgfg-btn-pad-y: 11px;
	--rdgfg-btn-line-width: 1px;
	--rdgfg-text-lines: 3;
	--rdgfg-quote-size: 19px;
	--rdgfg-ticker-speed: 40s;
	--rdgfg-float-offset: 16px;
	--rdgfg-widget-lines: 2;
	--rdgfg-halo-radius: 12px;
	--rdgfg-transition: 400ms;
	--rdgfg-columns: 3;

	box-sizing: border-box;
	color: var(--rdgfg-text-color);
	background: var(--rdgfg-background);
	font-family: inherit;
	line-height: var(--rdgfg-line-height);

	/* WordPress prints `html :where([style*="border-width"]){border-style:solid}`
	   and the same for border-color. Those selectors match on the raw style
	   attribute, so any CSS custom property whose NAME contains "border-width"
	   or "border-color" would draw a full frame around the plugin. The plugin's
	   variables are therefore named --rdgfg-line-width / --rdgfg-line-color, and
	   this reset keeps the root borderless even if a theme tries something
	   similar. */
	border: 0;
}

.rdgfg-rating-display *,
.rdgfg-rating-display *::before,
.rdgfg-rating-display *::after {
	box-sizing: inherit;
}

/* -- Palette: dark --------------------------------------------------------- */
.rdgfg-scheme-dark {
	--rdgfg-text-color: #eef0f4;
	--rdgfg-muted-color: #a6adba;
	--rdgfg-surface: #1c202a;
	--rdgfg-line-soft: #333a4a;
	--rdgfg-line-strong: #c6cbd6;
	--rdgfg-avatar-bg: #2b3140;
	--rdgfg-avatar-text: #dfe3ec;
	--rdgfg-star-empty-color: #3d4453;
	--rdgfg-focus-color: #8ab4ff;
	--rdgfg-btn-bg: #eef0f4;
	--rdgfg-btn-text: #14161c;
	--rdgfg-btn-bg-hover: #fff;
	--rdgfg-btn-text-hover: #0e1015;
}

@media (prefers-color-scheme: dark) {

	.rdgfg-scheme-auto {
		--rdgfg-text-color: #eef0f4;
		--rdgfg-muted-color: #a6adba;
		--rdgfg-surface: #1c202a;
		--rdgfg-line-soft: #333a4a;
		--rdgfg-line-strong: #c6cbd6;
		--rdgfg-avatar-bg: #2b3140;
		--rdgfg-avatar-text: #dfe3ec;
		--rdgfg-star-empty-color: #3d4453;
		--rdgfg-focus-color: #8ab4ff;
		--rdgfg-btn-bg: #eef0f4;
		--rdgfg-btn-text: #14161c;
		--rdgfg-btn-bg-hover: #fff;
		--rdgfg-btn-text-hover: #0e1015;
	}
}

/* -- Presets --------------------------------------------------------------- */

/* Inherit theme: no card at all, the surrounding design carries the look. */
.rdgfg-preset-inherit {
	--rdgfg-card-background: transparent;
	--rdgfg-line-color: var(--rdgfg-line-soft);
	--rdgfg-line-width: 0;
	--rdgfg-radius: 6px;
	--rdgfg-shadow: none;
	--rdgfg-shadow-hover: none;
	--rdgfg-btn-bg: transparent;
	--rdgfg-btn-text: var(--rdgfg-text-color);
	--rdgfg-btn-line-color: currentcolor;
	--rdgfg-btn-bg-hover: rgba(0, 0, 0, 0.06);
	--rdgfg-btn-text-hover: var(--rdgfg-text-color);
}

.rdgfg-preset-inherit.rdgfg-scheme-dark {
	--rdgfg-btn-bg-hover: rgba(255, 255, 255, 0.09);
}

.rdgfg-preset-clean {
	--rdgfg-card-background: var(--rdgfg-surface);
	--rdgfg-line-color: var(--rdgfg-line-soft);
	--rdgfg-shadow: none;
	--rdgfg-shadow-hover: 0 4px 14px rgba(20, 23, 30, 0.1);
}

.rdgfg-preset-clean.rdgfg-scheme-dark {
	--rdgfg-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.rdgfg-preset-soft {
	--rdgfg-card-background: var(--rdgfg-surface);
	--rdgfg-line-color: transparent;
	--rdgfg-line-width: 0;
	--rdgfg-shadow: 0 8px 24px rgba(20, 23, 30, 0.09);
	--rdgfg-shadow-hover: 0 14px 32px rgba(20, 23, 30, 0.14);
}

.rdgfg-preset-soft.rdgfg-scheme-dark {
	--rdgfg-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	--rdgfg-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.6);
}

.rdgfg-preset-outline {
	--rdgfg-card-background: transparent;
	--rdgfg-line-color: var(--rdgfg-line-strong);
	--rdgfg-shadow: none;
	--rdgfg-shadow-hover: none;
}

/* Dark preset: always dark, whatever the visitor's system says. */
.rdgfg-preset-dark {
	--rdgfg-text-color: #f0f2f7;
	--rdgfg-muted-color: #a4abbb;
	--rdgfg-surface: #171a22;
	--rdgfg-card-background: #171a22;
	--rdgfg-line-soft: #2c3242;
	--rdgfg-line-color: #2c3242;
	--rdgfg-avatar-bg: #2b3140;
	--rdgfg-avatar-text: #dfe3ec;
	--rdgfg-star-empty-color: #3d4453;
	--rdgfg-focus-color: #8ab4ff;
	--rdgfg-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	--rdgfg-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.5);
	--rdgfg-btn-bg: #f0f2f7;
	--rdgfg-btn-text: #14161c;
	--rdgfg-btn-bg-hover: #fff;
	--rdgfg-btn-text-hover: #0e1015;
}

/* -- Shadow steps (custom preset only) ------------------------------------- */
.rdgfg-shadow-none { --rdgfg-shadow: none; }

.rdgfg-shadow-subtle { --rdgfg-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

.rdgfg-shadow-soft { --rdgfg-shadow: 0 8px 24px rgba(20, 23, 30, 0.09); }

.rdgfg-shadow-strong { --rdgfg-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }

.rdgfg-shadowh-none { --rdgfg-shadow-hover: none; }

.rdgfg-shadowh-subtle { --rdgfg-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.06); }

.rdgfg-shadowh-soft { --rdgfg-shadow-hover: 0 14px 32px rgba(20, 23, 30, 0.14); }

.rdgfg-shadowh-strong { --rdgfg-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.28); }

/*
 * Floating placement. Any layout listed in Renderer::FLOAT_POSITIONS can be
 * pinned to the screen instead of sitting in the page flow: the edge bars span
 * the full width at the top or bottom, the compact ones sit in a corner.
 */
.rdgfg-float {
	position: fixed;
	z-index: 9998;
	max-width: calc(100vw - 2 * var(--rdgfg-float-offset));
}

/* Full-width edge bars. */
.rdgfg-float--top,
.rdgfg-float--bottom {
	inset-inline: 0;
	width: 100%;
	max-width: none;
}

.rdgfg-float--top { top: 0; }

.rdgfg-float--bottom { bottom: 0; }

.rdgfg-float--top > .rdgfg-bar,
.rdgfg-float--top > .rdgfg-notice,
.rdgfg-float--bottom > .rdgfg-bar,
.rdgfg-float--bottom > .rdgfg-notice {
	border-radius: 0;
	border-inline: 0;
}

/* Corners. */
.rdgfg-float--top-left,
.rdgfg-float--top-center,
.rdgfg-float--top-right { top: var(--rdgfg-float-offset); }

.rdgfg-float--bottom-left,
.rdgfg-float--bottom-center,
.rdgfg-float--bottom-right { bottom: var(--rdgfg-float-offset); }

.rdgfg-float--top-left,
.rdgfg-float--bottom-left { inset-inline-start: var(--rdgfg-float-offset); }

.rdgfg-float--top-right,
.rdgfg-float--bottom-right { inset-inline-end: var(--rdgfg-float-offset); }

.rdgfg-float--top-center,
.rdgfg-float--bottom-center {
	left: 50%;
	transform: translateX(-50%);
}

/* The admin bar sits on top of a top-pinned element for logged-in users. */
body.admin-bar .rdgfg-float--top { top: 32px; }

body.admin-bar .rdgfg-float--top-left,
body.admin-bar .rdgfg-float--top-center,
body.admin-bar .rdgfg-float--top-right { top: calc(32px + var(--rdgfg-float-offset)); }

@media screen and (max-width: 782px) {

	body.admin-bar .rdgfg-float--top { top: 46px; }

	body.admin-bar .rdgfg-float--top-left,
	body.admin-bar .rdgfg-float--top-center,
	body.admin-bar .rdgfg-float--top-right { top: calc(46px + var(--rdgfg-float-offset)); }
}

/* Dismiss button, shown only on a floating element. */

/*
 * The button sits on the element's own surface, so it must not carry a surface
 * of its own: a white circle with a shadow on a white chip reads as a separate
 * blob hanging off the rounded edge. Plain glyph, centred on the row.
 */
.rdgfg-dismiss {
	position: absolute;
	top: 50%;
	inset-inline-end: 6px;
	transform: translateY(-50%);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--rdgfg-muted-color);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.rdgfg-dismiss:hover,
.rdgfg-dismiss:focus-visible {
	background: rgba(127, 127, 127, 0.16);
	color: var(--rdgfg-text-color);
}

/* Full-width bars have room to breathe at the end of the row. */
.rdgfg-float--top > .rdgfg-dismiss,
.rdgfg-float--bottom > .rdgfg-dismiss { inset-inline-end: 10px; }

/* A badge is a tall card, not a row: pin the button to its top corner. */
.rdgfg-float:has(> .rdgfg-badge) > .rdgfg-dismiss {
	top: 6px;
	transform: none;
}

/* Keep the close button clear of the content it sits over. */
.rdgfg-float:has(> .rdgfg-dismiss) > .rdgfg-chip { padding-inline-end: 34px; }

.rdgfg-float:has(> .rdgfg-dismiss) > .rdgfg-badge { padding-top: 28px; }

/*
 * The pill's own toggle fills the whole root, so the button would sit on the
 * review count. Reserve room inside the toggle and lift the button clear of
 * the rounded edge.
 */
.rdgfg-float:has(> .rdgfg-dismiss) .rdgfg-pill__toggle { padding-inline-end: 34px; }

.rdgfg-float:has(> .rdgfg-pill) > .rdgfg-dismiss {
	top: auto;
	bottom: 6px;
	transform: none;
}

.rdgfg-float:has(> .rdgfg-dismiss) > .rdgfg-bar,
.rdgfg-float:has(> .rdgfg-dismiss) > .rdgfg-notice { padding-inline-end: 44px; }

/* A dismissed element is gone for the rest of the session. */
.rdgfg-float[hidden] { display: none; }

/* -- Alignment ------------------------------------------------------------- */
.rdgfg-align-center { text-align: center; }

.rdgfg-align-right { text-align: right; }

.rdgfg-rating-display[style*="--rdgfg-max-content-width"] > * {
	max-width: var(--rdgfg-max-content-width);
	margin-left: auto;
	margin-right: auto;
}

/* -- Primitives: stars, value, count, attribution -------------------------- */
.rdgfg-stars {
	display: inline-flex;
	align-items: center;
	gap: var(--rdgfg-star-gap);
	font-size: var(--rdgfg-star-size);
	line-height: 1;
	flex: none;
}

.rdgfg-star {
	display: block;
	width: 1em;
	height: 1em;
}

.rdgfg-textstars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	vertical-align: -0.05em;
}

.rdgfg-textstars__empty {
	color: var(--rdgfg-star-empty-color);
	letter-spacing: 0.05em;
}

/* The filled row sits on top of the empty one. Excluding it from selection
   means copying the sentence yields "4.7 ★★★★★ 128 reviews", not ten stars. */
.rdgfg-textstars__full {
	user-select: none;
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	overflow: hidden;
	width: var(--rdgfg-fill, 100%);
	color: var(--rdgfg-star-color);
	letter-spacing: 0.05em;
}

.rdgfg-value {
	font-size: var(--rdgfg-value-size);
	font-weight: var(--rdgfg-value-weight);
	line-height: 1;
}

.rdgfg-count,
.rdgfg-date,
.rdgfg-maps-link {
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
}

.rdgfg-business-name {
	font-size: var(--rdgfg-author-size);
	font-weight: var(--rdgfg-author-weight);
}

.rdgfg-author {
	font-size: var(--rdgfg-author-size);
	font-weight: var(--rdgfg-author-weight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rdgfg-attribution {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
}

.rdgfg-attribution__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rdgfg-star-color);
	flex: none;
}

.rdgfg-summary-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.rdgfg-summary-line .rdgfg-value {
	font-size: clamp(var(--rdgfg-value-size-min), 4vw, var(--rdgfg-value-size));
}

/* -- Focus ----------------------------------------------------------------- */
.rdgfg-rating-display a:focus-visible,
.rdgfg-rating-display button:focus-visible,
.rdgfg-rating-display [tabindex]:focus-visible {
	outline: 2px solid var(--rdgfg-focus-color);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -- Buttons --------------------------------------------------------------- */
.rdgfg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--rdgfg-btn-pad-y) var(--rdgfg-btn-pad-x);
	border-radius: var(--rdgfg-btn-radius);
	border: var(--rdgfg-btn-line-width) solid var(--rdgfg-btn-line-color);
	background: var(--rdgfg-btn-bg);
	color: var(--rdgfg-btn-text);
	font-family: inherit;
	font-size: var(--rdgfg-author-size);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.rdgfg-btn:hover,
.rdgfg-btn:focus-visible {
	background: var(--rdgfg-btn-bg-hover);
	color: var(--rdgfg-btn-text-hover);
}

.rdgfg-btn--outline {
	background: transparent;
	color: var(--rdgfg-text-color);
	border-color: currentcolor;
}

.rdgfg-btn--outline:hover,
.rdgfg-btn--outline:focus-visible {
	background: var(--rdgfg-btn-bg);
	color: var(--rdgfg-btn-text);
}

.rdgfg-btn--link {
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rdgfg-btn--link:hover,
.rdgfg-btn--link:focus-visible {
	background: none;
	color: inherit;
	opacity: 0.75;
}

/* "Theme button": inherit as much as possible from the active theme. */
.rdgfg-btn--theme {
	background: none;
	border: none;
	color: inherit;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -- Cards ----------------------------------------------------------------- */
.rdgfg-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--rdgfg-card-padding);
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	border-radius: var(--rdgfg-radius);
	box-shadow: var(--rdgfg-shadow);
	transition: box-shadow var(--rdgfg-transition, 400ms) ease;
}

.rdgfg-card:hover {
	box-shadow: var(--rdgfg-shadow-hover);
}

.rdgfg-card--compact {
	gap: 8px;
	padding: calc(var(--rdgfg-card-padding) * 0.8);
}

.rdgfg-card__no-text {
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
	font-style: italic;
}

.rdgfg-card__attribution {
	margin-top: auto;
	padding-top: 2px;
}

.rdgfg-reviewer {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.rdgfg-reviewer__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rdgfg-avatar {
	width: var(--rdgfg-avatar-size);
	height: var(--rdgfg-avatar-size);
	border-radius: var(--rdgfg-avatar-radius);
	flex: none;
	object-fit: cover;
}

.rdgfg-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rdgfg-avatar-bg);
	color: var(--rdgfg-avatar-text);
	font-size: calc(var(--rdgfg-avatar-size) * 0.36);
	font-weight: 600;
	line-height: 1;
}

/* Review text + read more (no internal scrollbar). */
.rdgfg-review-text {
	font-size: var(--rdgfg-text-size);
	line-height: var(--rdgfg-line-height);
}

.rdgfg-review-text p {
	margin: 0;
}

/* The clamp is set server-side (is-clamped) so text never renders full height
   and then collapses when the script loads. The script only removes it again
   when the text does not actually overflow. */
.rdgfg-review-text.is-clamped p {
	display: -webkit-box;
	-webkit-line-clamp: var(--rdgfg-text-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rdgfg-readmore-toggle {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 2px 0;
	font-family: inherit;
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	color: var(--rdgfg-text-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* -- Layout: inline text rating -------------------------------------------- */
.rdgfg-rating-display.rdgfg-layout-inline {
	display: inline;
	color: inherit;
	background: none;
	line-height: inherit;
}

.rdgfg-inline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	vertical-align: baseline;
}

.rdgfg-inline__value {
	font-weight: 650;
}

.rdgfg-inline__count,
.rdgfg-inline__link {
	color: var(--rdgfg-muted-color);
	font-size: inherit;
}

.rdgfg-layout-inline .rdgfg-stars,
.rdgfg-layout-inline .rdgfg-star--single {
	font-size: 1em;
}

.rdgfg-layout-inline .rdgfg-btn {
	margin-inline-start: 6px;
}

/* Density steps — the inline rating replaces five separate layouts. */
.rdgfg-layout-inline.rdgfg-size-xl { font-size: 1.5em; }

.rdgfg-layout-inline.rdgfg-size-l { font-size: 1.15em; }

.rdgfg-layout-inline.rdgfg-size-s { font-size: 0.9em; }

.rdgfg-layout-inline.rdgfg-size-xs { font-size: 0.85em; }

.rdgfg-layout-inline.rdgfg-size-xs .rdgfg-inline { gap: 4px; }

/* -- Layout: badge --------------------------------------------------------- */
.rdgfg-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 32px;
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	border-radius: var(--rdgfg-radius);
	box-shadow: var(--rdgfg-shadow);
	transition: box-shadow 0.2s ease;
	text-align: center;
}

.rdgfg-badge:hover {
	box-shadow: var(--rdgfg-shadow-hover);
}

.rdgfg-badge__value {
	font-size: var(--rdgfg-value-size);
	font-weight: var(--rdgfg-value-weight);
	line-height: 1;
}

.rdgfg-variant-horizontal .rdgfg-badge {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	text-align: start;
	flex-wrap: wrap;
}

/* -- Layout: rating bar ---------------------------------------------------- */
.rdgfg-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 16px 24px;
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	border-radius: var(--rdgfg-radius);
	box-shadow: var(--rdgfg-shadow);
}

.rdgfg-bar__identity {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rdgfg-bar__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-inline-start: auto;
}

.rdgfg-bar__rating .rdgfg-value {
	font-size: clamp(var(--rdgfg-value-size-min), 3vw, var(--rdgfg-value-size));
}

/* -- Layout: notification bar ---------------------------------------------- */
.rdgfg-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 9px 20px;
	background: var(--rdgfg-card-background);
	border-bottom: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	font-size: var(--rdgfg-meta-size);
}

.rdgfg-notice .rdgfg-value {
	font-size: calc(var(--rdgfg-author-size) + 1px);
	font-weight: 650;
}

.rdgfg-notice__link {
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	color: inherit;
}

/* -- Layout: trust strip --------------------------------------------------- */
.rdgfg-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.rdgfg-stack {
	display: inline-flex;
	flex: none;
}

.rdgfg-stack__item {
	width: var(--rdgfg-avatar-size);
	height: var(--rdgfg-avatar-size);
	border-radius: 50%;
	background: var(--rdgfg-avatar-bg);
	color: var(--rdgfg-avatar-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--rdgfg-avatar-size) * 0.32);
	font-weight: 600;
	border: 2px solid var(--rdgfg-card-background);
}

.rdgfg-stack__item + .rdgfg-stack__item {
	margin-inline-start: -10px;
}

.rdgfg-preset-inherit .rdgfg-stack__item,
.rdgfg-preset-outline .rdgfg-stack__item {
	border-color: transparent;
}

/* -- Layout: divider ------------------------------------------------------- */
.rdgfg-divider {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rdgfg-divider__rule {
	flex: 1;
	height: 1px;
	background: var(--rdgfg-line-soft);
}

.rdgfg-divider .rdgfg-value {
	font-size: var(--rdgfg-author-size);
	font-weight: 650;
}

/* -- Layout: freshly reviewed chip ----------------------------------------- */
.rdgfg-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 16px;
	border-radius: 99px;
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	box-shadow: var(--rdgfg-shadow);
	font-size: var(--rdgfg-meta-size);
}

.rdgfg-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rdgfg-accent-color);
	flex: none;
}

/* -- Layout: image halo ---------------------------------------------------- */
.rdgfg-halo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--rdgfg-halo-radius);
	line-height: 0;
}

.rdgfg-halo__image {
	display: block;
	width: 100%;
	height: auto;
}

.rdgfg-halo__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	background: var(--rdgfg-avatar-bg);
	color: var(--rdgfg-muted-color);
	font-size: var(--rdgfg-meta-size);
	line-height: 1.5;
	text-align: center;
}

.rdgfg-halo__pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 99px;
	background: rgba(17, 19, 24, 0.82);
	color: #fff;
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	line-height: 1.2;
}

.rdgfg-halo__pill .rdgfg-attribution,
.rdgfg-halo__count {
	color: rgba(255, 255, 255, 0.78);
	font-weight: 400;
}

.rdgfg-halo--bottom-left .rdgfg-halo__pill { inset-inline-start: 12px; bottom: 12px; }

.rdgfg-halo--bottom-right .rdgfg-halo__pill { inset-inline-end: 12px; bottom: 12px; }

.rdgfg-halo--top-left .rdgfg-halo__pill { inset-inline-start: 12px; top: 12px; }

.rdgfg-halo--top-right .rdgfg-halo__pill { inset-inline-end: 12px; top: 12px; }

/* -- Layout: grid ---------------------------------------------------------- */
.rdgfg-grid {
	display: grid;
	grid-template-columns: repeat(var(--rdgfg-columns, 3), minmax(0, 1fr));
	gap: var(--rdgfg-gap);
	align-items: start;
}

.rdgfg-equal-height .rdgfg-grid { align-items: stretch; }

.rdgfg-equal-height .rdgfg-card { height: 100%; }

/* A single review does not stretch across the full width. */
.rdgfg-grid[style*="--rdgfg-columns:1"] {
	max-width: 460px;
	margin-inline: auto;
}

.rdgfg-cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--rdgfg-card-padding);
	border: 2px dashed var(--rdgfg-line-soft);
	border-radius: var(--rdgfg-radius);
	text-align: center;
}

.rdgfg-cta-card__title {
	font-size: var(--rdgfg-author-size);
	font-weight: 650;
}

.rdgfg-cta-card__link {
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	color: inherit;
}

/* -- Layout: carousel ------------------------------------------------------ */
.rdgfg-carousel {
	display: flex;
	flex-direction: column;
	gap: var(--rdgfg-gap);
	align-items: center;
}

.rdgfg-carousel__viewport {
	width: 100%;
	overflow: hidden;

	/* Server-side default; the script overrides it per viewport width. Without
	   JavaScript the slider still shows the configured number of cards. */
	--rdgfg-visible: var(--rdgfg-cards-desktop, 3);
}

.rdgfg-showcase .rdgfg-carousel__viewport {
	--rdgfg-visible: 2;
}

.rdgfg-carousel__track {
	display: flex;
	gap: var(--rdgfg-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px;
}

.rdgfg-carousel__track::-webkit-scrollbar { display: none; }

.rdgfg-carousel__slide {
	flex: 0 0 calc((100% - (var(--rdgfg-visible, 1) - 1) * var(--rdgfg-gap)) / var(--rdgfg-visible, 1));
	scroll-snap-align: start;
	display: flex;
}

.rdgfg-carousel__slide > * {
	width: 100%;
}

.rdgfg-carousel__controls {
	display: flex;
	align-items: center;
	gap: 18px;
}

.rdgfg-carousel__arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--rdgfg-card-background);
	border: 1px solid var(--rdgfg-line-soft);
	color: var(--rdgfg-text-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.rdgfg-carousel__arrow:hover { box-shadow: var(--rdgfg-shadow-hover); }

.rdgfg-carousel__arrow[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }

.rdgfg-carousel__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rdgfg-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rdgfg-star-empty-color);
	cursor: pointer;
}

.rdgfg-carousel__dot.is-active { background: var(--rdgfg-text-color); }

/* -- Layout: showcase ------------------------------------------------------ */
.rdgfg-showcase {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 2fr;
	gap: calc(var(--rdgfg-gap) * 1.5);
	align-items: start;
}

.rdgfg-showcase__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rdgfg-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rdgfg-summary--center {
	align-items: center;
	text-align: center;
}

.rdgfg-summary__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.rdgfg-summary--center .rdgfg-summary__rating { justify-content: center; }

.rdgfg-summary .rdgfg-value {
	font-size: clamp(var(--rdgfg-value-size-min), 4vw, var(--rdgfg-value-size));
}

.rdgfg-summary .rdgfg-btn { align-self: flex-start; }

.rdgfg-summary--center .rdgfg-btn { align-self: center; }

/* -- Layout: quote spotlight ----------------------------------------------- */
.rdgfg-quote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.rdgfg-quote--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.rdgfg-quote__text {
	margin: 0;
	border: none;
	padding: 0;
	quotes: none;
}

.rdgfg-quote__text p {
	margin: 0;
	font-size: var(--rdgfg-quote-size);
	font-weight: 500;
	line-height: 1.5;
}

.rdgfg-quote__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
}

.rdgfg-quote__meta .rdgfg-author {
	font-style: normal;
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
}

.rdgfg-quote--center .rdgfg-quote__meta { justify-content: center; }

/* -- Layout: card deck ----------------------------------------------------- */
.rdgfg-deck {
	position: relative;
	max-width: 420px;
}

.rdgfg-deck__stack { position: relative; }

/* Without JavaScript the deck is a plain, readable list of cards. */
.rdgfg-deck__item + .rdgfg-deck__item { margin-top: var(--rdgfg-gap); }

.rdgfg-deck__next {
	margin-top: 12px;
	background: none;
	border: none;
	padding: 2px 0;
	font-family: inherit;
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	color: var(--rdgfg-text-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/*
 * Stacked state — switched on only once the script takes over. The front card stays in the flow and therefore gives the stack
 * its height — a fixed height would clip long reviews. The cards behind it are
 * absolutely positioned and stretched to the same box, then scaled down and
 * pushed up so they peek out above. The room for that peek is a margin (not
 * padding), so it stays outside the box the back cards are stretched into.
 */
.rdgfg-deck.is-stacked .rdgfg-deck__stack {
	margin-top: calc(var(--rdgfg-deck-peek, 14px) * (var(--rdgfg-stack, 3) - 1));
	cursor: pointer;
}

.rdgfg-deck--fan.is-stacked .rdgfg-deck__stack { --rdgfg-deck-peek: 9px; }

.rdgfg-deck.is-stacked .rdgfg-deck__item {
	margin: 0;
	transition: transform var(--rdgfg-transition, 400ms) ease, opacity var(--rdgfg-transition, 400ms) ease;
}

.rdgfg-deck.is-stacked .rdgfg-deck__item:not([data-pos="0"]) {
	position: absolute;
	inset: 0;
}

.rdgfg-deck.is-stacked .rdgfg-deck__item > .rdgfg-card { height: 100%; }

.rdgfg-deck.is-stacked .rdgfg-deck__item[hidden] { display: none; }

.rdgfg-deck.is-stacked .rdgfg-deck__item[data-pos="0"] { position: relative; transform: none; opacity: 1; z-index: 5; }

/* Straight stack: the cards behind peek out above the front card. */
.rdgfg-deck--stack.is-stacked .rdgfg-deck__item[data-pos="1"] { transform: translateY(-14px) scale(0.955); opacity: 1; z-index: 4; }

.rdgfg-deck--stack.is-stacked .rdgfg-deck__item[data-pos="2"] { transform: translateY(-28px) scale(0.91); opacity: 0.55; z-index: 3; }

/* The stack depth is configurable up to five, so every step needs a rule. */
.rdgfg-deck--stack.is-stacked .rdgfg-deck__item[data-pos="3"] { transform: translateY(-42px) scale(0.865); opacity: 0.3; z-index: 2; }

.rdgfg-deck--stack.is-stacked .rdgfg-deck__item[data-pos="4"] { transform: translateY(-56px) scale(0.82); opacity: 0.18; z-index: 1; }

/*
 * Fanned deck (default). Rotating the cards behind the front one shows their
 * corners on the sides as well as the top, so it reads as a pile of several
 * cards instead of one card with a shadow. The rotation needs horizontal room,
 * hence the padding on the deck.
 */
.rdgfg-deck--fan.is-stacked { padding: 0 22px; }

.rdgfg-deck--fan.is-stacked .rdgfg-deck__item[data-pos="1"] { transform: translateY(-9px) rotate(-3.2deg) scale(0.975); opacity: 1; z-index: 4; }

.rdgfg-deck--fan.is-stacked .rdgfg-deck__item[data-pos="2"] { transform: translateY(-17px) rotate(3.6deg) scale(0.95); opacity: 0.8; z-index: 3; }

.rdgfg-deck--fan.is-stacked .rdgfg-deck__item[data-pos="3"] { transform: translateY(-25px) rotate(-6.4deg) scale(0.925); opacity: 0.55; z-index: 2; }

.rdgfg-deck--fan.is-stacked .rdgfg-deck__item[data-pos="4"] { transform: translateY(-33px) rotate(6.8deg) scale(0.9); opacity: 0.35; z-index: 1; }

/*
 * Intro: the cards start collapsed underneath the front card and fan out once,
 * so the pile announces itself instead of waiting to be discovered. Purely a
 * transition of the states above — no keyframes, no layout thrash.
 */
.rdgfg-deck.is-collapsed .rdgfg-deck__item:not([data-pos="0"]) {
	transform: none;
	opacity: 0;
}

/*
 * "Next review" button hidden by choice. Visually gone, but still in the tab
 * order and still announced, and it comes back the moment it is focused with a
 * keyboard — without it the deck would be unreachable without a mouse.
 */
.rdgfg-deck__next--quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rdgfg-deck__next--quiet:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* Position counter next to the "next" button. */
.rdgfg-deck__controls {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* Nothing visible on the left any more — keep the counter with the deck. */
.rdgfg-deck__controls:has(.rdgfg-deck__next--quiet) { justify-content: flex-start; }

.rdgfg-deck__counter {
	color: var(--rdgfg-muted-color);
	font-size: var(--rdgfg-meta-size);
	font-variant-numeric: tabular-nums;
}

.rdgfg-deck.is-stacked .rdgfg-card { box-shadow: var(--rdgfg-shadow-hover); }

/* -- Layout: sidebar widget ------------------------------------------------ */
.rdgfg-widget {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 320px;
}

.rdgfg-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rdgfg-widget__list--divided {
	border-top: 1px solid var(--rdgfg-line-soft);
	padding-top: 12px;
}

.rdgfg-widget__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.rdgfg-widget__head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.rdgfg-widget__text {
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: var(--rdgfg-widget-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Layout: ticker -------------------------------------------------------- */
.rdgfg-ticker {
	overflow: hidden;
	width: 100%;
}

.rdgfg-ticker__track {
	display: flex;
	width: max-content;
	animation: rdgfg-ticker var(--rdgfg-ticker-speed) linear infinite;
}

.rdgfg-ticker.is-paused .rdgfg-ticker__track { animation-play-state: paused; }

.rdgfg-ticker__row {
	display: flex;
	gap: 14px;
	padding-inline-end: 14px;
}

.rdgfg-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 99px;
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	font-size: var(--rdgfg-meta-size);
}

.rdgfg-ticker__author { color: var(--rdgfg-muted-color); }

@keyframes rdgfg-ticker {

	from { transform: translateX(0); }

	to { transform: translateX(-50%); }
}

/* -- Layout: sticky trust pill --------------------------------------------- */
.rdgfg-pill {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.rdgfg-float--top-left .rdgfg-pill,
.rdgfg-float--bottom-left .rdgfg-pill { align-items: flex-start; }

.rdgfg-float--top-center .rdgfg-pill,
.rdgfg-float--bottom-center .rdgfg-pill { align-items: center; }

.rdgfg-pill__toggle {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 99px;
	background: var(--rdgfg-card-background);
	border: 1px solid var(--rdgfg-line-soft);
	box-shadow: var(--rdgfg-shadow-hover);
	color: var(--rdgfg-text-color);
	font-family: inherit;
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	cursor: pointer;
}

.rdgfg-pill__toggle .rdgfg-value { font-size: var(--rdgfg-author-size); }

.rdgfg-pill__panel {
	order: 1;
	width: 290px;
	max-width: calc(100vw - 2 * var(--rdgfg-float-offset));
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	border-radius: var(--rdgfg-radius);
	box-shadow: var(--rdgfg-shadow-hover);
}

.rdgfg-pill__panel[hidden] { display: none; }

.rdgfg-pill__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rdgfg-pill__close {
	background: none;
	border: none;
	padding: 4px;
	display: inline-flex;
	font-size: 13px;
	color: var(--rdgfg-muted-color);
	cursor: pointer;
}

.rdgfg-pill__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rdgfg-pill__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
}

.rdgfg-pill__author {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.rdgfg-pill__text {
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
	line-height: 1.45;
}

/* -- Empty / system states ------------------------------------------------- */
.rdgfg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: var(--rdgfg-card-padding);
	background: var(--rdgfg-card-background);
	border: var(--rdgfg-line-width) solid var(--rdgfg-line-color);
	border-radius: var(--rdgfg-radius);
	box-shadow: var(--rdgfg-shadow);
	text-align: center;
}

.rdgfg-empty__title {
	font-size: var(--rdgfg-author-size);
	font-weight: 650;
}

.rdgfg-empty__text {
	margin: 0;
	font-size: var(--rdgfg-meta-size);
	color: var(--rdgfg-muted-color);
	max-width: 280px;
}

.rdgfg-empty__link {
	font-size: var(--rdgfg-meta-size);
	font-weight: 600;
	color: inherit;
}

.rdgfg-demo-flag,
.rdgfg-admin-notice,
.rdgfg-setup-hint {
	display: block;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px dashed var(--rdgfg-line-soft);
	border-radius: 8px;
	background: transparent;
	color: var(--rdgfg-muted-color);
	font-size: var(--rdgfg-meta-size);
	line-height: 1.5;
}

.rdgfg-setup-hint p { margin: 0 0 6px; }

.rdgfg-setup-hint p:last-child { margin-bottom: 0; }

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {

	.rdgfg-grid { grid-template-columns: repeat(min(2, var(--rdgfg-columns, 2)), minmax(0, 1fr)); }

	.rdgfg-showcase { grid-template-columns: 1fr; }

	.rdgfg-carousel__viewport { --rdgfg-visible: var(--rdgfg-cards-tablet, 2); }

	.rdgfg-showcase .rdgfg-carousel__viewport { --rdgfg-visible: 1; }
}

@media (max-width: 640px) {

	.rdgfg-grid { grid-template-columns: 1fr; }

	.rdgfg-carousel__viewport { --rdgfg-visible: var(--rdgfg-cards-mobile, 1); }

	.rdgfg-showcase .rdgfg-carousel__viewport { --rdgfg-visible: 1; }

	.rdgfg-bar { flex-direction: column; align-items: flex-start; }

	.rdgfg-bar__rating { margin-inline-start: 0; }

	.rdgfg-strip { justify-content: flex-start; }

	.rdgfg-divider__rule { display: none; }

	.rdgfg-btn-full-mobile .rdgfg-btn { width: 100%; }

	.rdgfg-layout-inline.rdgfg-btn-full-mobile .rdgfg-btn { width: auto; }

	.rdgfg-carousel__controls { gap: 14px; }

	.rdgfg-widget { max-width: none; }

	.rdgfg-deck { max-width: none; }

	.rdgfg-float--top-center,
	.rdgfg-float--bottom-center,
	.rdgfg-float--top-left,
	.rdgfg-float--bottom-left,
	.rdgfg-float--top-right,
	.rdgfg-float--bottom-right {
		inset-inline: var(--rdgfg-float-offset);
		left: auto;
		transform: none;
		max-width: none;
	}
}

/* -- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.rdgfg-carousel__track { scroll-behavior: auto; }

	.rdgfg-card,
	.rdgfg-btn,
	.rdgfg-carousel__arrow { transition: none; }

	/* The intro is skipped in JS under reduced motion; this keeps the cards
	   from ever animating even if the class lingers. */
	.rdgfg-deck.is-stacked .rdgfg-deck__item { transition: none; }

	.rdgfg-ticker__track { animation: none; }

	.rdgfg-ticker { overflow-x: auto; }
}