/* MODERN STAR RATING - HTML/CSS/JS based (no images)
******************************************************************/

/* Rating container - simplified for better compatibility */
ul.starRating,
.card ul.starRating {
    list-style: none !important;
    padding: 0 !important;
    margin: 5px auto 15px auto !important;
    display: inline-block !important;
    position: relative !important;
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
}

/* Star items */
ul.starRating li {
    float: left !important;
    display: inline-block !important;
    margin: 0 0px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Star links (clickable) - cyfra poniżej gwiazdki */
ul.starRating a,
ul.starRating li a {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 20px !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: visible !important;
    background: none !important;
    border: none !important;
    left: auto !important;
    top: auto !important;
    padding-bottom: 2px !important;
}

/* Star character (★) - using ::before pseudo-element */
ul.starRating a::before,
ul.starRating li a::before {
    content: '★' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    text-align: center !important;
    line-height: 20px !important;
    font-size: 18px !important;
    color: #ddd !important;
    font-style: normal !important;
    margin-bottom: 2px !important;
}

/* Active/filled stars based on rating value - UX standard colors */
/* 1-3: Czerwony (słabe) | 4-6: Pomarańczowy/Żółty (średnie) | 7-10: Zielony (dobre) */

ul.starRating[data-rating="1"] li:nth-child(-n+1) a::before { color: #E53935 !important; } /* Material Red 600 */

ul.starRating[data-rating="2"] li:nth-child(-n+2) a::before { color: #F4511E !important; } /* Material Deep Orange 600 */

ul.starRating[data-rating="3"] li:nth-child(-n+3) a::before { color: #FB8C00 !important; } /* Material Orange 600 */

ul.starRating[data-rating="4"] li:nth-child(-n+4) a::before { color: #FFB300 !important; } /* Material Amber 600 */

ul.starRating[data-rating="5"] li:nth-child(-n+5) a::before { color: #FDD835 !important; } /* Material Yellow 600 */

ul.starRating[data-rating="6"] li:nth-child(-n+6) a::before { color: #FDD835 !important; } /* Material Yellow 600 */

ul.starRating[data-rating="7"] li:nth-child(-n+7) a::before { color: #9CCC65 !important; } /* Material Light Green 400 */

ul.starRating[data-rating="8"] li:nth-child(-n+8) a::before { color: #66BB6A !important; } /* Material Green 400 */

ul.starRating[data-rating="9"] li:nth-child(-n+9) a::before { color: #43A047 !important; } /* Material Green 600 */

ul.starRating[data-rating="10"] li:nth-child(-n+10) a::before { color: #2E7D32 !important; } /* Material Green 800 */

/* Fallback dla starych klas (star1, star2, etc.) - zanim JavaScript ustawi data-rating */
ul.starRating.star1 li:nth-child(-n+1) a::before { color: #E53935 !important; }

ul.starRating.star2 li:nth-child(-n+2) a::before { color: #F4511E !important; }

ul.starRating.star3 li:nth-child(-n+3) a::before { color: #FB8C00 !important; }

ul.starRating.star4 li:nth-child(-n+4) a::before { color: #FFB300 !important; }

ul.starRating.star5 li:nth-child(-n+5) a::before { color: #FDD835 !important; }

ul.starRating.star6 li:nth-child(-n+6) a::before { color: #FDD835 !important; }

ul.starRating.star7 li:nth-child(-n+7) a::before { color: #9CCC65 !important; }

ul.starRating.star8 li:nth-child(-n+8) a::before { color: #66BB6A !important; }

ul.starRating.star9 li:nth-child(-n+9) a::before { color: #43A047 !important; }

ul.starRating.star10 li:nth-child(-n+10) a::before { color: #2E7D32 !important; }

/* Hover effect - smooth transition */
ul.starRating:not(.preview) li a:hover {
    transform: scale(1.15) !important;
    transition: transform 0.2s ease !important;
}

/* Rating delete button styling */
.es-rating-delete {
    display: inline-block !important;
    margin-left: 10px !important;
    color: #999 !important;
    text-decoration: none !important;
}

.es-rating-delete:hover {
    color: #d32f2f !important;
}

/* Preview mode (read-only) */
ul.starRating.preview {
    pointer-events: none !important;
}

ul.starRating.preview a {
    cursor: default !important;
}

/* Vertical rating (if needed) */
ul.starRating.vertical {
    display: block !important;
    height: auto !important;
    width: 20px !important;
}

ul.starRating.vertical li {
    display: block !important;
    float: none !important;
}

/* Remove all old background-based styles */
.star0, .star1, .star2, .star3, .star4, .star5,
.star6, .star7, .star8, .star9, .star10 {
    background-image: none !important;
    background-position: 0 0 !important;
    background: none !important;
}

.star-list-1, .star-list-2, .star-list-3, .star-list-4, .star-list-5,
.star-list-6, .star-list-7, .star-list-8, .star-list-9, .star-list-10 {
    width: 14px;
    height: 14px;
    text-align: center;
    border-radius: 15px;
    padding: 5px;
    margin-top: -10px;
    margin-bottom: -10px;
    border: 2px solid;
    font-weight: bold;
    word-wrap: normal;
}

.star-list-1 { border-color: #E53935; background-color:#ef9a9a; } /* Material Red 600 */
.star-list-2 { border-color: #F4511E; background-color: #ff7043; } /* Material Deep Orange 600 */
.star-list-3 { border-color: #FB8C00; background-color: #ffb74d; } /* Material Orange 600 */
.star-list-4 { border-color: #FFB300; background-color: #ffd54f; } /* Material Amber 600 */
.star-list-5 { border-color: #FDD835; background-color: #fff176; } /* Material Yellow 600 */
.star-list-6 { border-color: #FDD835; background-color: #fff176; } /* Material Yellow 600 */
.star-list-7 { border-color: #9CCC65; background-color: #dce775; } /* Material Light Green 400 */
.star-list-8 { border-color: #66BB6A; background-color: #aed581; } /* Material Green 400 */
.star-list-9 { border-color: #43A047; background-color: #81c784; } /* Material Green 600 */
.star-list-10 { border-color: #2E7D32; background-color: #66bb6a; } /* Material Green 800 */


.star-list-0 {
    display: none;
}