.bmls {
  --bmls-accent: #ff5a1f;
  --bmls-text: #252525;
  --bmls-muted: #676767;
  --bmls-bg: #fff;
  --bmls-border: #e4e4e7;
  --bmls-trigger-bg: transparent;
  --bmls-trigger-hover-bg: #fff3ee;
  --bmls-option-hover-bg: #fff3ee;
  --bmls-font-size: 14px;
  --bmls-font-weight: 500;
  --bmls-trigger-height: 42px;
  --bmls-padding-x: 12px;
  --bmls-padding-y: 9px;
  --bmls-item-height: 42px;
  --bmls-gap: 8px;
  --bmls-trigger-radius: 10px;
  --bmls-menu-radius: 12px;
  --bmls-item-radius: 8px;
  --bmls-border-width: 1px;
  --bmls-menu-width: 230px;
  --bmls-menu-offset: 8px;
  --bmls-z-index: 999;
  --bmls-shadow: 0 14px 36px rgba(24, 24, 27, .14);
  position: relative;
  display: inline-block;
  color: var(--bmls-text);
  font-family: inherit;
  font-size: var(--bmls-font-size);
  line-height: 1.35;
  z-index: var(--bmls-z-index);
}

.bmls--full { width: 100%; }
.bmls--full .bmls__trigger { width: 100%; }

.bmls__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--bmls-gap);
  min-height: var(--bmls-trigger-height);
  padding: var(--bmls-padding-y) var(--bmls-padding-x);
  border: var(--bmls-border-width) solid transparent;
  border-radius: var(--bmls-trigger-radius);
  color: var(--bmls-text);
  background: var(--bmls-trigger-bg);
  font: inherit;
  font-weight: var(--bmls-font-weight);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.bmls__trigger:hover,
.bmls__trigger[aria-expanded="true"] {
  color: var(--bmls-accent);
  background: var(--bmls-trigger-hover-bg);
  border-color: var(--bmls-border);
}

.bmls__trigger:focus-visible,
.bmls__option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bmls-accent) 30%, transparent);
  outline-offset: 2px;
}

.bmls__globe,
.bmls__current-flag,
.bmls__chevron,
.bmls__check {
  display: inline-flex;
  flex: 0 0 auto;
}

.bmls__globe svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.bmls__chevron svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bmls__trigger[aria-expanded="true"] .bmls__chevron { transform: rotate(180deg); }
.bmls__chevron { transition: transform .18s ease; }

.bmls__current-flag { width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.09); }
.bmls__current-flag img { display: block; width: 24px; height: 16px; object-fit: cover; }

.bmls__menu {
  position: absolute;
  top: calc(100% + var(--bmls-menu-offset));
  right: 0;
  width: var(--bmls-menu-width);
  min-width: var(--bmls-menu-width);
  margin: 0;
  padding: 7px;
  list-style: none;
  border: var(--bmls-border-width) solid var(--bmls-border);
  border-radius: var(--bmls-menu-radius);
  background: var(--bmls-bg);
  box-shadow: var(--bmls-shadow);
  overflow: hidden;
}

.bmls--align-left .bmls__menu { left: 0; right: auto; }
.bmls__menu[hidden] { display: none !important; }
.bmls__menu li { margin: 0; padding: 0; list-style: none; }

.bmls__option {
  display: grid;
  grid-template-columns: 26px 1fr 18px;
  align-items: center;
  gap: var(--bmls-gap);
  min-height: var(--bmls-item-height);
  padding: 8px 10px;
  border-radius: var(--bmls-item-radius);
  color: var(--bmls-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}

.bmls--no-flags .bmls__option { grid-template-columns: 1fr 18px; }

.bmls__option:hover,
.bmls__option:focus-visible {
  color: var(--bmls-accent) !important;
  background: var(--bmls-option-hover-bg);
}

.bmls__option.is-active { font-weight: 600; }
.bmls__flag { display: inline-flex; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.09); }
.bmls__flag img { display: block; width: 24px; height: 16px; object-fit: cover; }
.bmls__code { display: grid; place-items: center; width: 24px; height: 16px; font-size: 9px; font-weight: 700; color: var(--bmls-muted); }
.bmls__check { color: var(--bmls-accent); }
.bmls__check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.bmls-error { color: #b42318; font-size: 13px; }

@media (max-width: 767px) {
  .bmls__menu {
    min-width: min(var(--bmls-menu-width), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmls *, .bmls *::before, .bmls *::after { transition-duration: .01ms !important; }
}
