.ratings-info {
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--br2);
    margin-bottom: 2rem;
}

#reviews > div:nth-child(2) {
    width: 100%;
}

.ratings-info .rating .meter {
    background-color: var(--bg2);
    border-radius: 50rem;
    position: relative;
}

.ratings-info .rating .meter::before {
    content: attr(data-percent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 0.7em;
    font-weight: 500;
}

.ratings-info .rating .meter::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--c1);
    border-radius: 50rem;
    width: var(--w);
}

.ratings-info .rating .count {
    min-width: 4ch;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#review-form .star-rating input {
    display: none;
}

#review-form .star-rating input+label:has(~input:checked) span::before,
#review-form .star-rating input:checked + label span::before {
    content: "\f586";
}

.review .delete-form {
    position: absolute;
    bottom: 3rem;
    max-width: 180px;
    background-color: var(--c8);
    border: 1px solid var(--c1);
    border-radius: 0.5rem;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--sh2);
    transition: all ease 300ms;
}

.review .delete-form > div:nth-child(1) {
    background-color: var(--c1);
    color: var(--light-text);
    font-weight: 500;
    text-align: center;
    border-radius: 0.4rem 0.4rem 0 0;
    padding: 0.5rem;
}

.review .delete-form > div:nth-child(2) {
    text-align: center;
    padding: 0.5rem;
}

.review input:checked ~ .delete-form {
    bottom: 2rem;
    opacity: 1;
    pointer-events: auto;
}

.review .delete-form::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    bottom: -1.2rem;
    pointer-events: none;
    border: 10px solid transparent;
    border-top-color: var(--c1);
}

@media screen and (min-width: 1200px) {
    .ratings-info {
        width: 300px;
        padding-bottom: 2rem;
        border-bottom: 0px solid var(--br2);
        margin-bottom: 2rem;
    }

    .ratings-info > div {
        top: calc(var(--navbar-height) + 1rem);
    }

    #reviews > div:nth-child(2) {
        width: calc(100% - 300px);
    }
}