@charset "UTF-8";
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Karla", sans-serif;
  font-weight: 400;
  background-color: hsl(148, 38%, 91%);
  color: hsl(187, 24%, 22%);
}

section {
  margin: 128px auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 740px;
  padding: 38px 42px;
  border-radius: 16px;
}

h1 {
  font-size: 1.9375rem;
}

form {
  margin-top: 32px;
}

.form-label {
  display: block;
  font-size: 1rem;
}
.form-label::after {
  content: "   *";
  color: hsl(169, 82%, 27%);
}

label[for=message] {
  margin-top: 26px;
}

fieldset {
  display: flex;
  gap: 16px;
  border: none;
  margin-top: 27px;
}
fieldset div {
  border-radius: 8px;
  border: 1px solid hsl(186, 15%, 59%);
  padding: 14px 25px;
}
fieldset label {
  font-size: 1.125rem;
  vertical-align: middle;
  padding-left: 10px;
  cursor: pointer;
}
fieldset[aria-invalid=true] + .error-message {
  display: inline-block;
  margin: 20px 0 3px;
}

legend {
  margin-bottom: 19px;
}
legend::after {
  content: "   *";
  color: hsl(169, 82%, 27%);
}

input[type=text], input[type=email] {
  border-radius: 8px;
  border: 1px solid hsl(186, 15%, 59%);
  font-family: "Karla", sans-serif;
  font-size: 1.125rem;
  color: hsl(187, 24%, 22%);
  margin-top: 11px;
  width: 100%;
  height: 51px;
  cursor: pointer;
  padding: 20px 22px;
}
input[type=text]:focus, input[type=text]:hover, input[type=email]:focus, input[type=email]:hover {
  outline: none;
  border: 2px solid hsl(169, 82%, 27%);
}
input[type=text][aria-invalid=true], input[type=email][aria-invalid=true] {
  border-color: hsl(0, 66%, 54%);
}
input[type=text][aria-invalid=true] + .error-message, input[type=email][aria-invalid=true] + .error-message {
  display: inline-block;
  margin: 10px 0 3px;
}

input[type=radio] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio]:checked {
  opacity: 0;
}

input[type=checkbox] {
  margin-right: 18px;
  width: 22px;
  cursor: pointer;
}
input[type=checkbox]:checked {
  opacity: 0;
}

textarea {
  border-radius: 8px;
  border: 1px solid hsl(186, 15%, 59%);
  font-family: "Karla", sans-serif;
  font-size: 1.125rem;
  color: hsl(187, 24%, 22%);
  margin-top: 11px;
  width: 100%;
  height: 105px;
  resize: none;
  cursor: pointer;
  padding: 15px 25px 15px 22px;
}
textarea:focus, textarea:hover {
  outline: none;
  border: 2px solid hsl(169, 82%, 27%);
}
textarea[aria-invalid=true] {
  border-color: hsl(0, 66%, 54%);
}
textarea[aria-invalid=true] + .error-message {
  display: inline-block;
  margin: 7px 0;
}

button {
  margin-top: 43px;
  color: hsl(0, 0%, 100%);
  background-color: hsl(169, 82%, 27%);
  border-radius: 8px;
  width: 100%;
  font-weight: 700;
  height: 59px;
  border: 1px solid hsl(169, 82%, 27%);
  font-size: 1.125rem;
  font-family: "Karla", sans-serif;
}
button:hover {
  background-color: hsl(187, 24%, 22%);
}

.name-container {
  display: flex;
  gap: 16px;
  margin-bottom: 27px;
}

.name-wrapper, .query-type-wrapper {
  width: 50%;
}

.query-type-wrapper:hover {
  cursor: pointer;
}

.query-type-wrapper label {
  position: relative;
}
.query-type-wrapper label::before {
  content: "";
  display: inline-block;
  background-image: url("../assets/images/icon-radio-selected.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  width: 20px;
  height: 21px;
  left: -4px;
  top: calc(50% + 1px);
  transform: translate(-100%, -50%);
  opacity: 0;
}

.error-message {
  display: none;
  color: hsl(0, 66%, 54%);
}

.consent-container {
  display: flex;
  margin-top: 39px;
}
.consent-container label {
  position: relative;
  cursor: pointer;
}
.consent-container label::after {
  content: " *";
  color: hsl(169, 82%, 27%);
}
.consent-container label::before {
  content: "";
  display: inline-block;
  background-image: url("../assets/images/icon-checkbox-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  width: 20px;
  height: 21px;
  left: -21px;
  top: calc(50% + 1px);
  transform: translate(-100%, -50%);
  opacity: 0;
}

.selected-query {
  border: 2px solid hsl(169, 82%, 27%);
  background-color: hsl(148, 38%, 91%);
}
.selected-query label::before {
  opacity: 1;
}

.consented label::before {
  opacity: 1;
}

.show-consent-error {
  display: inline-block;
  margin: 14px 0;
}

.success-msg {
  display: none;
  background-color: hsl(187, 24%, 22%);
  color: hsl(0, 0%, 100%);
  position: absolute;
  top: 10px;
  left: 50%;
  border-radius: 10px;
  padding: 25px;
  transform: translateX(-50%);
}
.success-msg div {
  display: flex;
  margin-bottom: 16px;
}
.success-msg h2 {
  font-size: 18px;
  margin-bottom: 1px;
}
.success-msg img {
  padding-right: 8px;
}

@media screen and (max-width: 740px) {
  section {
    margin: 30px auto;
    padding: 25px;
    max-width: 350px;
  }
  .name-container, fieldset {
    flex-direction: column;
  }
  .name-wrapper, .query-type-wrapper {
    width: 100%;
  }
  textarea {
    height: 235px;
  }
  .consent-container label {
    line-height: 1.6;
    width: 250px;
  }
  .success-msg {
    width: 70%;
  }
}
@media screen and (max-width: 350px) {
  section {
    width: 90%;
  }
}