/* TVB Search — scoped dropdown. Uses the theme's own tokens; adds no new colors.
   Everything lives under .tvb-search-overlay so nothing leaks into the theme. */

/* reveal the theme's existing header search icon on phones (theme hides it <=640px).
   The theme's hide rule is .header-actions .icon-btn[...] (0,3,0). Enqueue order is
   not guaranteed to favor us, so we win on specificity instead: the extra .site-header
   ancestor makes this (0,4,0), which beats the theme rule no matter what loads first. */
@media (max-width: 640px) {
  .site-header .header-actions .icon-btn[aria-label="Search"] { display: inline-flex; }
}

.tvb-search-overlay { position: fixed; inset: 0; z-index: 1000; }
.tvb-search-overlay[hidden] { display: none; }

.tvb-search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }

.tvb-search-panel {
  position: absolute; left: 0; right: 0; top: var(--tvbs-top, 96px);
  background: var(--surface, #0d0d15);
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.tvb-search-form {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto; padding: 14px 20px;
}
.tvb-search-ico { display: flex; color: var(--text-3, rgba(255, 255, 255, 0.42)); flex: none; }
.tvb-search-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text, #f4f6f8); font-family: inherit; font-size: 1rem; padding: 6px 2px;
}
.tvb-search-input::placeholder { color: var(--text-4, rgba(255, 255, 255, 0.28)); }
.tvb-search-close {
  background: none; border: 0; cursor: pointer; line-height: 1;
  color: var(--text-3, rgba(255, 255, 255, 0.42)); font-size: 26px; padding: 0 4px; flex: none;
}
.tvb-search-close:hover { color: var(--text, #f4f6f8); }

.tvb-search-results {
  max-width: 720px; margin: 0 auto; padding: 0 20px 14px;
  max-height: 62vh; overflow-y: auto;
}

.tvb-search-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  color: var(--text, #f4f6f8); text-decoration: none;
}
.tvb-search-row:hover { background: rgba(255, 255, 255, 0.03); }
.tvb-search-thumb {
  width: 46px; height: 46px; flex: none; overflow: hidden;
  background: var(--surface-2, #12121c); border-radius: var(--radius, 2px);
}
.tvb-search-thumb img { width: 46px; height: 46px; object-fit: cover; display: block; }
.tvb-search-body { flex: 1; min-width: 0; }
.tvb-search-name {
  display: block; font-weight: 600; font-size: 0.95rem; color: var(--text, #f4f6f8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvb-search-cat {
  display: block; margin-top: 2px;
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3, rgba(255, 255, 255, 0.42));
}
.tvb-search-meta { flex: none; text-align: right; }
.tvb-search-price { color: var(--text, #f4f6f8); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.tvb-search-oos {
  display: block; margin-top: 3px;
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--danger, #ef4444);
}

.tvb-search-none { padding: 22px 6px; color: var(--text-3, rgba(255, 255, 255, 0.42)); font-size: 0.9rem; }
.tvb-search-all {
  display: block; padding: 13px; text-align: center; text-decoration: none;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan, #00c9c8);
}
.tvb-search-all:hover { background: var(--cyan-soft, rgba(0, 201, 200, 0.12)); }

@media (max-width: 640px) {
  .tvb-search-form { padding: 12px 16px; }
  .tvb-search-results { padding: 0 16px 14px; max-height: 70vh; }
}