:root{--bg:#0b0b0b;--card:#111;--accent:#f5c542;--text:#efefef}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.header{display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(90deg,#000,#111)}
.logo{height:44px}
.container{max-width:980px;margin:18px auto;padding:12px}
.card{background:var(--card);border-radius:12px;padding:14px;margin:12px 0}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:#000;border-radius:10px;text-decoration:none;font-weight:700}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.product{background:linear-gradient(180deg,#141414,#0f0f0f);border-radius:10px;padding:12px;text-align:center}
.product img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.form-row{margin-bottom:10px}
.input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #222;background:#0c0c0c;color:var(--text)}
.small{font-size:0.9rem;color:#ccc}
.footer{padding:12px;text-align:center;color:#aaa;font-size:13px}
.nav{display:flex;gap:10px}
@media (max-width:600px){.product img{height:120px}}

/* Botão quando o produto já está no carrinho */
.btn-cart.added {
  background-color: #FF0000 !important;
  color: #fff !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-cart.added:hover {
  transform: scale(1.05);
}

.btn-cart {
  transition: all 0.2s ease-in-out;
}

/* ======= Botão "Ver Pedido" com animação contínua ======= */
#btn-ver-pedido {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito pulsante enquanto o carrinho tiver itens */
#btn-ver-pedido.pulsando {
  animation: pulseGlowInfinite 1.2s ease-in-out infinite;
}

@keyframes pulseGlowInfinite {
   0% { transform: scale(1) rotate(0deg); background-color: #ffb300; box-shadow: 0 0 8px rgba(255, 200, 0, 0.7); }
  25% { transform: scale(1.08) rotate(-2deg); background-color: #ffc107; }
  50% { transform: scale(1.12) rotate(2deg); background-color: #ffd54f; box-shadow: 0 0 20px rgba(255, 255, 0, 1); }
  75% { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); background-color: #ffb300; box-shadow: 0 0 8px rgba(255, 200, 0, 0.7); }
}

.filter-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-buttons .btn {
  background-color: #f8c946;
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 6px 12px; /* 👈 reduz espaço interno */
  font-size: 14px;   /* 👈 texto um pouco menor */
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.filter-buttons .btn:hover {
  background-color: #ffd95a;
  transform: scale(1.05);
}