/* Review Bar — text uses its own font/color vars;
stars rendered by Trust Index inherit --stars-background */
body .ti-review-bar .ti-widget .ti-mob-row strong {
    font: var(--rb-font-style) !important;
    color: var(--rb-font-color);
}
.ti-review-bar .ti-widget .ti-stars .ti-star,
.ti-review-bar .ti-widget svg path {
    fill: var(--stars-background) !important;
}

/* ── Before Text ──────────────────────────────────────────────────────────────
   Injected inside the widget before the numeric rating via strong::before.
   Inherits font and color from .ti-review-bar above.                         */
.ti-review-bar .ti-widget .ti-mob-row strong::before {
    content: var(--rb-before-text, "");
    font: var(--rb-font-style) !important;
    color: var(--rb-font-color);
}

/* ── Between Text ─────────────────────────────────────────────────────────────
   Injected between the star rating and the review count via .ti-separator.
   The TI widget renders a default separator character in ::before — hide it
   so only our custom between-text shows.
   Inherits font and color from .ti-review-bar above.                         */
.ti-review-bar .ti-widget .ti-mob-row .ti-separator::before {
    display: none !important;
}
.ti-review-bar .ti-widget .ti-mob-row .ti-separator::after {
    position: relative;
    content: var(--rb-between-text, "");
    font: var(--rb-font-style) !important;
    color: var(--rb-font-color);
}

@media screen and (max-width: 767px) {
    .ti-review-bar .ti-widget .ti-mob-row strong::before {
        content: var(--rb-before-text-mb, "");
    }
    .ti-review-bar .ti-widget .ti-mob-row .ti-separator::after {
        content: var(--rb-between-text-mb, "");
    }
}