/**
 * simplydwell/community-reviews — Figma "Reviews" section.
 *
 * The markup is produced by the "Widget for Google Reviews" plugin ([grw …] shortcode):
 * a .grw-header (place name + overall rating + "Based on N reviews") and a .grw-content
 * carousel of .grw-review cards with prev/next + dots. This file restyles that output to
 * the Figma design — a left text column beside the testimonial cards — WITHOUT changing
 * the markup or the carousel behaviour. Everything is scoped under .sd-creviews and uses
 * !important only where the plugin's own stylesheet has to be overridden.
 *
 * Brand tokens: orange #D46F35 · gold #E2BB61 · dark #1F242E · grey #737A87 ·
 * light grey #A5A7AB · cream #FAF8F5.
 */

@font-face {
	font-family: "Lexend";
	src: url( "../../assets/fonts/lexend-latin-300-800.woff2" ) format( "woff2" );
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

.sd-creviews {
	box-sizing: border-box;
	width: 100%;
	background: #FAF8F5;
    padding: clamp(48px, 9vw, 120px) clamp(24px, 6vw, 120px);
	font-family: 'Lexend', 'Helvetica Neue', Arial, sans-serif;
}

.sd-creviews__widget {
	width: 100%;
	max-width: 1440px;
}
.sd-creviews .wp-gr .grw-review .wp-google-feedback{
	height: 220px !important;
}
/* ── Row: header (left) beside the carousel (right) ──────────────────────────── */
.sd-creviews .grw-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: clamp( 32px, 7vw, 118px ) !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: 'Lexend', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Left column: the rating header ──────────────────────────────────────────── */
.sd-creviews .grw-header {
	flex: 0 0 200px !important;
	width: 200px !important;
	max-width: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.sd-creviews .grw-header-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

/* Figma "REVIEWS" eyebrow above the name (the plugin has no such element). */
.sd-creviews .grw-header-inner::before {
	content: "REVIEWS";
	display: block;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.17em;
	color: #d46f35;
}

/* The place photo in the header isn't in the Figma left column. */
.sd-creviews .grw-header .grw-img-wrap {
	display: none !important;
}

.sd-creviews .grw-header .wp-google-name,
.sd-creviews .grw-header .wp-google-name a {
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 32px !important;
	color: #1f242e !important;
	text-decoration: none !important;
}

.sd-creviews .grw-header .wp-google-based {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #a5a7ab !important;
}

/* "powered by Google" + "review us" aren't in the Figma. */
.sd-creviews .grw-header .wp-google-powered,
.sd-creviews .grw-header .wp-google-wr {
	display: none !important;
}

/* ── Stars (overall + per card): brand gold-orange ───────────────────────────── */
.sd-creviews .rpi-stars {
	color: #d46f35 !important;
}

.sd-creviews .rpi-stars::after,
.sd-creviews .rpi-stars > span {
	background: linear-gradient( 90deg, #d46f35 0%, #e2bb61 100% ) !important;
	color: #d46f35 !important;
}

.sd-creviews .grw-header .rpi-stars {
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 26px !important;
}

/* ── Right column: the carousel ──────────────────────────────────────────────── */
.sd-creviews .grw-content {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Testimonial card ────────────────────────────────────────────────────────── */
.sd-creviews .grw-review-inner {
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 24px !important;
	padding: 24px !important;
	background: #fff !important;
	border: 0 !important;
	border-left: 3px solid #e2bb61 !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.17 ) !important;
}

/* User row: avatar + name + time */
.sd-creviews .grw-review .grw-img-wrap,
.sd-creviews .grw-review .grw-img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	object-fit: cover !important;
}

.sd-creviews .grw-review .wp-google-name,
.sd-creviews .grw-review .wp-google-name a {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #1f242e !important;
	text-decoration: none !important;
}

.sd-creviews .grw-review .wp-google-time {
	font-weight: 700 !important;
	font-size: 10px !important;
	line-height: 15px !important;
	color: #737a87 !important;
}

.sd-creviews .grw-review .rpi-stars {
	font-size: 20px !important;
}

/* Review text */
.sd-creviews .grw-review .wp-google-text {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #1f242e !important;
}

/* Hide the small Google glyph in the corner of each card (not in the Figma). */
.sd-creviews .grw-review-inner > svg {
	display: none !important;
}

/* "SimplyDwell" branded in the title (span injected by render.php). */
.sd-creviews .sd-creviews__grad {
	background: linear-gradient( 90deg, #d46f35 0%, #e2bb61 100% ) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

/* ── Prev / Next controls: a row BELOW the cards (Figma "Controls") ───────────── */
/* The plugin renders the arrows as absolute side-overlays; lay the carousel inner out
   as a wrapping flex column so the track takes a full row and the two buttons (+ dots)
   drop onto a row beneath it, left-aligned. The carousel JS is untouched. */
.sd-creviews .grw-content-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 24px !important;
	position: static !important;
}

.sd-creviews .grw-content-inner .rpi-slides {
	flex: 1 1 100% !important;
	order: 0 !important;
}

.sd-creviews .grw-prev {
	order: 1 !important;
}

.sd-creviews .grw-next {
	order: 2 !important;
}

.sd-creviews .rpi-dots-wrap {
	order: 3 !important;
	margin: 0 !important;
}

.sd-creviews .grw-prev,
.sd-creviews .grw-next {
	box-sizing: border-box !important;
	position: static !important;
	transform: none !important;
	inset: auto !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #faf8f5 !important;
	border: 0.5px solid #a5a7ab !important;
	border-radius: 20px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	color: #1f242e !important;
	font-size: 0 !important; /* hide any plugin text/glyph */
	opacity: 1 !important;
	visibility: visible !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.sd-creviews .grw-prev:hover,
.sd-creviews .grw-next:hover,
.sd-creviews .grw-prev:focus-visible,
.sd-creviews .grw-next:focus-visible {
	background: #f1ede4 !important;
	border-color: #1f242e !important;
	outline: none !important;
}

/* Replace the plugin's own arrow art with a clean chevron drawn from borders. */
.sd-creviews .grw-prev::after,
.sd-creviews .grw-next::after {
	content: none !important;
	display: none !important;
}

.sd-creviews .rpi-ltgt.rpi-gt::before{
	content: none !important;
}

.sd-creviews .grw-prev::before,
.sd-creviews .grw-next::before {
	content: "" !important;
	display: block !important;
	width: 8px !important;
	height: 8px !important;
	border: 0 !important;
	border-top: 1.5px solid #1f242e !important;
	border-right: 1.5px solid #1f242e !important;
	background: none !important;
}

/* .sd-creviews .grw-prev::before {
	transform: rotate( -135deg ) !important; 
	margin-left: 2px !important;
} */

/* .sd-creviews .grw-next::before {
	transform: rotate( 45deg ) !important;
	margin-right: 2px !important;
} */

/* ── Dots ────────────────────────────────────────────────────────────────────── */
.sd-creviews .rpi-dot {
	background: #d8d8d8 !important;
}

.sd-creviews .rpi-dot.active {
	background: #d46f35 !important;
}

/* ── Responsive: stack the header above the carousel ─────────────────────────── */
@media ( max-width: 1024px ) {
	.sd-creviews {
		padding: clamp( 48px, 9vw, 120px ) clamp( 20px, 6vw, 120px );
	}
	.sd-creviews .grw-row {
		flex-direction: column !important;
		gap: clamp( 24px, 5vw, 40px ) !important;
	}
	.sd-creviews .grw-header {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
	}
}

/* High-specificity override: beat the theme's serif heading !important rule. */
.sd-creviews .grw-header .wp-google-name,
.sd-creviews .grw-header .wp-google-name a,
.sd-creviews .grw-review .wp-google-name,
.sd-creviews .grw-review .wp-google-text {
	font-family: 'Lexend', 'Helvetica Neue', Arial, sans-serif !important;
}

.sd-creviews .wp-gr .grw-review-inner.grw-round{
	border-radius: 0px !important;
}

.sd-creviews .wp-gr .grw-content-inner{
	padding-bottom: 70px !important;
}

.sd-creviews .rpi .rpi-ltgt.rpi-lt,.sd-creviews .rpi .rpi-ltgt.rpi-gt{
	bottom: 0px !important;
	width: 44px !important;
	height: 44px !important;
}

.sd-creviews .rpi .rpi-ltgt.rpi-gt{
	left: 55px !important;
}

.sd-creviews .wp-gr.rpi a.wp-google-name{
	color: #1f242e !important;
}
.sd-creviews .rpi{
	--slider-btn-full: 0px;
	--slider-btn-out: none;
}