/* Approved option 1: native selects with a centred SVG, 16px from the edge.
   Only arrow presentation and its text clearance are shared. Page-owned field
   colours, borders, dimensions, focus states and native picker behaviour stay.
   A layer lets these few properties survive older page-level !important resets. */
@layer ct-dropdowns {
  :root {
    --ct-dropdown-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23636961' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5.5 5 5 5-5'/%3E%3C/svg%3E");
    --ct-dropdown-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23aab6bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5.5 5 5 5-5'/%3E%3C/svg%3E");
    --ct-dropdown-arrow: var(--ct-dropdown-arrow-light);
  }
  :root[data-theme="dark"], :root.dark,
  :root:not([data-theme="light"]) body:is(.dark-mode, .dark) {
    --ct-dropdown-arrow: var(--ct-dropdown-arrow-dark);
  }
  /* Multi-row listboxes and controls with an existing custom arrow are excluded. */
  select:not([multiple]):where(:not([size]), [size="0"], [size="1"]):not(:where(.cs-compact-filter, .ss-custom-select, .select:not(select), .select-wrap, [data-ct-custom-select], [data-ct-native-select]) select):not([data-ct-custom-select], [data-ct-native-select]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: var(--ct-dropdown-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px 16px !important;
    background-origin: border-box !important;
    padding-inline-end: 48px !important;
    text-overflow: ellipsis;
  }
  select:dir(rtl):not([multiple]):where(:not([size]), [size="0"], [size="1"]):not(:where(.cs-compact-filter, .ss-custom-select, .select:not(select), .select-wrap, [data-ct-custom-select], [data-ct-native-select]) select):not([data-ct-custom-select], [data-ct-native-select]) {
    background-position: left 16px center !important;
  }
  /* System colours use the platform arrow, which remains visible in high contrast. */
  @media (forced-colors: active) {
    select:not([multiple]):where(:not([size]), [size="0"], [size="1"]):not(:where(.cs-compact-filter, .ss-custom-select, .select:not(select), .select-wrap, [data-ct-custom-select], [data-ct-native-select]) select):not([data-ct-custom-select], [data-ct-native-select]) {
      -webkit-appearance: auto !important;
      appearance: auto !important;
      background-image: none !important;
      padding-inline-end: revert-layer !important;
    }
  }
}