/*============GLOBAL============*/

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

:root {
    font-size: 62.5%;
    /* 1rem = 10px*/
    --Color_Green_200: hsl(148, 38%, 91%);
    --Color_Green_600: hsl(169, 82%, 27%);
    --Color_Red: hsl(0, 66%, 54%);
    --Color_White: hsl(0, 0%, 100%);
    --Color_Grey_500: hsl(186, 15%, 59%);
    --Color_Grey_900: hsl(187, 24%, 22%);

    /*===FONT===
    .karla-<uniquifier> {
    font-family: "Karla", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;}*/
}


/*============BODY============*/
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Karla", sans-serif;
    background-color: var(--Color_Green_200);
}

/*============CONTAINER============*/
.container {
    width: min(37.5rem, 100%);
    padding: 2rem;
}

/*============WRAPPER============*/
.wrapper {
    position: relative;
    padding: 2rem;
    border-radius: 15px;
    background-color: var(--Color_White);

}

/*============CONTAINER__HEADER============*/
.wrapper .container__header h1 {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--Color_Grey_900);

}

.container__header .container__header__namesContent {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

.container__header .container__header__namesContent .container__header__namesContent__firstName,
.container__header__namesContent__lastName,
.container__header__emailContent {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.container__header__namesContent .container__header__namesContent__firstName,
.container__header__namesContent__lastName,
.container__aside,
.container__footer__messageContent,
.container__header__emailContent label {
    font-size: 1.5rem;
    color: var(--Color_Grey_900);

}



.container__header input {
    border-radius: 0.5rem;
    padding: 1.2rem;
    border: solid 1px var(--Color_Grey_500);
}

.container__header label {
    margin-bottom: 1rem;
}

/*============CONTAINER__SECTION============*/
.container__aside {
    display: flex;
    flex-direction: column;
}

.container__aside .query {
    margin-bottom: 1rem;

}

.container__aside .container__aside__radioCheck {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container__aside__radioCheck__General,
.container__aside__radioCheck__Support {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4.1rem;
    padding-left: 1.5rem;
    border: solid 1px var(--Color_Grey_500);
    border-radius: 0.5rem;
}

.container__aside__radioCheck__General input {
    display: none;
}

.container__aside__radioCheck__Support input {
    display: none;
}

.radioIcon {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--Color_Grey_500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radioIcon::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}


/*============CONTAINER__FOOTER============*/
.container__footer {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.container__footer .container__footer__messageContent {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;

}

.container__footer .container__footer__messageContent label {
    margin-bottom: 1rem;
}

.container__footer .container__footer__messageContent textarea {
    border-radius: 0.5rem;
    border: 1px solid var(--Color_Grey_500);
    resize: none;
    color: var(--Color_Grey_900);
    padding: 2rem;
}

.container__footer .container__footer__consent {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;

}

.container__footer .container__footer__consent input {
    display: none;
}

.checkbox {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--Color_Grey_500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.container__footer .container__footer__consent label {
    font-size: 1.6rem;
    color: var(--Color_Grey_900);

}

.buttonSubmit {
    width: 100%;
    padding: 1.5rem;
    background-color: var(--Color_Green_600);
    color: var(--Color_White);
    font-weight: 600;
    font-size: 1.6rem;
    border: transparent;
    border-radius: 0.5rem;
    margin-top: 3rem;
}

/*============ATIVOS--FOCUS--HOVER============*/
input:focus {
    border: 2px solid var(--Color_Green_600);
    outline: transparent;
}

.container__header input:hover {
    cursor: pointer;
}

.container__aside__radioCheck__General label:hover {
    cursor: pointer;
}

.container__aside__radioCheck__Support label:hover {
    cursor: pointer;
}

.container__aside__radioCheck__General:has(input:checked),
.container__aside__radioCheck__Support:has(input:checked) {
    border: 2px solid var(--Color_Green_600);
    background-color: var(--Color_Green_200);
}

.container__aside__radioCheck__General:has(input:checked) .radioIcon::after {
    background-color: var(--Color_Green_600);
}

.container__aside__radioCheck__Support:has(input:checked) .radioIcon::after {
    background-color: var(--Color_Green_600);
}

.container__footer__consent label:hover {
    cursor: pointer;
}

.container__footer__consent:has(input:checked) .checkbox::after {
    background-color: var(--Color_Green_600);
}

.container__footer .container__footer__messageContent textarea:hover {
    cursor: pointer;
}

textarea:focus {
    box-shadow: 0 0 0 1px var(--Color_Green_600);
    outline: none;
}

.buttonSubmit:hover {
    cursor: pointer;
}

/*============CONDIÇÃO - ERRORMESSAGE============*/
.MessageError {
    display: none;
    font-size: 1.3rem;
    color: var(--Color_Red);
    margin-top: 1rem;
}

.MessageErrorShow {
    display: block;
}

.inputError {
    border: 2px solid var(--Color_Red);
}

/*============CONDIÇÃO - FORMULARIO PREENCHIDO CORRETAMENTE============*/
.successMessage {
    font-family: "Karla", sans-serif;
    font-weight: bold;
    position: absolute;
    top: 0rem;
    left: 50%;
    width: 100%;
    height: 10rem;
    padding: 1.5rem;
    display: block;
    border-radius: 1.5rem;
    background-color: var(--Color_Grey_900);
    transform: translate(-50%, -400%);
    transition: transform 0.6s ease;

}

.successMessage li {
    position: relative;
    list-style: none;
    font-size: 1.8rem;
    color: var(--Color_White);
    padding-left: 3rem;

}

.successMessage li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    background-image: url("../assets/images/icon-success-check.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.successMessage p {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: var(--Color_White);
}


.successMessageActive {
    transform: translate(-50%, -100%);
}




/*============RESPONSIVIDADE_TABLET============*/
@media(min-width:768px) {
    .container {
        width: min(70rem, 100%);
    }

    /*============CONTAINER__HEADER============*/
    .container__header .container__header__namesContent {
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
    }

    .container__header .container__header__namesContent .container__header__namesContent__firstName,
    .container__header__namesContent__lastName {
        width: 100%;
    }

    /*============CONTAINER__SECTION============*/
    .container__aside .container__aside__radioCheck {
        flex-direction: row;
        gap: 2rem;

    }

    .container__aside .container__aside__radioCheck .container__aside__radioCheck__General,
    .container__aside__radioCheck__Support {
        width: 100%;
    }

}


/*============RESPONSIVIDADE_WEB============*/