/* Components - Tactical Design System */

/* Badges */
.product-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-family-heading);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.badge-on-demand,
.product-badge.on-demand {
  background: var(--t-primary-container);
  color: var(--t-on-primary-cont);
}

.badge-sold-out,
.product-badge.soldout {
  background: var(--t-surface-high);
  color: var(--t-on-surface-muted);
}

.product-badge.sale {
  background: rgba(var(--t-primary-rgb), 0.12);
  color: var(--t-primary);
  border: 1px solid rgba(var(--t-primary-rgb), 0.3);
}

/* Availability labels */
.availability-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.availability-status.available {
  color: var(--t-primary);
}

.availability-status.on-demand {
  color: var(--t-warning);
}

.availability-status.not-available {
  color: var(--t-on-surface-muted);
}

/* Alert variants */
.alert {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border-left: 3px solid;
}

.alert-success {
  background: rgba(76, 214, 255, 0.08);
  border-left-color: var(--t-primary);
  color: var(--t-primary);
}

.alert-error {
  background: rgba(255, 180, 171, 0.08);
  border-left-color: var(--t-error);
  color: var(--t-error);
}

/* Section label (eyebrow text) */
.section-label {
  display: inline-block;
  font-family: var(--font-family-heading);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--t-primary);
  margin-bottom: 1rem;
}



/* Muted text */
.muted-text {
  color: var(--t-on-surface-muted);
}

/* Separator */
.separator {
  border: none;
  border-top: 1px solid rgba(62, 73, 73, 0.15);
  margin: 2rem 0;
}

/* Loading state */
.cart-loading {
  text-align: center;
  padding: 3rem;
  color: var(--t-on-surface-muted);
}

/* No products */
.no-products {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--t-on-surface-muted);
}

/* ==========================================================================
   Card Component (.card)
   Used by app/views/components/_card.html.erb
   ========================================================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--text-main);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

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

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

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

.card--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

/* ── Badges ─────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--neutral {
  background: var(--neutral-bg);
  color: var(--neutral-text);
}

.badge--success {
  background: var(--success-bg);
  color: var(--success-text);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge--error {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info-text);
}