.iti-search-item {
    /* sibling of .country-list; JS pins top/left/width to match it (see syncOverlay) */
    display: none;
    position: absolute;
    z-index: 5;
    background: var(--paper, #fff);
    padding: 8px;
    margin: 0;
    box-sizing: border-box;
}

.iti-search-item.is-open {
    display: block;
}

.iti-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.iti-search-input {
    width: 100%;
    box-sizing: border-box;
    /* left padding matches where country-row text starts (list padding + row padding
       + flag width + flag margin), so the typed text lines up with "United States"
       etc. below rather than with the flags. !important is required: the vendored
       intlTelInput.css has generic, unscoped `input[type=text]` descendant rules
       (e.g. `.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input`)
       meant for the actual phone-number field, but since they match ANY text input
       inside the widget wrapper — including this one — and outrank a single class
       selector on specificity, they were silently overriding this padding. */
    /* right padding widened from 30px to give the enlarged .iti-search-clear
       hit target (see below) room without overlapping typed text. */
    /* the tours page's own style.css has a blanket
       `input[type=text]{border:1px solid #f1f1f1;border-radius:10px;height:50px;...}`
       rule that (like the padding case above) outranks a single class selector on
       specificity — same fight, same fix: !important on every property it also sets. */
    padding: 6px 40px 6px 28px !important;
    height: auto !important;
    border: none !important;
    border-bottom: 1px solid var(--line, #e6e1d8) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--ink, #2a2a2a) !important;
    outline: none;
    transition: border-color 0.2s ease;
}

.iti-search-input::placeholder {
    color: #adadad;
}

.iti-search-input:hover {
    border-bottom-color: #cfc7ba;
}

.iti-search-input:focus {
    border-bottom-color: var(--marigold, #aa8453);
}

.iti-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted, #999);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* invisible ~44x44 tap target around the visible 20x20 circle, per mobile
   touch-target guidelines — doesn't change the circle's rendered size. */
.iti-search-clear::before {
    content: "";
    position: absolute;
    inset: -12px;
}

.iti-search-clear svg {
    display: block;
}

.iti-search-clear.is-visible {
    opacity: 1;
    visibility: visible;
}

.iti-search-clear:hover {
    background: var(--ivory, #e3ded2);
    color: var(--ink-soft, #555);
}

.iti-search-clear:focus-visible {
    outline: 2px solid var(--marigold, #aa8453);
    outline-offset: 2px;
}

li.iti-search-no-results {
    /* left padding matches country-row text start, same reasoning as .iti-search-input.
       Vertical padding matches .iti__country/.country's own 5px top/bottom (see
       inquiry-popup.css) so this row keeps the same row rhythm as the country rows
       above it instead of reading as a taller, separate component. */
    padding: 5px 10px 5px 36px;
    color: var(--muted, #999);
    font-size: 13px;
    white-space: normal;
}