/* =========================================================================
   NOVAPAY — AUTH PAGES (sign in / sign up / reset password)
   Layers on top of novapay-theme.css. Redeclares the core tokens so this
   file still works even if novapay-theme.css isn't loaded on a given page.
   ========================================================================= */

:root{
  --nv-midnight: #0A0E27;
  --nv-indigo: #141B3C;
  --nv-indigo-2: #1B2350;
  --nv-gold: #F5B93D;
  --nv-gold-2: #FFD57A;
  --nv-emerald: #16DBAA;
  --nv-violet: #8B5CF6;
  --nv-coral: #FF6B7A;
  --nv-sky: #38BDF8;
  --nv-cloud: #F7F8FC;
  --nv-ink: #101433;
  --nv-muted: #8C93B8;
  --nv-font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --nv-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body{ font-family: var(--nv-font-body); }

/* ---------------------------------------------------------------------
   Ambient backdrop
--------------------------------------------------------------------- */
.nv-auth-bg{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(245,185,61,.16), transparent 60%),
    radial-gradient(900px 700px at 88% 92%, rgba(22,219,170,.14), transparent 60%),
    linear-gradient(160deg, var(--nv-midnight) 0%, #171045 55%, #241B5E 100%) !important;
}

.nv-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  pointer-events: none;
  animation: nvFloat 14s ease-in-out infinite;
}
.nv-orb-a{
  width: 340px; height: 340px;
  top: -80px; left: -90px;
  background: radial-gradient(circle at 35% 35%, rgba(245,185,61,.55), transparent 70%);
  animation-duration: 16s;
}
.nv-orb-b{
  width: 420px; height: 420px;
  bottom: -140px; right: -120px;
  background: radial-gradient(circle at 40% 40%, rgba(139,92,246,.5), transparent 70%);
  animation-duration: 20s;
  animation-delay: -4s;
}
.nv-orb-c{
  width: 220px; height: 220px;
  top: 40%; right: 6%;
  background: radial-gradient(circle at 40% 40%, rgba(22,219,170,.45), transparent 70%);
  animation-duration: 12s;
  animation-delay: -7s;
}
@keyframes nvFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-22px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .nv-orb{ animation: none; }
}

/* ---------------------------------------------------------------------
   Brand lockup above the card
--------------------------------------------------------------------- */
.nv-auth-brand{ position: relative; z-index: 1; }
.novapay-logo--auth .novapay-logo__mark{
  width: 46px; height: 46px;
  box-shadow: 0 10px 26px -6px rgba(245,185,61,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.novapay-logo--auth .novapay-logo__text{ font-size: 1.7rem; }
.nv-auth-tagline{
  margin: .6rem 0 0;
  font-size: .85rem;
  letter-spacing: .04em;
  color: rgba(231,233,251,.75);
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   The card itself — frosted glass with a gradient bevel
--------------------------------------------------------------------- */
.nv-auth-card{
  position: relative;
  z-index: 1;
  border: none !important;
  border-radius: 22px;
  overflow: hidden;
  /* was rgba(16,20,51,.55) — a touch more opaque so inputs read cleanly on top */
  background: rgba(12,15,40,.78);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 40px 80px -30px rgba(5,7,20,.65),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nv-auth-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(245,185,61,.75), rgba(139,92,246,.55), rgba(22,219,170,.55));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.nv-auth-card .card-body{ position: relative; }

.nv-auth-title{
  font-family: var(--nv-font-display);
  color: black;
  font-weight: 700;
  letter-spacing: -.01em;
}
.nv-auth-subtitle{
  color: rgba(198,203,232,.85) !important;
}

/* labels + helper text on the dark glass */
.nv-auth-card .form-label{ color: #E7E9FB; font-weight: 600; font-size: .85rem; }
.nv-auth-card .form-check-label{ color: rgba(198,203,232,.85) !important; }
.nv-auth-card p.text-muted{ color: rgba(198,203,232,.85) !important; }

.nv-auth-link{
  color: var(--nv-gold-2) !important;
  text-decoration: none;
}
.nv-auth-link:hover{ color: #fff !important; text-decoration: underline; }

/* ---------------------------------------------------------------------
   Inputs
   FIX: the old background (rgba(255,255,255,.06)) was almost invisible
   against the gradient backdrop, and typed text blended in. Now using a
   darker, more opaque fill so the box reads clearly and the white text
   pops against it.
--------------------------------------------------------------------- */
.nv-input{
  background: rgba(6,9,28,.55) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
  font-weight: 500;
  height: 48px;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nv-input::placeholder{ color: rgba(198,203,232,.7); }
.nv-input:focus{
  background: rgba(6,9,28,.7) !important;
  border-color: var(--nv-gold) !important;
  box-shadow: 0 0 0 .2rem rgba(245,185,61,.2) !important;
  color: #fff !important;
}

/* FIX: browser autofill (saved usernames/passwords) forces its own white
   background with dark text by default, which is invisible on this dark
   theme. This overrides it so autofilled fields stay dark with white text. */
.nv-input:-webkit-autofill,
.nv-input:-webkit-autofill:hover,
.nv-input:-webkit-autofill:focus,
.nv-input:-webkit-autofill:active{
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(18,22,55,.95) inset !important;
  box-shadow: 0 0 0px 1000px rgba(18,22,55,.95) inset !important;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

.input-group .nv-input{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.nv-input-addon{
  background: rgba(6,9,28,.55) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-left: none !important;
  color: rgba(198,203,232,.9) !important;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.nv-input-addon:hover{ color: var(--nv-gold) !important; }

.form-check-input{
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.form-check-input:checked{
  background-color: var(--nv-gold);
  border-color: var(--nv-gold);
}

/* ---------------------------------------------------------------------
   Submit button
--------------------------------------------------------------------- */
.nv-auth-submit{
  background: linear-gradient(135deg, var(--nv-gold), var(--nv-gold-2)) !important;
  border: none !important;
  color: #241B00 !important;
  font-weight: 700;
  letter-spacing: .01em;
  height: 50px;
  border-radius: 12px;
  box-shadow: 0 16px 30px -12px rgba(245,185,61,.55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nv-auth-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 20px 34px -12px rgba(245,185,61,.65);
}
.nv-auth-submit:active{ transform: translateY(0); }
.nv-auth-submit:disabled{ opacity: .75; }

/* ---------------------------------------------------------------------
   Divider + social row
--------------------------------------------------------------------- */
.nv-auth-barrier{
  position: relative;
  color: rgba(198,203,232,.6);
  font-size: .8rem;
}
.nv-auth-barrier::before,
.nv-auth-barrier::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  border-top: 1px solid rgba(255,255,255,.14);
}
.nv-auth-barrier::before{ left: 0; }
.nv-auth-barrier::after{ right: 0; }
.nv-auth-barrier span{
  position: relative;
  background: transparent;
  padding: 0 .5rem;
}

.nv-social-btn{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #E7E9FB !important;
  border-radius: 12px;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.nv-social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14) !important;
  color: var(--nv-gold-2) !important;
}

/* small screens: tighten the card padding a touch */
@media (max-width: 420px){
  .nv-auth-card .card-body{ padding: 2.25rem 1.5rem !important; }
}