/**
 * Карточка — базовая белая панель со скруглением и рамкой.
 *   <div class="card"> … </div>
 *   <div class="card card--pad-lg card--sticky"> … </div>
 */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card--pad-sm { padding: var(--space-4); }
.card--pad-lg { padding: var(--space-6); }
.card--flush  { padding: 0; overflow: hidden; }

.card--bordered { border-color: var(--color-border); }
.card--subtle   { background: var(--color-surface-subtle); border-color: var(--color-border); }
.card--shadow   { box-shadow: var(--shadow-sm); border-color: transparent; }

.card--hover {
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

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

.card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
}

.card__body > :last-child {
  margin-bottom: 0;
}

/* ── Плашки-уведомления ──────────────────────────────── */

.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.notice--error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.notice--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.notice--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.notice p {
  margin: 0 0 var(--space-1);
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ── Бейджи ──────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.badge--sale    { background: var(--color-sale); color: var(--color-text-invert); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--primary { background: var(--color-primary-light); color: var(--color-primary); }