/* Shared WP Voices search-control polish. The spinner is an active-state cue, not a resting search icon. */
#wp-voices form:has(input[aria-label="Search voices by name"]) {
  --wpv-search-spinner: #7c3aed;
  position: relative;
}

#wp-voices .ohvo-filter-grid form:has(.ohvo-filter-input) { --wpv-search-spinner: #8ead2d; }
#wp-voices form:has(.lfm-search-input) { --wpv-search-spinner: #8e2de2; }
#wp-voices form:has(.vv-search-input) { --wpv-search-spinner: #713de0; }

/* LFM's adjacent dropdowns resolve to 42px, so its finder needs the same rhythm. */
#wp-voices .lfm-search-input {
  height: 42px !important;
  min-height: 42px !important;
}

/* A placeholder is sufficient at rest; reserve the left inset only while loading. */
#wp-voices form:has(input[aria-label="Search voices by name"]) > div > div.absolute.left-3 {
  display: none !important;
}

/* Supersede the older OHVO-only helper so exactly one spinner is rendered. */
#wp-voices .ohvo-filter-grid form.ohvo-filter-item > div > div:first-child:has(.motion-safe\:animate-spin),
#wp-voices .ohvo-filter-grid form.ohvo-filter-item.ohvo-search-loading::before {
  display: none !important;
}

#wp-voices form:has(input[aria-label="Search voices by name"]) input[aria-label="Search voices by name"] {
  padding-right: 40px !important;
  padding-left: 12px !important;
}

#wp-voices form.wpv-search-loading:has(input[aria-label="Search voices by name"]) input[aria-label="Search voices by name"] {
  padding-left: 40px !important;
}

#wp-voices form.wpv-search-loading > div::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid rgb(127 127 127 / 18%);
  border-top-color: var(--wpv-search-spinner);
  border-radius: 999px;
  transform: translateY(-50%);
  animation: wpv-search-spin 700ms linear infinite;
  pointer-events: none;
}

@keyframes wpv-search-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Keep clearing a name compact, aligned, and available to both mouse and keyboard users. */
#wp-voices form:has(input[aria-label="Search voices by name"]) button[aria-label="Clear voice search"] {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  transform: translateY(-50%);
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
}

#wp-voices form:has(input[aria-label="Search voices by name"]) button[aria-label="Clear voice search"] svg {
  width: 14px !important;
  height: 14px !important;
}

#wp-voices form:has(input[aria-label="Search voices by name"]) button[aria-label="Clear voice search"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}