/*
 * Matches Vehica's own rule for .vehica-number-range__1of2 input[type=text]
 * exactly (font-size, line-height, padding, border-radius) — our <select>
 * doesn't get that rule automatically since browsers style <select> and
 * <input type=text> differently by default, so we replicate it here.
 * Border/background are added since Vehica's per-field rule doesn't set
 * them (they come from a broader input rule elsewhere that a <select>
 * wouldn't match either) — adjust the border color below if it doesn't
 * quite match once you compare them side by side.
 */
.gp-number-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    font-size: 15px;
    line-height: 19px;
    padding: 13px 13px 13px 27px;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    background: #fff;
    color: #333;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
}

.gp-number-select:focus {
    outline: none;
    box-shadow: none;
}

/*
 * Vehica's native "clear" (×) button is built to sit over a visible text
 * input. Since we hide that input and show our <select> instead, the ×
 * button's positioning no longer lines up (it was floating half outside
 * the field). Our blank dropdown option already serves as "clear", so we
 * just hide Vehica's button for these converted fields.
 */
input[placeholder="Min Year"] ~ .vehica-form-button__clear,
input[placeholder="Max Year"] ~ .vehica-form-button__clear,
input[placeholder="Min Price"] ~ .vehica-form-button__clear,
input[placeholder="Max Price"] ~ .vehica-form-button__clear,
input[placeholder="Min Mileage"] ~ .vehica-form-button__clear,
input[placeholder="Max Mileage"] ~ .vehica-form-button__clear,
input[placeholder="Min Engine Size"] ~ .vehica-form-button__clear,
input[placeholder="Max Engine Size"] ~ .vehica-form-button__clear {
    display: none !important;
}