/* ============================================================
   NPF Core — auth screens (/account)
   Ported from nonprofit/login.html + signup.html.
   Every rule is scoped under .npf-auth. Design class names are
   namespaced npf-* so they cannot collide with the theme's
   Semantic UI (.container, .btn, .field, .checkbox all exist there).
   ============================================================ */

.npf-auth {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  --npf-ink: #020b18;
  --npf-ink-warm: #282828;
  --npf-muted: #677489;
  --npf-auth-bed: #f9fbff;
  --npf-g100: #e4e7e9;
  --npf-g300: #d5d7da;
  --npf-g500: #77878f;
  --npf-dark-card: #133660;
  --npf-shadow-panel: 0 4px 33.7px rgba(0, 0, 0, 0.01);
  --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;
  --npf-font-headline: "Roboto", "Inter", system-ui, sans-serif;

  /* Icons carried as artwork rather than as icon-font codepoints, so they
     cannot go missing when a page does not happen to load that font. */
  --npf-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.7 3.3 12 10.6 19.3 3.3 20.7 4.7 13.4 12 20.7 19.3 19.3 20.7 12 13.4 4.7 20.7 3.3 19.3 10.6 12 3.3 4.7Z'/%3E%3C/svg%3E");
  --npf-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5c0-3-3.6-5.5-8-5.5Z'/%3E%3C/svg%3E");

  /* .auth — background: var(--auth-bed); padding-block: 100px; display: flex */
  background: var(--npf-auth-bed);
  padding-block: 100px;
  padding-top: 60px;
  display: flex;
  font-family: var(--npf-font-body);

  /* Full-bleed: the theme renders page content inside .wpj-page-content.main,
     which is capped at the site width. The design's section background runs
     edge to edge, so break out of that container. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* .container — width:100%; max-width:1248px; margin-inline:auto; padding-inline:24px */
.npf-auth__container {
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* .auth-panel */
.npf-auth__panel,
.npf-auth .npf-reg__step {
  background: #fff;
  border-radius: 24px;
  padding: 56px clamp(24px, 5vw, 70px) 64px;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  box-sizing: border-box;
  box-shadow: var(--npf-shadow-panel);
}

/* .auth-panel--wide — height is fixed at 695px in the design; that fixed
   height is what creates the 60px of free space the centring distributes. */
.npf-auth .npf-reg__step--wide {
  max-width: 914px;
  height: 695px;
  padding: 10px;
}

/* The wizard shows one step at a time; .iscu_active is the visible one.
   Flex column so .auth-panel--wide's justify-content: center can do its job. */
.npf-auth .npf-reg__step { display: none; }

.npf-auth .npf-reg__step.iscu_active {
  display: flex;
  flex-direction: column;
}

.npf-auth .npf-reg__step--wide.iscu_active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.npf-auth .npf-reg__step--wide .npf-auth__title,
.npf-auth .npf-reg__step--wide .npf-auth__sub { 
  /* width: 664px;  */
  max-width: 100%; }

/* The plugin's own wrapper is a 500px white card with 30px padding. Inside our
   panel that produces a box-in-a-box and squeezes the layout, so neutralise it
   here only — the plugin's stylesheet is untouched. */
.npf-auth .iscu_registration_form_in_page,
.npf-auth .iscu_modal {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* .auth-title — Inter 600, 56/64, -2px, capitalize, max-width 18ch */
.npf-auth__title {
  text-align: center;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 45px;
  line-height: 51px;
  letter-spacing: -2px;
  text-transform: capitalize;
  color: var(--npf-ink);
  margin: 0 auto;
  max-width: 18ch;
}

/* .auth-sub — Inter 400, 16/26, --muted-slate, 13px above */
.npf-auth__sub {
  text-align: center;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-muted);
  margin: 13px auto 0;
}

.npf-auth__form { margin-top: 40px; }

.npf-auth__alt {
  margin: 24px 0 0;
  text-align: center;
  color: var(--npf-muted);
}
.npf-auth__alt a { color: var(--npf-primary); font-weight: 600; }
.npf-auth__alt a:hover { color: var(--npf-primary-dark); }

.npf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Fields (signup.html) ----------
   Reference geometry, measured from signup.html:
     .auth-form  display:grid; gap:22px; margin-top:40px
     .field      label 20px + 8px + input 44px = 72px tall, no padding
   iscu-public.css inflates that with `.iscu_form_row { padding: 5px }` and an
   18px margin-bottom on inputs, which is where the extra gap came from. */

.npf-auth .iscu_form_row {
  padding: 0;
  margin: 0;
}

/* !important: iscu-public.css targets `.iscu_form input` (0,2,1), which
   outranks a plain scoped class selector here. */
.npf-auth .npf-form-input,
.npf-auth .iscu_form input[type="text"],
.npf-auth .iscu_form input[type="email"],
.npf-auth .iscu_form input[type="tel"],
.npf-auth .iscu_form input[type="url"],
.npf-auth .iscu_form input[type="password"],
.npf-auth .iscu_form select {
  margin: 0 !important;
}

/* .field — no margin of its own; the 22px comes from the stack below. */
.npf-auth .npf-field { display: grid; margin: 0 0 22px; }

/* .auth-form margin-top: 40px — applies whether the fields sit inside the
   form element (nonprofit) or directly in the step (freelancer wizard). */
.npf-auth .npf-auth__sub + .npf-field,
.npf-auth .npf-auth__sub + .npf-auth__form { margin-top: 40px; }

.npf-auth .npf-form-label {
  display: block;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  margin-bottom: 8px;
}

/* The required marker sits BESIDE the label, not on top of it.

   iscu-public.css draws it as `.iscu_required_field::after { content: "*";
   margin-left: -5px }`. That negative margin was measured against the
   plugin's own label, which ends in a space; ours does not, so the asterisk
   was pulled back over the last letter — "Phone Number*" printed as the star
   sitting on the "r". 2px is the gap the design leaves, and the colour comes
   with it so the marker matches the rest of the form rather than being the
   one pure-red thing on the page.

   Two classes plus the pseudo-element outrank the plugin's single class, so
   this wins on specificity whichever order the two files load in. */
.npf-auth .iscu_required_field::after {
  margin-left: 2px;
  color: #d1344b;
}

.npf-auth .npf-form-row { display: grid; gap: 18px; }
.npf-auth .npf-form-row--2 { grid-template-columns: 1fr 1fr; }

/* The plugin's own `.half` rule caps these at ~48%, which shrank the inputs
   inside our grid column. The grid owns the columns here. */
.npf-auth .npf-form-row .iscu_form_row,
.npf-auth .npf-form-row .iscu_form_row.half {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}

/* !important on the radius only: iscu-public.css sets 12px on these inputs at
   equal specificity and loads after us. The design specifies 2px. */
.npf-auth .npf-form-input,
.npf-auth input[type="text"],
.npf-auth input[type="email"],
.npf-auth input[type="tel"],
.npf-auth input[type="url"],
.npf-auth input[type="password"],
.npf-auth select {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border: 1px solid var(--npf-g100);
  border-radius: 2px !important;
  padding: 11px 15px;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--npf-ink);
  background: #fff;
  box-shadow: none;
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

.npf-auth .npf-form-input::placeholder { color: var(--npf-g500); }

.npf-auth .npf-form-input:focus,
.npf-auth input:focus,
.npf-auth select:focus {
  outline: none;
  border-color: var(--npf-primary);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

/* Password reveal — the plugin toggles .iscu_hidden on these icons. */
.npf-auth .npf-password { position: relative; }

.npf-auth .npf-password__toggle {
  position: absolute;
  right: 12px;
  top: 34px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--npf-g500);
  cursor: pointer;
  transition: color var(--npf-t);
}
.npf-auth .npf-password__toggle:hover { color: var(--npf-primary); }
.npf-auth .npf-password__toggle svg { width: 20px; height: 20px; }
.npf-auth .iscu_hidden { display: none; }

.npf-auth .npf-strength {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--npf-g100);
  appearance: none;
}
.npf-auth .npf-strength::-webkit-progress-bar { background: var(--npf-g100); border-radius: 999px; }
.npf-auth .npf-strength::-webkit-progress-value { background: var(--npf-primary); border-radius: 999px; }

/* Password + Confirm side by side. A wrapper rather than column classes on the
   fields themselves, because .npf-password is what positions the eye toggle and
   the strength bar. The fields keep their own markup; only the box around them
   is new. One column again on phones, where two 44px inputs would not fit. */
.npf-auth .npf-password-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;

  /* Without this the two columns stretch to the height of the taller one —
     which is the left, because only it carries the strength bar — and each
     .npf-field being a grid itself, that extra height is handed to its rows.
     The result was a Confirm Password input taller than the Password input and
     sitting lower than it. Natural height, both anchored at the top. */
  align-items: start;
}
.npf-auth .npf-password-row > .npf-field { margin-bottom: 0; }

/* The reveal icon is placed from the top of .npf-password, which in the wizard
   wraps the label as well as the input: 20px label + 8px margin, then centred
   in the 44px input — 28 + (44 - 24) / 2. Scoped to .npf-reg because on the
   login screen .npf-password wraps the input alone and is offset differently. */
.npf-auth .npf-reg .npf-password__toggle { top: 38px; }

@media (max-width: 640px) {
  .npf-auth .npf-password-row { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Profile photo + description (registration) ---------- */

.npf-auth .npf-textarea {
  height: auto;
  min-height: 92px;
  padding: 10px 15px;
  line-height: 1.5;
  resize: vertical;
}

.npf-auth .npf-field-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--npf-muted);
}

/* The photo requirements. A list rather than a sentence: a freelancer scanning
   for "what size?" should find it without reading a paragraph. */
.npf-auth .npf-field-rules {
  padding-left: 18px;
  list-style: disc;
}
.npf-auth .npf-field-rules li { margin: 2px 0; }

.npf-auth .npf-field-status {
  margin: 6px 0 0;
  min-height: 18px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--npf-muted);
}
.npf-auth .npf-field-status.is-ok { color: #1a7f4b; }
.npf-auth .npf-field-status.is-bad { color: #d1344b; }

/* Validation messages, on every step of the wizard.
 *
 * iscu-public.css centres them (`.iscu_registration_form_in_page .iscu_error`),
 * which left each one floating in the middle of a left-aligned form, detached
 * from the field it is about. One rule covers all of the steps because both the
 * plugin's error helpers and ours insert this same element above whichever
 * button was pressed. Three classes, so it wins on specificity rather than on
 * which stylesheet happens to load last. */
.npf-auth .iscu_registration_form_in_page .iscu_error {
  text-align: left;
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.npf-auth .npf-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The placeholder is drawn with the same masked-SVG technique as the remove
   icon above: no image request, and nothing to 404 before a photo is chosen.
   The chosen photo is set as a background-image by the script, so the preview
   is always a filled circle whatever the source aspect ratio. */
.npf-auth .npf-avatar-preview {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--npf-primary-soft);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--npf-g100);
  position: relative;
}
.npf-auth .npf-avatar-preview::after {
  content: "";
  position: absolute;
  inset: 22px;
  background: var(--npf-primary);
  opacity: 0.45;
  -webkit-mask: var(--npf-icon-person) center / contain no-repeat;
  mask: var(--npf-icon-person) center / contain no-repeat;
}
.npf-auth .npf-avatar-preview.has-image::after { display: none; }

.npf-auth .npf-avatar-meta { min-width: 0; }

/* Two classes on .npf-btn rather than one, deliberately: the base button rule
   is further down this file, so at equal specificity it would win on order and
   this modifier would do nothing. */
.npf-auth .npf-btn.npf-btn--small {
  min-height: 0;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 6px;
  width: auto;
  justify-self: start;
}
.npf-auth .npf-btn.npf-btn--small:hover { transform: none; }

/* The file input is hidden with the existing .npf-sr-only above — present for
   assistive tech and for the click the button forwards to it, never the visible
   control. */

@media (max-width: 480px) {
  .npf-auth .npf-avatar-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Checkbox (signup.html) ---------- */

.npf-auth .npf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 22px 0;
  font-weight: 400;
}

.npf-auth .npf-checkbox input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--npf-primary);
}

/* Two separate fixes, both needed:
   - min-width: 0, because as a flex item the span defaults to min-width: auto
     and refuses to shrink below the Terms / Privacy sentence's intrinsic width;
   - white-space: normal, because iscu-public.css sets `nowrap` on
     .iscu_terms_policy, so even a correctly sized 287px box let the text spill
     to 514px and drag the document with it. */
.npf-auth .npf-checkbox,
.npf-auth .iscu_terms_policy,
.npf-auth .npf-checkbox__text {
  white-space: normal;
}

.npf-auth .npf-checkbox__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--npf-ink);
  overflow-wrap: break-word;
}
.npf-auth .npf-checkbox__text a {
  color: var(--npf-primary);
  text-decoration: underline;
  overflow-wrap: break-word;
}
.npf-auth .npf-checkbox__text a:hover { color: var(--npf-primary-dark); }

/* ---------- Buttons ---------- */

.ui.form .login-input-wrappers .button-container button[type="submit"],
.npf-auth .npf-btn,
.npf-auth button[type="submit"],
.npf-auth .ui.button,
.npf-auth .ui.primary.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 25px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.2;
  text-transform: none;
  text-shadow: none;
  color: #fff !important;
  /* background: var(--npf-primary) !important; */
  background: linear-gradient(to right, var(--npf-primary), var(--npf-primary)) !important;
  background-color: var(--npf-primary) !important;
  background-image: none !important;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t), transform var(--npf-t);
}

.npf-auth .npf-btn--block { width: 100%; }

.npf-auth .npf-btn:hover,
.npf-auth button[type="submit"]:hover,
.npf-auth .ui.button:hover {
  background: var(--npf-primary-dark) !important;
  transform: translateY(-2px);
}

.npf-auth .npf-btn:disabled,
.npf-auth button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

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

.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; }
}

#npfLoginBtn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

#npfLoginBtn.is-loading .npf-btn-spinner {
  display: inline-block;
}

.npf-auth .npf-btn--soft {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-ink) !important;
  min-height: 44px;
  font-size: 0.94rem;
}

.npf-auth .npf-back {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  background: none !important;
  border: 0;
  color: var(--npf-muted) !important;
  font-size: 0.94rem;
  min-height: 0;
  cursor: pointer;
  transition: color var(--npf-t);
}
.npf-auth .npf-back:hover { color: var(--npf-primary) !important; transform: none; }

/* ---------- Role / expertise cards (login.html) ---------- */

/* .role-grid — flex, centred, gap 26, width 710, margin-top 38 */
.npf-auth .npf-role-grid {
  display: flex;
  /* iscu-public.css sets flex-direction: column on .iscu_role_options; the
     design lays the two cards out in a row. */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 710px;
  max-width: 100%;
  margin: 38px auto 20px;
}

/* .role-card — 342x350, #fff, radius 20, padding 61/45/0, gap 39 */
.npf-auth .npf-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 342px;
  height: 350px;
  background: #fff !important;
  color: var(--npf-ink-warm) !important;
  border: 1px solid var(--line-soft, #e5e7eb) !important;
  border-radius: 20px;
  padding: 61px 45px 0;
  gap: 39px;
  cursor: pointer;
  transition: transform var(--npf-t), box-shadow var(--npf-t), background var(--npf-t);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.npf-auth .npf-role-card:hover {
  transform: translateY(-6px);
  background: #fff !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* .role-card--dark — #133660, padding-top 65, gap 30 */
.npf-auth .npf-role-card--dark {
  background: var(--npf-dark-card) !important;
  padding-top: 65px;
  gap: 30px;
  border: none !important;
  box-shadow: none;
}
.npf-auth .npf-role-card--dark:hover { 
  background: var(--npf-dark-card) !important; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.npf-auth .npf-role-card--dark .npf-role-card__title,
.npf-auth .npf-role-card--dark .npf-role-card__text { color: #fff; }

/* .role-card__icon — 90px tall, centred; img 67.5x60, tall variant 78x90 */
.npf-auth .npf-role-card__icon {
  flex: none;
  height: 90px;
  display: grid;
  place-items: center;
}
.npf-auth .npf-role-card__icon img {
  display: block;
  width: 67.5px;
  height: 60px;
  max-width: none;
}
.npf-auth .npf-role-card__icon--tall img { width: 78px; height: 90px; }

/* .role-card__body — column, gap 12, width 252 */
.npf-auth .npf-role-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 252px;
  max-width: 100%;
}

/* .role-card__title — Roboto 500, 28/36, --ink-warm */
.npf-auth .npf-role-card__title {
  font-family: var(--npf-font-headline) !important;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--npf-ink-warm);
  margin: 0;
  transition: color var(--npf-t);
}

/* .role-card__text — Inter 400, 16/26, --ink-warm */
.npf-auth .npf-role-card__text {
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink-warm);
  margin: 0;
  max-width: none;
  transition: color var(--npf-t);
}

/* Selected state — the plugin adds .iscu_active / .selected. */
.npf-auth .npf-role-card.iscu_active,
.npf-auth .npf-role-card.selected {
  outline: none;
  background: var(--npf-primary) !important;
  border-color: var(--npf-primary) !important;
  color: #fff !important;
}

.npf-auth .npf-role-card.iscu_active .npf-role-card__title,
.npf-auth .npf-role-card.selected .npf-role-card__title,
.npf-auth .npf-role-card.iscu_active .npf-role-card__text,
.npf-auth .npf-role-card.selected .npf-role-card__text,
.npf-auth .npf-role-card.iscu_active svg,
.npf-auth .npf-role-card.selected svg {
  color: #fff !important;
}

/* ---------- Wizard steps ---------- */

/* Step visibility lives in one place only — see the .npf-reg__step rules
   near the top. A second `display: block` here previously won on source
   order and silently disabled the panel's flex centring. */

.npf-auth .npf-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--npf-g100);
  margin: 24px 0 10px;
  overflow: hidden;
}
.npf-auth .npf-progress::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--npf-primary);
  transition: width var(--npf-t);
}
.npf-auth .npf-progress[data-step="1"]::before { width: 25%; }
.npf-auth .npf-progress[data-step="2"]::before { width: 50%; }
.npf-auth .npf-progress[data-step="3"]::before { width: 75%; }
.npf-auth .npf-progress[data-step="4"]::before { width: 100%; }

.npf-auth .npf-step-label {
  text-align: center;
  font-size: 0.9rem;
  color: var(--npf-muted);
  margin: 0;
}

/* ---------- Fundraising step ---------- */

.npf-auth .npf-range { width: 100%; accent-color: var(--npf-primary); margin-top: 24px; }

/* The funds-raised slider.
 *
 * iscu-public.css paints the track and thumb with the old
 * `linear-gradient(to right, #677ce7, #7450a8)`, which `accent-color` above
 * cannot reach — a styled ::-webkit-slider-runnable-track opts the control out
 * of accent-color entirely. Same shape, new palette.
 *
 * One rule per vendor pseudo-element on purpose: grouped into a selector list,
 * a browser that does not recognise one of them throws the whole rule away.
 */
.npf-auth #iscu_fund_slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--npf-primary), var(--npf-primary-dark));
}
.npf-auth #iscu_fund_slider::-moz-range-track {
  background: linear-gradient(to right, var(--npf-primary), var(--npf-primary-dark));
}
.npf-auth #iscu_fund_slider::-moz-range-progress {
  background: linear-gradient(to right, var(--npf-primary), var(--npf-primary-dark));
}
.npf-auth #iscu_fund_slider::-webkit-slider-thumb {
  background: var(--npf-primary-dark);
}
.npf-auth #iscu_fund_slider:active::-webkit-slider-thumb {
  background: var(--npf-primary-dark);
}
.npf-auth #iscu_fund_slider::-moz-range-thumb {
  background: var(--npf-primary-dark);
}
.npf-auth #iscu_fund_slider::-ms-thumb {
  background: var(--npf-primary-dark);
}

.npf-auth .npf-slider-value {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--npf-muted);
  margin: 8px 0 20px;
}

.npf-auth .npf-metric {
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  background: var(--npf-primary-soft);
  color: var(--npf-ink);
  margin-bottom: 24px;
}
.npf-auth .npf-metric__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--npf-primary-dark);
}

.npf-auth .npf-credentials {
  padding: 20px;
  border: 1px solid var(--npf-g100);
  border-radius: 16px;
  margin-bottom: 20px;
}
.npf-auth .npf-credentials h3 { margin: 0 0 6px; font-size: 1.05rem; }
.npf-auth .npf-credentials p { margin: 0; color: var(--npf-muted); font-size: 0.94rem; }

/* "Add Credential" and the per-row "Upload".
 *
 * Both are in the same iscu-public.css rule as the wizard's submit buttons,
 * the one with the old `linear-gradient(to right, #677ce7, #7450a8)`. The
 * submits already lose it to `.npf-auth .npf-btn` above; this button does not,
 * because iscu-public.css reaches it through an id
 * (`.iscu_certification_field #iscu_add_certification`) and an id outranks two
 * classes however many !importants are involved.
 *
 * Matched on the id *and* .npf-btn so this wins on specificity rather than on
 * which stylesheet happens to be enqueued last. */
.npf-auth #iscu_add_certification.npf-btn {
  background: var(--npf-primary) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
.npf-auth #iscu_add_certification.npf-btn:hover {
  background: var(--npf-primary-dark) !important;
}

.npf-auth .iscu_certification_field .iscu_upload_button {
  background: var(--npf-primary) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
.npf-auth .iscu_certification_field .iscu_upload_button:hover {
  background: var(--npf-primary-dark) !important;
}

/* Both of these inherit the wizard's primary-action size — 54px tall, 1.06rem,
   full width inside its cell. They are not primary actions: "Upload" sits in a
   table cell beside a text input, and "Add Credential" is a repeat control
   under it. Sized down to the secondary scale so the step's real submit is the
   only large button on the screen. */
.npf-auth #iscu_add_certification.npf-btn,
.npf-auth .iscu_certification_field .iscu_upload_button {
  min-height: 0;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 6px;
  width: auto !important; /* .ui.fluid.button on the upload button. */
}
.npf-auth #iscu_add_certification.npf-btn:hover,
.npf-auth .iscu_certification_field .iscu_upload_button:hover {
  transform: none;
}

.npf-auth .npf-repeater { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.npf-auth .npf-repeater th,
.npf-auth .npf-repeater td {
  padding: 10px;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--npf-g100);
}

/* The row's remove control.
 *
 * iscu-public.css draws its × with `content: "\f00d"` in "Font Awesome 6 Free".
 * The page loads Font Awesome 5, whose family name is "Font Awesome 5 Free", so
 * the glyph resolves to nothing and the button renders as an empty red box —
 * with `font-size: 0` on the button itself there is no text to fall back to.
 *
 * Redrawn as a masked SVG. It carries its own artwork, so it does not depend on
 * which icon font any page happens to load, and the mask inherits `background`
 * so the cross follows the button colour. Three classes plus the pseudo-element
 * outrank the plugin's two, whichever file loads last. */
.npf-auth .iscu_certification_field .iscu_remove_button {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #dc3545 !important;
  transform: none;
}
.npf-auth .iscu_certification_field .iscu_remove_button:hover {
  background: #b02a37 !important;
  transform: none;
}
.npf-auth .iscu_certification_field .iscu_remove_button::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: #fff;
  -webkit-mask: var(--npf-icon-close) center / contain no-repeat;
  mask: var(--npf-icon-close) center / contain no-repeat;
}

/* ---------- Strategic impact cards ---------- */

.npf-auth .npf-strategy-cards { display: grid; gap: 14px; margin: 24px 0; }

.npf-auth .npf-strategy-card:nth-child(n),
.npf-auth .iscu_select_expertise:nth-child(n) {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 16px;
  background: #fff !important;
  cursor: pointer;
  transition: border-color var(--npf-t), background var(--npf-t), box-shadow var(--npf-t);
  position: relative;
}

.npf-auth .npf-strategy-card:nth-child(n)::before,
.npf-auth .iscu_select_expertise:nth-child(n)::before {
  display: none !important;
}

.npf-auth .npf-strategy-card:nth-child(n) *,
.npf-auth .iscu_select_expertise:nth-child(n) * {
  color: inherit !important;
}
.npf-auth .npf-strategy-card:nth-child(n) strong,
.npf-auth .iscu_select_expertise:nth-child(n) strong {
  color: var(--npf-ink) !important;
}
.npf-auth .npf-strategy-card:nth-child(n) p,
.npf-auth .iscu_select_expertise:nth-child(n) p {
  color: var(--npf-muted) !important;
}

.npf-auth .npf-strategy-card:hover,
.npf-auth .iscu_select_expertise:hover {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 4px 12px rgba(79, 132, 195, 0.08) !important;
}

.npf-auth .npf-strategy-card:has(input:checked),
.npf-auth .npf-strategy-card.selected,
.npf-auth .iscu_select_expertise:has(input:checked),
.npf-auth .iscu_select_expertise.selected {
  border-color: var(--npf-primary) !important;
  background: var(--npf-primary-soft) !important;
  box-shadow: 0 0 0 1px var(--npf-primary) !important;
}

/* The expertise buttons carry both class names, so both selected-state blocks
   in this file claim them: the strategy-card rule just above fills the card
   with --npf-primary-soft, while the .npf-role-card rule higher up paints the
   text #fff. Same specificity, so the later background won and the chosen card
   went blank — pale blue on pale blue.

   The role-card look is the one that wins: it is what the step-1 "I'm a
   Nonprofit / I'm a Freelancer" cards already use, so the two selection states
   on this wizard match. Restated here, after both blocks, at a specificity
   neither can reach rather than left to source order. */
.npf-auth .iscu_select_expertise.npf-role-card.selected,
.npf-auth .iscu_select_expertise.npf-role-card:has(input:checked) {
  background: var(--npf-primary) !important;
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 1px var(--npf-primary) !important;
  color: #fff !important;
}

/* iscu-public.css paints every child of an odd card white
   (`.iscu_select_expertise:nth-child(odd) *`), so the children need saying
   too — inherit alone would be overridden on the first card. */
.npf-auth .iscu_select_expertise.npf-role-card.selected *,
.npf-auth .iscu_select_expertise.npf-role-card:has(input:checked) * {
  color: #fff !important;
}

.npf-auth .npf-strategy-card input[type="radio"],
.npf-auth .iscu_select_expertise input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--npf-primary);
}

.npf-auth .npf-strategy-card__body strong { display: block; margin-bottom: 4px; }
.npf-auth .npf-strategy-card__body p { margin: 0; font-size: 0.92rem; }

/* ---------- Login extras ---------- */

.npf-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 20px;
  border: 1px solid #fff;
}
.npf-auth__row .npf-checkbox { margin: 0; }
.npf-auth__row a { color: var(--npf-primary); }

.npf-auth__divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
  color: var(--npf-muted);
}
.npf-auth__divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--npf-g100);
}
.npf-auth__divider span { position: relative; background: #fff; padding: 0 14px; }

.npf-auth .ajax-login-register-msg-target:not(:empty) {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.94rem;
  background: var(--npf-primary-soft);
}

/* reCAPTCHA is never hidden — the handlers verify the token. */
.npf-auth .npf-captcha,
.npf-auth .iscu_nonprofit_captcha,
.npf-auth .iscu_freelancer_captcha { margin-bottom: 20px; justify-content: left; }

.npf-auth .recaptcha_extra_field,
.npf-auth .g-recaptcha-class,
.npf-auth .npf-captcha > div,
.npf-auth .iscu_nonprofit_captcha > div,
.npf-auth .iscu_freelancer_captcha > div {
    display: flex;
    justify-content: flex-start !important;
}

/* Google renders the widget at a fixed 304px, which is wider than the panel's
   287px content column on a 375px screen. Scale it to fit rather than let it
   force a horizontal scrollbar; the token itself is unaffected. */
@media (max-width: 400px) {
  .npf-auth .npf-captcha,
  .npf-auth .iscu_nonprofit_captcha,
  .npf-auth .iscu_freelancer_captcha,
  .npf-auth .recaptcha_extra_field {
    overflow: hidden;
  }

  .npf-auth .g-recaptcha-class,
  .npf-auth .npf-captcha > div,
  .npf-auth .iscu_nonprofit_captcha > div,
  .npf-auth .iscu_freelancer_captcha > div {
    transform: scale(0.92);
    transform-origin: 0 0;
  }
}

/* ---------- Responsive ---------- */

/* Design breakpoint: 860px */
@media (max-width: 860px) {
  .npf-auth { padding-block: 30px 60px; }

  .npf-auth__panel,
  .npf-auth .npf-reg__step { padding: 34px 20px 40px; border-radius: 22px; }

  .npf-auth .npf-reg__step--wide { height: auto; padding: 34px 20px 40px; }

  /* The design's clamp(1.9rem, 7vw, 2.6rem) resolves against a 16px root.
     This theme sets the root to 14px, which silently shrank the heading to
     27.3px instead of 30.4px, so the rem stops are expressed in px here. */
  .npf-auth__title { font-size: clamp(30.4px, 7vw, 41.6px); line-height: 1.14; letter-spacing: -1px; }

  .npf-auth .npf-reg__step--wide .npf-auth__title,
  .npf-auth .npf-reg__step--wide .npf-auth__sub { width: 100%; }

  .npf-auth .npf-role-grid { flex-direction: column; width: 100%; gap: 22px; margin-top: 32px; }
  .npf-auth .npf-role-card { width: 100%; height: auto; padding: 40px 26px; gap: 26px; }
  .npf-auth .npf-role-card--dark { padding-top: 40px; gap: 26px; }
  .npf-auth .npf-role-card__body { width: 100%; }
}

@media (max-width: 560px) {
  .npf-auth .npf-form-row--2 { grid-template-columns: 1fr; }
  .npf-auth__row { flex-direction: column; align-items: flex-start; }
}


.iscu_nonprofit_captcha, .iscu_freelancer_captcha{
    justify-content:left;
}