/**
 * Acesso à conta — Figma Conta/Acesso: 291:20597 (Identificação), 291:21232 (Senha),
 * 291:21873 (Código), 291:23738 (Criar conta).
 *
 * Conteúdo com padding 96/24/120/24 e coluna central de 400 (gap 20): título 32/1.1 (600),
 * texto 16 muted, campos de 58 em pílula, botão de 50 na largura toda, código em seis casas 48×56.
 * Celular: padding 40/16/48/16, coluna na largura toda.
 * A aparência dos campos (.form-row) vem de conta.css.
 */

.cdw-conta--acesso {
	max-width: calc(400px + 2 * var(--wp--preset--spacing--space-24));
	padding-block: var(--wp--preset--spacing--space-96) 120px;
}

.cdw-acesso {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cdw-acesso__cabecalho {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	text-align: center;
}

.cdw-acesso__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.cdw-acesso__texto {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.cdw-conta--acesso .cdw-acesso__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cdw-acesso__form .cdw-botao {
	width: 100%;
}

/* Campo com ícone ou botão à direita (cadeado no e-mail travado, olho na senha). */
.cdw-acesso__campo {
	display: block;
	position: relative;
}

.cdw-acesso__campo .input-text {
	padding-right: 52px !important;
}

.cdw-acesso__no-campo,
.cdw-acesso__olho {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink-muted);
	font-size: 16px;
	transform: translateY(-50%);
}

.cdw-acesso__travado .input-text {
	background: var(--wp--preset--color--surface-alt) !important;
	color: var(--wp--preset--color--ink-muted) !important;
}

.cdw-acesso__olho {
	display: flex;
	align-items: center;
	justify-content: center;
	right: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: none;
	cursor: pointer;
}

.cdw-acesso__olho[hidden] {
	display: none;
}

.cdw-acesso__olho .cdw-icone--eye-slash,
.cdw-acesso__olho[aria-pressed="true"] .cdw-icone--eye {
	display: none;
}

.cdw-acesso__olho[aria-pressed="true"] .cdw-icone--eye-slash {
	display: block;
}

.cdw-acesso__erro {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-acesso__ajuda {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

/* Links de texto: "Esqueci minha senha", "Usar outro e-mail", "Reenviar código", "Voltar". */
.cdw-acesso__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* "Reenviar código em 0:45": enquanto conta, é só um texto apagado. */
.cdw-acesso__link:disabled {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--regular);
	text-decoration: none;
	cursor: default;
}

/* "Esqueci minha senha" fica à direita, embaixo do campo. */
.cdw-acesso__link--senha {
	align-self: flex-end;
}

.cdw-conta--acesso .cdw-acesso__volta {
	display: flex;
	justify-content: center;
	gap: 0;
}

.cdw-acesso__rodape {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	text-align: center;
}

.cdw-acesso__consentimentos {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Texto de privacidade do cadastro (WooCommerce › Configurações › Contas e privacidade). */
.cdw-acesso .woocommerce-privacy-policy-text {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-acesso .woocommerce-privacy-policy-text a {
	color: inherit;
}

/* Formulário/Código: seis casas. Sem JavaScript é um campo só, com os números espaçados. */
.cdw-codigo .cdw-codigo__campo {
	font-size: 1.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: 0.5em;
	text-align: center;
}

.cdw-codigo__casas {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-codigo__casa {
	flex: 0 1 48px;
	width: 48px;
	min-width: 0;
	height: 56px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1;
	text-align: center;
	appearance: textfield;
}

.cdw-codigo__casa:focus {
	border: 2px solid var(--wp--preset--color--focus);
	outline: none;
}

.cdw-codigo.woocommerce-invalid .cdw-codigo__casa {
	border: 2px solid var(--wp--preset--color--error);
}

/* Aviso do ambiente de testes (nunca aparece em produção). */
.cdw-acesso__teste {
	padding: 12px var(--wp--preset--spacing--space-16);
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.cdw-conta--acesso {
		max-width: none;
		padding: 40px var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-48);
	}
}