/* Creatify Google Reviews – front-end
 * Alle kleuren/maten zijn CSS-variabelen, zodat Elementor ze kan overschrijven.
 */
.cgr-wrap {
	--cgr-accent: #1a73e8;
	--cgr-star: #fbbc04;
	--cgr-star-empty: #dadce0;
	--cgr-pv: 1;              /* reviews naast elkaar */
	--cgr-mode: slider;       /* slider | grid */
	--cgr-gap: 20px;
	--cgr-lines: 6;
	--cgr-dot: 8px;
	--cgr-dot-active: 22px;
	--cgr-arrows: inline-flex;
	--cgr-arrow-offset: 12px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	color: #3c4043;
}
@media (min-width: 768px)  { .cgr-wrap { --cgr-pv: 2; } }
@media (min-width: 1025px) { .cgr-wrap { --cgr-pv: 3; } }
@media (min-width: 768px)  { .cgr-sc-grid { --cgr-mode: grid; } }
@media (max-width: 767px)  { .cgr-wrap { --cgr-arrows: none; --cgr-gap: 14px; } }

.cgr-wrap *, .cgr-wrap *::before, .cgr-wrap *::after { box-sizing: border-box; }

.cgr-notice {
	padding: 10px 14px; margin: 0 0 12px;
	border-left: 4px solid #dba617; background: #fcf9e8; color: #50575e;
	font-size: 14px; line-height: 1.5;
}

/* ---------- Totaalscore ---------- */
.cgr-wrap .cgr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.cgr-wrap .cgr-summary-score { display: flex; align-items: center; gap: 14px; }
.cgr-wrap .cgr-summary-number { font-size: 44px; font-weight: 700; line-height: 1; color: #202124; }
.cgr-wrap .cgr-summary-count { font-size: 14px; color: #70757a; margin-top: 4px; }
.cgr-wrap .cgr-summary-count a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cgr-wrap .cgr-summary-stars svg { width: 24px; height: 24px; }
.cgr-wrap .cgr-write-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--cgr-accent);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.cgr-wrap .cgr-write-btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }

/* ---------- Sterren ---------- */
.cgr-wrap .cgr-stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; text-align: left; align-self: var(--cgr-head-justify, flex-start); }
.cgr-wrap .cgr-stars svg { width: 18px; height: 18px; display: inline-block; margin-right: 1px; vertical-align: top; }
.cgr-wrap .cgr-stars-bg svg { fill: var(--cgr-star-empty); }
.cgr-wrap .cgr-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.cgr-wrap .cgr-stars-fg svg { fill: var(--cgr-star); }

/* ---------- Slider-raamwerk ---------- */
.cgr-wrap .cgr-slider {
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas:
		"vp vp vp vp vp"
		". prev dots next .";
	column-gap: 14px;
	row-gap: 14px;
	align-items: center;
}
.cgr-wrap .cgr-viewport {
	grid-area: vp;
	min-width: 0;
	overflow: hidden;
	margin: 0 calc(var(--cgr-gap) / -2);
	padding: 6px 0 10px;
	touch-action: pan-y;
}
.cgr-wrap .cgr-prev { grid-area: prev; }
.cgr-wrap .cgr-next { grid-area: next; }
.cgr-wrap .cgr-dots { grid-area: dots; }

/* Pijlen links/rechts van de kaarten */
.cgr-wrap.cgr-arrows-sides .cgr-slider {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"prev vp next"
		"dots dots dots";
	column-gap: 0;
}
.cgr-wrap.cgr-arrows-sides .cgr-prev { margin-right: var(--cgr-arrow-offset); position: relative; z-index: 2; }
.cgr-wrap.cgr-arrows-sides .cgr-next { margin-left: var(--cgr-arrow-offset); position: relative; z-index: 2; }

/* Niet actief (raster of te weinig reviews): geen navigatie */
.cgr-wrap:not(.cgr-active) .cgr-slider { display: block; }
.cgr-wrap:not(.cgr-active) .cgr-arrow,
.cgr-wrap:not(.cgr-active) .cgr-dots,
.cgr-wrap.cgr-no-dots .cgr-dots { display: none; }
.cgr-wrap.cgr-no-dots .cgr-slider { grid-template-areas: "vp vp vp vp vp" ". prev . next ."; }
.cgr-wrap.cgr-no-dots.cgr-arrows-sides .cgr-slider { grid-template-areas: "prev vp next"; }

.cgr-wrap .cgr-track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}
.cgr-wrap .cgr-track.cgr-animate { transition: transform var(--cgr-speed, 550ms) cubic-bezier(.25,.8,.25,1); }
.cgr-wrap .cgr-slide {
	flex: 0 0 calc(100% / var(--cgr-pv));
	max-width: calc(100% / var(--cgr-pv));
	padding: 0 calc(var(--cgr-gap) / 2);
	display: flex;
}
.cgr-wrap.cgr-is-grid .cgr-track {
	flex-wrap: wrap;
	row-gap: var(--cgr-gap);
	transform: none !important;
}

/* ---------- Kaart ---------- */
.cgr-wrap .cgr-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #e8eaed;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 1px 2px rgba(60,64,67,.06), 0 4px 14px rgba(60,64,67,.06);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
	font-size: 15px;
	line-height: 1.6;
}
.cgr-wrap .cgr-card-head { display: flex; align-items: center; gap: 12px; justify-content: var(--cgr-head-justify, flex-start); }
.cgr-wrap .cgr-avatar {
	width: 44px; height: 44px; flex: 0 0 44px;
	border-radius: 50%;
	object-fit: cover;
	-webkit-user-drag: none;
	max-width: none;
}
.cgr-wrap .cgr-avatar-initials {
	display: inline-flex; align-items: center; justify-content: center;
	background-color: var(--cgr-accent); color: #fff;
	font-weight: 600; font-size: 16px; letter-spacing: .5px; line-height: 1;
}
.cgr-wrap .cgr-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cgr-wrap .cgr-name { font-weight: 600; color: #202124; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgr-wrap a.cgr-name:hover { text-decoration: underline; }
.cgr-wrap .cgr-date { font-size: 13px; color: #70757a; }
.cgr-wrap .cgr-source {
	flex: 0 0 auto;
	margin-left: var(--cgr-badge-ml, auto);
	font-size: 12px; font-weight: 600; line-height: 1.6;
	color: #70757a;
	border: 1px solid #e8eaed;
	border-radius: 999px;
	padding: 1px 9px;
}
.cgr-wrap .cgr-text p { margin: 0 0 .6em; }
.cgr-wrap .cgr-text p:last-child { margin-bottom: 0; }
.cgr-wrap .cgr-text.cgr-clamp {
	display: -webkit-box;
	-webkit-line-clamp: var(--cgr-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cgr-wrap .cgr-text.cgr-clamp.cgr-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cgr-wrap .cgr-more {
	align-self: var(--cgr-head-justify, flex-start);
	background: none; border: 0; padding: 0; margin: 0;
	color: var(--cgr-accent);
	font: inherit; font-weight: 600; font-size: 14px;
	cursor: pointer;
	box-shadow: none;
}
.cgr-wrap .cgr-more:hover, .cgr-wrap .cgr-more:focus { background: none; color: var(--cgr-accent); text-decoration: underline; }

/* ---------- Navigatie ---------- */
.cgr-wrap .cgr-arrow {
	width: 40px; height: 40px;
	display: var(--cgr-arrows);
	align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid #e8eaed;
	background-color: #fff;
	color: #3c4043;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(60,64,67,.12);
	transition: background-color .2s, color .2s, border-color .2s;
}
.cgr-wrap .cgr-arrow svg { width: 50%; height: 50%; fill: currentColor; }
.cgr-wrap .cgr-arrow:hover, .cgr-wrap .cgr-arrow:focus { background-color: var(--cgr-accent); color: #fff; border-color: var(--cgr-accent); }
.cgr-wrap .cgr-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; }
.cgr-wrap .cgr-dot {
	width: var(--cgr-dot); height: var(--cgr-dot); min-height: 0; min-width: 0;
	padding: 0; border: 0; border-radius: 999px;
	background-color: var(--cgr-star-empty);
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}
.cgr-wrap .cgr-dot.is-active { width: var(--cgr-dot-active); background-color: var(--cgr-accent); }
.cgr-wrap .cgr-arrow:focus-visible, .cgr-wrap .cgr-dot:focus-visible, .cgr-wrap .cgr-more:focus-visible, .cgr-wrap .cgr-write-btn:focus-visible {
	outline: 2px solid var(--cgr-accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cgr-wrap .cgr-track.cgr-animate { transition-duration: .01ms; }
}