:root{
  --login-side-gap: clamp(12px, 1.5vw, 20px);
  --panel-radius: 12px;
}
body{font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

/* Page structure */
html, body { height: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f6f8fc;
}

/* Main wrapper */
.login-page-cont { 
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vh, 24px);
  padding-bottom: 100px;   /* reserve room for footer */
}

/* Login card (reduced size) */
.login-cont{
  max-width: 700px;
  width: 100%;
  background: #fff;
  border-radius: var(--panel-radius);
  box-shadow: 0 6px 20px rgba(16,24,40,.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Grid inside the card */
.login-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
}

/* Left visual panel */
.logininfo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #284e9e;
  color: #fff;
}
.logininfo img{
  width: clamp(120px, 20vw, 180px);
  height: auto;
}
.logininfo h4{
  margin: 12px 0 4px;
  font-weight: 600;
  font-size: 16px;
}
.logininfo small{opacity:.9; font-size: 12px;}

/* Right form panel */
.loginformcont{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  padding-bottom: 70px; /* space for sticky button */
  position: relative;
}

/* Brand row */
.brand-row{
  display:flex; gap: var(--login-side-gap); align-items:center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.brand-row img{max-height: 32px; height:auto; width:auto}

.form-group{margin-bottom: 10px}
.form-label{margin-bottom: 4px; font-size: 13px;}

/* Sticky LOGIN button inside card */
.loginformcont button[type="submit"],
.loginformcont .login-btn {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  width: 100%;
  background: #284e9e;
  color: #fff;
  font-weight: 600;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 5;
}
.loginformcont button[type="submit"]:hover,
.loginformcont .login-btn:hover {
  background: #1f3e7d;
}

/* Fixed footer at viewport bottom */
.login-credit{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f6f8fc;
  text-align: center;
  font-size: 12px;
  color: #98a2b3;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  line-height: 1.3;
  z-index: 999;
  box-shadow: 0 -2px 6px rgba(0,0,0,.05);
}
.login-credit a{
  color: #284e9e;
  font-weight: 600;
  text-decoration: none;
}
.login-credit a:hover{ text-decoration: underline; }

/* Responsive */
@media (max-width: 992px){
  /* Hide left blue panel on smaller screens */
  .login-grid{grid-template-columns: 1fr;}
  .logininfo{display: none;}
  .loginformcont{padding: 16px; padding-bottom: 70px;}
}
@media (max-width: 576px){
  .login-page-cont{
    align-items: flex-start;
    padding: 12px;
    padding-bottom: 100px;
  }
  .login-cont{ min-height: auto; }
}