/*
 * === Login & password forms ===
 * Loaded only on /inloggen/, /wachtwoordvergeten/ and related pages.
 * Relies on CSS variables defined in style.css (:root).
 */

/* --- Login page card (wp_login_form) --- */

.login-page {
  max-width: 560px;
  margin: 0 auto;
}

.login-page h1,
.login-page > p {
  text-align: center;
}

.login-page .login-card {
  max-width: 420px;
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin: 20px auto 30px;
}

.login-page .login-username,
.login-page .login-password,
.login-page .login-remember {
  margin-bottom: 14px;
  text-align: left;
}

.login-page label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #444;
}

.login-page input[type="text"],
.login-page input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.95em;
  transition: border-color .15s ease;
}

.login-page input[type="text"]:focus,
.login-page input[type="password"]:focus {
  border-color: var(--main-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(147,172,18,.15);
}

.login-page input[type="submit"] {
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--main-color);
  color: #fff;
  font-weight: 600;
  font-size: 1.05em;
  min-width: 220px;
  cursor: pointer;
  transition: background .2s ease;
}

.login-page .button.button-primary,
.login-page input#wp-submit {
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--main-color);
  color: #fff;
  font-weight: 600;
  font-size: 1.05em;
  min-width: 220px;
  text-shadow: none;
  box-shadow: none;
}

.login-page .login-submit {
  margin-top: 18px;
  text-align: center;
}

.login-page input[type="submit"]:hover {
  background: var(--dark-color);
}

/* --- Error & helper text --- */

.login-error {
  background: #fff5f5;
  border-left: 4px solid #c0392b;
  color: #7b1c1c;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 0.92em;
}

.login-forgot-link {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.9em;
  text-align: center;
}

.login-forgot-link a {
  color: var(--main-color);
}

/* --- Theme My Login (TML) forms --- */
/* Used on /wachtwoordvergeten/ (lostpassword & resetpass shortcodes). */

body.tml-action .container.pagecontent {
  max-width: 560px;
}
  
body.tml-action .container.pagecontent::before {
  display: block;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2;
  margin: 26px 0 12px;
  color: #222;
}

body.tml-action-login .container.pagecontent::before {
  content: "Inloggen";
}

body.tml-action-lostpassword .container.pagecontent::before {
  content: "Wachtwoord vergeten";
}

body.tml-action-resetpass .container.pagecontent::before,
body.tml-action-rp .container.pagecontent::before {
  content: "Nieuw wachtwoord aanmaken";
}

.tml {
  max-width: 420px;
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin: 20px auto 30px;
}

.tml-field-wrap {
  margin-bottom: 14px;
}

.tml-label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #444;
}

.tml-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.95em;
  transition: border-color .15s ease;
}

.tml-field:focus {
  border-color: var(--main-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(147,172,18,.15);
}

.tml .tml-submit-wrap {
  margin-top: 18px;
  text-align: center;
}

.tml .tml-button,
.tml button[type="submit"],
.tml input[type="submit"] {
  padding: 14px 24px;
  border: 2px solid var(--main-color);
  border-radius: 8px;
  background: #fff;
  color: var(--main-color);
  font-weight: 600;
  font-size: 1.05em;
  min-width: 220px;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.tml .tml-button:hover,
.tml button[type="submit"]:hover,
.tml input[type="submit"]:hover {
  background: #f5f9ea;
  border-color: var(--dark-color);
  color: var(--dark-color);
}

/* --- TML alerts & messages --- */

.tml-alerts {
  margin-bottom: 14px;
}

.tml-errors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tml-error {
  background: #fff5f5;
  border-left: 4px solid #c0392b;
  color: #7b1c1c;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.92em;
}

.tml-messages {
  list-style: none;
  margin: 0 !important;
  padding: 0;
}

.tml .tml-messages .tml-message {
  background: #f4fbe8 !important;
  border-left: 4px solid var(--main-color) !important;
  color: #3a4a08 !important;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 0 0 8px !important;
  font-size: 0.92em;
}

.tml .tml-messages .tml-message p {
  margin: 0;
  color: inherit;
}

/* --- TML links --- */

.tml-links {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.9em;
}

.tml-links li {
  margin-bottom: 4px;
}

.tml-links a {
  color: var(--main-color);
}

.tml-register-link {
  display: none;
}

/* Keep labels accessible while using placeholders as visible field titles. */
.tml .asac-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* --- Password strength meter (reset password form) --- */

#pass-strength-result {
  width: 100%;
  padding: 6px 10px;
  margin-top: 6px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  box-sizing: border-box;
  text-align: center;
}

#pass-strength-result.strong { background: #d4edda; color: #1e5631; }
#pass-strength-result.good   { background: #fff3cd; color: #7d5a00; }
#pass-strength-result.bad    { background: #ffe0c8; color: #7a3000; }
#pass-strength-result.short  { background: #fde8e8; color: #7b1c1c; }