:root {
    --rpi-star-size: 22px;
    --rpi-star-color: #fb8e28;

    --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 {
    width: 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;
    -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,
.rpi-stars-yelp,
.rpi-stars-tripadvisor {
    display: flex;
    align-items: center;
    gap: var(--gap, 4px);
}

.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: #cccccc;
}

.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: #cccccc !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));
}

.rpi-stars,
span.rpi-stars {
    --stars: 5;
    --stars-max: 5;
    --fs: calc(var(--rpi-star-size) - 4px);
    --rating-ch: 3ch;
    --gap: -2px;
    --offset: calc(var(--rating-ch) + var(--gap));
    position: relative !important;
    display: inline-block !important;
    width: calc(var(--stars) * var(--rpi-star-size)) !important;
    height: var(--rpi-star-size) !important;
    font-size: var(--fs) !important;
    font-weight: 900 !important;
    color: var(--rpi-star-color) !important;
    text-indent: calc(var(--offset) * -1) !important;
    margin-left: var(--offset) !important;
    line-height: var(--rpi-star-size) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    background-image: var(--rpi-star-empty) !important;
    background-repeat: repeat-x !important;
    background-position: left center !important;
    background-size: var(--rpi-star-size) var(--rpi-star-size) !important;
}

.rpi-stars:empty,
span.rpi-stars:empty {
    text-indent: 0!important;
    margin-left: 0!important;
}

.rpi-stars::before {
    content: ''!important;
    position: absolute!important;
    inset: 0!important;
    width: clamp(0%, calc(((var(--rating) - var(--stars-offset, 0)) / (var(--stars-max) - var(--stars-offset, 0))) * 100%), 100%) !important;
    background-color: var(--rpi-star-color)!important;
    -webkit-mask-image: var(--rpi-star-mask)!important;
    -webkit-mask-repeat: repeat-x!important;
    -webkit-mask-position: left center!important;
    -webkit-mask-size: var(--rpi-star-size) var(--rpi-star-size)!important;
    mask-image: var(--rpi-star-mask)!important;
    mask-repeat: repeat-x!important;
    mask-position: left center!important;
    mask-size: var(--rpi-star-size) var(--rpi-star-size)!important;
}

.rpi-stars-yelp {
    --empty-color: #cccccc;
    --five-color: #fb433c;
    --four-color: #ff643d;
    --three-color: #ff8742;
    --two-color: #ffad48;
    --one-color: #ffcc4b;
    --rpi-star-size: 20px;
    --rating: 0;
    --gap: 3px;
    --radius: 3px;
    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(--rpi-star-size)!important;
    height: var(--rpi-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: 70% 70%!important;
    -webkit-mask-position: center!important;

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

.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); }

.rpi-stars-tripadvisor {
    --empty-color: #ffffff;
    --border-color: #5ba672;
    --fill-color: #5ba672;

    --rpi-dot-size: 18px;
    --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[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; }

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

.rpi-star-fb {
    --color: #fa3e3e;
    --radius: 2px;
    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;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-indent: calc(var(--size) + 6px) !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: 70% 70% !important;
    -webkit-mask-position: center !important;
    mask-image: var(--rpi-star-mask) !important;
    mask-repeat: no-repeat !important;
    mask-size: 60% 60% !important;
    mask-position: center !important;
}

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