/*
 * Digimax Google Reviews – front-end layouts.
 * Everything is scoped under .dgr and driven by --dgr-* custom properties; no !important.
 * Theme overrides: set the tokens on .dgr (or #dgr-w12 for one widget) – see HOW-TO.md.
 */

/* ---- Layout defaults (before the presets, so dark/auto still win) ------------------------- */

.dgr.dgr--badge-google {
	--dgr-bg: #f1f3f4;
	--dgr-panel-w: 400px;
}

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

.dgr.dgr--preset-dark {
	--dgr-star: #fbbc04;
	--dgr-star-empty: #5f6368;
	--dgr-bg: #202124;
	--dgr-surface: #303134;
	--dgr-text: #f1f3f4;
	--dgr-muted: #bdc1c6;
	--dgr-link: #8ab4f8;
	--dgr-accent: #8ab4f8;
	--dgr-border: #5f6368;
}

@media (prefers-color-scheme: dark) {
	.dgr.dgr--preset-auto {
		--dgr-star: #fbbc04;
		--dgr-star-empty: #5f6368;
		--dgr-bg: #202124;
		--dgr-surface: #303134;
		--dgr-text: #f1f3f4;
		--dgr-muted: #bdc1c6;
		--dgr-link: #8ab4f8;
		--dgr-accent: #8ab4f8;
		--dgr-border: #5f6368;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgr {
		--dgr-anim: 0ms;
	}
}

/* ---- Shared ------------------------------------------------------------------------------- */

.dgr {
	/* The site's own type: size and line height come from where the widget sits (Design tokens override). */
	font-size: inherit;
	line-height: inherit;
	max-inline-size: var(--dgr-max-w, none);
}

.dgr a {
	color: var(--dgr-link);
}

.dgr :focus-visible {
	outline: 2px solid var(--dgr-accent);
	outline-offset: 2px;
}

.dgr .screen-reader-text {
	block-size: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.dgr__header {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-block-end: var(--dgr-gap);
}

.dgr__place-photo {
	block-size: 56px;
	border-radius: 50%;
	inline-size: 56px;
	object-fit: cover;
}

.dgr__place-name {
	font-size: 1.15em;
	line-height: 1.3;
	margin: 0;
}

.dgr__summary {
	align-items: center;
	color: var(--dgr-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
}

.dgr__summary .dgr__rating,
.dgr__rating {
	color: var(--dgr-text);
	font-weight: 700;
}

.dgr__list {
	display: grid;
	gap: var(--dgr-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dgr__item {
	background: var(--dgr-surface);
	border: 1px solid var(--dgr-border);
	border-radius: var(--dgr-radius);
	contain-intrinsic-size: auto 160px;
	content-visibility: auto;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 16px;
}

.dgr__avatar {
	align-items: center;
	background: var(--dgr-accent);
	block-size: var(--dgr-avatar-size);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 var(--dgr-avatar-size);
	font-weight: 700;
	inline-size: var(--dgr-avatar-size);
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.dgr__avatar::before {
	content: attr(data-initial);
}

.dgr__avatar-img {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
}

.dgr__avatar.is-fallback .dgr__avatar-img {
	display: none;
}

.dgr__body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.dgr__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.dgr__author {
	color: var(--dgr-text);
	font-weight: 700;
	text-decoration: none;
}

a.dgr__author:hover,
a.dgr__author:focus-visible {
	text-decoration: underline;
}

.dgr__date {
	color: var(--dgr-muted);
	font-size: .875em;
}

.dgr__text {
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}

.dgr__more > summary {
	cursor: pointer;
	list-style: none;
}

.dgr__more > summary::-webkit-details-marker {
	display: none;
}

.dgr__more-label {
	color: var(--dgr-link);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.dgr__more[open] > summary .dgr__text,
.dgr__more[open] > summary .dgr__more-label {
	display: none;
}

.dgr__original {
	color: var(--dgr-muted);
	font-size: .875em;
	margin-block-start: 6px;
}

.dgr__original > summary {
	cursor: pointer;
}

.dgr__reply {
	border-inline-start: 3px solid var(--dgr-border);
	font-size: .925em;
	margin-block-start: 10px;
	padding-inline-start: 10px;
}

.dgr__reply p {
	margin: 4px 0 0;
}

.dgr__links {
	font-size: .875em;
	margin: 8px 0 0;
}

.dgr__actions {
	align-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--dgr-gap) 0 0;
}

.dgr__cta {
	align-items: center;
	border: 1px solid var(--dgr-border);
	border-radius: 999px;
	color: var(--dgr-link);
	display: inline-flex;
	font-weight: 600;
	justify-content: center;
	line-height: 1.3;
	min-block-size: 44px;
	padding: 10px 18px;
	text-decoration: none;
}

.dgr__cta:hover,
.dgr__cta:focus-visible {
	background: var(--dgr-surface);
	text-decoration: underline;
}

.dgr__pager {
	margin: var(--dgr-gap) 0 0;
	text-align: center;
}

.dgr__load-more,
.dgr__page,
.dgr__prev,
.dgr__next,
.dgr__pause,
.dgr__close {
	background: var(--dgr-surface);
	border: 1px solid var(--dgr-border);
	border-radius: 999px;
	color: var(--dgr-text);
	cursor: pointer;
	font: inherit;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: 8px 18px;
}

.dgr__page[aria-current="true"] {
	background: var(--dgr-accent);
	border-color: var(--dgr-accent);
	color: #fff;
}

.dgr__pager nav,
.dgr nav.dgr__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.dgr__footer {
	color: var(--dgr-muted);
	font-size: .8125em;
	margin-block-start: var(--dgr-gap);
}

.dgr__notice {
	margin: 0 0 6px;
}

.dgr__powered {
	margin: 0;
}

.dgr__gmaps {
	color: var(--dgr-text);
	font-weight: 700;
}

.dgr--embed {
	margin-block: 0 var(--dgr-block-gap, 2.5em);
}

/* ---- Grid ---------------------------------------------------------------------------------- */

.dgr--grid .dgr__list {
	grid-template-columns: repeat(var(--dgr-cols, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.dgr--grid .dgr__list {
		grid-template-columns: repeat(min(var(--dgr-cols, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dgr--grid .dgr__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Slider (scroll-snap; JS adds buttons) ------------------------------------------------ */

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

.dgr__track {
	display: grid;
	flex: 1 1 auto;
	grid-auto-columns: calc((100% - (var(--dgr-per-view, 3) - 1) * var(--dgr-gap)) / var(--dgr-per-view, 3));
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-block-end: 6px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.dgr__track > .dgr__item {
	content-visibility: visible;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.dgr__track {
		grid-auto-columns: calc((100% - var(--dgr-gap)) / 2);
	}
}

@media (max-width: 640px) {
	.dgr__track {
		grid-auto-columns: 88%;
	}
}

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

/* ---- Floating badge + panel ---------------------------------------------------------------- */

.dgr__badge:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
}

.dgr__badge .dgr__rating {
	font-size: 1.35em;
}

.dgr__badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dgr__attr {
	color: var(--dgr-muted);
	font-size: .8em;
	font-weight: 600;
}

.dgr--floating .dgr__panel,
.dgr--inline-badge .dgr__panel {
	color: var(--dgr-text);
	padding: 0;
}

.dgr__panel-header {
	align-items: flex-start;
	background: var(--dgr-bg);
	border-block-end: 1px solid var(--dgr-border);
	display: flex;
	gap: 8px;
	inset-block-start: 0;
	justify-content: space-between;
	padding: 14px 16px 10px;
	position: sticky;
	z-index: 1;
}

.dgr__panel-header .dgr__header {
	margin: 0;
}

.dgr__close {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1;
	padding: 0;
}

.dgr__panel-body {
	padding: 14px 16px 0;
}

.dgr__panel-footer {
	padding: 0 16px 16px;
}

.dgr__panel .dgr__item {
	border: 0;
	border-block-end: 1px solid var(--dgr-border);
	border-radius: 0;
	padding: 0 0 14px;
}

.dgr__panel .dgr__list {
	gap: 14px;
}

.dgr[open] > .dgr__panel {
	animation: var(--dgr-anim) ease-out both dgr-fade;
}

.dgr--panel-slide-left[open] > .dgr__panel {
	animation-name: dgr-from-left;
}

.dgr--panel-slide-right[open] > .dgr__panel {
	animation-name: dgr-from-right;
}

.dgr--panel-slide-up[open] > .dgr__panel {
	animation-name: dgr-from-below;
}

@keyframes dgr-fade {
	from {
		opacity: 0;
	}
}

@keyframes dgr-from-left {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
}

@keyframes dgr-from-right {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
}

@keyframes dgr-from-below {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

/* Inline badge (GRP badge_inner): the pill sits in the page, the panel opens below it. */
.dgr--inline-badge {
	display: inline-block;
	position: relative;
}

.dgr--inline-badge .dgr__panel {
	background: var(--dgr-bg);
	border-radius: var(--dgr-radius);
	box-shadow: var(--dgr-shadow);
	inline-size: min(var(--dgr-panel-w), 92vw);
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	max-block-size: 70vh;
	overflow: auto;
	position: absolute;
	z-index: 10;
}

/* ---- Inline rating ------------------------------------------------------------------------- */

.dgr--inline-rating {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dgr--inline-rating .dgr__count {
	color: var(--dgr-text);
}

.dgr--inline-rating .dgr__attr {
	font-size: .875em;
}

/* ---- Theme isolation ------------------------------------------------------------------------
 * Themes style h2, a, p and span globally (often with IDs or long selectors). These rules restate
 * the widget's typography with three classes of specificity (.dgr.dgr …) so content-area rules such as
 * ".page .content h2" (0,2,1) do not win; override them with tokens, not resets.
 */

/* The heading keeps the theme's heading font; size and colour stay the widget's. */
.dgr.dgr .dgr__place-name {
	color: var(--dgr-text);
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	text-transform: none;
}

.dgr.dgr .dgr__author {
	color: var(--dgr-text);
	font-weight: 700;
	text-decoration: none;
}

.dgr.dgr .dgr__source,
.dgr.dgr .dgr__report,
.dgr.dgr .dgr__count,
.dgr.dgr .dgr__cta,
.dgr.dgr .dgr__notice a {
	color: var(--dgr-link);
}

.dgr.dgr .dgr__source,
.dgr.dgr .dgr__report {
	text-decoration: underline;
}

.dgr.dgr .dgr__text,
.dgr.dgr .dgr__notice,
.dgr.dgr .dgr__powered,
.dgr.dgr .dgr__summary {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.dgr.dgr .dgr__notice,
.dgr.dgr .dgr__powered {
	color: var(--dgr-muted);
	font-size: .8125em;
	line-height: inherit;
}

.dgr.dgr .dgr__powered span,
.dgr.dgr .dgr__notice span,
.dgr.dgr .dgr__summary span,
.dgr.dgr .dgr__meta span {
	display: inline;
}

.dgr.dgr .dgr__meta .dgr__stars,
.dgr.dgr .dgr__summary .dgr__stars,
.dgr.dgr .dgr__avatar {
	display: inline-block;
}

.dgr.dgr .dgr__avatar {
	display: inline-flex;
}

.dgr.dgr .dgr__text {
	color: var(--dgr-text);
	font-size: 1em;
	line-height: inherit;
}

.dgr.dgr a {
	color: var(--dgr-link);
}

.dgr.dgr .dgr__author {
	color: var(--dgr-text);
}

/* Content-area list and paragraph rules (".page .content ul li { list-style: disc; padding-left }") */
.dgr.dgr .dgr__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dgr.dgr .dgr__item {
	list-style: none;
	margin: 0;
	padding: 16px;
}

.dgr.dgr .dgr__panel .dgr__item {
	padding: 0 0 14px;
}

.dgr.dgr.dgr--masonry .dgr__item {
	margin-block-end: var(--dgr-gap);
}

.dgr.dgr.dgr--compact .dgr__item {
	padding: 0 0 10px;
}

.dgr.dgr .dgr__text,
.dgr.dgr .dgr__links {
	margin: 8px 0 0;
}

.dgr.dgr .dgr__summary {
	margin: 4px 0 0;
}

.dgr.dgr .dgr__reply p {
	margin: 4px 0 0;
}

.dgr.dgr .dgr__notice {
	margin: 0 0 6px;
}

.dgr.dgr .dgr__powered {
	margin: 0;
}

.dgr.dgr .dgr__actions,
.dgr.dgr .dgr__pager {
	margin: var(--dgr-gap) 0 0;
}

.dgr.dgr .dgr__actions {
	block-size: auto;
	min-block-size: 0;
}

.dgr.dgr .dgr__cta {
	block-size: auto;
	font-size: .95em;
	line-height: 1.3;
}

/* ---- Badge variants ----------------------------------------------------------------------- */

.dgr--badge-card .dgr__badge {
	align-items: flex-start;
	border-radius: var(--dgr-radius);
	flex-direction: column;
	gap: 2px;
	min-inline-size: 190px;
	padding: 10px 16px;
}

.dgr--badge-card .dgr__badge-kicker {
	color: var(--dgr-muted);
	font-size: .8em;
}

.dgr--badge-card .dgr__badge-row {
	align-items: center;
	display: flex;
	gap: 8px;
}

.dgr--badge-card .dgr__rating {
	font-size: 1.6em;
	line-height: 1;
}

.dgr--badge-card .dgr__badge-count {
	color: var(--dgr-muted);
	font-size: .85em;
}

.dgr--badge-tab .dgr__badge-tab-text {
	font-weight: 700;
	letter-spacing: .02em;
}

.dgr--badge-bubble .dgr__rating {
	font-size: 1.05em;
	line-height: 1;
}

.dgr__bubble-star {
	color: var(--dgr-star);
	font-size: .8em;
	line-height: 1;
}

.dgr--badge-bar .dgr__badge {
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
	gap: 16px;
	inline-size: 100%;
}

.dgr__bar-cta {
	color: var(--dgr-link);
	font-weight: 700;
	text-decoration: underline;
}

.dgr--panel-modal[open]::before {
	background: rgba(0, 0, 0, .45);
	content: "";
	inset: 0;
	position: fixed;
	z-index: calc(var(--dgr-z, 999990) - 1);
}

.dgr--panel-modal .dgr__panel,
.dgr--floating.dgr--panel-modal .dgr__panel {
	inset-block: 50% auto;
	inset-inline: 50% auto;
	max-block-size: 80vh;
	transform: translate(-50%, -50%);
	z-index: var(--dgr-z, 999990);
}

/* ---- Google Rated badge + full-height panel ------------------------------------------------ */

.dgr--badge-google .dgr__badge-text {
	gap: 2px;
}

.dgr--badge-google .dgr__badge-title {
	color: var(--dgr-text);
	font-weight: 700;
}

.dgr--badge-google .dgr__badge-row {
	align-items: center;
	display: flex;
	gap: 6px;
}

/* 21px bold = large text: the star colour needs 3:1, which the Stars contrast check covers. */
.dgr--badge-google .dgr__badge .dgr__rating {
	color: var(--dgr-star);
	font-size: 1.4em;
	line-height: 1;
}

.dgr--badge-google .dgr__panel {
	background: var(--dgr-bg);
}

.dgr--badge-google .dgr__panel-header {
	align-items: center;
	background: var(--dgr-surface);
	padding: 18px 20px 14px;
}

.dgr.dgr.dgr--badge-google .dgr__panel-header .dgr__rating {
	color: var(--dgr-star);
	font-size: 2em;
	line-height: 1;
}

.dgr--badge-google .dgr__panel-header .dgr__stars {
	--dgr-star-size: 1.25rem;
}

.dgr--badge-google .dgr__panel-body {
	padding: 18px 20px 0;
}

.dgr--badge-google .dgr__panel-footer {
	padding: 0 20px 20px;
}

.dgr.dgr.dgr--badge-google .dgr__panel .dgr__item {
	background: transparent;
	padding: 0 0 16px;
}

.dgr--badge-google .dgr__meta {
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
}

.dgr.dgr.dgr--badge-google .dgr__author {
	color: var(--dgr-link);
	font-weight: 600;
}

.dgr.dgr .dgr__text .dgr__stars,
.dgr.dgr .dgr__more > summary > .dgr__stars {
	display: inline-block;
	font-size: .9em;
	margin-inline-end: 6px;
	vertical-align: -.1em;
}

.dgr.dgr.dgr--badge-google .dgr__text {
	margin-block-start: 6px;
}

.dgr--badge-google .dgr__powered {
	text-align: end;
}

.dgr--badge-google .dgr__avatar[data-tone="1"] { background: #c5221f; }
.dgr--badge-google .dgr__avatar[data-tone="2"] { background: #137333; }
.dgr--badge-google .dgr__avatar[data-tone="3"] { background: #b05a00; }
.dgr--badge-google .dgr__avatar[data-tone="4"] { background: #8430ce; }
.dgr--badge-google .dgr__avatar[data-tone="5"] { background: #00796b; }
.dgr--badge-google .dgr__avatar[data-tone="6"] { background: #ad1457; }
.dgr--badge-google .dgr__avatar[data-tone="7"] { background: #1967d2; }

/* While open, a full-height panel covers everything (sticky headers, menu buttons), like a modal. */
.dgr.dgr--floating.dgr--panel-drawer-left[open],
.dgr.dgr--floating.dgr--panel-drawer-right[open] {
	z-index: 2147483000;
}

.dgr--panel-drawer-left[open] > .dgr__panel {
	animation-name: dgr-drawer-left;
}

.dgr--panel-drawer-right[open] > .dgr__panel {
	animation-name: dgr-drawer-right;
}

@keyframes dgr-drawer-left {
	from {
		transform: translateX(-100%);
	}
}

@keyframes dgr-drawer-right {
	from {
		transform: translateX(100%);
	}
}

/* ---- Masonry and compact ------------------------------------------------------------------ */

.dgr--masonry .dgr__list {
	columns: var(--dgr-cols, 3) 260px;
	column-gap: var(--dgr-gap);
	display: block;
}

.dgr--masonry .dgr__item {
	break-inside: avoid;
	margin-block-end: var(--dgr-gap);
}

.dgr--compact .dgr__list {
	gap: 10px;
}

.dgr--compact .dgr__item {
	background: none;
	border: 0;
	border-block-end: 1px solid var(--dgr-border);
	border-radius: 0;
	padding: 0 0 10px;
}

.dgr--compact .dgr__avatar {
	display: none;
}

.dgr.dgr--compact .dgr__text {
	font-style: italic;
	margin-block-start: 4px;
}

/* ---- Marquee ----------------------------------------------------------------------------- */

.dgr__marquee {
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	overflow: hidden;
}

.dgr__marquee-track {
	animation: dgr-marquee calc(1s * 100 / (var(--dgr-marquee-speed, 40) / 10)) linear infinite;
	display: flex;
	gap: var(--dgr-gap);
	inline-size: max-content;
}

.dgr__marquee .dgr__list {
	display: flex;
	gap: var(--dgr-gap);
}

.dgr__marquee .dgr__item {
	content-visibility: visible;
	inline-size: 320px;
}

.dgr--marquee:hover .dgr__marquee-track,
.dgr--marquee:focus-within .dgr__marquee-track,
.dgr--marquee.is-paused .dgr__marquee-track {
	animation-play-state: paused;
}

.dgr--marquee .dgr__pause {
	margin-block-start: 10px;
}

@keyframes dgr-marquee {
	to {
		transform: translateX(calc(-50% - var(--dgr-gap) / 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgr__marquee {
		mask-image: none;
	}

	.dgr__marquee-track {
		animation: none;
		inline-size: auto;
	}

	.dgr__marquee .dgr__list {
		flex-wrap: wrap;
	}

	.dgr__marquee .dgr__list--clone,
	.dgr--marquee .dgr__pause {
		display: none;
	}
}

/* ---- Bars and rating card ------------------------------------------------------------------ */

.dgr--bar {
	background: var(--dgr-surface);
	color: var(--dgr-text);
}

.dgr__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: center;
	min-block-size: 44px;
	padding: 6px 16px;
}

.dgr--bar .dgr__actions {
	margin: 0;
}

.dgr--bar .dgr__cta {
	min-block-size: 36px;
	padding: 6px 14px;
}

.dgr--footer-strip {
	--dgr-surface: #202124;
	--dgr-text: #f1f3f4;
	--dgr-muted: #bdc1c6;
	--dgr-link: #8ab4f8;
	--dgr-border: #5f6368;
}

.dgr--rating-card {
	background: var(--dgr-surface);
	border: 1px solid var(--dgr-border);
	border-radius: var(--dgr-radius);
	padding: 20px;
}

.dgr__address {
	color: var(--dgr-muted);
	margin: 0;
}

/* ---- Location tabs ------------------------------------------------------------------------- */

.dgr__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: var(--dgr-gap);
}

.dgr__tab {
	background: var(--dgr-surface);
	border: 1px solid var(--dgr-border);
	border-radius: 999px;
	color: var(--dgr-text);
	cursor: pointer;
	font: inherit;
	min-block-size: 40px;
	padding: 6px 14px;
}

.dgr__tab[aria-selected="true"] {
	background: var(--dgr-accent);
	border-color: var(--dgr-accent);
	color: #fff;
}

.dgr .dgr__item.is-out {
	display: none;
}