/* X-Route field icon spacing safety layer */
.xr-search,
.xr-location-wrap,
.xr-valid-wrap,
.xr-money,
.xr-customer-combo,
.xr-type-combo,
.xr-generic-clear-wrap,
.input-icon,
.input-with-icon,
.search-input-wrap{
  position:relative!important;
}

/* Left-side field icons */
.xr-search>i,
.xr-location-wrap>i,
.xr-customer-combo>i,
.xr-type-combo>i,
.input-icon>i,
.input-with-icon>i,
.search-input-wrap>i{
  position:absolute!important;
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:14px!important;
  height:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:10px!important;
  line-height:1!important;
  pointer-events:none!important;
  z-index:5!important;
}

.xr-search>input,
.xr-location-wrap>input,
.xr-customer-combo>input,
.xr-type-combo>input,
.input-icon>input,
.input-with-icon>input,
.search-input-wrap>input{
  padding-left:32px!important;
}

/* Controls that also contain a clear/status action on the right. */
.xr-route-clearable>.xroute-location,
.xr-generic-clear-wrap>input,
.xr-generic-clear-wrap>textarea{
  padding-right:32px!important;
}
.xr-valid-wrap.xr-generic-clear-wrap>input{padding-right:82px!important}
.xr-picker-clear-wrap>input{padding-right:58px!important}
.xr-select-clear-wrap>select{padding-right:54px!important}

/* Keep right-side controls inside the field without covering values. */
.xr-route-clear,
.xr-generic-clear{
  right:7px!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
}
.xr-valid{right:8px!important;white-space:nowrap!important}
.xr-valid-wrap.xr-generic-clear-wrap .xr-valid{right:32px!important}
.xr-select-arrow{right:31px!important}

/* Search/dropdown content should never inherit icon-like padding. */
.xr-customer-results button,
.xr-type-results button,
.xr-pickupdrop-results button,
.xr-destination-results button{
  padding-left:10px!important;
  padding-right:10px!important;
}

/* Clear controls: red cross only, in both themes and all interaction states. */
html body button:is(.xr-generic-clear,.xr-route-clear,[data-xr-clear],[aria-label="Veld leegmaken"],[aria-label="Locatie leegmaken"],[title="Veld leegmaken"],[title="Locatie leegmaken"]){
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  color:#ef4444!important;
}
html body button:is(.xr-generic-clear,.xr-route-clear,[data-xr-clear],[aria-label="Veld leegmaken"],[aria-label="Locatie leegmaken"],[title="Veld leegmaken"],[title="Locatie leegmaken"]):hover{color:#ff5c5c!important}
html body button:is(.xr-generic-clear,.xr-route-clear,[data-xr-clear],[aria-label="Veld leegmaken"],[aria-label="Locatie leegmaken"],[title="Veld leegmaken"],[title="Locatie leegmaken"]):focus-visible{outline:2px solid currentColor!important;outline-offset:2px}