/* ==========================================================================
   BRUVZ CLOTHING — components.css
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-8);
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
  border: 1px solid transparent;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn--primary { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--primary:hover:not(:disabled) { background: transparent; color: var(--white); }
.btn--outline  { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline:hover:not(:disabled) { background: var(--white); color: var(--black); }
.btn--ghost    { background: transparent; color: var(--grey-400); border-color: var(--grey-600); }
.btn--ghost:hover:not(:disabled)  { color: var(--white); border-color: var(--white); }
.btn--danger   { background: var(--accent-red); color: var(--white); border-color: var(--accent-red); }
.btn--full     { width: 100%; }
.btn--sm       { padding: var(--sp-2) var(--sp-4); font-size: 0.6rem; }
.btn--lg       { padding: var(--sp-4) var(--sp-12); font-size: var(--text-xs); }

/* ---- Form fields ---- */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: var(--sp-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--grey-900);
  border: 1px solid var(--grey-600);
  color: var(--white);
  font-size: var(--text-sm);
  transition: border-color var(--fast);
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--white); }
.field textarea { resize: vertical; min-height: 120px; }
.field-hint  { font-size: var(--text-xxs); color: var(--grey-400); margin-top: var(--sp-1); }
.field-error { font-size: var(--text-xxs); color: var(--accent-red);  margin-top: var(--sp-1); }
.field select option { background: var(--grey-900); }

/* ---- Checkbox / radio ---- */
.check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--grey-200);
  cursor: pointer;
}
.check-label input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

/* ---- Alerts ---- */
.alert {
  padding: var(--sp-4);
  font-size: var(--text-xs);
  font-weight: 500;
  border-left: 3px solid;
  margin-bottom: var(--sp-4);
}
.alert--success { background: rgba(124,154,114,0.1); border-color: var(--accent-sage); color: var(--accent-sage); }
.alert--error   { background: rgba(194,59,46,0.1);   border-color: var(--accent-red);  color: var(--accent-red); }
.alert--info    { background: rgba(41,84,166,0.1);   border-color: var(--accent-blue); color: #6b9fd4; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: var(--sp-6);
}
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: var(--grey-600); }

/* ---- Status badge ---- */
.badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px var(--sp-2);
}
.badge--new       { background: var(--accent); color: var(--black); }
.badge--sale      { background: var(--accent-red); color: var(--white); }
.badge--sold-out  { background: var(--white); color: var(--black); }
.badge--pending   { background: var(--grey-600); color: var(--white); }
.badge--paid      { background: var(--accent-sage); color: var(--black); }
.badge--shipped   { background: var(--accent-blue); color: var(--white); }
.badge--delivered { background: var(--accent-sage); color: var(--black); }
.badge--cancelled { background: var(--accent-red);  color: var(--white); }

/* ---- Divider ---- */
.divider { border: none; border-top: 1px solid var(--grey-600); margin-block: var(--sp-6); }

/* ---- Pagination ---- */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-12); }
.page-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--grey-600);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-400);
  transition: all var(--fast);
}
.page-btn:hover, .page-btn.active { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---- B COINS widget ---- */
.bcoins-widget {
  background: var(--grey-900);
  border: 1px solid var(--grey-600);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.bcoins-widget__balance {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.bcoins-widget__bar {
  height: 4px;
  background: var(--grey-600);
  margin-bottom: var(--sp-3);
}
.bcoins-widget__progress {
  height: 100%;
  background: var(--accent);
  transition: width var(--base) var(--ease);
}