/* GameSync Review Breakdown -- front-end review box. LTR (default) styles; see
   review-breakdown-rtl.css for the mirrored version WordPress swaps in
   automatically for RTL locales/text direction.

   Every color below comes from one of these 4 custom properties (defined
   here with their original, pre-1.4.0 literal values as defaults) rather
   than a hardcoded hex value, so a site's Settings -> Colors fields (see
   class-gsrb-settings.php) can override just these 4 and have every element
   below follow -- including secondary/muted text (the template label, the
   "/10" max, table headers, the bar track, unfilled stars, ...), which is
   derived from --gsrb-text-color via color-mix() rather than needing its
   own separate setting to keep in sync. GSRB_Render::enqueue_frontend_assets()
   is what actually overrides these 4 per-site, with an inline style added
   after this stylesheet. */
:root {
	--gsrb-bg-color: #fafafa;
	--gsrb-text-color: #222222;
	--gsrb-bar-color: #f5a623;
	--gsrb-border-color: #e2e2e2;
}

.gsrb-review-box {
	margin: 24px 0;
	padding: 20px 24px;
	border: 1px solid var(--gsrb-border-color);
	border-radius: 6px;
	background: var(--gsrb-bg-color);
}

.gsrb-review-overall {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.gsrb-review-template-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--gsrb-text-color) 65%, transparent);
}

/* Audience rating (GameSync Game Ratings integration -- see Settings ->
   "Audience rating"; only rendered at all when that companion plugin is
   active and the game has at least one vote). */
.gsrb-audience-rating {
	margin: -8px 0 16px;
	font-size: 14px;
	color: color-mix(in srgb, var(--gsrb-text-color) 80%, transparent);
}

.gsrb-audience-rating-count {
	color: color-mix(in srgb, var(--gsrb-text-color) 55%, transparent);
}

/* Stars */
.gsrb-stars {
	position: relative;
	display: inline-block;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 3px;
	color: color-mix(in srgb, var(--gsrb-text-color) 25%, transparent);
}

.gsrb-stars::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	width: var( --gsrb-star-pct, 0% );
	overflow: hidden;
	white-space: nowrap;
	color: var(--gsrb-bar-color);
}

/* Points */
.gsrb-points {
	font-size: 30px;
	font-weight: 700;
	color: var(--gsrb-text-color);
}

.gsrb-points-max {
	font-size: 16px;
	font-weight: 400;
	color: color-mix(in srgb, var(--gsrb-text-color) 60%, transparent);
}

/* Percentage */
.gsrb-percentage {
	font-size: 30px;
	font-weight: 700;
	color: var(--gsrb-text-color);
}

/* Per-criterion breakdown */
.gsrb-review-criteria {
	width: 100%;
	border-collapse: collapse;
}

.gsrb-review-criteria th,
.gsrb-review-criteria td {
	padding: 6px 0;
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
}

.gsrb-review-criteria th {
	width: 35%;
	font-weight: 500;
	color: color-mix(in srgb, var(--gsrb-text-color) 80%, transparent);
	padding-right: 12px;
}

.gsrb-bar {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--gsrb-text-color) 12%, transparent);
	overflow: hidden;
}

.gsrb-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--gsrb-bar-color);
	border-radius: 4px;
}

.gsrb-bar-value {
	width: 54px;
	padding-left: 10px;
	text-align: right;
	color: color-mix(in srgb, var(--gsrb-text-color) 70%, transparent);
	font-size: 13px;
	white-space: nowrap;
}

.gsrb-review-verdict {
	margin: 16px 0 0;
	font-style: italic;
	color: color-mix(in srgb, var(--gsrb-text-color) 80%, transparent);
}