/* ---------- Aplica SOLO si NO está logueado (body no tiene .logged-in) ---------- */

/* ---------- Aplica SOLO si NO está logueado ---------- */

body.woocommerce-account:not(.logged-in) .woocommerce {
  position: relative;
  min-height: 100vh !important;
  padding: 40px 0 !important;
  color: #fff !important;
  /* Aseguramos que el contenido esté por encima del pseudo-elemento */
  z-index: 1;
  overflow: hidden;
}

/* Creamos una capa para el fondo con opacidad */
body.woocommerce-account:not(.logged-in) .woocommerce::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.productosjumbo.com/wp-content/uploads/2025/09/Fondo.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  
  /* Aquí ajustas la opacidad (0.8 = 80%) */
  opacity: 0.7 !important; 
  
  /* Lo enviamos al fondo */
}


/* ---------- Layout del formulario (lado izquierdo) ---------- */
body:not(.logged-in) .woocommerce-account .u-columns.col2-set,
body:not(.logged-in) .custom-register-page .u-columns.col2-set {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1150px;
  margin-left: 40px; /* opcional, para no pegarlo al borde */
  margin: 0;
  padding: 40px 20px;
}

/* columna izquierda con el formulario */
body:not(.logged-in) .woocommerce-account .u-column1.col-1,
body:not(.logged-in) .custom-register-page .u-column1.col-1 {
  flex: 0 0 48%;
  max-width: 520px;
  margin: 0;
}

/* Si el tema no usa esas clases, aplicar a #customer_login por si acaso */
body:not(.logged-in) #customer_login {
  margin: 0;
}


/* Aseguramos que el contenedor no tape el fondo */
body.woocommerce-account:not(.logged-in) {
  background: none !important;
}

/* Opcional: suavizar texto sobre la imagen */
body.woocommerce-account:not(.logged-in) .woocommerce form,
body.woocommerce-account:not(.logged-in) .woocommerce h2 {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* Sombra oscura sobre el fondo para legibilidad */
body:not(.logged-in) .custom-register-page::before,
body:not(.logged-in) .woocommerce-account .woocommerce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* ajustar si quieres más/menos contraste */
  z-index: 0;
}

/* Contenido sobre el overlay */
body:not(.logged-in) .custom-register-page .site-inner,
body:not(.logged-in) .woocommerce-account .site-inner,
body:not(.logged-in) .custom-register-page .container,
body:not(.logged-in) .woocommerce-account .container {
  position: relative;
  z-index: 1;
}

/* ---------- Layout del formulario (lado izquierdo) ---------- */
body:not(.logged-in) .woocommerce-account .u-columns.col2-set,
body:not(.logged-in) .custom-register-page .u-columns.col2-set {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1150px;
  margin: 0;
  margin-left: 40px; /* opcional, para no pegarlo al borde */
  padding: 40px 20px;
}

/* columna izquierda con el formulario */
body:not(.logged-in) .woocommerce-account .u-column1.col-1,
body:not(.logged-in) .custom-register-page .u-column1.col-1 {
  flex: 0 0 48%;
  max-width: 520px;
  margin: 0;
}

/* Si el tema no usa esas clases, aplicar a #customer_login por si acaso */
body:not(.logged-in) #customer_login {
  margin: 0;
}

/* ---------- Títulos y Mensajes de Bienvenida (Corregido p/ Propuesta) ---------- */

/* Ocultar el h2 por defecto de WooCommerce para usar el ::before personalizado */
body:not(.logged-in) #customer_login h2 {
    display: none !important;
}

/* Título principal grande "¡Bienvenido!" */
body:not(.logged-in) .woocommerce form.register::before {
    content: "¡Bienvenido!" !important;
    display: block !important;
    font-size: 64px !important; /* Super grande como la propuesta */
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.45) !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

/* Subtítulo "Vamos a crear..." */
body:not(.logged-in) .woocommerce form.register::after {
    display: block !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

/* Para el formulario de login (opcional) */
body:not(.logged-in) .woocommerce form.login::before {
    content: "¡Hola de nuevo!" !important;
    display: block !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

/* ---------- Labels y textos (Corregido p/ Propuesta) ---------- */
body:not(.logged-in) .woocommerce-account .u-column2.col-2 label, /* Específico columna registro */
body:not(.logged-in) .woocommerce-account label {
  display: block;
  color: #ffffff !important; /* Blanco puro */
  font-weight: 700 !important; /* Más negrita */
  margin-bottom: 8px;
  font-size: 18px !important; /* Un poco más grandes */
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ---------- Inputs ---------- */
body:not(.logged-in) .woocommerce-account .input-text,
body:not(.logged-in) .custom-register-page .input-text,
body:not(.logged-in) .woocommerce-account input[type="text"],
body:not(.logged-in) .woocommerce-account input[type="email"],
body:not(.logged-in) .woocommerce-account input[type="password"],
body:not(.logged-in) #customer_login input[type="text"],
body:not(.logged-in) #customer_login input[type="email"],
body:not(.logged-in) #customer_login input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  background: rgba(255,255,255,0.96);
  color: #222;
  margin-bottom: 16px;
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder color - NOTA: WooCommerce no usa placeholders por defecto, se necesitan labels o JS para simularlo como en la propuesta */
body:not(.logged-in) .woocommerce-account ::-webkit-input-placeholder,
body:not(.logged-in) .custom-register-page ::-webkit-input-placeholder {
  color: #b9b9b9;
}

/* ---------- Botones (Corregido p/ Propuesta) ---------- */

/* Ajuste general para botones en formularios */
body:not(.logged-in) .woocommerce-account .woocommerce-form .button,                
body:not(.logged-in) #customer_login button.woocommerce-form-login__submit,                
body:not(.logged-in) #customer_login button.woocommerce-Button.button[name="register"] {                
    display: inline-block !important;                
    background: #fff !important; /* Fondo blanco como la propuesta */                
    color: #d81b2a !important; /* Texto rojo como la propuesta */                
    border: none !important;                
    border-radius: 30px !important; /* Más redondeado */                
    padding: 15px 40px !important;                
    font-weight: 700 !important;                
    font-size: 18px !important;                
    cursor: pointer !important;                
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;                
    transition: all .2s ease !important;                
    text-transform: none !important; /* Que no sea todo mayúsculas */                
}

/* Hover botón */
body:not(.logged-in) .woocommerce-account .woocommerce-form .button:hover,
body:not(.logged-in) #customer_login .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
  background: #f0f0f0 !important;
}

/* ---------- Ajustes para que el formulario se vea "flotando" ---------- */
body:not(.logged-in) .woocommerce-account .u-column1.col-1,
body:not(.logged-in) .custom-register-page .u-column1.col-1 {
  padding: 28px 24px;
  background: transparent; /* deja ver el fondo con overlay */
}

/* ---------- Enlaces "¿Olvidaste la contraseña?" ---------- */
body:not(.logged-in) #customer_login .lost_password a {
    color: #fff !important;
    text-decoration: underline !important;
    opacity: 0.8;
}

/* ---------- Responsive: pantallas pequeñas ---------- */
@media (max-width: 900px) {
  body:not(.logged-in) .woocommerce-account .u-columns.col2-set {                
    flex-direction: column !important; /* En movil uno abajo del otro */                
    padding: 24px;                
  }                

  body:not(.logged-in) .woocommerce form.register::before {                
    font-size: 40px !important; /* Reducir tamaño en movil */                
  }                
}                

/* ---------------------------
   Orden de columnas (desktop)
   --------------------------- */
body:not(.logged-in) .woocommerce-account .u-columns.col2-set {                
  display: flex;                
  flex-direction: row-reverse !important; /* Registro a la izquierda, Login a la derecha */                
  align-items: flex-start;                
  gap: 40px;                
}                

/* Reafirmar que la columna 2 (registro) va primero */
body:not(.logged-in) .woocommerce-account .u-column2.col-2 {
    order: 1 !important;
}
body:not(.logged-in) .woocommerce-account .u-column1.col-1 {
    order: 2 !important;
}

/* Ocultar texto legal inferior añadido por el tema (si aplica) */
.woocommerce-privacy-policy-text {                
    display: none !important;                
}



/* ======= Forzar layout a la izquierda (solo usuarios NO logueados) ======= */
body:not(.logged-in) .woocommerce-account .u-columns.col2-set,
body:not(.logged-in) .custom-register-page .u-columns.col2-set,
body:not(.logged-in) #customer_login.u-columns.col2-set {
  display: flex !important;
  flex-direction: row-reverse !important;   /* si quieres que registro vaya a la izquierda */
  justify-content: flex-start !important;   /* asegura alineación a la izquierda */
  align-items: flex-start !important;
  gap: 40px !important;
  max-width: 1150px !important;
  width: 100% !important;                    /* permitir que ocupe todo el ancho permitido */
  margin: 0 0 0 40px !important;             /* margen: top right bottom left -> left = 40px */
  padding: 40px 20px !important;
  box-sizing: border-box !important;
}

/* Si el padre (container/site-inner) te estaba centrando, anularlo */
body:not(.logged-in) .woocommerce-account .container,
body:not(.logged-in) .woocommerce-account .site-inner,
body:not(.logged-in) .custom-register-page .container,
body:not(.logged-in) .custom-register-page .site-inner {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Reafirmar orden de columnas (si el tema fuerza otro orden) */
body:not(.logged-in) .woocommerce-account .u-column2.col-2 { order: 1 !important; }
body:not(.logged-in) .woocommerce-account .u-column1.col-1 { order: 2 !important; }

/* Si algo sigue centrando, fuerza el alineamiento del contenedor padre */
body:not(.logged-in) .woocommerce-account .woocommerce,
body:not(.logged-in) .custom-register-page .woocommerce {
  display: block !important;
  text-align: left !important;
}

/* Contenedor */
body .nectar-form-controls {
  display: flex !important;
  gap: 14px !important;
}

/* BASE */
body .nectar-form-controls .control {
  padding: 14px 34px !important;
  font-size: 18px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  border: 2px solid #cc0000 !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
}

/* ⚪ ACTIVO – blanco */
body .nectar-form-controls .control.active {
  background-color: #ffffff !important;
  color: #cc0000 !important;
  opacity: 1 !important;
}

/* 🔴 INACTIVO – rojo transparente + letra blanca */
body .nectar-form-controls .control:not(.active) {
  background-color: rgba(204, 0, 0, 0.55) !important;  /* transparencia */
  color: #ffffff !important;
}

/* Hover del inactivo (menos transparente) */
body .nectar-form-controls .control:not(.active):hover {
  background-color: rgba(204, 0, 0, 0.55) !important;
}

/* Ocultar el mini-carrito flotante en la página de login/registro */
body.woocommerce-account:not(.logged-in) .nectar-mini-cart,                
body.woocommerce-account:not(.logged-in) .widget_shopping_cart,                
body.woocommerce-account:not(.logged-in) #header-secondary-outer ul.cart-menu {                
    display: none !important;                
    visibility: hidden !important;                
    opacity: 0 !important;                
    pointer-events: none !important;                
}/* ------------------------------------------------------------------
   SOLUCIÓN RADICAL: Usar Posicionamiento Absoluto para fijarlo abajo.
   ------------------------------------------------------------------ */

/* 1. Establecer el contenedor padre como referencia de posicionamiento */
body:not(.logged-in) #customer_login {
    position: relative !important; /* El punto de referencia */
    padding-bottom: 80px !important; /* Agregar espacio extra en el fondo para que los controles no tapen nada */
}

/* 2. Sacar los controles del flujo normal y fijarlos abajo */
body:not(.logged-in) .nectar-form-controls {
    position: absolute !important; 
    bottom: 0 !important; /* Anclar al fondo del #customer_login */
    left: 0 !important;
    right: 0 !important;
    width: auto !important; /* Permitir que ocupe el ancho definido */
    
    /* Centrarlo dentro del espacio que le dimos (left:0; right:0;) */
    display: flex !important;
    justify-content: flex-start !important; /* Alinear a la izquierda */
    
    z-index: 5 !important; /* Asegurar que esté sobre otros elementos */
}

/* ------------------------------------------------------------------
   SOLUCIÓN RADICAL: Usar Posicionamiento Absoluto para fijarlo abajo.
   (Ajustado para centrado)
   ------------------------------------------------------------------ */

/* 1. Establecer el contenedor padre como referencia de posicionamiento */
body:not(.logged-in) #customer_login {
    position: relative !important;
    padding-bottom: 80px !important;
}

/* 2. Sacar los controles del flujo normal y fijarlos abajo y CENTRADOS */
body:not(.logged-in) .nectar-form-controls {
    position: absolute !important; 
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    
    /* MODIFICACIÓN: Centrar horizontalmente los botones */
    display: flex !important;
    justify-content: center !important; 
    
    z-index: 5 !important;
}

/* ------------------------------------------------------------------
   SOLUCIÓN: Botones centrados y apilados (uno sobre otro)
   ------------------------------------------------------------------ */

/* 1. Ajustamos el espacio en el contenedor padre para que quepan dos filas */
body:not(.logged-in) #customer_login {
    position: relative !important;
    padding-bottom: 150px !important; /* Aumentamos el espacio para las dos filas */
}

/* 2. Configuramos los controles para que se apilen */
body:not(.logged-in) .nectar-form-controls {
    position: absolute !important; 
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    display: flex !important;
    flex-direction: column !important; /* <--- ESTO los pone uno abajo del otro */
    align-items: center !important;    /* <--- ESTO los centra horizontalmente */
    gap: 15px !important;              /* <--- Espacio entre el botón de arriba y abajo */
    
    z-index: 5 !important;
}

/* Ajuste opcional: para que los botones tengan el mismo ancho si quieres */
body:not(.logged-in) .nectar-form-controls .control {
    min-width: 200px !important;
    text-align: center !important;
}


/* ------------------------------------------------------------------
   AJUSTE FINAL: Botones más abajo y sin subtítulo
   ------------------------------------------------------------------ */

/* 1. Ajuste del contenedor padre */
body:not(.logged-in) #customer_login {
    position: relative !important;
    padding-bottom: 180px !important; /* Espacio de seguridad para los botones */
    margin-bottom: 40px !important;
}

/* 2. Mover botones más abajo */
body:not(.logged-in) .nectar-form-controls {
    position: absolute !important; 
    bottom: -20px !important; /* Valor negativo para bajarlos al límite del contenedor */
    left: 0 !important;
    right: 0 !important;
    
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    gap: 12px !important;             
    
    z-index: 10 !important;
}

/* Asegurar que los botones no se vean gigantes */
body .nectar-form-controls .control {
    width: auto !important;
    min-width: 250px !important; /* Ancho consistente para ambos */
    text-align: center !important;
}

/* ------------------------------------------------------------------
   AJUSTE FINAL: Ocultar el botón activo y bajar los botones
   ------------------------------------------------------------------ */

/* 1. Ocultamos el botón que ya está activo (el que no necesitamos clickear) */
body .nectar-form-controls .control.active {
    display: none !important;
}

/* 2. Aseguramos que el contenedor padre tenga espacio y sea visible */
body:not(.logged-in) #customer_login {
    position: relative !important;
    padding-bottom: 120px !important; /* Ajustado porque ahora solo hay 1 botón */
    overflow: visible !important;
}

/* 3. Posicionamos el botón restante (el inactivo) bien abajo y centrado */
body:not(.logged-in) .nectar-form-controls {
    position: absolute !important; 
    bottom: -40px !important; /* Ajusta este número si lo quieres más o menos abajo */
    left: 0 !important;
    right: 0 !important;
    
    display: flex !important;
    justify-content: center !important; 
    z-index: 99 !important;
}

/* 4. Estilo del botón que queda (el inactivo) para que se vea como botón principal */
body .nectar-form-controls .control:not(.active) {
    min-width: 250px !important;
    text-align: center !important;
    background-color: #cc0000 !important; /* Rojo sólido para que resalte */
    color: #ffffff !important;
    opacity: 1 !important; /* Quitamos la transparencia para que sea el principal */
}