/**
 * Upgram Ratings CSS
 * 
 * CSS escopado para estrelas de avaliação do WooCommerce
 * Funciona sem depender do CSS do tema (Astra, etc.)
 * 
 * @package Upgram
 * @since 1.0.0
 */

/* Container escopado para avaliações do Upgram */
.upgram-ratings .star-rating {
    margin: 0 auto;
    vertical-align: middle;
    font-family: 'star', 'WooCommerce', sans-serif;
    font-size: 1em;
    font-weight: 400;
    height: 1.618em;
    line-height: 1.618;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 5.4em;
    box-sizing: border-box;
    display: inline-block;
}

/* Estrelas vazias (fundo) - usando caracteres Unicode de estrela */
.upgram-ratings .star-rating::before {
    content: "\2605\2605\2605\2605\2605";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    color: #e1e1e1;
    letter-spacing: 0.1em;
    font-size: 1em;
}

/* Container do span (preenchimento) */
.upgram-ratings .star-rating span {
    overflow: hidden;
    padding-top: 1.618em;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
}

/* Estrelas preenchidas (amarelas) */
.upgram-ratings .star-rating span::before {
    content: "\2605\2605\2605\2605\2605";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    color: #e2cc2d;
    letter-spacing: 0.1em;
    font-size: 1em;
}

/* Versão menor para blocos compactos */
.upgram-ratings .star-rating.star-rating-small {
    font-size: 0.9em;
    height: 1.4em;
    line-height: 1.4;
    width: 5em;
}

/* Responsivo */
@media (max-width: 768px) {
    .upgram-ratings .star-rating {
        font-size: 0.9em;
    }
    
    .upgram-ratings .star-rating.star-rating-small {
        font-size: 0.8em;
    }
}