/**
 * ALTCHA widget styling for the SCHOOL OF MEDICINE theme (userth).
 *
 * Palette and type follow themes/userth/css/main.css: Cera Pro, brand teal
 * #00b1bc, body grey #7f7f7f, input underline #cbcbcb, success #24a777,
 * error #cc3333.
 */

/*
 * Registration form: the field_group fieldsets ("Your Personal Information",
 * "Account Information") carry no theme class, so they render with the
 * browser's default groove border and inner padding. Show them as plain
 * titled sections instead. Scoped to the front-end theme (.layout-container)
 * so the admin "Add user" form keeps its own look.
 */
.layout-container .user-register-form fieldset.form-wrapper {
  border: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.layout-container .user-register-form fieldset.form-wrapper > legend {
  padding: 0;
  margin: 0 0 5px;
  font-weight: 600;
  color: #00b1bc;
}

/* Wrapper that the CAPTCHA module renders around the widget. .user-form is a
   wrapping flex row (main.css), so the wrapper takes the full row to sit on
   its own line above the submit button instead of floating next to the
   "Account Information" fieldset on wide screens. */
.user-form .captcha,
.user-login-form .captcha,
.user-pass .captcha,
.contact-message-feedback-form .captcha {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 25px;
}

/* 504px is the rendered width of the size="60" text inputs above it, so the
   box lines up with them; on narrow screens it shrinks with the inputs. */
.captcha altcha-widget {
  display: block;
  width: 504px;
  max-width: 100%;
}

/* The widget's own look is driven by these custom properties. */
.captcha .altcha {
  --altcha-max-width: 100%;
  --altcha-border-width: 1px;
  --altcha-border-radius: 4px;
  --altcha-color-base: #ffffff;
  --altcha-color-border: #cbcbcb;
  --altcha-color-border-focus: #00b1bc;
  --altcha-color-text: #7f7f7f;
  --altcha-color-error-text: #cc3333;
  --altcha-color-footer-bg: #f5f5f5;
  font-family: 'Cera Pro', sans-serif;
  font-size: 15px;
  transition: border-color 300ms ease-out;
}

.captcha .altcha[data-state="verifying"] {
  --altcha-color-border: #00b1bc;
}

.captcha .altcha[data-state="verified"] {
  --altcha-color-border: #24a777;
}

.captcha .altcha[data-state="error"] {
  --altcha-color-border: #cc3333;
}

/*
 * Olivero (base theme) sets appearance:none on every checkbox and only draws
 * the box/checkmark for inputs carrying its .form-boolean class, while
 * main.css styles every <input> in a form as an underlined text field (and
 * 100% wide under 700px). The widget's checkbox has neither class, so draw it
 * completely here.
 */
.captcha .altcha input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid #cbcbcb;
  border-radius: 3px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}

.captcha .altcha input[type="checkbox"]:hover {
  border-color: #00b1bc;
}

/* Olivero draws a 2px blue border + outline on every focused checkbox. */
.captcha .altcha input[type="checkbox"]:focus {
  border-width: 1px;
  outline: none;
}

.captcha .altcha input[type="checkbox"]:focus-visible {
  outline: 2px solid #00b1bc;
  outline-offset: 2px;
}

.captcha .altcha input[type="checkbox"]:checked {
  border-color: #24a777;
  background-color: #24a777;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/></svg>");
}

.captcha .altcha .altcha-label label {
  color: #7f7f7f;
  font-weight: 400;
  cursor: pointer;
}

.captcha .altcha[data-state="verified"] .altcha-label label {
  color: #24a777;
}

.captcha .altcha .altcha-error {
  font-size: 13px;
}