.rating-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    /*border: 1px solid red;*/
}

.rating-stars {
    --star-size: 24px;
    --star-gap: 3px;

    --rating-empty: #d9dee7;
    --rating-stroke: #22c55e;

    --rating-red: #ef4444;
    --rating-orange: #f97316;
    --rating-warm: #f59e0b;
    --rating-green: #22c55e;

    position: relative;
    display: inline-block;
    width: fit-content;
    line-height: 0;
}

.rating-stars__layer {
    display: flex;
    align-items: center;
    gap: var(--star-gap);
}

.rating-stars__layer--base {
    position: relative;
    z-index: 1;
}

.rating-stars__layer--fill {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    overflow: hidden;
    width: var(--rating-percent);
    pointer-events: none;
    white-space: nowrap;
}

.rating-stars__star {
    width: var(--star-size);
    height: var(--star-size);
    flex: 0 0 var(--star-size);
    display: block;
    stroke-width: 1.0;
    stroke-linejoin: round;
}

.rating-stars__layer--base .rating-stars__star {
    fill: var(--rating-empty);
    stroke-width: 1.0;
}

.rating-stars--red .rating-stars__layer--base .rating-stars__star {
    stroke: var(--rating-red);
}

.rating-stars--orange .rating-stars__layer--base .rating-stars__star {
    stroke: var(--rating-orange);
}

.rating-stars--warm .rating-stars__layer--base .rating-stars__star {
    stroke: var(--rating-warm);
}

.rating-stars--green .rating-stars__layer--base .rating-stars__star {
    stroke: var(--rating-green);
}

.rating-stars--red .rating-stars__layer--fill .rating-stars__star {
    fill: var(--rating-red);
    stroke: none;
}

.rating-stars--orange .rating-stars__layer--fill .rating-stars__star {
    fill: var(--rating-orange);
    stroke: none;
}

.rating-stars--warm .rating-stars__layer--fill .rating-stars__star {
    fill: var(--rating-warm);
    stroke: none;
}

.rating-stars--green .rating-stars__layer--fill .rating-stars__star {
    fill: var(--rating-green);
    stroke: none;
}

.rating-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    letter-spacing: -0.02em;
    line-height: 1;
    transform: translateY(2px);
    white-space: nowrap;
    padding-right: 4px;
}