/* ---- Login form (wp_login_form) gelijk trekken met register styling ---- */
.eliq-auth #eliq-loginform p {
  margin: 12px 0;
}

.eliq-auth #eliq-loginform label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
}

/* WP login inputs */
.eliq-auth #eliq-loginform input[type="text"],
.eliq-auth #eliq-loginform input[type="password"],
.eliq-auth #eliq-loginform input[type="email"],
.eliq-auth #eliq-loginform input.input {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Username field sometimes gets hard width; force it */
.eliq-auth #eliq-loginform #user_login,
.eliq-auth #eliq-loginform #user_pass {
  width: 100% !important;
}

/* Remember me netjes */
.eliq-auth #eliq-loginform .login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eliq-auth #eliq-loginform .login-remember label {
  margin: 0;
  font-weight: 500;
}

/* Button consistent */
.eliq-auth #eliq-loginform #wp-submit,
.eliq-auth #eliq-loginform input[type="submit"] {
  display: inline-block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: #006a80;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* In sommige themes staat er een floats/inline styling */
.eliq-auth #eliq-loginform .login-submit {
  margin-top: 14px;
}

.eliq-auth #eliq-loginform .login-submit,
.eliq-auth #eliq-loginform .login-username,
.eliq-auth #eliq-loginform .login-password,
.eliq-auth #eliq-loginform .login-remember {
  float: none !important;
  width: 100% !important;
}

/* Style de uitlogknop */
.eliq-header-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  background:#006a80;
  color:#fff;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}
.eliq-header-logout:hover{ opacity:.9; }

/* =====================================================
   Account menu (naam + dropdown)
   - werkt met [eliq_account_menu]
   - JS togglet class .is-open
   ===================================================== */

.eliq-account{
  position: relative;
  display: inline-block;
}

.eliq-account__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background:#006a80;
  color:#fff;
  font-weight:700;
  line-height:1;
  border:0;
  cursor:pointer;
  text-decoration:none;
}

.eliq-account__btn:hover{
  opacity:.9;
}

.eliq-account__chev{
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}

.eliq-account__menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:12px;
  padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:none;
  z-index:9999;
}

.eliq-account.is-open .eliq-account__menu{
  display:block;
}

.eliq-account__item{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#111;
  font-weight:600;
}

.eliq-account__item:hover{
  background:#f5f7fa;
}

.eliq-account__item--danger{
  color:#b00020;
}

/* =====================================================
   ELIQ – Login shake (wiebel) bij fout
   Trigger: .eliq-auth-card.is-error
   ===================================================== */

.eliq-auth-card.is-error {
  animation: eliq-shake 0.35s ease-in-out;
}

@keyframes eliq-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-6px); }
  80%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}