/**
 * Formulário de apoio.
 *
 * Herda tipografia e cor do tema em vez de impor as próprias: o formulário
 * aparece dentro da página da campanha, e um bloco com fonte e cores próprias
 * lê como anúncio de terceiro — justo onde a pessoa precisa confiar.
 *
 * Duas exceções, ambas por medição e não por gosto: as cores de estado (erro,
 * teste, sucesso), que precisam significar o mesmo em qualquer tema, e o botão
 * principal — ver o comentário longo mais abaixo.
 *
 * ────────────────────────────────────────────────────────────────────────
 * NENHUM `opacity` EM TEXTO
 * ────────────────────────────────────────────────────────────────────────
 *
 * A primeira versão usava `opacity: .65` e `.7` para deixar texto secundário
 * discreto. Medido no staging: o texto do tema é cinza rgb(106,107,108), que
 * já dá só 5,34:1 contra o branco. Com `opacity: .7` isso cai para **2,92:1** —
 * bem abaixo do mínimo de 4,5:1, e pior para quem tem pouca visão justamente
 * na tela onde se digita um cartão.
 *
 * Regra que fica: **o plugin nunca reduz o contraste que o tema oferece.**
 * Hierarquia se faz com tamanho e peso, que não custam legibilidade.
 * `opacity` volta a ser permitido só em elemento desabilitado, onde "apagado"
 * é a informação.
 */

.ds-checkout {
	max-width: 30rem;
	margin: 0 auto;
	font: inherit;
	color: inherit;
}

.ds-checkout fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}

.ds-checkout legend {
	font-weight: 600;
	font-size: 1.05em;
	margin-bottom: .6rem;
	padding: 0;
}

/* Valores sugeridos ------------------------------------------------------ */

.ds-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ds-amounts legend { flex-basis: 100%; }

.ds-chip {
	flex: 1 1 4.5rem;
	padding: .6rem .5rem;
	border: 1px solid currentColor;
	border-radius: .4rem;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: box-shadow .12s, background-color .12s;
}

.ds-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.ds-chip.is-on  {
	font-weight: 600;
	background: var(--ds-accent);
	color: var(--ds-accent-ink);
	border-color: var(--ds-accent);
}

.ds-other {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: .35rem;
	border: 1px solid currentColor;
	border-radius: .4rem;
	padding: .55rem .7rem;
}

.ds-other:focus-within { box-shadow: 0 0 0 2px currentColor; }

.ds-other input {
	flex: 1;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 0;
	outline: 0;
}

.ds-help {
	flex-basis: 100%;
	margin: .35rem 0 0;
	font-size: .85em;
}

/* Campos ----------------------------------------------------------------- */

.ds-field { display: block; margin-bottom: 1rem; }
.ds-field > span { display: block; margin-bottom: .3rem; font-weight: 600; }
.ds-field small { font-weight: 400; }

.ds-field input,
.ds-field textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid currentColor;
	border-radius: .4rem;
	background: transparent;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}

/* ⚠️ Rádio e caixa de marcar NÃO são campo de digitar.
 *
 * A regra acima é um seletor de DESCENDENTE: `.ds-field input` alcança também
 * os rádios dentro de um `<fieldset class="ds-field">`. Com `width: 100%` o
 * rádio virava uma faixa da largura do formulário e empurrava o próprio rótulo
 * para a outra ponta da linha — a escolha "sozinho / entrar / criar" saía com
 * a bolinha de um lado e a palavra do outro. Medido na bancada em 21/09/2026.
 *
 * `width: auto` devolve o tamanho natural, e `flex: 0 0 auto` impede que o
 * `display: flex` de `.ds-radio` o estique de novo. */
.ds-field input[type="radio"],
.ds-field input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.ds-field small { display: block; margin-top: .25rem; font-size: .85em; }

.ds-cover,
.ds-check {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin-bottom: 1rem;
	cursor: pointer;
	line-height: 1.4;
}

.ds-cover input,
.ds-check input { margin-top: .2rem; flex-shrink: 0; }

.ds-cover-note { display: block; font-style: normal; font-size: .9em; }

/* Botões ----------------------------------------------------------------- *
 *
 * ARMADILHA DO `currentColor` — o erro que deixou este botão INVISÍVEL
 *
 * A primeira versão fazia:
 *
 *     .ds-primary { background: currentColor; }
 *     .ds-primary { color: Canvas; }
 *
 * A intenção era: fundo com a cor do texto do tema, rótulo com a cor de fundo
 * do tema. Não funciona. `currentColor` não guarda a cor herdada — ele resolve
 * para a cor **final do próprio elemento**, que a segunda regra acabou de
 * definir como branca. Resultado: branco sobre branco, contraste 1.00, botão
 * presente e invisível.
 *
 * Um `var(--x: currentColor)` num ancestral também não resolve: variáveis CSS
 * substituem tokens tarde, e o `currentColor` continuaria sendo avaliado no
 * botão.
 *
 * Por isso o botão tem cor própria. É a única coisa no formulário que não
 * herda do tema — e com razão: um botão de pagamento precisa ser
 * inconfundivelmente um botão, e "herdar tudo" foi exatamente o que o apagou.
 * A cor é sobrescrevível pelo tema com `--ds-accent`.
 */

.ds-checkout {
	--ds-accent: #1a7f4b;
	--ds-accent-ink: #ffffff;
}

.ds-primary {
	width: 100%;
	padding: .8rem 1rem;
	border: 0;
	border-radius: .4rem;
	background: var(--ds-accent);
	color: var(--ds-accent-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s;
}

.ds-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ds-primary:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
.ds-primary:disabled { opacity: .55; cursor: default; }

.ds-back {
	width: 100%;
	margin-top: .5rem;
	padding: .6rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* Resumo ----------------------------------------------------------------- */

.ds-summary {
	border: 1px solid currentColor;
	border-radius: .4rem;
	padding: .9rem 1rem;
	margin-bottom: 1rem;
}

.ds-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .25rem 0;
}

.ds-total {
	border-top: 1px solid currentColor;
	margin-top: .4rem;
	padding-top: .55rem;
	font-size: 1.1em;
}

#ds-payment-element { margin-bottom: 1rem; }

.ds-secure {
	margin: .7rem 0 0;
	font-size: .82em;
	text-align: center;
}

/* Estados — as únicas cores fixas do arquivo ----------------------------- */

.ds-error {
	margin-top: 1rem;
	padding: .7rem .9rem;
	border-left: 3px solid #b32d2e;
	background: rgba( 179, 45, 46, .08 );
	color: #b32d2e;
	border-radius: .25rem;
}

.ds-test {
	margin: .6rem 0 0;
	padding: .5rem .7rem;
	border-left: 3px solid #8a6d00;
	background: rgba( 138, 109, 0, .08 );
	color: #8a6d00;
	font-size: .88em;
	border-radius: .25rem;
}

.ds-done {
	padding: 1.2rem;
	border-left: 3px solid #007017;
	background: rgba( 0, 112, 23, .07 );
	border-radius: .25rem;
}

.ds-done h3 { margin: 0 0 .4rem; }
.ds-done p  { margin: 0; }

.ds-notice { font-style: italic; }

/* Acessibilidade --------------------------------------------------------- */

.ds-checkout .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ds-chip,
	.ds-primary { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────────
 * RASTREADOR DE PASSOS E CAPA
 *
 * Inspirados no formulário novo do GiveWP, mas com duas diferenças
 * deliberadas:
 *
 * 1. O rastreador traz o NOME de cada etapa, não só uma bolinha. Três
 *    pontinhos dizem "há três passos"; "A campanha · Seu apoio · Pagamento"
 *    diz o que falta — e quem hesita no meio de um checkout hesita por não
 *    saber quanto ainda vem pela frente.
 *
 * 2. Nada aqui usa `opacity` para "apagar" o passo inativo. Esse foi
 *    exatamente o defeito que derrubou o contraste para 2,92:1 neste mesmo
 *    arquivo. Passo inativo tem cor própria, medida.
 * ─────────────────────────────────────────────────────────────────── */

.ds-track {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0 0 .8rem;
	border-bottom: 1px solid #e3e6e8;
	counter-reset: none;
}

.ds-track-item {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .9em;
	color: #5b6166;              /* 6,4:1 sobre branco — medido */
}

.ds-track-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	border: 1px solid #b9bfc4;
	background: transparent;
	font-size: .82em;
	font-weight: 600;
	line-height: 1;
	flex-shrink: 0;
}

.ds-track-item.is-current {
	color: inherit;
	font-weight: 600;
}

.ds-track-item.is-current .ds-track-dot {
	background: var(--ds-accent);
	color: var(--ds-accent-ink);
	border-color: var(--ds-accent);
}

.ds-track-item.is-done .ds-track-dot {
	border-color: var(--ds-accent);
	color: var(--ds-accent);
}

/* O visto do passo cumprido substitui o número: o número já não informa
   nada sobre uma etapa que ficou para trás. */
.ds-track-item.is-done .ds-track-dot::after {
	content: '✓';
	font-size: .95em;
}
.ds-track-item.is-done .ds-track-dot { font-size: 0; }

@media (max-width: 26rem) {
	/* Em tela estreita, só o passo atual mantém o nome. Três nomes em duas
	   linhas empurram o formulário para baixo da dobra — e o que precisa
	   estar visível é o campo, não a navegação. */
	.ds-track-item:not(.is-current) .ds-track-name {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect( 1px, 1px, 1px, 1px );
		white-space: nowrap;
	}
}

/* ── A capa ──────────────────────────────────────────────────────────── */

.ds-cover-step { text-align: center; }

.ds-cover-title { margin: 0 0 .6rem; font-size: 1.3em; }

.ds-cover-numbers { margin: 0 0 .7rem; font-size: .95em; }

.ds-cover-numbers strong { font-size: 1.15em; color: var(--ds-accent); }

.ds-cover-step .ds-bar {
	height: .5rem;
	border-radius: .3rem;
	background: #e3e6e8;
	overflow: hidden;
	margin-bottom: .9rem;
}

.ds-cover-step .ds-bar-fill {
	height: 100%;
	background: var(--ds-accent);
	border-radius: inherit;
	min-width: 2px;
}

.ds-cover-deadline {
	margin: 0 0 1rem;
	font-size: .9em;
	color: #5b6166;
}

/* ── "Editar" no cabeçalho do resumo ─────────────────────────────────── */

.ds-summary-head {
	border-bottom: 1px solid currentColor;
	margin-bottom: .35rem;
	padding-bottom: .35rem;
	font-weight: 600;
}

/* Botão com cara de link: a ação é "voltar e mudar", secundária ao lado do
   total. Um segundo botão sólido aqui competiria com o de confirmar — e o
   checkout inteiro existe para levar ao de confirmar. */
.ds-edit {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-weight: 400;
	color: var(--ds-accent);
	text-decoration: underline;
	cursor: pointer;
}

.ds-edit:hover { text-decoration: none; }
.ds-edit:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* O recuo do tema Thrive nos passos do checkout — ver o ⚠️ do fim de
   `progress.css` (v0.43.4). Classe repetida: (0,2,1) vence o (0,1,2) do tema. */
.ds-track.ds-track > li { margin-left: 0; }

/* O dicionário de textos do checkout (v0.47.0): existe para o Poliglota
   traduzir, nunca para aparecer. O `hidden` já esconde; isto é a garantia
   contra uma regra de tema que force `display` em div. */
.ds-textos { display: none !important; }