/* Five-star rating widget (partials/rating.blade.php). Display uses a clipped
   overlay so the average can fill stars to any fraction; input snaps to halves
   (left half of a star = n-0.5, right half = n). */

.rating-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: var(--space-xl) 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.rating-question {
    font-weight: 600;
    color: var(--color-text-primary, inherit);
}

.rating-stars {
    position: relative;
    display: inline-flex;
    line-height: 1;
    cursor: pointer;
}

/* Both rows are built from .rating-glyph boxes with IDENTICAL metrics, so the
   clipped gold overlay always lines up with the grey base underneath. */
.rating-glyph {
    display: inline-block;
    box-sizing: content-box;
    /* the overlay is a width-0 flex container: without this, its items shrink
       to min-content and every gold star renders narrower than the grey one */
    flex-shrink: 0;
    width: 1em;
    padding: 0 0.06em;
    margin: 0;
    border: none;
    background: none;
    font-size: 3.2rem;
    line-height: 1;
    text-align: center;
    font-family: inherit;
}

.rating-star {
    color: #c9cec9;
    cursor: pointer;
}

/* Filled overlay: same five glyph boxes in gold, clipped to the average width */
.rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
    /* flex, like the base row: inter-element whitespace from the template must
       NOT render, or every gold star drifts a few px further off the grey one */
    display: flex;
    pointer-events: none;
    color: #e8a814;
}

.rating-summary {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #6b7280);
}

.rating-block.is-rated .rating-summary {
    color: var(--color-primary-600);
    font-weight: 600;
}