/* AFRITRONIC — barras de busca extra no /estoque (02/10/2026)

 *

 * Estilo alinhado com o que o /estoque já usa: cantos 12px, borda #c7cede, o

 * acento da casa em `--acento` quando existe (senão #1A5FFF), altura 42px — a

 * mesma da barra nativa, para as três não parecerem de sítios diferentes.

 *

 * RESPONSIVO, que foi o que o dono pediu («em qualquer dispositivo»):

 *   · ≥ 720px  → input e os dois botões numa linha só.

 *   · < 720px  → input em cima, os dois botões lado a lado por baixo, cada um

 *                com metade da largura (alvos grandes para o dedo).

 *   · < 380px  → botões empilhados, para não espremer o texto.

 * Nada disto depende de hover: em telemóvel o `:active` dá o retorno visual. */



.afri-busca-extra {

  --afri-acento: var(--acento, #1A5FFF);

  margin: 10px 0;

  width: 100%;

  box-sizing: border-box;

}



.afri-busca-extra__form {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: stretch;

  width: 100%;

  box-sizing: border-box;

}



.afri-busca-extra__input {

  flex: 1 1 220px;

  min-width: 0;

  height: 42px;

  padding: 0 14px;

  border: 1px solid #c7cede;

  border-radius: 12px;

  background: #fff;

  color: #14203a;

  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */

  font-family: inherit;

  box-sizing: border-box;

}



.afri-busca-extra__input::placeholder { color: #7b869c; }



.afri-busca-extra__input:focus {

  outline: 2px solid var(--afri-acento);

  outline-offset: 1px;

  border-color: var(--afri-acento);

}



.afri-busca-extra__btn {

  flex: 0 0 auto;

  height: 42px;

  padding: 0 16px;

  border: 1px solid var(--afri-acento);

  border-radius: 12px;

  background: #fff;

  color: var(--afri-acento);

  font-size: 14px;

  font-weight: 600;

  font-family: inherit;

  cursor: pointer;

  white-space: nowrap;

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



.afri-busca-extra__btn:hover { background: #eef3ff; }

.afri-busca-extra__btn:active { background: #dde7ff; }



.afri-busca-extra__btn--site {

  background: var(--afri-acento);

  color: #fff;

}



.afri-busca-extra__btn--site:hover { filter: brightness(0.92); }

.afri-busca-extra__btn--site:active { filter: brightness(0.84); }



/* A do MEIO fica encostada à grelha, com um ar de separador e não de bloco

   solto — para se perceber que é uma continuação da lista, não uma secção nova. */

.afri-busca-extra--meio {

  grid-column: 1 / -1;   /* a grelha é um grid: ocupa a linha toda */

  margin: 18px 0;

  padding-top: 14px;

  border-top: 1px solid #e3e8f2;

}



.afri-busca-extra--meio .afri-busca-extra__form {

  max-width: 720px;

  margin: 0 auto;

}



/* ---------- telemóvel e tablet ---------- */

@media (max-width: 720px) {

  .afri-busca-extra__input { flex: 1 1 100%; }

  .afri-busca-extra__btn { flex: 1 1 calc(50% - 4px); }

}



@media (max-width: 380px) {

  .afri-busca-extra__btn { flex: 1 1 100%; }

}



/* ---------- impressão: um campo de busca não serve para nada no papel ---------- */

@media print {

  .afri-busca-extra { display: none !important; }

}