:root{--rpi-star-size:18px;--rpi-star-color:#fb7900;--rpi-star-empty-color:#cccccc;--rpi-icon-scale-google:1.00;--rpi-icon-scale-yelp:0.92;--rpi-icon-scale-fb:0.90;--rpi-yelp-empty-color:#cccccc;--rpi-yelp-five-color:#fb433c;--rpi-yelp-four-color:#ff643d;--rpi-yelp-three-color:#ff8742;--rpi-yelp-two-color:#ffad48;--rpi-yelp-one-color:#ffcc4b;--rpi-yelp-radius:3px;--rpi-fb-color:#fa3e3e;--rpi-fb-radius:2px;--rpi-star-empty:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z' fill='none' stroke='%23cccccc' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    --rpi-star-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.7881 3.21068C11.2364 2.13274 12.7635 2.13273 13.2118 3.21068L15.2938 8.2164L20.6979 8.64964C21.8616 8.74293 22.3335 10.1952 21.4469 10.9547L17.3295 14.4817L18.5874 19.7551C18.8583 20.8908 17.6229 21.7883 16.6266 21.1798L11.9999 18.3538L7.37329 21.1798C6.37697 21.7883 5.14158 20.8908 5.41246 19.7551L6.67038 14.4817L2.55303 10.9547C1.66639 10.1952 2.13826 8.74293 3.302 8.64964L8.70609 8.2164L10.7881 3.21068Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- */

.rpi-star,
.rpi-stars-yelp,
.rpi-stars-tripadvisor {
    display: var(--flx, flex);
    align-items: center;
    gap: var(--gap, 4px);
    text-align: start;
    z-index: 9;
}

.rpi-star[data-rating]:empty::before {
    content: attr(data-rating);
    color: var(--rpi-star-color);
    font-size: var(--head-grade-fs, 18px);
    font-weight: var(--head-grade-weight, 900);
}

.rpi-star i {
    padding: 0 2px;
    cursor: pointer !important;
    background-color: var(--rpi-star-empty-color);
}

.rpi-star[data-rating="1"] i:nth-child(-n + 1),
.rpi-star[data-rating="2"] i:nth-child(-n + 2),
.rpi-star[data-rating="3"] i:nth-child(-n + 3),
.rpi-star[data-rating="4"] i:nth-child(-n + 4),
.rpi-star[data-rating="5"] i:nth-child(-n + 5) {
    background-color: var(--rpi-star-color);
}

.rpi-star:hover i {
    background-color: var(--rpi-star-color) !important;
}

.rpi-star i:hover ~ i {
    background-color: var(--rpi-star-empty-color) !important;
}

.rpi-star i,
.rpi-star[data-rating]:empty::after {
    content: '';
    width: var(--rpi-star-size) !important;
    height: var(--rpi-star-size) !important;
    -webkit-mask-image: var(--rpi-star-mask) !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-image: var(--rpi-star-mask) !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
}

.rpi-star[data-rating]:empty::after {
    background-color: var(--rpi-star-color);
}

.rpi-star + .rpi-stars {
    --stars-offset: 1;
    --stars: calc(var(--stars-max) - var(--stars-offset));
}

/* Google / default stars */
.rpi-stars {
    --icon-scale: var(--rpi-icon-scale-google);
    --stars: 5;
    --stars-max: 5;
    --fs: calc(var(--rpi-star-size) - 4px);
    --gap: 6px;

    /* Fill percent for clip-path (0%..100%) */
    --fill: clamp(
        0%,
        calc(
            ((var(--rating) - var(--stars-offset, 0)) /
            (var(--stars-max) - var(--stars-offset, 0))) * 100%
        ),
        100%
    );

    position: relative !important;
    /* Включаем flex-режим */
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    white-space: nowrap !important;
    height: var(--rpi-star-size) !important;

    font-size: var(--fs) !important;
    font-weight: 900 !important;
    color: var(--rpi-star-color) !important;
    line-height: var(--rpi-star-size) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: start !important;
    z-index: 9 !important;

    /* Reserve space for stars on the right */
    padding-right: calc(var(--stars) * var(--rpi-star-size)) !important;
    --gap: 6px;



    /* Текст внутри (например "4.5") автоматически получает order: 0 */
}

/* ПУСТЫЕ ЗВЕЗДЫ (::before) */
.rpi-stars::before {
    content: '' !important;
    /* УБИРАЕМ position: absolute, чтобы звезды занимали место */
    display: inline-block !important;
    position: relative !important;

    /* ГЛАВНЫЙ СЕКРЕТ: order: 1 переносит before в конец, после текста */
    order: 1 !important;

    margin-left: var(--gap) !important; /* Тот самый динамический отступ */
    width: calc(var(--stars) * var(--rpi-star-size)) !important;
    height: var(--rpi-star-size) !important;

    background-image: var(--rpi-star-empty) !important;
    background-repeat: repeat-x !important;
    background-position: left center !important;
    background-size: calc(var(--rpi-star-size) * var(--icon-scale))
                     calc(var(--rpi-star-size) * var(--icon-scale)) !important;
}

/* ЗАКРАШЕННЫЕ ЗВЕЗДЫ (::after) */
.rpi-stars::after {
    content: '' !important;
    /* А вот этот слой мы кладем ПОВЕРХ пустых звезд */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Привязываем к правому краю родителя, который теперь заканчивается звездами */
    right: 0 !important;

    width: calc(var(--stars) * var(--rpi-star-size)) !important;
    height: var(--rpi-star-size) !important;

    background-color: var(--rpi-star-color) !important;
    -webkit-mask-image: var(--rpi-star-mask) !important;
    mask-image: var(--rpi-star-mask) !important;
    -webkit-mask-repeat: repeat-x !important;
    -webkit-mask-size: calc(var(--rpi-star-size) * var(--icon-scale))
                       calc(var(--rpi-star-size) * var(--icon-scale)) !important;

    clip-path: inset(0 calc(100% - var(--fill)) 0 0) !important;
    z-index: 1 !important;
}


/* Yelp */
.rpi-stars-yelp {
    --icon-scale: var(--rpi-icon-scale-yelp);

    --empty-color: var(--rpi-yelp-empty-color);
    --five-color: var(--rpi-yelp-five-color);
    --four-color: var(--rpi-yelp-four-color);
    --three-color: var(--rpi-yelp-three-color);
    --two-color: var(--rpi-yelp-two-color);
    --one-color: var(--rpi-yelp-one-color);

    --star-size: var(--rpi-star-size);
    --rating: 0;
    --gap: 4px;
    --radius: var(--rpi-yelp-radius);

    display: inline-flex !important;
    gap: var(--gap) !important;
    line-height: 0 !important;
    vertical-align: top !important;
}

.rpi-stars-yelp i {
    position: relative !important;
    display: inline-block !important;
    font-style: normal !important;
    flex: 0 0 auto !important;
    width: var(--star-size) !important;
    height: var(--star-size) !important;
    border-radius: var(--radius) !important;
    background-color: var(--empty-color) !important;
    background-image: linear-gradient(90deg, var(--star-color) 0 calc(var(--fill, 0) * 1%), transparent calc(var(--fill, 0) * 1%)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    box-sizing: border-box !important;
}

.rpi-stars-yelp i::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #fff !important;

    -webkit-mask-image: var(--rpi-star-mask) !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: calc(70% / var(--icon-scale)) calc(70% / var(--icon-scale)) !important;
    -webkit-mask-position: center !important;

    mask-image: var(--rpi-star-mask) !important;
    mask-repeat: no-repeat !important;
    mask-size: calc(70% / var(--icon-scale)) calc(70% / var(--icon-scale)) !important;
    mask-position: center !important;
}

.rpi-stars-yelp,
.rpi-stars-yelp[data-rating]::before {
    content: attr(data-rating);
    color: var(--star-color);
    font-size: var(--head-grade-fs, 18px);
    font-weight: var(--head-grade-weight, 900);
}

.rpi-stars-yelp i:nth-child(1) { --fill: clamp(0, (var(--rating) - 0) * 100, 100); }
.rpi-stars-yelp i:nth-child(2) { --fill: clamp(0, (var(--rating) - 1) * 100, 100); }
.rpi-stars-yelp i:nth-child(3) { --fill: clamp(0, (var(--rating) - 2) * 100, 100); }
.rpi-stars-yelp i:nth-child(4) { --fill: clamp(0, (var(--rating) - 3) * 100, 100); }
.rpi-stars-yelp i:nth-child(5) { --fill: clamp(0, (var(--rating) - 4) * 100, 100); }

.rpi-stars-yelp[data-stars^="1"] { --rating: 1.5; --star-color: var(--one-color); }
.rpi-stars-yelp[data-stars="1"] { --rating: 1; }

.rpi-stars-yelp[data-stars^="2"] { --rating: 2.5; --star-color: var(--two-color); }
.rpi-stars-yelp[data-stars="2"] { --rating: 2; }

.rpi-stars-yelp[data-stars^="3"] { --rating: 3.5; --star-color: var(--three-color); }
.rpi-stars-yelp[data-stars="3"] { --rating: 3; }

.rpi-stars-yelp[data-stars^="4"] { --rating: 4.5; --star-color: var(--four-color); }
.rpi-stars-yelp[data-stars="4"] { --rating: 4; }

.rpi-stars-yelp[data-stars^="5"] { --rating: 5; --star-color: var(--five-color); }

/* TripAdvisor (unchanged, but uses base size by default) */
.rpi-stars-tripadvisor {
    --empty-color: #ffffff;
    --border-color: #5ba672;
    --fill-color: #5ba672;

    --rpi-dot-size: var(--rpi-star-size);
    --rating: 0;
    --gap: 4px;
    --border: 3px;

    display: inline-flex !important;
    gap: var(--gap) !important;
    line-height: 0 !important;
    vertical-align: top !important;
}

.rpi-stars-tripadvisor i {
    width: var(--rpi-dot-size) !important;
    height: var(--rpi-dot-size) !important;
    display: inline-block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;

    border-radius: 999px !important;
    border: var(--border) solid var(--border-color) !important;

    background-color: var(--empty-color) !important;
    background-image: linear-gradient(90deg, var(--fill-color) 0 calc(var(--fill, 0) * 1%), transparent calc(var(--fill, 0) * 1%)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.rpi-stars-tripadvisor,
.rpi-stars-tripadvisor[data-rating]::before {
    content: attr(data-rating);
    color: var(--fill-color);
    font-size: var(--head-grade-fs, 18px);
    font-weight: var(--head-grade-weight, 900);
}

.rpi-stars-tripadvisor i:nth-child(1) { --fill: clamp(0, (var(--rating) - 0) * 100, 100); }
.rpi-stars-tripadvisor i:nth-child(2) { --fill: clamp(0, (var(--rating) - 1) * 100, 100); }
.rpi-stars-tripadvisor i:nth-child(3) { --fill: clamp(0, (var(--rating) - 2) * 100, 100); }
.rpi-stars-tripadvisor i:nth-child(4) { --fill: clamp(0, (var(--rating) - 3) * 100, 100); }
.rpi-stars-tripadvisor i:nth-child(5) { --fill: clamp(0, (var(--rating) - 4) * 100, 100); }

.rpi-stars-tripadvisor[data-stars^="1"] { --rating: 1.5; }
.rpi-stars-tripadvisor[data-stars="1"] { --rating: 1; }

.rpi-stars-tripadvisor[data-stars^="2"] { --rating: 2.5; }
.rpi-stars-tripadvisor[data-stars="2"] { --rating: 2; }

.rpi-stars-tripadvisor[data-stars^="3"] { --rating: 3.5; }
.rpi-stars-tripadvisor[data-stars="3"] { --rating: 3; }

.rpi-stars-tripadvisor[data-stars^="4"] { --rating: 4.5; }
.rpi-stars-tripadvisor[data-stars="4"] { --rating: 4; }

.rpi-stars-tripadvisor[data-stars^="5"] { --rating: 5; }

/* Facebook */
.rpi-star-fb {
    --icon-scale: var(--rpi-icon-scale-fb);

    --size: var(--rpi-star-size);
    --tail-w: calc(var(--size) / 3);
    --tail-h: calc(var(--size) / 3.6);
    --tail-offset: calc(var(--size) / 4.5);
    --tail-overlap: 1px;

    --color: var(--rpi-fb-color);
    --radius: var(--rpi-fb-radius);

    position: relative !important;
    display: block !important;
    width: var(--size);
    height: var(--size);
    background-color: var(--color) !important;
    border-radius: var(--radius);
    white-space: nowrap !important;
    font-size: calc(var(--size) - 2px) !important;
    text-align: start !important;
    z-index: 9 !important;
    line-height: normal !important;
    vertical-align: middle !important;
    text-indent: calc(var(--size) + 4px) !important;
}

.rpi-star-fb::before {
    content: '';
    position: absolute;
    left: var(--tail-offset);
    bottom: calc((var(--tail-h) - var(--tail-overlap)) * -1);
    width: 0;
    height: 0;
    border-top: var(--tail-h) solid var(--color);
    border-right: var(--tail-w) solid transparent;
}

.rpi-star-fb::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #fff !important;

    -webkit-mask-image: var(--rpi-star-mask) !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: calc(70% / var(--icon-scale)) calc(70% / var(--icon-scale)) !important;
    -webkit-mask-position: center !important;

    mask-image: var(--rpi-star-mask) !important;
    mask-repeat: no-repeat !important;
    mask-size: calc(70% / var(--icon-scale)) calc(70% / var(--icon-scale)) !important;
    mask-position: center !important;
}

.rpi-star-fb[data-rating] {
    --len: 10;
    --len-ch: calc(var(--len) * 1ch);
    --gap: 1ch;
    margin-right: calc(var(--len-ch) + var(--gap));
}

.rpi-star-fb[data-rating="1"]{--len:16;--color:#cccccc}