/* Desktop-only registration composition. Existing mobile registration remains unchanged. */
@media screen and (min-width: 901px) {
  html body #root > .login-screen.login-action-screen:has(> .register-page) {
    box-sizing: border-box !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 24px 32px !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
  }

  html body #root > .login-action-screen:has(> .register-page) > .register-page {
    box-sizing: border-box !important;
    width: min(100%, 1000px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 320px 620px !important;
    grid-template-rows: 58px 58px auto 48px 30px !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
    align-content: center !important;
    border-radius: 24px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-page > .standalone-page-header {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 4px 10px !important;
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 150px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(205, 181, 132, 0.58) !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .standalone-page-header > h1 {
    margin: 0 !important;
    justify-self: center !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .standalone-back-button {
    position: static !important;
    inset: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    border-radius: 50% !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-language-select {
    position: relative !important;
    inset: auto !important;
    width: 138px !important;
    min-width: 138px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    justify-self: end !important;
    border: 1px solid rgba(205, 181, 132, 0.58) !important;
    border-radius: 13px !important;
    background: rgba(255, 253, 248, 0.84) !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-brand-logo-outside {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 320px !important;
    height: 430px !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 32px !important;
    place-self: center !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(218, 199, 158, 0.62) !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 50% 42%, #fffdf7, #f5ecda 78%) !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-brand-logo-outside img {
    width: min(94%, 270px) !important;
    max-width: 270px !important;
    height: auto !important;
    max-height: 145px !important;
    object-fit: contain !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-progress {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    align-self: center !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-page-card {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 620px !important;
    max-width: 620px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    gap: 12px !important;
    align-self: start !important;
    border-radius: 20px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-page-card > label {
    gap: 5px !important;
    font-size: 14px !important;
    line-height: 19px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-step-label {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-id-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 118px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-id-prefix {
    width: 52px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(205, 181, 132, 0.58) !important;
    border-radius: 12px !important;
    background: #f7f0df !important;
  }

  html body #root > .login-action-screen:has(> .register-page) :is(
      .register-id-row input,
      .register-password-row input,
      .register-phone-row input,
      .register-otp-row input,
      .register-page-card > label > input:not([type="checkbox"]),
      .register-page-card > label > select
    ) {
    box-sizing: border-box !important;
    min-height: 46px !important;
    height: 46px !important;
    padding-block: 0 !important;
    font-size: 14px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) :is(
      .register-id-row > button,
      .register-password-row > button,
      .register-otp-row > button
    ) {
    box-sizing: border-box !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-password-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 8px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-phone-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-otp-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    gap: 8px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) :is(.register-save-id-note, .password-rule-note) {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-terms-row {
    min-height: 30px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-terms-row > input[type="checkbox"] {
    box-sizing: border-box !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-next-button {
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: 620px !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-existing-login {
    grid-column: 2 !important;
    grid-row: 5 !important;
    width: 620px !important;
    height: 30px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-kyc-note {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 4 / 6 !important;
    width: 320px !important;
    min-height: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    align-self: start !important;
    border-radius: 16px !important;
  }
}

@media screen and (min-width: 901px) and (max-width: 1080px) {
  html body #root > .login-screen.login-action-screen.login-action-screen:has(> .register-page) {
    padding-inline: 18px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) > .register-page {
    grid-template-columns: 270px minmax(0, 1fr) !important;
    column-gap: 20px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) .register-brand-logo-outside,
  html body #root > .login-action-screen:has(> .register-page) .register-kyc-note {
    width: 270px !important;
  }

  html body #root > .login-action-screen:has(> .register-page) :is(
      .register-page-card,
      .register-next-button,
      .register-existing-login
    ) {
    width: 100% !important;
    max-width: none !important;
  }
}