/* KEBIKE — Formularios e Minha Conta (DESIGN-SPEC.md secao 10). Bloco V2,
   24/08/2026. Aplica aos formularios nativos do WooCommerce (Minha Conta,
   carrinho, checkout, endereco, edicao de conta) — nenhum markup novo,
   so os seletores reais do WooCommerce/tema. */

.woocommerce form label,
.woocommerce-page form label{
	font-family:var(--fonte-base);
	font-size:14px;
	font-weight:700;
	color:var(--preto);
}
.woocommerce form label .required,
.woocommerce-page form label .required{
	color:var(--vermelho);
	text-decoration:none;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-page form .input-text,
.woocommerce-page form select,
.woocommerce form textarea{
	width:100%;
	height:54px !important;
	background:var(--branco);
	border:1px solid var(--cinza-borda);
	border-radius:var(--raio-botao);
	padding:0 16px !important;
	font-family:var(--fonte-base);
	font-size:15px;
	font-weight:400;
	outline:none;
	box-shadow:none;
	box-sizing:border-box;
}
.woocommerce form textarea{
	height:auto;
	padding-top:14px;
	padding-bottom:14px;
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus{
	border-color:var(--verde);
	box-shadow:none;
	outline:none;
}
/* Bloco L1E (25/08/2026) — anel de foco desenhado, so para navegacao por
   teclado. outline:none acima continua valendo para o clique de mouse (a
   mudanca de border-color ja e o indicador visual do clique) -- sem ele, o
   global do WordPress ":where(.wp-site-blocks :focus){outline:2px solid}"
   (especificidade zero, mas sem nada para perder pra ele aqui) passaria a
   aparecer tambem no clique, porque :where() so perde quando outra regra
   tambem define outline para o MESMO estado. :focus-visible abaixo tem a
   mesma especificidade de :focus e vem depois no arquivo, entao vence pela
   ordem quando as duas casam ao mesmo tempo (navegacao por teclado). */
.woocommerce form .input-text:focus-visible,
.woocommerce form select:focus-visible,
.woocommerce form textarea:focus-visible{
	outline:2px solid var(--verde);
	outline-offset:2px;
}
.woocommerce form .form-row{
	margin:0 0 20px;
}
.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last{
	width:calc(50% - 10px);
}

/* Caixa de formulario — cinza-card, raio 8, padding 38 36 40 */
.woocommerce-account .woocommerce,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce-address-fields,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review{
	background:var(--cinza-card);
	border-radius:var(--raio-card);
	padding:38px 36px 40px;
}

/* ===== Minha Conta deslogada — duas colunas, gap 32 ===== */
.woocommerce-account.logged-out .u-columns,
.woocommerce-page .u-columns{
	display:grid !important;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
	gap:32px;
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2{
	width:100% !important;
	float:none !important;
}
.woocommerce-account .u-columns .u-column1{
	grid-column:1 !important;
	grid-row:1 !important;
}
.woocommerce-account .u-columns .u-column2{
	grid-column:2 !important;
	grid-row:1 !important;
}
.woocommerce-account .u-columns .u-column1 .login,
.woocommerce-account .u-columns .u-column1 form.login{
	background:var(--cinza-card);
	border-radius:var(--raio-card);
	padding:38px 36px 40px;
}
.woocommerce-account .u-columns .u-column2 .register,
.woocommerce-account .u-columns .u-column2 form.register{
	background:var(--cinza-card);
	border-radius:var(--raio-card);
	padding:38px 36px 40px;
}
.woocommerce-account .u-columns h2{
	font-family:var(--fonte-base);
	font-size:22px;
	font-weight:700;
	color:var(--preto);
	margin:0 0 24px;
}

/* Botao: Anmelden vermelho, Registrieren verde */
.woocommerce form.login button[type="submit"],
.woocommerce-account .u-column1 button.woocommerce-button{
	background:var(--vermelho) !important;
	border-color:var(--vermelho) !important;
	color:var(--branco) !important;
	height:54px;
	font-family:var(--fonte-base);
	font-size:15px;
	font-weight:700;
	border-radius:var(--raio-botao) !important;
	box-shadow:none !important;
}
.woocommerce form.login button[type="submit"]:hover,
.woocommerce-account .u-column1 button.woocommerce-button:hover{
	background:var(--vermelho-hover) !important;
	border-color:var(--vermelho-hover) !important;
}
.woocommerce form.register button[type="submit"],
.woocommerce-account .u-column2 button.woocommerce-button{
	background:var(--verde) !important;
	border-color:var(--verde) !important;
	color:var(--branco) !important;
	height:54px;
	font-family:var(--fonte-base);
	font-size:15px;
	font-weight:700;
	border-radius:var(--raio-botao) !important;
	box-shadow:none !important;
}
.woocommerce form.register button[type="submit"]:hover,
.woocommerce-account .u-column2 button.woocommerce-button:hover{
	background:var(--verde-escuro) !important;
	border-color:var(--verde-escuro) !important;
}

/* Checkbox de aceite — Datenschutz/AGB */
.woocommerce form .kb-consent-row{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:0 0 20px;
	font-family:var(--fonte-base);
	font-size:14px;
	line-height:1.5;
	color:var(--preto);
}
.woocommerce form .kb-consent-row input[type="checkbox"]{
	width:18px;
	height:18px;
	flex:0 0 auto;
	margin-top:2px;
	accent-color:var(--verde);
}
/* GL (24/08/2026): min-width:0 no label — sem isso o item flex nao
   encolhia (largura intrinseca do texto+link sem quebra), e o texto de
   consentimento vazava a viewport em mobile (medido: scrollWidth 427
   contra clientWidth 375 em /mein-konto/, 52px de transbordo). */
.woocommerce form .kb-consent-row label{
	flex:1 1 auto;
	min-width:0;
}
.woocommerce form .kb-consent-row a{
	color:var(--verde);
	text-decoration:underline;
}

/* ===== Endereco / edicao de conta / checkout — mesma grade de campo ===== */
.woocommerce-checkout .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row{
	margin-bottom:20px;
}
.woocommerce-checkout #payment,
.woocommerce-cart table.shop_table{
	border-radius:var(--raio-card);
}

@media (max-width: 780px){
	/* GL (24/08/2026): !important adicionado — a regra desktop (linha ~74)
	   ja usa !important, e uma media query sem !important NUNCA vence uma
	   regra !important fora dela, mesmo com a condicao de largura batendo.
	   Sem isso as duas colunas nunca colapsavam em mobile: medido em
	   /mein-konto/ a 375px, a coluna de registro ficava com ~32px de
	   largura computada (2 colunas de minmax(0,1fr) espremidas em 375px),
	   e o texto/link de privacidade vazava a viewport (scrollWidth 427
	   contra clientWidth 375). */
	.woocommerce-account.logged-out .u-columns,
	.woocommerce-page .u-columns,
	.woocommerce-account.logged-out .u-columns.col2-set,
	.woocommerce-page .u-columns.col2-set{
		grid-template-columns:1fr !important;
		gap:0 !important;
	}
	/* L1D (25/08/2026): a regra desktop (linha ~83/87) fixa grid-column:1/2 E
	   grid-row:1 (as duas na mesma linha, lado a lado) por !important fora
	   de qualquer media query. Reduzir para 1fr acima nao muda nenhum dos
	   dois — o Grid cria uma trilha implicita dimensionada pelo min-content
	   do form de registro, os dois cards ficam lado a lado e o documento
	   alarga (medido: 552px a 375px de viewport). Resetar so o grid-column
	   sem tambem resetar o grid-row FAZ os dois ficarem sobrepostos na mesma
	   celula (linha 1, coluna 1) em vez de empilhados — medido na primeira
	   tentativa desta janela: title "Anmelden"/"Registrieren" e os dois
	   formularios inteiros desenhados um por cima do outro. Resetar as duas
	   propriedades aqui dentro do mobile. */
	.woocommerce-account .u-columns .u-column1,
	.woocommerce-account .u-columns .u-column2{
		grid-column:1 !important;
		grid-row:auto !important;
	}
	.woocommerce form .form-row.form-row-first,
	.woocommerce form .form-row.form-row-last{
		width:100%;
	}
}