/* ============================================================
   new.css — the create-a-club form.
   Loaded after content.css; only what that doesn't cover.
   ============================================================ */

.page.narrow { max-width: 520px; }
.card.pad { padding: 20px; }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.field input { width: 100%; }

/* The suffix sits inside the same visual box as the input, so the address
   reads as one thing rather than a field next to some text. */
.slug-row {
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  overflow: hidden;
}
.slug-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--tint);
}
.slug-row input {
  flex: 1; min-width: 0;
  border: none; background: transparent; box-shadow: none;
  border-radius: 0;
}
.slug-row input:focus { box-shadow: none; border-color: transparent; }
.slug-row .suffix {
  flex: none; padding: 0 12px;
  color: var(--muted); font-size: 14px; white-space: nowrap;
}

.slug-state { margin-top: 6px; font-size: 13px; color: var(--muted); }
.slug-state.good { color: var(--win); }
.slug-state.bad { color: var(--loss); }

.pre-auth { margin: 4px 0 14px; }

.provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; margin-bottom: 10px;
  font-weight: 500;
}
.provider:last-child { margin-bottom: 0; }
.provider svg { width: 18px; height: 18px; flex: none; }

.prose.after { margin-top: 28px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }