/* Serbian surface: native single select; canonical default, no fix class. */
:root{--select-inset:12px;--select-icon:16px;--select-gap:8px;--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23506746' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Select geometry v1. Set --select-inset, --select-icon, --select-gap and
   --select-chevron on the application surface using its existing tokens.
   Default coverage is deliberate: a new native select needs no opt-in class.
   Multiple/listbox controls keep their platform presentation. */
select:not([multiple]):not([size]),
select:not([multiple])[size=""],
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: var(--select-inset) calc(var(--select-inset) + var(--select-icon) + var(--select-gap));
  background-image: var(--select-chevron);
  background-position: right var(--select-inset) center;
  background-size: var(--select-icon) var(--select-icon);
  background-repeat: no-repeat;
  background-origin: padding-box;
  box-sizing: border-box;
  min-inline-size: calc(2 * var(--select-inset) + var(--select-icon) + var(--select-gap) + 1em);
}
select:not([multiple]):not([size]):dir(rtl),
select:not([multiple])[size=""]:dir(rtl),
select:not([multiple])[size="0"]:dir(rtl),
select:not([multiple])[size="1"]:dir(rtl) {
  background-position: left var(--select-inset) center;
}
/* Honor the platform contrast theme; this is an explicit native fallback,
   not a claim that the native glyph has custom-slot geometry. */
@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size=""],
  select:not([multiple])[size="0"],
  select:not([multiple])[size="1"] {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
    padding-inline-end: var(--select-inset);
  }
}