/* Anarchy Project - auth input refresh (v14) */

/* 1. no filled background, no inner shadow behind placeholders */
.ax-af .form-input,
.ax-auth-shell-reg .ax-af .form-input,
.ax-auth-modal .form-input{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  border:1px solid rgba(255,255,255,.11)!important;
}
.ax-af .form-input:hover{
  background:transparent!important;
  border-color:rgba(255,255,255,.19)!important;
}
.ax-af .form-input:focus{
  outline:none!important;
  background:transparent!important;
  border-color:rgba(37,217,164,.55)!important;
  box-shadow:none!important;
}
.ax-af .form-input::placeholder{color:rgba(238,241,248,.35)!important;}

/* browser autofill must not paint its own block either */
input.form-input:-webkit-autofill,
input.form-input:-webkit-autofill:hover,
input.form-input:-webkit-autofill:focus,
input.form-input:-webkit-autofill:active,
input.form-input:autofill{
  -webkit-text-fill-color:#eef1f8!important;
  caret-color:#eef1f8!important;
  -webkit-box-shadow:none!important;
  box-shadow:none!important;
  background:transparent!important;
  background-color:transparent!important;
  transition:background-color 100000s ease-in-out 0s!important;
}

/* 2. roomier inputs, calmer spacing */
.ax-af .form-input{
  height:50px!important;
  padding:0 20px 0 46px!important;
  border-radius:14px!important;
  font-size:13.6px!important;
  text-overflow:ellipsis!important;
}
.ax-af .pw-container .form-input{padding-right:50px!important;}
.ax-af .ax-fld-plain .form-input{padding-left:46px!important;}
.ax-af .ax-fld-ic{left:17px!important;width:17px!important;height:17px!important;}
.ax-af .ax-fld-l{margin:0 0 9px!important;}
.ax-af .ax-fld{margin-bottom:16px!important;}

/* 3. register: fields spread across the whole area, labels never collide */
.ax-auth-shell.ax-auth-shell-reg{
  width:min(1040px,100%)!important;
  grid-template-columns:38% 62%!important;
  min-height:530px!important;
}
.ax-auth-shell-reg .ax-auth-form-col{padding:32px 38px!important;}
.ax-auth-shell-reg #register-form{
  gap:12px 18px!important;
  align-items:stretch!important;
}
.ax-auth-shell-reg #register-form>.ax-fld{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  margin:0!important;
}
.ax-auth-shell-reg #register-form>.ax-fld>.ax-fld-w{margin-top:auto!important;}
.ax-af-register .ax-fld-l{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:3px 6px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.25!important;
  min-height:14px!important;
}
.ax-af-register .ax-fld-l small{font-size:9px!important;letter-spacing:.07em!important;}
.ax-af-register .ax-fld-l em{font-size:11px!important;}
.ax-auth-shell-reg .ax-af .form-input{height:48px!important;}
.ax-auth-shell-reg .password-strength{margin-top:7px!important;}
.ax-auth-shell-reg .ax-af .ax-fld{margin-bottom:0!important;}

/* 4. login: icon fields keep the same rhythm as register */
#login-form .ax-fld{margin-bottom:16px!important;}
#login-form .ax-fld-w{position:relative!important;display:block!important;}
#totp-section .form-input{letter-spacing:.34em!important;text-align:center!important;}

@media(max-width:900px){
  .ax-auth-shell-reg .ax-auth-form-col{padding:32px 26px!important;}
}
@media(max-width:520px){
  .ax-auth-shell-reg .ax-auth-form-col{padding:24px 18px!important;}
  .ax-af .form-input{height:48px!important;}
}

/* ---- v14b: let the fields use the whole form area, trim the height ---- */

/* the form column was still capped at 430px, which squeezed every input
   and clipped long RU placeholders - release it inside the register shell */
.ax-auth-shell-reg .auth-page-wrap,
.ax-auth-shell-reg .ax-af,
.ax-auth-shell-reg .ax-af-register{
  width:100%!important;
  max-width:none!important;
}

/* slightly tighter horizontal padding = wider inputs, same calm look */
.ax-af .form-input{padding:0 17px 0 44px!important;}
.ax-af .pw-container .form-input{padding-right:46px!important;}
.ax-af .ax-fld-ic{left:16px!important;}
.ax-af .pw-toggle{right:13px!important;}

/* register block: a bit shorter overall */
.ax-auth-shell.ax-auth-shell-reg{min-height:0!important;}
.ax-auth-shell-reg .ax-auth-form-col{padding:30px 36px!important;}
.ax-auth-shell-reg #register-form{gap:10px 16px!important;}
.ax-auth-shell-reg .ax-af .form-input{height:46px!important;}
.ax-auth-shell-reg #register-btn{height:48px!important;min-height:48px!important;}
.ax-auth-shell-reg .ax-af .social-btn{height:46px!important;}
.ax-auth-shell-reg .social-divider{margin:13px 0 9px!important;}
.ax-auth-shell-reg .checkbox-wrapper{margin:2px 0 0!important;}
.ax-auth-shell-reg .auth-footer{margin-top:10px!important;}

/* ---- v14c ---------------------------------------------------------------
   dist/styles.css ships two rules that outrank everything we wrote:
     .auth-page-wrap .auth-card.auth-card-compact{max-width:420px!important}
     .auth-card-compact .form-input{background:#ffffff12; ...}
   the first squeezed every input to 202px, the second is the grey block the
   user still sees behind the placeholders. beat both on specificity.
   ------------------------------------------------------------------------ */

/* no painted block behind placeholders - anywhere in the auth shell */
.ax-auth .auth-page-wrap .auth-card.auth-card-compact.ax-af input.form-input,
.ax-auth .auth-page-wrap .auth-card.auth-card-compact.ax-af .form-input,
.ax-auth-modal .ax-auth-modal-card.ax-af input.form-input,
body .ax-af input.form-input{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:14px!important;
}
.ax-auth .auth-page-wrap .auth-card.auth-card-compact.ax-af input.form-input:hover,
body .ax-af input.form-input:hover{
  background:transparent!important;
  background-color:transparent!important;
  border-color:rgba(255,255,255,.19)!important;
}
.ax-auth .auth-page-wrap .auth-card.auth-card-compact.ax-af input.form-input:focus,
body .ax-af input.form-input:focus{
  outline:none!important;
  background:transparent!important;
  background-color:transparent!important;
  border-color:rgba(37,217,164,.55)!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
}
body .ax-af input.form-input::placeholder{color:rgba(238,241,248,.35)!important;}

/* autofill must not paint its own block either */
body .ax-af input.form-input:-webkit-autofill,
body .ax-af input.form-input:-webkit-autofill:hover,
body .ax-af input.form-input:-webkit-autofill:focus,
body .ax-af input.form-input:-webkit-autofill:active{
  -webkit-text-fill-color:#eef1f8!important;
  caret-color:#eef1f8!important;
  -webkit-box-shadow:none!important;
  box-shadow:none!important;
  background:transparent!important;
  background-color:transparent!important;
  transition:background-color 100000s ease-in-out 0s!important;
}

/* release the 420px cap so register fields fill the whole column */
.ax-auth .ax-auth-shell-reg .auth-page-wrap,
.ax-auth .ax-auth-shell-reg .auth-page-wrap .auth-card.auth-card-compact.ax-af,
.ax-auth .ax-auth-shell-reg .auth-page-wrap .auth-card.auth-card-compact.ax-af-register{
  width:100%!important;
  max-width:none!important;
}

/* keep the sizing after the cap is gone */
body .ax-af input.form-input{height:50px!important;padding:0 17px 0 44px!important;font-size:13.6px!important;}
body .ax-af .pw-container input.form-input{padding-right:46px!important;}
body .ax-auth-shell-reg .ax-af input.form-input{height:46px!important;}


/* ---- v14d ---- */
.ax-auth .form-input,
.ax-auth input.form-input,
.ax-auth-modal input.form-input,
body .ax-auth .auth-card input.form-input,
body .ax-auth .auth-card-compact input.form-input {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 14px !important;
  color: var(--ax-ink, #eef1f8) !important;
}
.ax-auth .form-input:hover,
body .ax-auth .auth-card-compact input.form-input:hover {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.19) !important;
  box-shadow: none !important;
}
.ax-auth .form-input:focus,
.ax-auth .form-input:focus-visible,
body .ax-auth .auth-card-compact input.form-input:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(37,217,164,.55) !important;
  box-shadow: none !important;
  outline: none !important;
}
.ax-auth .form-input::placeholder { color: rgba(238,241,248,.35) !important; }
.ax-auth .form-input:-webkit-autofill,
.ax-auth .form-input:-webkit-autofill:hover,
.ax-auth .form-input:-webkit-autofill:focus,
.ax-auth .form-input:-webkit-autofill:active,
body .ax-auth input.form-input:-webkit-autofill {
  -webkit-text-fill-color: #eef1f8 !important;
  caret-color: #eef1f8 !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 100000s ease-in-out 0s !important;
}

/* ---- v14e : no overlay gradient behind the fields ---- */
.ax-auth .auth-card:before,
.ax-auth .auth-card:after,
.ax-auth .auth-card.auth-card-compact:before,
.ax-auth .auth-card.auth-card-compact:after,
.ax-auth .auth-card.auth-card-compact.ax-af:before,
.ax-auth .auth-card.auth-card-compact.ax-af:after,
.ax-auth-modal .ax-auth-modal-card:before,
.ax-auth-modal .ax-auth-modal-card:after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
}
.ax-auth .auth-card,
.ax-auth .auth-card.auth-card-compact,
.ax-auth .auth-card.auth-card-compact.ax-af{
  background-image:none !important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6) !important;
}
.ax-auth .ax-fld:before,
.ax-auth .ax-fld:after,
.ax-auth .ax-fld-w:before,
.ax-auth .ax-fld-w:after,
.ax-auth .pw-container:before,
.ax-auth .pw-container:after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.ax-auth .ax-fld-w,
.ax-auth .pw-container{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* ---- register hero off on phones - 2026-08-26 ----
   anarchy-update-v10.css forced .ax-auth-shell-reg .ax-auth-side back on with
   !important, so the agent artwork duplicated the mobile heading. */
@media (max-width:900px){
  .ax-auth-shell .ax-auth-side,
  .ax-auth-shell-reg .ax-auth-side{display:none!important}
  .ax-auth-shell-reg{display:block!important;min-height:0!important}
  .ax-auth-shell-reg .ax-auth-form-col{padding:34px 22px!important}
}