/* Voxel Google Reviews — frontend styles */

.vgr-reviews {
	--vgr-star-color: #fbbc04;
	--vgr-star-empty: #e0e0e0;
	--vgr-card-bg: #ffffff;
	--vgr-card-border: #e6e6e6;
	--vgr-text: #202124;
	--vgr-muted: #5f6368;
	--vgr-accent: #1a73e8;
	--vgr-radius: 10px;

	/* Nav button state colors — referenced by rules below.
	   Elementor widget controls override these via {{WRAPPER}}. */
	--vgr-nav-color:         var(--vgr-text);
	--vgr-nav-bg:            var(--vgr-card-bg);
	--vgr-nav-border:        var(--vgr-card-border);
	--vgr-nav-hover-color:   #ffffff;
	--vgr-nav-hover-bg:      var(--vgr-accent);
	--vgr-nav-hover-border:  var(--vgr-accent);

	font-size: 14px;
	line-height: 1.5;
	color: var(--vgr-text);
}

.vgr-reviews-heading {
	margin: 0 0 12px;
	font-size: 1.1em;
	font-weight: 600;
}

.vgr-reviews-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	background: var(--vgr-card-bg);
	border: 1px solid var(--vgr-card-border);
	border-radius: var(--vgr-radius);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.vgr-summary-main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vgr-summary-number {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1;
}

.vgr-summary-count { color: var(--vgr-muted); font-size: 0.95em; }

.vgr-view-on-google {
	display: inline-block;
	padding: 6px 12px;
	color: var(--vgr-accent);
	text-decoration: none;
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
:where(.vgr-view-on-google:hover) { background: rgba(26,115,232,0.08); }

/* Stars — CSS overlay technique */
.vgr-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	color: var(--vgr-star-empty);
	font-size: 1em;
	letter-spacing: 2px;
	white-space: nowrap;
}
.vgr-stars::before { content: "\2605\2605\2605\2605\2605"; }
.vgr-stars-fill {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	color: var(--vgr-star-color);
	white-space: nowrap;
	pointer-events: none;
}
.vgr-stars-fill::before { content: "\2605\2605\2605\2605\2605"; }

/* Review cards — grid */
.vgr-review-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vgr-gap, 12px);
}

.vgr-review-card {
	padding: 16px;
	background: var(--vgr-card-bg);
	border: 1px solid var(--vgr-card-border);
	border-radius: var(--vgr-radius);
}

.vgr-review-header {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 8px;
}

.vgr-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1f3f4;
	flex-shrink: 0;
}

.vgr-review-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: var(--vgr-muted);
	text-transform: uppercase;
}

.vgr-review-author { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.vgr-review-author-name {
	font-weight: 500;
	color: var(--vgr-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vgr-review-author-name:hover { text-decoration: underline; }
:where(.vgr-review-author-name) { transition: color 0.15s; }

.vgr-review-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	color: var(--vgr-muted);
	font-size: 0.9em;
}

/*
 * Keep the relative time ("3 months ago") on a single line. Without
 * this, narrow carousel cards squeeze it into a 30px-wide column and
 * break it one word per line.
 */
.vgr-review-time {
	white-space: nowrap;
}

.vgr-review-text {
	margin: 0;
	/*
	 * Defensive resets — some themes (Voxel included on certain templates)
	 * apply `text-indent` to all <p> elements, which pushes the first line
	 * of each review ~2em to the right and looks like leading whitespace
	 * in the text. Reset everything that could leak in from a parent
	 * stylesheet so the card renders predictably.
	 */
	text-indent: 0;
	padding: 0;
	/*
	 * `pre-line` preserves intentional \n line breaks (paragraph
	 * separation from Google reviewers) but collapses runs of spaces /
	 * tabs / NBSPs to a single space. Combined with the PHP-side
	 * normalization in Reviews_Fetcher::prepare_review_text() (which
	 * collapses \n+ to a single \n), this produces clean paragraph
	 * separation with zero stray gaps — regardless of how messy the
	 * original review text is.
	 */
	white-space: pre-line;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: var(--vgr-text);
}

.vgr-review-more {
	color: var(--vgr-accent);
	text-decoration: none;
	font-weight: 500;
	margin-left: 4px;
	white-space: nowrap;
	transition: color 0.15s;
}
:where(.vgr-review-more:hover) { text-decoration: underline; }

/* Carousel */
.vgr-carousel { position: relative; }

.vgr-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 0 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	align-items: stretch;
}
.vgr-carousel-track::-webkit-scrollbar { height: 6px; }
.vgr-carousel-track::-webkit-scrollbar-thumb {
	background: var(--vgr-card-border);
	border-radius: 3px;
}

.vgr-carousel-track .vgr-review-card {
	flex: 0 0 calc((100% - (var(--vgr-cpv, 1) - 1) * var(--vgr-gap, 16px)) / var(--vgr-cpv, 1));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.vgr-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
.vgr-carousel-nav.vgr-carousel-nav-hidden { display: none; }

.vgr-carousel-prev,
.vgr-carousel-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--vgr-nav-border);
	background: var(--vgr-nav-bg);
	color: var(--vgr-nav-color);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.vgr-carousel-prev svg,
.vgr-carousel-next svg { fill: currentColor; }

.vgr-carousel-prev:hover:not(:disabled),
.vgr-carousel-next:hover:not(:disabled) {
	background: var(--vgr-nav-hover-bg);
	color: var(--vgr-nav-hover-color);
	border-color: var(--vgr-nav-hover-border);
}
.vgr-carousel-prev:disabled,
.vgr-carousel-next:disabled {
	opacity: 0.35;
	cursor: default;
}

.vgr-attribution {
	margin-top: 14px;
	color: var(--vgr-muted);
	font-size: 0.85em;
	text-align: right;
}
.vgr-attribution a { color: inherit; text-decoration: none; transition: color 0.15s; }
:where(.vgr-attribution a:hover) { text-decoration: underline; }