/* busca.css — lupa do cabeçalho e campo de busca do catálogo.
   Igual nos quatro sites: as cores vêm das variáveis de cada style.css
   (LAIONCE/FOCO usam --brand-*, EDUSET/ALFA usam --azul-*). */
:root {
  --busca-cor: var(--brand-600, var(--azul-600, #0a5cc4));
  --busca-cor-forte: var(--brand-700, var(--azul-700, #004aad));
}

/* ---------- botão da lupa no cabeçalho ---------- */
.busca-abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  flex: none;
  transition: background .2s, color .2s, border-color .2s;
}
.busca-abrir:hover { background: rgba(255,255,255,.24); }
.header.scrolled .busca-abrir { color: var(--ink); border-color: var(--line); background: #fff; }
.header.scrolled .busca-abrir:hover { color: var(--busca-cor); border-color: var(--busca-cor); }
.busca-abrir:focus-visible { outline: 3px solid var(--busca-cor); outline-offset: 2px; }

/* ---------- campo de busca do catálogo (home) ---------- */
.busca-catalogo {
  position: relative;
  max-width: 560px;
  margin: 0 auto 20px;
}
.busca-catalogo > i {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
}
.busca-catalogo input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  padding: 15px 48px 15px 52px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.busca-catalogo input::-webkit-search-cancel-button { display: none; }
.busca-catalogo input:focus { outline: none; border-color: var(--busca-cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--busca-cor) 18%, transparent); }
.busca-catalogo__limpar {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.busca-catalogo__limpar:hover { color: var(--busca-cor); }
.busca-catalogo__total { text-align: center; color: var(--muted); font-size: 14px; margin: -8px 0 24px; }

/* ---------- painel da busca ---------- */
html.busca-aberta { overflow: hidden; }
.busca { position: fixed; inset: 0; z-index: 3000; }
.busca[hidden] { display: none; }
.busca__fundo {
  position: absolute; inset: 0;
  background: rgba(6, 18, 30, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s;
}
.busca__caixa {
  position: relative;
  max-width: 640px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  font-family: var(--font);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .2s, transform .2s;
}
.busca.aberta .busca__fundo { opacity: 1; }
.busca.aberta .busca__caixa { opacity: 1; transform: none; }

.busca__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 22px;
  border-bottom: 1px solid var(--line);
}
.busca__topo > i { font-size: 22px; color: var(--busca-cor); }
.busca__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  padding: 8px 0;
  -webkit-appearance: none;
  appearance: none;
}
.busca__campo::-webkit-search-cancel-button { display: none; }
.busca__fechar {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.busca__chips {
  display: flex;
  gap: 8px;
  padding: 12px 22px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.busca__chips::-webkit-scrollbar { display: none; }
.busca__chips button {
  flex: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.busca__chips button.ativo { background: var(--grad-brand); color: #fff; border-color: transparent; }

.busca__lista {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}
.busca__lista li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
}
.busca__lista li.ativo a { background: var(--bg-soft); }
.busca__ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--bg-softer);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  overflow: hidden;
  flex: none;
}
.busca__ico img { width: 100%; height: 100%; object-fit: cover; }
.busca__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.busca__txt strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.busca__txt small { font-size: 13px; color: var(--muted); }
.busca__preco { font-size: 14px; font-weight: 600; color: var(--busca-cor-forte); white-space: nowrap; }
.busca__preco em { font-style: normal; font-weight: 500; color: var(--muted); }
.busca__seta { font-size: 20px; color: var(--muted); }
.busca__aviso {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.busca__aviso i { display: block; font-size: 32px; margin-bottom: 6px; }
.busca__rodape {
  padding: 10px 22px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.busca__rodape:empty { display: none; }

/* Celular: a busca ocupa a tela inteira, campo no topo e teclado embaixo. */
@media (max-width: 640px) {
  .busca-abrir { width: 40px; height: 40px; font-size: 19px; }
  /* Logo + lupa + botão + menu numa linha. O logo diminui inteiro (a FOCO já
     usava 34px no celular) em vez de ser espremido pelo flex. */
  .header__inner { gap: 10px; }
  .header .brand { flex-shrink: 0; }
  .header .brand img, .header.scrolled .brand img { height: 34px; }
  .header__cta { gap: 8px; }
  .header__cta .btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }
  .busca__caixa {
    margin: 0;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    height: 100dvh;
  }
  .busca__topo { padding: 10px 10px 10px 16px; }
  .busca__chips { padding: 10px 16px; }
  .busca__preco { display: none; }
  .busca-catalogo { margin-bottom: 16px; }
}

@media (max-width: 440px) {
  .header .brand img, .header.scrolled .brand img { height: 30px; }
  .header__cta { gap: 6px; }
  .header__cta .btn i { display: none; }
  .header__cta .btn { padding: 9px 12px; font-size: 13px; }
  .busca-abrir { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .busca__fundo, .busca__caixa { transition: none; }
}