*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Karla',sans-serif;
}

body{
background:hsl(148,38%,91%);
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:20px;
}


.container{
background:white;
padding:40px;
border-radius:12px;
width:650px;
box-shadow:0 25px 50px rgba(0,0,0,0.1);
}

h1{
margin-bottom:25px;
color:hsl(187,24%,22%);
}


.name-row{
display:flex;
gap:15px;
}


.field{
display:flex;
flex-direction:column;
margin-bottom:15px;
flex:1;
}

.query-type {
    margin-bottom: 8px;
}

label{
margin-bottom: 6px;
font-size:16px;
color:hsl(187,24%,22%);
}

span{
color:hsl(169,82%,27%);
}


input,
textarea{
padding:12px;
border:1px solid hsl(186,15%,59%);
border-radius:6px;
width:100%;
font-size:16px;
}

textarea{
height:120px;
resize:none;
}

input:focus,
textarea:focus{
border:2px solid hsl(169,82%,27%);
outline:none;
}


.query-row{
display:flex;
gap:15px;
margin-bottom:10px;
}

.radio-box{
border:1px solid hsl(186,15%,59%);
padding:12px;
border-radius:6px;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
flex:1;
transition:0.2s;
}

.radio-box:hover{
border-color:hsl(169,82%,27%);
}

.radio-box input{
display:none;
}

.radio{
width:18px;
height:18px;
border:2px solid hsl(186,15%,59%);
border-radius:50%;
}

.radio-box input:checked + .radio{
background:url("assets/images/icon-radio-selected.svg") center no-repeat;
border-color:hsl(169,82%,27%);
}

.radio-box:has(input:checked){
background:hsl(148,38%,91%);
border-color:hsl(169,82%,27%);
}


.checkbox{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
cursor:pointer;
}

.checkbox input{
display:none;
}

.check{
width:18px;
height:18px;
border:1px solid hsl(186,15%,59%);
display:flex;
align-items:center;
justify-content:center;
}

.checkbox input:checked + .check{
background:hsl(169,82%,27%) url("assets/images/icon-checkbox-check.svg") center no-repeat;
border-color:hsl(169,82%,27%);
}


button{
margin-top:20px;
width:100%;
padding:14px;
border:none;
background:hsl(169,82%,27%);
color:white;
border-radius:6px;
font-weight:700;
font-size:16px;
cursor:pointer;
transition:0.2s;
}

button:hover{
background:#0f6c58;
}


.error{
color:hsl(0,66%,54%);
font-size:13px;
margin-top:5px;
display:none;
}


.success-message{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
background:hsl(187,24%,22%);
color:white;
padding:20px 25px;
border-radius:10px;
display:none;
gap:10px;
align-items:center;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.success-message img{
width:20px;
}


@media(max-width:600px){

.name-row{
flex-direction:column;
}

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

.container{
width:100%;
padding:25px;
}

}