:root{--star-gap:2px;--rpi-star-size:20px;--rpi-star-color:#fb8e28;--rpi-star-empty-color:#cccccc;--rpi-icon-scale-google:1.00;--rpi-icon-scale-yelp:0.92;--rpi-icon-scale-fb:1.125;--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:3px;--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='currentColor' 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");
}

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

/* Fix for the old versions */
.rpi-stars .rpi-star {
    display: none!important;
}

.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-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 {
    /* Public knobs */
    --star-size: var(--rpi-star-size, 18px);
    --star-color: var(--rpi-star-color);
    --empty: var(--rpi-star-empty);
    --mask: var(--rpi-star-mask);

    --stars: 5;
    --icon-scale: 1;
    --rating-scale: 0.8;
    --gap: var(--star-gap, 2px);

    /* Derived */
    --stars-w: calc(var(--stars) * (var(--star-size) + var(--star-gap)));
    --fill: clamp(0%, calc((var(--rating) / var(--stars)) * 100%), 100%);

    --bg-size: calc(var(--star-size) * var(--icon-scale));
    --bg-size-x: calc(var(--bg-size) + var(--star-gap));

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: var(--star-align-self, start) !important;
    width: max-content !important;
    height: var(--star-size) !important;
    font-size: calc(var(--star-size) * var(--rating-scale)) !important;
    font-weight: 900 !important;
    color: var(--rpi-rating-color, var(--star-color))!important;
    white-space: nowrap !important;
    vertical-align: middle !important;

    /* Reserve space for stars to the right of the text */
    padding-right: calc(var(--stars-w) + var(--gap)) !important;
}

.rpi-stars:empty {
    --gap: 0px;
}

/* Empty stars (right side) */
.rpi-stars::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: var(--stars-w) !important;
    height: var(--star-size) !important;
    transform: translateY(-50%) !important;

    background-color: var(--star-color) !important;

    -webkit-mask-image: var(--empty) !important;
    -webkit-mask-repeat: repeat-x !important;
    -webkit-mask-position: left center !important;
    -webkit-mask-size: var(--bg-size-x) var(--bg-size) !important;

    mask-image: var(--empty) !important;
    mask-repeat: repeat-x !important;
    mask-position: left center !important;
    mask-size: var(--bg-size-x) var(--bg-size) !important;
}

/* Filled stars overlay (right side) */
.rpi-stars::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: var(--stars-w) !important;
    height: var(--star-size) !important;
    transform: translateY(-50%) !important;

    background-color: var(--star-color) !important;

    -webkit-mask-image: var(--mask) !important;
    -webkit-mask-repeat: repeat-x !important;
    -webkit-mask-position: left center !important;
    -webkit-mask-size: var(--bg-size-x) var(--bg-size) !important;

    mask-image: var(--mask) !important;
    mask-repeat: repeat-x !important;
    mask-position: left center !important;
    mask-size: var(--bg-size-x) var(--bg-size) !important;

    /* Show only the filled part */
    clip-path: inset(0 calc(100% - var(--fill)) 0 0) !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(--rpi-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(--rpi-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, 18px);
    --color: var(--rpi-fb-color, #fa3e3e);
    --radius: var(--rpi-fb-radius, 3px);

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

    --gap: 0.25em;
    --label-scale: 0.85;

    --fb-star: 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' fill='%23fff'/%3E%3C/svg%3E");

    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    align-self: var(--star-align-self, start);
    height: var(--size) !important;
    width: max-content !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-size: calc(var(--size) * var(--label-scale)) !important;
    line-height: 1 !important;
    padding-left: calc(var(--size) + var(--gap)) !important;
}

.rpi-star-fb::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    background-color: var(--color) !important;
    border-radius: var(--radius) !important;
    background-image: var(--fb-star) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: calc(70% / var(--icon-scale)) calc(70% / var(--icon-scale)) !important;
}

.rpi-star-fb::after {
    content: '' !important;
    position: absolute !important;
    left: var(--tail-offset) !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    transform: translateY(calc(var(--size) / 2 - var(--tail-overlap))) !important;
    border-top: var(--tail-h) solid var(--color) !important;
    border-right: var(--tail-w) solid transparent !important;
}

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