/**
 * Entrar / Criar conta — tela do design.
 *
 * Markup: bpc-loja/login.php (bpc_login_render), usado em /entrar e em
 * /minha-conta de quem ainda não entrou.
 *
 * Os tokens ficam no próprio bloco porque /entrar não é página de loja: o
 * loja.css (onde moram --bpc-*) não carrega lá. As fontes já vêm do Elementor,
 * que pede Zilla Slab e Hanken Grotesk no site inteiro.
 */

.bpc-login {
	--lg-titulo: "Zilla Slab", Georgia, "Times New Roman", serif;
	--lg-apoio: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	--lg-fundo: #F3EEE5;
	--lg-verde: #1D4D2E;
	--lg-verde-escuro: #123A20;
	--lg-verde-apoio: #2F6B43;
	--lg-cartao: #FFFFFF;
	--lg-borda: #E6DCCB;
	--lg-campo: #FFFDF9;
	--lg-campo-borda: #E0D7C4;
	--lg-terracota: #E15B43;
	--lg-terracota-escura: #C2422C;
	--lg-creme: #F4EFE6;
	--lg-areia: #F2C7A0;
	--lg-tinta: #2A1D12;
	--lg-texto-2: #6B5D49;
	--lg-texto-3: #8A7763;
	--lg-divisoria: #EDE4D3;
	--lg-verde-claro: #C3D6C6;
	--lg-marrom-rotulo: #6B4423;

	font-family: var(--lg-apoio);
	color: var(--lg-tinta);
}

/* Em /entrar o main do hello trava em 1140 (e em 800 no tablet). Duas classes
 * e dois elementos passam à frente de `body:not([class*=elementor-page-])
 * .site-main` — (0,2,1). */
body main.site-main.bpc-login-pagina {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--lg-fundo, #F3EEE5);
}

/* Dentro de /minha-conta o conta.css já dá o respiro de topo. */
.woocommerce-account div.woocommerce:has(.bpc-login) {
	display: block;
	padding: 0;
}

.bpc-login__interno {
	max-width: 1240px;
	margin: 0 auto;
	padding: 44px 32px 64px;
}

/* ── Cabeçalho ────────────────────────────────── */

.bpc-login .bpc-login__titulo {
	margin: 0 0 10px;
	color: var(--lg-tinta);
	font-family: var(--lg-titulo);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}

.bpc-login__intro {
	max-width: 520px;
	margin: 0 0 30px;
	color: var(--lg-texto-2);
	font-size: 16px;
	line-height: 1.55;
}

.bpc-login__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
	align-items: start;
	max-width: 980px;
}

/* ── Cartão do formulário ─────────────────────── */

.bpc-login__cartao {
	padding: 30px;
	border: 1px solid var(--lg-borda);
	border-radius: 18px;
	background: var(--lg-cartao);
	box-shadow: 0 30px 60px -48px rgba(29, 77, 46, .55);
}

.bpc-login__abas {
	display: flex;
	gap: 0;
	margin: 0 0 22px;
	padding: 4px;
	border-radius: 11px;
	background: var(--lg-fundo);
}

.bpc-login .bpc-login__aba {
	flex: 1;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--lg-texto-3);
	font-family: var(--lg-apoio);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.bpc-login .bpc-login__aba.is-ativa {
	background: #fff;
	color: var(--lg-verde);
	box-shadow: 0 2px 6px -2px rgba(43, 29, 18, .25);
}

/* ── Aviso de erro ────────────────────────────── */

.bpc-login__alerta {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid #F0C7BD;
	border-left: 4px solid var(--lg-terracota-escura);
	border-radius: 10px;
	background: #FBEBE7;
	color: #8C2D1B;
	font-size: 13.5px;
	line-height: 1.45;
}

.bpc-login__alerta[hidden] { display: none; }

/* ── Campos ───────────────────────────────────── */

.bpc-login .bpc-login__campo {
	display: grid;
	gap: 7px;
	margin: 0 0 16px;
}

.bpc-login .bpc-login__campo label,
.bpc-login__linha-rotulo label {
	color: var(--lg-marrom-rotulo);
	font-family: var(--lg-apoio);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.bpc-login__linha-rotulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bpc-login .bpc-login__esqueci {
	color: var(--lg-verde-apoio);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: 0;
}

.bpc-login .bpc-login__esqueci:hover,
.bpc-login .bpc-login__esqueci:focus { color: var(--lg-terracota); }

/* Alvo de toque sem mexer no alinhamento: a margem negativa devolve o espaço
 * que o padding tomou (o link tinha 17 px de altura, medido a 375 px). */
@media (max-width: 860px) {
	.bpc-login .bpc-login__esqueci {
		padding: 10px 4px;
		margin: -10px -4px;
	}
}

.bpc-login .bpc-login__campo input[type="text"],
.bpc-login .bpc-login__campo input[type="email"],
.bpc-login .bpc-login__campo input[type="password"],
.bpc-login .bpc-login__campo input[type="tel"] {
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--lg-campo-borda);
	border-radius: 11px;
	background: var(--lg-campo);
	color: var(--lg-tinta);
	font-family: var(--lg-apoio);
	font-size: 16px;
	line-height: 1.3;
	box-shadow: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.bpc-login .bpc-login__campo input::placeholder { color: #B3A692; }

.bpc-login .bpc-login__campo input:focus {
	border-color: var(--lg-verde-apoio);
	box-shadow: 0 0 0 3px rgba(47, 107, 67, .15);
	outline: none;
}

/* O autofill do Chrome pinta o campo de azul e troca a cor do texto; o inset
 * devolve o creme sem mexer no valor digitado. */
.bpc-login .bpc-login__campo input:-webkit-autofill,
.bpc-login .bpc-login__campo input:-webkit-autofill:hover,
.bpc-login .bpc-login__campo input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--lg-campo) inset;
	-webkit-text-fill-color: var(--lg-tinta);
	caret-color: var(--lg-tinta);
}

/* Olho de mostrar senha, dentro do campo. */
.bpc-login__senha {
	position: relative;
	display: block;
}

.bpc-login .bpc-login__senha input { padding-right: 52px; }

.bpc-login .bpc-login__olho {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--lg-texto-3);
	cursor: pointer;
}

.bpc-login .bpc-login__olho:hover { background: var(--lg-fundo); color: var(--lg-tinta); }
.bpc-login .bpc-login__olho .bpc-login__svg { width: 20px; height: 20px; }

/* ── Medidor de força ─────────────────────────── */

.bpc-login__forca {
	display: grid;
	gap: 6px;
	margin-top: 4px;
}

.bpc-login__forca-barras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

.bpc-login__forca-barras i {
	height: 4px;
	border-radius: 999px;
	background: var(--lg-divisoria);
}

.bpc-login__forca[data-nivel="1"] .bpc-login__forca-barras i:nth-child(-n+1) { background: var(--lg-terracota-escura); }
.bpc-login__forca[data-nivel="2"] .bpc-login__forca-barras i:nth-child(-n+2) { background: #C0863A; }
.bpc-login__forca[data-nivel="3"] .bpc-login__forca-barras i:nth-child(-n+3) { background: #C0863A; }
.bpc-login__forca[data-nivel="4"] .bpc-login__forca-barras i { background: var(--lg-verde-apoio); }

.bpc-login__forca-texto {
	color: var(--lg-texto-3);
	font-size: 12.5px;
}

/* ── Caixa de marcar ──────────────────────────── */

.bpc-login .bpc-login__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 20px;
	color: #4A3D2D;
	font-size: 14.5px;
	line-height: 1.35;
	cursor: pointer;
}

.bpc-login .bpc-login__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bpc-login__caixa {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--lg-campo-borda);
	border-radius: 6px;
	background: var(--lg-campo);
	color: transparent;
	transition: background-color .16s ease, border-color .16s ease;
}

.bpc-login__caixa .bpc-login__svg { width: 13px; height: 13px; stroke-width: 2.6; }

.bpc-login .bpc-login__check input:checked + .bpc-login__caixa {
	border-color: var(--lg-verde);
	background: var(--lg-verde);
	color: #fff;
}

.bpc-login .bpc-login__check input:focus-visible + .bpc-login__caixa {
	outline: 2px solid var(--lg-verde-apoio);
	outline-offset: 2px;
}

/* ── Botão principal ──────────────────────────── */

.bpc-login .bpc-login__enviar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 11px;
	background: var(--lg-verde);
	color: #fff;
	font-family: var(--lg-apoio);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .16s ease;
}

.bpc-login .bpc-login__enviar:hover { background: var(--lg-verde-escuro); color: #fff; }

.bpc-login .bpc-login__enviar[disabled] { cursor: progress; opacity: .85; }

.bpc-login__enviar::before {
	content: "";
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bpc-login-gira .7s linear infinite;
}

.bpc-login .bpc-login__enviar.is-enviando::before { display: block; }

@keyframes bpc-login-gira { to { transform: rotate(360deg); } }

/* ── "ou" e provedores ────────────────────────── */

.bpc-login__ou {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0;
	color: #A89B86;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bpc-login__ou::before,
.bpc-login__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lg-divisoria);
}

.bpc-login__social { display: grid; gap: 10px; }

.bpc-login .bpc-login__social-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px;
	border: 1.5px solid var(--lg-campo-borda);
	border-radius: 11px;
	color: var(--lg-tinta);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.bpc-login .bpc-login__social-botao:hover {
	border-color: var(--lg-verde);
	background: #FBF8F1;
}

/* ── Rodapé do cartão ─────────────────────────── */

.bpc-login__rodape {
	margin: 20px 0 0;
	color: var(--lg-texto-2);
	font-size: 13.5px;
	text-align: center;
}

.bpc-login .bpc-login__troca {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lg-verde-apoio);
	font-family: var(--lg-apoio);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bpc-login .bpc-login__troca:hover { color: var(--lg-terracota); }

/* ── Painel verde ─────────────────────────────── */

.bpc-login__lado { display: grid; gap: 18px; }

.bpc-login__painel {
	position: relative;
	overflow: hidden;
	padding: 26px;
	border-radius: 18px;
	background: var(--lg-verde);
	color: var(--lg-creme);
}

.bpc-login__painel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 14px);
	pointer-events: none;
}

.bpc-login__painel > * { position: relative; }

.bpc-login__chapeu {
	display: block;
	margin-bottom: 10px;
	color: var(--lg-areia);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bpc-login .bpc-login__painel-titulo {
	margin: 0 0 20px;
	color: var(--lg-creme);
	font-family: var(--lg-titulo);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
}

.bpc-login .bpc-login__beneficios {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-login .bpc-login__beneficios li {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.bpc-login__icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .12);
	color: var(--lg-areia);
}

.bpc-login__icone .bpc-login__svg { width: 16px; height: 16px; }

.bpc-login__beneficio-texto { display: grid; gap: 2px; }

.bpc-login__beneficio-texto strong {
	color: var(--lg-creme);
	font-size: 15px;
	font-weight: 700;
}

.bpc-login__beneficio-texto span {
	color: var(--lg-verde-claro);
	font-size: 13.5px;
	line-height: 1.45;
}

/* ── Cartão do parceiro ───────────────────────── */

.bpc-login__parceiro {
	padding: 24px;
	border: 1px solid var(--lg-borda);
	border-radius: 18px;
	background: var(--lg-cartao);
}

.bpc-login .bpc-login__parceiro h2 {
	margin: 0 0 8px;
	color: var(--lg-tinta);
	font-family: var(--lg-titulo);
	font-size: 18px;
	font-weight: 700;
}

.bpc-login__parceiro p {
	margin: 0 0 16px;
	color: var(--lg-texto-2);
	font-size: 14px;
	line-height: 1.5;
}

.bpc-login .bpc-login__parceiro-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: 9px;
	background: var(--lg-terracota);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.bpc-login .bpc-login__parceiro-botao:hover { background: var(--lg-terracota-escura); color: #fff; }

.bpc-login__legal {
	margin: 0;
	color: var(--lg-texto-3);
	font-size: 12.5px;
	line-height: 1.5;
}

.bpc-login .bpc-login__legal a {
	color: var(--lg-verde-apoio);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Armadilha de robô ────────────────────────── */

/* Fora da tela em vez de display:none — é assim que o campo continua existindo
 * para quem preenche formulário por programa, que é quem queremos pegar. */
.bpc-login__armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Foco visível ─────────────────────────────── */

.bpc-login a:focus-visible,
.bpc-login button:focus-visible,
.bpc-login input:focus-visible {
	outline: 2px solid var(--lg-verde-apoio);
	outline-offset: 2px;
}

/* ── Telas menores ────────────────────────────── */

@media (max-width: 860px) {
	.bpc-login__interno { padding: 30px 18px 48px; }

	.bpc-login .bpc-login__titulo { font-size: 32px; }

	.bpc-login__cartao { padding: 22px 18px; }

	/* Uma coluna: o formulário primeiro, a conversa sobre a conta depois. */
	.bpc-login__grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 520px) {
	.bpc-login .bpc-login__titulo { font-size: 28px; }
	.bpc-login__painel,
	.bpc-login__parceiro { padding: 20px; }
}

/* O WooCommerce imprime o aviso de privacidade dentro do cadastro (gancho
 * woocommerce_register_form). Ele fica, com o tamanho de nota de rodapé. */
.bpc-login .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	color: var(--lg-texto-3);
	font-size: 12.5px;
	line-height: 1.5;
}

.bpc-login .woocommerce-privacy-policy-text a {
	color: var(--lg-verde-apoio);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Alvos de toque medidos a 375 px no site: as abas tinham 37 px e o link do
 * rodapé do cartão, 20. */
@media (max-width: 860px) {
	.bpc-login .bpc-login__aba { min-height: 44px; }

	.bpc-login .bpc-login__troca {
		display: inline-block;
		padding: 10px 4px;
		margin: -10px -4px;
	}
}