/* X-Route: modern, consistent dropdown arrows for all form fields */
select:not([multiple]){
  -webkit-appearance:none!important;
  appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d9aa43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 9px center!important;
  background-size:12px 12px!important;
  padding-right:31px!important;
}

/* When a select also has a red clear button, keep both controls separated. */
.xr-select-clear-wrap>select{
  background-position:right 30px center!important;
  padding-right:52px!important;
}
.xr-select-clear-wrap .xr-select-arrow{display:none!important}

/* Search/combo fields that are inputs rather than native selects. */
.xr-customer-combo:after{
  content:'⌄'!important;
  color:#d9aa43!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
  right:9px!important;
  top:50%!important;
  transform:translateY(-55%)!important;
}
.xr-customer-combo.xr-generic-clear-wrap:after{right:30px!important}

/* Any legacy/custom arrow helper gets the same modern orange treatment. */
.xr-select-arrow,
.language-current .fa-chevron-down,
.user-chip>.fa-chevron-down{
  color:#d9aa43!important;
  font-size:11px!important;
  line-height:1!important;
}

/* Shared dropdown highlight in light and dark mode. */
html:root body :is(.xr-customer-results,.xr-type-results,.xr-pickupdrop-results,.xr-destination-results,[role="listbox"]) :is(button,[role="option"]):is(:hover,:focus-visible),
html:root body .language-option:is(:hover,:focus-visible){
  background:#b9ddff!important;
  background-image:none!important;
  color:#123451!important;
}
html:root body :is(.xr-customer-results,.xr-type-results,.xr-pickupdrop-results,.xr-destination-results,[role="listbox"]) :is(button,[role="option"]):is(:hover,:focus-visible) *,
html:root body .language-option:is(:hover,:focus-visible) *{
  color:#123451!important;
}
html:root body select option:is(:hover,:focus,:checked){
  background:#b9ddff!important;
  color:#123451!important;
}


/* Trip editor dropdowns: always open below, never clip, and stay compact. */
body.xroute-new-trip .xr-order-customer,
body.xroute-new-trip .xr-customer-combo,
body.xroute-new-trip .xr-order-fields{overflow:visible!important}
body.xroute-new-trip .xr-order-customer{position:relative!important;z-index:80!important}
body.xroute-new-trip .xr-customer-results{
  position:absolute!important;left:0!important;right:0!important;
  top:calc(100% + 4px)!important;bottom:auto!important;
  max-height:190px!important;overflow-x:hidden!important;overflow-y:auto!important;
  z-index:3000!important;overscroll-behavior:contain!important;
}
body.xroute-new-trip .xr-customer-results button{
  min-height:38px!important;height:38px!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
body.xroute-new-trip .xr-customer-combo:after{
  content:'▾'!important;font-size:18px!important;font-weight:900!important;
  color:#e4ad31!important;right:31px!important;top:50%!important;
  transform:translateY(-54%)!important;text-shadow:0 0 1px currentColor!important;
}
body.xroute-new-trip .xr-job-type-picker{position:relative!important;width:100%!important;overflow:visible!important}
body.xroute-new-trip .xr-job-type-trigger{
  width:100%!important;height:31px!important;min-height:31px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:5px 9px!important;border:1px solid #384246!important;border-radius:5px!important;
  background:#111516!important;color:#fff!important;font-size:10px!important;font-weight:700!important;
}
body.xroute-new-trip .xr-job-type-trigger i{color:#e4ad31!important;font-size:14px!important}
body.xroute-new-trip .xr-job-type-menu{
  position:absolute!important;left:0!important;right:0!important;top:calc(100% + 4px)!important;bottom:auto!important;
  z-index:3000!important;display:grid!important;padding:4px!important;
  max-height:190px!important;overflow-y:auto!important;
  border:1px solid #384246!important;border-radius:6px!important;background:#151a1c!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
}
body.xroute-new-trip .xr-job-type-menu[hidden]{display:none!important}
body.xroute-new-trip .xr-job-type-menu button{
  min-height:34px!important;padding:7px 9px!important;text-align:left!important;
  border:0!important;border-radius:4px!important;background:transparent!important;color:#fff!important;
}
body.xroute-new-trip .xr-job-type-menu button:hover,
body.xroute-new-trip .xr-job-type-menu button:focus-visible{background:#b9ddff!important;color:#123451!important}
html[data-theme="light"] body.xroute-new-trip .xr-job-type-trigger{background:#fff!important;color:#20262a!important;border-color:#bfc8cd!important}
html[data-theme="light"] body.xroute-new-trip .xr-job-type-menu{background:#fff!important;border-color:#c7d0d5!important}
html[data-theme="light"] body.xroute-new-trip .xr-job-type-menu button{color:#20262a!important}


/* One dropdown standard for every X-Route custom choice list. */
html:root body :is(.xr-customer-results,.xr-type-results,.xr-pickupdrop-results,.xr-destination-results,[role="listbox"]){
  top:calc(100% + 4px)!important;bottom:auto!important;
  max-height:190px!important;overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;z-index:3000!important;
}
html:root body :is(.xr-customer-results,.xr-type-results,.xr-pickupdrop-results,.xr-destination-results,[role="listbox"]) :is(button,[role="option"]){
  min-height:38px!important;height:38px!important;padding:8px 10px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
html:root body :is(.xr-customer-results,.xr-type-results,.xr-pickupdrop-results,.xr-destination-results,[role="listbox"]) :is(button,[role="option"]):is(:hover,:focus-visible){
  background:#b9ddff!important;background-image:none!important;color:#123451!important;
}
body.xroute-new-trip .xr-customer-combo:after,
body.xroute-new-trip .xr-job-type-trigger:after{
  content:'▾'!important;display:block!important;color:#e4ad31!important;
  font-family:Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;
  line-height:1!important;text-shadow:0 0 1px currentColor!important;
}
body.xroute-new-trip .xr-job-type-trigger:after{position:static!important;transform:none!important}
body.xroute-new-trip .xr-job-type-trigger>i{display:none!important}


/* Site-wide dropdown standard: left aligned, five visible rows, shared hover. */
html:root body :is(
  .xr-customer-results,
  .xr-type-results,
  .xr-pickupdrop-results,
  .xr-destination-results,
  .xr-job-type-menu,
  .language-menu,
  [role="listbox"]
){
  max-height:190px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
html:root body :is(
  .xr-customer-results,
  .xr-type-results,
  .xr-pickupdrop-results,
  .xr-destination-results,
  .xr-job-type-menu,
  .language-menu,
  [role="listbox"]
) :is(button,[role="option"],.language-option){
  justify-content:flex-start!important;
  text-align:left!important;
}
html:root body :is(
  .xr-customer-results,
  .xr-type-results,
  .xr-pickupdrop-results,
  .xr-destination-results,
  .xr-job-type-menu,
  .language-menu,
  [role="listbox"]
) :is(button,[role="option"],.language-option):is(:hover,:focus-visible){
  background:#b9ddff!important;
  background-image:none!important;
  color:#123451!important;
}
html:root body :is(
  .xr-customer-results,
  .xr-type-results,
  .xr-pickupdrop-results,
  .xr-destination-results,
  .xr-job-type-menu,
  .language-menu,
  [role="listbox"]
) :is(button,[role="option"],.language-option):is(:hover,:focus-visible) *{
  color:#123451!important;
}
body.xroute-new-trip .xr-job-type-trigger{
  justify-content:flex-start!important;
  text-align:left!important;
}
body.xroute-new-trip .xr-job-type-trigger>span{
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:left!important;
}
body.xroute-new-trip .xr-job-type-trigger::after{
  flex:0 0 auto!important;
  margin-left:auto!important;
}
html:root body select:not([multiple]){
  text-align:left!important;
  text-align-last:left!important;
}
html:root body select option{
  text-align:left!important;
}