/**
 * EHERO Woo Reviews - Frontend Styles
 *
 * Modern, beautiful CSS for review display widgets.
 *
 * @package Ehero_Woo_Reviews
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	--ehero-wr-gold: #f5a623;
	--ehero-wr-text: #374151;
	--ehero-wr-text-muted: #9ca3af;
	--ehero-wr-border: #e5e7eb;
	--ehero-wr-bg: #ffffff;
	--ehero-wr-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--ehero-wr-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.12);
	--ehero-wr-radius: 12px;
	--ehero-wr-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   1. Base Container
   ========================================================================== */

.ehero-wr-reviews-container {
	--ehero-wr-cols: 3;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	line-height: 1.5;
	color: var(--ehero-wr-text);
}

.ehero-wr-reviews-container[data-columns="1"] { --ehero-wr-cols: 1; }
.ehero-wr-reviews-container[data-columns="2"] { --ehero-wr-cols: 2; }
.ehero-wr-reviews-container[data-columns="3"] { --ehero-wr-cols: 3; }
.ehero-wr-reviews-container[data-columns="4"] { --ehero-wr-cols: 4; }
.ehero-wr-reviews-container[data-columns="5"] { --ehero-wr-cols: 5; }
.ehero-wr-reviews-container[data-columns="6"] { --ehero-wr-cols: 6; }
.ehero-wr-reviews-container[data-columns="7"] { --ehero-wr-cols: 7; }
.ehero-wr-reviews-container[data-columns="8"] { --ehero-wr-cols: 8; }

.ehero-wr-reviews-container *,
.ehero-wr-reviews-container *::before,
.ehero-wr-reviews-container *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   2. Grid Layout
   ========================================================================== */

.ehero-wr-layout--grid {
	display: grid;
	grid-template-columns: repeat(var(--ehero-wr-cols, 3), 1fr);
	gap: 24px;
}

@media (max-width: 640px) {
	.ehero-wr-reviews-container {
		--ehero-wr-cols: 1 !important;
	}
	.ehero-wr-layout--grid {
		gap: 16px;
	}
}

/* ==========================================================================
   3. List Layout
   ========================================================================== */

.ehero-wr-layout--list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ehero-wr-layout--list .ehero-wr-review-card {
	max-width: 100%;
}

/* ==========================================================================
   4. Slider Layout
   ========================================================================== */

.ehero-wr-layout--slider {
	overflow: hidden;
}

.ehero-wr-slider-wrapper {
	position: relative;
}

.ehero-wr-slider-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ehero-wr-slider-track::-webkit-scrollbar {
	display: none;
}

.ehero-wr-slider-track .ehero-wr-review-card {
	flex: 0 0 calc(100% / var(--ehero-wr-slider-cols, 3) - 16px);
	min-width: 260px;
	scroll-snap-align: start;
}

.ehero-wr-slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--ehero-wr-bg);
	box-shadow: var(--ehero-wr-shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--ehero-wr-transition);
	z-index: 2;
	color: var(--ehero-wr-text);
	font-size: 20px;
	line-height: 1;
}

.ehero-wr-slider-nav:hover {
	box-shadow: var(--ehero-wr-shadow-hover);
	background: #f9fafb;
}

.ehero-wr-slider-nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ehero-wr-slider-nav--prev {
	left: -12px;
}

.ehero-wr-slider-nav--next {
	right: -12px;
}

@media (max-width: 768px) {
	.ehero-wr-slider-track .ehero-wr-review-card {
		flex: 0 0 calc(50% - 12px);
		min-width: 260px;
	}
}

@media (max-width: 480px) {
	.ehero-wr-slider-track .ehero-wr-review-card {
		flex: 0 0 100%;
		min-width: 100%;
	}

	.ehero-wr-slider-nav--prev {
		left: 8px;
	}

	.ehero-wr-slider-nav--next {
		right: 8px;
	}
}

/* ==========================================================================
   5. Masonry Layout
   ========================================================================== */

.ehero-wr-layout--masonry {
	column-count: var(--ehero-wr-cols, 3);
	column-gap: 20px;
}

.ehero-wr-layout--masonry .ehero-wr-review-card {
	display: inline-block;
	width: 100%;
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 24px;
}

.ehero-wr-layout--masonry .ehero-wr-review-card:hover {
	transform: none;
}

@media (max-width: 640px) {
	.ehero-wr-layout--masonry {
		column-count: 1;
		column-gap: 16px;
	}

	.ehero-wr-layout--masonry .ehero-wr-review-card {
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   5b. Testimonial Layout
   ========================================================================== */

.ehero-wr-layout--testimonial {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

@media (max-width: 768px) {
	.ehero-wr-layout--testimonial {
		grid-template-columns: 1fr;
	}
}

.ehero-wr-review-card--testimonial {
	text-align: center;
	padding: 32px 28px;
}

.ehero-wr-review-quote-icon {
	font-size: 48px;
	line-height: 1;
	color: var(--ehero-wr-gold);
	margin-bottom: 16px;
	opacity: 0.6;
}

.ehero-wr-review-card--testimonial .ehero-wr-review-text {
	font-size: 16px;
	font-style: italic;
	line-height: 1.7;
	margin-bottom: 20px;
}

.ehero-wr-review-card--testimonial .ehero-wr-review-rating-row {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.ehero-wr-review-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ehero-wr-border);
}

/* ==========================================================================
   5c. Bubble Layout
   ========================================================================== */

.ehero-wr-layout--bubble {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 700px;
}

.ehero-wr-review-card--bubble {
	background: none;
	box-shadow: none;
	padding: 0;
}

.ehero-wr-review-card--bubble:hover {
	transform: none;
	box-shadow: none;
}

.ehero-wr-bubble-content {
	background: var(--ehero-wr-bg);
	border-radius: 16px 16px 16px 4px;
	padding: 20px 24px;
	box-shadow: var(--ehero-wr-shadow);
	position: relative;
	margin-bottom: 12px;
}

.ehero-wr-bubble-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 16px;
}

.ehero-wr-review-card--bubble .ehero-wr-platform-logo {
	top: 12px;
	right: 12px;
}

.ehero-wr-review-card--bubble:nth-child(even) .ehero-wr-bubble-content {
	border-radius: 16px 16px 4px 16px;
}

.ehero-wr-review-card--bubble:nth-child(even) .ehero-wr-bubble-author {
	flex-direction: row-reverse;
	padding-left: 0;
	padding-right: 16px;
}

/* Dark theme - Testimonial Layout */
.ehero-wr-theme--dark .ehero-wr-review-card--testimonial {
	background: var(--ehero-wr-bg);
}

.ehero-wr-theme--dark .ehero-wr-review-footer {
	border-top-color: var(--ehero-wr-border);
}

/* Dark theme - Bubble Layout */
.ehero-wr-theme--dark .ehero-wr-bubble-content {
	background: var(--ehero-wr-bg);
	box-shadow: var(--ehero-wr-shadow);
}

/* ==========================================================================
   6. Review Card
   ========================================================================== */

.ehero-wr-review-card {
	position: relative;
	background: var(--ehero-wr-bg);
	border-radius: var(--ehero-wr-radius);
	box-shadow: var(--ehero-wr-shadow);
	padding: 24px;
	transition: transform var(--ehero-wr-transition), box-shadow var(--ehero-wr-transition);
}

.ehero-wr-review-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ehero-wr-shadow-hover);
}

/* Platform logo icon (top-right corner of card) */
.ehero-wr-platform-logo {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.ehero-wr-platform-logo__svg {
	display: block;
}
.ehero-wr-platform-logo--facebook { color: #1877F2; }
.ehero-wr-platform-logo--trustpilot { color: #00B67A; }
.ehero-wr-platform-logo--tripadvisor { color: #34E0A1; }
.ehero-wr-platform-logo--yelp { color: #FF1A1A; }

/* Rating row (stars below header) */
.ehero-wr-review-rating-row {
	margin-bottom: 12px;
}

/* ==========================================================================
   7. Review Header
   ========================================================================== */

.ehero-wr-review-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.ehero-wr-review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ehero-wr-review-avatar-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	color: #6b7280;
	flex-shrink: 0;
}

.ehero-wr-review-meta {
	flex: 1;
	min-width: 0;
}

.ehero-wr-review-author {
	font-weight: 600;
	font-size: 15px;
	color: var(--ehero-wr-text);
	margin: 0 0 2px;
	padding-right: 36px;
}

/* ==========================================================================
   8. Stars
   ========================================================================== */

.ehero-wr-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--ehero-wr-gold);
}

.ehero-wr-star--full {
	opacity: 1;
}

.ehero-wr-star--half {
	display: inline-block;
	color: var(--ehero-wr-gold);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.ehero-wr-star--half {
		background: linear-gradient(90deg, var(--ehero-wr-gold) 50%, #e5e7eb 50%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.ehero-wr-star--empty {
	color: #e5e7eb;
}

.ehero-wr-stars--small {
	font-size: 14px;
}

.ehero-wr-stars--small .ehero-wr-star--half {
	font-size: 14px;
}

.ehero-wr-stars--medium {
	font-size: 18px;
}

.ehero-wr-stars--large {
	font-size: 24px;
}

/* ==========================================================================
   9. Review Text
   ========================================================================== */

.ehero-wr-review-text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ehero-wr-text);
	margin: 0 0 12px;
}

.ehero-wr-review-text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   10. Review Date
   ========================================================================== */

.ehero-wr-review-date {
	font-size: 13px;
	color: var(--ehero-wr-text-muted);
	margin: 0;
}

/* ==========================================================================
   11. Platform Badges
   ========================================================================== */

.ehero-wr-platform-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
	line-height: 1;
}

.ehero-wr-platform-icon {
	flex-shrink: 0;
	display: block;
}

.ehero-wr-platform-badge--google {
	background: #fff;
	color: #3c4043;
	border: 1px solid #dadce0;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.ehero-wr-platform-badge--manual {
	background: #f3f4f6;
	color: #6b7280;
	border: 1px solid #e5e7eb;
}

.ehero-wr-platform-badge--facebook {
	background: #1877f2;
	color: #fff;
}

.ehero-wr-platform-badge--tripadvisor {
	background: #00aa6c;
	color: #fff;
}

/* Dark theme badge overrides */
.ehero-wr-theme--dark .ehero-wr-platform-badge--google {
	background: #303134;
	color: #e8eaed;
	border-color: #5f6368;
}

.ehero-wr-theme--dark .ehero-wr-platform-badge--manual {
	background: #374151;
	color: #9ca3af;
	border-color: #4b5563;
}

/* ==========================================================================
   12. Summary Header
   ========================================================================== */

.ehero-wr-summary {
	display: flex;
	align-items: center;
	gap: 20px;
	grid-column: 1 / -1;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ehero-wr-border);
}

.ehero-wr-summary-rating {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: var(--ehero-wr-text);
}

.ehero-wr-summary-stars {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ehero-wr-summary-count {
	font-size: 15px;
	color: var(--ehero-wr-text-muted);
}

/* ==========================================================================
   12b. Business Header
   ========================================================================== */

.ehero-wr-business-header {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ehero-wr-border);
}

.ehero-wr-business-header--full,
.ehero-wr-business-header--card {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ehero-wr-bh__photo {
	flex-shrink: 0;
}

.ehero-wr-bh__photo img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.ehero-wr-bh__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4285F4, #34A853);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

.ehero-wr-bh__info {
	flex: 1;
	min-width: 0;
}

.ehero-wr-bh__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ehero-wr-text);
	margin-bottom: 4px;
}

.ehero-wr-bh__name a {
	color: inherit;
	text-decoration: none;
}

.ehero-wr-bh__name a:hover {
	text-decoration: underline;
}

.ehero-wr-bh__name svg {
	flex-shrink: 0;
}

.ehero-wr-bh__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ehero-wr-bh__score {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--ehero-wr-text);
}

.ehero-wr-bh__count {
	font-size: 14px;
	color: var(--ehero-wr-text-muted);
}

.ehero-wr-bh__write-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #1a73e8;
	background: #fff;
	border: 2px solid #1a73e8;
	border-radius: 24px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
	margin-left: auto;
}

.ehero-wr-bh__write-btn:hover {
	background: #1a73e8;
	color: #fff;
}

.ehero-wr-business-header--compact {
	display: flex;
	align-items: center;
}

.ehero-wr-bh__compact-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ehero-wr-bh__compact-inner svg {
	flex-shrink: 0;
}

.ehero-wr-bh__write-link {
	font-size: 13px;
	color: #1a73e8;
	text-decoration: none;
	font-weight: 500;
	padding-left: 10px;
	border-left: 1px solid var(--ehero-wr-border);
}

.ehero-wr-bh__write-link:hover {
	text-decoration: underline;
}

.ehero-wr-business-header--minimal {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ehero-wr-business-header--minimal .ehero-wr-bh__score {
	font-size: 42px;
}

.ehero-wr-theme--dark .ehero-wr-bh__write-btn {
	background: transparent;
	border-color: #8ab4f8;
	color: #8ab4f8;
}

.ehero-wr-theme--dark .ehero-wr-bh__write-btn:hover {
	background: #8ab4f8;
	color: #1f2937;
}

.ehero-wr-theme--dark .ehero-wr-bh__write-link {
	color: #8ab4f8;
	border-left-color: #374151;
}

.ehero-wr-theme--dark .ehero-wr-bh__initial {
	background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

@media (max-width: 640px) {
	.ehero-wr-business-header--full,
	.ehero-wr-business-header--card {
		flex-direction: column;
		align-items: flex-start;
	}

	.ehero-wr-bh__write-btn {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

	.ehero-wr-business-header--minimal .ehero-wr-bh__score {
		font-size: 32px;
	}
}

/* ==========================================================================
   13. Badge Widget
   ========================================================================== */

.ehero-wr-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: var(--ehero-wr-bg);
	border-radius: 8px;
	box-shadow: var(--ehero-wr-shadow);
}

.ehero-wr-badge-rating {
	font-size: 20px;
	font-weight: 700;
	color: var(--ehero-wr-text);
}

.ehero-wr-badge-stars {
	flex-shrink: 0;
}

.ehero-wr-badge-count {
	font-size: 13px;
	color: var(--ehero-wr-text-muted);
}

/* ==========================================================================
   14. Themes
   ========================================================================== */

/* Light (default) - already applied above */

/* Dark Theme */
.ehero-wr-reviews-container.ehero-wr-theme--dark {
	--ehero-wr-text: #f3f4f6;
	--ehero-wr-text-muted: #9ca3af;
	--ehero-wr-border: #374151;
	--ehero-wr-bg: #1f2937;
	--ehero-wr-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--ehero-wr-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.4);
	background: #111827;
	padding: 24px;
	border-radius: var(--ehero-wr-radius);
}

.ehero-wr-theme--dark .ehero-wr-review-card {
	background: var(--ehero-wr-bg);
}

.ehero-wr-theme--dark .ehero-wr-review-avatar-placeholder {
	background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
	color: #9ca3af;
}

.ehero-wr-theme--dark .ehero-wr-star--empty {
	color: #4b5563;
}

.ehero-wr-theme--dark .ehero-wr-slider-nav {
	background: #1f2937;
	color: #f3f4f6;
}

.ehero-wr-theme--dark .ehero-wr-slider-nav:hover {
	background: #374151;
}

.ehero-wr-theme--dark .ehero-wr-badge {
	background: var(--ehero-wr-bg);
}

/* Minimal Theme */
.ehero-wr-reviews-container.ehero-wr-theme--minimal {
	--ehero-wr-shadow: none;
	--ehero-wr-shadow-hover: none;
}

.ehero-wr-theme--minimal .ehero-wr-review-card {
	box-shadow: none;
	border: 1px solid var(--ehero-wr-border);
	border-radius: 4px;
}

.ehero-wr-theme--minimal .ehero-wr-review-card:hover {
	box-shadow: none;
	border-color: #9ca3af;
	transform: none;
}

.ehero-wr-theme--minimal .ehero-wr-badge {
	box-shadow: none;
	border: 1px solid var(--ehero-wr-border);
}

.ehero-wr-theme--minimal .ehero-wr-bh__write-btn {
	border-radius: 4px;
	border-width: 1px;
}

/* Card Theme (heavier shadows, more padding) */
.ehero-wr-reviews-container.ehero-wr-theme--card {
	--ehero-wr-radius: 16px;
}

.ehero-wr-theme--card .ehero-wr-review-card {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	padding: 28px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.ehero-wr-theme--card .ehero-wr-review-card:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	transform: translateY(-6px);
}

.ehero-wr-theme--card .ehero-wr-badge {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   15. Google Business Badge
   ========================================================================== */

.ehero-wr-google-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	color: var(--ehero-wr-text);
	box-sizing: border-box;
}

.ehero-wr-google-badge *,
.ehero-wr-google-badge *::before,
.ehero-wr-google-badge *::after {
	box-sizing: inherit;
}

/* Card style (default) */
.ehero-wr-google-badge--card {
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 12px;
	padding: 28px 32px;
	box-shadow: 0 1px 4px rgba(60, 64, 67, 0.08);
	max-width: 300px;
}

/* Inline style */
.ehero-wr-google-badge--inline {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	text-align: left;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: 0 1px 4px rgba(60, 64, 67, 0.08);
	max-width: 480px;
}

.ehero-wr-google-badge--inline .ehero-wr-google-badge__info {
	flex: 1;
	min-width: 0;
}

.ehero-wr-google-badge--inline .ehero-wr-google-badge__actions {
	margin-top: 0;
}

/* Minimal style */
.ehero-wr-google-badge--minimal {
	background: transparent;
	padding: 0;
}

/* Photo / logo */
.ehero-wr-google-badge__photo {
	margin-bottom: 16px;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.ehero-wr-google-badge--inline .ehero-wr-google-badge__photo {
	margin-bottom: 0;
}

.ehero-wr-google-badge__photo img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.ehero-wr-google-badge__initial {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: linear-gradient(135deg, #e8eaed 0%, #dadce0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 600;
	color: #5f6368;
}

/* Name */
.ehero-wr-google-badge__name {
	font-size: 17px;
	font-weight: 600;
	color: #202124;
	margin-bottom: 8px;
	line-height: 1.3;
}

.ehero-wr-google-badge__name a {
	color: inherit;
	text-decoration: none;
}

.ehero-wr-google-badge__name a:hover {
	text-decoration: underline;
}

/* Rating stars */
.ehero-wr-google-badge__rating {
	margin-bottom: 4px;
}

.ehero-wr-google-badge__rating .ehero-wr-stars {
	color: #fbbc04;
}

/* Review count */
.ehero-wr-google-badge__count {
	font-size: 14px;
	color: #5f6368;
	margin-bottom: 4px;
}

/* Address */
.ehero-wr-google-badge__address {
	font-size: 13px;
	color: #80868b;
	margin-bottom: 4px;
}

/* Write a Review button */
.ehero-wr-google-badge__actions {
	margin-top: 16px;
}

.ehero-wr-google-badge__write-btn {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #fff;
	color: #1a73e8;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	line-height: 1;
}

.ehero-wr-google-badge__write-btn:hover {
	background: #f8f9fa;
	box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
	color: #174ea6;
	text-decoration: none;
}

/* Dark theme support */
.ehero-wr-theme--dark .ehero-wr-google-badge--card,
.ehero-wr-theme--dark .ehero-wr-google-badge--inline {
	background: #303134;
	border-color: #5f6368;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ehero-wr-theme--dark .ehero-wr-google-badge__name {
	color: #e8eaed;
}

.ehero-wr-theme--dark .ehero-wr-google-badge__count {
	color: #9aa0a6;
}

.ehero-wr-theme--dark .ehero-wr-google-badge__address {
	color: #9aa0a6;
}

.ehero-wr-theme--dark .ehero-wr-google-badge__initial {
	background: linear-gradient(135deg, #3c4043 0%, #5f6368 100%);
	color: #9aa0a6;
}

.ehero-wr-theme--dark .ehero-wr-google-badge__write-btn {
	background: #303134;
	border-color: #5f6368;
	color: #8ab4f8;
}

.ehero-wr-theme--dark .ehero-wr-google-badge__write-btn:hover {
	background: #3c4043;
	color: #aecbfa;
}

/* Responsive */
@media (max-width: 480px) {
	.ehero-wr-google-badge--card {
		padding: 20px 24px;
		max-width: 100%;
	}

	.ehero-wr-google-badge--inline {
		flex-direction: column;
		text-align: center;
		max-width: 100%;
	}

	.ehero-wr-google-badge--inline .ehero-wr-google-badge__photo {
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   16. No Reviews State
   ========================================================================== */

.ehero-wr-no-reviews {
	text-align: center;
	padding: 48px 24px;
	font-size: 16px;
	color: var(--ehero-wr-text-muted);
	background: #f9fafb;
	border-radius: var(--ehero-wr-radius);
	border: 1px dashed var(--ehero-wr-border);
}

.ehero-wr-no-reviews::before {
	content: "★";
	display: block;
	font-size: 48px;
	color: #e5e7eb;
	margin-bottom: 16px;
}

/* ==========================================================================
   16. Schema.org Hidden Markup
   ========================================================================== */

.ehero-wr-schema-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   17. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1600px) {
	.ehero-wr-reviews-container[data-columns="8"] { --ehero-wr-cols: 6; }
	.ehero-wr-reviews-container[data-columns="7"] { --ehero-wr-cols: 5; }
}

@media (max-width: 1280px) {
	.ehero-wr-reviews-container[data-columns="8"],
	.ehero-wr-reviews-container[data-columns="7"],
	.ehero-wr-reviews-container[data-columns="6"] { --ehero-wr-cols: 4; }
	.ehero-wr-reviews-container[data-columns="5"] { --ehero-wr-cols: 4; }
	.ehero-wr-reviews-container[data-columns="4"] { --ehero-wr-cols: 3; }
}

@media (max-width: 1024px) {
	.ehero-wr-reviews-container[data-columns="8"],
	.ehero-wr-reviews-container[data-columns="7"],
	.ehero-wr-reviews-container[data-columns="6"],
	.ehero-wr-reviews-container[data-columns="5"] { --ehero-wr-cols: 3; }
	.ehero-wr-reviews-container[data-columns="4"],
	.ehero-wr-reviews-container[data-columns="3"] { --ehero-wr-cols: 2; }
}

@media (max-width: 768px) {
	.ehero-wr-reviews-container[data-columns="8"],
	.ehero-wr-reviews-container[data-columns="7"],
	.ehero-wr-reviews-container[data-columns="6"],
	.ehero-wr-reviews-container[data-columns="5"] { --ehero-wr-cols: 2; }
}

@media (max-width: 640px) {
	.ehero-wr-review-card {
		padding: 20px;
	}

	.ehero-wr-summary-rating {
		font-size: 36px;
	}

	.ehero-wr-summary {
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.ehero-wr-theme--dark {
		padding: 16px;
	}
}

/* ==========================================================================
   18. Smooth Animations
   ========================================================================== */

@keyframes ehero-wr-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ehero-wr-review-card {
	animation: ehero-wr-fade-in 0.4s ease-out backwards;
}

.ehero-wr-review-card:nth-child(1) { animation-delay: 0.05s; }
.ehero-wr-review-card:nth-child(2) { animation-delay: 0.1s; }
.ehero-wr-review-card:nth-child(3) { animation-delay: 0.15s; }
.ehero-wr-review-card:nth-child(4) { animation-delay: 0.2s; }
.ehero-wr-review-card:nth-child(5) { animation-delay: 0.25s; }
.ehero-wr-review-card:nth-child(6) { animation-delay: 0.3s; }
.ehero-wr-review-card:nth-child(7) { animation-delay: 0.35s; }
.ehero-wr-review-card:nth-child(8) { animation-delay: 0.4s; }
.ehero-wr-review-card:nth-child(9) { animation-delay: 0.45s; }
.ehero-wr-review-card:nth-child(10) { animation-delay: 0.5s; }

/* ==========================================================================
   12. Read More / Text Clamp
   ========================================================================== */

.ehero-wr-text-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ehero-wr-text-clamped p:last-child {
	margin-bottom: 0;
}
.ehero-wr-readmore {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	background: none;
	border: none;
	color: var(--ehero-wr-accent, #4285F4);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.2s;
}
.ehero-wr-readmore:hover {
	color: var(--ehero-wr-text, #1a1a2e);
	text-decoration: underline;
}

/* ==========================================================================
   13. Frontend Review Modal
   ========================================================================== */

.ehero-wr-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}
.ehero-wr-modal-overlay.ehero-wr-modal--open {
	opacity: 1;
	visibility: visible;
}
.ehero-wr-modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 92%;
	max-width: 560px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	transform: translateY(20px) scale(0.97);
	transition: transform 0.25s ease;
}
.ehero-wr-modal-overlay.ehero-wr-modal--open .ehero-wr-modal {
	transform: translateY(0) scale(1);
}
.ehero-wr-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid #eee;
}
.ehero-wr-modal__header h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1a1a2e;
}
.ehero-wr-modal__close {
	background: none;
	border: none;
	font-size: 26px;
	color: #aaa;
	cursor: pointer;
	line-height: 1;
	padding: 0 4px;
	transition: color 0.15s;
}
.ehero-wr-modal__close:hover {
	color: #e74c3c;
}
.ehero-wr-modal__body {
	padding: 24px;
	overflow-y: auto;
	line-height: 1.75;
	font-size: 15px;
	color: #333;
	white-space: pre-wrap;
	word-wrap: break-word;
}
@media (max-width: 480px) {
	.ehero-wr-modal {
		width: 96%;
		max-height: 85vh;
	}
	.ehero-wr-modal__body {
		padding: 16px;
		font-size: 14px;
	}
}