/* Local flag artwork keeps the selected market recognizable on Windows and iOS.
   Native select semantics, keyboard navigation and translated names stay intact. */
select:has(> option[value="SY"]):has(> option[value="AE"]) {
  --ll-market-flag: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--ll-market-flag), url('/assets/market-chevron.svg');
  background-repeat: no-repeat;
  background-position: left .6rem center, right .6rem center;
  background-size: 26px auto, 12px 12px;
  padding-inline: 2.65rem 1.9rem;
}
select:has(> option[value="SY"]):has(> option[value="AE"]):dir(rtl) {
  background-position: right .6rem center, left .6rem center;
}
select:has(> option[value="SY"]:checked):has(> option[value="AE"]) {
  --ll-market-flag: url('/assets/market-sy.svg');
}
select:has(> option[value="AE"]:checked):has(> option[value="SY"]) {
  --ll-market-flag: url('/assets/market-ae.svg');
}
/* Keep a useful market name beside the flag in the compact mobile header. */
.live-controls #liveMarket { max-width: 13rem; min-width: 7.6rem; }
@media (forced-colors: active) {
  select:has(> option[value="SY"]):has(> option[value="AE"]) {
    appearance: auto;
    background-image: none;
    padding-inline: .5rem;
  }
}