/* A4Q Academy: show/hide-password ("eye") buttons, see password-toggle.js. The eye is Flatsome's
   own icon (fl-icons), the one WooCommerce's password fields show on this site. */
.a4q-password {
  display: block;
  position: relative;
}

/* The site's Additional CSS gives every field 30px of padding on each side (!important), which makes
   them 62px tall at any width: the button sits centred on that height (the field's own bottom margin,
   which differs from form to form, stays below it), and the text keeps clear of it. */
.a4q-password > input.masteriyo-input {
  padding-right: 64px !important;
}

.a4q-password > .a4q-password-toggle {
  position: absolute;
  top: 31px;
  right: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #0a0a0a;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}

.a4q-password > .a4q-password-toggle::after {
  content: "\f108";
  font-family: fl-icons;
}

.a4q-password > .a4q-password-toggle[aria-pressed="true"]::after {
  content: "\f109";
}

.a4q-password > .a4q-password-toggle:hover {
  color: var(--fs-color-primary, #ff4b24);
}

.a4q-password > .a4q-password-toggle:focus-visible,
.chakra-input__group > [role="button"]:focus-visible,
.password-input .show-password-input:focus-visible {
  outline: 2px solid var(--fs-color-primary, #ff4b24);
  outline-offset: 2px;
}

/* the SPA's eye fills the field's right end: keep its focus ring inside the field */
.chakra-input__group > [role="button"]:focus-visible {
  outline-offset: -2px;
}

/* WooCommerce's own button: Flatsome shows it only while the field is hovered or focused */
.password-input .show-password-input {
  visibility: visible;
}