/* Custom styles for the PHP frontend */

body.bg-light {
  background-color: #f5f7fb !important;
}

.card-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Grid de produtos (vendas) */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.prod-card {
  cursor: pointer;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.prod-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.prod-img { width: 100%; height: 110px; object-fit: cover; border-top-left-radius: .5rem; border-top-right-radius: .5rem; background:#f8f9fa; }
.prod-body { padding: .5rem .6rem; }
.prod-name { font-size: .9rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-price { font-size: .85rem; color: #495057; }

/* Responsividade: mobile primeiro */
@media (max-width: 576px) {
  /* 2 cards por linha no celular */
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prod-img { height: 120px; }
  .prod-name { font-size: .95rem; }
  .prod-price { font-size: .9rem; }

  /* Empilha campos de pagamento e botões 100% */
  #pays .pay-row > [class^="col-"],
  #pays .pay-row > [class*=" col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #pays .pay-row .d-grid .btn { width: 100%; }
  #btn-add-pay { width: 100%; }
}

@media (min-width: 768px) {
  .prod-img { height: 130px; }
}

@media (min-width: 992px) {
  .prod-img { height: 150px; }
  .prod-name { font-size: 1rem; }
  .prod-price { font-size: 1rem; }
}