/* ==========================================================================
LeadVector — auth forms (Bootstrap 5.2.3): login / register / restore
Page template (same as agreement / privacy):
{{ login.part / register.part / restore.part }}
Load after css/bootstrap.min.css and css/styles.css.
Markup = Bootstrap 5 components: container / row / col, card, form-control,
form-check, btn btn-primary w-100. This file only themes them.
========================================================================== */
.lvAuth{
--auth-primary:var(--primary,#335CFF);
--auth-primary-hover:#2F52E6;
--auth-primary-rgb:51,92,255;
--auth-ink:#182138;
--auth-text:#667085;
--auth-border:#D0D5DD;
--auth-error:#D45D5D;
display:block;
padding:56px 0 88px;
color:var(--auth-text);
font-family:var(--font,Onest),system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:15px;
line-height:1.5;
}
/* ---------- Layout ---------- */
.lv-auth-col{max-width:460px}
/* !important: the site template sets a global h1 { font-size … !important } */
.lvAuth .lv-auth-title{
margin:0 0 24px;
text-align:center;
color:var(--auth-ink);
font-family:var(--font,Onest),sans-serif;
font-size:32px!important;
font-weight:600!important;
line-height:1.2!important;
letter-spacing:-.035em!important;
}
.lv-auth-card{
--bs-card-border-color:#E3E6EF;
--bs-card-border-radius:18px;
--bs-card-inner-border-radius:17px;
--bs-card-spacer-y:36px;
--bs-card-spacer-x:40px;
--bs-card-color:var(--auth-text);
box-shadow:0 8px 30px rgba(25,36,69,.05);
}
.lv-auth-card .card-body{padding-bottom:32px}
/* ---------- Fields ---------- */
.lvAuth .form-control{
height:48px;
padding:0 16px;
border-color:var(--auth-border);
border-radius:10px;
color:var(--auth-ink);
font:400 15px/1.4 var(--font,Onest),sans-serif;
box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.lvAuth .form-control::placeholder{color:#98A2B3}
.lvAuth .form-control:hover{border-color:#B9C0CC}
.lvAuth .form-control:focus{
border-color:var(--auth-primary);
box-shadow:0 0 0 4px rgba(var(--auth-primary-rgb),.14);
}
.lvAuth .form-control[type="password"],
.lvAuth .form-control-user-password,
.lvAuth .form-control-user-passwordrepeat{padding-right:52px}
/* ---------- Password field + show-password button (jsDoHelperShowPassword) ----------
The group is a one-column CSS grid: the field and the eye button share
row 1 (the eye sits at its right edge), everything else — error lines —
flows into the rows below. No absolute positioning: the eye stays on the
field whatever is inserted into / removed from the group and in any DOM
order (an error line inserted before or after the field). */
.lvAuth .lv-auth-password{
display:grid!important;
grid-template-columns:minmax(0,1fr);
align-items:center;
}
.lvAuth .lv-auth-password > .form-control{grid-row:1;grid-column:1}
.lvAuth .lv-auth-password > .show-password-btn{
grid-row:1;grid-column:1;
justify-self:end;align-self:center;
position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
margin:0!important;transform:none!important;float:none!important;
z-index:5;
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:0 10px 10px 0;
cursor:pointer;
opacity:.75;
transition:opacity .15s,background-color .15s;
-webkit-user-select:none;user-select:none;
}
.lvAuth .lv-auth-password > :not(.form-control):not(.show-password-btn){grid-column:1}
.lvAuth .show-password-btn:hover{opacity:1;background:rgba(var(--auth-primary-rgb),.06)}
.lvAuth .show-password-btn img{display:block;width:20px;height:20px;margin:0!important}
/* ---------- Error lines (.jsdo-error-message-line) ----------
Shown / hidden by the jsdo mechanism (hidden again after 20 s).
Only the look is set here — no display rules, the mechanism stays in control. */
.lvAuth .jsdo-error-message-line{
margin-top:6px;
padding-left:2px;
color:var(--auth-error);
font:400 14px/1.4 var(--font,Onest),sans-serif;
text-align:left;
animation:lvAuthErrorIn .18s ease-out;
}
@keyframes lvAuthErrorIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* restore: the line sits between the field and the button */
.lvAuth form > .jsdo-error-message-line{margin:-10px 0 16px}
/* ---------- Agreement checkbox (register) ---------- */
.lvAuth .form-check{margin:2px 0 0;padding-left:30px;min-height:0;font-size:14px;line-height:1.5}
.lvAuth .form-check-input{
width:18px;height:18px;margin:2px 0 0 -30px;
border-color:#B9C0CC;border-radius:5px;
cursor:pointer;
}
.lvAuth .form-check-input:checked{background-color:var(--auth-primary);border-color:var(--auth-primary)}
.lvAuth .form-check-input:focus{border-color:var(--auth-primary);box-shadow:0 0 0 4px rgba(var(--auth-primary-rgb),.14)}
.lvAuth .form-check-label{color:var(--auth-text);cursor:pointer}
.lvAuth .form-check-label a{color:var(--auth-primary);text-decoration:underline;text-decoration-color:rgba(var(--auth-primary-rgb),.3);text-underline-offset:3px}
.lvAuth .form-check-label a:hover{text-decoration-color:currentColor}
/* ---------- Submit button: same style as «Регистрация» in the header menu ----------
(#mainNav .nav-register: primary fill, 6px radius, 15px / 500, hover #486DFF) */
.lvAuth .btn-primary{
--bs-btn-color:#fff;
--bs-btn-bg:var(--auth-primary);
--bs-btn-border-color:var(--auth-primary);
--bs-btn-hover-color:#fff;
--bs-btn-hover-bg:#486DFF;
--bs-btn-hover-border-color:#486DFF;
--bs-btn-active-color:#fff;
--bs-btn-active-bg:#486DFF;
--bs-btn-active-border-color:#486DFF;
--bs-btn-disabled-bg:var(--auth-primary);
--bs-btn-disabled-border-color:var(--auth-primary);
--bs-btn-focus-shadow-rgb:var(--auth-primary-rgb);
--bs-btn-padding-x:15px;
--bs-btn-padding-y:0;
--bs-btn-font-family:var(--font,Onest),sans-serif;
--bs-btn-font-size:15px;
--bs-btn-font-weight:500;
--bs-btn-line-height:20px;
--bs-btn-border-radius:6px;
--bs-btn-box-shadow:none;
display:inline-flex;align-items:center;justify-content:center;
height:48px;
margin-top:8px;
letter-spacing:-.01em;
white-space:nowrap;
transition:background-color .16s,border-color .16s;
}
/* ---------- Links under the form / under the card ---------- */
.lv-auth-alt{margin:22px 0 0;text-align:center;font-size:14px;color:var(--auth-text)}
.lv-auth-alt a{display:inline-block;margin-top:2px;color:var(--auth-primary);font-size:16px;font-weight:600;text-decoration:none}
.lv-auth-alt a:hover{color:var(--auth-primary);text-decoration:underline}
.lv-auth-alt-outside{margin-top:20px}
/* ---------- Mobile ---------- */
@media (max-width:575.98px){
.lvAuth{padding:28px 0 48px}
.lvAuth .lv-auth-title{margin-bottom:18px;font-size:26px!important}
.lv-auth-card{--bs-card-border-radius:14px;--bs-card-inner-border-radius:13px;--bs-card-spacer-y:24px;--bs-card-spacer-x:20px}
.lv-auth-card .card-body{padding-bottom:22px}
.lvAuth .form-control{font-size:16px} /* no iOS zoom on focus */
}
@media (prefers-reduced-motion:reduce){
.lvAuth .jsdo-error-message-line{animation:none}
}
.lvAuth .jsdo-error-message-input-line{
border-color: var(--auth-error);
}
.jsdo-error-block {
border: 1px solid var(--auth-error);
border-radius: 8px;
color: var(--auth-error);
padding: 12px;
margin-bottom: 15px;
}
.jsdo-success-block {
border: 1px solid #53ae58;
border-radius: 8px;
color: #53ae58;
padding: 12px;
margin-bottom: 15px;
}
.jsdo-error-block .cal1,
.jsdo-error-block .cal2,
.jsdo-success-block .cal1,
.jsdo-success-block .cal2 {
display: inline;
margin-left: 15px;
}