/* ==========================================================================
   Store rating widget — csr-includes/reviews/store_rating_widget.php
   ==========================================================================

   Renders the site-wide store rating. Two variants: --block (the footer score
   card) and --compact (a single line, for trust bars and page headers).

   THREE RULES, all learned from shipping the shared footer into a B2B page:

   1. EVERY custom property has a literal fallback — var(--wrt-gold, #FCB002).
      csr-includes/css/footer.css consumes eight --csr-* properties and defines
      none of them, and product_info_rc.php loads neither base.css nor
      design-tokens.css, so that footer has been rendering with eight undefined
      properties and grey text falling back to inherited white. A widget whose
      whole purpose is to be dropped into arbitrary pages cannot inherit that
      bug. This file is correct with NO other stylesheet present.

   2. SINGLE-CLASS SELECTORS ONLY, and no element selectors at all. A host page
      is free to reset `h3` or `p` — the B2B theme does exactly that — and an
      element selector here would either lose to it or, worse, win and break
      the host. Every rule is one `.wr-srate*` class.

   3. NOTHING HERE SETS MARGIN ON ANYTHING IT DOES NOT OWN. The outer element
      is margin-free so the host controls its own spacing.

   Colours follow STYLE_REFERENCE.md: gold #FCB002 is the ratings role, and
   numerals are Barlow Semi Condensed with tabular figures.
   ========================================================================== */

.wr-srate {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

/* ---- the star graphic ---------------------------------------------------
   Two stacked copies of the same five glyphs: a dim track, and a gold fill
   clipped to the real percentage. 4.8 renders as 96% of five stars rather
   than five solid ones, which is the honest picture and costs nothing.
   Both copies are aria-hidden; the accessible name is the visually-hidden
   sentence in the markup. */
.wr-srate__stars {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 2px;
    /* letter-spacing applies after the LAST glyph too, so the element is 2px
       wider than the five stars it draws. Without this the 100% reference
       includes that dead space and every fill percentage lands fractionally
       right of where it should — about 2% at this size. Small, but the entire
       point of a partial star is that it is accurate. */
    margin-right: -2px;
    line-height: 1;
    font-size: 18px;
    /* Not the body stack: the glyph needs to be the same width in both
       layers or the fill drifts out of register with the track. */
    font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif;
}

.wr-srate__track { color: rgba(255,255,255,.22); }

.wr-srate__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--wrt-gold, #FCB002);
}

/* ---- numerals ---------------------------------------------------------- */
.wr-srate__score {
    font-family: var(--wrt-font-display, 'Barlow Semi Condensed', 'Inter', sans-serif);
    font-weight: 700;
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
}

.wr-srate__body { min-width: 0; }

.wr-srate__meta {
    font-family: var(--wrt-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 14px;
    line-height: 1.45;
    /* Literal, not --csr-gray-400: that property is exactly the one that is
       undefined on half the pages this widget will land on. */
    color: rgba(255,255,255,.72);
}

.wr-srate__count {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* ---- block variant: the footer score card ------------------------------ */
.wr-srate--block { gap: 16px; }
.wr-srate--block .wr-srate__score { font-size: 48px; }
.wr-srate--block .wr-srate__stars { font-size: 24px; }

/* ---- compact variant: genuinely one line -------------------------------
   The block variant stacks the stars above the caption, which is the footer
   score-card shape. Compact has to override that by making the body a row,
   or it is just the block variant minus the numeral — which is what it was
   when first drawn, and it looked like a mistake rather than a variant. */
.wr-srate--compact { gap: 10px; }
.wr-srate--compact .wr-srate__body {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.wr-srate--compact .wr-srate__score { font-size: 17px; }
.wr-srate--compact .wr-srate__stars { font-size: 16px; }
.wr-srate--compact .wr-srate__meta { font-size: 13.5px; }

/* ---- centred in its slot -----------------------------------------------
   For hosts that centre with `text-align: center`, which does nothing to a
   flex container. The footer's .reviews-placeholder is one. */
.wr-srate--center { justify-content: center; }

/* ---- light-background host --------------------------------------------- */
.wr-srate--light .wr-srate__score { color: var(--wrt-ink, #191A1C); }
.wr-srate--light .wr-srate__meta  { color: #5A5F66; }
.wr-srate--light .wr-srate__track { color: rgba(0,0,0,.16); }

/* ---- accessible text ---------------------------------------------------
   The star glyphs and the big numeral are decorative duplicates of this. */
.wr-srate__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 560px) {
    .wr-srate--block { gap: 12px; }
    .wr-srate--block .wr-srate__score { font-size: 38px; }
    .wr-srate--block .wr-srate__stars { font-size: 20px; }
}