/* ============================================================
   ARGORIX ACADEMY — Component library
   Buttons · Cards · Chips · Badges · Inputs · Glyphs
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  padding: 13px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-glow-blue); }
.btn-primary:hover { box-shadow: 0 0 44px rgba(47,107,255,.5); }
.btn-secondary { background: rgba(255,255,255,.04); color: #fff; border-color: var(--border-hi); }
.btn-secondary:hover { background: rgba(255,255,255,.08); border-color: var(--border-glow); }
.btn-ghost { background: transparent; color: var(--neutral-300); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.05); }
.btn-cyan { background: var(--grad-ai); color: #04121d; }
.btn-cyan:hover { box-shadow: var(--shadow-glow-cyan); }
.btn-enterprise { background: rgba(43,196,244,.05); color: var(--brand-cyan-bright); border-color: var(--border-glow); }
.btn-enterprise:hover { box-shadow: var(--shadow-glow-cyan); background: rgba(43,196,244,.1); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }

.btn-sm { padding: 9px 14px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: 16px 26px; font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { padding: 19px 32px; font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: 11px; width: 42px; height: 42px; }

/* ---------------- Cards ---------------- */
.card {
  position: relative; background: var(--grad-card);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
  backdrop-filter: blur(8px);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%);
}
.card > * { position: relative; }
.card-pad { padding: var(--space-6); }
.card-hover { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-glow); box-shadow: var(--shadow-lg), var(--shadow-glow-blue); }

/* ---------------- Chips ---------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ai       { background: rgba(92,214,255,.12);  color: #8FE3FF; border-color: rgba(92,214,255,.34); }
.chip-mcp      { background: rgba(124,58,237,.16);  color: #C4A6FF; border-color: rgba(124,58,237,.42); }
.chip-devsecops{ background: rgba(47,107,255,.16);  color: #9DB8FF; border-color: rgba(47,107,255,.42); }
.chip-success  { background: var(--success-soft);   color: #6FE3AC; border-color: rgba(43,210,122,.34); }
.chip-info     { background: var(--info-soft);       color: #9DB8FF; border-color: rgba(47,107,255,.34); }
.chip-premium  { background: var(--premium-soft);    color: #C8B6FF; border-color: rgba(167,139,250,.4); }
.chip-pending  { background: var(--pending-soft);    color: #F7DA6A; border-color: rgba(250,204,21,.36); }
.chip-warning  { background: var(--warning-soft);    color: #FFCE82; border-color: rgba(255,181,71,.34); }
.chip-danger   { background: var(--danger-soft);     color: #FF8A8E; border-color: rgba(229,72,77,.36); }
.chip-neutral  { background: rgba(155,156,196,.1);   color: var(--neutral-300); border-color: var(--border-hi); }
.chip-grad     { background: var(--grad-brand); color: #fff; border: 0; }
.chip-live .dot{ box-shadow: 0 0 8px currentColor; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.25);} }

/* ---------------- Category badge ---------------- */
.cat-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-300);
}
.cat-badge .sq { width: 9px; height: 9px; border-radius: 3px; }

/* ---------------- Price ---------------- */
.price { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.price .cur { font-size: .55em; color: var(--neutral-400); font-weight: 600; vertical-align: 0.35em; margin-right: 2px; }
.price-old { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--neutral-500); text-decoration: line-through; }
.ref-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--neutral-500); letter-spacing: 0.02em; }

/* ---------------- KPI tile ---------------- */
.kpi { padding: var(--space-5); }
.kpi .kpi-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-400); }
.kpi .kpi-val { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); color: #fff; letter-spacing: -0.03em; margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .kpi-delta { font-family: var(--font-mono); font-size: 11px; margin-top: 8px; }
.kpi .up { color: var(--success); } .kpi .down { color: var(--danger); } .kpi .flat { color: var(--neutral-400); }

/* ---------------- Inputs ---------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-400); }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: #fff;
  background: var(--brand-void); border: 1px solid var(--border-hi); border-radius: var(--radius-md);
  padding: 12px 14px; outline: none; transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input::placeholder, .textarea::placeholder { color: var(--neutral-500); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-electric); box-shadow: 0 0 0 3px rgba(47,107,255,.22); }
.textarea { resize: vertical; min-height: 96px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B9CC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.help { font-size: var(--text-xs); color: var(--neutral-500); }
.checkrow { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); color: var(--neutral-300); }
.checkrow input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-electric); }

/* ---------------- Terminal ---------------- */
.terminal {
  background: var(--brand-void); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75;
  color: var(--neutral-300); overflow: hidden;
}
.terminal .t-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.terminal .t-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-650); }
.terminal .t-bar i:first-child { background: #ff5f57; } .terminal .t-bar i:nth-child(2){ background:#febc2e; } .terminal .t-bar i:nth-child(3){ background:#28c840; }
.terminal .ln { white-space: pre-wrap; }
.terminal .ln::before { content: "> "; color: var(--brand-cyan); }
.terminal .ok { color: var(--success); } .terminal .pend { color: var(--pending); } .terminal .cy { color: var(--brand-cyan-bright); }

/* ---------------- Status glyph ---------------- */
.glyph { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius-md); }
.glyph .gi { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.glyph .gi svg { width: 17px; height: 17px; }
.glyph .gl { font-size: var(--text-sm); color: #fff; font-weight: 500; }

/* helpers for icon tints */
.ic-ai { color: var(--course-ai); } .ic-mcp { color: var(--course-mcp); } .ic-blue { color: var(--brand-electric); }
.ic-cyan { color: var(--brand-cyan-bright); } .ic-success { color: var(--success); } .ic-warn { color: var(--warning); }
.ic-danger { color: var(--danger); } .ic-premium { color: var(--premium); }
.tint-bg { background: rgba(255,255,255,.05); }