@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --verde-200: hsl(148, 38%, 91%);
    --verde-600: hsl(169, 82%, 27%);
    --vermelho: hsl(0, 66%, 54%);
    --White: hsl(0, 0%, 100%);
    --Grey-500: hsl(186, 15%, 59%);
    --Grey-900: hsl(187, 24%, 22%);
    --font-16: 1.6rem;
    --peso-400: 400;
    --peso-700: 700;
}

html, body {
    padding: 0;
    margin: 0;
}

*{
       box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    background-color: var(--verde-200);
    font-family: 'Karla', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 3.2rem 1.6rem;
}

/* Container Principal */
.forms-app {
    background-color: var(--White);
    width: 80%;
    max-width: 56.7rem; /* Garantindo o breakpoint de 320px */
    padding: 2.4rem;
    border-radius: 1.6rem;

    .forms-app__title {
        font-size: 2.4rem;
        color: var(--Grey-900);
        font-weight: var(--peso-700);
        margin-bottom: 2.4rem;
    }
}

/* Formulário e Inputs */
.forms-data {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;

     .forms-data__label{
        font-size: var(--font-16);
        color: var(--Grey-900);
        font-weight: var(--peso-400);
        display: block;
        cursor: pointer;
    }

    .forms-data__input, .forms-data__msg {
        width: 100%;
        padding: 1.2rem 0.5rem;
        border: 0.1rem solid var(--Grey-500);
        border-radius: 0.8rem;
        font-size: var(--font-16);
        outline: none;
        transition: border 0.3s ease;

        &:focus, &:hover {
            border-color: var(--verde-600);
        }
    }

    /* Estilização para Radios e Checkbox */
    input[type="radio"], input[type="checkbox"] {
        accent-color: var(--verde-600);
        margin-right: 1.2rem;
        width: 1.8rem;
        height: 1.8rem;
        cursor: pointer;
    }

    /* Container de Opções (Visual de botão para o label do radio) */
    label:has(input[type="radio"]) {
        border: 0.1rem solid var(--Grey-500);
        padding: 1.2rem;
        border-radius: 0.8rem;
        display: flex;
        align-items: center;
        margin-bottom: 0;

        &:hover {
            border-color: var(--verde-600);
        }
    }

    .forms-data__msg {
        min-height: 10rem;
        resize: none;
    }

    /* Botão Submit */
    .btn-submit {
        background-color: var(--verde-600);
        color: var(--White);
        font-size: 1.8rem;
        font-weight: var(--peso-700);
        border: none;
        padding: 1.6rem;
        border-radius: 0.8rem;
        cursor: pointer;
        transition: 0.3s;

        &:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
        &:active{
            transform: scale(1);
        }
    }
}

/* Mensagens de Erro */
.forms--data__msg-error {
    color: var(--vermelho);
    font-size: var(--font-16);
    display: none;
}

/* Mensagem de Sucesso */
.msg-success {
    position: absolute;
    top: 0;
    left: 35%;
    display: none;
    background-color: var(--Grey-900);
    color: var(--White);
    padding: 2.4rem;
    border-radius: 1.2rem;
    margin-top: 2rem;
    text-align: center;

    p:first-child {
        font-weight: var(--peso-700);
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }
    p:last-child {
        font-size: 1.4rem;
    }
}

/* Rodapé */
.footer-copy {
    height: 10vh;
    margin-top: 2.4rem;
    font-size: var(--font-16);
    text-align: center;
    color: var(--Grey-900);

    a {
        color: var(--verde-600);
        text-decoration: none;
        font-weight: var(--peso-700);
    }
}

@media (min-width: 576px){
    .forms-app{
        width: 90%;
    }
    .forms-data{
            display: grid;
            grid-template-columns: 1fr 1fr;   
    }
    
    .grid-span2{
        grid-column: span 2
    }

    .radio{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem;
    } 
}