/* ============================================================
   NPF Core — the login / register / forgot-password modals.

   WHAT THIS IS
   ------------
   The header's "Login" button does not navigate: zm-ajax-login-register binds
   a click handler to `.login-link` (assets/login.js) and opens a Semantic UI
   modal whose body is fetched over AJAX. That modal predates the redesign, so
   it still arrived in the theme's own styling — 12px inputs, a purple gradient
   button, red required-asterisks — next to a site that had been rebuilt around
   the /account design. This is that modal wearing the /account design.

   WHY CSS ONLY
   ------------
   Every value below is copied from npf-auth.css, which is the port of the
   reference design and is what /account renders. Nothing here touches the form:
   the markup keeps coming from the plugin's own views/login-form.php, so both
   nonces, the field names, the reCAPTCHA and 2FA slots, the AJAX submit binding
   on `.login_form` and the modal-switching handles are all exactly as the
   plugin emits them. Deleting this file returns the modal to its old look and
   changes nothing else.

   SCOPE
   -----
   `.zm-ajax` is the class the plugin puts on all three of its dialogs, so the
   shell rules cover login, register and forgot-password together, and nothing
   outside those dialogs is reachable from here.
   ============================================================ */

.zm-ajax {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-ink: #020b18;
  --npf-muted: #677489;
  --npf-g100: #e4e7e9;
  --npf-g500: #77878f;
  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.28s var(--npf-ease);
  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------- The card ----------
   Semantic UI ships .ui.modal at 4px radius on a full-width grid cell; the
   design's auth panel is a 24px-radius card. `!important` on the width trio
   because Semantic sets those inline-ish via its own .smaller sizing rules. */
.ui.modal.zm-ajax {
  width: 100% !important;
  max-width: 468px !important;
  margin: 0 !important;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(2, 11, 24, 0.18);
  font-family: var(--npf-font-body);
  color: var(--npf-ink);
  overflow: visible;
}

.ui.modal.zm-ajax > .content-login-form,
.ui.modal.zm-ajax > .content-register-form,
.ui.modal.zm-ajax > .content-forgot-form {
  padding: 44px 40px 40px;
  border-radius: inherit;
  background: none;
}

/* Close control. The theme parks it outside the card as a white glyph on the
   dimmer, which reads as a stray mark rather than a control; the design's
   dialogs close from inside their own top-right corner. */
.ui.modal.zm-ajax > i.close.icon {
  top: 14px;
  right: 14px;
  left: auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--npf-muted);
  opacity: 1;
  font-size: 15px;
  line-height: 1;
  transition: background var(--npf-t), color var(--npf-t);
}

.ui.modal.zm-ajax > i.close.icon:hover {
  background: #f1f4f9;
  color: var(--npf-ink);
}

/* ---------- Title ---------- */

/* The design's .auth-title, stepped down from 45px: this is a 468px dialog, not
   an 860px panel, and the reference's -2px tracking needs a smaller size to
   stay on two words a line. */
.zm-ajax .header.modal-login,
.zm-ajax .header.modal-register,
.zm-ajax .header.modal-forgot,
.zm-ajax .ajax-login-register-login-container > .header,
.zm-ajax .ajax-login-register-register-container > .header,
.zm-ajax .ajax-login-register-forgot-container > .header {
  padding: 0 24px 0 0;
  margin: 0 0 6px;
  border: 0;
  background: none;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--npf-ink);
}

.zm-ajax .form-wrapper {
  margin-top: 32px;
  /* The modal body inherits centred text from .ui.modal, which drags the
     remember-me row into the middle of the dialog. */
  text-align: left;
}

/* ------------------------------------------------------------------
   Specificity block

   iscu-public.css loads after this file and styles the login form through
   long, `!important` selectors of its own — `.ui.form .login-input-wrappers
   .field input[type=text]` for the 12px radius, the same chain plus
   `.button-container button[type=submit]` for the purple gradient, and
   `body div .header.modal-login` for the 22px Open Sans title. Equal
   `!important` is decided on specificity, so those cannot be beaten by a
   shorter selector no matter how many `!important`s it carries.

   Each rule below is therefore that plugin's own selector with `.zm-ajax`
   prefixed onto it: one class heavier, and inert anywhere outside these three
   dialogs. Same for Semantic UI's `.ui.checkbox input { opacity: 0 !important }`.
   ------------------------------------------------------------------ */

/* Title — the ID carries the plugin's Open Sans down the whole subtree. */
.zm-ajax #ajax-login-register-login-target,
.zm-ajax #ajax-login-register-target,
.zm-ajax #ajax-login-register-forgot-target {
  font-family: var(--npf-font-body);
}

body div .zm-ajax .header.modal-login,
.zm-ajax .header.modal-login {
  font-family: var(--npf-font-body) !important;
  /* 26px, not the panel's 45px or a straight 30px: this title runs to two lines
     in a 468px dialog either way, and `balance` splits it evenly instead of
     leaving one word stranded underneath. */
  font-size: 26px !important;
  line-height: 34px;
  font-weight: 600 !important;
  text-wrap: balance;
}

/* Field rhythm. The plugin zeroes the gap between fields
   (`.ui.form .login-input-wrappers .field { margin-bottom: 0 }`) because its own
   inputs carried an 18px margin instead; those are zeroed above, so the spacing
   has to come back here or the two fields butt together. */
.zm-ajax .ui.form .login-input-wrappers .field,
.zm-ajax .ui.form .forgot_form .field {
  margin-bottom: 20px;
}

/* …except the reCAPTCHA and 2FA slots, which are empty on most renders and
   would otherwise leave a 20px hole above the button. */
.zm-ajax .ui.form .login-input-wrappers .field:empty {
  margin-bottom: 0;
}

/* Labels — the plugin makes these a flex row with a 16px gap below, which is
   what left room for the asterisk this design does not use. */
.zm-ajax .ui.form .login-input-wrappers .field label,
.zm-ajax .ui.form .forgot_form .field label,
.zm-ajax .iscu_form label {
  display: block;
  gap: 0;
  font-size: 15px;
  margin-bottom: 8px;
}

/* Inputs — 12px radius and an 18px bottom margin, both from the plugin. */
.zm-ajax .ui.form .login-input-wrappers .field input[type="text"],
.zm-ajax .ui.form .login-input-wrappers .field input[type="email"],
.zm-ajax .ui.form .login-input-wrappers .field input[type="password"],
.zm-ajax .forgot_form.ui.form .form-wrapper.forgot .field input[type="text"],
.zm-ajax .iscu_form input[type="text"],
.zm-ajax .iscu_form input[type="email"],
.zm-ajax .iscu_form input[type="tel"],
.zm-ajax .iscu_form input[type="password"] {
  padding: 12px 15px !important;
  margin-bottom: 0 !important;
  font-size: 15px;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
}

/* Submit — the purple gradient and its violet drop shadow. */
.zm-ajax .ui.form .login-input-wrappers .button-container button[type="submit"],
.zm-ajax .ui.form.forgot_form .form-wrapper.forgot .button-container button[type="submit"],
.zm-ajax .iscu_form button[type="submit"] {
  background: var(--npf-primary) !important;
  background-image: none !important;
  border-radius: 6px;
  box-shadow: none;
  font-weight: 600;
  font-size: 16px;
}

.zm-ajax .ui.form .login-input-wrappers .button-container button[type="submit"]:hover,
.zm-ajax .ui.form.forgot_form .form-wrapper.forgot .button-container button[type="submit"]:hover,
.zm-ajax .iscu_form button[type="submit"]:hover {
  background: var(--npf-primary-dark) !important;
}

/* Checkbox — Semantic hides the native control behind its own drawn box, which
   the theme never styles inside this dialog, so nothing was visible at all. */
.zm-ajax .ui.checkbox input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  z-index: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--npf-primary);
  cursor: pointer;
}

/* ---------- Fields ---------- */

/* iscu-public.css pads every .iscu_form_row by 5px and margins the inputs by
   18px; the design's field is label + 8px + input with the rhythm owned by the
   stack, so both are zeroed and the gap is set once below. */
.zm-ajax .login-input-wrappers .field,
.zm-ajax .register-input-wrappers .field,
.zm-ajax .forgot_form .field {
  margin: 0 0 20px;
}

.zm-ajax .iscu_form_row {
  padding: 0;
  margin: 0;
}

.zm-ajax .login-input-wrappers label,
.zm-ajax .iscu_form_row > label,
.zm-ajax .forgot_form label {
  display: block;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #010810;
  margin: 0 0 8px;
}

/* The red asterisk is iscu-public.css's `.iscu_required_field::after`. The
   design marks nothing required — every field in these dialogs is — so it is
   dropped here rather than restyled. The class stays on the label, so any
   script or stylesheet that keys off it is unaffected. */
.zm-ajax .iscu_required_field::after { content: none; }

/* !important on the geometry: iscu-public.css reaches these through
   `.login-input-wrappers input` and loads after this file. */
.zm-ajax input[type="text"],
.zm-ajax input[type="email"],
.zm-ajax input[type="password"],
.zm-ajax input[type="tel"],
.zm-ajax .ui.form input[type="text"],
.zm-ajax .ui.form input[type="email"],
.zm-ajax .ui.form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  height: 46px !important;
  margin: 0 !important;
  padding: 12px 15px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  background: #fff;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: var(--npf-ink);
  box-shadow: none;
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

.zm-ajax input::placeholder { color: var(--npf-g500); }

.zm-ajax input[type="text"]:focus,
.zm-ajax input[type="email"]:focus,
.zm-ajax input[type="password"]:focus,
.zm-ajax input[type="tel"]:focus {
  outline: none;
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 132, 195, 0.16);
}

/* reCAPTCHA and 2FA keep their slots but should not leave a 20px hole when the
   widget renders nothing — which is every page load where the site key does not
   match the domain. :empty only matches when the theme printed no element at
   all; a rendered widget still gets its spacing. */
.zm-ajax .login-input-wrappers .field:empty { margin: 0; }

/* A hard stop at the dialog's edge. npf-recaptcha-fit.js is what sizes the
   widget correctly; this makes sure that if it ever mis-measures again — the
   theme's scaler runs on `load` and `resize`, and the widget is a
   third-party iframe — the overflow is clipped inside the modal rather than
   painted across the page. The class is the theme's `.g-recaptcha-class`, not
   Google's `.g-recaptcha`. */
.zm-ajax .g-recaptcha-class,
.zm-ajax .grecaptcha-badge { max-width: 100%; }

/* The gap under the widget. front.min.css reserves space beneath it — 45px on
   `.g-recaptcha-class`, 40px on `#zm_login`/`#zm_register` — which pays for
   the theme's own scaling: it enlarges the widget past its layout box, and the
   margin stops the button colliding with the overhang. Nothing here is scaled
   up any more, so that reserve is just a hole between the captcha and Login.
   ID selectors, so the override has to carry one to outrank them. */
.zm-ajax #zm_login,
.zm-ajax #zm_register,
.zm-ajax .g-recaptcha-class {
  margin-bottom: 0 !important;
}

.zm-ajax .login-input-wrappers .field:has(.g-recaptcha-class),
.zm-ajax .register-input-wrappers .field:has(.g-recaptcha-class) {
  overflow: hidden;
}

/* ---------- Submit ---------- */

/* The purple gradient is iscu-public.css's; the design's primary button is a
   flat --primary at 6px with no text-shadow. `.green` is Semantic's colour
   class and is still on the element, hence the specificity here. */
.zm-ajax .button-container { margin-top: 26px; }

.zm-ajax .button-container button[type="submit"],
.zm-ajax button.login_button,
.zm-ajax button.register_button,
.zm-ajax .ui.button.green,
.zm-ajax .forgot_form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--npf-primary) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t), transform var(--npf-t);
}

.zm-ajax .button-container button[type="submit"]:hover,
.zm-ajax button.login_button:hover,
.zm-ajax button.register_button:hover,
.zm-ajax .ui.button.green:hover {
  background: var(--npf-primary-dark) !important;
  transform: translateY(-2px);
}

.zm-ajax button[disabled],
.zm-ajax button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Login button spinner ----------

   npf-skin.js injects this spinner into any .login_form submit button, and it
   is loaded site-wide — so it fires in this modal, which opens over whatever
   page the visitor happens to be on. The rules that size and hide it lived
   only in npf-auth.css, which is enqueued on the /account screens and nowhere
   else. In here the spinner therefore had no size and, worse, no `display:
   none`, so it rendered full-height and stayed on screen after the request
   finished — still spinning next to "Wrong Password".

   Kept here rather than moved out of npf-auth.css: both stylesheets need them
   and the two are never loaded together. This file ships with the script, so
   wherever the spinner can be injected, its styling is present.

   Matched on the class rather than on #npfLoginBtn, because the modal renders
   the theme plugin's own login form, whose button carries no id. */

.npf-btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  animation: npf-spin 0.75s linear infinite;
}

@keyframes npf-spin {
  from { stroke-dashoffset: 40; transform: rotate(0deg);   transform-origin: 12px 12px; }
  to   { stroke-dashoffset: 0;  transform: rotate(360deg); transform-origin: 12px 12px; }
}

button.is-loading,
.login_button.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

button.is-loading .npf-btn-spinner,
.login_button.is-loading .npf-btn-spinner {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .npf-btn-spinner { animation-duration: 2.4s; }
}

/* ---------- Remember / forgot row ----------
   The plugin emits these as a floated checkbox and a floated span. Floats in a
   468px dialog put "Forgot Password" on its own line as often as not, so the
   pair is laid out as one flex row instead — presentation only, both elements
   and their handles are untouched. */
.zm-ajax .form-wrapper > .ui.checkbox.left,
.zm-ajax .form-wrapper > span.meta.right {
  float: none;
  margin: 0;
}

.zm-ajax .form-wrapper > .ui.checkbox.left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  margin-top: 18px;
  font-size: 15px;
  color: var(--npf-ink);
}

/* Semantic hides the real box and draws its own with ::before/::after. Inside
   this dialog the drawn box is the only thing the theme styles, so the native
   control is restored and given the design's accent instead. */
.zm-ajax .form-wrapper > .ui.checkbox.left input[type="checkbox"] {
  position: static;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--npf-primary);
  cursor: pointer;
}

.zm-ajax .form-wrapper > .ui.checkbox.left::before,
.zm-ajax .form-wrapper > .ui.checkbox.left::after,
.zm-ajax .form-wrapper > .ui.checkbox.left label::before,
.zm-ajax .form-wrapper > .ui.checkbox.left label::after {
  content: none;
}

.zm-ajax .form-wrapper > .ui.checkbox.left label {
  position: static;
  padding: 0;
  margin: 0;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: var(--npf-ink);
  cursor: pointer;
}

.zm-ajax .form-wrapper > span.meta.right {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  float: right;
  font-size: 15px;
}

/* Every text link in the dialog: the two modal handles, and the register
   switcher at the foot — which NPF_Auth repoints at /account?action=register
   and strips the handle class off, so it has to be reachable by position too. */
.zm-ajax a.forgot-password-handle,
.zm-ajax a.not-a-member-handle,
.zm-ajax a.already-a-member-handle,
.zm-ajax a.npf-register-link,
.zm-ajax .form-wrapper > .field:last-child a {
  color: var(--npf-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--npf-t);
}

.zm-ajax a.forgot-password-handle:hover,
.zm-ajax a.not-a-member-handle:hover,
.zm-ajax a.already-a-member-handle:hover,
.zm-ajax a.npf-register-link:hover,
.zm-ajax .form-wrapper > .field:last-child a:hover {
  color: var(--npf-primary-dark);
  text-decoration: underline;
}

/* ---------- "or" divider ---------- */

/* Copied from .npf-auth__divider: a rule behind the row with the word knocked
   out of it by an opaque background matching the card. */
.zm-ajax .divider {
  position: relative;
  clear: both;
  margin: 26px 0 20px;
  border: 0;
  text-align: center;
  font-size: 15px;
  color: var(--npf-muted);
}

.zm-ajax .divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--npf-g100);
}

.zm-ajax .divider span {
  position: relative;
  background: #fff;
  padding: 0 14px;
}

/* ---------- Switcher link at the foot ---------- */

.zm-ajax .form-wrapper > .field:last-child {
  margin: 0;
  text-align: center;
  font-size: 15px;
}

/* ---------- AJAX status messages ---------- */

/* The handler prints validation and login errors in here. Empty on first
   render, so it must not reserve space until it has something to say. */
.zm-ajax .ajax-login-register-msg-target:empty { display: none; }

.zm-ajax .ajax-login-register-msg-target > * {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
}

.zm-ajax .ajax-login-register-msg-target .error-container,
.zm-ajax .ajax-login-register-msg-target .error {
  background: #fdecec;
  border: 1px solid #f5c2c2;
  color: #a32222;
}

.zm-ajax .ajax-login-register-msg-target .success,
.zm-ajax .ajax-login-register-msg-target .noon {
  background: #eaf6ee;
  border: 1px solid #bfe3cb;
  color: #1f6b3a;
}

/* Semantic's loading state dims the wrapper while the form posts. */
.zm-ajax .login-input-wrappers.loading { opacity: 0.55; pointer-events: none; }

/* ---------- Small screens ---------- */

@media (max-width: 520px) {
  .ui.modal.zm-ajax {
    max-width: calc(100vw - 32px) !important;
    border-radius: 18px;
  }

  .ui.modal.zm-ajax > .content-login-form,
  .ui.modal.zm-ajax > .content-register-form,
  .ui.modal.zm-ajax > .content-forgot-form {
    padding: 38px 22px 30px;
  }

  .zm-ajax .header.modal-login,
  .zm-ajax .ajax-login-register-login-container > .header {
    font-size: 25px;
    line-height: 32px;
  }

  /* At this width the two halves of the row no longer fit side by side. */
  .zm-ajax .form-wrapper > span.meta.right {
    display: block;
    float: none;
    margin-top: 12px;
  }
}