/* HX Global Pay V91 — compact registration layout.
 * Visual-only overrides scoped to .register-screen. Registration behavior,
 * validation, verification-code flow and translations remain in the app bundle.
 */
.register-screen {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(18px + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)));
  overflow-x: hidden;
  overflow-y: visible;
}

.register-screen .register-hero {
  height: auto;
  min-height: clamp(142px, 38vw, 154px);
}

.register-screen .register-back {
  top: 12px;
  left: max(14px, env(safe-area-inset-left, 0px));
  width: 32px;
  height: 32px;
}

.register-screen .register-hero__copy {
  top: clamp(45px, 12.5vw, 52px);
  left: clamp(18px, 5.2vw, 23px);
  width: min(51vw, 214px);
  max-width: calc(100% - 174px);
}

.register-screen .register-hero__copy h1 {
  font-size: clamp(22px, 6.1vw, 26px);
  line-height: 1.22;
  letter-spacing: -.4px;
}

.register-screen .register-hero__copy p {
  max-width: 100%;
  margin-top: 5px;
  font-size: clamp(11px, 3.05vw, 13px);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.register-screen .register-hero > img,
html[lang="en"] .register-screen .register-hero > img,
html[lang="vi"] .register-screen .register-hero > img,
html[lang="ms"] .register-screen .register-hero > img {
  top: 9px;
  right: 0;
  width: clamp(156px, 43vw, 184px);
  height: auto;
}

.register-screen .register-dot-one { top: 54px; right: 145px; }
.register-screen .register-dot-two { top: 60px; right: 18px; }
.register-screen .register-dot-three { top: 105px; right: 151px; }
.register-screen .register-dot-four { top: 108px; right: 18px; }

.register-screen .register-card,
html[lang="en"] .register-screen .register-card,
html[lang="vi"] .register-screen .register-card,
html[lang="ms"] .register-screen .register-card {
  width: auto;
  height: auto;
  margin: 0 16px;
  padding: 18px 18px 14px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(28, 99, 185, .075), 0 2px 8px rgba(35, 69, 113, .035);
}

.register-screen .register-card__title,
html[lang="en"] .register-screen .register-card__title,
html[lang="vi"] .register-screen .register-card__title,
html[lang="ms"] .register-screen .register-card__title {
  min-height: 0;
  margin-bottom: 18px;
  text-align: center;
}

.register-screen .register-card__title h2,
html[lang="en"] .register-screen .register-card__title h2,
html[lang="vi"] .register-screen .register-card__title h2,
html[lang="ms"] .register-screen .register-card__title h2 {
  max-width: 100%;
  font-size: clamp(18px, 5vw, 20px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.register-screen .register-card__title span,
html[lang="en"] .register-screen .register-card__title span,
html[lang="vi"] .register-screen .register-card__title span {
  width: 27px;
  height: 4px;
  margin-top: 7px;
}

.register-screen .register-field-label {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 18px;
}

.register-screen .register-card .ui-input {
  height: 49px;
  min-height: 49px;
  padding: 0 13px;
  border-radius: 14px;
}

.register-screen .register-card .ui-input > svg {
  width: 17px;
  height: 17px;
  margin-right: 10px;
}

.register-screen .register-card .ui-input input {
  min-width: 0;
  font-size: 16px;
  scroll-margin-block: 92px 180px;
}

.register-screen .register-card .ui-input + .register-field-label,
.register-screen .register-card label[for="register-password"],
html[lang="en"] .register-screen .register-card .ui-input + .register-field-label,
html[lang="vi"] .register-screen .register-card .ui-input + .register-field-label,
html[lang="ms"] .register-screen .register-card .ui-input + .register-field-label,
html[lang="en"] .register-screen .register-card label[for="register-password"],
html[lang="vi"] .register-screen .register-card label[for="register-password"],
html[lang="ms"] .register-screen .register-card label[for="register-password"] {
  margin-top: 15px;
}

.register-screen .register-code-input {
  padding-right: 6px !important;
}

.register-screen .register-code-input input {
  min-width: 54px;
}

.register-screen .register-code-send,
html[lang="en"] .register-screen .register-code-send,
html[lang="vi"] .register-screen .register-code-send,
html[lang="ms"] .register-screen .register-code-send {
  min-width: 86px;
  max-width: 46%;
  min-height: 35px;
  margin-left: 6px;
  padding: 5px 9px;
  font-size: clamp(9.7px, 2.8vw, 11.5px);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.register-screen .register-code-hint,
html[lang="en"] .register-screen .register-code-hint,
html[lang="vi"] .register-screen .register-code-hint,
html[lang="ms"] .register-screen .register-code-hint {
  min-height: 0;
  margin: 6px 3px 0;
  gap: 5px;
  font-size: 11px;
  line-height: 15px;
  overflow-wrap: anywhere;
}

.register-screen .register-code-hint svg {
  width: 13px;
  height: 13px;
  margin-top: 1px;
}

.register-screen .password-toggle {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  margin: 0 -7px 0 4px;
  padding: 0;
  place-items: center;
  align-self: center;
}

.register-screen .register-agreement,
html[lang="en"] .register-screen .register-agreement,
html[lang="vi"] .register-screen .register-agreement,
html[lang="ms"] .register-screen .register-agreement {
  margin-top: 15px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 17px;
  white-space: normal;
}

.register-screen .register-agreement__box,
html[lang="en"] .register-screen .register-agreement__box,
html[lang="vi"] .register-screen .register-agreement__box,
html[lang="ms"] .register-screen .register-agreement__box {
  width: 20px;
  height: 20px;
  margin-top: 0;
  margin-right: 9px;
  flex: 0 0 auto;
}

.register-screen .register-agreement > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.register-screen .register-submit,
html[lang="en"] .register-screen .register-submit,
html[lang="vi"] .register-screen .register-submit,
html[lang="ms"] .register-screen .register-submit {
  height: 49px;
  min-height: 49px;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 25px;
  line-height: 20px;
  white-space: normal;
}

.register-screen .register-login,
html[lang="en"] .register-screen .register-login,
html[lang="vi"] .register-screen .register-login,
html[lang="ms"] .register-screen .register-login {
  margin: 14px 8px 0;
  font-size: 13px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.register-screen .register-login a,
html[lang="en"] .register-screen .register-login a,
html[lang="vi"] .register-screen .register-login a {
  margin-left: 7px;
}

html[lang="en"] .register-screen .register-hero,
html[lang="vi"] .register-screen .register-hero,
html[lang="ms"] .register-screen .register-hero {
  min-height: clamp(148px, 40vw, 164px);
}

html[lang="en"] .register-screen .register-hero__copy,
html[lang="vi"] .register-screen .register-hero__copy,
html[lang="ms"] .register-screen .register-hero__copy {
  top: clamp(42px, 11.8vw, 49px);
  left: clamp(18px, 5.2vw, 23px);
  width: min(50vw, 205px);
  max-width: calc(100% - 168px);
}

html[lang="en"] .register-screen .register-hero__copy h1,
html[lang="vi"] .register-screen .register-hero__copy h1,
html[lang="ms"] .register-screen .register-hero__copy h1 {
  font-size: clamp(18px, 5.25vw, 22px);
  line-height: 1.23;
}

html[lang="en"] .register-screen .register-hero__copy p,
html[lang="vi"] .register-screen .register-hero__copy p,
html[lang="ms"] .register-screen .register-hero__copy p {
  margin-top: 4px;
  font-size: clamp(10px, 2.75vw, 11.5px);
  line-height: 1.4;
}

@media (max-width: 350px) {
  .register-screen .register-card,
  html[lang="en"] .register-screen .register-card,
  html[lang="vi"] .register-screen .register-card,
  html[lang="ms"] .register-screen .register-card {
    margin-right: 14px;
    margin-left: 14px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .register-screen .register-hero__copy,
  html[lang="en"] .register-screen .register-hero__copy,
  html[lang="vi"] .register-screen .register-hero__copy,
  html[lang="ms"] .register-screen .register-hero__copy {
    left: 17px;
    max-width: calc(100% - 150px);
  }

  .register-screen .register-hero > img,
  html[lang="en"] .register-screen .register-hero > img,
  html[lang="vi"] .register-screen .register-hero > img,
  html[lang="ms"] .register-screen .register-hero > img {
    width: 152px;
  }

  .register-screen .register-code-send,
  html[lang="en"] .register-screen .register-code-send,
  html[lang="vi"] .register-screen .register-code-send,
  html[lang="ms"] .register-screen .register-code-send {
    min-width: 82px;
    padding-right: 7px;
    padding-left: 7px;
  }
}

@supports (-webkit-touch-callout: none) {
  .register-screen {
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}