ReCAPTCHA v3 Google Badge is drawn underneath page content

Question

Please visit this page:

https://www.publictalksoftware.co.uk/contact-form/

Ideally please use a small phone like an iPhone6s. Scroll down to the bottom:

I know how to identify certain controls and set their Z index to 0 and thus the badge draw over them, but it will be a nightmare to add such settings for everything.

Instead, is there a way to do the reverse? Can I get this badge to ensure it is drawn on top of the page content?

The issue is worse if you scroll to the very bottom on a PC. You hover the mouse over the badge and it displays UNDERNEATH the footer area.

I have tried this:

body:not(.page-id-833) .grecaptcha-badge {
  z-index: 99999;
  display: none;
}

No joy.

Answer 1

So you set the badge to display none. The just set it to display as a block on the page you want it to show on using important to override the first style. :)

.grecaptcha-badge {
   display:none;
}
.page-id-833 .grecaptcha-badge {
   z-index: 99999;
   display:block !important;
}

As for the high z-index. It's just what worked on the site you provided. If you have issues and it only works on some of your pages. Just add !important to your stylesheet.