/* Star rating — i2t3 component styles
 * Pure CSS, no JS. Five Font Awesome stars; the gold layer is clipped to
 * value/5 so half/partial ratings render. Font Awesome is loaded globally.
 */

.i2t3-starrating {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.i2t3-starrating__stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1.25rem;
    line-height: 1;
}

.i2t3-starrating--xs .i2t3-starrating__stars { font-size: .8rem; }
.i2t3-starrating--sm .i2t3-starrating__stars { font-size: 1rem; }
.i2t3-starrating--md .i2t3-starrating__stars { font-size: 1.5rem; }
.i2t3-starrating--lg .i2t3-starrating__stars { font-size: 2.25rem; }
.i2t3-starrating--xl .i2t3-starrating__stars { font-size: 3rem; }

/* Empty stars (grey) */
.i2t3-starrating__stars::before {
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #dee2e6;
    letter-spacing: .1em;
}

/* Filled stars (gold), clipped to the rating width */
.i2t3-starrating__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.i2t3-starrating__fill::before {
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffc107;
    letter-spacing: .1em;
}

.i2t3-starrating__value {
    font-weight: 600;
    color: #6c757d;
}