.local-captcha {
  align-items: center;
  background: #fafafa;
  border: 1px solid #d8d8d8;
  display: flex;
  gap: 12px;
  height: 78px;
  margin: 20px 0 10px;
  padding: 14px;
  position: relative;
  width: 304px;
}

.local-captcha input {
  appearance: none;
  -webkit-appearance: none;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 28px !important;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}

.local-captcha input:checked {
  border-color: transparent;
  background: transparent;
}

/* Google reCAPTCHA's actual checkmark, drawn in frame-by-frame from its own sprite. */
.local-captcha:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 25px;
  width: 38px;
  height: 30px;
  background: url("recaptcha-check-anim.png") 0 0 no-repeat;
  animation: lc-check-draw 0.7s steps(21) forwards;
}

/* Steps through the 22-frame sprite (last frame at y = -630px) to reveal the tick. */
@keyframes lc-check-draw {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -630px;
  }
}

.local-captcha span {
  color: #313941;
  font: 14px Arial, sans-serif;
}

.local-captcha small {
  color: #9aa0a6;
  font: 10px Arial, sans-serif;
  position: absolute;
  right: 10px;
  top: 12px;
  width: 62px;
  text-align: center;
}

.local-captcha small::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 3px;
  background: url("https://www.gstatic.com/recaptcha/api2/logo_48.png") center / contain no-repeat;
}

.local-captcha.verifying input {
  visibility: hidden;
}

.local-captcha.verifying::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 25px;
  width: 22px;
  height: 22px;
  border: 3px solid #d8d8d8;
  border-top-color: #4a90d9;
  border-radius: 50%;
  animation: local-captcha-spin 0.7s linear infinite;
}

@keyframes local-captcha-spin {
  to {
    transform: rotate(360deg);
  }
}