:root {
  --form-gap: 0.75rem;
  --form-padding: 0.5rem;
  --form-border-radius: 2rem;
  --form-input-width: clamp(10rem, 16vw, 16rem);
  --form-input-maxwidth: 100%;
  --form-background: var(--color-white);
  --form-color: var(--color-black-50);
  --form-arrow-down: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E%0A");
  --form-direction: column;
}

  @media (min-width: 640px) {:root {
    --form-direction: row
}
  }

/**
 * Form
 */

.hf-form .woocommerce-input-wrapper, .woocommerce-form .woocommerce-input-wrapper, .woocommerce-ResetPassword .woocommerce-input-wrapper, .woocommerce-EditAccountForm .woocommerce-input-wrapper, .woocommerce-checkout .woocommerce-input-wrapper, .comment-form .woocommerce-input-wrapper {
    display: block;
    width: 100%;
  }

.hf-form .for-company-form .split, .woocommerce-form .for-company-form .split, .woocommerce-ResetPassword .for-company-form .split, .woocommerce-EditAccountForm .for-company-form .split, .woocommerce-checkout .for-company-form .split, .comment-form .for-company-form .split {
      display: flex;
      flex-direction: column;
      flex-direction: var(--form-direction);
    }

@media (min-width: 768px) {

.hf-form .for-company-form .split, .woocommerce-form .for-company-form .split, .woocommerce-ResetPassword .for-company-form .split, .woocommerce-EditAccountForm .for-company-form .split, .woocommerce-checkout .for-company-form .split, .comment-form .for-company-form .split {
        justify-content: space-between;
        grid-gap: 1rem;
        gap: 1rem
    }
      }

@media (min-width: 768px) {

.hf-form .for-company-form .split p, .woocommerce-form .for-company-form .split p, .woocommerce-ResetPassword .for-company-form .split p, .woocommerce-EditAccountForm .for-company-form .split p, .woocommerce-checkout .for-company-form .split p, .comment-form .for-company-form .split p {
          width: 50%
      }
        }

.hf-form .for-company-form p, .woocommerce-form .for-company-form p, .woocommerce-ResetPassword .for-company-form p, .woocommerce-EditAccountForm .for-company-form p, .woocommerce-checkout .for-company-form p, .comment-form .for-company-form p {
      margin-bottom: 1rem;
    }

.hf-form .for-company-form label, .woocommerce-form .for-company-form label, .woocommerce-ResetPassword .for-company-form label, .woocommerce-EditAccountForm .for-company-form label, .woocommerce-checkout .for-company-form label, .comment-form .for-company-form label {
      font-size: .875rem;
    }

.hf-form .for-company-form label.required:after, .woocommerce-form .for-company-form label.required:after, .woocommerce-ResetPassword .for-company-form label.required:after, .woocommerce-EditAccountForm .for-company-form label.required:after, .woocommerce-checkout .for-company-form label.required:after, .comment-form .for-company-form label.required:after {
          content: '*';
          color: var(--color-red-500);
          font-weight: var(--button-font-weight);
          margin-left: 2px;
        }

.hf-form .for-company-form input:not(.button),
    .hf-form .for-company-form textarea,
    .woocommerce-form .for-company-form input:not(.button),
    .woocommerce-form .for-company-form textarea,
    .woocommerce-ResetPassword .for-company-form input:not(.button),
    .woocommerce-ResetPassword .for-company-form textarea,
    .woocommerce-EditAccountForm .for-company-form input:not(.button),
    .woocommerce-EditAccountForm .for-company-form textarea,
    .woocommerce-checkout .for-company-form input:not(.button),
    .woocommerce-checkout .for-company-form textarea,
    .comment-form .for-company-form input:not(.button),
    .comment-form .for-company-form textarea {
      border: 1px solid var(--color-grey-300);
    }

.hf-form .for-company-form input[type=submit], .woocommerce-form .for-company-form input[type=submit], .woocommerce-ResetPassword .for-company-form input[type=submit], .woocommerce-EditAccountForm .for-company-form input[type=submit], .woocommerce-checkout .for-company-form input[type=submit], .comment-form .for-company-form input[type=submit] {
      width: auto;
      margin-top: 2rem;
      padding: var(--button-padding);
    }

.hf-form select,
  .hf-form textarea,
  .hf-form input,
  .woocommerce-form select,
  .woocommerce-form textarea,
  .woocommerce-form input,
  .woocommerce-ResetPassword select,
  .woocommerce-ResetPassword textarea,
  .woocommerce-ResetPassword input,
  .woocommerce-EditAccountForm select,
  .woocommerce-EditAccountForm textarea,
  .woocommerce-EditAccountForm input,
  .woocommerce-checkout select,
  .woocommerce-checkout textarea,
  .woocommerce-checkout input,
  .comment-form select,
  .comment-form textarea,
  .comment-form input {
    background: var(--color-white);
    background: var(--form-background);
    display: flex;
    align-items: center;
    grid-gap: 0.75rem;
    gap: 0.75rem;
    grid-gap: var(--form-gap);
    gap: var(--form-gap);
    padding: 0.5rem 1rem;
    padding: var(--form-padding) calc(var(--form-padding)*2);
  }

.hf-form select[readonly="readonly"], .hf-form textarea[readonly="readonly"], .hf-form input[readonly="readonly"], .woocommerce-form select[readonly="readonly"], .woocommerce-form textarea[readonly="readonly"], .woocommerce-form input[readonly="readonly"], .woocommerce-ResetPassword select[readonly="readonly"], .woocommerce-ResetPassword textarea[readonly="readonly"], .woocommerce-ResetPassword input[readonly="readonly"], .woocommerce-EditAccountForm select[readonly="readonly"], .woocommerce-EditAccountForm textarea[readonly="readonly"], .woocommerce-EditAccountForm input[readonly="readonly"], .woocommerce-checkout select[readonly="readonly"], .woocommerce-checkout textarea[readonly="readonly"], .woocommerce-checkout input[readonly="readonly"], .comment-form select[readonly="readonly"], .comment-form textarea[readonly="readonly"], .comment-form input[readonly="readonly"] {
      color: var(--color-black-50);
      color: var(--form-color);
    }

.hf-form select, .woocommerce-form select, .woocommerce-ResetPassword select, .woocommerce-EditAccountForm select, .woocommerce-checkout select, .comment-form select {
    letter-spacing: 1px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    background-image: var(--form-arrow-down);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: 0.75em auto, 100%;
  }

.hf-form select option, .woocommerce-form select option, .woocommerce-ResetPassword select option, .woocommerce-EditAccountForm select option, .woocommerce-checkout select option, .comment-form select option {
      padding: 1rem 0;
      color: currentColor;
    }

.hf-form .password-input, .woocommerce-form .password-input, .woocommerce-ResetPassword .password-input, .woocommerce-EditAccountForm .password-input, .woocommerce-checkout .password-input, .comment-form .password-input {
    width: 100%;
  }

.form-row,
.woocommerce-form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-row label, .woocommerce-form-row label {
    font-size: 0.875rem;
    letter-spacing: 0.2px;
  }

/**
 * Checkbox
 */

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    position: relative;
    padding-left: 1.5rem;
  }

.woocommerce-form__label-for-checkbox input {
    min-width: 3rem;
  }

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input {
      position: absolute;
      left: 0.75rem;
      min-width: 0;
      width: auto;
    }

.woocommerce-form__label-for-checkbox span {
    display: block;
    white-space: nowrap;
  }

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox span {
      white-space: normal;
      white-space: initial;
    }

/**
 * Login
 */

.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-form-login {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

#my-account .woocommerce > h2 {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.hf-form {
  --form-background: var(--color-turqoise-100);
}

.hf-form select,
  .hf-form textarea,
  .hf-form input {
    width: 100%;
  }

.hf-form .button {
    background: var(--button-background);
  }