.interface-language-control {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  font-family: inherit;
}

.interface-language-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.interface-language-control select {
  width: 100%;
  min-width: 92px;
  height: 32px;
  padding: 0 28px 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #071820;
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  cursor: pointer;
}

.sidebar-user .interface-language-control {
  margin-bottom: 8px;
}

#topbar .interface-language-control {
  margin: 0;
  width: 100%;
}

.sidebar-user .interface-language-control select,
#topbar .interface-language-control select {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  color-scheme: dark;
}

.login-card > [data-i18n-switch],
.login-panel > [data-i18n-switch],
.card > [data-i18n-switch] {
  width: 132px;
  margin: 0 0 14px auto;
}

#topbar [data-i18n-switch] {
  width: 124px;
}

/* SA-3 (7 Oct 2026): the layout never flips. Arabic and Bahasa Melayu translate only the menu, page titles,
   section headers and the Staff tabs and top bar; every page stays left-to-right exactly like English, so this
   sheet has no right-to-left layout rules. */

/* Arabic letters must join and use a font that has Arabic: headers styled with letter spacing or the monospace
   font (eyebrows, page subtitles) switch to the app's Arabic-capable font when the translator has written Arabic
   into them. Only the lettering changes, never the element's position. */
[lang="ar"] {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', Tahoma, 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Buyer portal header and public booking page top bar: the switch follows the header's own colours. */
header.top [data-i18n-switch],
.topbar [data-i18n-switch] {
  width: 132px;
  flex: 0 0 auto;
}

header.top .interface-language-control select,
.topbar .interface-language-control select {
  min-width: 0;
  min-height: 0;
  height: 32px;
  padding: 0 4px 0 8px;
  font-size: 12px;
}

/* The booking page top bar takes the tenant's colours (dark, or light in the minimal theme). The buyer header
   keeps the app theme's own field colours. */
.topbar .interface-language-control select {
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  background: transparent;
  color: inherit;
}

.topbar .interface-language-control option {
  color: #071820;
  background: #fff;
}

#signin .card > [data-i18n-switch] {
  width: 132px;
  margin: 0 0 14px auto;
}

@media (max-width: 520px) {
  #topbar [data-i18n-switch] {
    width: 106px;
  }
  header.top [data-i18n-switch],
  .topbar [data-i18n-switch] {
    width: 118px;
  }
  #topbar .interface-language-control select {
    min-width: 0;
    padding-left: 6px;
    padding-right: 20px;
    font-size: 11px;
  }
  header.top .interface-language-control select,
  .topbar .interface-language-control select {
    padding: 0 2px 0 7px;
    font-size: 11.5px;
  }
}