:root {
    --c-primary-10: #f8fafc;    /* Algehele pagina-achtergrond */
    --c-neutral-white: #ffffff; /* Achtergrond van de login-kaart */

    /* 2. Accent- & Merk-kleur (Voor knoppen, links en focus-states) */
    --c-primary-50: #2563eb;    /* Het primaire blauw */
    --c-primary-60: #1d4ed8;    /* Iets donkerder blauw (voor hover-state) */

    /* 3. Typografie & Grenzen */
    --c-primary-90: #0f172a;    /* Donkerblauw/bijna zwart voor tekst */
    --c-neutral-gray: #64748b;  /* Medium grijs voor secundaire links/tekst */
    --c-border-light: #cbd5e1;  /* Lichtgrijs voor randen */
}

body.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--c-primary-90);
    background-color: var(--c-primary-10);
}

body.login .wp-login-logo a {
    width: auto;
    height: 5rem;
}

body.login-action-lostpassword #wp-submit,
body.login-action-register #wp-submit {
    width: 100%;
    text-align: center;
}

body.login #login {
    padding: 0;
}

body.login div#login a:focus {
    box-shadow: none;
}

body.login div#login h1 a {
    margin-bottom: .75rem;
}

body.login div#login form {
    background-color: var(--c-neutral-white);
}

body.login div#login form,
body.login div#login .message,
body.login div#login #login_error {
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1rem rgba( 0, 0, 0, .15 );
}

body.login div#login .message {
    color: #084298;
    background-color: #cfe2ff;
}

body.login div#login #login_error {
    color: #842029;
    background-color: #f8d7da;
}

body.login div#login form p.submit input#wp-submit {
    color: var(--c-neutral-white);
    background-color: var(--c-primary-50);
    padding: .25rem 1rem;
    border: 0;
    border-radius: 50rem;
    transition: background-color .15s ease;
}

body.login div#login form p.submit input#wp-submit:hover {
    background-color: var(--c-primary-60);
}

body.login div#login form p.submit input#wp-submit:focus {
    box-shadow: 0 0 0 1px #fffbf8,0 0 0 3px var(--c-primary-60);
}

body.login .button.wp-hide-pw span {
    color: #7E7E7E;
}

body.login div#login p#nav {
    text-align: center;
}

body.login div#login p#nav a {
    opacity: .5;
    transition: opacity .15s ease;
}

body.login div#login p#nav a:hover,
body.login div#login p#nav a:active,
body.login div#login p#nav a:focus {
    color: inherit;
    opacity: 1;
}

.login label {
    font-size: .75rem;
}

.login form .input {
    background-color: transparent;
}

.login .button.wp-hide-pw,
input[type=password],
input[type=text],
input[type=email] {
    font-size: 1.25rem !important;
    font-weight: 500;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--c-border-light);
}

.login .button.wp-hide-pw:focus,
input[type=password]:focus,
input[type=text]:focus,
input[type=email]:focus {
    border-color: var(--c-border-light);
    box-shadow: none;
}

input[type=checkbox],
input[type=radio] {
    border-color: var(--c-border-light);
    accent-color: red !important
}

input[type=checkbox]:focus,
input[type=radio]:focus {
    border-color: var(--c-primary-60);
    box-shadow: 0 0 0 1px var(--c-primary-60);
}

#loginform input[type="checkbox"]#rememberme:checked::before {
    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23003B3C%27%2F%3E%3C%2Fsvg%3E");
}

body.login div#login p#backtoblog,
body.login div#login div.privacy-policy-page-link {
    display: none;
}