:root {
  --wp--preset--color--bft-gray-700: #6c7a89;
  --wp--preset--color--bft-gray-400: #2b2d42;
}
/* contact form styling */
form.cont-contact-main {
  margin: 0.5rem auto;
  font-family: inherit;
}

.cont-contact-main,
.field-container,
.form-field,
.value-required,
.invalid-value,
.missing-value,
.contact-form-submit_button,
.my-rest-api-info-el,
input,
textarea {
  box-sizing: border-box;
  width: 100%;
}

form.cont-contact-main .field-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "name_id name_id email_id email_id email_id"
    "subject_id subject_id subject_id subject_id subject_id"
    "message_id message_id message_id message_id message_id"
    "message_id message_id message_id message_id message_id"
    "message_id message_id message_id message_id message_id";
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

form.cont-contact-main .field-container .form-field .value-required {
  color: red;
  font-weight: bold;
  margin: 0;
}

@media screen and (max-width: 600px) {
  form.cont-contact-main .field-container {
    height: 700px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
      "name_id"
      "email_id"
      "subject_id"
      "message_id"
      "message_id"
      "message_id";
  }
}

#name_id {
  grid-area: name_id;
}

#subject_id {
  grid-area: subject_id;
}

#email_id {
  grid-area: email_id;
}

#message_id {
  grid-area: message_id;
}

form.cont-contact-main .field-container #message_id textarea {
  height: calc(100% - 0.5rem);
  padding: 0.5rem;
}

form.cont-contact-main .field-container :is(label, input, textarea) {
  display: block;
  font-family: inherit;
}

form.cont-contact-main .field-container .form-field {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}

form.cont-contact-main .field-container .form-field :is(input, textarea) {
  border-radius: 0.25rem;
  border: 1px solid var(--wp--preset--color--bft-gray-700);
  line-height: 2;
  padding: 0.25rem 0.5rem 0rem 0.5rem;
  outline: transparent;
  width: 100%;
}

form.cont-contact-main .field-container .form-field textarea {
  line-height: 1.5;
}

form.cont-contact-main
  .field-container
  .form-field
  :is(input:placeholder-shown, textarea:placeholder-shown)
  + label {
  color: var(--wp--preset--color--bft-gray-700);
  opacity: 0;
  transition: all 0.25s ease-in;
}

form.cont-contact-main
  .field-container
  .form-field
  :is(input:not(:placeholder-shown), textarea:not(:placeholder-shown))
  + label {
  color: rgb(0, 106, 208);
  transition: all 0.25s ease;
}
form.cont-contact-main
  .form-container
  .form-field
  :is(input:focus, textarea:focus) {
  outline: transparent;
  border: 1px solid rgb(0, 106, 208);
}

form.cont-contact-main .field-container .form-field .invalid-value {
  border-left: 3px solid red;
}

form.cont-contact-main .field-container .form-field .missing-value {
  border: 2px solid red;
  background-color: rgba(255, 0, 0, 0.01);
}

form.cont-contact-main > .form-field input {
  margin: 1rem 0 0.5rem 0;
  padding: 0.5rem 2rem;
  width: fit-content;
  background-color: var(--wp--preset--color--bft-gray-400);
  color: white;
  border-radius: 0.25rem;
  border: transparent;
  transition: all 0.125s ease-in;
}

form.cont-contact-main .contact-form-submit_button:hover {
  background-color: var(--wp--preset--color--bft-gray-700);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

form.cont-contact-main .contact-form-submit_button:active {
  background-color: var(--wp--preset--color--bft-gray-700);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transform: translateY(4px);
  cursor: pointer;
}

form.cont-contact-main .my-rest-api-info-el {
  display: none;
  transition: display 0.25s ease;
}

form.cont-contact-main .my-rest-api-info-el.send_success {
  display: block;
  color: white;
  background-color: lightgreen;
  padding: 1rem;
  width: 100%;
  margin: 0.5rem 0;
}

form.cont-contact-main .my-rest-api-info-el.send_no_success {
  display: block;
  color: white;
  background-color: red;
  padding: 1rem;
  width: 100%;
  margin: 0.5rem 0;
}