/* public/css/fm/searchbar.css
 *
 * fm-searchbar (DS #2) — consolida blog-search + mm-search + search_* numa só.
 * Autocontido (o skin pode coexistir nas páginas template): define box-sizing,
 * fontes, cores e reset de input/button nos próprios fm-*. Consome tokens fm.
 */
.fm-searchbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--fm-space-2);
  width: 100%;
  max-width: 30rem;
  font-family: var(--fm-font-body);
  transition: border-color 0.15s, background 0.15s;
}
.fm-searchbar * {
  box-sizing: border-box;
}

.fm-searchbar-icon {
  flex: 0 0 auto;
  color: var(--fm-gray-300);
}

.fm-searchbar-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--fm-font-body);
  color: var(--fm-navy);
  line-height: 1.3;
}
.fm-searchbar-input::placeholder {
  color: var(--fm-gray-300);
}
.fm-searchbar-input:focus {
  outline: none;
}

.fm-searchbar-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fm-gray-300);
  cursor: pointer;
  transition: color 0.15s;
}
.fm-searchbar-clear:hover {
  color: var(--fm-navy);
}

/* —— variante OUTLINE (blog/mapa): branco, borda fina, foco teal —— */
.fm-searchbar--outline {
  background: var(--fm-white);
  border: 1px solid var(--fm-gray-100);
  border-radius: 10px;
}
.fm-searchbar--outline:focus-within {
  border-color: var(--fm-teal);
}

/* —— variante FILLED (hub): pílula cinza, ícone destacado, foco teal —— */
.fm-searchbar--filled {
  background: #ebebeb;
  border: 1px solid var(--fm-gray-100);
  border-radius: var(--fm-radius-pill);
}
.fm-searchbar--filled:focus-within {
  border-color: var(--fm-teal);
}
.fm-searchbar--filled .fm-searchbar-icon {
  order: 9; /* ícone à direita, como no hub */
  color: var(--fm-gray-500);
}

/* —— tamanhos —— */
.fm-searchbar--md {
  padding: 11px 14px;
}
.fm-searchbar--md .fm-searchbar-input {
  font-size: 15px;
}
.fm-searchbar--sm {
  padding: 8px 12px;
}
.fm-searchbar--sm .fm-searchbar-input {
  font-size: 13px;
}
.fm-searchbar--filled.fm-searchbar--md {
  padding: 8px 8px 8px 18px;
}