.rating-spinner-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px; /* Centraliza e adiciona margem inferior */
    /* Animação inicial: começa invisível e pequeno */
    transform: scale(0);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* Transição para o crescimento e opacidade */
}
/* Classe para animar a entrada do spinner */
.rating-spinner-container.animate-in {
    transform: scale(1); /* Cresce para o tamanho normal (100px) */
    opacity: 1; /* Torna-se visível */
}


.rating-spinner-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Inicia com 0% de preenchimento para a animação */
    --rating-fill: 0%; 
    background: conic-gradient(#FFC107 0% var(--rating-fill), #e0e0e0 var(--rating-fill) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    /* Transição para o preenchimento */
    transition: background 1.5s ease-out; /* Anima a mudança do conic-gradient */
}
.rating-text {
    text-align: center;
    margin-top: 10px;
}
.small-stars {
    font-size: 0.9em;
    color: #E79501; /* Cor das estrelas */
}
.small-stars i {
    color: #E79501; /* Garante que as estrelas do resumo sejam amarelas */
}
/* Estilo do card de depoimento individual */
.cardx {
    border-radius: 8px;
    overflow: hidden;
    /*background-color: #fff;*/
    margin-bottom: 20px; /* Espaço entre os cartões no carrossel se necessário */
}
/* Estilos para o resumo de estrelas por barra */
.rating-breakdown {
    width: 100%;
}

.rating-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Espaçamento entre as linhas */
}

.rating-row .star-label {
    width: 50px; /* Largura fixa para os números das estrelas e ícone */
    text-align: right;
    font-weight: bold;
    color: #fff;
}

.rating-row .star-label .fa-star,
.rating-row .star-label .fa-star-o {
    color: #FFC107; /* Cor das estrelas individuais na barra */
}

.rating-row .progress {
    height: 10px; /* Altura da barra de progresso */
    background-color: #e9ecef; /* Cor de fundo da barra vazia */
    border-radius: 5px; /* Borda arredondada para a barra */
    overflow: hidden; /* Garante que o progress-bar não vaze */
}

.rating-row .progress-bar {
    border-radius: 5px; /* Arredondamento para a barra preenchida */
}

.rating-row .percentage-value {
    width: 40px; /* Largura fixa para o valor percentual */
    text-align: left;
    font-weight: bold;
    color: #fff;
}

/* ... Seus outros estilos existentes ... */

/* Estilo para os indicadores (bullets) do carrossel */
.carousel-indicators [data-bs-target] {
    background-color: #f1f1f1 !important; /* Cor preta para os bullets */
    opacity: 0.7; /* Para dar uma leve transparência, se desejar */
    width: 20px; /* Largura do bullet */
    height: 20px; /* Altura do bullet */
    border-radius: 50%; /* Transforma em círculo */
    margin: 0 5px; /* Espaçamento entre os bullets */
    border: none; /* Remove a borda padrão se houver */
}

.carousel-indicators .active {
    opacity: 1 !important; /* Bullet ativo totalmente visível */
    background-color: var(--cor-padrao3) !important; /* Garante que o bullet ativo também seja preto */
}

/* Opcional: Ajusta a cor das setas de navegação (prev/next) para preto */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(0) !important; /* Garante que os ícones fiquem pretos */
}