:root {
    --orange: hsl(25, 97%, 53%);
    --neutral-white: hsl(0, 0%, 100%);
    --neutral-light-grey: hsl(217, 12%, 63%);
    --neutral-clear-dark-blue: hsl(214, 20%, 24%);
    --neutral-dark-blue: hsl(213, 19%, 18%);
    --neutral-very-dark-blue: hsl(216, 12%, 8%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--neutral-very-dark-blue);
    font-family: 'Overpass', sans-serif;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-container {
    width: 90%;
    min-width: 330px;
    max-width: 340px;
    height: 360px;
    background-color: var(--neutral-dark-blue);
    border-radius: 24px;
    padding: 28px;
}

.rating-content {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;

    .img-cont {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        border-radius: 20px;
        width: 40px;
        height: 40px;
        background-color: var(--neutral-clear-dark-blue);

        img {
            width: 14px;
        }
    }


    h2 {
        font-size: 24px;
        color: var(--neutral-white);
        margin-bottom: 14px;
    }

    .parrafo {
        color: var(--neutral-light-grey);
        line-height: 1.5;
        font-size: 13px;
    }

    .submit-button {
        font-weight: 700;
        background-color: var(--orange);
        color: var(--neutral-very-dark-blue);
        border-radius: 20px;
        border: none;
        height: 40px;
        cursor: pointer;
        letter-spacing: 2px;
    }

    .submit-button:hover {
        background-color: var(--neutral-white);
    }
}

.rating-selector {


    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px 0;

    .rating-element {
        color: var(--neutral-white);
        width: 42px;
        height: 42px;
        background-color: var(--neutral-clear-dark-blue);
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        p {
            font-size: 14px;
            font-weight: 800;
        }
    }

    .rating-element:hover {
        background-color: var(--orange);

        p {
            color: var(--neutral-very-dark-blue);
            font-weight: 800;
        }
    }
}

.thanks-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;

    img {
        width: 140px;
    }

    .numberSelectionContainer {
        background-color: var(--neutral-clear-dark-blue);
        border-radius: 20px;
        padding: 6px 14px 4px 14px;
        margin: 30px;

        p {
            font-size: 14px;
            font-weight: 400;
            color: var(--orange);
        }
    }

    h1 {
        color: var(--neutral-white);
        margin-bottom: 8px;
        font-size: 28px;
    }

    .thanks-text {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--neutral-light-grey);
    }
}

.ratingHover {
    background-color: var(--neutral-white) !important;
    color: var(--neutral-very-dark-blue) !important;

}

.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.inactive {
    display: none !important;
}