/**
 * Override Clerk built-in component styles to match flik simple/minimal (Numi-like) look.
 * Load after Clerk so our rules take precedence where needed.
 */
/* Tone down Clerk card to match our auth card feel */
[data-clerk-component] {
  font-family: var(--flik-font);
}

.clerk-card,
[class*="clerkCard"] {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #eee;
}

/* Buttons: match our .btn-primary, rounded borders */
.clerk-form-button-primary,
[class*="formButtonPrimary"] {
  border-radius: var(--flik-radius) !important;
  font-size: 0.875rem !important;
}

/* Inputs: simple border */
.clerk-form-field-input,
[class*="formFieldInput"] {
  border-radius: 4px !important;
}