/* simuland-login-styles.css */
body.login {
    background-color: #1A0A2F; /* Fondo oscuro como tu landing */
    font-family: 'Press Start 2P', cursive !important; /* Forzar fuente pixel art */
    image-rendering: pixelated; /* Para que todo se vea más pixelado */
}

/* Logo */
.login h1 a {
    background-image: url('../images/test_monster_logo.png'); /* ¡TU LOGO AQUÍ! */
    background-size: contain; /* O 'cover', o un tamaño específico */
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px; /* Ajusta el ancho del logo */
    height: 200px; /* Ajusta la altura del logo */
    margin: 0 auto 25px auto; /* Centrar y espacio abajo */
    /* Quitar el texto de WordPress si es necesario, aunque reemplazar la URL lo suele hacer */
    text-indent: -9999px; 
    overflow: hidden;
}

/* Formulario de Login */
#loginform, 
#registerform, 
#lostpasswordform {
    background: rgba(26, 10, 47, 0.5); /* Un fondo semi-transparente sobre el body, o un color sólido */
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 0 #000000; /* Sombra pixelada */
    padding: 30px 25px 35px;
    border-radius: 0; /* Bordes rectos para look retro */
    margin-top: 20px;
}

.login label {
    font-size: 12px; /* Ajusta el tamaño */
    color: #FFEE58;   /* Color de texto de labels (ej. amarillo pixel) */
    letter-spacing: 1px; /* Espaciado pixel */
    display: block;
    margin-bottom: 8px;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    background: rgba(0,0,0,0.3);
    color: #FFFFFF;
    border: 2px solid #000000;
    padding: 10px 12px;
    border-radius: 0;
    box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.4), inset -2px -2px 0 0 rgba(255,255,255,0.2);
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: #FFEE58; /* Borde amarillo al enfocar */
    box-shadow: 0 0 0 2px rgba(255, 238, 88, 0.5), inset 2px 2px 0 0 rgba(0,0,0,0.4), inset -2px -2px 0 0 rgba(255,255,255,0.2);
    outline: none;
}

/* Botón de Login/Registro/etc. */
.login .button-primary {
    /* Reutilizar o adaptar la clase .simuland-pixel-button */
    background-color: #6A1B9A !important; /* Usar !important si es necesario para sobrescribir estilos de WP */
    color: #FFFFFF !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 14px !important; 
    padding: 10px 20px !important;
    text-decoration: none !important;
    border: 3px solid #000000 !important;
    box-shadow: 
        3px 3px 0 0 #000000, 
        inset -2px -2px 0 0 rgba(255,255,255,0.25), 
        inset 2px 2px 0 0 rgba(0,0,0,0.3) !important;
    text-shadow: none !important; /* Quitar sombra de texto de WP */
    border-radius: 0 !important;
    float: none !important; /* WordPress a veces los flota */
    width: auto !important; /* Que se ajuste al contenido */
    display: inline-block !important;
    margin-top: 10px;
    transition: background-color 0.1s linear, transform 0.05s linear, box-shadow 0.05s linear !important;
}
.login .button-primary:hover,
.login .button-primary:focus {
    background-color: #822FAF !important;
    box-shadow: 
        2px 2px 0 0 #000000, 
        inset -2px -2px 0 0 rgba(255,255,255,0.25),
        inset 2px 2px 0 0 rgba(0,0,0,0.3) !important;
    transform: translate(1px, 1px) !important;
}
 .login .button-primary:active {
    background-color: #581683 !important;
    box-shadow: 
        inset -1px -1px 0 0 rgba(255,255,255,0.2),
        inset 1px 1px 0 0 rgba(0,0,0,0.35) !important;
    transform: translate(3px, 3px) !important;
}


/* "Recordarme" checkbox */
.login .forgetmenot label {
    font-size: 11px; /* Más pequeño */
    color: #D0D0D0;
}
.login input[type="checkbox"] {
    /* Estilizar checkboxes es complicado y varía por navegador.
       A veces se usan pseudo-elementos o se reemplaza con una imagen.
       Para un look pixel art, podrías usar un sprite.
       Por ahora, lo dejamos con el estilo por defecto del navegador o uno simple. */
    border: 2px solid #000;
    background: rgba(0,0,0,0.3);
    border-radius: 0;
    margin-right: 5px;
    appearance: none; /* Quitar apariencia por defecto para estilizar */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}
.login input[type="checkbox"]:checked::before {
    content: "X"; /* O un carácter de check pixelado */
    position: absolute;
    top: -2px; /* Ajusta para centrar la X */
    left: 1px; /* Ajusta para centrar la X */
    font-size: 12px;
    color: #FFEE58; /* Color de la X */
}


/* Enlaces inferiores (Contraseña perdida, Volver a...) */
.login #nav,
.login #backtoblog {
    margin-top: 20px;
    padding: 0;
    text-align: center;
}
.login #nav a,
.login #backtoblog a {
    text-decoration: none;
    color: #B0B0FF; /* Un azul/lila pixelado */
    font-size: 11px;
    letter-spacing: 0.5px;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Mensajes de error o información */
.login #login_error,
.login .message {
    border-left: 4px solid #D32F2F; /* Borde rojo para errores */
    padding: 12px;
    margin-bottom: 20px;
    background-color: rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 #000;
    border-radius: 0;
    color: #FFFFFF;
    font-size: 12px;
}
.login .message {
    border-left-color: #4CAF50; /* Borde verde para mensajes de éxito */
}