/* ==========================================================================
   Star Rating Styles
   - Interactive star rating selector
   - Read-only star display
   - Rating distribution bars
   - Review cards
   ========================================================================== */

/* Interactive star rating container */
.star-rating {
    display: inline-flex;
    flex-direction: row;
}

.star-rating .star {
    font-size: 1.5rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating .star.filled {
    color: #ffc107;
}

.star-rating .star.hover {
    color: #ffdb4d;
}

/* Read-only star display (no interaction) */
.star-display {
    display: inline-flex;
    flex-direction: row;
}

.star-display .star {
    font-size: 1rem;
    color: #ddd;
}

.star-display .star.filled {
    color: #ffc107;
}

/* Rating distribution bars */
.rating-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.rating-bar .star-icon {
    color: #ffc107;
}

.rating-bar .bar-bg {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    flex: 1;
    overflow: hidden;
}

.rating-bar .bar-fill {
    height: 8px;
    background: #ffc107;
    border-radius: 4px;
}

/* Star filter buttons — keep the star character gold */
.star-filter-btn .star-icon {
    color: #ffc107;
}

/* Review cards */
.review-card {
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}