/* ============================================================
   Gerador AMLS - Estilos de FRONT-END (cards + comparativo)
   v2.2.1 - carregado no site publico (nao afeta o tema)
   ============================================================ */

/* ======== CARD BASE ======== */
.rg-product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  padding: 20px 25px;
  max-width: 750px;
  margin: 25px auto;
  transition: all .2s ease;
}
.rg-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

.rg-card-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  flex-wrap: nowrap;
}
.rg-card-container figure {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.rg-card-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.rg-card-image { display: none; }

.rg-card-info { flex: 1; }
.rg-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: #0f172a;
  line-height: 1.4;
}

/* ======== BOTOES DO CARD ======== */
.rg-card-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}
.rg-btn {
  display: inline-block;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: opacity .2s ease;
}
.rg-btn:hover { opacity: .9; color: #fff; }
.rg-btn-amazon { background: #ff9900; }
.rg-btn-mercado-livre { background: #ffdd00; color: #333; }
.rg-btn-mercado-livre:hover { color: #333; }
.rg-btn-shopee { background: #ee4d2d; }

/* ======== TABELA COMPARATIVA ======== */
.rg-compare-table-wrap {
  overflow-x: auto;            /* no mobile a tabela rola em vez de espremer */
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}
.rg-compare-table {
  width: 100%;
  min-width: 600px;            /* impede o "amassado": rola em telas estreitas */
  border-collapse: collapse;
  font-size: .97rem;
}
.rg-compare-table th,
.rg-compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}
.rg-compare-table thead th {
  background: #14532d;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.rg-compare-table tbody tr:nth-child(even) { background: #f8fafc; }
/* coluna "Onde comprar" centralizada e sem quebra */
.rg-compare-table th:last-child,
.rg-compare-table td:last-child {
  text-align: center;
  white-space: nowrap;
}
.rg-compare-btn {
  display: inline-block;
  padding: 10px 18px;
  background: #16a34a;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;              /* corrige o botao "amassado" */
  white-space: nowrap;        /* "Ver preco" nao quebra em 2 linhas */
}
.rg-compare-btn:hover { opacity: .9; color: #fff; }

.rg-compare-cards { display: grid; gap: 16px; margin: 16px 0 24px; }

/* ======== RESPONSIVO ======== */
@media (max-width: 700px) {
  .rg-card-container { flex-direction: column; align-items: center; }
  .rg-card-container figure { width: 100%; height: auto; }
  .rg-card-buttons { max-width: 100%; }
}

/* ===== Fix v2.2.2: uniformiza cards dentro do grid comparativo ===== */
/* garante que todos os cards tenham a mesma largura (evita 1 card estreito
   com botoes "amassados") */
.rg-compare-cards .rg-product-card { width: 100%; max-width: 100%; margin: 0 0 16px; }
.rg-compare-cards .rg-card-buttons { max-width: 320px; }