/* ─────────────────────────────────────────────────────────────────────
   NAIJAPAY AUTH  (login / signup / forgot-password)
   Split-screen brand panel + form. Stacks on mobile.
   Reuses tokens.css; pages don't load shell.css.
   ─────────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }
html, body { height:100%; margin:0; }
body{
  background:var(--np-bg);
  color:var(--np-text);
  font:14px/1.5 var(--np-font);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--np-green); text-decoration:none; }
a:hover{ text-decoration:underline; }

.np-auth{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}

/* ── BRAND PANEL (left) ────────────────────────────────────────────── */
.np-auth-brand{
  background:linear-gradient(135deg,#2CA653 0%,#1d723a 60%,#0f3a1c 100%);
  color:#fff;
  padding:48px 56px;
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
}
.np-auth-brand::before{
  content:''; position:absolute; right:-80px; top:-80px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,127,17,.40) 0%, transparent 70%);
}
.np-auth-brand::after{
  content:''; position:absolute; left:-60px; bottom:-60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
}
.np-auth-brand > *{ position:relative; z-index:1; }

.np-auth-logo{
  display:flex; align-items:center; gap:10px;
  margin-bottom:auto;
}
.np-auth-logo img{ height:48px; width:auto; }   /* logo image carries the wordmark */
.np-auth-logo span{ font-size:18px; font-weight:700; } /* unused now — kept in case admin re-enables a text label */

.np-auth-tag{
  font-size:30px; font-weight:600; line-height:1.2;
  margin:24px 0 12px; max-width:380px;
  letter-spacing:-.4px;
}
.np-auth-tag em{ color:var(--np-orange); font-style:normal; }
.np-auth-sub{
  font-size:14px; color:rgba(255,255,255,.78); max-width:360px; margin:0 0 28px;
}
.np-auth-features{
  list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:12px;
}
.np-auth-features li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:rgba(255,255,255,.92);
}
.np-auth-features li i{
  color:var(--np-orange);
  font-size:18px; line-height:1;
  margin-top:1px;
}

.np-auth-foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:rgba(255,255,255,.55);
}
.np-auth-foot a{ color:rgba(255,255,255,.78); }

/* ── FORM PANEL (right) ────────────────────────────────────────────── */
.np-auth-form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px;
  background:var(--np-surface);
}
.np-auth-form{
  width:100%; max-width:400px;
}
.np-auth-back{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--np-text-muted); font-size:13px;
  background:transparent; border:0; padding:6px 0; cursor:pointer;
  margin-bottom:18px;
}
.np-auth-back:hover{ color:var(--np-text); }
.np-auth-title{
  font-size:24px; font-weight:600; margin:0 0 6px;
  letter-spacing:-.3px;
}
.np-auth-lede{
  font-size:13.5px; color:var(--np-text-muted); margin:0 0 24px;
}

.np-field{ margin-bottom:14px; min-width:0; }    /* allow shrinking inside grids */
.np-field-label{
  display:block;
  font-size:12.5px; font-weight:500; color:var(--np-text-muted);
  margin-bottom:6px;
}

.np-field-control{
  display:flex; align-items:stretch;
  border:1px solid var(--np-border);
  border-radius:var(--np-radius);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
  background:var(--np-surface);
  min-width:0;        /* never grow wider than grid track — fixes confirm-password overflow */
}
.np-field-control:focus-within{
  border-color:var(--np-green);
  box-shadow:0 0 0 3px var(--np-green-50);
}
.np-field-control.is-invalid{
  border-color:var(--np-danger);
  box-shadow:0 0 0 3px rgba(239,68,68,.10);
}
.np-field-icon{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; min-width:42px;
  color:var(--np-text-muted);
  background:var(--np-surface-2);
  border-right:1px solid var(--np-border-soft);
  font-size:16px;
}
.np-field-input{
  flex:1; min-width:0;
  border:0; padding:11px 14px;
  font:14px var(--np-font); color:var(--np-text);
  background:transparent;
}
.np-field-input:focus{ outline:0; }
.np-field-toggle{
  border:0; background:transparent;
  padding:0 14px;
  color:var(--np-text-muted);
  cursor:pointer;
}
.np-field-toggle:hover{ color:var(--np-text); }

.np-field-error{
  font-size:11.5px; color:var(--np-danger);
  margin-top:6px; min-height:14px;
}
.just-validate-error-label{
  font-size:11.5px !important; color:var(--np-danger) !important;
  margin-top:4px !important;
}

.np-auth-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:4px 0 18px;
}
.np-auth-link{ font-size:12.5px; }

.np-auth-btn{
  width:100%;
  padding:13px 18px;
  background:var(--np-green);
  color:#fff;
  border:0; border-radius:var(--np-radius);
  font:600 14.5px var(--np-font);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--np-shadow-brand);
  transition:filter .15s, transform .05s;
}
.np-auth-btn:hover{ filter:brightness(.95); }
.np-auth-btn:active{ transform:translateY(1px); }
.np-auth-btn:disabled{ opacity:.7; cursor:not-allowed; }

.np-auth-divider{
  display:flex; align-items:center; gap:12px;
  margin:22px 0 18px;
  color:var(--np-text-soft); font-size:11.5px;
}
.np-auth-divider::before, .np-auth-divider::after{
  content:''; flex:1; height:1px; background:var(--np-border);
}

.np-auth-cross{
  text-align:center;
  font-size:13px; color:var(--np-text-muted);
  margin-top:6px;
}
.np-auth-cross a{ font-weight:600; }

/* spinner used by both pages' submit */
.np-auth-spin{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:npAuthSpin .7s linear infinite;
  display:inline-block;
}
@keyframes npAuthSpin{ to{ transform:rotate(360deg); } }

/* ── PIN ENTRY (pin.php / change-pin / reset-pin) ─────────────────── */
.np-auth .pin-inputs{
  display:flex; justify-content:center; gap:12px;
  margin:0 0 24px;
}
.np-auth .pin-inputs input{
  width:54px; height:64px;
  text-align:center;
  font:600 28px var(--np-font);
  background:var(--np-surface-2);
  border:1.5px solid var(--np-border);
  border-radius:14px;
  color:var(--np-green-700);
  caret-color:transparent;
  -webkit-text-security:disc;
  padding:0;
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
.np-auth .pin-inputs input:focus{
  outline:0;
  border-color:var(--np-green);
  box-shadow:0 0 0 3px var(--np-green-50);
}
.np-auth .pin-btns{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px;
  max-width:320px;
  margin:18px auto 0;
}
.np-auth .pin-btns button{
  position:relative;
  background:var(--np-surface);
  border:1px solid var(--np-border);
  border-radius:14px;
  padding:18px 0;
  font:600 22px var(--np-font);
  color:var(--np-text);
  cursor:pointer;
  overflow:hidden !important;       /* clip any inherited ripple effects */
  transition:background .12s ease;
}
.np-auth .pin-btns button:hover{
  background:var(--np-surface-2);   /* gentle background only — no border colour change */
}
.np-auth .pin-btns button:active{ background:var(--np-surface-3); }
.np-auth .pin-btns button i{
  font-size:22px;
  color:var(--np-text-muted);
  vertical-align:middle;
}
/* submit (last) key — brand green */
.np-auth .pin-btns button:nth-last-child(1){
  background:var(--np-green); color:#fff; border-color:var(--np-green);
}
.np-auth .pin-btns button:nth-last-child(1) i{ color:#fff; }
.np-auth .pin-btns button:nth-last-child(1):hover{
  background:var(--np-green-600);
}
/* delete key (3rd from last in DOM, before 0 and submit) — orange tint */
.np-auth .pin-btns button:nth-last-child(3) i{ color:var(--np-orange); }
/* suppress any rogue ripple spans appended by global event listeners */
.np-auth .pin-btns button > span{ display:none !important; }

/* freeze the keypad while a PIN submission is in flight (prevents
   duplicate POSTs from autosubmit + button + Enter all racing). */
.np-auth .pin-btns.is-busy{ pointer-events:none; opacity:.55; }

.np-pin-greet{ text-align:center; margin-bottom:24px; }
.np-pin-avatar{
  width:60px; height:60px; border-radius:50%;
  margin:0 auto 12px;
  border:2px solid var(--np-green-50);
  object-fit:cover;
  background:var(--np-surface-2);
}
.np-pin-name{ font-size:17px; font-weight:600; color:var(--np-text); margin:0 0 4px; }
.np-pin-hint{ font-size:13px; color:var(--np-text-muted); margin:0; }

/* fingerprint — large, inviting, with a soft breathing pulse */
.np-pin-finger-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  margin:24px 0 8px;
}
.np-pin-finger{
  display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg, var(--np-orange-50) 0%, var(--np-green-50) 100%);
  color:var(--np-orange);
  border:0; cursor:pointer;
  font-size:34px;
  position:relative;
  transition:transform .15s ease, box-shadow .2s ease;
}
.np-pin-finger::before{
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,127,17,.20) 0%, transparent 70%);
  animation:npFingerPulse 2.4s ease-in-out infinite;
  pointer-events:none; z-index:-1;
}
.np-pin-finger:hover{
  transform:scale(1.06);
  box-shadow:0 6px 20px rgba(255,127,17,.22);
}
.np-pin-finger:active{ transform:scale(.96); }
@keyframes npFingerPulse{
  0%,100%{ transform:scale(1); opacity:.45; }
  50%   { transform:scale(1.18); opacity:.85; }
}
.np-pin-finger-label{
  font:500 11.5px var(--np-font);
  color:var(--np-text-muted);
  letter-spacing:.04em;
}
.np-pin-signout{
  text-align:center;
  font-size:12.5px; color:var(--np-text-muted);
  margin-top:14px;
}
.np-pin-signout a{ color:var(--np-green-700); font-weight:600; }

/* compact toast for inline errors (replaces showMessage from msg.js) */
.np-toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--np-text);
  color:#fff;
  padding:12px 18px;
  border-radius:var(--np-radius);
  box-shadow:var(--np-shadow-lg);
  font:500 13px var(--np-font);
  display:inline-flex; align-items:center; gap:8px;
  opacity:0;
  transition:opacity .2s ease, transform .25s ease;
  z-index:1000;
  max-width:90vw;
}
.np-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.np-toast i{ font-size:16px; }
.np-toast.is-error  { background:var(--np-danger); }
.np-toast.is-success{ background:var(--np-green); }

/* signup-only: two columns inside form on wider screens.
   minmax(0,1fr) lets each column shrink below its content width, so the
   confirm-password field with its long placeholder + show-hide toggle no
   longer pushes the column out of view. */
@media (min-width:640px){
  .np-grid-2col{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .np-grid-2col .np-field{ margin-bottom:0; }
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* on mobile / tablet portrait, the brand panel adds noise — hide it
     and let the form occupy the full viewport with comfy padding. The
     browser tab title still carries the brand, so identity isn't lost. */
  .np-auth{ grid-template-columns:1fr; }
  .np-auth-brand{ display:none !important; }
  .np-auth-form-wrap{
    min-height:100vh;
    padding:32px 20px;
  }
  .np-auth-form{ max-width:520px; margin:0 auto; }
}
@media (max-width:480px){
  .np-auth-form-wrap{ padding:24px 16px; }
  .np-auth-title{ font-size:21px; }
}