/* =============================================================
   IMS Marketplace — Design System Components (v2)
   Reusable .ims-* classes built on ims-tokens.css.
   Namespaced to avoid clashing with WP themes.
   ============================================================= */

/* ── Buttons ──────────────────────────────────────────────── */
.ims-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-btn);
  background: var(--color-primary);
  color: var(--text-on-color);
}
.ims-btn:hover       { background: var(--color-primary-hover); color: #fff; }
.ims-btn:active      { transform: var(--press-translate); }
.ims-btn:disabled,
.ims-btn.is-disabled { opacity: .6; cursor: not-allowed; }

.ims-btn--accent  { background: var(--color-accent); }
.ims-btn--accent:hover { background: var(--color-accent-hover); }
.ims-btn--ai      { background: #7c3aed; }
.ims-btn--ai:hover{ background: #6d28d9; color:#fff; }
.ims-btn--danger  { background: var(--color-danger); }
.ims-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-form) solid var(--color-primary);
}
.ims-btn--outline:hover { background: var(--surface-tint); color: var(--color-primary); }
.ims-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: var(--border-width-form) solid var(--border-default);
}
.ims-btn--ghost:hover { background: var(--surface-sunken); color: var(--text-body); }
.ims-btn--sm   { padding: 7px 14px; font-size: var(--text-sm); }
.ims-btn--lg   { padding: 14px 22px; font-size: var(--text-md); }
.ims-btn--full { width: 100%; }

/* ── Cards & surfaces ─────────────────────────────────────── */
.ims-card {
  background: var(--surface-card);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.ims-card--flush { padding: 0; }
.ims-card--tint  { background: var(--surface-tint); border-color: var(--ims-blue-200); }
.ims-card--sunken{ background: var(--surface-sunken); box-shadow: none; }

/* status-railed card (trials) */
.ims-railcard { position: relative; }
.ims-railcard::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--rail-width);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--rail, var(--color-primary));
}
.ims-rail--active    { --rail: var(--color-accent); }
.ims-rail--pending   { --rail: var(--color-warning); }
.ims-rail--expired   { --rail: var(--color-danger); }
.ims-rail--deployed  { --rail: #7c3aed; }
.ims-rail--suspended { --rail: var(--color-warning); }

/* ── Badges & pills ───────────────────────────────────────── */
.ims-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-badge);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-body);
}
.ims-badge--active    { background: var(--ims-green-50);  color: var(--ims-green-600); }
.ims-badge--staging   { background: var(--ims-blue-50);   color: var(--ims-blue-700); }
.ims-badge--live      { background: #f3e8ff;              color: #7c3aed; }
.ims-badge--pending   { background: var(--ims-amber-50);  color: var(--ims-amber-500); }
.ims-badge--expired   { background: var(--ims-red-50);    color: var(--ims-red-500); }
.ims-badge--suspended { background: var(--ims-amber-50);  color: var(--ims-amber-500); }
.ims-badge--auto      { background: #f3e8ff;              color: #7e22ce; }
.ims-badge--manual    { background: var(--ims-amber-50);  color: #92400e; }

/* ── Form controls ────────────────────────────────────────── */
.ims-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.ims-input, .ims-select, .ims-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-body);
  padding: 9px 12px;
  background: var(--surface-card);
  border: var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ims-textarea { line-height: var(--leading-base); resize: vertical; }
.ims-input:focus, .ims-select:focus, .ims-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.ims-input--error { border-color: var(--color-danger); }
.ims-input--ok    { border-color: var(--color-accent); }
.ims-hint  { font-size: var(--text-xs); color: var(--text-faint); margin-top: 4px; }

/* ── Notices ──────────────────────────────────────────────── */
.ims-notice {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}
.ims-notice--info    { background: var(--ims-blue-50);  border-color: var(--ims-blue-200); color: var(--ims-blue-700); }
.ims-notice--success { background: var(--ims-green-50); border-color: #bbf7d0;             color: var(--ims-green-600); }
.ims-notice--warn    { background: var(--ims-amber-50); border-color: #fde68a;             color: #92400e; }
.ims-notice--error   { background: var(--ims-red-50);   border-color: var(--ims-red-100);  color: var(--ims-red-500); }

/* ── Spinner ──────────────────────────────────────────────── */
.ims-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid var(--ims-blue-100);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ims-spin .8s linear infinite;
}

/* ── Credential box ───────────────────────────────────────── */
.ims-credbox {
  background: var(--surface-sunken);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── AI panel signature surface ───────────────────────────── */
.ims-ai-surface {
  background: linear-gradient(135deg, #faf5ff, #eff6ff);
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.ims-ai-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: #6d28d9; }

/* ── Progress bar ─────────────────────────────────────────── */
.ims-progress {
  background: var(--ims-blue-100);
  border-radius: var(--radius-pill);
  height: 10px;
  overflow: hidden;
}
.ims-progress__fill {
  height: 100%;
  background: var(--ims-term-grad);
  border-radius: var(--radius-pill);
  transition: width .6s var(--ease);
}

/* ── Eyebrow / section divider ────────────────────────────── */
.ims-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-faint);
  font-weight: var(--weight-semibold);
}

/* ── Utility ──────────────────────────────────────────────── */
.ims-stack > * + * { margin-top: var(--space-4); }
.ims-row   { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.ims-muted { color: var(--text-muted); }
.ims-mono  { font-family: var(--font-mono); }