/**
 * Afoomart Product Card System
 * Master e-commerce product card variants, states, badges, ratings, and actions
 */

/* ==================================================
   1. Base Product Card Foundation
   ================================================== */
.af-product-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  padding: var(--space-3);
  height: 100%;
}

.af-product-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ==================================================
   2. Card Media / Image Container
   ================================================== */
.af-product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.af-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.af-product-card:hover .af-product-img {
  transform: scale(1.03);
}

/* Badges Container on Image */
.af-product-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: var(--z-badge);
}

/* Wishlist Action Button Overlay */
.af-product-wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-badge);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.af-product-wishlist-btn:hover {
  color: var(--color-accent);
  background-color: var(--color-surface);
  transform: scale(1.1);
}

.af-product-wishlist-btn.active,
.af-product-wishlist-btn.is-active {
  color: #E31837;
  background-color: var(--color-surface);
}

.af-product-wishlist-btn.active svg,
.af-product-wishlist-btn.is-active svg {
  fill: #E31837;
  stroke: #E31837;
}

/* ==================================================
   3. Card Content & Hierarchy
   ================================================== */
.af-product-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.af-product-seller {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.af-product-seller-official {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
}

/* Prices */
.af-product-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-2);
}

.af-product-price-current {
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.af-product-price-old {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.af-product-discount-pill {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-discount-badge-text);
  background-color: var(--color-discount-badge-bg);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

/* Ratings Component in Card */
.af-product-rating-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.af-product-reviews-count {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* Stock Indicator */
.af-product-stock-info {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Actions at Bottom of Card */
.af-product-action {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* ==================================================
   4. Variant A: Standard Product Card
   ================================================== */
/* Handled by .af-product-card base */

/* ==================================================
   5. Variant B: Flash Sale Product Card
   ================================================== */
.af-product-card-flash {
  border-color: #FCA5A5;
}

.af-product-card-flash:hover {
  border-color: var(--color-accent);
}

.af-flash-progress-wrap {
  margin-bottom: var(--space-2);
}

.af-flash-progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--color-border-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 4px;
}

.af-flash-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}

.af-flash-progress-text {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
}

/* ==================================================
   6. Variant C: Compact Product Card (Widgets, Sidebars, Rails)
   ================================================== */
.af-product-card-compact {
  padding: var(--space-2);
}

.af-product-card-compact .af-product-title {
  font-size: var(--font-size-body-small);
  height: 2.4em;
}

.af-product-card-compact .af-product-price-current {
  font-size: var(--font-size-body);
}

/* ==================================================
   7. Variant D & E: Horizontal Product Card (List View & Search)
   ================================================== */
.af-product-card-horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-4);
}

.af-product-card-horizontal .af-product-media {
  width: 180px;
  min-width: 180px;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

.af-product-card-horizontal .af-product-content {
  flex: 1;
}

.af-product-card-horizontal .af-product-title {
  font-size: var(--font-size-h4);
  height: auto;
  -webkit-line-clamp: 3;
}

@media (max-width: 639px) {
  .af-product-card-horizontal {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .af-product-card-horizontal .af-product-media {
    width: 120px;
    min-width: 120px;
  }
}

/* ==================================================
   8. Card States
   ================================================== */

/* Out of Stock State */
.af-product-card.af-is-out-of-stock {
  opacity: 0.85;
}

.af-product-card.af-is-out-of-stock .af-product-media::after {
  content: "OUT OF STOCK";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
  letter-spacing: 0.05em;
}

/* Featured & Sponsored Badging */
.af-product-card.af-is-sponsored {
  border-top: 2px solid var(--color-primary-dark);
}

/* Loading Skeleton Card */
.af-product-card-skeleton {
  pointer-events: none;
  border-color: var(--color-border-light);
}