/* Public profile: primary identity on the first line, supporting metadata below. */
body.happy-profile-ui.happy-page-user .user-profile-info h1,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}

/* Keep the complete identity sequence on one row when space allows. */
body.happy-profile-ui.happy-page-user .user-profile-info h1::after,
body.happy-profile-ui.happy-page-user .user-profile-info .h4::after {
  display: none !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .happy-level-name-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .happy-level-name-badge,
body.happy-profile-ui.happy-page-user .user-profile-info h1 > .lao-title-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .lao-title-badge {
  order: 2 !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .happy-public-profile-uid,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .happy-public-profile-uid {
  order: 3 !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .lao-level-badge-hero,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .lao-level-badge-hero {
  order: 4 !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .lao-member-rank-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .lao-member-rank-badge {
  order: 5 !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .happy-school-verified-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .happy-school-verified-badge {
  order: 6 !important;
  margin: 0 !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .lao-level-badge-hero,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .lao-level-badge-hero {
  min-width: 50px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid #cfdcff !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #4169c1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 24px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info h1 > .happy-level-name-badge,
html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info .h4 > .happy-level-name-badge,
html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info h1 > .lao-title-badge,
html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info .h4 > .lao-title-badge {
  border-color: #182033 !important;
  background: #182033 !important;
  color: #fff !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .happy-level-name-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .happy-level-name-badge,
body.happy-profile-ui.happy-page-user .user-profile-info h1 > .lao-title-badge,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .lao-title-badge {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 12px !important;
  border: 1px solid #182033 !important;
  border-radius: 999px !important;
  background: #182033 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 24px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.happy-profile-ui.happy-page-user .user-profile-info h1 > .happy-public-profile-uid,
body.happy-profile-ui.happy-page-user .user-profile-info .h4 > .happy-public-profile-uid {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-color: #e4e8ee !important;
  border-radius: 999px !important;
  background: #f7f8fa !important;
  color: #596273 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info h1 > .happy-public-profile-uid,
html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info .h4 > .happy-public-profile-uid {
  border-color: #e4e8ee !important;
  background: #f7f8fa !important;
  color: #596273 !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details,
html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-dates,
html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-school > span,
html body.happy-profile-ui.happy-page-user .user-profile-header .user-profile-info > ul .badge.bg-label-success {
  color: #3f4652 !important;
  text-shadow: none !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-dates > span,
html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-online {
  color: #3f4652 !important;
  text-shadow: none !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-school > span {
  border: 0 !important;
  background: transparent !important;
}

html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details i,
html body.happy-profile-ui.happy-page-user .user-profile-header .happy-public-profile-details .happy-public-profile-school > span i {
  color: #5b6472 !important;
}

@media (max-width: 480px) {
  body.happy-profile-ui.happy-page-user .user-profile-info h1,
  body.happy-profile-ui.happy-page-user .user-profile-info .h4 {
    justify-content: flex-start !important;
  }
}