/* Global adjustments for the login and sign-up pages */
.page-id-9037,
.page-id-9134 {
    background-color: var(--color-pearl); /* Sustituye #ffffff por tu tono "Pearl" */
    margin: 0;
    padding: 0;
}

/* The page-id-9037 class is manually used for the Sign In page (ID 2098).
   The page-id-9134 class is manually used for the Sign Up page (ID 9134).
   Workaround because the correct ID isn't applied dynamically. */
.page-id-9037 .login-form,
.page-id-9134 .registration-form {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    max-width: 400px;
    border: 1px solid var(--color-marble); /* Sustituye #ddd */
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Title styling */
.page-id-9037 .login-form h2,
.page-id-9134 .registration-form h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-onyx); /* Sustituye #222 */
    margin-bottom: 20px;
}

/* Input fields */
.page-id-9037 .login-form input,
.page-id-9134 .registration-form input {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 1rem;
    border: 1px solid var(--color-marble); /* Sustituye #ddd */
    border-radius: 4px;
    box-sizing: border-box;
}

/* Checkbox styling for Sign Up */
.page-id-9134 .registration-form input[type="checkbox"] {
    width: 4%;
    margin-right: 10px;
    margin-bottom: 0;
    vertical-align: middle;
}

.page-id-9134 .registration-form p.privacy-policy {
    font-size: 0.9rem;
    color: var(--color-onyx); /* Sustituye #333 */
    margin: -10px 0 15px; /* Adjust margin for better spacing */
    text-align: left;
}

/* Submit button */
.page-id-9037 .login-form button,
.page-id-9134 .registration-form button {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-velvet);
    color: var(--color-pearl);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-id-9037 .login-form button:hover,
.page-id-9134 .registration-form button:hover {
    background-color: var(--color-champagne);
    color: var(--color-velvet);
}

/* Links below the button */
.page-id-9037 .login-form p,
.page-id-9134 .registration-form p {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;
    font-size: 0.9rem;
}

.page-id-9037 .login-form p a,
.page-id-9134 .registration-form p a {
    color: var(--color-velvet); /* Sustituye #1a1a1a */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.page-id-9037 .login-form p a:hover,
.page-id-9134 .registration-form p a:hover {
    color: var(--color-champagne); /* Sustituye #555 */
}

/* Mejorar estilo del checkbox y el texto */
.page-id-9134 .registration-form .privacy-policy {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-onyx); /* Sustituye #333 */
    text-align: left;
    margin: 15px 0;
}

.page-id-9134 .registration-form .privacy-policy input[type="checkbox"] {
    margin-right: 10px; /* Espacio entre el checkbox y el texto */
}

.page-id-9134 .registration-form .privacy-policy a {
    color: var(--color-velvet);
    text-decoration: underline;
    margin: 0 3px; /* Espaciado entre "Privacy Policy" y "Terms of Service" */
}

.page-id-9134 .registration-form .privacy-policy a:hover {
    color: var(--color-champagne);
}

/* "Go back to Sign In" link on Sign Up page */
.page-id-9134 .registration-form p:last-child {
    margin-top: 20px;
    font-size: 0.9rem;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}

/* Hover para "Go back to Sign In" */
.page-id-9134 .registration-form p:last-child a:hover {
    color: var(--color-champagne);
}

/* Adapt Lost Password button style */
.form-container.woocommerce-ResetPassword button,
.form-container.woocommerce-ResetPassword input[type="submit"] {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-velvet);
    color: var(--color-pearl);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.woocommerce button.button:hover,
.form-container.woocommerce-ResetPassword button:hover,
.form-container.woocommerce-ResetPassword input[type="submit"]:hover {
    background-color: var(--color-champagne);
    color: var(--color-velvet);
}

.acc-alert {
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 600;
}

.acc-alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

/* Lost Password Form - Estilos similares a Sign In / Sign Up */
.page-id-9256 .lost-password-form {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    max-width: 450px;
    border: 1px solid var(--color-marble); /* Igual que para los otros formularios */
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--color-pearl); /* Si deseas el mismo fondo */
}

/* Asegurarte de que el input ocupe todo el ancho del contenedor */
.page-id-9256 .lost-password-form input[type="email"] {
    width: 100%;
}

/* Alinear a la izquierda SOLO el texto de instrucciones */
.page-id-9256 .lost-password-form .lost-password-instructions {
    text-align: left;
}

/* Títulos (si agregas un h2 en el futuro, por ejemplo) */
.page-id-9256 .lost-password-form h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-onyx);
    margin-bottom: 20px;
}

/* Estilos para los párrafos del formulario Lost Password */
.page-id-9256 .lost-password-form p {
    width: 100%;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: center;
}

/* Inputs en Lost Password */
.page-id-9256 .lost-password-form input {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 1rem;
    border: 1px solid var(--color-marble);
    border-radius: 4px;
    box-sizing: border-box;
}

/* Botón en Lost Password */
.page-id-9256 .lost-password-form button {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-velvet);
    color: var(--color-pearl);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover para el botón */
.page-id-9256 .lost-password-form button:hover {
    background-color: var(--color-champagne);
    color: var(--color-velvet);
}

/* Enlace "Go back to Sign In" */
.page-id-9256 .lost-password-form p:last-child {
    margin-top: 20px;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-id-9256 .lost-password-form p:last-child a {
    color: var(--color-velvet);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.page-id-9256 .lost-password-form p:last-child a:hover {
    color: var(--color-champagne);
}

.page-id-9256 .lost-password-form h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-onyx);
    margin-bottom: 20px;
    text-align: center; /* Opcional, por si lo quieres centrado */
}

.page-id-9256 .lost-password-form .lost-password-instructions {
    text-align: left;
}

/* Más espacio vertical para Sign In, Sign Up y Forgot Password */
.page-id-9037 .login-form,
.page-id-9134 .registration-form {
    margin-top: 60px;
    margin-bottom: 60px;
}

.page-id-9256 .lost-password-form {
    margin-top: 80px;
    margin-bottom: 60px;
}

.acc-alert-error {
  color: #721c24;               /* Color del texto en rojo oscuro */
  background-color: #f8d7da;      /* Fondo rojo claro */
  border: 1px solid #f5c6cb;      /* Borde en tono rojo */
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-weight: 600;
}