/**
 * AEBIT — Login base para Mi cuenta (WooCommerce).
 * Estructura y full-screen del login de invitados. Movido desde blocksy-child/style.css.
 * El overlay de marca CONFIGURABLE lo emite white-label-login.php (bloque wc) INLINE
 * y DESPUÉS de este archivo, por lo que los ajustes de *Ajustes → Custom Login* ganan.
 */

/* Ocultar cabeceras y pies de página en login para dejarlo a pantalla completa limpia */
body.woocommerce-account:not(.logged-in) [data-id="header"],
body.woocommerce-account:not(.logged-in) [data-id="footer"],
body.woocommerce-account:not(.logged-in) .ct-header,
body.woocommerce-account:not(.logged-in) .ct-footer,
body.woocommerce-account:not(.logged-in) header,
body.woocommerce-account:not(.logged-in) footer,
body.woocommerce-account:not(.logged-in) #header,
body.woocommerce-account:not(.logged-in) #footer {
	display: none !important;
}

/* Full viewport height for the login, pero permitiendo crecer/scroll cuando hay
   avisos de error (antes rompía el layout por height/overflow fijos). */
body.woocommerce-account:not(.logged-in) {
	min-height: 100vh !important;
	overflow-y: auto !important;
	background-color: #ffffff !important; /* Fondo blanco para dar luz a través de la transparencia */
	position: relative !important;
}

body.woocommerce-account:not(.logged-in)::before {
	content: "" !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: -2 !important;
	background-image: url('/wp-content/uploads/aebitcanarias-login-bg.webp') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	opacity: 0.85 !important; /* Mayor opacidad para que resplandezca el fondo blanco */
	filter: brightness(1.12) contrast(0.95) !important; /* Mayor brillo y suavizado de contrastes */
	transform: none !important;
	pointer-events: none !important;
}

/* Reset and align all Blocksy inner wrappers to fill 100vh and stretch content horizontally */
body.woocommerce-account:not(.logged-in) #page,
body.woocommerce-account:not(.logged-in) #main-container,
body.woocommerce-account:not(.logged-in) .ct-container,
body.woocommerce-account:not(.logged-in) .site-container,
body.woocommerce-account:not(.logged-in) #content,
body.woocommerce-account:not(.logged-in) #main,
body.woocommerce-account:not(.logged-in) .site-main,
body.woocommerce-account:not(.logged-in) article,
body.woocommerce-account:not(.logged-in) .entry-content,
body.woocommerce-account:not(.logged-in) .site {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: stretch !important; /* Stretch evita el encogimiento de ancho por flexbox */
	margin: 0 !important;
	padding: 0 !important; /* Sin padding: esta regla afecta a varios wrappers anidados y se acumularía */
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Centrado a prueba de wrappers: fijamos la tarjeta al centro del viewport con
   position:fixed + translate, así NO dependemos de la cadena de contenedores de
   Blocksy (que rompía el centrado). Si la tarjeta es más alta que la pantalla,
   hace scroll interno (max-height + overflow) manteniendo 16px arriba/abajo. */
body.woocommerce-account:not(.logged-in) .woocommerce {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	max-width: 450px !important;
	max-height: calc(100vh - 32px) !important;
	margin: 0 !important;
	padding: 24px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
}

/* ── Comportamiento Adaptable en Móviles (max-width 768px) ── */
@media (max-width: 768px) {
	/* Ajustar el fondo responsivo */
	body.woocommerce-account:not(.logged-in)::before {
		background-image: url('/wp-content/uploads/aebitcanarias-bg-responsive.webp') !important;
		background-position: center center !important;
		opacity: 0.8 !important;
		filter: brightness(1.1) !important;
	}

	/* Centrar y dimensionar el contenedor WooCommerce en móviles (con aire vertical
	   para que la tarjeta no quede pegada a los bordes superior/inferior) */
	body.woocommerce-account:not(.logged-in) .woocommerce {
		max-width: 420px !important;
		padding: 32px 16px !important;
	}

	/* Compactar el padding del formulario en móviles de forma equilibrada */
	body.woocommerce-account:not(.logged-in) .woocommerce-form-login {
		padding: 30px 24px !important; /* Más aire lateral interno */
		width: 100% !important;
		border-radius: 16px !important;
	}

	/* Ajustar tamaño de textos en el card de login para móviles */
	body.woocommerce-account:not(.logged-in) .login-card-title {
		font-size: 18px !important;
		margin-bottom: 15px !important; /* Más aire abajo del título */
	}

	body.woocommerce-account:not(.logged-in) .login-card-subtitle {
		display: none !important; /* Ocultar completamente por si acaso */
	}

	/* Espacio del botón Volver al Inicio */
	body.woocommerce-account:not(.logged-in) .login-volver-inicio-container {
		margin-bottom: 20px !important; /* Más aire abajo del botón */
	}

	/* Inputs y botones de WooCommerce en móviles */
	body.woocommerce-account:not(.logged-in) .woocommerce-form-login input.input-text,
	body.woocommerce-account:not(.logged-in) .woocommerce-form-login button.woocommerce-form-login__submit {
		height: 44px !important; /* Un poco más de altura para legibilidad */
		padding: 10px 14px !important;
		font-size: 14px !important;
	}
	
	body.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row {
		margin-bottom: 18px !important; /* Más separación vertical entre inputs */
	}

	body.woocommerce-account:not(.logged-in) .login-card-logo-container {
		margin-bottom: 14px !important;
	}

	body.woocommerce-account:not(.logged-in) .login-card-logo {
		max-width: 140px !important;
	}

	body.woocommerce-account:not(.logged-in) .no-cuenta-registro {
		margin-top: 20px !important;
		padding-top: 15px !important;
	}
}

/* Adjustments for notebook/laptop screens with lower vertical resolution */
@media (max-height: 820px) {
	.woocommerce-form-login {
		padding: 25px 30px !important;
		border-radius: 16px !important;
	}
	.login-card-header {
		margin-bottom: 15px !important;
	}
	.login-card-logo-container {
		margin-bottom: 12px !important;
	}
	.login-card-logo {
		max-width: 145px !important;
	}
	.login-card-title {
		font-size: 19px !important;
		margin-bottom: 4px !important;
	}
	.login-card-subtitle {
		font-size: 12.5px !important;
		margin-bottom: 10px !important;
	}
	.woocommerce-form-login .form-row {
		margin-bottom: 12px !important;
	}
	.woocommerce-form-login input.input-text,
	.woocommerce-form-login button.woocommerce-form-login__submit {
		height: 42px !important;
	}
	.no-cuenta-registro {
		margin-top: 20px !important;
		padding-top: 15px !important;
	}
}

/* Ocultar el título de login externo por defecto de WooCommerce */
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	display: none !important;
}

@keyframes aebitLoginFadeUp {
	0% {
		opacity: 0;
		transform: translateY(24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes aebitFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Caja del formulario de Login */
.woocommerce-form-login {
	background: #ffffff !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
	border: 1px solid #e2e8f0 !important;
	padding: 40px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	font-family: 'Poppins', sans-serif !important;
	animation: aebitLoginFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Animación sutil de entrada para la cabecera, volver al inicio y alertas */
.login-card-header,
.login-volver-inicio-container,
.woocommerce-error {
	animation: aebitFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Campos y etiquetas */
.woocommerce-form-login label {
	font-family: 'Poppins', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.woocommerce-form-login input.input-text {
	width: 100% !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #0f172a !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
	font-family: 'Poppins', sans-serif !important;
	height: 48px !important;
}

.woocommerce-form-login input.input-text:focus {
	border-color: #007a43 !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3.5px rgba(0, 122, 67, 0.1) !important;
	outline: none !important;
}

/* Fila de campos */
.woocommerce-form-login .form-row {
	margin-bottom: 20px !important;
	position: relative !important;
}

/* Remember me checkbox */
.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #64748b !important;
	cursor: pointer !important;
	margin: 5px 0 15px 0 !important;
	user-select: none !important;
}

.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	margin-right: 8px !important;
	width: 17px !important;
	height: 17px !important;
	border-radius: 4px !important;
	border: 1.5px solid #cbd5e1 !important;
	cursor: pointer !important;
	accent-color: #007a43 !important;
}

/* Botón de envío */
.woocommerce-form-login button.woocommerce-form-login__submit {
	width: 100% !important;
	background-color: #007a43 !important;
	color: #ffffff !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 12px 20px !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	font-family: 'Poppins', sans-serif !important;
	margin-top: 5px !important;
}

.woocommerce-form-login button.woocommerce-form-login__submit:hover {
	background-color: #005a32 !important;
	box-shadow: 0 4px 14px rgba(0, 90, 50, 0.2) !important;
}

/* Enlace de contraseña perdida */
.woocommerce-form-login .lost_password {
	margin-top: 15px !important;
	margin-bottom: 0 !important;
	font-size: 13.5px !important;
	text-align: center !important;
}

.woocommerce-form-login .lost_password a {
	color: #007a43 !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
	font-weight: 600 !important;
}

.woocommerce-form-login .lost_password a:hover {
	color: #005a32 !important;
	text-decoration: underline !important;
}

/* Errores de WooCommerce */
/* Avisos (errores de login) como TOAST FLOTANTE arriba-centro: salen del flujo
   para que la tarjeta de login quede siempre centrada, pase lo que pase.
   Solo en el login de invitados; en Mi cuenta logueado se mantiene el flujo normal. */
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: 10px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 20 !important;
	font-family: 'Poppins', sans-serif !important;
	box-sizing: border-box !important;
}

.woocommerce-account ul.woocommerce-error {
	background-color: #fef2f2 !important;
	border: 1.5px solid #fca5a5 !important;
	border-radius: 10px !important;
	color: #991b1b !important;
	padding: 12px 18px !important;
	list-style: none !important;
	margin: 0 !important;
	font-size: 13.5px !important;
}

.woocommerce-account ul.woocommerce-error li {
	margin: 0 !important;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 520px) {
	.woocommerce-form-login {
		padding: 30px 20px !important;
		border-radius: 16px !important;
	}
	body.woocommerce-account:not(.logged-in) .woocommerce {
		margin: 0 !important;
		width: calc(100% - 32px) !important;
		box-sizing: border-box !important;
	}
}

/* ── Alertas de Error WooCommerce en Login ── */
body.woocommerce-account:not(.logged-in) .woocommerce-error {
	background-color: #fef2f2 !important;
	border: 1.5px solid #fecaca !important;
	border-radius: 12px !important;
	padding: 16px 44px 16px 20px !important;
	color: #991b1b !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	box-shadow: 0 4px 12px rgba(153, 27, 27, 0.05) !important;
	margin: 0 auto 20px auto !important;
	width: 100% !important;
	max-width: 450px !important;
	box-sizing: border-box !important;
	list-style: none !important;
	position: relative !important;
}

body.woocommerce-account:not(.logged-in) .woocommerce-error::before {
	display: none !important; /* Elimina el icono roto de Blocksy que se monta */
}

body.woocommerce-account:not(.logged-in) .woocommerce-error li {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

body.woocommerce-account:not(.logged-in) .woocommerce-error a {
	color: #b91c1c !important;
	text-decoration: underline !important;
	font-weight: 700 !important;
}

body.woocommerce-account:not(.logged-in) .woocommerce-error a:hover {
	color: #7f1d1d !important;
}

/* ──────────────────────────────────────────────────────────────
   Icono "mostrar contraseña" duplicado
   WooCommerce y Blocksy inyectan cada uno su toggle en el mismo
   campo de contraseña del login. Dejamos solo el primero.
   ────────────────────────────────────────────────────────────── */
.woocommerce-form-login .show-password-input ~ .show-password-input,
.woocommerce-form-login .password-input + .show-password-input,
.woocommerce-form-login .account-password-input {
	display: none !important;
}

/* Centrar verticalmente el icono "mostrar contraseña" dentro del input (48px de alto) */
.woocommerce-form-login .password-input {
	position: relative !important;
	display: block !important;
}
.woocommerce-form-login .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
/* Hueco a la derecha para que el texto no quede bajo el icono */
.woocommerce-form-login input#password {
	padding-right: 44px !important;
}

/* ── Botón de cierre del toast de avisos (inyectado por JS) ── */
body.woocommerce-account:not(.logged-in) .aebit-notice-close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	width: 26px !important;
	height: 26px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	background: transparent !important;
	color: #991b1b !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
}
body.woocommerce-account:not(.logged-in) .aebit-notice-close:hover {
	opacity: 1 !important;
}