/* Make body full height and use flexbox to center form */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* remove vertical and horizontal scrolling */
}

body.login {
    background-color: #741e6b; /* updated background color */
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
}

/* Login wrapper */
.login {
    width: 500px; /* wider form */
    padding: 20px;
}

/* Logo */
.login h1 {
    text-align: center;
    margin-bottom: 20px;
}
.login h1 a {
    background-image: url('https://example.com/wp-content/uploads/logo.png'); /* your logo */
    width: 220px;  /* slightly bigger logo */
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Form wrapper */
.login form {
    background: #fff; /* keep card white */
    padding: 40px; /* more padding for bigger form */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Inputs */
.login form .input,
.login form input[type="text"],
.login form input[type="password"] {
    width: 100%;
    padding: 14px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
}

/* Button */
.login form .button-primary {
    width: 100%;
    background-color: #741e6b; /* updated button color */
    border-color: #741e6b;     /* match button color */
    padding: 14px;
    font-size: 16px;
    border-radius: 8px;
    margin-bottom: 12px; /* spacing before "Remember me" */
}
.login form .button-primary:hover {
    background-color: #5a1552; /* darker purple on hover */
    border-color: #5a1552;
}

/* Remember me below button */
.login form p.forgetmenot {
    display: block;
    margin-top: 10px;
}

/* Hide "Back to site" / "Go to..." links */
.login #backtoblog {
    display: none;
}

/* Center "Forgot password?" link */
.login #nav {
    text-align: center;
    margin-top: 10px;
}
.login #nav a {
    color: #fff; /* white text on dark background */
}

/* Adjust logo hover */
.login h1 a:hover {
    opacity: 0.9;
}