/* 
 * Star Rating Component with Accessibility Support (New Implementation)
 * DOM order matches visual order for optimal screen reader experience
 * 
 * Uses .stars-rating--new namespace to avoid conflicts with legacy implementation
 */

.stars-rating--new {
    display: flex;
    margin-bottom: 16px;
    font-size: 0;
}

.stars-rating--new .stars-rating-zero-group {
    display: flex;
}

.stars-rating--new .stars-rating-group {
    display: flex;
}

.stars-rating--new label,
.stars-rating--new .stars-rating-group label,
.stars-rating--new .stars-rating-zero-group label {
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 8px;
    color: var(--stars-color-passive);
}

.stars-rating--new label::before,
.stars-rating--new .stars-rating-group label::before,
.stars-rating--new .stars-rating-zero-group label::before {
    content: "\2606";
    font-size: 24px;
    color: var(--stars-color-active);
}

/* Zero star styling - invisible but maintains layout space */
.stars-rating--new .stars-rating-zero-group .stars-rating__star--zero {
    color: transparent;
    font-size: 20px;
}

.stars-rating--new .stars-rating-zero-group .stars-rating__star--zero::before {
    display: none;
}

.stars-rating--new .stars-rating-zero-group .stars-rating__star--zero--hidden {
    font-size: 5px;
}

/* Selection state - JavaScript-controlled via star-filled class */
.stars-rating--new .stars-rating-group .star-filled::before {
    content: "\2605";
    color: var(--stars-color-active);
}

/* Hover states - JavaScript-controlled via star-hover class */
.stars-rating--new .stars-rating-group .star-hover::before {
    content: "\2605";
    color: var(--stars-color-hover) !important;
}

.star-button-clear {
    margin-left: 1rem !important;
}