/* jaspayaja v36 — search bar sederhana: tipis, polos, responsif.
   (Menggantikan gaya gradien/animasi v34.) Berlaku untuk hero-search-input dan catalog-search-input. */

[data-testid="hero-search-input"],
[data-testid="catalog-search-input"] {
  height: 40px !important;
  padding-left: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--card) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-testid="hero-search-input"]:hover,
[data-testid="catalog-search-input"]:hover {
  border-color: color-mix(in srgb, var(--muted-foreground) 45%, var(--border)) !important;
}

[data-testid="hero-search-input"]:focus,
[data-testid="hero-search-input"]:focus-visible,
[data-testid="catalog-search-input"]:focus,
[data-testid="catalog-search-input"]:focus-visible {
  outline: none;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) !important;
}

/* ikon kaca pembesar kecil & polos, selalu terlihat di atas kolom */
div:has(> [data-testid="hero-search-input"]),
div:has(> [data-testid="catalog-search-input"]) {
  isolation: isolate;
}
div:has(> [data-testid="hero-search-input"]) > svg,
div:has(> [data-testid="catalog-search-input"]) > svg {
  z-index: 2;
  left: 12px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--muted-foreground);
}

/* responsif: di HP kolom hero memenuhi lebar, sejajar dengan tombol Lihat Katalog */
@media (max-width: 639px) {
  div:has(> [data-testid="hero-search-input"]) { max-width: none !important; }
}