/* ==========================================================
   MgtsPayments — sign in, sign up, password reset, OTP
   ========================================================== */
:root {
  --au-primary: #2966cb;
  --au-primary-600: #1f55b0;
  --au-primary-50: #eef4ff;
  --au-ink: #0f172a;
  --au-body: #334155;
  --au-muted: #64748b;
  --au-line: #e5eaf2;
  --au-bg: #f4f6fb;
  --au-navy: #0b1426;
  --au-green: #16a34a;
  --au-red: #dc2626;
  --au-ease: cubic-bezier(.22, 1, .36, 1);
  --au-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
[x-cloak] { display: none !important; }

body.auth-body { margin: 0; background: #fff; color: var(--au-body); -webkit-font-smoothing: antialiased; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 1200px) { .auth-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Brand panel ---------- */
.auth-brand {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 36px 44px;
  color: #cbd5e1;
  background: radial-gradient(900px 500px at 90% -10%, #1c3b78 0%, transparent 60%), linear-gradient(180deg, var(--au-navy), #12213f);
}
.auth-brand__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); }
.auth-brand__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: au-drift 16s ease-in-out infinite alternate; }
.auth-brand__glow--1 { width: 380px; height: 380px; background: #2966cb; opacity: .45; top: -120px; left: -100px; }
.auth-brand__glow--2 { width: 320px; height: 320px; background: #7c3aed; opacity: .25; bottom: -120px; right: -60px; animation-delay: -8s; }
@keyframes au-drift { to { transform: translate(40px, 30px) scale(1.08); } }

.auth-brand > :not(.auth-brand__grid):not(.auth-brand__glow) { position: relative; }
.auth-brand__logo img { height: 34px; }
.auth-brand__content { margin-top: auto; max-width: 480px; animation: au-rise .8s var(--au-ease) backwards .1s; }
.auth-brand__pill { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: #dbe6ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; }
.auth-brand__pill span { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: au-pulse 2s infinite; }
@keyframes au-pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.auth-brand__title { color: #fff; font-weight: 800; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; margin: 18px 0 20px; }
.auth-brand__title span { background: linear-gradient(90deg, #8fb4ff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.auth-brand__points li { display: flex; align-items: center; gap: 12px; font-size: .95rem; }
.auth-brand__points i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(143,180,255,.14); color: #8fb4ff; flex: 0 0 auto; }

.auth-brand__cards { position: relative; height: 140px; margin: 36px 0 32px; }
.auth-float { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--au-ink); border-radius: 16px; padding: 10px 14px; box-shadow: 0 24px 50px rgba(0,0,0,.35); font-size: .82rem; line-height: 1.2; animation: au-bob 6s ease-in-out infinite; }
.auth-float strong { display: block; font-size: .86rem; }
.auth-float small { color: var(--au-muted); }
.auth-float__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--au-primary-50); color: var(--au-primary); }
.auth-float__icon--green { background: #dcfce7; color: var(--au-green); }
.auth-float--a { left: 0; top: 10px; }
.auth-float--b { left: 170px; top: 80px; animation-delay: -3s; }
@keyframes au-bob { 50% { transform: translateY(-8px); } }

.auth-brand__foot { font-size: .8rem; color: #64748b; }
.auth-brand__foot a { color: #94a3b8; text-decoration: none; }
.auth-brand__foot a:hover { color: #fff; }

/* ---------- Form panel ---------- */
.auth-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 28px 24px 24px; background: radial-gradient(700px 300px at 100% 0%, #eef4ff, transparent 70%), #fff; }
.auth-top { width: 100%; max-width: 440px; display: flex; justify-content: space-between; align-items: center; }
.auth-top__logo { visibility: hidden; }
.auth-top__logo img { height: 30px; }
.auth-top__home { font-size: .85rem; font-weight: 600; color: var(--au-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; transition: background-color .2s, color .2s; }
.auth-top__home:hover { background: var(--au-bg); color: var(--au-ink); }

.auth-card { width: 100%; max-width: 440px; margin: auto 0; padding: 24px 0; animation: au-rise .6s var(--au-ease) backwards; }
@keyframes au-rise { from { opacity: 0; transform: translateY(16px); } }
.auth-secure { font-size: .78rem; color: var(--au-muted); margin: 8px 0 0; }
.auth-secure i { color: var(--au-green); }

@media (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-top__logo { visibility: visible; }
  .auth-main { padding: 18px 18px 20px; background: radial-gradient(600px 260px at 50% -40px, #dce8fd, transparent 70%), #fff; }
  .auth-card { margin: 18px 0 auto; }
}

/* ---------- Headings ---------- */
.auth-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; color: var(--au-primary); background: var(--au-primary-50); margin-bottom: 18px; animation: au-pop .6s var(--au-spring) backwards .1s; }
.auth-icon--green { color: var(--au-green); background: #ecfdf3; }
.auth-icon--amber { color: #d97706; background: #fff7e6; }
@keyframes au-pop { from { transform: scale(.6); opacity: 0; } }
.auth-title { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; color: var(--au-ink); letter-spacing: -.02em; margin: 0 0 6px; }
.auth-sub { color: var(--au-muted); margin: 0 0 26px; line-height: 1.55; }
.auth-sub strong { color: var(--au-ink); }

.auth-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #166534; background: #ecfdf3; border: 1px solid #bbf7d0; padding: 7px 12px; border-radius: 12px; margin-bottom: 18px; }

/* ---------- Fields ---------- */
.auth-form { display: grid; gap: 16px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 400px) { .auth-row { grid-template-columns: 1fr; } }

.auth-label { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; font-weight: 600; color: var(--au-ink); margin-bottom: 7px; }
.auth-label a { font-weight: 600; }

.auth-input { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1.5px solid var(--au-line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.auth-input:hover { border-color: #cfd8e6; }
.auth-input:focus-within { border-color: var(--au-primary); box-shadow: 0 0 0 4px var(--au-primary-50); }
.auth-input > i { color: #94a3b8; font-size: 1.05rem; transition: color .2s; }
.auth-input:focus-within > i { color: var(--au-primary); }
.auth-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: .97rem; color: var(--au-ink); }
.auth-input input::placeholder { color: #a3adbd; }
.auth-input.is-invalid { border-color: #fca5a5; background: #fffafa; }
.auth-input.is-invalid:focus-within { box-shadow: 0 0 0 4px #fee2e2; border-color: var(--au-red); }
.auth-input.is-valid { border-color: #86efac; }

.auth-toggle { border: 0; background: transparent; color: #94a3b8; padding: 6px; margin-right: -6px; border-radius: 8px; line-height: 1; }
.auth-toggle:hover { color: var(--au-ink); background: var(--au-bg); }

.auth-error { display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; font-weight: 500; color: var(--au-red); margin-top: 6px; animation: au-shake .35s ease; }
.auth-hint { font-size: .78rem; color: var(--au-muted); margin-top: 6px; }
.auth-capslock { font-size: .78rem; color: #b45309; margin-top: 6px; }
@keyframes au-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 4px; margin-top: 8px; }
.auth-meter span { height: 5px; border-radius: 5px; background: var(--au-line); transition: background-color .3s; }
.auth-meter small { margin-left: 6px; font-size: .74rem; font-weight: 600; color: var(--au-muted); min-width: 44px; text-align: right; }
.auth-meter .s1 { background: #ef4444; } .auth-meter .s2 { background: #f59e0b; } .auth-meter .s3 { background: #3b82f6; } .auth-meter .s4 { background: #16a34a; }

/* ---------- Buttons & links ---------- */
.auth-btn { position: relative; width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--au-primary); color: #fff; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(41,102,203,.28); transition: background-color .2s, transform .15s var(--au-ease), box-shadow .2s; overflow: hidden; }
.auth-btn:hover { background: var(--au-primary-600); box-shadow: 0 14px 30px rgba(41,102,203,.36); }
.auth-btn:active:not(:disabled) { transform: scale(.98); }
.auth-btn:disabled { opacity: .75; cursor: progress; }
.auth-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-100%); }
.auth-btn:hover::after { animation: au-sheen 1s ease; }
@keyframes au-sheen { to { transform: translateX(100%); } }

.auth-link { color: var(--au-primary); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--au-primary-600); text-decoration: underline; text-underline-offset: 3px; }
.auth-alt { text-align: center; color: var(--au-muted); font-size: .92rem; margin: 22px 0 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: .78rem; margin: 6px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.auth-terms { font-size: .78rem; color: var(--au-muted); text-align: center; margin: 0; line-height: 1.5; }

/* ---------- OTP ---------- */
.auth-otp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.auth-otp input { width: 100%; aspect-ratio: 1 / 1.05; max-height: 76px; border: 1.5px solid var(--au-line); border-radius: 16px; text-align: center; font-size: 1.8rem; font-weight: 800; color: var(--au-ink); background: var(--au-bg); outline: 0; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--au-spring); caret-color: var(--au-primary); }
.auth-otp input:focus { border-color: var(--au-primary); background: #fff; box-shadow: 0 0 0 4px var(--au-primary-50); transform: translateY(-2px); }
.auth-otp input.is-filled { background: #fff; border-color: #b8cdf2; }
.auth-otp.is-shaking { animation: au-shake .4s ease; }
.auth-otp.is-shaking input { border-color: #fca5a5; }
.auth-resend { text-align: center; font-size: .9rem; color: var(--au-muted); }
.auth-resend button { border: 0; background: none; padding: 0; color: var(--au-primary); font-weight: 700; }
.auth-resend button:disabled { color: var(--au-muted); font-weight: 600; cursor: default; }

.g-recaptcha { display: flex; justify-content: center; transform-origin: center; }
@media (max-width: 360px) { .g-recaptcha { transform: scale(.9); } }