/* ================================================================
   WR Trust Badge — shop rating summary with distribution bars
   ================================================================ */

.wr-trust-badge {
	display: flex;
	gap: 28px;
	align-items: center;
	font-family: inherit;
}

/* ── Horizontal (default): summary left, bars right ── */
.wr-trust-badge--horizontal {
	flex-direction: row;
}

/* ── Vertical: stacked, centred ── */
.wr-trust-badge--vertical {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ── Summary block ── */
.wr-tb-summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.wr-tb-avg {
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
	color: #1a1a1a;
}

.wr-tb-stars {
	line-height: 1;
}

.wr-tb-count {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

/* ── Distribution bars ── */
.wr-tb-bars {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 160px;
}

.wr-tb-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wr-tb-label {
	font-size: 12px;
	color: #6b7280;
	width: 24px;
	text-align: right;
	flex-shrink: 0;
}

.wr-tb-track {
	flex: 1;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
}

.wr-tb-num {
	font-size: 12px;
	color: #6b7280;
	width: 24px;
	text-align: left;
	flex-shrink: 0;
}

/* ── Bar fill with entrance animation ── */
@keyframes wr-bar-in {
	from { width: 0; }
}

.wr-tb-fill {
	height: 100%;
	width: var(--wr-bar-w, 0%);
	background: #B8860B;
	border-radius: 4px;
	animation: wr-bar-in 0.55s ease-out both;
}

/* Staggered delays: 5★ first, 1★ last */
.wr-tb-row:nth-child(1) .wr-tb-fill { animation-delay: 0.00s; }
.wr-tb-row:nth-child(2) .wr-tb-fill { animation-delay: 0.07s; }
.wr-tb-row:nth-child(3) .wr-tb-fill { animation-delay: 0.14s; }
.wr-tb-row:nth-child(4) .wr-tb-fill { animation-delay: 0.21s; }
.wr-tb-row:nth-child(5) .wr-tb-fill { animation-delay: 0.28s; }

/* ── Responsive: stack on narrow screens ── */
@media (max-width: 500px) {
	.wr-trust-badge--horizontal {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.wr-tb-bars {
		width: 100%;
	}
}