/* ============================================================
   KinkSports UI — Header (perfil + hamburguesa) y menu mobile
   Linea "Pink Noir": hot-pink sobre violeta-negro. Oswald + Inter.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--ksui-pink: #ff2d7e;
	--ksui-pink-bright: #ff5ca8;
	--ksui-pink-deep: #c20e55;
	--ksui-grad: linear-gradient(135deg, #ff2d7e, #c20e55);
	--ksui-bg: #0b0a0f;
	--ksui-surface: #16131c;
	--ksui-line: rgba(255, 255, 255, .08);
	--ksui-text: #ffffff;
	--ksui-text-2: #c7c2d0;
}

/* ============================================================
   1) ICONO DE PERFIL ("munequito") -> circulo con gradiente + glow
   ============================================================ */
.wdt-user-authlink-menu-icon { background: none !important; }
.wdt-user-authlink-menu-icon > a {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 36px !important; height: 36px !important; padding: 0 !important;
	font-size: 0 !important; line-height: 0 !important; /* mata cualquier texto colado (ej. "Log In") */
	background: var(--ksui-grad) !important;
	border-radius: 50% !important;
	box-shadow: 0 6px 18px rgba(255, 45, 126, .45), inset 0 0 0 1px rgba(255, 255, 255, .14) !important;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.wdt-user-authlink-menu-icon > a:hover {
	transform: translateY(-2px) scale(1.04) !important;
	box-shadow: 0 10px 26px rgba(255, 45, 126, .6), inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
	filter: brightness(1.05) !important;
}
/* esconde la etiqueta de texto ("Log In" / "My Account") -> solo el icono */
.wdt-user-authlink-menu-icon .icotype-label { display: none !important; }
.wdt-user-authlink-menu-icon > a > span { background: none !important; display: inline-flex !important; align-items: center; justify-content: center; line-height: 0; }
.wdt-user-authlink-menu-icon > a svg,
.wdt-user-authlink-menu-icon > a svg path {
	width: 15px !important; height: 15px !important; fill: #fff !important; color: #fff !important;
}

/* ============================================================
   2) HAMBURGUESA -> 3 barras nitidas, hover rosa
   ============================================================ */
.menu-trigger.menu-trigger-icon { display: inline-flex !important; align-items: center; }
.menu-trigger-icon i {
	position: relative; display: inline-block !important;
	width: 26px !important; height: 2px !important;
	background: var(--ksui-text) !important; border-radius: 2px !important;
	transition: background .2s ease !important; box-shadow: none !important; border: 0 !important;
}
.menu-trigger-icon i::before,
.menu-trigger-icon i::after {
	content: "" !important; position: absolute !important; left: 0 !important;
	width: 26px !important; height: 2px !important;
	background: var(--ksui-text) !important; border-radius: 2px !important;
	transition: background .2s ease, transform .25s ease !important;
}
.menu-trigger-icon i::before { top: -8px !important; }
.menu-trigger-icon i::after { top: 8px !important; }
.menu-trigger-icon:hover i,
.menu-trigger-icon:hover i::before,
.menu-trigger-icon:hover i::after { background: var(--ksui-pink-bright) !important; }
/* oculta el texto "Menu" si el tema lo deja colado */
.menu-trigger-icon > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   3) MENU MOBILE (offcanvas) -> panel Pink Noir
   ============================================================ */
.mobile-nav-container .mobile-menu,
.mobile-nav-offcanvas-right .mobile-menu {
	background: var(--ksui-bg) !important;
	font-family: 'Inter', sans-serif !important;
	border-left: 1px solid var(--ksui-line) !important;
	box-shadow: -24px 0 60px rgba(0, 0, 0, .6) !important;
}
.mobile-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mobile-menu li { border-bottom: 1px solid var(--ksui-line) !important; margin: 0 !important; }

.mobile-menu li a {
	display: block !important; position: relative;
	padding: 16px 22px !important; margin: 0 !important;
	font-family: 'Oswald', sans-serif !important; font-weight: 500 !important;
	font-size: .98rem !important; letter-spacing: .06em !important; text-transform: uppercase !important;
	color: var(--ksui-text) !important; text-decoration: none !important;
	border: 0 !important; background: none !important;
	transition: background .22s ease, color .22s ease, padding .22s ease !important;
}
.mobile-menu li a:hover {
	background: rgba(255, 45, 126, .08) !important;
	color: var(--ksui-pink-bright) !important;
	padding-left: 28px !important;
}

/* item activo -> gradiente con barra lateral (en vez del rosa plano) */
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a,
.mobile-menu .current-menu-ancestor > a,
.mobile-menu .current-menu-parent > a {
	background: var(--ksui-grad) !important; color: #fff !important;
	box-shadow: inset 4px 0 0 rgba(255, 255, 255, .35) !important;
}
.mobile-menu .current-menu-item > a:hover { padding-left: 22px !important; }

/* flecha de submenu (Shop >) en rosa */
.mobile-menu .menu-item-has-children > a::after,
.mobile-menu .sub-menu-toggle,
.mobile-menu .menu-item-has-children > .submenu-expand {
	color: var(--ksui-pink-bright) !important;
}
/* submenu anidado: ligeramente hundido y con fondo sutil */
.mobile-menu .sub-menu { background: rgba(255, 255, 255, .02) !important; }
.mobile-menu .sub-menu li a { padding-left: 36px !important; font-size: .9rem !important; color: var(--ksui-text-2) !important; }
.mobile-menu .sub-menu li a:hover { color: var(--ksui-pink-bright) !important; }

/* boton cerrar (X) en rosa al hover */
.mobile-nav-container [class*="close"],
.mobile-nav-container .menu-trigger-close,
.mobile-menu .close {
	color: var(--ksui-text) !important; opacity: .85; transition: color .2s ease, opacity .2s ease !important;
}
.mobile-nav-container [class*="close"]:hover { color: var(--ksui-pink-bright) !important; opacity: 1; }

/* overlay con blur */
.mobile-nav-container .overlay,
.b-menu-overlay,
.mobile-nav-container .b-menu-overlay {
	background: rgba(6, 5, 9, .62) !important;
	-webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
}

/* ============================================================
   4) LOGIN / MY ACCOUNT -> Pink Noir
   ============================================================ */
/* CAUSA RAIZ (auditada en grid.css): el tema pone  #primary { width: calc(100% - 520px) }
   reservando 520px para un sidebar inexistente -> el contenido queda en una franja
   angosta a la derecha. Forzamos #primary y toda la cadena a 100% y centramos el form
   con inline-block + text-align:center. :has() lo limita SOLO a la pagina de login. */
body.ksui-login-page #main,
body.ksui-login-page .container,
body.ksui-login-page #primary,
body.ksui-login-page #primary.content-full-width,
body.ksui-login-page #post-111,
body.ksui-login-page .post-111,
body.ksui-login-page .woocommerce {
	display: block !important; float: none !important;
	width: 100% !important; max-width: 100% !important;
	margin-left: auto !important; margin-right: auto !important;
	padding-left: 0 !important; padding-right: 0 !important;
	text-align: center !important;
	left: auto !important; right: auto !important;
}
/* CAUSA RAIZ (medida en navegador headless): un CSS viejo del sitio
   (.woocommerce form.login { width:50%; left:50%; transform:translateX(-50%) })
   estaba escrito para un form ABSOLUTE, pero este form es position:relative ->
   left:50% lo empujaba +690px y translateX(-50%) solo regresaba -540px = +150px
   a la derecha. El fix previo subio el ancho pero NUNCA anulo left/transform.
   Aqui se neutralizan y se centra de verdad con margin auto. */
body.ksui-login-page form.woocommerce-form-login,
html body.woocommerce-account form.woocommerce-form.woocommerce-form-login.login {
	position: relative !important;
	left: 0 !important; right: auto !important;
	transform: none !important;
	float: none !important; clear: both !important;
	display: block !important;
	margin-left: auto !important; margin-right: auto !important;
	text-align: left !important;
}

/* card del formulario — selector de MAXIMA especificidad (3 clases del form +
   html/body) para ganarle a cualquier regla de ancho del tema/Elementor. */
html body.woocommerce-account form.woocommerce-form.woocommerce-form-login.login,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account .woocommerce-form-login {
	display: block !important; float: none !important;
	width: 440px !important; max-width: 90% !important;
	margin-left: auto !important; margin-right: auto !important;
	left: 0 !important; transform: none !important; /* mata el shift del CSS viejo */
	text-align: left !important;
	box-sizing: border-box !important;
	background: var(--ksui-surface) !important;
	border: 1px solid var(--ksui-line) !important;
	border-radius: 16px !important;
	padding: 32px 28px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 45, 126, .05) !important;
	font-family: 'Inter', sans-serif !important;
}

/* labels */
body.woocommerce-account .woocommerce-form-login label,
body.woocommerce-account .woocommerce-form-row label {
	color: #fff !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important;
	font-size: .95rem !important;
}

/* inputs (eran blancos -> oscuros Pink Noir) */
body.woocommerce-account .woocommerce-form-login .input-text,
body.woocommerce-account .woocommerce-form-login input#username,
body.woocommerce-account .woocommerce-form-login input#password,
body.woocommerce-account .woocommerce-form-login input[type="text"],
body.woocommerce-account .woocommerce-form-login input[type="password"],
body.woocommerce-account .woocommerce-form-login input[type="email"] {
	width: 100% !important;
	background: var(--ksui-bg) !important; color: #fff !important;
	border: 1px solid var(--ksui-line) !important; border-radius: 10px !important;
	padding: 14px 16px !important; font-size: 1rem !important; box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.woocommerce-account .woocommerce-form-login input:focus {
	border-color: var(--ksui-pink) !important;
	box-shadow: 0 0 0 3px rgba(255, 45, 126, .16) !important; outline: none !important;
}
body.woocommerce-account .woocommerce-form-login input::placeholder { color: var(--ksui-text-2) !important; opacity: 1; }

/* AUTOCOMPLETADO: el navegador/gestor de contrasenas pinta el campo (se veia MORADO).
   Forzamos el fondo oscuro y el texto blanco en estado autofill. */
body.woocommerce-account .woocommerce-form-login input:-webkit-autofill,
body.woocommerce-account .woocommerce-form-login input:-webkit-autofill:hover,
body.woocommerce-account .woocommerce-form-login input:-webkit-autofill:focus,
body.woocommerce-account .woocommerce-form-login input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--ksui-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--ksui-bg) inset !important;
	-webkit-text-fill-color: #fff !important; caret-color: #fff !important;
	border: 1px solid var(--ksui-line) !important;
	transition: background-color 9999s ease-out !important; /* evita el flash del autofill */
}

/* toggle de ver contrasena (ojo) -> chico, a la derecha, dentro del campo */
body.woocommerce-account .woocommerce-form-login .password-input {
	position: relative !important; display: block !important;
}
body.woocommerce-account .woocommerce-form-login .password-input input { padding-right: 44px !important; }
body.woocommerce-account .woocommerce-form-login .show-password-input {
	position: absolute !important; top: 50% !important; right: 14px !important; left: auto !important; bottom: auto !important;
	transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important;
	width: 22px !important; height: 22px !important;
	font-size: 15px !important; line-height: 22px !important; text-align: center !important;
	color: var(--ksui-text-2) !important; cursor: pointer; z-index: 3;
}
body.woocommerce-account .woocommerce-form-login .show-password-input::before,
body.woocommerce-account .woocommerce-form-login .show-password-input::after {
	font-size: 15px !important; line-height: 22px !important; width: auto !important; height: auto !important;
}
body.woocommerce-account .woocommerce-form-login .show-password-input.display-password,
body.woocommerce-account .woocommerce-form-login .show-password-input:hover { color: var(--ksui-pink-bright) !important; }

/* remember me */
body.woocommerce-account .woocommerce-form-login__rememberme { color: var(--ksui-text-2) !important; display: inline-flex; align-items: center; gap: 8px; }
body.woocommerce-account .woocommerce-form__input-checkbox { accent-color: var(--ksui-pink) !important; width: 16px; height: 16px; }

/* boton LOG IN (era morado -> gradiente rosa, pill) */
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-login button[name="login"] {
	display: block !important; width: 100% !important;
	background: var(--ksui-grad) !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; padding: 15px 40px !important;
	font-family: 'Oswald', sans-serif !important; font-weight: 600 !important;
	text-transform: uppercase !important; letter-spacing: .09em !important; font-size: .95rem !important;
	box-shadow: 0 10px 26px rgba(255, 45, 126, .4) !important; cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
body.woocommerce-account .woocommerce-form-login__submit:hover {
	filter: brightness(1.07) !important; transform: translateY(-2px) !important;
	box-shadow: 0 16px 34px rgba(255, 45, 126, .55) !important;
}

/* lost your password */
body.woocommerce-account .woocommerce-LostPassword a {
	color: var(--ksui-pink-bright) !important; text-decoration: none !important; font-weight: 500;
}
body.woocommerce-account .woocommerce-LostPassword a:hover { color: #fff !important; }

/* heading LOGIN: acento rosa debajo */
body.woocommerce-account .entry-content h1,
body.woocommerce-account .woocommerce-account-title,
body.woocommerce-account h1.entry-title {
	font-family: 'Oswald', sans-serif !important; text-transform: uppercase; letter-spacing: .04em; color: #fff !important;
}

/* ---- LOGIN responsive (mobile) ---- */
@media (max-width: 600px) {
	html body.woocommerce-account form.woocommerce-form.woocommerce-form-login.login,
	body.woocommerce-account form.woocommerce-form-login,
	body.woocommerce-account .woocommerce-form-login {
		width: 94% !important; max-width: 94% !important;
		padding: 22px 16px !important; border-radius: 12px !important;
	}
	body.woocommerce-account .woocommerce-form-login .input-text,
	body.woocommerce-account .woocommerce-form-login input[type="text"],
	body.woocommerce-account .woocommerce-form-login input[type="password"] {
		padding: 12px 14px !important; font-size: 16px !important; /* 16px evita el zoom de iOS */
	}
	body.woocommerce-account .woocommerce-form-login__submit { padding: 14px 24px !important; }
}