/* ==========================================================================
   Star Rating Components (reusable across all pages)
   ========================================================================== */

/* Base star icon */
.star-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
}

.star-icon svg {
    width: 100%;
    height: 100%;
}

.star-icon__bg {
    fill: var(--color-neutral-300, #d1d5db);
}

.star-icon__fill {
    fill: var(--color-category-reviews);
}

/* Small variant for inline/card usage */
.star-icon--sm {
    width: 16px;
    height: 16px;
}

/* Extra-small for compact cards */
.star-icon--xs {
    width: 14px;
    height: 14px;
}

/* Inline rating display (stars + text) */
.rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rating-inline__stars {
    display: flex;
    gap: 1px;
}

.rating-inline__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-left: 4px;
}

.rating-inline__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}