/* Keep translated labels inside their source component boundaries. */
html:not([data-locale="en"]) .ant-menu-title-content,
html:not([data-locale="en"]) .guide-step3-button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not([data-locale="en"]) .ant-menu-title-content > *,
html:not([data-locale="en"]) .guide-step3-button > * {
  min-width: 0;
  max-width: 100%;
}

html:not([data-locale="en"]) .affiliate-reward-badge {
  max-width: 100%;
  overflow: visible;
}

html:not([data-locale="en"])
  [class*="text-color"][class*="text-size-text"] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-locale="km"] body,
html[data-locale="hi"] body,
html[data-locale="th"] body {
  line-break: auto;
  overflow-wrap: normal;
  word-break: normal;
}

/* Delist beginner tutorial from all-locale menus; keep page/i18n. */
.menu-item-105,
.ant-menu-item.menu-item-105,
li.ant-menu-item[data-menu-id="105"],
.ant-menu-item[data-menu-id="105"],
a[href="/beginnerTutorial"],
a[href$="/beginnerTutorial"],
li.ant-menu-item:has(a[href*="beginnerTutorial"]) {
  display: none !important;
}

/* /threeLevelAgent/rules: height:100% + justify-content:center clips the
   top of a tall page on mobile, so the user cannot scroll to the banner. */
@media screen and (max-width: 660px) {
  .rules[data-v-5328b1b1] {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }
}

@media screen and (max-width: 660px) {
  html:not([data-locale="en"]) .mobile-bottom-nav .nav-item,
  html:not([data-locale="en"]) .bottom-nav .nav-item,
  html:not([data-locale="en"]) [class*="BottomNav"] .nav-item {
    min-width: 0;
    overflow: hidden;
  }

  html:not([data-locale="en"]) .nav-item .img-content--refer-badge {
    max-width: calc(100% + 12px);
    transform: scale(0.62);
    transform-origin: center bottom;
  }
}