/* ==========================================================================
   Painel do assinante — o que é EXCLUSIVO das telas de assinatura.

   DIVISÃO DE TRABALHO (a mesma de antes, agora escrita por inteiro):

     · `assets/css/secoes/conta.css` do TEMA desenha o que é da ÁREA DA CONTA e
       aparece em mais de uma aba — casca, cabeça, navegação, botão, campo,
       tabela, cartão (`.raz-conta-cartao`), lista de fatos
       (`.raz-conta-fatos`), chip de estado (`.raz-conta-chip`), estado vazio
       (`.raz-conta-vazio`) e fileira de ações (`.raz-conta-acoes`). É lá
       também que estão TODOS os contrastes medidos.

     · ESTA folha desenha só o que existe nas telas de assinatura: a grade das
       listas, a ficha do detalhe, a composição do kit, a trilha do histórico,
       os campos de cartão e o aviso do painel.

   ORDEM DE CARGA — esta folha entra no `wp_enqueue_scripts` em prioridade 10
   e a do tema em 20, ou seja: em empate de especificidade QUEM VENCE É O TEMA.
   Nada aqui depende de ganhar um empate; onde é preciso passar por cima de uma
   regra do tema (a largura do campo de mês/ano/CVV), a especificidade é maior
   de propósito e está anotada.

   Só tokens de `base/tokens.css` e as variáveis locais que `conta.css` declara
   em `.raz-conta-painel` (`--raz-cp-*`). Nenhuma cor mágica, nenhum raio: a
   marca não arredonda (`--raz-radius: 0`).
   ========================================================================== */

/* -------------------------------------------------------------- Listas --- */

/*
 * Grade das assinaturas e dos cartões. Uma coluna no celular; duas a partir de
 * 768px, e só quando há mais de um item — a modificadora `--duas` é escrita na
 * marcação depois de contar as linhas, para um item só não virar um cartão
 * espremido em meia largura com meio vazio ao lado.
 */
.arec-lista,
.arec-cartoes {
	display: grid;
	gap: var(--raz-sp-3);
	margin: 0 0 var(--raz-sp-4);
	padding: 0;
	list-style: none;
}

.arec-lista > li,
.arec-cartoes > li {
	min-width: 0;
}

/* --------------------------------------------------------------- Ficha --- */

/*
 * Cabeçalho do detalhe: Assinatura · Situação · Renovação · Valor · Pagamento.
 * Mesma caixa do cartão, com o fio de destaque em vinho em cima — é a peça que
 * manda na tela, e o fio é o que diz isso antes de qualquer leitura.
 */
.arec-ficha {
	display: grid;
	gap: var(--raz-sp-3);
	margin: 0 0 var(--raz-sp-4);
	padding: var(--raz-cp-pad, 1.25rem);
	border: 1px solid var(--raz-cp-borda, var(--raz-line));
	border-top: 3px solid var(--raz-accent);
	border-radius: var(--raz-radius);
	background-color: var(--raz-base);
	list-style: none;
}

.raz-conta-painel .arec-ficha__titulo {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--raz-font-display);
	font-size: var(--raz-fs-lg);        /* 22px */
	font-weight: var(--raz-fw-display);
	line-height: var(--raz-lh-tight);
	letter-spacing: var(--raz-heading-spacing);
	text-transform: none;               /* nome de produto não vai em caixa alta */
	color: var(--raz-ink);              /* 13,47:1 */
}

/* Link de volta — a saída, antes do conteúdo. */
.arec-voltar {
	margin: 0 0 var(--raz-sp-3);
	font-size: var(--raz-fs-sm);
}

/*
 * Sozinho no parágrafo, este link não é "texto corrido": a isenção de alvo em
 * linha da WCAG 2.5.8 não vale. Medido: 19px de altura. O recuo vertical leva
 * a 27px, acima dos 24px da norma.
 */
.raz-conta-painel .arec-voltar a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* Frase de apoio: explica a consequência da ação que vem logo abaixo. */
.arec-nota {
	max-width: 60ch;
	margin: 0 0 var(--raz-sp-3);
	font-size: var(--raz-fs-sm);
	color: var(--raz-muted);            /* 5,15:1 sobre o branco */
}

.raz-conta-painel .arec-nota strong {
	color: var(--raz-ink);              /* 13,47:1 */
	font-weight: var(--raz-fw-display);
}

/* ---------------------------------------------------------- Composição --- */

/*
 * O que vem na caixa. Quantidade e nome em colunas fixas para os números
 * alinharem verticalmente — lista de compras se lê pela coluna da esquerda.
 */
.arec-composicao {
	display: grid;
	gap: 0;
	margin: 0 0 var(--raz-sp-4);
	padding: 0;
	border: 1px solid var(--raz-cp-borda, var(--raz-line));
	border-radius: var(--raz-radius);
	background-color: var(--raz-base);
	list-style: none;
}

.arec-composicao > li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: baseline;
	gap: var(--raz-sp-2);
	padding: var(--raz-sp-2) var(--raz-sp-3);
}

.arec-composicao > li + li {
	border-top: 1px solid var(--raz-cp-borda, var(--raz-line));
}

.arec-composicao__qtd {
	font-family: var(--raz-font-display);
	font-size: var(--raz-fs-md);
	font-weight: var(--raz-fw-display);
	font-variant-numeric: tabular-nums;
	color: var(--raz-ink);              /* 13,47:1 */
}

.arec-composicao__nome {
	min-width: 0;
	color: var(--raz-ink);
}

/* ------------------------------------------------------------ Cartões ---- */

.raz-conta-painel .arec-cartao__numero {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;             /* respiro entre os •••• e os 4 dígitos */
}

.arec-cartao__dono {
	margin: 0;
	font-size: var(--raz-fs-sm);
	color: var(--raz-muted);            /* 5,15:1 */
}

/* --------------------------------------------------------- Histórico ----- */

/*
 * Trilha do que aconteceu. O fio à esquerda e o marcador quadrado dizem "linha
 * do tempo" sem ícone; a data fica em 2º plano e o evento em tinta cheia,
 * porque quem lê procura O QUE mudou, não quando.
 */
.arec-historico {
	display: grid;
	gap: var(--raz-sp-3);
	margin: 0 0 var(--raz-sp-4);
	padding: 0 0 0 var(--raz-sp-3);
	border-left: 1px solid var(--raz-cp-borda, var(--raz-line));
	list-style: none;
}

.arec-historico__item {
	position: relative;
	display: grid;
	gap: 0.125rem;
}

/* Marcador sobre o fio. `--raz-sp-3` (20px) é o mesmo recuo da lista. */
.arec-historico__item::before {
	content: "";
	position: absolute;
	top: 0.45rem;
	left: calc(var(--raz-sp-3) * -1 - 4px);
	width: 7px;
	height: 7px;
	background-color: var(--raz-accent);   /* 11,96:1 — decorativo, com texto ao lado */
}

.arec-historico__quando {
	font-size: var(--raz-fs-xs);
	font-weight: var(--raz-fw-display);
	letter-spacing: var(--raz-btn-spacing);
	text-transform: var(--raz-btn-case);
	color: var(--raz-muted);            /* 5,15:1 */
}

.arec-historico__oque {
	font-size: var(--raz-fs-sm);
	color: var(--raz-ink);              /* 13,47:1 */
}

.arec-historico__vazio {
	margin: 0 0 var(--raz-sp-4);
	font-size: var(--raz-fs-sm);
	color: var(--raz-muted);            /* 5,15:1 */
}

/* -------------------------------------------------------- Formulários ---- */

.arec-formulario {
	margin: 0 0 var(--raz-sp-4);
}

.arec-campo {
	margin: 0 0 var(--raz-sp-3);
}

.arec-campo:last-child {
	margin-bottom: 0;
}

/*
 * Mês, ano e código de segurança na mesma fileira. `auto-fit` + `minmax` deixa
 * os três lado a lado quando cabe e empilha em 390px sem `@media`.
 */
.arec-campos-lado {
	display: grid;
	gap: var(--raz-sp-3);
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

/*
 * ESPECIFICIDADE DE PROPÓSITO (0,3,1 contra os 0,2,1 do tema): sem isto o
 * campo de mês herdaria os 480px de largura máxima do campo comum e um "MM"
 * ficaria num campo do tamanho de um endereço.
 */
.raz-conta-painel .arec-campos-lado .arec-campo input {
	max-width: 100%;
}

/* ------------------------------------------------------------- Aviso ----- */

/*
 * Aviso do painel (o que volta no redirect depois de pausar, cancelar, trocar
 * cartão). Mesma gramática dos avisos nativos do WooCommerce nesta área: caixa
 * reta, fio de 3px à esquerda na cor do estado, texto na cor do estado.
 * `role="status"` já vem na marcação.
 */
.arec-aviso {
	margin: 0 0 var(--raz-sp-3);
	padding: var(--raz-sp-2) var(--raz-sp-3);
	border: 1px solid currentColor;
	border-left-width: 3px;
	border-radius: var(--raz-radius);
	font-size: var(--raz-fs-sm);
}

.arec-aviso--success {
	color: var(--raz-success);          /* 5,13:1 sobre o branco */
}

.arec-aviso--error {
	color: var(--raz-danger);           /* 6,54:1 sobre o branco */
}

/* ------------------------------------------------- Edição do kit --------- */

/*
 * Contador de unidades escolhidas. `role="status"` na marcação faz o leitor de
 * tela ANUNCIAR cada mudança — antes o número mudava em silêncio.
 */
.arec-contador {
	margin: var(--raz-sp-3) 0;
	font-size: var(--raz-fs-sm);
	color: var(--raz-muted);            /* 5,15:1 */
}

.raz-conta-painel .arec-contador strong {
	font-family: var(--raz-font-display);
	font-size: var(--raz-fs-lg);
	color: var(--raz-ink);              /* 13,47:1 */
}

/* ------------------------------------------------------- Zona de risco --- */

/*
 * Cancelar mora aqui, e não na fileira das outras ações: é a única coisa sem
 * volta da tela, e dividir a linha com "Editar kit" punha as duas à mesma
 * distância do polegar. O fio em cima separa; o texto diz a consequência
 * ANTES de o botão estar ao alcance.
 */
.arec-risco {
	display: grid;
	gap: var(--raz-sp-2);
	justify-items: start;
	margin: var(--raz-sp-4) 0;
	padding-top: var(--raz-sp-3);
	border-top: 1px solid var(--raz-cp-borda, var(--raz-line));
}

.raz-conta-painel .arec-risco__titulo {
	margin: 0;
	font-family: var(--raz-font-display);
	font-size: var(--raz-fs-sm);
	font-weight: var(--raz-fw-display);
	letter-spacing: var(--raz-btn-spacing);
	text-transform: var(--raz-btn-case);
	color: var(--raz-danger);           /* 6,54:1 sobre o branco */
}

.arec-risco__nota {
	max-width: 60ch;
	margin: 0;
	font-size: var(--raz-fs-sm);
	color: var(--raz-muted);            /* 5,15:1 */
}

/* --------------------------------------------------------- Ação isolada -- */

/*
 * Cancelar precisa da caixa "Confirmo" marcada. A caixa e o botão ficam
 * empilhados dentro do mesmo `<form>` para que a confirmação nunca pareça
 * pertencer ao botão de pausar que está ao lado.
 */
.arec-acao--risco {
	display: grid;
	gap: var(--raz-sp-1);
	justify-items: start;
	padding: var(--raz-sp-2);
	border: 1px dashed var(--raz-danger);   /* 6,54:1 */
	border-radius: var(--raz-radius);
}

.raz-conta-painel .arec-acao__confirma {
	margin: 0;
	font-size: var(--raz-fs-sm);
	font-weight: var(--raz-fw-body);
	color: var(--raz-ink);              /* 13,47:1 */
}

/* ========================================================== Computador == */

@media (min-width: 768px) {
	.arec-lista--duas,
	.arec-cartoes--duas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arec-ficha {
		padding: var(--raz-cp-pad-g, 2.5rem);
	}
}

/* ============================================================ Celular === */

@media (max-width: 767px) {
	/* A caixa de confirmação e o botão ocupam a linha inteira. */
	.arec-acao--risco {
		justify-items: stretch;
	}
}