/* ============================================================
   PLOART PRODUCT CARDS — CSS Completo (sem Tailwind CDN)
   Design de referência: cards brancos com rodapé #f0f4f8
   ============================================================ */

/* === GRID WRAPPER === */
.card-grid-custom {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid-custom {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid-custom {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === CARD CONTAINER === */
.product-card {
  background-color: #ffffff !important;
  border-radius: 1rem !important;       /* rounded-2xl */
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e5e7eb !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  /* Reset any blue backgrounds */
  color: inherit !important;
}

.product-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09) !important;
  transform: translateY(-2px);
}

/* === CARD HEADER (p-5 pb-4) === */
.product-card > div:first-child {
  padding: 1.25rem 1.25rem 1rem 1.25rem !important;
  background-color: #ffffff !important;
}

/* === TITLE (h2 text-lg font-bold text-slate-800) === */
.product-card .ploart-card-title,
.product-card h2 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;   /* slate-800 */
  line-height: 1.4 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* === IMAGE WRAPPER (px-5) === */
.product-card .ploart-card-img-wrap {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  background-color: #ffffff !important;
}

/* === IMAGE (h-64 object-cover rounded-xl) === */
.product-card .ploart-card-img,
.product-card img {
  width: 100% !important;
  height: 16rem !important;   /* h-64 */
  object-fit: cover !important;
  border-radius: 0.75rem !important;  /* rounded-xl */
  display: block !important;
}

/* === FOOTER OUTER (mt-auto p-5) === */
.product-card .ploart-card-footer {
  margin-top: auto !important;
  padding: 1.25rem !important;
  background-color: #ffffff !important;
}

/* === STATUS BADGE CONTAINER (background #f0f4f8, radius bottom) === */
.status-badge-container {
  background-color: #f0f4f8 !important;
  border-radius: 0 0 1rem 1rem !important;
  padding: 1rem !important;
}

/* === DESCRIPTION DIVIDER (border-b border-gray-200 pb-3 mb-3) === */
.product-card .ploart-card-divider {
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* === DESCRIPTION TEXT (text-sm text-slate-500) === */
.product-card .ploart-card-desc,
.status-badge-container p.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;   /* slate-500 */
  margin: 0 !important;
  background-color: transparent !important;
}

/* === BOTTOM ROW (flex items-center justify-between) === */
.product-card .ploart-card-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* === PRAZO GROUP (flex items-center gap-3) === */
.product-card .ploart-card-prazo-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* === CALENDAR ICON BOX (bg-white p-2 rounded-lg border border-gray-100 shadow-sm) === */
.product-card .ploart-card-icon-box {
  background-color: #ffffff !important;
  padding: 0.5rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #f3f4f6 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Green calendar SVG (h-5 w-5 text-green-500) */
.product-card .ploart-card-icon-box svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #22c55e !important;
  stroke: #22c55e !important;
  display: block !important;
}

/* === PRAZO TEXT (text-sm text-slate-600) === */
.product-card .ploart-card-prazo-text {
  font-size: 0.875rem !important;
  color: #475569 !important;   /* slate-600 */
  margin: 0 !important;
  background-color: transparent !important;
}

.product-card .ploart-card-prazo-text span,
.product-card .ploart-card-prazo-text .font-bold {
  font-weight: 700 !important;
  color: #1e293b !important;   /* slate-800 */
}

/* === WHATSAPP BUTTON (bg-slate-200 p-2 rounded-lg text-slate-700) === */
.product-card .ploart-card-wa-btn,
.product-card a.ploart-card-wa-btn {
  background-color: #e2e8f0 !important;   /* slate-200 */
  color: #334155 !important;              /* slate-700 */
  padding: 0.5rem !important;
  border-radius: 0.5rem !important;       /* rounded-lg */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
}

.product-card .ploart-card-wa-btn:hover,
.product-card a.ploart-card-wa-btn:hover {
  background-color: #cbd5e1 !important;   /* slate-300 */
  transform: none !important;
}

/* WhatsApp SVG icon (h-6 w-6) */
.product-card .ploart-card-wa-btn svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: block !important;
  fill: currentColor !important;
}

/* === HARD RESET — prevent parent/global CSS from bleeding in === */
.product-card * {
  box-sizing: border-box !important;
}

/* Force white background on all direct children that might inherit blue */
.product-card > div,
.product-card > div > div {
  background-color: #ffffff;
}

/* But the status-badge-container is the exception: it must stay #f0f4f8 */
.product-card .status-badge-container,
.product-card .ploart-card-desc-wrap {
  background-color: #f0f4f8 !important;
}