/* ==========================================================================
   NIO THEME — login / forgot-password / reset-password screens.
   These views load their own asset stack from backend/usertemplate/ and
   never see application/views/layout/theme.php, so they get their own
   stylesheet, linked directly from the 4 login views (Step 5).

   Existing markup (unchanged) is a two-column row:
     .bgoffsetbg > .nopadding (col-lg-4, the form)
                 > .nopadding-2 (col-lg-8, brand/background image)
   Spec wants the brand/gradient panel on the LEFT and the form on the
   RIGHT at desktop widths, panel hidden under 991px. Done here purely
   with flexbox `order` — no HTML changes required.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-var-latin.woff2') format('woff2-variations'),
      url('fonts/inter-var-latin.woff2') format('woff2');
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Noto Sans Devanagari', 'Noto Sans', Arial, sans-serif;
  background:#F7F6FC;
}

.top-content{ min-height:100vh; padding:0; background:#F7F6FC; }
.top-content .inner-bg{ padding:0; background:transparent; }

.bgoffsetbg{
  display:flex;
  flex-wrap:wrap;
  min-height:100vh;
  margin:0;
}

/* form panel */
.bgoffsetbg > .nopadding{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  order:2;
}
.loginbg{
  width:100%;
  max-width:360px;
  padding:32px 8px;
}
.form-top-left img{ max-height:56px; }
.form-bottom h3{
  color:#191433;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:18px;
}
.form-bottom .form-control{
  height:44px;
  border:1px solid #E9E7F3;
  border-radius:10px;
  font-size:14px;
}
.form-bottom .form-control:focus{
  border-color:#6D28D9;
  box-shadow:0 0 0 3px rgba(109,40,217,.18);
  outline:none;
}
.form-bottom .btn{
  width:100%;
  height:46px;
  border-radius:10px;
  background:linear-gradient(140deg,#6D28D9,#2563EB);
  border:none;
  color:#fff;
  font-weight:650;
  margin-top:6px;
}
.form-bottom .forgot{ color:#6D28D9; font-weight:600; }

/* brand / gradient panel */
.bgoffsetbg > .nopadding-2{
  order:1;
  position:relative;
  overflow:hidden;
}
.bgoffsetbg > .nopadding-2::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg, rgba(109,40,217,.88), rgba(37,99,235,.88));
  z-index:0;
}
.bgoffsetbg > .nopadding-2 > *{ position:relative; z-index:1; }
.bgoffsetbg > .nopadding-2 h3.h3{ color:#fff; font-weight:680; }
.bgoffsetbg > .nopadding-2 .messages{ color:#F1EFFA; }
.bgoffsetbg > .nopadding-2 .messages h4{ color:#fff; }

@media (max-width:991px){
  .bgoffsetbg > .nopadding-2{ display:none; }
  .bgoffsetbg > .nopadding{ order:1; flex:0 0 100%; max-width:100%; }
}