/* === HEADER COM BARRA DE PESQUISA CENTRAL === */

/* Organiza o header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  position: relative;
}

/* Centraliza o formulário de busca */
.header__search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 500px;
  display: flex;
}

/* Campo de texto da busca */
.header__search input {
  flex: 1;
  padding: 10px 15px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 25px 0 0 25px;
  outline: none;
}

/* Botão da busca */
.header__search button {
  padding: 0 18px;
  border: 2px solid #333;
  border-left: none;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.header__search button:hover {
  background-color: #555;
}

/* Ícones do lado direito */
.header__links {
  display: flex;
  align-items: center;
  gap: 15px;
}


/* === BOTÕES PADRÃO ARREDONDADOS COM HOVER === */

/* Todos os botões principais */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
  border-radius: 25px !important;   /* arredonda */
  padding: 10px 20px;
  transition: all 0.3s ease;        /* efeito suave */
}

/* Hover em todos os botões */
button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #007bff !important; /* azul destaque */
  color: #fff !important;               /* texto branco */
  transform: scale(1.05);               /* cresce levemente */
}

/* Botão de compra específico */
.buy-button {
  border-radius: 25px !important;
  transition: all 0.3s ease;
}

.buy-button:hover {
  background-color: #28a745 !important; /* verde no hover */
  color: #fff !important;
  transform: scale(1.05);
}

/* Botão do carrinho */
.cart__button {
  border-radius: 25px !important;
  transition: all 0.3s ease;
}

.cart__button:hover {
  background-color: #ff6600 !important; /* laranja no hover */
  color: #fff !important;
  transform: scale(1.05);
}

