/**
 * Minha Conta — entrada por e-mail e a segunda etapa do cadastro.
 *
 * Os tokens repetem os do checkout porque esta folha carrega SOZINHA em Minha
 * Conta: o checkout.css não entra aqui, e herdar variável que não existe
 * deixaria a tela sem cor.
 */

.locpocket-acc,
.locpocket-comp {
	--lc-bg: #ffffff;
	--lc-surface: #f7f8fa;
	--lc-border: #e2e5ea;
	--lc-border-strong: #cbd1da;
	--lc-text: #14181f;
	--lc-muted: #626b7a;
	--lc-brand: #1f9e4d;
	--lc-brand-dark: #157a3a;
	--lc-brand-soft: #e7f6ed;
	--lc-danger: #c0392b;
	--lc-radius-sm: 9px;
	--lc-focus: 0 0 0 3px rgba(31, 158, 77, .18);
}

/* ---------------------------------------------------------------
 * Cartão único — em vez de duas colunas de peso igual
 * ------------------------------------------------------------- */

.locpocket-acc {
	max-width: 470px;
	margin: 46px auto 64px;
	padding: 38px 34px 34px;
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 34px rgba(16, 24, 40, .08);
	color: var(--lc-text);
	text-align: left;
}

/* O tema centraliza texto em algumas telas de conta; aqui tudo é alinhado à
   esquerda, que é como formulário se lê. */
.locpocket-acc p,
.locpocket-acc label,
.locpocket-acc h2 { text-align: left; }

/* Um fio da cor da marca no topo do cartão. É o único enfeite: dá identidade
   sem competir com o campo, que é a única coisa que a pessoa precisa ver. */
.locpocket-acc::before {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin: 0 0 20px;
	border-radius: 99px;
	background: var(--lc-brand);
}

.locpocket-acc__passo { display: none; }
.locpocket-acc__passo.is-on { display: block; }
.locpocket-acc__oculto { display: none !important; }

.locpocket-acc__titulo {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--lc-text);
	text-transform: none;
}

.locpocket-acc__lead {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--lc-muted);
}

.locpocket-acc__lead:empty { display: none; }

.locpocket-acc__campo { margin: 0 0 14px; }

.locpocket-acc__campo label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
}

/* 52px: a tela é vazia e pede respiro. 16px de fonte evita o zoom do iOS. */
.locpocket-acc input[type="email"],
.locpocket-acc input[type="text"],
.locpocket-acc input[type="password"] {
	width: 100%;
	height: 52px;
	padding: 0 15px;
	font-size: 16px;
	line-height: 50px;
	color: var(--lc-text);
	background: #fff;
	border: 1px solid var(--lc-border-strong);
	border-radius: var(--lc-radius-sm);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.locpocket-acc input:focus {
	border-color: var(--lc-brand);
	box-shadow: var(--lc-focus);
	outline: none;
}

/* A cor do texto é declarada em todos os estados: o tema repinta botão no
   hover e deixaria o rótulo cinza sobre verde. */
.locpocket-acc .locpocket-acc__btn,
.locpocket-acc .locpocket-acc__btn:hover,
.locpocket-acc .locpocket-acc__btn:focus,
.locpocket-acc .locpocket-acc__btn:focus-visible,
.locpocket-acc .locpocket-acc__btn:active,
.locpocket-acc button[type="submit"],
.locpocket-acc button[type="submit"]:hover,
.locpocket-acc button[type="submit"]:focus,
.locpocket-acc button[type="submit"]:active {
	color: #fff;
	text-decoration: none;
}

.locpocket-acc .locpocket-acc__btn,
.locpocket-acc button[type="submit"] {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 18px;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	background: var(--lc-brand);
	border: 1px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
	transition: background-color .15s ease;
}

.locpocket-acc .locpocket-acc__btn:hover,
.locpocket-acc button[type="submit"]:hover,
.locpocket-acc .locpocket-acc__btn:focus-visible {
	background: var(--lc-brand-dark);
	border-color: var(--lc-brand-dark);
}

.locpocket-acc .locpocket-acc__btn[disabled] { opacity: .6; cursor: default; }

.locpocket-acc__volta {
	display: inline-block;
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	color: var(--lc-brand-dark);
	background: none;
	border: 0;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.locpocket-acc__eco {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 14px;
	font-size: 14px;
	background: var(--lc-surface);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
}

.locpocket-acc__eco:empty { display: none; }

.locpocket-acc__erro {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--lc-danger);
}

.locpocket-acc__erro:empty { display: none; }

/* Login social no topo, com um "ou" separando do e-mail. */
.locpocket-acc__social { margin: 0 0 4px; }

.locpocket-acc__social a,
.locpocket-acc__social button,
.locpocket-acc__social .nsl-button {
	width: 100%;
	justify-content: center;
}

.locpocket-acc__ou {
	position: relative;
	margin: 18px 0;
	text-align: center;
}

.locpocket-acc__ou::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--lc-border);
}

.locpocket-acc__ou span {
	position: relative;
	padding: 0 12px;
	background: var(--lc-bg);
	font-size: 12.5px;
	color: var(--lc-muted);
}

/* O formulário nativo entra dentro do cartão: tiramos moldura, título e a
   caixa dupla que o tema desenha. */
.locpocket-acc form.woocommerce-form-login,
.locpocket-acc form.woocommerce-form-register,
.locpocket-acc form.login,
.locpocket-acc form.register {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.locpocket-acc form .woocommerce-form__label-for-checkbox {
	font-size: 13px;
	color: var(--lc-muted);
}

.locpocket-acc form .lost_password {
	margin: 14px 0 0;
	font-size: 13.5px;
	text-align: center;
}

.locpocket-acc form .lost_password a { color: var(--lc-brand-dark); }

/* ---------------------------------------------------------------
 * O olho de "ver a senha"
 * -------------------------------------------------------------
 * Ele é injetado por JavaScript — não existe no HTML que o servidor
 * entrega —, então não dá para mirar numa classe com segurança. Em vez de
 * adivinhar o nome, ancoramos pelo FORMATO: o alvo é grudado no fim da linha
 * da senha, com a altura do campo. Como o input é o último elemento da linha,
 * ancorar por `bottom` acerta tanto se o botão for irmão do campo quanto se
 * estiver dentro de um invólucro que o JS criou.
 *
 * Em produção ele aparecia como um bloco cinza colado na borda, quebrando o
 * canto arredondado do campo. Aqui vira ícone dentro do campo. */

.locpocket-acc .form-row-password,
.locpocket-acc .password-input,
.locpocket-acc .woocommerce-password-input,
.locpocket-acc .wd-password-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.locpocket-acc input[type="password"] {
	padding-right: 52px;
}

.locpocket-acc [class*="show-password"],
.locpocket-acc [class*="password-toggle"],
.locpocket-acc [class*="show_password"] {
	position: absolute;
	right: 1px;
	bottom: 1px;
	top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 50px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
	box-shadow: none;
	opacity: .5;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.locpocket-acc [class*="show-password"]:hover,
.locpocket-acc [class*="password-toggle"]:hover {
	opacity: 1;
	background: var(--lc-surface);
}

/* Preenchimento automático do navegador pintava o campo de azul-lilás e ele
   destoava de todos os outros. */
.locpocket-acc input:-webkit-autofill,
.locpocket-comp input:-webkit-autofill,
.locpocket-acc input:-webkit-autofill:focus,
.locpocket-comp input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lc-text);
	-webkit-box-shadow: 0 0 0 60px #fff inset;
	box-shadow: 0 0 0 60px #fff inset;
}

/* Espaço entre o botão e o que vem depois dele dentro do formulário nativo
   (lembrar de mim, esqueci a senha, política de privacidade). */
.locpocket-acc form p { margin: 0 0 14px; }
.locpocket-acc form p:last-child { margin-bottom: 0; }
.locpocket-acc form .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lc-muted);
}
.locpocket-acc form .woocommerce-form-login__rememberme { display: inline-block; margin: 2px 0 12px; }

@media ( max-width: 560px ) {
	.locpocket-acc {
		margin: 26px auto 40px;
		padding: 26px 20px 22px;
		border-radius: 14px;
		box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
	}

	.locpocket-acc__titulo { font-size: 20px; }
}

/* ---------------------------------------------------------------
 * Segunda etapa — completar o cadastro, sem obrigação
 * ------------------------------------------------------------- */

.locpocket-comp {
	margin: 0 0 26px;
	padding: 22px;
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: 14px;
	color: var(--lc-text);
}

.locpocket-comp__titulo {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
}

.locpocket-comp__lead {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--lc-muted);
}

.locpocket-comp__prog {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.locpocket-comp__barra {
	flex: 1;
	height: 6px;
	border-radius: 99px;
	background: var(--lc-border);
	overflow: hidden;
}

.locpocket-comp__barra i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--lc-brand);
	transition: width .3s ease;
}

.locpocket-comp__prog b {
	font-size: 12px;
	font-weight: 600;
	color: var(--lc-muted);
	white-space: nowrap;
}

.locpocket-comp__linha { display: flex; gap: 12px; }
.locpocket-comp__campo { flex: 1 1 0; margin: 0 0 14px; min-width: 0; }

.locpocket-comp__campo label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
}

.locpocket-comp input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-size: 16px;
	line-height: 46px;
	color: var(--lc-text);
	background: #fff;
	border: 1px solid var(--lc-border-strong);
	border-radius: var(--lc-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.locpocket-comp input:focus {
	border-color: var(--lc-brand);
	box-shadow: var(--lc-focus);
	outline: none;
}

.locpocket-comp__erro {
	display: block;
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--lc-danger);
}

.locpocket-comp__erro:empty { display: none; }

.locpocket-comp__cep {
	margin: -4px 0 14px;
	padding: 9px 12px;
	font-size: 12.5px;
	border-radius: 8px;
	display: none;
}

.locpocket-comp__cep.is-on,
.locpocket-comp__cep.is-ok,
.locpocket-comp__cep.is-erro { display: block; }

.locpocket-comp__cep.is-on { background: var(--lc-surface); color: var(--lc-muted); border: 1px solid var(--lc-border); }
.locpocket-comp__cep.is-ok { background: var(--lc-brand-soft); color: var(--lc-brand-dark); border: 1px solid #b9e0cb; }
.locpocket-comp__cep.is-erro { background: #fdecea; color: #8a1c12; border: 1px solid #f5c6c0; }

.locpocket-comp__acoes {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 6px 0 0;
}

.locpocket-comp .locpocket-comp__btn,
.locpocket-comp .locpocket-comp__btn:hover,
.locpocket-comp .locpocket-comp__btn:focus,
.locpocket-comp .locpocket-comp__btn:active {
	color: #fff;
	text-decoration: none;
}

.locpocket-comp .locpocket-comp__btn {
	min-height: 46px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	background: var(--lc-brand);
	border: 1px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
}

.locpocket-comp .locpocket-comp__btn:hover { background: var(--lc-brand-dark); border-color: var(--lc-brand-dark); }
.locpocket-comp .locpocket-comp__btn[disabled] { opacity: .6; cursor: default; }

.locpocket-comp__depois {
	padding: 0;
	font-size: 13.5px;
	color: var(--lc-muted);
	background: none;
	border: 0;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

/* Concluído: o formulário sai de cena e fica uma linha. Ficar tudo aberto
   depois de salvar dava a impressão de que faltava alguma coisa. */
.locpocket-comp.is-feito .locpocket-comp__form,
.locpocket-comp.is-feito .locpocket-comp__lead,
.locpocket-comp.is-feito .locpocket-comp__prog { display: none; }

.locpocket-comp.is-feito {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--lc-brand-soft);
	border-color: #b9e0cb;
}

.locpocket-comp.is-feito .locpocket-comp__titulo {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--lc-brand-dark);
}

.locpocket-comp.is-feito .locpocket-comp__titulo::before {
	content: "✓";
	margin-right: 8px;
	font-weight: 700;
}

.locpocket-comp__editar {
	padding: 0;
	font-size: 13px;
	color: var(--lc-brand-dark);
	background: none;
	border: 0;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.locpocket-comp:not(.is-feito) .locpocket-comp__editar { display: none; }

.locpocket-comp__msg { margin: 12px 0 0; font-size: 13px; }
.locpocket-comp__msg:empty { display: none; }
.locpocket-comp__msg.is-ok { color: var(--lc-brand-dark); }
.locpocket-comp__msg.is-erro { color: var(--lc-danger); }

@media ( max-width: 560px ) {
	.locpocket-comp__linha { flex-direction: column; gap: 0; }
	.locpocket-comp__campo { flex: 1 1 auto !important; }
	.locpocket-comp__acoes { flex-direction: column; align-items: stretch; }
	.locpocket-comp .locpocket-comp__btn { width: 100%; }
}