/* NFT Zone UI Kit — Frost Pill Search 02B.
   Load after shared.css and before page CSS. The page owns field geometry;
   this component owns appearance and never controls search behavior. */
.ui-search {
  --search-glass: color-mix(in srgb, var(--bg-surface-1) 82%, transparent);
  --search-focus-border: linear-gradient(110deg, #ab7bf5, #7dd2ed);
  --search-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    0 4px 12px rgba(0, 0, 0, .06);
  --search-focus-shadow:
    inset 0 1px rgba(255, 255, 255, .06),
    0 0 0 3px color-mix(in srgb, var(--accent-violet) 10%, transparent),
    0 7px 16px rgba(0, 0, 0, .09);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--search-glass);
  color: var(--text-muted);
  box-shadow: var(--search-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

/* Light keeps the original gradient and only reduces the outer shadows. */
[data-theme="light"] .ui-search {
  --search-shadow:
    inset 0 1px rgba(255, 255, 255, .5),
    0 2px 6px rgba(15, 23, 42, .025);
  --search-focus-shadow:
    inset 0 1px rgba(255, 255, 255, .5),
    0 0 0 2px color-mix(in srgb, var(--accent-violet) 4%, transparent),
    0 3px 8px rgba(15, 23, 42, .035);
}

.ui-search:hover {
  border-color: var(--border-subtle-hover);
  color: var(--accent-cyan);
}

.ui-search:focus-within {
  border-color: transparent;
  background:
    linear-gradient(var(--search-glass), var(--search-glass)) padding-box,
    var(--search-focus-border) border-box;
  box-shadow: var(--search-focus-shadow);
  color: var(--accent-cyan);
}

.ui-search > svg {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* One focus border belongs to the whole field, including its clear action. */
.ui-search input,
.ui-search input:focus,
.ui-search input:focus-visible {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  text-overflow: ellipsis;
}

.ui-search input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.ui-search > button {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.ui-search > button:hover,
.ui-search > button:focus-visible {
  outline: none;
  background: var(--bg-hover);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .ui-search input { font-size: 13px; }
}

/* Gradients/shadows may be suppressed in high contrast; keep one outer ring. */
@media (forced-colors: active) {
  .ui-search:focus-within {
    background: Canvas;
    border-color: transparent;
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-search, .ui-search > button { transition: none; }
}