Custom styled checkbox (contact form 7) not working on iPhone

I've been working on a website that was built in WordPress using bootstrap templates. This website was not originally built by me, so I have troubles with it from time to time when implementing changes. The website uses yarn to build a 'dist' folder from node.js modules and elements contained within the theme folder. The stylesheets are scss files. After the build process finishes, it has created a 'dist' folder that is to be uploaded to the theme folder, which contains all the combined stylesheets, images, etc.

I'm having issues with a form that is created via contact form 7 and I'm not sure if this is an issue relating to the build process using yarn or something else. The issue is with a checkbox that I've added to the form. It works as expected on desktop displays, but when the site is viewed on an iPhone (via Chrome, Safari and Google browser apps) the checkbox tick doesn't appear on click.

Just for clarification, the last few websites I have built myself, that have included a form with a checkbox or checkboxes, are working perfectly across desktop and IOS devices. I use css stylesheets rather than scss, but I have used all the same styles on both the websites that are working fine and the one that is not working on IOS, so I really can't see why the checkbox is not working on mobile. I have also tried applying a couple of other fixes that have also not helped resolve the issue.

Please see below for the html code and scss code for the checkbox section of the website:

<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
            <label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
        </div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
                <span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
            </div>
<p></p></div>
<p></p></div>

    .acf-field-checkbox {

      .wpcf7-list-item {
        position: relative;
        margin-left: 0;
        width: 100%;
        display: block;
      }

      .wpcf7-list-item-label {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.5em;
        margin-left: 35px;
        display: block;
        cursor: pointer;
      }

      .wpcf7-list-item-label:before {
        position: absolute;
        left: 0;
        width: 28px;
        height: 28px;
        border: 1px solid #b79c68;
        border-radius: .25rem;
        display: block;
      }

      .wpcf7-list-item-label:after {
        position: absolute;
        content: '\1F5F8';
        font-size: 30px;
        color: #b79c68;
        width: 0px;
        height: 0px;
        top: 2px;
        left: 2px;
        opacity: 0;
      }

      input[type=checkbox] {
        display: none;
        -webkit-appearance: checkbox;
      }

      input[type=checkbox]:checked {

        + span.wpcf7-list-item-label:after {
          opacity: 1;
        }

      }

      label {
        margin-bottom: 0;
        cursor: pointer;
        display: block;
      }

    }

I appreciate there may be some styles applied that are not needed, but they are not affecting the checkbox functionality. Once I have found the right solution to get this working for this specific website, I will clean up the styles applied and remove any that aren't necessary.

If anyone has any idea why the checkbox could be not working on this website, when they work fine on the others I have built, I would really be grateful for any hints or advice you could give.

Thanks in advance, if you need anymore information about the issue, then please ask and I'm sure I can clear up anything needed.