/* ==========================================================================
   Component: Card
   .card base, .card--panel, .card--listing
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Card
   --------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--border-default);
}

/* ---------------------------------------------------------------------------
   Card Sections
   --------------------------------------------------------------------------- */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-muted);
  min-height: 40px;
}

.card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.card__body {
  padding: var(--space-4);
}

.card__body--flush {
  padding: 0;
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-muted);
}

/* ---------------------------------------------------------------------------
   Panel Card — elevated background for sidebar sections
   --------------------------------------------------------------------------- */
.card--panel {
  background-color: var(--bg-elevated);
  border-color: var(--border-default);
  border-radius: var(--radius-md);
}

.card--panel .card__header {
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
}

.card--panel .card__body {
  padding: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Listing Card — for NFT / token listing items
   --------------------------------------------------------------------------- */
.card--listing {
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.card--listing:hover {
  border-color: var(--accent);
  background-color: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card--listing:active {
  transform: translateY(0);
}

.card--listing.is-selected {
  border-color: var(--accent);
  background-color: var(--accent-subtle);
  box-shadow: 0 0 0 1px var(--accent);
}

.card--listing.is-buying {
  border-color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.card--listing.is-bought {
  border-color: var(--color-success);
  opacity: 0.6;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Stat Card (small stat display)
   --------------------------------------------------------------------------- */
.card--stat {
  padding: var(--space-3);
  text-align: center;
}

.card--stat .card__value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.card--stat .card__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card--listing {
    transition: none;
  }

  .card--listing:hover {
    transform: none;
  }
}