/* =========================================================================
   ACXPA Account Forms v1.0.0 | 6 Oct 2026
   Login (/login/), Forgot password and Reset password (/acxpa-lost-password/).
   Loaded only on those two pages by mu-plugins/acxpa-account-forms.php, and
   every rule is scoped to body.acxpa-af so nothing applies until the gate is on.
   Tokens only (acxpa-tokens.css). Primary action = Gold fill + Ink (8.49:1);
   secondary = white + Teal 700 outline (9.16:1).
   ========================================================================= */

/* Page ground + empty Kleo title band on the lost-password template */
body.acxpa-af #main { background: var(--acxpa-ds-cloud); }
/* The full-width template gives the sticky header wrapper 176px for an 89px header, which left an
   empty teal band above the card. Match the login page (default template). */
body.acxpa-af--forgot #header .sticky-wrapper,
body.acxpa-af--reset #header .sticky-wrapper { height: auto !important; }

body.acxpa-af #youzify-membership.youzify-membership-page-box {
  padding: var(--acxpa-ds-space-2xl) var(--acxpa-ds-space-md) var(--acxpa-ds-space-3xl) !important;
  background: transparent;
}

/* ---------- card */
body.acxpa-af .youzify-membership-form {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: var(--acxpa-ds-white) !important;
  border: 1px solid var(--acxpa-ds-teal-100) !important;
  border-radius: var(--acxpa-ds-radius-lg) !important;
  box-shadow: var(--acxpa-ds-shadow-lg) !important;
  overflow: hidden;
  font-family: var(--acxpa-ds-font) !important;
}

/* Header: the ACXPA lockup on Teal 800, same on all three forms.
   Beats the retired green banner rule in custom.css (.page-id-75733 …default-cover). */
body.acxpa-af .youzify-membership-form-header { margin: 0 !important; border: 0 !important; }
body.acxpa-af .youzify-membership-form .youzify-membership-form-cover,
body.acxpa-af.page-id-75733 .acxpa-forgot-form-cover.youzify-membership-form-cover.youzify-membership-default-cover {
  /* The lockup PNG (1200x400) has a solid Teal 700 ground, so the header is Teal 700 and the
     image is contained: the logo sits flush with no visible box edge at any card width. */
  background-color: var(--acxpa-ds-teal-700) !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 160px !important;
  padding: 0 !important;
  border-bottom: 4px solid var(--acxpa-ds-gold) !important;
}
/* The lockup image itself is set inline by the mu-plugin (it reads Youzify's login cover option). */

/* ---------- form body */
body.acxpa-af #youzify-membership-form {
  padding: var(--acxpa-ds-space-xl) var(--acxpa-ds-space-xl) var(--acxpa-ds-space-lg) !important;
}

body.acxpa-af .youzify-membership-form-note {
  padding: 0 !important; margin: 0 0 var(--acxpa-ds-space-lg) !important;
  background: none !important; border: 0 !important;
}
body.acxpa-af .acxpa-af-intro .acxpa-af-title {
  margin: 0 0 var(--acxpa-ds-space-xs) !important;
  font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-h3) !important;
  line-height: var(--acxpa-ds-leading-snug) !important;
  font-weight: 700 !important;
  color: var(--acxpa-ds-teal-700) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
body.acxpa-af .acxpa-af-intro p {
  margin: 0 0 var(--acxpa-ds-space-2xs) !important;
  font-size: var(--acxpa-ds-text-small) !important;
  line-height: var(--acxpa-ds-leading-body) !important;
  color: var(--acxpa-ds-slate) !important;
}

body.acxpa-af .youzify-membership-form-item { margin-bottom: var(--acxpa-ds-space-md) !important; }
body.acxpa-af .youzify-membership-form-item label {
  display: block;
  margin: 0 0 var(--acxpa-ds-space-2xs) !important;
  font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-small) !important;
  font-weight: 600 !important;
  color: var(--acxpa-ds-ink) !important;
}
body.acxpa-af #youzify-membership-form .youzify-membership-form-item input[type="text"],
body.acxpa-af #youzify-membership-form .youzify-membership-form-item input[type="email"],
body.acxpa-af #youzify-membership-form .youzify-membership-form-item input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 var(--acxpa-ds-space-sm) !important;
  font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-body) !important;
  color: var(--acxpa-ds-ink) !important;
  background: var(--acxpa-ds-white) !important;
  border: 1px solid var(--acxpa-ds-teal-300) !important;
  border-radius: var(--acxpa-ds-radius-md) !important;
  box-shadow: none !important;
}
body.acxpa-af #youzify-membership-form input:focus {
  outline: 3px solid color-mix(in srgb, var(--acxpa-ds-teal-700) 25%, transparent) !important;
  outline-offset: 0 !important;
  border-color: var(--acxpa-ds-teal-700) !important;
}

/* show / hide button inside password fields */
body.acxpa-af .acxpa-af-pw { position: relative; }
body.acxpa-af #youzify-membership-form .acxpa-af-pw input { padding-right: 76px !important; }
body.acxpa-af .acxpa-af-reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  min-width: 60px; height: 36px; padding: 0 var(--acxpa-ds-space-xs);
  font-family: var(--acxpa-ds-font); font-size: var(--acxpa-ds-text-caption); font-weight: 600;
  color: var(--acxpa-ds-teal-700); background: var(--acxpa-ds-teal-50);
  border: 0; border-radius: var(--acxpa-ds-radius-sm); cursor: pointer;
}
body.acxpa-af .acxpa-af-reveal:hover { background: var(--acxpa-ds-teal-100); }
body.acxpa-af .acxpa-af-reveal:focus-visible { outline: 2px solid var(--acxpa-ds-focus); outline-offset: 2px; }

/* The theme's green "Show Password" checkbox (footer.php) is replaced by the button above */
body.acxpa-af .youzify-membership-item-content:has(> label > #show_password),
body.acxpa-af .cs-pass-wrap { display: none !important; }

/* remember me + forgot link */
body.acxpa-af .youzify-membership-remember-me {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: var(--acxpa-ds-space-sm); margin: var(--acxpa-ds-space-xs) 0 var(--acxpa-ds-space-lg) !important;
}
body.acxpa-af .youzify-membership-remember-me label {
  margin: 0 !important; font-weight: 400 !important; color: var(--acxpa-ds-slate) !important;
}
body.acxpa-af .youzify-membership-forgot-password {
  float: none !important; margin-left: auto !important; text-align: right;
  font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-small) !important;
  font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
  color: var(--acxpa-ds-link) !important; text-decoration: underline !important;
}
body.acxpa-af .youzify-membership-forgot-password:hover { color: var(--acxpa-ds-link-hover) !important; }

/* ---------- buttons */
body.acxpa-af .youzify-membership-form-actions { margin-top: var(--acxpa-ds-space-md) !important; }
body.acxpa-af .youzify-membership-action-item { margin-bottom: var(--acxpa-ds-space-sm) !important; }
body.acxpa-af .youzify-membership-submit-item button,
body.acxpa-af .youzify-membership-link-item .youzify-membership-link-button {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-height: 52px !important; height: auto !important;
  padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-md) !important;
  font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-body) !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important;
  border-radius: var(--acxpa-ds-radius-md) !important;
  box-shadow: none !important; text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.acxpa-af .youzify-membership-submit-item button {
  background: var(--acxpa-ds-gold) !important;
  color: var(--acxpa-ds-ink) !important;
  border: 2px solid var(--acxpa-ds-gold) !important;
}
body.acxpa-af .youzify-membership-submit-item button:hover { background: var(--acxpa-ds-gold-mid) !important; border-color: var(--acxpa-ds-gold-mid) !important; }
body.acxpa-af .youzify-membership-submit-item button:focus-visible { outline: 3px solid var(--acxpa-ds-teal-700) !important; outline-offset: 2px; }
body.acxpa-af .youzify-membership-submit-item button[disabled] { opacity: .7; cursor: progress; }
body.acxpa-af .youzify-membership-submit-item button .youzify-membership-button-title { color: inherit !important; }
body.acxpa-af .youzify-membership-link-item .youzify-membership-link-button {
  background: var(--acxpa-ds-white) !important;
  color: var(--acxpa-ds-teal-700) !important;
  border: 2px solid var(--acxpa-ds-teal-700) !important;
}
body.acxpa-af .youzify-membership-link-item .youzify-membership-link-button:hover { background: var(--acxpa-ds-teal-50) !important; }

/* ---------- messages (Youzify's and ours) */
body.acxpa-af .youzify-membership-form-message {
  margin: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl) 0 !important;
  padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md) !important;
  border: 0 !important; border-left: 4px solid currentColor !important;
  border-radius: var(--acxpa-ds-radius-sm) !important;
}
body.acxpa-af .youzify-membership-form-message p {
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--acxpa-ds-font) !important;
  font-size: var(--acxpa-ds-text-small) !important; line-height: var(--acxpa-ds-leading-body) !important;
  color: var(--acxpa-ds-ink) !important;
}
body.acxpa-af .youzify-membership-success-msg { background: var(--acxpa-ds-success-tint) !important; color: var(--acxpa-ds-success) !important; }
body.acxpa-af .youzify-membership-success-msg strong { color: var(--acxpa-ds-success-deep) !important; }
body.acxpa-af .youzify-membership-error-msg { background: var(--acxpa-ds-error-tint) !important; color: var(--acxpa-ds-error) !important; }
body.acxpa-af .youzify-membership-info-msg { background: var(--acxpa-ds-info-tint) !important; color: var(--acxpa-ds-info) !important; }

body.acxpa-af .acxpa-af-notice {
  margin: 0 0 var(--acxpa-ds-space-md);
  padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
  border-left: 4px solid; border-radius: var(--acxpa-ds-radius-sm);
  font-family: var(--acxpa-ds-font); font-size: var(--acxpa-ds-text-small);
  line-height: var(--acxpa-ds-leading-body); color: var(--acxpa-ds-ink);
}
body.acxpa-af .acxpa-af-notice:focus { outline: none; }
body.acxpa-af .acxpa-af-notice--error { background: var(--acxpa-ds-error-tint); border-color: var(--acxpa-ds-error); }
body.acxpa-af .acxpa-af-notice--info  { background: var(--acxpa-ds-info-tint);  border-color: var(--acxpa-ds-info); }
body.acxpa-af .acxpa-af-notice a { color: var(--acxpa-ds-teal-700); font-weight: 600; text-decoration: underline; }

/* ---------- reset: strength meter, rules, match */
body.acxpa-af .acxpa-af-meter {
  margin: calc(-1 * var(--acxpa-ds-space-xs)) 0 var(--acxpa-ds-space-md);
  padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
  background: var(--acxpa-ds-teal-50);
  border-radius: var(--acxpa-ds-radius-md);
  font-family: var(--acxpa-ds-font);
}
body.acxpa-af .acxpa-af-meter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: var(--acxpa-ds-space-xs); }
body.acxpa-af .acxpa-af-meter-bar span { height: 6px; border-radius: var(--acxpa-ds-radius-pill); background: var(--acxpa-ds-teal-200); transition: background-color .15s ease; }
body.acxpa-af .acxpa-af-meter[data-level="1"] .acxpa-af-meter-bar span:nth-child(-n+1) { background: var(--acxpa-ds-error); }
body.acxpa-af .acxpa-af-meter[data-level="2"] .acxpa-af-meter-bar span:nth-child(-n+2) { background: var(--acxpa-ds-warning); }
body.acxpa-af .acxpa-af-meter[data-level="3"] .acxpa-af-meter-bar span:nth-child(-n+3) { background: var(--acxpa-ds-teal-500); }
body.acxpa-af .acxpa-af-meter[data-level="4"] .acxpa-af-meter-bar span { background: var(--acxpa-ds-success); }
body.acxpa-af .acxpa-af-meter-label { margin: 0 0 var(--acxpa-ds-space-xs) !important; font-size: var(--acxpa-ds-text-small) !important; color: var(--acxpa-ds-ink) !important; }
body.acxpa-af .acxpa-af-meter[data-level="1"] .acxpa-af-meter-label strong { color: var(--acxpa-ds-error); }
body.acxpa-af .acxpa-af-meter[data-level="2"] .acxpa-af-meter-label strong { color: var(--acxpa-ds-warning-deep); }
body.acxpa-af .acxpa-af-meter[data-level="3"] .acxpa-af-meter-label strong { color: var(--acxpa-ds-teal-700); }
body.acxpa-af .acxpa-af-meter[data-level="4"] .acxpa-af-meter-label strong { color: var(--acxpa-ds-success-deep); }
body.acxpa-af .acxpa-af-rules { list-style: none !important; margin: 0 !important; padding: 0 !important; }
body.acxpa-af .acxpa-af-rules li {
  position: relative; margin: 0 0 2px !important; padding-left: 24px !important;
  font-size: var(--acxpa-ds-text-small) !important; line-height: var(--acxpa-ds-leading-body) !important;
  color: var(--acxpa-ds-slate) !important; list-style: none !important;
}
body.acxpa-af .acxpa-af-rules li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--acxpa-ds-teal-300); box-sizing: border-box;
}
body.acxpa-af .acxpa-af-rules li.is-met { color: var(--acxpa-ds-ink) !important; }
body.acxpa-af .acxpa-af-rules li.is-met::before {
  border-color: var(--acxpa-ds-success); background: var(--acxpa-ds-success);
  box-shadow: inset 0 0 0 2px var(--acxpa-ds-white);
}

body.acxpa-af .acxpa-af-match {
  min-height: 1.6em; margin: var(--acxpa-ds-space-2xs) 0 0 !important;
  font-family: var(--acxpa-ds-font); font-size: var(--acxpa-ds-text-small) !important; font-weight: 600;
}
body.acxpa-af .acxpa-af-match.is-ok::before  { content: "\2713\00a0"; }
body.acxpa-af .acxpa-af-match.is-bad::before { content: "\2715\00a0"; }
body.acxpa-af .acxpa-af-match.is-ok      { color: var(--acxpa-ds-success-deep) !important; }
body.acxpa-af .acxpa-af-match.is-bad     { color: var(--acxpa-ds-error) !important; }
body.acxpa-af .acxpa-af-match.is-pending { color: var(--acxpa-ds-slate) !important; }

/* ---------- "Check your inbox" view (/login/?reset_pass=1): the panel replaces Youzify's one-line
   success message, and the two links sit side by side as equal secondary buttons. */
body.acxpa-af--sent .youzify-membership-form-message { display: none !important; }
body.acxpa-af--sent .acxpa-af-intro { padding: var(--acxpa-ds-space-md); background: var(--acxpa-ds-success-tint); border-radius: var(--acxpa-ds-radius-md); }
body.acxpa-af--sent .acxpa-af-intro .acxpa-af-title { color: var(--acxpa-ds-success-deep) !important; }
body.acxpa-af--sent .acxpa-af-intro p { color: var(--acxpa-ds-ink) !important; }
body.acxpa-af--sent .youzify-membership-link-item:first-child .youzify-membership-link-button {
  background: var(--acxpa-ds-gold) !important; color: var(--acxpa-ds-ink) !important; border-color: var(--acxpa-ds-gold) !important;
}

/* ---------- phones */
@media (max-width: 540px) {
  body.acxpa-af #youzify-membership.youzify-membership-page-box { padding: var(--acxpa-ds-space-md) var(--acxpa-ds-space-sm) var(--acxpa-ds-space-2xl) !important; }
  body.acxpa-af #youzify-membership-form { padding: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md) var(--acxpa-ds-space-md) !important; }
  body.acxpa-af .youzify-membership-form-message { margin: var(--acxpa-ds-space-md) var(--acxpa-ds-space-md) 0 !important; }
  body.acxpa-af .youzify-membership-form .youzify-membership-form-cover { min-height: 104px !important; }
}