/* =========================================================================
   PB WooCommerce Layout – Auth (entrar / criar conta)
   Valores dos frames "my-account-login" e "create-account" do Figma.
   ====================================================================== */
body.pb-auth-screen {
	--pba-primary: #0f7da3;
	--pba-primary-dark: #0c6686;
	--pba-link: #1a7fa0;
	--pba-dark: #213038;
	--pba-text: #5f6b73;
	--pba-strong: #29323a;
	--pba-border: #e1e8eb;
	--pba-field-border: #d4e0e5;
	--pba-placeholder: #9ca3af;
	--pba-bg: #f0f6fa;
}

/* O fundo é da SEÇÃO do tema, não deste bloco.
   Ela já ocupa a largura toda da página e tem 64px de padding vertical; pintar
   só o filho deixava faixas brancas em cima e embaixo, e exigia sangramento por
   margem negativa. Pintando a seção, as duas coisas somem. */
body.pb-auth-screen .pb-account-page { background: var(--pba-bg); }

.pb-auth {
	/* O tema ainda soma a altura do header fixo no topo da primeira seção —
	   não mexa nisso, é o que impede o card de ficar por baixo do cabeçalho.
	   Descontando o header, sobram 64px da seção + 16px daqui = os 80px de
	   respiro do design; e 36px + 64px da seção = os 100px de baixo. */
	padding: 16px 24px 36px;
	color: var(--pba-dark);
}
.pb-auth *,
.pb-auth *::before,
.pb-auth *::after { box-sizing: border-box; }

.pb-auth__box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 40px;
	background: #fff;
	border: 1px solid #d5e7ed;
	border-radius: 24px;
}
.pb-auth__box--register { max-width: 520px; }

/* ---------- Selo de confirmação ---------- */
.pb-auth__badge {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--pba-bg);
}
.pb-auth__badge .pb-icon {
	width: 32px;
	height: 32px;
	color: var(--pba-primary);
	stroke-width: 2;
}

/* ---------- Cabeçalho ---------- */
.pb-auth__head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.pb-auth__title {
	margin: 0;
	font-size: 28px;
	line-height: 34px;
	font-weight: 800;
	color: var(--pba-dark);
}
.pb-auth__subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	color: var(--pba-text);
}

.pb-auth__divider {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--pba-border);
}

/* ---------- Formulário ----------
   O WooCommerce estiliza `form.login` e `form.register` com borda, padding e
   margem próprios (.woocommerce form.login = 0,2,1). O seletor abaixo soma três
   classes (0,3,0) para vencer sem precisar de !important. */
.pb-auth .woocommerce-form.pb-auth__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	/* O WooCommerce também joga um box-shadow em .woocommerce-form; sem zerar,
	   sobra uma moldura em volta dos campos mesmo com a borda removida. */
	box-shadow: none;
	text-align: left;
}
.pb-auth__row { display: flex; gap: 16px; }
.pb-auth__row .pb-auth__field { flex: 1 1 0; min-width: 0; }

.pb-auth__field { display: flex; flex-direction: column; gap: 8px; }
.pb-auth__label {
	margin: 0;
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pba-dark);
}
.pb-auth .pb-auth__input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 13px 14px;
	border: 1px solid var(--pba-field-border);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 18px;
	color: var(--pba-dark);
	box-shadow: none;
}
.pb-auth .pb-auth__input::placeholder { color: var(--pba-placeholder); }
.pb-auth .pb-auth__input:focus {
	outline: none;
	border-color: var(--pba-primary);
}

/* ---------- Mostrar senha ---------- */
.pb-auth__password { position: relative; }
.pb-auth__password .pb-auth__input { padding-right: 46px; }
.pb-auth .pb-auth__reveal {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent no-repeat center / 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}
.pb-auth .pb-auth__reveal.is-visible {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* ---------- Confirmação de e-mail ---------- */
.pb-auth__chip {
	margin: 0;
	padding: 10px 16px;
	background: #f0f7fa;
	border-radius: 8px;
	font-size: 15px;
	line-height: 18px;
	font-weight: 600;
	color: var(--pba-link);
	text-align: center;
	overflow-wrap: anywhere;
}

.pb-auth__code { display: flex; gap: 8px; }
.pb-auth .pb-auth__code-box {
	flex: 1 1 0;
	min-width: 0;
	height: 56px;
	padding: 0;
	border: 1px solid var(--pba-field-border);
	border-radius: 8px;
	background: #fff;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: var(--pba-dark);
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* Preenchido ganha a borda grossa do design — a classe vem do JS. */
.pb-auth .pb-auth__code-box.is-filled,
.pb-auth .pb-auth__code-box:focus {
	border: 2px solid var(--pba-primary);
	outline: none;
}

.pb-auth__resend {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 17px;
	color: var(--pba-text);
}
/* "Resend Code" precisa submeter o formulário, então é um <button type="submit">
   — e o tema pinta todo [type="submit"] de branco numa folha inline, com
   !important. Fundo e padding cedem à especificidade; a COR não cede a nada que
   não seja outro !important, e sem ela o texto fica branco sobre branco.
   Único !important deste arquivo, e só porque responde a outro. */
.pb-auth .woocommerce-form .pb-auth__resend .pb-auth__linkbtn[type="submit"] {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pba-link) !important;
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
}
.pb-auth .woocommerce-form .pb-auth__resend .pb-auth__linkbtn[type="submit"]:hover { color: var(--pba-primary-dark) !important; background: none; }

.pb-auth__backlink {
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	color: var(--pba-link);
	text-decoration: none;
}
.pb-auth__backlink:hover { text-decoration: underline; }

/* ---------- Requisitos da senha ----------
   Começam todos como não cumpridos; o JS marca os que a senha já atende. Sem
   JS a lista continua legível — ela informa, quem barra é o servidor. */
.pb-auth .pb-auth__rules {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pb-auth__rule {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
	font-weight: 400;
	color: var(--pba-text);
}
.pb-auth__rule-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: no-repeat center / 14px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.pb-auth__rule.is-met { color: var(--pba-dark); }
.pb-auth__rule.is-met .pb-auth__rule-dot {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
}

/* ---------- Termos ---------- */
.pb-auth__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--pba-text);
}
.pb-auth__check input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--pba-primary);
}
.pb-auth__check a { color: var(--pba-link); text-decoration: underline; }

.pb-auth__forgot {
	align-self: flex-start;
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	color: var(--pba-link);
	text-decoration: none;
}
.pb-auth__forgot:hover { text-decoration: underline; }

.pb-auth__note {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	color: var(--pba-text);
}

/* ---------- Botões ---------- */
.pb-auth .pb-auth__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.pb-auth .pb-auth__btn--primary {
	border: 1px solid var(--pba-primary);
	background: var(--pba-primary);
	color: #fff;
}
.pb-auth .pb-auth__btn--primary:hover {
	background: var(--pba-primary-dark);
	border-color: var(--pba-primary-dark);
	color: #fff;
}
.pb-auth .pb-auth__btn--ghost {
	border: 1px solid var(--pba-primary);
	background: #fff;
	color: var(--pba-primary);
}
.pb-auth .pb-auth__btn--ghost:hover {
	background: #f3f9fb;
	color: var(--pba-primary-dark);
	border-color: var(--pba-primary-dark);
}

.pb-auth__switch { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.pb-auth__switch-label {
	margin: 0;
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	color: var(--pba-strong);
}

/* ---------- Avisos do WooCommerce ----------
   Eles são impressos ANTES do bloco .pb-auth, não dentro dele; por isso a
   âncora aqui é a classe do body. Sem isso o aviso sai com a largura toda da
   seção, descolado do card. */
body.pb-auth-screen .woocommerce-error,
body.pb-auth-screen .woocommerce-message,
body.pb-auth-screen .woocommerce-info {
	max-width: 520px;
	margin: 0 auto 20px;
	border-radius: 10px;
	font-size: 14px;
}

@media (max-width: 560px) {
	.pb-auth { padding: 40px 16px 64px; }
	.pb-auth__box { padding: 24px 20px; border-radius: 16px; gap: 20px; }
	.pb-auth__title { font-size: 24px; line-height: 30px; }
	/* Nome e sobrenome lado a lado ficam estreitos demais no celular. */
	.pb-auth__row { flex-direction: column; gap: 16px; }
}