/* =====================================================
   SURPIN - MI CUENTA (LOGIN / REGISTRO)
   Versión Definitiva y Limpia
   ===================================================== */

/* 1. FONDO Y OCULTAR TÍTULO NATIVO */
html body.page-id-71 { background: #F5F7FA !important; }
html body.page-id-71 h1.wp-block-post-title { display: none !important; }

/* 2. CONTENEDOR PRINCIPAL (1400px) */
html body.page-id-71:not(.logged-in) div.woocommerce {
  display: block !important;
  max-width: 1400px !important;
  margin: 40px auto !important;
  padding: 0 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 3. LA CAJA PRINCIPAL (SIN BORDES NI SOMBRAS) */
.surpin-auth-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; 
  background: transparent !important;
  border: none !important;            
  box-shadow: none !important;
  gap: 40px !important;               
}

/* 4. COLUMNA DEL FORMULARIO (IZQUIERDA) */
.surpin-auth-form-col {
  background: #ffffff !important;
  padding: 0px 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
  border-radius: 24px !important; 
}

/* 5. COLUMNA DE LA IMAGEN (DERECHA) */
.surpin-auth-image-col {
  background-image: url('https://surpinstore.org/wp-content/uploads/2026/11/mi-imagen.webp') !important; /* PON AQUÍ TU IMAGEN */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  border-radius: 24px !important; 
  border: 1px solid #E5EAF3 !important; 
  box-shadow: 0 20px 60px rgba(10, 31, 68, 0.08) !important; 
  overflow: hidden !important;
}

/* 6. ESLOGAN SOBRE LA IMAGEN */
.surpin-image-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(10, 31, 68, 0.7) !important; 
  padding: 30px 40px !important;
  color: #fff !important;
  text-align: left !important;
  border-radius: 0 0 24px 24px !important; 
}
.surpin-image-overlay h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 26px !important;
  color: #fff !important;
  margin: 0 0 8px 0 !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.surpin-image-overlay p {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 14px !important;
  color: #E5EAF3 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* 7. PESTAÑAS (Iniciar Sesión / Crear Cuenta) */
.surpin-auth-tabs {
  display: flex !important;
  background: #F5F7FA !important;
  border-radius: 12px !important;
  padding: 6px !important;
  margin-bottom: 30px !important;
  width: 100% !important;
}
.surpin-tab-btn {
  flex: 1 !important;
  padding: 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #5C7291 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}
.surpin-tab-btn.active {
  background: #fff !important;
  color: #0A1F44 !important;
  box-shadow: 0 2px 8px rgba(10, 31, 68, 0.08) !important;
}

/* 8. PANELES (Mostrar/Ocultar) */
.surpin-panel { display: none !important; }
.surpin-panel.active { display: block !important; }

/* 9. ENCABEZADOS (TU CUENTA, BIENVENIDO...) */
.surpin-auth-header { margin-bottom: 30px; text-align: left !important; }
.surpin-auth-tag {
  font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  color: #E63946 !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin-bottom: 10px !important;
}
.surpin-auth-title {
  font-family: 'Oswald', sans-serif !important; font-size: 36px !important;
  color: #0A1F44 !important; margin: 0 0 10px 0 !important; font-weight: 600 !important;
}
.surpin-auth-subtitle {
  font-family: 'Nunito Sans', sans-serif !important; font-size: 15px !important; color: #5C7291 !important; margin: 0 !important; line-height: 1.6 !important;
}

/* 10. INPUTS (Campos de texto) */
html body.page-id-71:not(.logged-in) .form-row { margin-bottom: 20px !important; padding: 0 !important; float: none !important; width: 100% !important; }
html body.page-id-71:not(.logged-in) .form-row label {
  display: block !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 13px !important;
  font-weight: 600 !important; color: #0A1F44 !important; margin-bottom: 8px !important; text-align: left !important;
}
html body.page-id-71:not(.logged-in) .form-row input.input-text {
  width: 100% !important; background: #F9FAFC !important; border: 1px solid #D5DDEE !important;
  border-radius: 12px !important; padding: 16px 20px !important; font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important; color: #0A1F44 !important; box-sizing: border-box !important; transition: all 0.3s !important; height: 54px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}
html body.page-id-71:not(.logged-in) .form-row input.input-text:focus {
  border-color: #E63946 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1) !important; outline: none !important;
}

/* 11. TELÉFONO CON PREFIJO */
.surpin-phone-wrapper {
  display: flex !important;
  align-items: center !important;
  background: #F9FAFC !important;
  border: 1px solid #D5DDEE !important;
  border-radius: 12px !important;
  height: 54px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
  overflow: hidden !important;
}
.surpin-phone-prefix {
  background: #E5EAF3 !important;
  padding: 0 15px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  color: #0A1F44 !important;
  border-right: 1px solid #D5DDEE !important;
}
.surpin-phone-wrapper input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  border-radius: 0 !important;
}
.surpin-phone-wrapper input:focus {
  box-shadow: none !important;
  background: #fff !important;
}

/* 12. BOTONES (Rojos) */
html body.page-id-71:not(.logged-in) .woocommerce-form-login__submit,
html body.page-id-71:not(.logged-in) .woocommerce-form-register__submit {
  display: block !important; width: 100% !important; background: #E63946 !important; color: #fff !important;
  border: none !important; border-radius: 12px !important; padding: 16px !important; font-family: 'Nunito Sans', sans-serif !important;
  font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s !important;
  text-align: center !important; text-transform: none !important; height: 54px !important; margin-left: 0 !important;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2) !important;
}
html body.page-id-71:not(.logged-in) .woocommerce-form-login__submit:hover,
html body.page-id-71:not(.logged-in) .woocommerce-form-register__submit:hover {
  background: #C42B38 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4) !important;
}

/* 13. OPCIONES DEL LOGIN (Recuérdame / Olvidé contraseña) */
.surpin-login-options {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 15px 0 !important;
  width: 100% !important;
}
html body.page-id-71:not(.logged-in) .surpin-auth-checkbox { 
  font-family: 'Nunito Sans', sans-serif !important; font-size: 14px !important; color: #5C7291 !important; 
  display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; 
  margin: 0 !important; 
}
html body.page-id-71:not(.logged-in) .surpin-auth-checkbox input { width: 18px !important; height: 18px !important; accent-color: #E63946 !important; }
html body.page-id-71:not(.logged-in) .surpin-auth-forgot { 
  font-family: 'Nunito Sans', sans-serif !important; font-size: 14px !important; color: #E63946 !important; 
  text-decoration: none !important; font-weight: 600 !important; 
}

/* 14. CHECKBOX POLÍTICA DE PRIVACIDAD */
html body.page-id-71:not(.logged-in) .surpin-auth-row-policy {
  margin: 15px 0 25px 0 !important;
  text-align: left !important;
}

/* 15. ENLACE DE CAMBIO DE FORMULARIO */
.surpin-switch-text {
  text-align: left !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 15px !important;
  color: #5C7291 !important; margin-top: 20px !important; margin-bottom: 0 !important;
}
.surpin-switch-link { color: #E63946 !important; font-weight: 600 !important; text-decoration: none !important; }
.surpin-switch-link:hover { text-decoration: underline !important; }

/* 16. COLUMNAS NOMBRE Y APELLIDO (Para que se vean bien en PC) */
html body.page-id-71:not(.logged-in) #register-panel .form-row-first,
html body.page-id-71:not(.logged-in) #register-panel .form-row-last {
    display: inline-block !important;
    width: calc(50% - 12px) !important;
    vertical-align: top !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    float: none !important;
}
html body.page-id-71:not(.logged-in) #register-panel .form-row-first {
    margin-right: 20px !important;
}

/* 17. RESPONSIVE (Móvil) */
@media (max-width: 900px) {
  /* Quitamos espacio superior y hacemos que ocupe todo el ancho */
  html body.page-id-71:not(.logged-in) div.woocommerce { padding: 0 !important; margin-top: 0 !important; }
  .surpin-auth-wrapper { grid-template-columns: 1fr !important; min-height: auto !important; gap: 0 !important; margin-top: 0 !important; }
  .surpin-auth-image-col { display: none !important; }
  .surpin-auth-form-col { 
    padding: 10px 15px 20px 15px !important; /* Ajuste fino para que no haya hueco arriba */
    background: transparent !important; 
    border-radius: 0 !important; 
  }
  .surpin-auth-tabs { 
  background: #F5F7FA !important; /* Fondo gris claro igual que en PC */
  box-shadow: none !important; /* Quitamos la sombra para que se integre */
  margin-top: 0 !important; 
}
  
  /* Nombre y Apellido a 1 columna en móvil */
  html body.page-id-71:not(.logged-in) #register-panel .form-row-first,
  html body.page-id-71:not(.logged-in) #register-panel .form-row-last {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* 18. ESTILOS PARA EL RESTO DE MI CUENTA (Cuando el usuario está logueado) */
html body.page-id-71.logged-in div.woocommerce {
  display: grid !important; grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-areas: "nav content" !important; gap: 30px !important;
  max-width: 1400px !important; margin: 0 auto !important; padding: 40px 24px 80px !important;
}
html body.page-id-71.logged-in nav.woocommerce-MyAccount-navigation {
  grid-area: nav !important; background: #fff !important; border-radius: 20px !important;
  padding: 15px !important; border: 1px solid #E5EAF3 !important;
}
html body.page-id-71.logged-in div.woocommerce-MyAccount-content {
  grid-area: content !important; background: #fff !important; border-radius: 20px !important;
  padding: 40px !important; border: 1px solid #E5EAF3 !important;
}

/* =====================================================
   FORMULARIO DE RECUPERAR CONTRASEÑA (ALINEADO AL LOGIN)
   ===================================================== */

/* Contenedor principal: ancho de 1400px, alineado a la izquierda */
html body.page-id-71 .woocommerce-ResetPassword {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 1400px !important; /* Mismo ancho que el login */
  margin: 40px 0 60px 0 !important; /* Alineado a la izquierda */
  box-sizing: border-box !important;
}

/* Título y textos: alineados a la izquierda y con un ancho máximo para que no se estiren */
html body.page-id-71 .woocommerce-ResetPassword p,
html body.page-id-71 .woocommerce-ResetPassword h2 {
  font-family: 'Nunito Sans', sans-serif !important;
  color: #5C7291 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 25px !important;
  text-align: left !important;
  max-width: 600px !important; /* Para que el texto no ocupe los 1400px */
}

/* Inputs: ancho máximo de 600px para que no se vean gigantes */
html body.page-id-71 .woocommerce-ResetPassword .form-row {
  margin-bottom: 20px !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 600px !important;
}
html body.page-id-71 .woocommerce-ResetPassword label {
  display: block !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0A1F44 !important;
  margin-bottom: 8px !important;
}
html body.page-id-71 .woocommerce-ResetPassword input.input-text {
  width: 100% !important;
  background: #F9FAFC !important;
  border: 1px solid #D5DDEE !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
  color: #0A1F44 !important;
  box-sizing: border-box !important;
  transition: all 0.3s !important;
  height: 54px !important;
  max-width: 600px !important; /* Ancho máximo del input */
}
html body.page-id-71 .woocommerce-ResetPassword input.input-text:focus {
  border-color: #E63946 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1) !important;
  outline: none !important;
}

/* Botón: ancho máximo de 600px, alineado a la izquierda */
html body.page-id-71 .woocommerce-ResetPassword button.button {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important; /* Mismo ancho que los inputs */
  background: #E63946 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  text-align: center !important;
  text-transform: none !important;
  height: 54px !important;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2) !important;
  margin: 10px 0 0 0 !important; /* Alineado a la izquierda */
}
html body.page-id-71 .woocommerce-ResetPassword button.button:hover {
  background: #C42B38 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4) !important;
}

/* RESPONSIVE (Móvil) */
@media (max-width: 900px) {
  html body.page-id-71 .woocommerce-ResetPassword {
    padding: 0 !important;
    margin: 20px 0 40px 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  html body.page-id-71 .woocommerce-ResetPassword .form-row,
  html body.page-id-71 .woocommerce-ResetPassword input.input-text,
  html body.page-id-71 .woocommerce-ResetPassword button.button,
  html body.page-id-71 .woocommerce-ResetPassword p {
    max-width: 100% !important; 
  }
}
/* =====================================================
   11. TELÉFONO CON BANDERAS (ESTILO LIMPIO Y ELEGANTE)
   ===================================================== */

/* Contenedor principal del plugin (intl-tel-input) */
html body.page-id-71:not(.logged-in) .iti {
  width: 100% !important;
  display: block !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
}

/* El input de teléfono */
html body.page-id-71:not(.logged-in) .iti input[type="tel"] {
  width: 100% !important;
  background: #F9FAFC !important;
  border: 1px solid #D5DDEE !important;
  border-radius: 12px !important;
  padding: 16px 20px 16px 95px !important; /* Espacio a la izquierda para la bandera */
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
  color: #0A1F44 !important;
  height: 54px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
  transition: all 0.3s !important;
}

/* Efecto focus */
html body.page-id-71:not(.logged-in) .iti input[type="tel"]:focus {
  border-color: #E63946 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1) !important;
  outline: none !important;
}

/* El contenedor de la bandera y el prefijo */
html body.page-id-71:not(.logged-in) .iti__flag-container {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid #D5DDEE !important;
  border-radius: 12px 0 0 12px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  position: absolute !important;
}

/* La bandera y el código de país */
html body.page-id-71:not(.logged-in) .iti__selected-flag {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  height: 100% !important;
  border: none !important;
}

html body.page-id-71:not(.logged-in) .iti__selected-dial-code {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0A1F44 !important;
  margin-left: 8px !important;
}

/* La lista desplegable de países */
html body.page-id-71:not(.logged-in) .iti__country-list {
  background: #fff !important;
  border: 1px solid #E5EAF3 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(10, 31, 68, 0.1) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 14px !important;
  color: #0A1F44 !important;
  width: 300px !important;
  max-width: 90vw !important;
  margin-top: 5px !important;
}

html body.page-id-71:not(.logged-in) .iti__country-list .iti__country {
  padding: 10px 15px !important;
  display: flex !important;
  align-items: center !important;
}

html body.page-id-71:not(.logged-in) .iti__country-list .iti__country:hover {
  background: #F5F7FA !important;
}

/* Responsive Móvil */
@media (max-width: 900px) {
  html body.page-id-71:not(.logged-in) .iti input[type="tel"] {
    padding-left: 85px !important;
  }
  html body.page-id-71:not(.logged-in) .iti__flag-container {
    padding: 0 10px !important;
  }
}