/* ===========================
   Login (scoped to .auth-wrap--login)
   =========================== */

/* layout */
.auth-wrap.auth-wrap--login{
  display:flex; justify-content:center; align-items:center;
  min-height:calc(100vh - 180px); /* учитываем шапку+футер */
  padding:16px 0;
}

.auth-wrap--login .auth-card{
  width:100%; max-width:480px; margin:0 auto;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%, #f7f8ff 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:22px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.auth-wrap--login .auth-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.14);
}

/* hero */
.auth-wrap--login .auth-hero{ text-align:center; margin-bottom:12px; }
.auth-wrap--login .auth-hero__icon{
  width:56px; height:56px; border-radius:12px; overflow:hidden;
  margin:0 auto 8px; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.auth-wrap--login .auth-hero__icon img{ width:100%; height:100%; object-fit:cover; }

.auth-wrap--login .auth-title{
  font-size:clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight:800; margin:0 0 4px;
  letter-spacing:.2px; color:#1F252E;
}
.auth-wrap--login .auth-subtitle{ margin:0; color:#6c757d; font-size:.95rem; }

/* inputs */
.auth-wrap--login .auth-form .form-control{
  border-radius:10px; height:44px;
}
/* чтоб глазок не наезжал на текст/лейбл */
.form-floating > .form-control {
  padding-right: 2.5rem;  /* место под кнопку */
}
.form-floating > label {
  padding-right: 2.5rem;  /* чтобы плейсхолдер-лейбл не перекрывало */
}

/* кнопка поверх инпута */
.auth-wrap--login .password-toggle{
  position:absolute; top:50%; right:.5rem;
  transform:translateY(-50%);
  border:0; background:transparent;
  padding:.25rem .4rem;
  color:#6c757d; border-radius:8px;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
  z-index: 3;                 /* <-- чтобы не скрывалась под инпутом/лейблом */
  cursor: pointer;
}
.auth-wrap--login .password-toggle:hover{
  color:#111827; background:rgba(0,0,0,.04);
}
/* password toggle: чётко по центру поля */
.auth-wrap--login .password-toggle{
  position:absolute; top:50%; right:.5rem;
  transform:translateY(-50%);
  border:0; background:transparent;
  padding:.25rem .4rem;
  color:#6c757d; border-radius:8px;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.auth-wrap--login .password-toggle:hover{
  color:#111827; background:rgba(0,0,0,.04);
}

/* ===== Remember me custom checkbox ===== */
.auth-wrap--login .auth-opts-top {
  margin: 6px 0 10px;
  display: flex;
  justify-content: center;
}

.auth-wrap--login .remember-me {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: pointer;
}

/* сам input скрываем стандартный чекбокс */
.auth-wrap--login .remember-me .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 18px;
  height: 18px;
  margin: 0;

  border: 2px solid #cfd3dc;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* подсветка при фокусе */
.auth-wrap--login .remember-me .form-check-input:focus {
  box-shadow: 0 0 0 .18rem rgba(0, 0, 205, .18);
  border-color: #9aa4c7;
}

/* галочка — псевдоэлемент */
.auth-wrap--login .remember-me .form-check-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* фон и рамка при checked */
.auth-wrap--login .remember-me .form-check-input:checked {
  background-color: #0000CD;
  border-color: #0000CD;
}

/* подпись */
.auth-wrap--login .remember-me .form-check-label {
  margin: 0;
  font-weight: 600;
  color: #1F252E;
  cursor: pointer;
}

/* forgot password */
.auth-wrap--login .forgot-link{
  position:relative; display:inline-block;
  padding:2px 0; color:#1F252E; font-weight:700;
  text-decoration:none; transition:color .2s ease;
}
.auth-wrap--login .forgot-link::after{
  content:""; position:absolute; left:0; bottom:-2px;
  height:2px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease, opacity .25s ease; opacity:.55;
}
.auth-wrap--login .forgot-link:hover{ color:#E1306C; }
.auth-wrap--login .forgot-link:hover::after{ transform:scaleX(1); opacity:.9; }
.auth-wrap--login .forgot-link:focus-visible{
  outline:2px solid rgba(225,48,108,.35);
  outline-offset:3px; border-radius:6px;
}

/* optional captcha spacing (если включишь Turnstile) */
.auth-wrap--login .cf-turnstile{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:8px auto 12px; min-height:70px;
}

/* divider */
.auth-wrap--login .divider{
  display:flex; align-items:center; gap:.75rem;
  color:#6b7280; font-weight:600; justify-content:center;
}
.auth-wrap--login .divider::before,
.auth-wrap--login .divider::after{
  content:""; flex:1 1 auto; height:1px; background:rgba(0,0,0,.08);
}
.auth-wrap--login .divider span{ white-space:nowrap; font-size:.85rem; }

/* socials */
.auth-wrap--login .social-icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.auth-wrap--login .social-icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.18);
}
.auth-wrap--login .social-icon-btn img{ width:18px; height:18px; object-fit:contain; }
.auth-wrap--login .social-icon-btn.disabled{ opacity:.5; pointer-events:none; }

/* responsive */
@media (min-width:1200px){
  .auth-wrap--login .auth-card{ max-width:520px; padding:24px 26px; }
}
@media (min-height:900px){
  .auth-wrap.auth-wrap--login{ min-height:calc(100vh - 200px); }
}
@media (max-width:768px){
  .auth-wrap--login .forgot-link{ font-size:.95rem; }
}

/* fallback: если кто-то отрендерит форму без .auth-card */
.form-container .auth-form{
  max-width:440px; margin:0 auto; padding:18px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%, #f7f8ff 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 22px rgba(0,0,0,.08);
}
@media (min-width:1200px){
  .form-container .auth-form{ padding:20px 22px; }
}