:root {
    --cor-pessimo: #ED6F60;
    --cor-ruim: #F4964E;
    --cor-regular: #FECA28;
    --cor-bom: #28C1E0;
    --cor-excelente: #2ED68B;
}

/* Estilos para celular */
@media screen and (max-width: 767px) {
    .ratings > div:nth-child(1) .svg-fill .rate-icon svg path:not(:first-child) {
        fill: var(--cor-pessimo);
    }

    .ratings > div:nth-child(2) .svg-fill .rate-icon svg path:not(:first-child) {
        fill: var(--cor-ruim);
    }

    .ratings > div:nth-child(3) .svg-fill .rate-icon svg path:not(:first-child) {
        fill: var(--cor-regular);
    }

    .ratings > div:nth-child(4) .svg-fill .rate-icon svg path:not(:first-child) {
        fill: var(--cor-bom);
    }

    .ratings > div:nth-child(5) .svg-fill .rate-icon svg path:not(:first-child) {
        fill: var(--cor-excelente);
    }

    .ratings input[type="radio"] {
        display: none;
    }

    #avaliar {
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        padding: 0.5rem 1rem;
    }
}

/* Estilos para dispositivos com tela maior que celular */
@media screen and (min-width: 768px) {
    .rate-icon svg path:not(:first-child) {
        fill: white;
    }

    .ratings > div:nth-child(1) .rate-icon svg path:first-child {
        fill: var(--cor-pessimo);
    }

    .ratings > div:nth-child(2) .rate-icon svg path:first-child {
        fill: var(--cor-ruim);
    }

    .ratings > div:nth-child(3) .rate-icon svg path:first-child {
        fill: var(--cor-regular);
    }

    .ratings > div:nth-child(4) .rate-icon svg path:first-child {
        fill: var(--cor-bom);
    }

    .ratings > div:nth-child(5) .rate-icon svg path:first-child {
        fill: var(--cor-excelente);
    }

    .ratings > div:nth-child(1) .rate-icon {
        background-color: var(--cor-pessimo);
    }

    .ratings > div:nth-child(2) .rate-icon {
        background-color: var(--cor-ruim);
    }

    .ratings > div:nth-child(3) .rate-icon {
        background-color: var(--cor-regular);
    }

    .ratings > div:nth-child(4) .rate-icon {
        background-color: var(--cor-bom);
    }

    .ratings > div:nth-child(5) .rate-icon {
        background-color: var(--cor-excelente);
    }

    .ratings > div {
        margin: 0 1rem;
        text-align: center;
    }

    .rate-icon {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 2.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ratings > div label {
        display: block
    }

    .ratings > div input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
    }

    label.bold {
        font-weight: bold;
    }
}

.icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}