.rb-language { display:inline-flex; align-items:center; gap:9px; max-width:100%; color:var(--muted,var(--login-muted,#6e6e73)); font:14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.rb-language svg { width:20px; height:20px; flex:none; fill:currentColor; stroke:none; }
.rb-language select { appearance:auto; min-height:44px; max-width:100%; padding:9px 12px; border:1px solid rgba(0,0,0,.12); border-radius:12px; background:rgba(118,118,128,.08); color:inherit; font:inherit; cursor:pointer; }
.rb-language select:focus-visible { outline:3px solid #007aff; outline-offset:3px; }
.rb-language select option { background:#fff; color:#1c1c1e; }
html[data-theme="dark"] .rb-language, html.results-mode .rb-language { color:var(--muted,var(--login-muted,#ccc)); }
html[data-theme="dark"] .rb-language select, html.results-mode .rb-language select { background:rgba(118,118,128,.08); border-color:color-mix(in srgb,currentColor 22%,transparent); }
html[data-theme="dark"] .rb-language select option { background:#1c1c1e; color:#fff; }
.rb-language-footer { display:flex; justify-content:center; padding:24px 20px; }
.footer-toolbar { display:flex; justify-content:flex-end; align-self:stretch; width:100%; margin-bottom:20px; }
.footer-toolbar [data-language-host] { display:flex; justify-content:flex-end; min-width:0; }
.signin-footer { flex-wrap:wrap; }
.signin-footer .rb-language-footer { flex-basis:100%; padding:8px 0 0; }

/* The landing headline must wrap too; results mode hides it, so card-only
   checks cannot catch a forced single line here. */
html[data-language] #heroDirective {
  white-space:normal;
  text-wrap:balance;
  overflow-wrap:break-word;
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:720px) {
  html[data-language] #heroDirective { line-height:1.3; }
  html[data-language] .nav { box-sizing:border-box; width:100%; }
  html[data-language] .nav-right { flex:0 0 auto; }
  html[data-language] .nav-burger { flex:0 0 36px; }
}

/* Keep the same surfaces and type scale. Translated copy needs flexible
   content widths and natural line wrapping, rather than smaller text. */
html[data-language] :is(.post-choices button > span:nth-child(2), .rc-info,
  .rcd-person-info, .rb-checkout__row dt, .rb-ride-actions__preview-row span:first-child) {
  min-width:0;
  overflow-wrap:anywhere;
}
html[data-language] :is(.btn, .rcd-btn, .rcd-action-row, .rb-ride-actions__button,
  .choice, .chip, .filter, .nav-drawer-link) {
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}
html[data-language] :is(.btn, .rcd-btn) > :is(span, .label) { min-width:0; }
html[data-language] :is(.btn, .rcd-btn, .rb-ride-actions__button) :is(svg, ion-icon) { flex-shrink:0; }
html[data-language] :is(.head, .heading, .actions, .filters) { flex-wrap:wrap; }
html[data-language] :is(.tabs .tab, .rcd-footer-dual > .rcd-btn) {
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
html[data-language] .rb-checkout__row dd,
html[data-language] .rb-ride-actions__preview-row strong { flex-shrink:0; white-space:nowrap; }
html[data-language] .nav-drawer-link { text-align:left; }
html[data-language] #custom-tags { flex:1 1 0; width:0; min-width:0; }
html[data-language] #add-tag { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; }
/* A conversation's tools share a row below the person, so translated
   actions cannot squeeze their name or escape the thread panel. */
html[data-language] .thread-head { flex-wrap:wrap; }
html[data-language] .thread-title { min-width:0; overflow-wrap:anywhere; }
html[data-language] .thread-actions {
  flex:1 0 100%;
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
html[data-language] :is(.thread-head, .messages, .composer, .notice, .ride-link)[hidden] { display:none !important; }

/* The closed navbar remains icon-only. Allow the expanded label to use
   its actual translated width instead of the previous 110px ceiling. */
@media (min-width:721px) {
  html[data-language] :is(.nav-link, .nav-cta):is(:hover, :focus-visible) { max-width:280px; }
  html[data-language] .nav-link:is(:hover, :focus-visible) > span,
  html[data-language] .nav-cta:is(:hover, :focus-visible) > span:not(.nav-post-mark) { max-width:240px; }
}
@media (hover:none) and (min-width:941px) {
  html[data-language] .nav-link > span { max-width:none; }
}