/* ===== form valid/invalid base ===== */
.was-validated .form-control:invalid { border-color:#dc3545; }
.was-validated .form-control:valid   { border-color:#198754; }
.is-invalid { border-color:#dc3545 !important; }
.is-valid   { border-color:#198754 !important; }

/* Подсветка поля кода после отправки */
.highlight{
  background-color:#e7f1ff;
  border-color:#0d6efd;
  border-width:2px;
  box-shadow:0 0 10px rgba(13,110,253,.5);
  transition:all .3s ease;
}

/* Кнопка отправки кода при автодоступности */
#sendCodeButton.active{ background-color:#0d6efd; color:#fff; border-color:#0d6efd; }

/* ===== bs-stepper: иконки вместо подписей ===== */
.bs-stepper .bs-stepper-header{ justify-content:center; flex-wrap:wrap; gap:.75rem; }
.bs-stepper .step .bs-stepper-circle{
  width:2.8rem; height:2.8rem; display:flex; align-items:center; justify-content:center;
  background:#e9ecef; border-radius:50%; font-size:1.3rem; color:#495057;
  transition:all .25s ease; cursor:pointer;
}
.bs-stepper .step.active .bs-stepper-circle{ background:#0d6efd; color:#fff; transform:scale(1.05); }
.bs-stepper .line{ display:none; }

/* ===== ОШИБКА/УСПЕХ ШАГА ===== */
.bs-stepper .step.step-error .bs-stepper-circle{
  background:#dc3545 !important; color:#fff !important;
  box-shadow:0 0 0 .15rem rgba(220,53,69,.25);
}
.bs-stepper .step.step-error.active .bs-stepper-circle{ transform:scale(1.05); }
.bs-stepper .step.step-success .bs-stepper-circle{ background:#198754; color:#fff; }

/* Контейнер: лёгкая адаптивность внутренних отступов */
.container{ padding-left:1rem; padding-right:1rem; }

/* =========================
   ПАРОЛЬ: кнопка-глазик (устойчиво к .is-invalid/.is-valid)
   ========================= */

/* Базовый правый отступ (только глаз) */
.form-floating.position-relative .form-control{
  padding-right: 2.75rem !important;
}

/* Когда у Bootstrap появляется внутренняя иконка валидности — добавляем место под неё */
.form-floating.position-relative .form-control.is-valid,
.form-floating.position-relative .form-control.is-invalid,
.was-validated .form-floating.position-relative .form-control:valid,
.was-validated .form-floating.position-relative .form-control:invalid{
  padding-right: 4.5rem !important;
}

/* Делаем .form-floating "слоем" в одну ячейку грида,
   где инпут, лейбл и кнопка-иконка накладываются друг на друга */
.form-floating.position-relative{
  position: relative;     /* чтобы не ломать существующие селекторы */
  display: grid;
}
.form-floating.position-relative > .form-control,
.form-floating.position-relative > label{
  grid-area: 1 / 1;       /* одна и та же область */
}

/* Кнопка-глазик: в том же грид-слое, по правому краю и строго по центру по вертикали */
.form-floating.position-relative > .btn-toggle-password{
  grid-area: 1 / 1;
  justify-self: end;
  align-self: center;
  margin-right: .75rem;   /* базово — только глаз */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: .25rem;
  background: none;
  border: 0;
  color: #6c757d;
  z-index: 4;             /* выше инпута/лейбла */
  line-height: 1;
}

/* Иконка — аккуратного размера */
.form-floating .btn-toggle-password .material-symbols-outlined{
  font-size: 22px;
}

/* Когда у поля показана иконка валидности Bootstrap — уводим глаз левее,
   чтобы не пересекался с красным/зелёным значком */
.form-floating.position-relative > .form-control.is-valid ~ .btn-toggle-password,
.form-floating.position-relative > .form-control.is-invalid ~ .btn-toggle-password,
.was-validated .form-floating.position-relative > .form-control:valid ~ .btn-toggle-password,
.was-validated .form-floating.position-relative > .form-control:invalid ~ .btn-toggle-password{
  margin-right: 2.7rem;
}

/* (опционально) лёгкая реакция на фокус */
.form-floating .form-control:focus ~ .btn-toggle-password{ color:#495057; }