/* Kill scroll + make page full height */
html, body {
  height: 100%;
  margin: 0;
}
body {
  overflow: hidden;          /* <-- removes scrollbar */
}

/* Remove default Keycloak wrapper spacing that can cause scroll */
#kc-container, #kc-container-wrapper, #kc-content, #kc-content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide Keycloak header */
#kc-header,
.kc-header,
.kc-header-wrapper,
#kc-header-wrapper,
#kc-header-wrapper * {
  display: none !important;
}

/* Full-screen center container */
.mma-page{
  display: flex;
  justify-content: center;
  padding: 20px;               /* <-- important */
  background: #f6f6f6;      /* optional */
}

/* Card should never exceed viewport */
.mma-card{
  width: min(1200px, 96vw);
  background:#fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  overflow:hidden;
}

/* Split layout uses full card height */
.mma-split{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

/* Left image */
.mma-left{
  background: #eee url("../img/leftbanner.webp") center/cover no-repeat;
}

/* Right side content centered */
.mma-right{
  position: relative;
  padding: 36px 48px;
  height: 100%;
  overflow: hidden;         /* <-- prevents inner scroll */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* <-- vertically center */
}

.mma-logo-top{
  position:absolute;
  top: 18px;
  right: 22px;
  height: 30px;
}
.mma-logo-bottom{
  position:absolute;
  bottom: 20px;
  right: 22px;
  height: 22px;
  opacity: .9;
}

.mma-title{
  text-align:center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color:#4a4a4a;
}
.mma-subtitle{
  text-align:center;
  margin: 0 0 18px;
  color:#666;
  font-size: 14px;
}

.mma-form{ margin-top: 8px; }

.mma-label{
  display:block;
  font-weight: 700;
  margin: 12px 0 8px;
  color:#222;
}
.mma-input, .mma-select{
  width:100%;
  border:1px solid #cfcfcf;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  outline:none;
  background:#fff;
}
.mma-passwrap{ position:relative; }
.mma-eye{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  opacity:.75;
}
.mma-btn{
  width:100%;
  margin-top: 16px;
  border:0;
  border-radius: 4px;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 700;
  background:#49b04a;
  color:#fff;
  cursor:pointer;
}

/* Mobile */
@media (max-width: 980px){
  body { overflow: auto; }          /* allow scroll on mobile */
  .mma-card{ height: auto; }
  .mma-split{ grid-template-columns: 1fr; }
  .mma-left{ min-height: 240px; }
  .mma-right{ padding: 24px; }
  .mma-logo-top, .mma-logo-bottom{ position: static; display:block; margin: 0 0 12px auto; }
}