/* =============================================================================
   RateMate — Blocks & Shortcodes (front end + block editor)
   Theme-neutral: inherits text colour, uses translucent borders so it works on
   light, dark and block themes.
   ============================================================================= */

.ratemate-block {
	--ratemate-star:   #f59e0b;
	--ratemate-accent: #6366f1;
	--ratemate-line:   rgba( 128, 128, 128, .28 );
	--ratemate-muted:  rgba( 128, 128, 128, .95 );
	--ratemate-gap:    16px;
	box-sizing: border-box;
	color: inherit;
}

.ratemate-block *,
.ratemate-block *::before,
.ratemate-block *::after {
	box-sizing: inherit;
}

.ratemate-block-empty {
	margin: 0;
	color: var( --ratemate-muted );
	font-style: italic;
}

/* ── Stars (partial fill via --ratemate-rating, 0–5) ───────────────────────── */
.ratemate-block-stars {
	display: inline-block;
	flex-shrink: 0;
	font-size: 1.05em;
	line-height: 1;
	letter-spacing: .06em;
	white-space: nowrap;
	background: linear-gradient(
		90deg,
		var( --ratemate-star ) calc( var( --ratemate-rating, 0 ) / 5 * 100% ),
		var( --ratemate-line ) 0
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── Reviews: layouts ──────────────────────────────────────────────────────── */
.ratemate-block-reviews {
	display: flex;
	flex-direction: column;
	gap: var( --ratemate-gap );
}

.ratemate-block--grid .ratemate-block-reviews {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}

/* ── Review card ───────────────────────────────────────────────────────────── */
.ratemate-block-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border: 1px solid var( --ratemate-line );
	border-radius: 10px;
}

.ratemate-block-review__header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ratemate-block-review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var( --ratemate-accent );
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.ratemate-block-review__meta {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ratemate-block-review__author {
	overflow: hidden;
	font-weight: 600;
	font-size: .9em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ratemate-block-review__verified {
	color: #16a34a;
	font-size: .75em;
	font-weight: 600;
}

.ratemate-block-review__title {
	margin: 0;
	font-weight: 700;
	font-size: .95em;
}

.ratemate-block-review__body {
	flex: 1;
	margin: 0;
	font-size: .9em;
	line-height: 1.6;
	opacity: .85;
}

.ratemate-block-review__photos {
	display: flex;
	gap: 6px;
}

.ratemate-block-review__photo {
	width: 56px;
	height: 56px;
	border: 1px solid var( --ratemate-line );
	border-radius: 6px;
	object-fit: cover;
}

.ratemate-block-review__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	font-size: .78em;
	color: var( --ratemate-muted );
}

.ratemate-block-review__product {
	color: inherit;
	text-decoration: underline;
}

/* ── Rating summary ────────────────────────────────────────────────────────── */
.ratemate-block-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
}

.ratemate-block-summary__score {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ratemate-block-summary__avg {
	font-size: 3em;
	font-weight: 700;
	line-height: 1;
}

.ratemate-block-summary__count {
	font-size: .85em;
	color: var( --ratemate-muted );
}

.ratemate-block-summary__bars {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	min-width: 220px;
	max-width: 420px;
}

.ratemate-block-bar {
	display: grid;
	grid-template-columns: 2.4em 1fr 3em;
	align-items: center;
	gap: 10px;
	font-size: .82em;
}

.ratemate-block-bar__track {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 20px;
	background: var( --ratemate-line );
}

.ratemate-block-bar__fill {
	display: block;
	height: 100%;
	border-radius: 20px;
	background: var( --ratemate-star );
}

.ratemate-block-bar__pct {
	text-align: right;
	color: var( --ratemate-muted );
}