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

:root {
    --green-200: hsl(148, 38%, 91%);
    --green-600: hsl(169, 82%, 27%);
    --red: hsl(0, 66%, 54%);
    --white: hsl(0, 0%, 100%);
    --grey-500: hsl(186, 15%, 59%);
    --grey-900: hsl(187, 24%, 22%);
    --dark-green: rgba(6, 56, 46, 1);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Karla';
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.188rem;
    letter-spacing: -0.01rem;
    background-color: var(--green-200);
    color: var(--grey-900);
    max-width: 1000dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main {
    margin:  128px 0;
}

.container {
    background-color: white;
    width: 656px;
    border-radius: 16px;
    padding: 39px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

h1 {
    font-size: 2rem;
    line-height: 2.188rem;
    letter-spacing: -0.06rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

span {
    color: var(--green-600);
}

/*NAME & EMAIL*/
.form-control {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.form-label {
    display: flex;
    gap: 9px;
}

.input-text {
    font-family: inherit;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.313rem;
    letter-spacing: -0.01rem;
    outline: 1px solid var(--grey-500);
    border: none;
    border-radius: 8px;
    padding: 15px 24px;
    cursor: pointer;
}

.name-label {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

/*QUERY LABEL*/
.query-label {
    display: flex;
    flex-direction: column;
    gap: 19px;   
    label, input#generalEnquiry, input#supportRequest {cursor: pointer;}
}

.query-options {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.313rem;
    letter-spacing: -0.01rem;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.query-option {
    outline: 1px solid var(--grey-500);
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 15px 26px;
    display: flex;
    gap: 14px;
    cursor: pointer;
}

input#generalEnquiry, input#supportRequest {
    accent-color: var(--green-600);
    width: 19.5px;
    height: 19.5px;
}

/*MESSAGE*/
.message-labels {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.message-label {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

#message {
    resize: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.313rem;
    letter-spacing: -0.01rem;
    height: 75px;
    outline: 1px solid var(--grey-500);
    border: none;
    border-radius: 8px;
    padding: 15px 23px;
}



/*CONSENT*/
.consent-label {
    flex-direction: column;
    line-height: 1.5rem;
    padding: 0 3px;
    display: flex;
    gap: 8px;
}

.checkbox-control {
    display: flex;
    align-items: center;
    gap: 19px;
}

.checkbox {
    display: flex;
}

input#consent {
    accent-color: var(--green-600);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.submit-label {
    display: flex;
    flex-direction: column;
}

input#submit {
    background-color: var(--green-600);
    color: white;
    font-family: inherit;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    border-style: none;
    border-radius: 8px;
    padding: 17px 0 18px 0;
    cursor: pointer;
    transition: 0.4s;
}

/*HOVER, FOCUS AND ACTIVE STATE*/
.input-text:hover, #message:hover {
    outline: solid 2px var(--green-600);
}

.input-text:focus, #message:focus {
    outline: solid 2px var(--green-600);
}

.query-option:focus-within {
    background-color: var(--green-200);
    outline: solid 2px var(--green-600);
}

input#submit:hover {
    background-color: var(--dark-green);
}

/*ERROR STATE*/
.error-message {
    color: var(--red);
    font-size: inherit;
    line-height: 1rem;
    display: none;
}

.form-control.error .error-message {
    display: block;
}

.form-control.error .input-text {
    outline-color: var(--red);
}

.query-label.error .error-message {
    display: block;
}

.form-label.error .input-text {
    outline-color: var(--red);
}


/*SUCCESS STATE*/

.success-state {
    display: none;
    flex-direction: column;
    gap: 12px;
    background-color: var(--grey-900);
    color: rgba(255, 255, 255, 0.64);
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    border-radius: 16px;
    padding: 25px 24px;
}

.success-state.active {
    display: flex;
}

.success-title {
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.success-title h2 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.form-control.success .input-text {
    outline-color: var(--green-600);
}

@media only screen and (max-width: 767px) {
    
    main {
        margin: 0;
        padding: 32px 16px;
    }

    .container {
        width: auto;
        padding: 23px 24px;
    }

    span {
        color: var(--green-600);
    }

    .name-label {
        flex-direction: column;
        gap: 26px;
    }

    .query-options {
        flex-direction: column;
    }

    .query-option {
        width: auto;
    }

    #message {
        height: 210px;
    }
}