.cargo-ratings-wrapper {
    display: flex;
    align-items: center;
    color: #777;
    /* Default color for text */
}

.cargo-rating-stars {
    display: flex;
    line-height: 1;
    /* Match icon height usually */
}

.cargo-star-icon {
    position: relative;
    display: inline-block;
}

/* Layer behind - Unmarked */
.cargo-star-unmarked-layer,
.cargo-star-marked-layer {
    display: inline-block;
}

.cargo-star-unmarked-layer {
    color: var(--cargo-star-unmarked-color, #e0e0e0);
    fill: var(--cargo-star-unmarked-color, #e0e0e0);
}

/* Layer in front - Marked / Partial */
.cargo-star-marked-layer {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--cargo-star-color, #f5c542);
    /* Default yellowish from screenshot */
    fill: var(--cargo-star-color, #f5c542);
    overflow: hidden;
    width: var(--partial-fill, 100%);
    /* Partial uses CSS var for width %, marked is 100%, unmarked hidden via logic in PHP or CSS */
}

.cargo-star-icon.unmarked .cargo-star-marked-layer {
    display: none;
    /* Hide top layer fully if unmarked */
}

.cargo-rating-text {
    font-size: 15px;
    /* Adjust default to look like screenshot */
    color: inherit;
}