Как стилизовать radio кнопку в contact form wordpress?

Всем привет! Есть необходимость стилизовать радио кнопки, как на картинке

и адаптировать их для формы contact form 7 в wordpress. С первой частью удалось справиться с помощью стилей - фидл, но со второй нет (ниже в фидле)

[radio gates-avto id:on class:radio default:1 "Да"]
[radio gates-avto id:on class:radio "Нет"]
<div class="list">
<label class="btn btn_on" for="on">Да</label><label class="btn btn_off" for="off">Нет</label>
</div>

т.к. много дополнительных оберток от формы плагина - уткнулся в тупик..

<p><span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="on"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Да" checked="checked">&nbsp;<span class="wpcf7-list-item-label">Да</span></span>
  </span>
  </span>
  <br>
  <span class="wpcf7-form-control-wrap gates-avto"><span class="wpcf7-form-control wpcf7-radio radio" id="off"><span class="wpcf7-list-item first last"><input type="radio" name="gates-avto" value="Нет">&nbsp;<span class="wpcf7-list-item-label">Нет</span></span>
  </span>
  </span>
</p>
<div class="list">
  <label class="btn btn_on" for="on">Да</label>
  <label class="btn btn_off" for="off">Нет</label>
</div>