/* Card Component Styles */

.card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--bels-shadow-rgb), 0.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  background-color: var(--bels-light-bg);
  border-bottom: 1px solid rgba(var(--bels-shadow-rgb), 0.08);
  font-weight: 600;
  color: var(--bels-primary);
}

/* User cards for mobile */
.user-card {
  background-color: var(--bels-white);
  border: 1px solid rgba(var(--bels-shadow-rgb), 0.08);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.user-card .card-body {
  color: var(--bels-text);
}

.user-card:hover {
  background-color: var(--bels-light-bg);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Product cards */
.product-card {
  transition: all 0.3s ease;
  border: 1px solid var(--bels-border);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--bels-shadow-rgb), 0.1);
}

.product-card .card-img-top {
  height: 150px;
  object-fit: cover;
  overflow: hidden;
}

.product-card .card-img-placeholder {
  height: 150px;
  background-color: var(--bels-light-bg);
}

/* Quantity badges for products */
.quantity-badge {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}