/* BO Google Reviews — frontend */

.bo-gr {
	--bo-gr-columns: 3;
	--bo-gr-columns-tablet: 2;
	--bo-gr-columns-mobile: 1;
	--bo-gr-card-bg: #f5f5f5;
	--bo-gr-text: #3c4858;
	--bo-gr-name: #1d2327;
	--bo-gr-star: #fbbc05;
	--bo-gr-star-empty: #dadce0;
	--bo-gr-accent: #1a73e8;
	--bo-gr-radius: 12px;
	--bo-gr-gap: 20px;
	--bo-gr-arrow-size: 40px;
	--bo-gr-arrow-bg: #ffffff;
	--bo-gr-arrow-color: #1d2327;
	box-sizing: border-box;
	color: var(--bo-gr-text);
	font-size: 15px;
	line-height: 1.55;
}
.bo-gr *,
.bo-gr *::before,
.bo-gr *::after { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.bo-gr__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--bo-gr-card-bg);
	border-radius: var(--bo-gr-radius);
	padding: 16px 22px;
	margin-bottom: var(--bo-gr-gap);
}
.bo-gr__header .bo-gr__g-logo svg { display: block; width: 26px; height: 26px; }
.bo-gr__header-rating { font-size: 20px; font-weight: 700; color: var(--bo-gr-name); }
.bo-gr__header-count { color: var(--bo-gr-text); }
.bo-gr__header-count a { color: var(--bo-gr-accent); text-decoration: none; }
.bo-gr__header-count a:hover { text-decoration: underline; }

/* ── Sterren ────────────────────────────────────────────────────────────── */
.bo-gr-stars {
	display: inline-flex;
	line-height: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}
.bo-gr-star {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	color: var(--bo-gr-star-empty);
	flex: 0 0 auto;
}
.bo-gr-star > svg { display: block; width: 18px; height: 18px; }
.bo-gr-star__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	color: var(--bo-gr-star);
}
.bo-gr-star__fill > svg { display: block; width: 18px; height: 18px; max-width: none; }

/* ── Viewport ───────────────────────────────────────────────────────────── */
.bo-gr__viewport { position: relative; }

/* ── Grid ───────────────────────────────────────────────────────────────── */
.bo-gr--grid .bo-gr__track {
	display: grid;
	grid-template-columns: repeat(var(--bo-gr-columns), minmax(0, 1fr));
	gap: var(--bo-gr-gap);
}

/* Dynamische kolommen op basis van minimale kaartbreedte (auto-fit). */
.bo-gr--grid.bo-gr--autocols .bo-gr__track {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--bo-gr-min), 100%), 1fr));
}

/* ── Slider ─────────────────────────────────────────────────────────────── */
/* Ruimte links/rechts voor de navigatiepijlen; ze mogen licht over de kaarten hangen. */
.bo-gr--slider .bo-gr__viewport { padding: 0 26px; }
.bo-gr--slider .bo-gr__track {
	display: flex;
	gap: var(--bo-gr-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.bo-gr--slider .bo-gr__track::-webkit-scrollbar { display: none; }
.bo-gr--slider .bo-gr__track { cursor: grab; }
.bo-gr--slider .bo-gr__track img { -webkit-user-drag: none; user-select: none; }
.bo-gr--slider .bo-gr__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.bo-gr--slider .bo-gr__track.is-dragging a { pointer-events: none; }
.bo-gr--slider .bo-gr__card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--bo-gr-columns) - 1) * var(--bo-gr-gap)) / var(--bo-gr-columns));
}
/* Dynamische kaartbreedte in de slider: JS berekent hoeveel HELE kaarten passen
   (var --bo-gr-visible) op basis van de min-breedte; die vullen de ruimte precies. */
.bo-gr--slider.bo-gr--autocols .bo-gr__card {
	flex: 0 0 calc((100% - (var(--bo-gr-visible, 1) - 1) * var(--bo-gr-gap)) / var(--bo-gr-visible, 1));
}
.bo-gr .bo-gr__nav,
.bo-gr .bo-gr__nav:link,
.bo-gr .bo-gr__nav:visited {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 2;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	width: var(--bo-gr-arrow-size, 40px) !important;
	height: var(--bo-gr-arrow-size, 40px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--bo-gr-star-empty) !important;
	background: var(--bo-gr-arrow-bg, #fff) !important;
	color: var(--bo-gr-arrow-color, #1d2327) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: filter .15s, opacity .15s !important;
}
.bo-gr .bo-gr__nav > svg { display: block !important; width: 45% !important; height: 45% !important; }
.bo-gr .bo-gr__nav:hover,
.bo-gr .bo-gr__nav:focus { filter: brightness(0.94) !important; background: var(--bo-gr-arrow-bg, #fff) !important; color: var(--bo-gr-arrow-color, #1d2327) !important; }
.bo-gr .bo-gr__nav--prev { left: 0 !important; right: auto !important; }
.bo-gr .bo-gr__nav--next { right: 0 !important; left: auto !important; }
.bo-gr .bo-gr__nav[disabled] { opacity: .35 !important; cursor: default !important; }

/* ── Kaart ──────────────────────────────────────────────────────────────── */
.bo-gr__card {
	background: var(--bo-gr-card-bg);
	border-radius: var(--bo-gr-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.bo-gr__card-head { display: flex; align-items: center; gap: 12px; }
.bo-gr__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bo-gr-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bo-gr__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-gr__avatar-initial { color: #fff; font-weight: 600; font-size: 18px; }
.bo-gr__meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.bo-gr__name { font-weight: 600; color: var(--bo-gr-name); }
.bo-gr__date { font-size: 13px; opacity: .7; }
.bo-gr__card-g svg { display: block; width: 20px; height: 20px; }

.bo-gr__text { margin: 0; }
.bo-gr .bo-gr__more,
.bo-gr .bo-gr__more:link,
.bo-gr .bo-gr__more:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--bo-gr-accent) !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	line-height: inherit !important;
	cursor: pointer !important;
}
.bo-gr .bo-gr__more:hover,
.bo-gr .bo-gr__more:focus { background: none !important; color: var(--bo-gr-accent) !important; opacity: .85; text-decoration: underline !important; }
.bo-gr__empty { opacity: .7; }

/* ── Beheerdersmelding ──────────────────────────────────────────────────── */
.bo-gr__admin-notice {
	border: 1px solid #f0c36d;
	background: #fff8e5;
	color: #6b5200;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
}
.bo-gr__admin-notice a { color: #1a73e8; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bo-gr--grid .bo-gr__track { grid-template-columns: repeat(var(--bo-gr-columns-tablet), minmax(0, 1fr)); }
	.bo-gr--slider .bo-gr__card {
		flex-basis: calc((100% - (var(--bo-gr-columns-tablet) - 1) * var(--bo-gr-gap)) / var(--bo-gr-columns-tablet));
	}
}
@media (max-width: 600px) {
	.bo-gr--grid .bo-gr__track { grid-template-columns: repeat(var(--bo-gr-columns-mobile), minmax(0, 1fr)); }
	.bo-gr--slider .bo-gr__card {
		flex-basis: calc((100% - (var(--bo-gr-columns-mobile) - 1) * var(--bo-gr-gap)) / var(--bo-gr-columns-mobile));
	}
	.bo-gr--slider .bo-gr__viewport { padding: 0 20px; }
}

/* ── Element-zichtbaarheid (voor live preview / modifiers) ──────────────── */
.bo-gr.is-hide-header .bo-gr__header,
.bo-gr.is-hide-avatar .bo-gr__avatar,
.bo-gr.is-hide-rating .bo-gr__card .bo-gr-stars,
.bo-gr.is-hide-date .bo-gr__date,
.bo-gr.is-hide-google .bo-gr__card-g { display: none; }