/* ============================================================
   Blocksy account-modal (header-login-popup) in de stijl van de
   contact-popup: donkere afgeronde kaart · grote lowercase kop ·
   cursieve subregel · underline-velden · witte pill-knop · ronde X.
   Strikt gescopet op #account-modal; zelf-dragend (geen --cb-tokens).
   ============================================================ */

/* buitenste panel transparant laten; de kaart is .ct-account-modal */
#account-modal.ct-panel,
#account-modal .ct-panel-content { background: transparent !important; }

#account-modal .ct-account-modal {
  background: #181818 !important;
  border-radius: 36px !important;
  padding: 52px 44px 44px !important;
  max-width: 620px !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: #e9e9e9 !important;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.6) !important;
}
@media (max-width: 600px) {
  #account-modal .ct-account-modal { padding: 40px 26px 32px !important; border-radius: 28px !important; }
}

/* koppen (zoals "stuur ons een bericht.") + cursieve subregel */
#account-modal .ct-login-form::before,
#account-modal .ct-forgot-password-form::before,
#account-modal .ct-register-form::before {
  display: block;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 14px;
}
#account-modal .ct-login-form::before           { content: "even inloggen."; }
#account-modal .ct-forgot-password-form::before { content: "wachtwoord vergeten."; }
#account-modal .ct-register-form::before        { content: "account aanmaken."; }

#account-modal form#loginform::before,
#account-modal form#lostpasswordform::before {
  display: block;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: #9a9a9a;
  margin: 0 0 30px;
}
#account-modal form#loginform::before        { content: "Log in voor het klantportaal of het klussenbord."; }
#account-modal form#lostpasswordform::before { content: "Vul je e-mailadres in, dan sturen we je een resetlink."; }

/* labels: klein en gedempt boven het lijntje */
#account-modal label {
  color: #8a8a8a !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-transform: lowercase !important;
}

/* velden: underline-stijl (alleen een lijntje onder, geen kader) */
#account-modal input[type="text"],
#account-modal input[type="email"],
#account-modal input[type="password"] {
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 0 !important;
  padding: 12px 2px !important;
  font-size: 19px !important;
  font-family: inherit !important;
  box-shadow: none !important;
  width: 100% !important;
}
#account-modal input::placeholder { color: #6a6a6a !important; }
#account-modal input[type="text"]:focus,
#account-modal input[type="email"]:focus,
#account-modal input[type="password"]:focus {
  border-bottom-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}
/* autofill niet wit laten knallen */
#account-modal input:-webkit-autofill,
#account-modal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #181818 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ruimte tussen de velden */
#account-modal form p { margin-bottom: 22px !important; }

/* wachtwoord-toggle: neutraal grijs */
#account-modal .ct-password-visibility,
#account-modal [class*="password"] button,
#account-modal .wp-hide-pw {
  color: #777 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#account-modal .ct-password-visibility svg { fill: currentColor !important; }
#account-modal .ct-password-visibility:hover { color: #ffffff !important; }

/* onthoud-mij */
#account-modal input[type="checkbox"] { accent-color: #ffffff; }
#account-modal .login-remember label,
#account-modal .ct-remember-me { color: #9a9a9a !important; text-transform: none !important; font-size: 14px !important; }

/* witte pill-knop over de volle breedte (zoals "Versturen") */
#account-modal .ct-button,
#account-modal button[name="wp-submit"],
#account-modal [type="submit"] {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 17px 28px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin-top: 8px !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}
#account-modal .ct-button:hover,
#account-modal button[name="wp-submit"]:hover,
#account-modal [type="submit"]:hover { background: #e6e6e6 !important; transform: translateY(-1px); }

/* links (wachtwoord vergeten / terug naar inloggen) */
#account-modal a,
#account-modal .ct-forgot-password,
#account-modal .ct-back-to-login,
#account-modal .ct-login {
  color: #9a9a9a !important;
  font-size: 15px !important;
  text-decoration: none !important;
}
#account-modal a:hover,
#account-modal .ct-forgot-password:hover,
#account-modal .ct-back-to-login:hover { color: #ffffff !important; }

/* ronde sluitknop (X in donkere cirkel, zoals de contact-popup) */
#account-modal .ct-panel-actions button,
#account-modal .ct-toggle-close {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #0d0d0d !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  transition: background .2s ease !important;
}
#account-modal .ct-panel-actions button:hover,
#account-modal .ct-toggle-close:hover { background: #1d1d1d !important; }
#account-modal .ct-toggle-close svg { fill: currentColor !important; }

/* meldingen / fouten */
#account-modal .ct-alert,
#account-modal #login_error {
  background: #1f1414 !important;
  border: 1px solid #c67b73 !important;
  color: #f0d9d6 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}