/**
 * baby-compare Design System — components (Phase 4)
 */

/* —— Buttons (canonical) —— */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  min-height: 42px;
  padding: 0 var(--bc-space-4);
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font);
  font-size: var(--bc-text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  transition: transform var(--bc-ease), box-shadow var(--bc-ease), background var(--bc-ease), color var(--bc-ease), border-color var(--bc-ease);
}

.bc-btn:hover {
  text-decoration: none;
}

.bc-btn--primary,
.buy-btn,
.hero-cta--primary {
  background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-dark));
  color: #fff !important;
  border: none;
  box-shadow: 0 3px 12px rgba(255, 107, 0, 0.28);
}

.bc-btn--primary:hover,
.buy-btn:hover,
.hero-cta--primary:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.36);
}

.bc-btn--ghost,
.detail-btn {
  background: var(--bc-bg);
  color: var(--bc-text) !important;
  border: 1px solid var(--bc-border-strong);
}

.bc-btn--ghost:hover,
.detail-btn:hover {
  background: #eef1f5;
  border-color: var(--bc-border-strong);
  color: var(--bc-text) !important;
}

.bc-btn--compare,
.compare-btn--add,
.card-actions .compare-btn--add {
  background: linear-gradient(135deg, var(--bc-compare), #3d8fd9);
  color: #fff !important;
  border: none;
  box-shadow: 0 3px 12px rgba(30, 107, 184, 0.25);
}

.bc-btn--compare:hover,
.compare-btn--add:hover {
  background: linear-gradient(135deg, var(--bc-compare-hover), #2f7fc8);
  color: #fff !important;
  transform: translateY(-1px);
}

.compare-btn.selected,
.bc-btn--compare.is-selected,
.compare-btn--add.selected {
  background: #e2e8f0 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
}

.compare-btn--add::before {
  content: "＋ ";
  font-weight: 800;
}

.compare-btn.selected::before,
.compare-btn--add.selected::before {
  content: "✓ ";
}

/* Legacy compare (listing grid) */
.compare-btn:not(.compare-btn--add) {
  background: var(--bc-compare);
  color: #fff;
  border: none;
  width: 100%;
  padding: 10px;
  border-radius: var(--bc-radius-sm);
  font-weight: 600;
}

.compare-btn:not(.compare-btn--add):hover {
  background: var(--bc-compare-hover);
}

#go-compare-btn {
  display: block;
  width: 100%;
  background: var(--bc-accent);
  color: #fff !important;
  text-align: center;
  padding: var(--bc-space-3);
  border-radius: var(--bc-radius-sm);
  font-weight: 700;
  text-decoration: none;
}

#go-compare-btn:hover {
  background: var(--bc-accent-hover);
  color: #fff !important;
}

/* —— Badges —— */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--bc-text-xs);
  font-weight: 700;
  border-radius: var(--bc-radius-pill);
  line-height: 1.2;
}

.bc-badge--accent {
  background: var(--bc-accent-light);
  color: var(--bc-accent);
}

.bc-badge--compare {
  background: var(--bc-compare-light);
  color: var(--bc-compare);
}

.bc-badge--muted {
  background: var(--bc-bg);
  color: var(--bc-muted);
}

.bc-badge--winner {
  background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-dark));
  color: #fff;
}

.bc-badge--new {
  background: #dbeafe;
  color: #1d4ed8;
}

/* —— Cards —— */
.bc-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow-sm);
  transition: transform var(--bc-ease), box-shadow var(--bc-ease), border-color var(--bc-ease);
}

.bc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bc-shadow-hover);
  border-color: rgba(255, 107, 0, 0.2);
}

.bc-card--featured,
.product-card.featured {
  border: 2px solid var(--bc-accent);
  box-shadow: var(--bc-shadow-hover);
}

/* —— Price pill —— */
.bc-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--bc-text-sm);
  font-weight: 700;
  color: var(--bc-price);
  background: #fff5f5;
  border: 1px solid rgba(230, 0, 35, 0.15);
  border-radius: var(--bc-radius-pill);
}

.card-price {
  font-size: var(--bc-text-lg);
  font-weight: 800;
  color: var(--bc-price);
  font-variant-numeric: tabular-nums;
}

/* —— Tabs (compare page ready) —— */
.bc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
  padding: var(--bc-space-2);
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-pill);
  margin-bottom: var(--bc-space-5);
}

.bc-tabs__item {
  padding: 10px 18px;
  font-size: var(--bc-text-sm);
  font-weight: 600;
  color: var(--bc-muted);
  background: transparent;
  border: none;
  border-radius: var(--bc-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bc-ease), color var(--bc-ease);
}

.bc-tabs__item:hover,
.bc-tabs__item.is-active {
  background: var(--bc-accent-light);
  color: var(--bc-accent);
}

/* —— Card actions stack —— */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2);
  margin-top: auto;
}

.card-actions .detail-btn,
.card-actions .buy-btn,
.card-actions .compare-btn,
.card-actions .bc-btn {
  width: 100%;
  margin-top: 0;
  height: 42px;
}

/* —— Product grid card shell —— */
.product-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: var(--bc-space-4);
  box-shadow: var(--bc-shadow-sm);
  transition: transform var(--bc-ease), box-shadow var(--bc-ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bc-shadow-hover);
}

.listing-product-grid .product-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* —— Hero (shared) —— */
.top-hero,
.listing-hero {
  text-align: center;
  background: linear-gradient(160deg, var(--bc-accent-light) 0%, var(--bc-bg) 55%, var(--bc-surface) 100%);
  padding: var(--bc-space-8) var(--bc-space-5);
  border-radius: var(--bc-radius);
  margin-bottom: var(--bc-space-6);
  border: 1px solid rgba(255, 107, 0, 0.1);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: var(--bc-radius-sm);
  font-size: var(--bc-text-base);
  font-weight: 700;
  text-decoration: none;
}

.hero-cta--secondary {
  background: var(--bc-surface);
  color: var(--bc-accent) !important;
  border: 2px solid var(--bc-accent);
  box-shadow: none;
}

.hero-cta--secondary:hover {
  background: var(--bc-accent-light);
  color: var(--bc-accent-hover) !important;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-3);
  justify-content: center;
}

.top-hero__title,
.top-hero h1 {
  border: none;
  padding-left: 0;
  font-size: var(--bc-text-3xl);
  margin-bottom: var(--bc-space-3);
}

.top-hero .bc-search--hero {
  max-width: 640px;
  margin: 0 auto var(--bc-space-5);
}

/* —— Footer —— */
.site-footer {
  background: #111827;
  color: #e5e7eb;
  margin-top: var(--bc-space-9);
}

.site-footer a {
  color: #cbd5e1;
}

.site-footer a:hover {
  color: #fff;
}

.footer-col h3,
.footer-col h4 {
  color: #f9fafb;
}