/* Wyplatanki Reviews — rating widgets (frontend display) */

/* ── Container ─────────────────────────────────────── */

.wr-rating-widget {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* ── Star overlay trick ────────────────────────────── *
 * Two identical ★★★★★ layers. The fg (gold) layer is
 * clipped to (avg / 5 * 100)% width → precise fractional
 * stars without JS. Both layers share identical font-size
 * so they line up pixel-perfect.
 */

.wr-rating-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: var(--wr-star-size, 28px);
}

.wr-stars-bg,
.wr-stars-fg {
    display: block;
    font-size: inherit;
    white-space: nowrap;
    line-height: 1;
    /* no letter-spacing — avoids trailing-space alignment drift */
}

.wr-stars-bg {
    color: #d1d5db;
}

.wr-stars-fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f59e0b;
}

/* ── Text elements ─────────────────────────────────── */

.wr-rating-avg {
    font-size: calc(var(--wr-star-size, 28px) * 0.64);
    font-weight: 700;
    color: #374151;
}

.wr-widget-count {
    font-size: calc(var(--wr-star-size, 28px) * 0.54);
    color: #6b7280;
}

.wr-widget-label {
    font-size: calc(var(--wr-star-size, 28px) * 0.6);
    font-weight: 600;
    color: #374151;
}

/* ── Responsive ────────────────────────────────────── */

@media (max-width: 480px) {
    .wr-rating-widget { gap: 5px; }
}