> ## Documentation Index
> Fetch the complete documentation index at: https://malga-develop.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Responda em português brasileiro, na segunda pessoa ("você"), com base na documentação Malga.
> Não invente endpoints, parâmetros, status codes ou comportamentos de API. Se não estiver na docs, diga que não encontrou e indique a página mais próxima.
> Use os headers X-Client-Id e X-Api-Key nos exemplos de autenticação.
> Motor de Assinaturas refere-se a /v1/subscriptions* (cycles, trial, retentativas, webhooks subscription.*). Não chame de "motor de recorrência".
> Recorrência (provedor) é paymentMethod.recurrence em POST /v1/charges (initial / subsequent / unscheduled), distinto do Motor de Assinaturas.
> Sandbox é ambiente de testes e não afeta produção.

# Estilizando os campos

Buscando oferecer mais flexibilidade, disponibilizamos um objeto que permite aplicar os estilos desejados nos inputs da nossa aplicação.

Existem algumas regras para a utilização desse objeto, que estão detalhadas abaixo.

```typescript theme={null}
// Aplicação em todos os inputs do hosted fields.
styles: {
 input: {
  color: "orange",
  "font-size": "16px",
  },
} 
// Mudando cor do text apenas do input de card-number (serve para os demais)
".card-number": {
  color: "blue",
}

// Mudando a cor do text na hora do focus para todos os inputs
":focus": {
 color: "red",
}

// Exemplo contendo as 3 mudanças citadas.
styles: {
  input: {
    color: "orange",
    "font-size": "16px",
  },
  ".card-number": {
    color: "blue",
  },
  ":focus": {
    color: "red",
  },
}
```

Além disso, temos quatro classes específicas para lidar com estado do input, são elas:

| Classe | Descrição |
| - | - |
| `malga-hosted-field` | Aplicada ao elemento pai do iframe. Responsável por estilizar a área externa do input (recomenda-se definir border, border-radius, etc.). |
| `malga-hosted-field-focused` | Aplicada quando o input recebe foco. |
| `malga-hosted-field-valid` | Aplicada quando a validação é bem-sucedida (`valid === true`). |
| `malga-hosted-field-invalid` | Aplicada quando há um erro e a validação falha (`valid === false`). |

Essas classes podem ser adicionadas na folha de estilo da sua aplicação.

```css theme={null}
.malga-hosted-field {
  background-color: white
  border: 2px solid #39BFAD
  border-radius: 8px
}

.malga-hosted-field-focused {
  border-color: #147F70
}

.malga-hosted-field-valid {
  border-color: green
}

.malga-hosted-field-invalid {
  border-color: red
}
```

<CardGroup>
  <Card href="/sdks/tokenization/v2/events" title="Eventos">
    Aprenda a utilizar os eventos disponíveis
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.