/* O atributo hidden precisa vencer os display:flex/grid deste arquivo.
   Sem isto, os campos condicionais do formulário de reembolso ficam
   permanentemente visíveis. (carrinho.css faz o mesmo, mas não é
   carregado nestas páginas.) */
[hidden] { display: none !important; }

/* =========================================================================
   pedido.css — Doceria Doce Encanto
   Aparencia das telas de pos-compra: acompanhamento do pedido
   (home/pedido/) e formulario de cancelamento/reembolso (home/reembolso/).

   O HTML e montado por js/acompanhamento.js e js/reembolso.js — aqui so ha
   aparencia. Depende dos tokens --if-* de css/tema.css; nenhuma cor literal.
   Mesma linguagem visual de css/carrinho.css: raio 8px, borda 1px --if-line,
   cartao branco sobre fundo cinza, campo de 48px com fonte de 16px.

   Sumario
     0. Tokens derivados          9. Atraso, reembolso e solicitacao
     1. Pagina e cabecalho       10. Estado vazio
     2. Tarja de modo de teste   11. Formulario: secoes e campos
     3. Cabecalho do pedido      12. Comprovacao (upload)
     4. Status atual             13. Cancelamento parcial
     5. Linha do tempo           14. Envio
     6. Cartao generico          15. Sucesso
     7. Resumo do pedido         16. Telas estreitas
     8. Endereco                 17. Movimento reduzido
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. TOKENS DERIVADOS
   O verde e o amarelo da marca sao claros demais para texto: sobre branco
   rendem ~2,7:1 e ~1,7:1, abaixo do minimo AA de 4,5:1. Escurecidos contra
   --if-ink chegam a ~4,9:1 e continuam sendo a mesma cor da marca, sem
   introduzir hex literal. Navegador sem color-mix fica com a primeira
   declaracao (--if-ink), que e escura e legivel.
   ------------------------------------------------------------------------- */
:root {
	--if-green-ink: var(--if-ink);
	--if-yellow-ink: var(--if-ink);
	--if-yellow-soft: var(--if-bg);
}

@supports (color: color-mix(in srgb, white, black)) {
	:root {
		--if-green-ink: color-mix(in srgb, var(--if-green) 50%, var(--if-ink));
		/* 40% de amarelo rende ~4,9:1 sobre branco; 45% ja cai para 4,4:1. */
		--if-yellow-ink: color-mix(in srgb, var(--if-yellow) 40%, var(--if-ink));
		--if-yellow-soft: color-mix(in srgb, var(--if-yellow) 14%, var(--if-surface));
	}
}

/* -------------------------------------------------------------------------
   1. PAGINA E CABECALHO
   Coluna unica centralizada sobre o fundo cinza, largura de leitura.
   ------------------------------------------------------------------------- */
.pag {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
	font-family: var(--if-fonte);
	color: var(--if-ink);
}

.pag *,
.pag *::before,
.pag *::after {
	box-sizing: border-box;
}

/* Barra do topo: volta a esquerda, logo e titulo. Gruda no topo para o
   cliente sempre ter como voltar durante a rolagem longa do formulario. */
.pag__topo {
	position: sticky;
	top: 0;
	z-index: 20;

	display: flex;
	align-items: center;
	gap: 12px;
	margin: -16px -16px 16px;
	padding: 12px 16px;

	border-bottom: 1px solid var(--if-line);
	background: var(--if-surface);
}

.pag__logo {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1px solid var(--if-line);
	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	object-fit: cover;
}

.pag__titulo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--if-ink);
	/* Titulos longos ("Formulario — Solicitacao de Cancelamento...") nao
	   podem empurrar o botao de voltar para fora da barra. */
	overflow-wrap: anywhere;
}

.pag__voltar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	color: var(--if-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--if-transicao), border-color var(--if-transicao),
		background var(--if-transicao);
}

.pag__voltar:hover {
	background: var(--if-bg);
	border-color: var(--if-muted);
	color: var(--if-ink);
}

.pag__voltar:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   2. TARJA DE MODO DE TESTE
   So aparece com ?acelerar= ou ?status= ativos. Precisa avisar sem roubar
   a cena: faixa fina, amarela, sem icone de alarme.
   ------------------------------------------------------------------------- */
.tarja-teste {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1400;

	padding: 5px 12px;
	background: var(--if-yellow-soft);
	border-bottom: 1px solid var(--if-yellow);
	color: var(--if-yellow-ink);
	font-family: var(--if-fonte);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	letter-spacing: .01em;
	/* Nao intercepta cliques: e um aviso, nao um controle. */
	pointer-events: none;
}

/* A tarja e fixa e sairia por cima do cabecalho: reserva a altura dela.
   :has garante que a reserva so exista quando a tarja existe. */
body:has(.tarja-teste) {
	padding-top: 27px;
}

/* O cabecalho gruda no topo do viewport, nao no topo do documento: sem
   este empurrao ele passaria por baixo da tarja durante a rolagem. */
body:has(.tarja-teste) .pag__topo {
	top: 27px;
}

/* -------------------------------------------------------------------------
   3. CABECALHO DO PEDIDO — numero e data da compra
   ------------------------------------------------------------------------- */
.pedido-cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 12px;
	padding: 0 2px;
}

.pedido-numero {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--if-ink);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.pedido-data {
	font-size: 13px;
	line-height: 1.4;
	color: var(--if-muted);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   4. STATUS ATUAL
   Um cartao por vez. Cada modificador so troca as duas variaveis locais
   (--cor e --cor-fundo); todo o resto do desenho e compartilhado.
   ------------------------------------------------------------------------- */
.status-atual {
	--cor: var(--if-red);
	--cor-fundo: var(--if-surface);

	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 16px;
	padding: 16px;

	border: 1px solid var(--if-line);
	border-left: 4px solid var(--cor);
	border-radius: var(--if-raio);
	background: var(--cor-fundo);
	box-shadow: var(--if-sombra);
	/* A troca de status e discreta: so a cor viaja, o layout fica parado. */
	transition: background var(--if-transicao), border-color var(--if-transicao);
}

/* --- Modificadores de status -------------------------------------------- */

/* Em preparo: cartao branco com acento vermelho. Sem fundo tingido, para
   nao parecer alerta logo na confirmacao da compra. */
.status-atual--preparando {
	--cor: var(--if-red);
	--cor-fundo: var(--if-surface);
}

/* Motoboy a caminho da loja: amarelo escurecido ate passar em AA. */
.status-atual--motoboy {
	--cor: var(--if-yellow-ink);
	--cor-fundo: var(--if-yellow-soft);
}

/* Saiu para entrega: verde de sucesso. */
.status-atual--saiu {
	--cor: var(--if-green-ink);
	--cor-fundo: var(--if-green-soft);
}

/* Atrasado: unico estado com fundo vermelho suave e moldura inteira em
   vermelho — e o que libera o pedido de reembolso. */
.status-atual--atrasado {
	--cor: var(--if-red);
	--cor-fundo: var(--if-red-soft);
	border-color: var(--if-red);
}

/* --- Partes do cartao ---------------------------------------------------- */

/* Disco colorido com o icone do sprite (svg herda currentColor). */
.status-atual__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;

	border-radius: var(--if-raio-pill);
	background: var(--cor);
	color: var(--if-on-red);
	font-size: 20px;
	line-height: 1;
}

.status-atual__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-top: 2px;
}

.status-atual__titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--if-ink);
	overflow-wrap: anywhere;
}

/* No atraso o titulo assume o vermelho escuro (5,1:1 sobre --if-red-soft). */
.status-atual--atrasado .status-atual__titulo {
	color: var(--if-red-dark);
}

.status-atual__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--if-muted);
}

/* Contador "ha 2 h 14 min" — o JS reescreve a cada 30 s. */
.status-decorrido {
	display: inline-flex;
	align-items: center;
	/* Dentro da coluna flex o padrao esticaria a pilula ate a margem. */
	align-self: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding: 4px 10px;

	border-radius: var(--if-raio-pill);
	background: var(--if-bg);
	color: var(--if-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

/* Dentro dos cartoes tingidos o cinza do fundo sumiria: usa o branco. */
.status-atual--motoboy .status-decorrido,
.status-atual--saiu .status-decorrido,
.status-atual--atrasado .status-decorrido {
	background: var(--if-surface);
}

/* -------------------------------------------------------------------------
   5. LINHA DO TEMPO
   Sempre vertical (mobile primeiro): coluna de marcas de 32px a esquerda,
   ligadas pelo traco, e o texto de cada etapa a direita.
   ------------------------------------------------------------------------- */
.linha-tempo {
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}

.etapa {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: start;
	gap: 0 14px;
	padding: 0 0 22px;
}

/* A ultima etapa nao tem trecho de linha para baixo. */
.etapa:last-child {
	padding-bottom: 0;
}

/* Disco de 32px. Fica acima do traco para "cortar" a linha. */
.etapa__marca {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;

	border: 2px solid var(--if-line);
	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	color: var(--if-muted);
	transition: background var(--if-transicao), border-color var(--if-transicao),
		color var(--if-transicao);
}

.etapa__icone {
	font-size: 13px;
	line-height: 1;
}

/* Trecho vertical que liga esta marca a marca de baixo. Absoluto para nao
   ocupar celula da grade; comeca embaixo do disco e vai ate o fim da etapa. */
.etapa__traco {
	position: absolute;
	left: 15px;
	top: 32px;
	bottom: 0;
	width: 2px;

	background: var(--if-line);
	border-radius: var(--if-raio-pill);
}

.etapa:last-child .etapa__traco {
	display: none;
}

.etapa__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 5px;
}

.etapa__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--if-ink);
	overflow-wrap: anywhere;
}

.etapa__hora {
	font-size: 12px;
	line-height: 1.4;
	color: var(--if-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Etapa concluida ----------------------------------------------------- */
.etapa--feita .etapa__marca {
	border-color: var(--if-red);
	background: var(--if-red);
	color: var(--if-on-red);
}

/* O traco que sai de uma etapa concluida ja esta "percorrido". */
.etapa--feita .etapa__traco {
	background: var(--if-red);
}

/* --- Etapa atual --------------------------------------------------------- */
.etapa--atual .etapa__marca {
	border-color: var(--if-red);
	background: var(--if-red);
	color: var(--if-on-red);
	/* Anel destacado: o mesmo halo vermelho do foco, sem mexer no layout. */
	box-shadow: var(--if-foco);
}

/* A pulsacao e um segundo anel que cresce e some. Feita com um elemento
   proprio (e nao com box-shadow animado) porque a cor precisa vir de
   var(--if-red): a opacidade fica no elemento, nao dentro da cor. */
.etapa--atual .etapa__marca::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: -1;

	border: 2px solid var(--if-red);
	border-radius: var(--if-raio-pill);
	opacity: 0;
	animation: pedido-pulso 2.2s ease-out infinite;
}

.etapa--atual .etapa__titulo {
	font-weight: 700;
	color: var(--if-red-dark);
}

/* Daqui para baixo a entrega ainda nao aconteceu: linha apagada. */
.etapa--atual .etapa__traco {
	background: var(--if-line);
}

/* --- Etapa futura -------------------------------------------------------- */
.etapa--futura .etapa__marca {
	border-color: var(--if-line);
	background: var(--if-bg);
	color: var(--if-disabled);
}

.etapa--futura .etapa__titulo {
	font-weight: 500;
	color: var(--if-muted);
}

.etapa--futura .etapa__hora {
	color: var(--if-disabled);
}

/* Pulsacao leve: o anel nasce colado no disco, cresce um pouco e some. */
@keyframes pedido-pulso {
	0% {
		transform: scale(.88);
		opacity: .55;
	}

	70%,
	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}

/* -------------------------------------------------------------------------
   6. CARTAO GENERICO
   Base de todos os blocos brancos: resumo, endereco, linha do tempo.
   ------------------------------------------------------------------------- */
.cartao {
	margin: 0 0 12px;
	padding: 16px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	box-shadow: var(--if-sombra);
}

.cartao:last-child {
	margin-bottom: 0;
}

.cartao__titulo {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--if-ink);
}

/* -------------------------------------------------------------------------
   7. RESUMO DO PEDIDO
   ------------------------------------------------------------------------- */
.resumo-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--if-line);
}

.resumo-item:first-of-type {
	padding-top: 0;
}

.resumo-item:last-of-type {
	border-bottom: 0;
	padding-bottom: 4px;
}

.resumo-item__img {
	width: 48px;
	height: 48px;
	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-bg);
	object-fit: cover;
}

.resumo-item__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.resumo-item__nome {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--if-ink);
	overflow-wrap: anywhere;
}

/* Sabores e observacao: podem ser longos, quebram sem estourar o cartao. */
.resumo-item__opcoes {
	font-size: 12px;
	line-height: 1.4;
	color: var(--if-muted);
	overflow-wrap: anywhere;
}

/* Chip "2x" antes do nome ou na propria coluna de texto. */
.resumo-item__qtd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	min-width: 24px;
	height: 20px;
	padding: 0 6px;

	border-radius: var(--if-raio-pill);
	background: var(--if-bg);
	color: var(--if-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.resumo-item__preco {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--if-ink);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- Linhas de subtotal / frete ------------------------------------------ */
.resumo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
}

/* A primeira linha de valores vem depois dos itens: separa com uma regua. */
.resumo-item + .resumo-linha {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--if-line);
}

.resumo-linha__rotulo {
	color: var(--if-muted);
}

.resumo-linha__valor {
	font-weight: 500;
	color: var(--if-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* "Gratis": verde escurecido, legivel sobre o branco do cartao. */
.resumo-linha__valor--gratis {
	color: var(--if-green-ink);
	font-weight: 700;
}

.resumo-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	padding-top: 10px;

	border-top: 1px solid var(--if-line);
	font-size: 18px;
	font-weight: 700;
	color: var(--if-ink);
	font-variant-numeric: tabular-nums;
}

/* Dentro do total tudo acompanha o peso da linha, nao o cinza das parciais. */
.resumo-total .resumo-linha__rotulo,
.resumo-total .resumo-linha__valor {
	font-size: 18px;
	font-weight: 700;
	color: var(--if-ink);
}

/* -------------------------------------------------------------------------
   8. ENDERECO DE ENTREGA
   ------------------------------------------------------------------------- */
.endereco {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px;

	border-radius: var(--if-raio);
	background: var(--if-bg);
	color: var(--if-ink);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   9. ATRASO, REEMBOLSO E SOLICITACAO ENVIADA
   ------------------------------------------------------------------------- */
.alerta-atraso {
	margin: 0 0 12px;
	padding: 16px;

	border: 1px solid var(--if-red);
	border-radius: var(--if-raio);
	background: var(--if-red-soft);
}

.alerta-atraso__titulo {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--if-red-dark);
}

.alerta-atraso__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--if-ink);
}

/* Botao de reembolso: presenca forte (largura cheia, 52px, borda de 2px),
   mas contorno em vez de bloco vermelho — pesa sem gritar. So enche de
   vermelho na interacao, quando a intencao ja e do cliente. */
.btn-reembolso {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	/* min-height, e nao height: em telas estreitas o rotulo quebra em duas
	   linhas e uma altura fixa cortaria a segunda. */
	min-height: 52px;
	padding: 8px 16px;
	margin: 12px 0 0;

	border: 2px solid var(--if-red);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	color: var(--if-red-dark);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--if-transicao), color var(--if-transicao),
		box-shadow var(--if-transicao);
}

.btn-reembolso:hover {
	background: var(--if-red);
	color: var(--if-on-red);
	box-shadow: var(--if-sombra);
}

.btn-reembolso:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* Solicitacao ja enviada: substitui o botao. Verde de "recebemos", nao de
   "resolvido" — por isso o texto explica que esta em analise. */
.cartao-solicitacao {
	margin: 12px 0 0;
	padding: 14px 16px;

	border: 1px solid var(--if-green);
	border-radius: var(--if-raio);
	background: var(--if-green-soft);
	color: var(--if-ink);
	font-size: 14px;
	line-height: 1.5;
}

.cartao-solicitacao__numero {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;

	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	color: var(--if-green-ink);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
}

/* -------------------------------------------------------------------------
   10. ESTADO VAZIO — nenhum pedido salvo
   ------------------------------------------------------------------------- */
.vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 48px 24px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	text-align: center;
}

.vazio__texto {
	margin: 0;
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--if-muted);
}

/* -------------------------------------------------------------------------
   11. FORMULARIO DE REEMBOLSO — secoes e campos
   Cada secao e um cartao branco com o numero em circulo, no mesmo padrao
   dos passos do checkout (.checkout__passo de carrinho.css).
   ------------------------------------------------------------------------- */
.form-secao {
	margin: 0 0 12px;
	padding: 16px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	box-shadow: var(--if-sombra);
}

.form-secao:last-of-type {
	margin-bottom: 0;
}

.form-secao__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-right: 10px;

	border-radius: var(--if-raio-pill);
	background: var(--if-red);
	color: var(--if-on-red);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.form-secao__titulo {
	display: flex;
	align-items: center;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--if-ink);
}

.form-secao__corpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* --- Campo --------------------------------------------------------------- */
.form-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.form-campo__rotulo {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--if-muted);
}

.form-campo__input {
	width: 100%;
	/* 48px de alvo para o dedo; 16px de fonte evita o zoom automatico que o
	   iOS aplica ao focar um campo com texto menor. */
	min-height: 48px;
	padding: 12px 14px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	color: var(--if-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	transition: border-color var(--if-transicao), box-shadow var(--if-transicao),
		background var(--if-transicao);
}

/* Relatos e observacoes pedem area maior. */
textarea.form-campo__input {
	min-height: 110px;
	resize: vertical;
}

select.form-campo__input {
	cursor: pointer;
}

.form-campo__input::placeholder {
	color: var(--if-muted);
}

.form-campo__input:focus {
	border-color: var(--if-red);
}

.form-campo__input:focus-visible {
	outline: 0;
	border-color: var(--if-red);
	box-shadow: var(--if-foco);
}

/* Campo reprovado na validacao: o JS marca aria-invalid="true". */
.form-campo__input[aria-invalid="true"] {
	border-color: var(--if-red);
	background: var(--if-red-soft);
}

.form-campo__erro {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--if-red-dark);
}

/* Some enquanto o JS nao escreve nada dentro. */
.form-campo__erro:empty {
	display: none;
}

/* Meia linha: CPF ao lado do telefone, data ao lado do valor. Vira coluna
   unica quando nao ha largura real (ver bloco 16). */
.form-campo--metade {
	flex: 1 1 min(180px, 100%);
}

/* Irmaos de meia linha se emparelham dentro do corpo da secao. */
.form-secao__corpo:has(> .form-campo--metade) {
	flex-flow: row wrap;
	align-items: flex-start;
}

.form-secao__corpo:has(> .form-campo--metade) > .form-campo {
	flex: 1 1 100%;
}

.form-secao__corpo:has(> .form-campo--metade) > .form-campo--metade {
	flex: 1 1 min(180px, 100%);
}

/* --- Opcoes em cartao (motivo, sim/nao, forma de reembolso) --------------- */
.form-opcoes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.form-opcao {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	color: var(--if-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--if-transicao), background var(--if-transicao),
		color var(--if-transicao);
}

.form-opcao:hover {
	border-color: var(--if-muted);
}

.form-opcao:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* Marcador circular a esquerda, no lugar do radio nativo (mesmo desenho
   de .opcao-entrega em carrinho.css). */
.form-opcao::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;

	border: 2px solid var(--if-line);
	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

.form-opcao--ativa {
	border-color: var(--if-red);
	background: var(--if-red-soft);
	color: var(--if-red-dark);
	font-weight: 600;
}

.form-opcao--ativa::before {
	border-color: var(--if-red);
	/* O "miolo" do radio e desenhado com sombra interna. */
	box-shadow: inset 0 0 0 3px var(--if-surface), inset 0 0 0 9px var(--if-red);
}

/* --- Caixas de confirmacao ----------------------------------------------- */
.form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 48px;
	padding: 10px 12px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	cursor: pointer;
	transition: border-color var(--if-transicao), background var(--if-transicao);
}

.form-check:hover {
	border-color: var(--if-muted);
	background: var(--if-bg);
}

/* Marcado: moldura vermelha discreta confirma o aceite sem tingir o texto. */
.form-check:has(.form-check__input:checked) {
	border-color: var(--if-red);
	background: var(--if-red-soft);
}

.form-check__input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	/* accent-color pinta o check nativo com o vermelho da marca. */
	accent-color: var(--if-red);
	cursor: pointer;
}

.form-check__input:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

.form-check__texto {
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--if-ink);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   12. COMPROVACAO — areas de upload
   Nada sai da pagina: os arquivos ficam so na memoria. Por isso a area e
   sobria, sem barra de progresso nem promessa de envio.
   ------------------------------------------------------------------------- */
.upload-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 14px;

	border: 2px dashed var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-bg);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--if-transicao), background var(--if-transicao);
}

.upload-area:hover {
	border-color: var(--if-red);
	background: var(--if-red-soft);
}

.upload-area:focus-within {
	border-color: var(--if-red);
}

.upload-area:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

.upload-area__rotulo {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--if-ink);
}

/* Botao-pilula de contorno: e um atalho visual, o clique vale na area toda. */
.upload-area__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;

	border: 1px solid var(--if-red);
	border-radius: var(--if-raio-pill);
	background: var(--if-surface);
	color: var(--if-red-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background var(--if-transicao), color var(--if-transicao);
}

.upload-area__botao:hover {
	background: var(--if-red);
	color: var(--if-on-red);
}

.upload-area__botao:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* --- Lista dos arquivos escolhidos --------------------------------------- */
.upload-lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.upload-lista:empty {
	display: none;
}

.upload-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
}

.upload-item__nome {
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--if-ink);
	/* Nome de arquivo de celular e longo: corta em vez de quebrar a linha. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.upload-item__tam {
	font-size: 12px;
	line-height: 1.3;
	color: var(--if-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.upload-item__remover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;

	border: 0;
	border-radius: var(--if-raio-pill);
	background: transparent;
	color: var(--if-muted);
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--if-transicao), color var(--if-transicao);
}

.upload-item__remover:hover {
	background: var(--if-red-soft);
	color: var(--if-red-dark);
}

.upload-item__remover:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   13. CANCELAMENTO PARCIAL — produtos do pedido
   ------------------------------------------------------------------------- */
.produto-cancelar {
	padding: 12px;
	margin: 0 0 8px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-bg);
}

.produto-cancelar:last-child {
	margin-bottom: 0;
}

.produto-cancelar__topo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--if-ink);
	overflow-wrap: anywhere;
}

/* Quantidade e motivo proprio do item: duas colunas quando cabe. */
.produto-cancelar__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 10px;
	margin-top: 10px;
}

/* -------------------------------------------------------------------------
   14. ENVIO
   ------------------------------------------------------------------------- */
.form-envio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.form-envio__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	/* min-height pelo mesmo motivo do botao de reembolso. */
	min-height: 56px;
	padding: 8px 18px;

	border: 0;
	border-radius: var(--if-raio);
	background: var(--if-red);
	color: var(--if-on-red);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: var(--if-sombra);
	transition: background var(--if-transicao), box-shadow var(--if-transicao);
}

.form-envio__btn:hover {
	background: var(--if-red-dark);
}

.form-envio__btn:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* Falta obrigatorio: cinza neutro, sem sombra, cursor de bloqueio.
   O rotulo fica em --if-ink (6,3:1 sobre o cinza) em vez do branco do
   estado ativo: desabilitado precisa continuar legivel, porque e ele que
   diz ao cliente o que o botao fara quando o formulario estiver completo. */
.form-envio__btn:disabled {
	background: var(--if-disabled);
	color: var(--if-ink);
	cursor: not-allowed;
	box-shadow: none;
}

/* Enviando (~1,2 s): o rotulo continua legivel e ganha um disco girando.
   aria-busy fica por conta do JS; aqui so ha aparencia. */
.form-envio__btn--carregando {
	cursor: progress;
	pointer-events: none;
}

.form-envio__btn--carregando::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;

	border: 2px solid var(--if-on-red);
	/* Um quarto transparente cria a "falha" que denuncia o giro. */
	border-top-color: transparent;
	border-radius: var(--if-raio-pill);
	animation: pedido-girar .7s linear infinite;
}

@keyframes pedido-girar {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------------
   15. SUCESSO
   ------------------------------------------------------------------------- */
.sucesso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 24px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
	box-shadow: var(--if-sombra);
	text-align: center;
}

.sucesso__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;

	border-radius: var(--if-raio-pill);
	background: var(--if-green-soft);
	color: var(--if-green);
	font-size: 40px;
	line-height: 1;
}

.sucesso__titulo {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--if-ink);
}

.sucesso__texto {
	margin: 0;
	max-width: 38ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--if-muted);
}

/* Numero da solicitacao: monoespacado para ser lido em voz alta e copiado
   sem erro (o "0" nao se confunde com o "O"). */
.sucesso__numero {
	display: inline-block;
	padding: 10px 18px;

	border: 1px dashed var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-bg);
	color: var(--if-ink);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	/* Permite selecionar so o numero com um toque longo. */
	user-select: all;
}

/* -------------------------------------------------------------------------
   16. TELAS ESTREITAS — uma coluna abaixo de 480px
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {
	.pag {
		padding-left: 12px;
		padding-right: 12px;
	}

	.pag__topo {
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Nenhum par de campos divide linha: cada um ocupa a largura toda. */
	.form-secao__corpo:has(> .form-campo--metade) > .form-campo--metade,
	.form-campo--metade {
		flex-basis: 100%;
	}

	.produto-cancelar__campos {
		grid-template-columns: 1fr;
	}

	/* A coluna do preco continua a direita — e o alinhamento da borda
	   direita que deixa os valores conferiveis de relance. So a miniatura
	   encolhe para devolver largura ao nome. */
	.resumo-item {
		grid-template-columns: 40px 1fr auto;
		gap: 10px;
	}

	.resumo-item__img {
		width: 40px;
		height: 40px;
	}

	/* O tamanho do arquivo desce para baixo do nome. */
	.upload-item {
		grid-template-columns: 1fr auto;
	}

	.upload-item__tam {
		grid-column: 1;
		grid-row: 2;
	}

	.upload-item__remover {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.sucesso {
		padding: 32px 16px;
	}

	.sucesso__numero {
		font-size: 18px;
	}
}

/* -------------------------------------------------------------------------
   17. MOVIMENTO REDUZIDO
   Quem pediu menos animacao nao ve o anel pulsar nem o disco girar; o
   estado continua legivel pela cor e pela borda.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.etapa--atual .etapa__marca,
	.form-envio__btn--carregando::before {
		animation: none;
	}

	.status-atual,
	.etapa__marca,
	.pag__voltar,
	.form-campo__input,
	.form-opcao,
	.form-opcao::before,
	.form-check,
	.upload-area,
	.upload-area__botao,
	.upload-item__remover,
	.btn-reembolso,
	.form-envio__btn {
		transition: none;
	}
}