/* =============================================================================
   Okommerce — Components
   Buttons, cards, KPI blocks, badges, forms, pills.
   ============================================================================= */

/* =============================================================================
   Buttons — pill shape, 24px radius locked
   ============================================================================= */

.ok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--ok-radius-pill);
  padding: 13px 24px;
  font-family: var(--ok-font-sans);
  font-size: var(--ok-text-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.ok-btn:active { transform: translateY(1px); }
.ok-btn:focus-visible {
  outline: 2px solid var(--ok-primary);
  outline-offset: 2px;
}

/* Primary — deep teal */
.ok-btn-primary {
  background: var(--ok-primary);
  color: var(--ok-ink-on-teal);
}
.ok-btn-primary:hover { background: var(--ok-primary-hover); color: white; }

/* Secondary — outline */
.ok-btn-secondary {
  background: var(--ok-paper);
  color: var(--ok-primary);
  border: 1.5px solid var(--ok-primary);
}
.ok-btn-secondary:hover { background: var(--ok-primary-tint); }

/* Ghost — text only */
.ok-btn-ghost {
  background: transparent;
  color: var(--ok-primary);
}
.ok-btn-ghost:hover { background: var(--ok-primary-tint); }

/* Coral — for emphasis */
.ok-btn-coral {
  background: var(--ok-coral);
  color: var(--ok-ink-on-coral);
}
.ok-btn-coral:hover { background: #C44530; color: white; }

/* Amber — recommended path */
.ok-btn-amber {
  background: var(--ok-amber);
  color: var(--ok-ink-on-amber);
}
.ok-btn-amber:hover { background: #C77E1D; color: var(--ok-ink-on-amber); }

/* Success — for download */
.ok-btn-success {
  background: var(--ok-success);
  color: white;
}
.ok-btn-success:hover { background: #207056; color: white; }

/* Sizes */
.ok-btn-sm { padding: 8px 16px; font-size: var(--ok-text-sm); }
.ok-btn-lg { padding: 16px 32px; font-size: var(--ok-text-base); }

/* Block — full width */
.ok-btn-block { width: 100%; }

/* Arrow that slides on hover */
.ok-btn .ok-btn-arrow {
  transition: transform 0.15s ease;
  display: inline-block;
}
.ok-btn:hover .ok-btn-arrow { transform: translateX(3px); }

/* =============================================================================
   Cards
   ============================================================================= */

.ok-card {
  background: var(--ok-paper);
  border: 1px solid var(--ok-border);
  border-radius: var(--ok-radius-lg);
  padding: var(--ok-s-6);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.ok-card-hover:hover {
  border-color: var(--ok-mint-deep);
  box-shadow: var(--ok-shadow-card);
}
.ok-card-cream { background: var(--ok-cream); }

/* Tinted cards */
.ok-card-mint  { background: var(--ok-mint);   border-color: var(--ok-mint-deep); }
.ok-card-peach { background: var(--ok-peach);  border-color: #F0DDC8; }
.ok-card-teal  {
  background: var(--ok-teal);
  border-color: var(--ok-teal);
  color: var(--ok-ink-on-teal);
}
.ok-card-teal h1, .ok-card-teal h2, .ok-card-teal h3, .ok-card-teal h4 { color: white; }

/* =============================================================================
   KPI / Metric blocks — the signature visual
   ============================================================================= */

.ok-kpi {
  border-radius: var(--ok-radius-lg);
  padding: var(--ok-s-5);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ok-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ok-tracking-wider);
  text-transform: uppercase;
  opacity: 0.85;
}
.ok-kpi-value {
  font-size: var(--ok-text-3xl);
  font-weight: 800;
  letter-spacing: var(--ok-tracking-snug);
  line-height: 1;
}
.ok-kpi-value-suffix {
  font-size: var(--ok-text-lg);
  opacity: 0.85;
  font-weight: 600;
}
.ok-kpi-detail {
  font-size: var(--ok-text-xs);
  opacity: 0.9;
  margin-top: 6px;
  line-height: 1.4;
}

/* KPI variants */
.ok-kpi-teal  { background: var(--ok-teal);  color: var(--ok-ink-on-teal); }
.ok-kpi-coral { background: var(--ok-coral); color: var(--ok-ink-on-coral); }
.ok-kpi-amber { background: var(--ok-amber); color: var(--ok-ink-on-amber); }
.ok-kpi-blue  { background: var(--ok-blue);  color: var(--ok-ink-on-blue); }

/* =============================================================================
   Badges & pills
   ============================================================================= */

.ok-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ok-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ok-tracking-wide);
  text-transform: uppercase;
}
.ok-badge-mint   { background: var(--ok-mint);  color: var(--ok-teal); }
.ok-badge-success{ background: var(--ok-success-soft); color: var(--ok-success); }
.ok-badge-amber  { background: var(--ok-amber); color: var(--ok-ink-on-amber); }
.ok-badge-coral  { background: var(--ok-coral-soft); color: var(--ok-coral); }
.ok-badge-blue   { background: var(--ok-blue-soft); color: var(--ok-blue); }
.ok-badge-peach  { background: var(--ok-peach); color: var(--ok-warning); }
.ok-badge-dark   { background: var(--ok-ink); color: white; }

.ok-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* =============================================================================
   Forms
   ============================================================================= */

.ok-field { display: block; margin-bottom: var(--ok-s-4); }
.ok-label {
  display: block;
  font-size: var(--ok-text-sm);
  font-weight: 600;
  color: var(--ok-ink);
  margin-bottom: 6px;
}
.ok-label-req::after { content: ' *'; color: var(--ok-coral); }

.ok-input,
.ok-select,
.ok-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--ok-text-md);
  color: var(--ok-ink);
  background: var(--ok-paper);
  border: 1px solid var(--ok-border-strong);
  border-radius: var(--ok-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ok-input:hover,
.ok-select:hover,
.ok-textarea:hover { border-color: var(--ok-primary); }
.ok-input:focus,
.ok-select:focus,
.ok-textarea:focus {
  outline: 0;
  border-color: var(--ok-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 184, 0.15);
}
.ok-textarea { min-height: 120px; resize: vertical; }
.ok-help {
  font-size: var(--ok-text-xs);
  color: var(--ok-ink-soft);
  margin-top: 6px;
}

/* Checkbox row */
.ok-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--ok-text-sm);
  color: var(--ok-ink-muted);
  cursor: pointer;
}
.ok-check input { margin-top: 3px; }

/* =============================================================================
   Feature lists with checkmarks (for edition cards, pricing)
   ============================================================================= */

.ok-feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ok-feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ok-text-sm);
  color: var(--ok-ink);
}
.ok-feat-check {
  color: var(--ok-success);
  font-weight: 800;
  flex-shrink: 0;
}
.ok-feat-cross {
  color: var(--ok-ink-faint);
  font-weight: 800;
  flex-shrink: 0;
}
.ok-feat-list .disabled { color: var(--ok-ink-soft); }
/* Feature list inside a teal card — recolor checks */
.ok-card-teal .ok-feat-list li { color: white; }
.ok-card-teal .ok-feat-check { color: var(--ok-amber); }

/* =============================================================================
   Stat counters (for download counts, agent hours, etc)
   ============================================================================= */

.ok-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ok-stat-num {
  font-size: var(--ok-text-4xl);
  font-weight: 800;
  letter-spacing: var(--ok-tracking-snug);
  color: var(--ok-teal);
  line-height: 1;
}
.ok-stat-label {
  font-size: var(--ok-text-sm);
  color: var(--ok-ink-muted);
  font-weight: 500;
}

/* =============================================================================
   Alert / notice
   ============================================================================= */

.ok-alert {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--ok-radius-md);
  font-size: var(--ok-text-sm);
  border-left: 4px solid;
}
.ok-alert-info    { background: var(--ok-mint);   border-color: var(--ok-teal); color: var(--ok-teal-deep); }
.ok-alert-warn    { background: var(--ok-peach);  border-color: var(--ok-warning); color: var(--ok-warning); }
.ok-alert-success { background: var(--ok-success-soft); border-color: var(--ok-success); color: var(--ok-success); }

/* =============================================================================
   Utilities
   ============================================================================= */

.ok-text-center { text-align: center; }
.ok-text-right  { text-align: right; }

.ok-mt-1 { margin-top: var(--ok-s-1); } .ok-mt-2 { margin-top: var(--ok-s-2); }
.ok-mt-3 { margin-top: var(--ok-s-3); } .ok-mt-4 { margin-top: var(--ok-s-4); }
.ok-mt-5 { margin-top: var(--ok-s-5); } .ok-mt-6 { margin-top: var(--ok-s-6); }
.ok-mt-8 { margin-top: var(--ok-s-8); } .ok-mt-10 { margin-top: var(--ok-s-10); }
.ok-mt-12 { margin-top: var(--ok-s-12); } .ok-mt-16 { margin-top: var(--ok-s-16); }

.ok-mb-1 { margin-bottom: var(--ok-s-1); } .ok-mb-2 { margin-bottom: var(--ok-s-2); }
.ok-mb-3 { margin-bottom: var(--ok-s-3); } .ok-mb-4 { margin-bottom: var(--ok-s-4); }
.ok-mb-5 { margin-bottom: var(--ok-s-5); } .ok-mb-6 { margin-bottom: var(--ok-s-6); }
.ok-mb-8 { margin-bottom: var(--ok-s-8); } .ok-mb-10 { margin-bottom: var(--ok-s-10); }
.ok-mb-12 { margin-bottom: var(--ok-s-12); }

.ok-flex { display: flex; }
.ok-flex-col { display: flex; flex-direction: column; }
.ok-items-center { align-items: center; }
.ok-justify-between { justify-content: space-between; }
.ok-gap-2 { gap: var(--ok-s-2); }
.ok-gap-3 { gap: var(--ok-s-3); }
.ok-gap-4 { gap: var(--ok-s-4); }
.ok-gap-6 { gap: var(--ok-s-6); }
.ok-gap-8 { gap: var(--ok-s-8); }