/* ===========================
   Register (scoped to .auth-wrap--register)
   =========================== */

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

.auth-wrap--register .auth-card{
  width:100%; max-width:500px; margin:0 auto;
  border-radius:16px; overflow:visible; /* нужно для тултипов */
  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--register .auth-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.14);
}

/* hero */
.auth-wrap--register .auth-hero{ text-align:center; margin-bottom:12px; }
.auth-wrap--register .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--register .auth-hero__icon img{ width:100%; height:100%; object-fit:cover; }

.auth-wrap--register .auth-title{
  /* цвет задаёт .gradient-title глобально; здесь только размеры */
  font-size:clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight:800; margin:0 0 4px; letter-spacing:.2px;
}
.auth-wrap--register .auth-subtitle{ margin:0; color:#6c757d; font-size:.95rem; }

/* inputs */
.auth-wrap--register .auth-form .form-floating{ position:relative; }
.auth-wrap--register .auth-form .form-control{
  border-radius:10px; height:44px;
  padding-right:2.6rem; /* место под значок ошибки справа */
  transition:border-color .2s, box-shadow .2s;
}

/* invalid state подсветка поля */
.was-validated .form-control:invalid,
.form-control.is-invalid{
  border-color:#dc3545;
  box-shadow:0 0 0 .15rem rgba(220,53,69,.15);
}

/* ===== Значок ошибки справа (показываем только когда поле invalid) ===== */
.auth-wrap--register .invalid-badge{
  position:absolute; top:50%; right:.55rem;
  transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-weight:800; line-height:1; cursor:help;
  background:#fff; color:#dc3545;
  border:2px solid rgba(220,53,69,.75);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:0;
  z-index:2;
}

/* Показывать при фокусе, если поле невалидно */
.auth-wrap--register .form-control:focus:invalid ~ .invalid-badge{
  display:inline-flex;
}

/* И после сабмита — у оставшихся невалидных */
.was-validated .form-control:invalid ~ .invalid-badge,
.form-control.is-invalid ~ .invalid-badge{
  display:inline-flex;
}

/* Фокус по Tab на самом значке */
.auth-wrap--register .invalid-badge:focus-visible{
  outline:2px solid rgba(220,53,69,.35);
  outline-offset:2px;
}

/* ===== Tooltip for invalid field (responsive) ===== */
.auth-wrap--register .form-floating.position-relative { overflow: visible; }

/* base look */
.auth-wrap--register .invalid-tooltip{
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);       /* справа от поля */
  transform: translateY(-50%);
  padding: .55rem .75rem;
  border-radius: 10px;
  background: #fff;
  color: #1F252E;
  border: 2px solid rgba(220,53,69,.35);
  box-shadow: 0 10px 24px rgba(220,53,69,.08);
  font-size: .92rem;
  line-height: 1.3;

  width: max-content;
  max-width: clamp(220px, 40vw, 340px); /* ограничение ширины */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 1060;
  pointer-events: none;           /* не мешаем кликам по полю */
}

/* arrow (right side) */
.auth-wrap--register .invalid-tooltip::before{
  content:"";
  position:absolute; top:50%; right:100%;
  transform: translateY(-50%);
  border:7px solid transparent;
  border-right-color: rgba(220,53,69,.35);
}
.auth-wrap--register .invalid-tooltip::after{
  content:"";
  position:absolute; top:50%; right:calc(100% - 2px);
  transform: translateY(-50%);
  border:6px solid transparent;
  border-right-color:#fff;
}

/* show on badge hover/focus */
.auth-wrap--register .invalid-badge:hover + .invalid-tooltip,
.auth-wrap--register .invalid-badge:focus + .invalid-tooltip{
  opacity: 1;
  visibility: visible;
}

/* narrow screens: put tooltip under the field and full-width */
@media (max-width: 576px){
  .auth-wrap--register .invalid-tooltip{
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    transform: none;
    max-width: 100%;
  }
  /* arrow on top when tooltip is below */
  .auth-wrap--register .invalid-tooltip::before,
  .auth-wrap--register .invalid-tooltip::after{
    top: -1px; right: auto; left: 22px; transform: none;
    border-right-color: transparent;
  }
  .auth-wrap--register .invalid-tooltip::before{
    border:7px solid transparent;
    border-bottom-color: rgba(220,53,69,.35);
  }
  .auth-wrap--register .invalid-tooltip::after{
    border:6px solid transparent;
    border-bottom-color:#fff;
  }
}

/* captcha spacing (центрируем и резервируем высоту при инициализации) */
.auth-wrap--register .cf-turnstile{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:8px auto 12px; min-height:70px;
}

/* link: already have account */
.auth-wrap--register .forgot-link{
  position:relative; display:inline-block;
  padding:2px 0; color:#1F252E; font-weight:700;
  text-decoration:none; transition:color .2s ease;
}
.auth-wrap--register .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--register .forgot-link:hover{ color:#E1306C; }
.auth-wrap--register .forgot-link:hover::after{ transform:scaleX(1); opacity:.9; }
.auth-wrap--register .forgot-link:focus-visible{
  outline:2px solid rgba(225,48,108,.35);
  outline-offset:3px; border-radius:6px;
}

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

/* socials */
.auth-wrap--register .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--register .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--register .social-icon-btn img{ width:18px; height:18px; object-fit:contain; }
.auth-wrap--register .social-icon-btn.disabled{ opacity:.5; pointer-events:none; }

/* --- резерв для .invalid-feedback (если где-то используется) --- */
.auth-wrap--register .invalid-feedback{
  display:block; min-height:1rem; margin-top:.25rem;
  visibility:hidden; opacity:0; transition:opacity .18s ease;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback{
  visibility:visible; opacity:1;
}

/* responsive */
@media (min-width:1200px){
  .auth-wrap--register .auth-card{ max-width:540px; padding:24px 26px; }
}
@media (min-height:900px){
  .auth-wrap.auth-wrap--register{ min-height:calc(100vh - 200px); }
}
@media (max-width:768px){
  .auth-wrap--register .auth-title{ font-size:1.3rem; }
}

/* fallback: если вдруг форма отрендерится без .auth-card */
.form-container .auth-form{
  max-width:460px; 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; }
}