﻿
.container-estrellas {    
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
}

.rating {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

    /*.rating:nth-child(1) {
        transform: translateX(-80px);
    }
    
    .rating:nth-child(3) {
        transform: translateX(80px);
    }*/

    .rating input {
        position: relative;
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        font-size: 20px;
    }

        .rating input::before {
            content: '\f005';
            position: absolute;
            font-family: fontAwesome;
            color: #111;
            transition: .2s;
        }

        .rating input:hover ~ input::before,
        .rating input:hover::before,
        .rating input:checked ~ input::before,
        .rating input:checked::before {
            color: var(--c);
        }
