/* Startnet Google Reviews – front-end
 * Colors default to the theme: text & font are inherited, accent comes from the
 * theme palette (or custom color), cards adapt to light and dark sections.
 */
.sngr {
	--sngr-gap: 20px;
	--sngr-text: inherit;
	--sngr-card-bg: color-mix(in srgb, currentColor 4%, transparent);
	--sngr-border: color-mix(in srgb, currentColor 12%, transparent);
	--sngr-muted: color-mix(in srgb, currentColor 62%, transparent);
	color: var(--sngr-text);
	font: inherit;
	box-sizing: border-box;
	width: 100%;
}
.sngr *, .sngr *::before, .sngr *::after { box-sizing: inherit; }

/* ---------- Summary ---------- */
.sngr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
}
.sngr-summary-main { display: flex; align-items: center; gap: 14px; }
.sngr-summary-score { font-size: 2.6em; font-weight: 700; line-height: 1; color: var(--sngr-accent); }
.sngr-summary-info { display: flex; flex-direction: column; gap: 3px; }
.sngr-summary-name { font-weight: 600; }
.sngr-summary-count { font-size: .875em; color: var(--sngr-muted); text-decoration: none; }
a.sngr-summary-count:hover { text-decoration: underline; }
.sngr-google { font-weight: 600; }
.sngr-layout-badge .sngr-summary { margin-bottom: 0; }

/* ---------- Button ---------- */
.sngr-actions { display: flex; margin-bottom: 24px; }
.sngr-actions-bottom { margin: 24px 0 0; justify-content: center; }
.sngr-btn,
.sngr .sngr-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .75em 1.4em;
	border-radius: var(--sngr-radius);
	background: var(--sngr-btn-bg);
	color: var(--sngr-btn-text);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	transition: filter .2s, transform .2s;
}
.sngr-btn:hover, .sngr-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); color: var(--sngr-btn-text); }

/* ---------- Stars ---------- */
.sngr-stars { position: relative; display: inline-block; width: max-content; max-width: max-content; align-self: flex-start; line-height: 0; white-space: nowrap; }
.sngr-stars svg { width: 1.05em; height: 1.05em; margin-right: 1px; }
.sngr-stars-bg svg { fill: color-mix(in srgb, currentColor 20%, transparent); }
.sngr-stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.sngr-stars-fg svg { fill: var(--sngr-star); }

/* ---------- Card ---------- */
.sngr-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: var(--sngr-card-bg);
	border: 1px solid var(--sngr-border);
	border-radius: var(--sngr-radius);
	text-align: left;
}
.sngr-card-head { display: flex; align-items: center; gap: 12px; }
.sngr-avatar {
	width: 44px; height: 44px; flex: 0 0 44px;
	border-radius: 50%; object-fit: cover; margin: 0;
}
.sngr-avatar-initials {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sngr-accent); color: var(--sngr-btn-text);
	font-weight: 700; font-size: .95em;
}
.sngr-meta { min-width: 0; flex: 1; }
.sngr-author { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sngr-date { display: block; font-size: .8em; color: var(--sngr-muted); }
.sngr-source { flex: 0 0 auto; line-height: 0; }
.sngr-text {
	font-size: .95em;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--sngr-lines);
	line-clamp: var(--sngr-lines);
	overflow: hidden;
	overflow-wrap: anywhere;
}
.sngr-card.is-expanded .sngr-text { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
.sngr-readmore {
	align-self: flex-start;
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--sngr-accent); font: inherit; font-size: .875em; font-weight: 600;
	cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sngr-readmore[hidden] { display: none; }
.sngr-empty { opacity: .7; font-style: italic; }

/* ---------- Grid & list ---------- */
.sngr-items {
	display: grid;
	gap: var(--sngr-gap);
	grid-template-columns: repeat(var(--sngr-cols), minmax(0, 1fr));
}
.sngr-layout-list .sngr-items { grid-template-columns: 1fr; }
.sngr-item.sngr-is-hidden { display: none; }
.sngr-more-wrap { text-align: center; margin-top: 24px; }
.sngr-more {
	background: transparent;
	color: inherit;
	border: 1px solid var(--sngr-border);
	border-radius: var(--sngr-radius);
	padding: .7em 1.4em;
	font: inherit; font-weight: 600;
	cursor: pointer;
}
.sngr-more:hover { border-color: var(--sngr-accent); color: var(--sngr-accent); }

@media (max-width: 1024px) {
	.sngr-items { grid-template-columns: repeat(var(--sngr-cols-t), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.sngr-items { grid-template-columns: repeat(var(--sngr-cols-m), minmax(0, 1fr)); }
	.sngr-summary { flex-direction: column; align-items: flex-start; }
}

/* ---------- Slider ---------- */
.sngr-slider { position: relative; display: flex; align-items: center; gap: 8px; }
.sngr-slider-track {
	--sngr-visible: var(--sngr-cols);
	flex: 1;
	display: flex;
	gap: var(--sngr-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px;
}
.sngr-slider-track::-webkit-scrollbar { display: none; }
.sngr-slider-track > .sngr-item {
	flex: 0 0 calc((100% - (var(--sngr-visible) - 1) * var(--sngr-gap)) / var(--sngr-visible));
	scroll-snap-align: start;
}
@media (max-width: 1024px) { .sngr-slider-track { --sngr-visible: var(--sngr-cols-t); } }
@media (max-width: 640px)  { .sngr-slider-track { --sngr-visible: var(--sngr-cols-m); } }
.sngr-nav {
	flex: 0 0 40px; width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--sngr-border);
	background: var(--sngr-card-bg);
	color: inherit;
	cursor: pointer; padding: 0;
}
.sngr-nav svg { width: 22px; height: 22px; fill: currentColor; }
.sngr-nav:hover { background: var(--sngr-accent); color: var(--sngr-btn-text); border-color: var(--sngr-accent); }
.sngr-nav[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 640px) { .sngr-nav { display: none; } }

/* ---------- Marquee (doorlopende rij) ---------- */
.sngr-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sngr-marquee-track {
	display: flex;
	width: max-content;
	align-items: stretch;
	animation: sngr-marquee var(--sngr-duration, 40s) linear infinite;
}
.sngr-marquee[data-direction="right"] .sngr-marquee-track { animation-direction: reverse; }
.sngr-marquee:hover .sngr-marquee-track,
.sngr-marquee:focus-within .sngr-marquee-track { animation-play-state: paused; }
.sngr-marquee-group { display: flex; gap: var(--sngr-gap); padding-right: var(--sngr-gap); }
.sngr-marquee-group > .sngr-item { width: var(--sngr-card-w); flex: 0 0 var(--sngr-card-w); }
.sngr-marquee:not(.is-ready) .sngr-marquee-track { animation: none; }
@keyframes sngr-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sngr-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.sngr-marquee-track { animation: none !important; }
}
@media (max-width: 640px) {
	.sngr-marquee-group > .sngr-item { width: min(var(--sngr-card-w), 80vw); flex-basis: min(var(--sngr-card-w), 80vw); }
}

/* Standalone button */
.sngr-button-only { margin: 0; }