/* ============================================================
   SPORT TELECOMS LTD — Components
   Import AFTER tokens.css. Plain, framework-free classes.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--st-font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 14px 26px;
  border: 0; border-radius: var(--st-radius-md);
  cursor: pointer; transition: .15s ease;
  text-decoration: none;
}
.btn--primary   { background: var(--st-red); color: #fff; }
.btn--primary:hover  { background: var(--st-red-hover); }
.btn--primary:active { background: var(--st-red-active); }
.btn--secondary { background: var(--st-carbon); color: #fff; }
.btn--secondary:hover { background: #22262C; }
.btn--outline   { background: transparent; border: 2px solid var(--st-carbon); color: var(--st-carbon); padding: 12px 24px; }
.btn--outline:hover { background: var(--st-carbon); color: #fff; }
.btn--ghost     { background: transparent; color: var(--st-red); padding: 14px 16px; }
.btn--ghost:hover { background: var(--st-red-tint); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--st-border); color: var(--st-disabled);
  cursor: not-allowed; border-color: var(--st-border);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--st-font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--st-radius-pill);
}
.badge--red     { background: var(--st-red);    color: #fff; }
.badge--carbon  { background: var(--st-carbon); color: #fff; }
.badge--tint    { background: var(--st-red-tint); color: var(--st-red); }
.badge--success { background: #E7F3EC; color: var(--st-success); }
.badge--info    { background: #EEF3FE; color: var(--st-info); }

/* ---------- Card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  padding: var(--st-space-6);
  box-shadow: var(--st-shadow-sm);
}

/* ---------- Form input ---------- */
.field-label {
  display: block; margin-bottom: 8px;
  font-family: var(--st-font-display);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--st-secondary);
}
.input {
  width: 100%;
  font-family: var(--st-font-body); font-size: 16px; color: var(--st-ink);
  padding: 13px 15px;
  border: 1.5px solid #DDE1E6; border-radius: var(--st-radius-md);
  outline: none; transition: .15s ease; background: #fff;
}
.input:focus {
  border-color: var(--st-red);
  box-shadow: 0 0 0 3px rgba(198,13,23,.14);
}
.field-help { font-size: 13px; color: var(--st-muted); margin-top: 8px; }

/* ---------- Callout ---------- */
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--st-radius-md); padding: 14px 16px;
  font-size: 15px; line-height: 1.5;
}
.callout::before {
  content: ""; flex: none; width: 8px; height: 8px;
  border-radius: 999px; margin-top: 7px; background: currentColor;
}
.callout--red     { background: var(--st-red-tint); color: #7A1219; }
.callout--success { background: #E7F3EC; color: #155F35; }