/* =========================================================================
   SENDPK.COM — Register page styles (register.php only)
   -------------------------------------------------------------------------
   The card/field/button chrome (.login-card, .login-field, .login-input-wrap,
   .login-submit, .login-alert, .login-remember, .login-shell...) is all
   reused as-is from assets/css/login-styles.css — none of those rules are
   scoped under #loginPage, only the page background/padding is, so this
   file only needs to supply that same wrapper recipe under this page's own
   id instead of literally reusing #loginPage on an unrelated page. The PIN
   popup itself reuses assets/css/theme-popup.css + assets/css/two-step-popup.css.
   ========================================================================= */

#registerPage {
  background: var(--section-glow), var(--wa-page);
  padding: 1.5rem 0 1.75rem;
}

/* Wider than login.php's 560px .login-shell — register has twice the fields,
   so it gets the extra width .reg-row below needs to pair them up without
   cramping each column. */
#registerPage .login-shell {
  max-width: 680px;
}

/* Pairs two .login-field blocks (Name/Mobile, Password/Confirm) side by side
   so the form doesn't stack all five fields in one tall column. Each
   .login-field keeps its own margin-bottom, so vertical rhythm between rows
   stays identical to login.php/forgot.php. */
.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

@media (max-width: 575.98px) {
  #registerPage { padding: 1.5rem 0 1.75rem; }
  #registerPage .login-shell { max-width: 560px; }
  .reg-row { grid-template-columns: 1fr; }
}