/* =====================================================================
   HB Login (Shankar) - same look as the "Verify your login OTP" page:
   logo on top, light skyline header, pill badge, bold centred heading,
   uppercase labels, rounded inputs, full-width blue button.
   Visual only: form action, field names / ids, CSRF and error messages unchanged.
   Scoped to body.hb-login so no other page is affected.
   ===================================================================== */
body.hb-login {
  --lg-primary:#0056b2; --lg-primary-dark:#00468f; --lg-text:#1f2430; --lg-muted:#5b6475;
  --lg-line:#d5dae3; --lg-soft:#e6eff9; --lg-orange:#f58220;
  min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:#eef2f8; font-family:'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:var(--lg-text);
}
body.hb-login .form-wrapper {
  position:relative; width:100%; max-width:440px; margin:0 auto; padding:0 32px 28px; overflow:hidden;
  background:#fff; border:0; border-radius:20px; box-shadow:0 12px 40px rgba(16,24,40,.12); text-align:left;
}

/* header band with a faint city skyline + orange / blue corner accents (like the OTP page) */
body.hb-login .form-wrapper::before {
  content:''; position:absolute; left:0; right:0; top:0; height:150px; z-index:0; pointer-events:none;
  background:
    linear-gradient(160deg, var(--lg-orange) 0 9%, transparent 9.2%) no-repeat,
    linear-gradient(200deg, var(--lg-primary) 0 9%, transparent 9.2%) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 90' preserveAspectRatio='none'%3E%3Cg fill='%230056b2' fill-opacity='.08'%3E%3Crect x='10' y='40' width='26' height='50'/%3E%3Crect x='40' y='22' width='20' height='68'/%3E%3Crect x='64' y='50' width='30' height='40'/%3E%3Crect x='98' y='12' width='22' height='78'/%3E%3Crect x='124' y='44' width='28' height='46'/%3E%3Crect x='290' y='36' width='24' height='54'/%3E%3Crect x='318' y='10' width='20' height='80'/%3E%3Crect x='342' y='48' width='30' height='42'/%3E%3Crect x='376' y='26' width='22' height='64'/%3E%3Crect x='402' y='52' width='30' height='38'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 90px no-repeat,
    linear-gradient(180deg, #f4f8fd, #fff);
}
body.hb-login .form-wrapper > * { position:relative; z-index:1; }

/* logo */
body.hb-login #logo { margin:0 0 14px; padding:30px 0 0; text-align:center; }
body.hb-login #logo img.logo { display:inline-block; width:220px !important; max-width:80%; height:auto; }
body.hb-login #logo img.logo-dark { display:none !important; }

/* pill badge */
body.hb-login .hb-login-badge {
  display:flex; align-items:center; justify-content:center; gap:6px; width:max-content; margin:0 auto 18px;
  padding:5px 14px; border:1px solid #c9dbf0; border-radius:999px; background:var(--lg-soft);
  color:var(--lg-primary); font-size:12px; font-weight:600;
}
body.hb-login .hb-login-badge svg { width:14px; height:14px; }

/* heading */
body.hb-login .form-wrapper > h5 { margin:0 0 6px !important; font-size:24px !important; font-weight:700 !important; line-height:1.25; color:var(--lg-text) !important; text-align:center; }
body.hb-login .hb-login-sub { margin:0 0 22px; color:var(--lg-muted); font-size:14px; text-align:center; }

/* fields */
body.hb-login form .form-group { margin-bottom:16px; }
body.hb-login .hb-login-label { display:block; margin:0 0 6px; color:var(--lg-muted); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
body.hb-login .hb-login-field { position:relative; }
body.hb-login .hb-login-field svg { position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:#8a93a6; pointer-events:none; }
body.hb-login form .form-control {
  height:48px !important; padding:0 14px 0 44px !important; border:1px solid var(--lg-line) !important; border-radius:10px !important;
  background:#fff !important; color:var(--lg-text) !important; font-size:15px !important; box-shadow:none !important; text-align:left;
}
body.hb-login form .form-control:focus { border-color:var(--lg-primary) !important; outline:3px solid rgba(0,86,178,.15); outline-offset:0; }
body.hb-login form .form-control::placeholder { color:#98a1b3 !important; }
body.hb-login form .form-control.is-invalid { border-color:#dc2626 !important; }
body.hb-login .alert { margin:0 0 8px; padding:8px 12px; border-radius:8px; font-size:13px; text-align:left; }

/* remember me / reset password row */
body.hb-login form .form-group.d-flex { align-items:center; margin:2px 0 20px; font-size:14px; }
body.hb-login .custom-control-label { color:var(--lg-text); font-size:14px; cursor:pointer; }
body.hb-login .custom-control-input:checked ~ .custom-control-label::before { background-color:var(--lg-primary) !important; border-color:var(--lg-primary) !important; }
body.hb-login form a { color:var(--lg-primary) !important; font-weight:600; text-decoration:none; }
body.hb-login form a:hover { text-decoration:underline; }

/* button */
body.hb-login .btn.submitForm {
  display:flex; align-items:center; justify-content:center; gap:10px; height:52px; margin:0;
  border:0 !important; border-radius:12px !important; background:var(--lg-primary) !important; color:#fff !important;
  font-size:17px; font-weight:600; box-shadow:0 6px 16px rgba(0,86,178,.25);
}
body.hb-login .btn.submitForm:hover { background:var(--lg-primary-dark) !important; }
body.hb-login .btn.submitForm:focus-visible { outline:3px solid rgba(0,86,178,.35); outline-offset:2px; }
body.hb-login .btn.submitForm svg { width:20px; height:20px; }

/* footer note */
body.hb-login .hb-login-foot { margin:20px 0 0; color:var(--lg-muted); font-size:12px; text-align:center; }

@media (max-width:480px) {
  body.hb-login { padding:16px 12px; align-items:flex-start; }
  body.hb-login .form-wrapper { padding:0 20px 24px; border-radius:16px; }
  body.hb-login .form-wrapper > h5 { font-size:22px !important; }
}