/* intl-tel-input v29 loads its flag sprite via image-set() using these CSS
 * variables, so we point them at the asset-pipeline URLs (the vendored CSS ships
 * relative `../img/...` paths that don't resolve through the asset pipeline). The
 * globe icon is now an inline SVG baked into the JS, so no globe image is needed.
 *
 * Propshaft rewrites url() references in .css files to their digested
 * /assets/... paths at precompile time. The leading `/` makes each an absolute
 * logical path (a relative path would resolve against this file's own
 * mousewatcher/ directory), so the sprites resolve to the correct digested URLs. */
:root {
  --iti-path-flags-1x: url("/assets/vendor/intl-tel-input/flags-b64c5961.webp");
  --iti-path-flags-2x: url("/assets/vendor/intl-tel-input/flags@2x-9cc6124d.webp");
}

.iti {
  color: var(--dark-gray);
  display: block;
}

.iti__country-container {
  background: none;
  top: 1rem;
}

.iti__selected-country {
  height: 44px;
}

.iti__selected-country-primary {
  padding-left: 10px;
}

/* Hide the "+1" dial code for the default country (US) only. There is no
 * intl-tel-input option to do this conditionally (separateDialCode is global),
 * so we key off the selected flag's country class: when the US flag is selected
 * we hide the dial code; selecting any other country shows a different flag
 * class, so this no longer matches and the dial code is displayed. */
.iti__selected-country:has(.iti__flag.iti__us) .iti__selected-dial-code {
  display: none;
}

/* The dropdown popup is .iti__country-selector (it wraps the search input and
 * the .iti__country-list <ul>). In inline mode v29 gives it a border + shadow
 * and only z-index: 2, which makes it render behind later page elements — so we
 * strip the border/shadow and raise the z-index here. */
.iti--inline-country-selector .iti__country-selector {
  border: none;
  box-shadow: none;
  margin-top: -1px;
}

.iti__country-selector {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 999 !important;
}

/* v29 positions the inline dropdown with a JS-set inline `top` of
 * `input height + 3px` (~65px here); there is no option to configure that offset,
 * so we override it (requires !important to beat the inline style). The library
 * sets inline `top` only for the default "below the input" placement and inline
 * `bottom` when it flips above, so we scope via [style*="top:"] to leave the
 * flip-above case untouched. The :not(.iti--detached-country-selector) mirrors
 * the library's own inline-positioning selector. */
.iti--inline-country-selector:not(.iti--detached-country-selector)
  .iti__country-selector[style*="top:"] {
  top: 45px !important;
}

.iti--has-country-selector
  .iti__country-container:not(:has(+ input[disabled])):not(
    :has(+ input[readonly])
  )
  .iti__selected-country-primary:hover,
.iti--has-country-selector
  .iti__country-container:not(:has(+ input[disabled])):not(
    :has(+ input[readonly])
  )
  .iti__selected-country:has(+ .iti__country-selector:hover)
  .iti__selected-country-primary {
  background: none;
}

.iti__search-input-wrapper {
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
}

.iti__search-input {
  font-size: 100%;
  outline: none !important;
  padding: 10px 9px 10px 32px;
}

.iti__search-clear:hover,
.iti__search-clear:focus-visible {
  background: none;
}

.iti__country {
  border-bottom: 1px solid var(--border-gray);
  padding: 12.5px 8px;
}

.iti__country.iti__highlight {
  background-color: var(--light-blue);
  color: var(--white);
}

.iti__country.iti__highlight .iti__dial-code {
  color: var(--white);
  opacity: 0.75;
}