/*
 * ClipFender Stage 15 — runtime-confirmed archive search-field fix.
 * Root cause confirmed in Chromium: .cf4-search-field contained an inline
 * SVG with no active size/stroke contract, so its intrinsic SVG viewport was
 * laid out at the full querybar width (~1136px) and its default black fill
 * created the giant black circle. These rules constrain the actual element.
 */
body.cf4-active .cf4-querybar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, auto) !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.cf4-active .cf4-search-field {
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(200,155,60,.22) !important;
  background: #080c0e !important;
}

body.cf4-active .cf4-search-field > svg,
body.cf4-active .cf4-search-field svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: #b99658 !important;
}

body.cf4-active .cf4-search-field > svg circle {
  fill: none !important;
  stroke: currentColor !important;
}

body.cf4-active .cf4-search-field > svg path {
  fill: none !important;
  stroke: currentColor !important;
}

body.cf4-active .cf4-search-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #e9dfce !important;
  box-shadow: none !important;
}

body.cf4-active .cf4-results-head .cf4-signet img {
  image-rendering: auto !important;
}

@media (max-width: 980px) {
  body.cf4-active .cf4-querybar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}

@media (max-width: 700px) {
  body.cf4-active .cf4-querybar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.cf4-active .cf4-search-field {
    width: 100% !important;
  }
}