/* Hawk Academy registration form — custom GF replacement.
   Loaded as a real stylesheet (never inline) so WP Rocket's Remove Unused CSS
   keeps it; JS-only classes are safelisted in the PHP.
   Theme buttons/inputs are aggressively styled by BuddyBoss + Elementor, hence
   the !important on properties those rules target (width/radius/padding/bg). */

.hawk-reg {
  --hr-blue: #3DB7E9;
  --hr-blue-d: #2f9fd0;
  --hr-violet: #ADBAFF;
  --hr-ink: #101828;
  --hr-muted: #667085;
  --hr-line: #D0D5DD;
  --hr-err: #D92D20;
  --hr-ok: #12B76A;
  --hr-ease: cubic-bezier(.4, 0, .2, 1);
  font-family: inherit;
  text-align: left;
  max-width: 420px;
  /* breathing room under the page's intro copy, which is an Elementor
     widget above this shortcode */
  margin: 30px auto 0;
}

/* ---------------------------------------------------------------- google */
.hawk-reg .hr-google a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  background: #fff;
  border: 1px solid var(--hr-line);
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  color: var(--hr-ink);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .12s;
}
.hawk-reg .hr-google a:hover {
  border-color: var(--hr-blue);
  box-shadow: 0 6px 18px rgba(61, 183, 233, .18);
  transform: translateY(-1px);
  color: var(--hr-ink);
}
.hawk-reg .hr-google a:active { transform: translateY(0); }
.hawk-reg .hr-google svg { flex: none; }

/* --------------------------------------------------------------- divider */
.hawk-reg .hr-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 20px;
  color: var(--hr-muted);
  font-size: 12.5px;
}
.hawk-reg .hr-divider::before,
.hawk-reg .hr-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #EAECF0;
}

/* ---------------------------------------------------------------- fields */
.hawk-reg .hr-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hawk-reg .hr-field { margin-bottom: 16px; }

.hawk-reg .hr-lab {
  position: relative;
  display: block;
  margin: 0;
}
.hawk-reg .hr-lab input {
  width: 100% !important;
  height: 60px !important;
  padding: 23px 16px 7px !important;
  background: #fff !important;
  border: 1px solid var(--hr-line) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--hr-ink) !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s;
}
.hawk-reg .hr-lab input:focus {
  border-color: var(--hr-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(61, 183, 233, .16) !important;
}
/* Floating label: sits in the field at rest, rises on focus/fill */
.hawk-reg .hr-lab-t {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  color: var(--hr-muted);
  pointer-events: none;
  transition: top .18s var(--hr-ease), font-size .18s var(--hr-ease),
              color .18s var(--hr-ease), transform .18s var(--hr-ease);
}
.hawk-reg .hr-lab input:focus ~ .hr-lab-t,
.hawk-reg .hr-lab input:not(:placeholder-shown) ~ .hr-lab-t {
  top: 10px;
  transform: translateY(0);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--hr-blue);
}
.hawk-reg .hr-lab input:-webkit-autofill ~ .hr-lab-t {
  top: 10px;
  transform: translateY(0);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hr-blue);
}

/* ------------------------------------------------------- password toggle */
.hawk-reg .hr-pw-wrap { position: relative; }
.hawk-reg .hr-pw-wrap .hr-lab input { padding-right: 52px !important; }
.hawk-reg .hr-pw-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 30px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--hr-muted) !important;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.hawk-reg .hr-pw-toggle:hover {
  color: var(--hr-ink) !important;
  background: #F2F4F7 !important;
}
.hawk-reg .hr-eye-slash { opacity: 0; transition: opacity .18s; }
.hawk-reg .hr-pw-toggle.is-on .hr-eye-slash { opacity: 1; }

/* ------------------------------------------------- password strength bar */
.hawk-reg .hr-meter {
  height: 3px;
  margin: 9px 2px 0;
  border-radius: 99px;
  background: #EAECF0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s;
}
.hawk-reg .hr-meter.is-on { opacity: 1; }
.hawk-reg .hr-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: var(--hr-err);
  transition: width .35s var(--hr-ease), background .3s;
}
.hawk-reg .hr-meter.s1 i { width: 25%;  background: var(--hr-err); }
.hawk-reg .hr-meter.s2 i { width: 50%;  background: #F79009; }
.hawk-reg .hr-meter.s3 i { width: 75%;  background: var(--hr-blue); }
.hawk-reg .hr-meter.s4 i { width: 100%; background: var(--hr-ok); }

/* The password rule stays out of sight until the member actually engages
   with the field: no nagging before they have typed a character. */
.hawk-reg .hr-hint {
  margin: 0 2px;
  font-size: 12px;
  color: var(--hr-muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s var(--hr-ease), opacity .18s, margin .22s var(--hr-ease);
}
.hawk-reg .hr-pw-wrap:focus-within ~ .hr-hint,
.hawk-reg .hr-field:has(input[name="hr_password"]:not(:placeholder-shown)) .hr-hint {
  max-height: 26px;
  opacity: 1;
  margin: 7px 2px 0;
}

/* -------------------------------------------------------------- consent */
.hawk-reg .hr-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hr-muted);
  cursor: pointer;
}
.hawk-reg .hr-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hawk-reg .hr-box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: #fff;
  border: 1.5px solid var(--hr-line);
  border-radius: 6px;
  transition: background .18s, border-color .18s;
}
.hawk-reg .hr-box::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.5);
}
.hawk-reg .hr-consent input:checked ~ .hr-box {
  background: var(--hr-blue);
  border-color: var(--hr-blue);
}
.hawk-reg .hr-consent input:checked ~ .hr-box::after { transform: rotate(45deg) scale(1); }
.hawk-reg .hr-consent input:focus-visible ~ .hr-box {
  box-shadow: 0 0 0 4px rgba(61, 183, 233, .2);
}
.hawk-reg .hr-consent a { color: var(--hr-blue); text-decoration: underline; }

/* --------------------------------------------------------------- submit */
.hawk-reg .hr-submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  height: 56px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 100px !important;
  background: linear-gradient(96deg, var(--hr-violet) 0%, var(--hr-blue) 58%, #63D2F7 100%) !important;
  background-size: 170% 100% !important;
  background-position: 0% 50% !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0B1B24 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-position .5s var(--hr-ease), transform .12s, box-shadow .22s, opacity .2s;
}
.hawk-reg .hr-submit:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(61, 183, 233, .32);
}
.hawk-reg .hr-submit:active { transform: translateY(0); }
.hawk-reg .hr-submit[disabled] { cursor: default; opacity: .9; transform: none; }

.hawk-reg .hr-spin {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(11, 27, 36, .28);
  border-top-color: #0B1B24;
  border-radius: 50%;
  animation: hr-spin .7s linear infinite;
}
.hawk-reg .hr-submit.is-busy .hr-spin { display: block; }
.hawk-reg .hr-submit.is-done {
  background: linear-gradient(96deg, var(--hr-ok), #0E9F5B) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(18, 183, 106, .3);
}
@keyframes hr-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- errors */
.hawk-reg .hr-msg,
.hawk-reg .hr-error {
  margin: 7px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hr-err);
  animation: hr-fade .22s var(--hr-ease);
}
.hawk-reg .hr-error { margin-top: 14px; text-align: center; }
.hawk-reg .hr-field.hr-has-error .hr-lab input,
.hawk-reg input.hr-bad {
  border-color: var(--hr-err) !important;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, .12) !important;
}
.hawk-reg .hr-field.hr-has-error .hr-lab-t { color: var(--hr-err); }
.hawk-reg .hr-field.hr-has-error .hr-box { border-color: var(--hr-err); }
.hawk-reg .hr-field.hr-shake { animation: hr-shake .34s var(--hr-ease); }

@keyframes hr-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes hr-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

/* ---------------------------------------------------------- login link */
.hawk-reg .hr-login {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--hr-muted);
}
.hawk-reg .hr-login a {
  color: var(--hr-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s;
}
.hawk-reg .hr-login a:hover { border-bottom-color: var(--hr-blue); }

/* ------------------------------------------------------------- entrance */
@keyframes hr-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.hawk-reg .hr-google,
.hawk-reg .hr-divider,
.hawk-reg .hr-form .hr-field,
.hawk-reg .hr-submit,
.hawk-reg .hr-login { animation: hr-in .38s var(--hr-ease) both; }
.hawk-reg .hr-divider { animation-delay: .05s; }
.hawk-reg .hr-form .hr-field:nth-of-type(1) { animation-delay: .09s; }
.hawk-reg .hr-form .hr-field:nth-of-type(2) { animation-delay: .13s; }
.hawk-reg .hr-form .hr-field:nth-of-type(3) { animation-delay: .17s; }
.hawk-reg .hr-form .hr-field:nth-of-type(4) { animation-delay: .21s; }
.hawk-reg .hr-submit { animation-delay: .25s; }
.hawk-reg .hr-login { animation-delay: .29s; }

@media (max-width: 480px) {
  .hawk-reg .hr-lab input { font-size: 16px !important; } /* stops iOS zoom-on-focus */
}

@media (prefers-reduced-motion: reduce) {
  .hawk-reg *,
  .hawk-reg *::after,
  .hawk-reg *::before {
    animation: none !important;
    transition: none !important;
  }
}