/* ============================================================
   DE WORDPRESS-INLOGPAGINA
   ============================================================

   Inloggen zelf gebeurt op de site, maar registreren en een wachtwoord
   herstellen blijven hier: die stromen versturen mail en werken met
   nonces en sleutels, en die zou je niet moeten namaken voor een
   achtergrondkleur. Dit bestand zorgt dat je er niet uit de site valt.
   ============================================================ */

:root {
  --bg: #070d16;
  --fg: #eef3fa;
  --muted: #8b9aad;
  --dim: #5f6f81;
  --line: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .045);
  --o1: #3d9bd4;
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

body.login {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  color-scheme: dark;
}

/* Dezelfde gloed als op de site, maar rustiger: dit is een formulier. */
body.login::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 520px at 12% -10%, rgba(61, 155, 212, .22), transparent 70%),
    radial-gradient(460px 460px at 92% 24%, rgba(200, 145, 42, .16), transparent 70%);
}
body.login > * { position: relative; z-index: 1; }

#login { padding-top: 7vh; width: 340px; }

.login h1 a {
  background-image: url("../img/icon.svg");
  background-size: 56px 56px;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  color: var(--muted);
}

.login form {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 64px -28px rgba(0, 0, 0, .9);
  padding: 26px 24px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.login label,
.login form .input,
.login form p.description {
  color: var(--muted);
  font-size: 13.5px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 15px;
  padding: 10px 13px;
  margin: 6px 0 0;
  box-shadow: none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--o1);
  outline: 2px solid var(--o1);
  outline-offset: 1px;
  box-shadow: none;
}

/* Het oogje om het wachtwoord te tonen. */
.login .wp-pwd .button.wp-hide-pw {
  color: var(--muted);
  background: transparent;
  border: 0;
}
.login .wp-pwd .button.wp-hide-pw:hover { color: var(--fg); }

.login .forgetmenot label { display: inline-flex; align-items: center; gap: 8px; }
.login input[type="checkbox"] {
  accent-color: var(--o1);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 16px;
  height: 16px;
  box-shadow: none;
}
.login input[type="checkbox"]::before { filter: invert(1); }

/* Keuzelijsten: dekkende achtergrond, anders tekent de browser de
   uitklaplijst wit met lichte tekst erop. */
.login select { background-color: #131f2a; color: var(--fg); color-scheme: dark; }
.login select option { background-color: #131f2a; color: var(--fg); }

.wp-core-ui .button-primary {
  background: linear-gradient(100deg, var(--o1), #6ab8e8);
  border: 0;
  border-radius: 10px;
  color: #04121d;
  font-family: var(--font-text);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 22px;
  text-shadow: none;
  box-shadow: 0 10px 30px -10px rgba(61, 155, 212, .75);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background: linear-gradient(100deg, #4aa8e0, #7cc3ee);
  color: #04121d;
  box-shadow: 0 10px 30px -10px rgba(61, 155, 212, .9);
}
.wp-core-ui .button-primary:focus { outline: 2px solid var(--o1); outline-offset: 2px; }

#login #nav,
#login #backtoblog {
  padding: 0;
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
}
#login #nav a,
#login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--muted);
  text-decoration: none;
}
#login #nav a:hover,
#login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover { color: var(--o1); }

.login .message,
.login .notice,
.login #login_error {
  background: var(--glass);
  border: 1px solid var(--line);
  border-left: 3px solid var(--o1);
  border-radius: 0 8px 8px 0;
  color: var(--fg);
  box-shadow: none;
  font-size: 13.5px;
}
.login #login_error { border-left-color: #d63a2f; }

.login .language-switcher { display: none; }