com.ceilidhkit/Public/Static/CSS/Elements/Rating.css

#RatingContainer {
    text-align: center;
    margin-top: 2rem;
    font-family: Arial, sans-serif;
}

.RatingButtons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

#RatingContainer button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    padding: 0.5rem;
    transition: transform 0.2s, color 0.2s, background-color 0.2s;
    border-radius: 50%;
}

#RatingContainer button:hover {
    transform: scale(1.3);
    background-color: #f0f0f0;
}

#RatingContainer button.active {
    transform: scale(1.3);
    color: #0073e6;
    background-color: #e0f7ff;
}

.Counts {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #555;
}

.count-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: bold;
}