/* Progga-branded institution login, based on supplied visual reference.
   Scoped exclusively to /login/ so privileged login and backend forms remain unchanged. */
.auth-page.progga-login { margin: 0; min-height: 100svh; background: #fff; color: #07324c; }
.progga-login .pg-shell { display: grid; grid-template-columns: 52% minmax(0, 48%); min-height: 100svh; width: 100%; }
.progga-login .pg-hero {
  position: relative; min-height: 100svh; padding: clamp(30px, 4vw, 80px) clamp(30px, 4.2vw, 80px);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(150deg, #00374e 0%, #004565 46%, #263e59 65%, #80192f 100%);
}
.progga-login .pg-hero::before,
.progga-login .pg-hero::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055); pointer-events: none; z-index: -1;
}
.progga-login .pg-hero::before { top: -30%; right: -10%; }
.progga-login .pg-hero::after { top: -20%; right: -19%; }
.progga-login .pg-hero-brand { width: min(100%, 325px); }
.progga-login .pg-logo { display: block; object-fit: contain; object-position: left center; height: auto; }
.progga-login .pg-logo--hero { width: min(100%, 325px); max-height: 110px; }
.progga-login .pg-hero-main { margin: auto 0; padding: 42px 0; }
.progga-login .pg-hero h1 { margin: 0 0 18px; font: 800 clamp(30px, 2.7vw, 52px)/1.22 system-ui, sans-serif; letter-spacing: .005em; }
.progga-login .pg-hero h1 span { display: block; }
.progga-login .pg-hero-heading-accent { color: #ed5a76; margin-top: 8px; }
.progga-login .pg-hero-description { max-width: 770px; color: #e4e8ef; font-size: clamp(14px, 1.09vw, 19px); line-height: 1.75; margin: 20px 0 36px; }
.progga-login .pg-feature-list { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.progga-login .pg-feature-list li { display: flex; align-items: center; gap: 17px; font-size: clamp(14px, 1.12vw, 19px); color: #e4e5ed; line-height: 1.5; }
.progga-login .pg-feature-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; color: #eef9ff; background: rgba(177,209,222,.4); }
.progga-login .pg-feature-icon svg { height: 23px; width: 23px; }
.progga-login .pg-hero-footer { font-size: clamp(12px, 1vw, 18px); line-height: 1.5; color: #fff; }
.progga-login .pg-login-panel { position: relative; padding: 70px clamp(32px, 8.5vw, 165px) 100px; display: flex; align-items: center; justify-content: center; background: #fff; }
.progga-login .pg-login-content { width: min(100%, 514px); margin: 0 auto; }
.progga-login .pg-form-heading { margin: 0 0 55px; }
.progga-login .pg-form-heading h2 { color: #00334e; margin: 0 0 1px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.5; font-weight: 850; }
.progga-login .pg-form-heading p { color: #919191; font-size: 15px; margin: 0; line-height: 1.7; }
.progga-login .auth-form.pg-login-form { display: grid; gap: 24px; }
.progga-login .auth-field-label { font: 750 17px/1.4 system-ui, sans-serif; margin-bottom: 9px; color: #04324c; }
.progga-login .auth-input { background: #fff; min-height: 62px; border: 1px solid #e3e3e3; border-radius: 13px; padding: 12px 52px 12px 15px; box-shadow: none; color: #00334e; }
.progga-login .auth-input::placeholder { color: #bfc2c5; }
.progga-login .auth-input:hover { border-color: #c2d2d8; }
.progga-login .auth-input:focus { border-color: #c82749; background: #fff; box-shadow: 0 0 0 3px rgba(200,39,73,.13); }
.progga-login .pg-input-end-icon { width: 16px; height: 16px; position: absolute; right: 20px; color: #c5d0d5; pointer-events: none; }
.progga-login .pg-password-toggle { color: #c5d0d5; right: 6px; }
.progga-login .pg-password-toggle:hover { background: rgba(200,39,73,.08); color: #bd2548; }
.progga-login .pg-password-help { color: #6a8090; margin: -10px 0 0; font-size: 12px; line-height: 1.7; }
.progga-login .pg-submit { border-color: #c92649; border-radius: 11px; min-height: 62px; color: #fff; background: #c92749; font: 800 18px/1.4 system-ui, sans-serif; box-shadow: none; }
.progga-login .pg-submit:hover { background: #af1d3e; filter: none; box-shadow: 0 7px 16px rgba(201,39,73,.15); }
.progga-login .pg-payment-copy { text-align: center; margin: 36px 0 12px; }
.progga-login .pg-payment-copy p:first-child { color: #05354e; font-size: clamp(13px, 1.1vw, 18px); font-weight: 700; margin: 0 0 10px; line-height: 1.5; }
.progga-login .pg-payment-copy .pg-payment-note { font-size: 12px; line-height: 1.55; color: #7c8c96; margin: 0; }
.progga-login .pg-admin-link { display: flex; justify-content: center; gap: 8px; width: fit-content; margin: 30px auto 0; text-decoration: underline; color: #ad2846; font-size: 12px; font-weight: 700; }
.progga-login .pg-admin-link:hover { color: #7e1730; }
.progga-login .pg-panel-footer { position: absolute; bottom: 58px; left: 20px; right: 20px; text-align: center; color: #04324c; font-weight: 800; font-size: 17px; }
.progga-login :is(a,button,input):focus-visible { outline-color: #ca2a49; }
@media (max-width: 1250px) {
  .progga-login .pg-shell { grid-template-columns: 53% 47%; }
  .progga-login .pg-hero { padding: 38px; }
  .progga-login .pg-hero h1 { font-size: clamp(28px, 3vw, 42px); }
  .progga-login .pg-login-panel { padding: 65px 38px 105px; }
}
@media (max-width: 900px) {
  .progga-login .pg-shell { grid-template-columns: minmax(0, 1fr); }
  .progga-login .pg-hero { min-height: auto; padding: 24px 24px 28px; }
  .progga-login .pg-logo--hero { width: 195px; max-height: 68px; }
  .progga-login .pg-hero-main { padding: 15px 0 0; }
  .progga-login .pg-hero h1 { font-size: clamp(25px, 4.3vw, 36px); }
  .progga-login .pg-hero-description { font-size: 14px; margin: 12px 0; }
  .progga-login .pg-feature-list { display: none; }
  .progga-login .pg-hero-footer { display: none; }
  .progga-login .pg-login-panel { padding: 44px 24px 105px; align-items: start; min-height: 520px; }
  .progga-login .pg-form-heading { margin-bottom: 26px; }
  .progga-login .pg-panel-footer { bottom: 32px; font-size: 14px; }
}
@media (max-width: 480px) {
  .progga-login .pg-hero { padding: 18px 20px 20px; }
  .progga-login .pg-hero h1 { font-size: 25px; }
  .progga-login .pg-hero-description { font-size: 12.5px; line-height: 1.65; }
  .progga-login .pg-login-panel { padding: 32px 20px 95px; }
  .progga-login .pg-form-heading h2 { font-size: 23px; }
  .progga-login .pg-form-heading p { font-size: 13px; }
  .progga-login .auth-field-label { font-size: 15px; }
  .progga-login .auth-input { min-height: 54px; }
  .progga-login .pg-submit { min-height: 54px; }
  .progga-login .pg-payment-copy { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .progga-login *, .progga-login *::before, .progga-login *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Progga login payment-provider logo strip (reference UI) */
.progga-login .pg-payment-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 14px;
  row-gap: 8px;
  margin: 12px auto 12px;
}
.progga-login .pg-payment-brand {
  display: block;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
}
.progga-login .pg-payment-brand--bkash { width: 112px; }
.progga-login .pg-payment-brand--sonali { width: 132px; }
.progga-login .pg-payment-brand--sslcommerz { width: 155px; }
@media (max-width: 480px) {
  .progga-login .pg-payment-brands { column-gap: 11px; row-gap: 9px; }
  .progga-login .pg-payment-brand--bkash { width: 94px; }
  .progga-login .pg-payment-brand--sonali { width: 116px; }
  .progga-login .pg-payment-brand--sslcommerz { width: 139px; }
}

/* PG-UI-REF-20261022-02: viewport-safe login and provider branding.
   Applies only to the institution login page, not the platform admin portal. */
html:has(body.progga-login) { max-width: 100%; overflow-x: clip; }
body.auth-page.progga-login { width: 100%; max-width: 100%; overflow-x: clip; }
body.progga-login .pg-shell {
  width: 100%; max-width: 100%; min-height: 100svh;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
}
body.progga-login .pg-hero,
body.progga-login .pg-hero-main,
body.progga-login .pg-login-panel,
body.progga-login .pg-login-content,
body.progga-login .pg-payment-copy { min-width: 0; max-width: 100%; }
body.progga-login .pg-hero,
body.progga-login .pg-login-panel { overflow-x: clip; }
body.progga-login .pg-hero h1,
body.progga-login .pg-hero-description,
body.progga-login .pg-feature-list li,
body.progga-login .pg-hero-footer { overflow-wrap: break-word; }
body.progga-login .pg-logo--hero { max-width: 100%; }
body.progga-login .pg-login-panel { padding-inline: clamp(24px, 6.5vw, 108px); }
body.progga-login .pg-login-content { width: min(100%, 440px); }
body.progga-login .pg-form-heading { margin-bottom: 44px; }
body.progga-login .auth-form.pg-login-form { gap: 20px; }
body.progga-login .pg-payment-copy { margin-top: 30px; margin-bottom: 4px; }
body.progga-login .pg-payment-copy p:first-child {
  font-size: clamp(13px, 1.1vw, 18px); margin-bottom: 8px;
}
body.progga-login .pg-payment-brands {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1.38fr);
  align-items: center; justify-items: center;
  width: 100%; max-width: 440px; margin: 5px auto 10px;
  gap: clamp(7px, 1vw, 12px);
}
body.progga-login .pg-payment-brands .pg-payment-brand {
  box-sizing: border-box; display: block;
  width: 100%; max-width: 100%;
  height: 55px; max-height: 55px;
  object-fit: contain; object-position: center;
  min-width: 0; min-height: 0; margin: 0; flex: none;
}
body.progga-login .pg-payment-brands .pg-payment-brand--bkash {
  height: 58px; max-height: 58px;
}
body.progga-login .pg-payment-copy .pg-payment-note { font-size: 10px; }
body.progga-login .pg-admin-link { margin-top: 21px; }
@media (max-width: 1250px) {
  body.progga-login .pg-login-panel { padding-inline: clamp(22px, 3.7vw, 46px); }
}
@media (max-width: 900px) {
  body.progga-login .pg-shell { grid-template-columns: minmax(0, 1fr); }
  body.progga-login .pg-login-panel { padding: 36px 24px 98px; }
  body.progga-login .pg-form-heading { margin-bottom: 28px; }
  body.progga-login .pg-payment-copy { margin-top: 24px; }
}
@media (max-width: 480px) {
  body.progga-login .pg-login-panel { padding: 32px 20px 95px; }
  body.progga-login .pg-payment-brands { gap: 6px; }
  body.progga-login .pg-payment-brands .pg-payment-brand,
  body.progga-login .pg-payment-brands .pg-payment-brand--bkash {
    height: 46px; max-height: 46px;
  }
}
@media (min-width: 901px) and (min-height: 840px) {
  body.progga-login .pg-hero-main { transform: translateY(-18px); }
  body.progga-login .pg-login-content { transform: translateY(26px); }
  body.progga-login .pg-logo--hero { width: min(100%, 293px); }
}