/* =============================================================
   WowCodes — Shared Product Card component
   Pairs with includes/product-card.php. Self-contained: relies only
   on the CSS variables already defined in shared.css's :root.
   ============================================================= */

.wc-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.wc-card {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.wc-card:hover {
  border-color: rgba(240,165,0,0.35);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,165,0,0.08);
}

.wc-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.wc-card-header { padding: 24px 24px 18px; }

.wc-card-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 14px;
}
.wc-badge-php { background: rgba(240,165,0,0.12); color: var(--amber); }
.wc-badge-wordpress { background: rgba(26,188,138,0.12); color: var(--teal); }

.wc-card-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.wc-card:hover .wc-card-icon { transform: scale(1.06); }

.wc-card-name {
  font-family: 'Fraunces', serif; font-size: 21px; line-height: 1.15;
  color: var(--text); margin-bottom: 5px;
}
.wc-card-tagline { font-size: 13px; color: var(--text2); margin-bottom: 14px; }

.wc-card-features { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.wc-card-features li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); }
.wc-card-features li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

.wc-card-stats {
  background: var(--bg3); border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border);
  padding: 10px 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text3);
}
.wc-stars { color: var(--amber); font-size: 12px; letter-spacing: 0.5px; }
.wc-stat-sep { color: var(--text3); }
.wc-stat-customers strong { unicode-bidi: isolate; }

.wc-card-footer { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }

.wc-card-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* One flex item, not two: the price span sits inside the translated "from
   {price}" sentence, so the spacing around it comes from the string. Languages
   that suffix the price ("$29-tól") need it glued, which a flex gap can't do. */
.wc-price-label { font-size: 10px; color: var(--text3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* unicode-bidi: isolate is load-bearing in ar/ur. The price used to be its own
   flex item, hence its own bidi paragraph, so "$29" resolved LTR. Now that it
   sits inside an Arabic sentence, UBA rule W2 retypes the digits as AN and the
   "$" lands on the wrong side — "29$". Isolating gives it sos=R rather than AL,
   which keeps the digits EN and the sign in front. Same reason on the stats row.
   Any LTR-only fragment injected by wc_t_markup() needs this. */
.wc-price-value {
  font-family: 'Fraunces', serif; font-size: 24px; color: var(--text); line-height: 1;
  letter-spacing: normal; text-transform: none; font-weight: 400;
  unicode-bidi: isolate;
}
.wc-price-credit { font-size: 10.5px; color: var(--teal); font-weight: 600; }

/* Buy Now / Learn more — always side by side, mobile and desktop. */
.wc-card-actions { display: flex; gap: 8px; }
.wc-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-family: 'DM Sans', sans-serif;
  padding: 10px 10px; border-radius: 999px; border: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s, border-color 0.15s, color 0.15s, background 0.15s;
}
.wc-btn-primary {
  background: linear-gradient(135deg, #ffc233, var(--amber)); color: #0d0d0d; font-weight: 600;
  box-shadow: 0 6px 18px rgba(240,165,0,0.3);
}
.wc-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(240,165,0,0.45); }
.wc-btn-primary:active { transform: scale(0.97); }
.wc-btn-secondary {
  background: transparent; color: var(--text2); font-weight: 500;
  border: 0.5px solid var(--border2);
}
.wc-btn-secondary:hover { border-color: rgba(255,255,255,0.25); color: var(--text); background: rgba(255,255,255,0.05); }
.wc-btn-secondary:active { transform: scale(0.97); }

@media (max-width: 380px) {
  .wc-btn { font-size: 12.5px; padding: 10px 6px; }
}