/* ============================================================
   LOGIN V8 — PELE sobre a função nativa do WooCommerce/Razzi.
   Prefixo v8sf-login-* (card/pele) + estilos das CLASSES NATIVAS
   (woocommerce-form, form-row, woocommerce-Input, botões).
   REGRA 0.0: nunca renomear/mexer na estrutura nativa.
   ============================================================ */

/* Fundo do design system (mesmo do carrinho): cinza V8, texto padrão. */
body.fastyshop-v8-login {
	background: var(--bg, #F3F4F6) !important;
	color: var(--text-main, #111827) !important;
	overflow-x: hidden !important;
}

.v8sf-login {
	max-width: 420px !important;
	margin: 0 auto !important;
	/* Respiro igual ao Razzi (padding-top 80px) + bottom 40px +
	   min-height + center para ocupar a viewport quando sem footer. */
	padding: 60px 10px 40px !important;
	min-height: calc(100dvh - 140px) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Card skeleton (a PELE) ── */
.v8sf-login-card {
	width: 100% !important;
	background: var(--surface, #ffffff) !important;
	border: 1px solid var(--border, #e5e7eb) !important;
	border-radius: 18px !important;
	padding: 28px 22px 24px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px -16px rgba(0, 0, 0, 0.12) !important;
}

/* ── Título / subtítulo da pele ── */
.v8sf-login-title {
	margin: 0 0 6px !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--text-main, #111827) !important;
	line-height: 1.25 !important;
}

.v8sf-login-sub {
	margin: 0 0 20px !important;
	font-size: 14px !important;
	color: var(--text-muted, #6b7280) !important;
	line-height: 1.5 !important;
}

/* ── Notices (erro/sucesso) ── */
.v8sf-login-notices {
	margin-bottom: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.v8sf-login-msg {
	padding: 12px 14px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

.v8sf-login-msg.is-error {
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	color: #b91c1c !important;
}

.v8sf-login-msg.is-success {
	background: #ecfdf5 !important;
	border: 1px solid #a7f3d0 !important;
	color: #047857 !important;
}

.v8sf-login-msg a {
	color: inherit !important;
	font-weight: 800 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   ESTILOS SOBRE AS CLASSES NATIVAS (a pele NÃO muda a função)
   ════════════════════════════════════════════════════════════ */

/* Esconde títulos/descrições nativos duplicados (o card V8 tem o seu). */
.v8sf-login-native .u-columns h2,
.v8sf-login-native .woocommerce-column__title,
.v8sf-login-native .reset-depscription,
.v8sf-login-native .clear {
	display: none !important;
}

/* Campos de honeypot (anti-spam) — não devem aparecer na tela. */
.v8sf-login-native .altEmail_container,
.v8sf-login-native .wpa_hidden_field,
.v8sf-login-native #altEmail_container {
	display: none !important;
}

/* Mensagem nativa em inglês do form de nova senha (a pele dá o texto). */
.v8sf-login-native .woocommerce-ResetPassword > p:first-child {
	display: none !important;
}

/* Texto a11y "Obrigatório" fora do lugar — escondido na pele. */
.v8sf-login-native .screen-reader-text {
	display: none !important;
}

/* Asterisco de campo obrigatório — discreto, no padrão. */
.v8sf-login-native .required {
	color: var(--danger, #dc2626) !important;
	margin-left: 2px !important;
}

/* Notices nativos do WooCommerce dentro da pele (evita o "azul solto"). */
.v8sf-login-native .woocommerce-message,
.v8sf-login-native .woocommerce-info,
.v8sf-login-native .woocommerce-error {
	list-style: none !important;
	margin: 0 0 16px !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	border: 1px solid !important;
}

.v8sf-login-native .woocommerce-message {
	background: #ecfdf5 !important;
	border-color: #a7f3d0 !important;
	color: #047857 !important;
}

.v8sf-login-native .woocommerce-info {
	background: #eff6ff !important;
	border-color: #bfdbfe !important;
	color: #1d4ed8 !important;
}

.v8sf-login-native .woocommerce-error {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
	color: #b91c1c !important;
}

/* Form */
.v8sf-login-native .woocommerce-form,
.v8sf-login-native .woocommerce-ResetPassword {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	margin: 0 !important;
}

.v8sf-login-native .woocommerce-form-row {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Inputs */
.v8sf-login-native .woocommerce-Input {
	width: 100% !important;
	height: 46px !important;
	padding: 0 14px !important;
	border: 1.5px solid var(--border, #e5e7eb) !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--text-main, #111827) !important;
	background: #fafafa !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
}

.v8sf-login-native .woocommerce-Input:focus {
	border-color: var(--success, #10b981) !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

/* Remember me + lost password numa linha */
.v8sf-login-native .form-row-remember {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
}

.v8sf-login-native .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--text-muted, #6b7280) !important;
	cursor: pointer !important;
}

.v8sf-login-native .woocommerce-form__input-checkbox {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	accent-color: var(--success, #10b981) !important;
}

.v8sf-login-native .woocommerce-LostPassword {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.v8sf-login-native .woocommerce-LostPassword a {
	color: var(--text-muted, #6b7280) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.v8sf-login-native .woocommerce-LostPassword a:hover {
	color: var(--success, #10b981) !important;
}

/* Botões (login / lost / reset) — padrão V8 */
.v8sf-login-native .woocommerce-button,
.v8sf-login-native .woocommerce-Button {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 16px 20px !important;
	border: none !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	cursor: pointer !important;
	box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.5) !important;
	position: relative !important;
	overflow: hidden !important;
	font-family: inherit !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.v8sf-login-native .woocommerce-button:hover,
.v8sf-login-native .woocommerce-Button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.6) !important;
}

.v8sf-login-native .woocommerce-button.is-loading,
.v8sf-login-native .woocommerce-Button.is-loading {
	pointer-events: none !important;
	cursor: wait !important;
	opacity: 0.92 !important;
	transform: none !important;
}

.v8sf-login-native .woocommerce-button.is-loading::after,
.v8sf-login-native .woocommerce-Button.is-loading::after {
	content: "" !important;
	width: 17px !important;
	height: 17px !important;
	border: 2px solid rgba(255, 255, 255, 0.45) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: v8sf-login-spin 0.7s linear infinite !important;
}

@keyframes v8sf-login-spin {
	to { transform: rotate(360deg); }
}

/* ── Olhinho (injetado por JS por cima do input nativo) ── */
.v8sf-login-passwrap {
	position: relative !important;
	display: block !important;
}

.v8sf-login-passwrap .woocommerce-Input {
	padding-right: 44px !important;
}

.v8sf-login-eye {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--text-muted, #9ca3af) !important;
	cursor: pointer !important;
	transition: color 0.2s ease !important;
}

.v8sf-login-eye:hover {
	color: var(--text-main, #111827) !important;
}

.v8sf-login-eye.is-active {
	color: var(--success, #10b981) !important;
}

.v8sf-login-eye svg {
	display: block !important;
}

.v8sf-login-eye svg[hidden] {
	display: none !important;
}

/* ── Botão "Continuar comprando" ── */
.v8sf-login-shop {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 20px !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--border, #e5e7eb) !important;
	background: var(--surface, #ffffff) !important;
	color: var(--text-muted, #6b7280) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: border-color 0.2s ease, color 0.2s ease !important;
}

.v8sf-login-shop:hover {
	border-color: var(--success, #10b981) !important;
	color: var(--text-main, #111827) !important;
}

.v8sf-login-shop svg {
	color: var(--success, #10b981) !important;
	flex-shrink: 0 !important;
}

/* ── Voltar ao login (página de recuperar senha) ── */
.v8sf-login-back {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 16px !important;
	color: var(--text-muted, #6b7280) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.v8sf-login-back:hover {
	color: var(--success, #10b981) !important;
}

.v8sf-login-back svg {
	flex-shrink: 0 !important;
}