/* ==========================================================================
   Mobella - herontwerp van de inlog- en wachtwoordschermen (Views/Account/*).
   Gebruikt dezelfde merkkleuren als mobella-Portal-Index-redesign.css en
   mobella-EnterTreatments-redesign.css zodat de uitstraling in de hele app
   consistent is.
   ========================================================================== */

:root{
  --mob-login-purple:#4c176e;
  --mob-login-purple-dark:#33104b;
  --mob-login-mauve-tint:#f3ecf2;
  --mob-login-border:#e6e2ea;
  --mob-login-text-secondary:#5f5e5a;
  --mob-login-text-muted:#8a8880;
  --mob-login-danger-bg:#fdecea;
  --mob-login-danger-border:#f3c6c2;
  --mob-login-radius:14px;
}

.mob-login-page{
  min-height:calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:linear-gradient(160deg, var(--mob-login-mauve-tint) 0%, #ffffff 55%);
}

.mob-login-card{
  width:100%;
  max-width:420px;
  background:#ffffff;
  border:1px solid var(--mob-login-border);
  border-radius:var(--mob-login-radius);
  box-shadow:0 12px 32px rgba(76,23,110,0.10);
  padding:36px 32px;
}

.mob-login-logo{
  text-align:center;
  margin-bottom:20px;
}
.mob-login-logo img{
  max-height:56px;
  width:auto;
}

.mob-login-title{
  text-align:center;
  font-size:20px;
  font-weight:600;
  color:#212529;
  margin-bottom:4px;
}
.mob-login-subtitle{
  text-align:center;
  font-size:14px;
  color:var(--mob-login-text-secondary);
  margin-bottom:24px;
}

.mob-login-card .form-label,
.mob-login-card .control-label{
  font-size:14px;
  font-weight:500;
  color:#212529;
  margin-bottom:4px;
}

.mob-login-card .form-control{
  border-radius:8px;
  border:1px solid var(--mob-login-border);
  padding:10px 12px;
  font-size:15px;
}
.mob-login-card .form-control:focus{
  border-color:var(--mob-login-purple);
  box-shadow:0 0 0 3px rgba(76,23,110,0.12);
}

.mob-login-password-wrap{
  position:relative;
}
.mob-login-password-wrap .form-control{
  padding-right:42px;
}
.mob-login-toggle-password{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:none;
  color:var(--mob-login-text-muted);
  cursor:pointer;
  padding:4px;
  line-height:1;
}
.mob-login-toggle-password:hover{
  color:var(--mob-login-purple);
}

.mob-login-btn-primary{
  width:100%;
  background:var(--mob-login-purple);
  border-color:var(--mob-login-purple);
  border-radius:8px;
  padding:11px;
  font-weight:600;
  font-size:15px;
}
.mob-login-btn-primary:hover,
.mob-login-btn-primary:focus{
  background:var(--mob-login-purple-dark);
  border-color:var(--mob-login-purple-dark);
}

.mob-login-forgot-link{
  display:block;
  text-align:center;
  margin-top:14px;
  font-size:14px;
  color:var(--mob-login-purple);
  text-decoration:none;
}
.mob-login-forgot-link:hover{
  text-decoration:underline;
}

.mob-login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 16px;
  color:var(--mob-login-text-muted);
  font-size:13px;
}
.mob-login-divider::before,
.mob-login-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--mob-login-border);
}

.mob-login-social{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mob-login-social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border:1px solid var(--mob-login-border);
  border-radius:8px;
  padding:9px 12px;
  background:#ffffff;
  color:#212529;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.mob-login-social-btn:hover{
  background:#f8f7fa;
  color:#212529;
}
.mob-login-social-btn img,
.mob-login-social-btn svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}

.mob-login-alert{
  background:var(--mob-login-danger-bg);
  border:1px solid var(--mob-login-danger-border);
  border-radius:8px;
  padding:10px 14px;
  font-size:13.5px;
  color:#7a2622;
  margin-bottom:18px;
}
.mob-login-alert ul{
  margin:0;
  padding-left:18px;
}

.mob-login-choice{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}
.mob-login-choice .btn{
  flex:1;
  border-radius:8px;
  font-size:13.5px;
}

.mob-login-help-text{
  font-size:13px;
  color:var(--mob-login-text-secondary);
  margin-bottom:16px;
}