/**
 * auth-form.css
 * БЭМ-блок: auth-form
 * Форма авторизации (вход/регистрация)
 * Состояния полей, валидация, кнопка показа пароля
 */

/* ===========================
   Block: auth-form
   =========================== */

.auth-form {
  width: 100%;
}

/* ===========================
   Element: alert (server errors)
   =========================== */

.auth-form__alert {
  display: none;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  background-color: #fdf2f2;
  border: 1px solid #f8d7da;
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.auth-form__alert--hidden {
  display: none !important;
}

.auth-form__alert:not(.auth-form__alert--hidden) {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  animation: auth-form-alert-appear 0.25s ease-out;
}

/* Success variant */
.auth-form__alert--success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

@keyframes auth-form-alert-appear {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-form__alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.auth-form__alert-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.auth-form__alert-text {
  flex: 1;
}

.auth-form__alert-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--transition-fast),
              background-color var(--transition-fast);
}

.auth-form__alert-close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* ===========================
   Element: password-wrapper
   =========================== */

.auth-form__password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* ===========================
   Error message positioning fix
   Ensure errors display below fields
   =========================== */

.auth-form .form__group {
  position: relative;
}

.auth-form .form__error {
  display: block;
  position: relative;
  width: 100%;
  margin-top: var(--spacing-xs);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Ensure error is visible and not overlapped */
.auth-form .form__error:not(:empty) {
  min-height: 1.25em;
  padding-top: 2px;
}

/* Hint text styling for auth forms */
.auth-form .form__hint {
  display: block;
  position: relative;
  width: 100%;
}

/* When error is shown after hint, hide the hint */
.auth-form .form__hint:has(+ .form__error:not(:empty)) {
  display: none;
}

.auth-form__password-input {
  padding-right: calc(var(--spacing-md) + 40px);
}

/* ===========================
   Element: toggle-password
   =========================== */

.auth-form__toggle-password {
  position: absolute;
  right: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.auth-form__toggle-password:hover {
  color: var(--color-text);
  background-color: var(--color-bg-alt);
}

.auth-form__toggle-password:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Eye icons visibility */
.auth-form__eye-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.auth-form__eye-icon--hide {
  display: none;
}

.auth-form__toggle-password[aria-pressed="true"] .auth-form__eye-icon--show {
  display: none;
}

.auth-form__toggle-password[aria-pressed="true"] .auth-form__eye-icon--hide {
  display: block;
}

/* ===========================
   Media Queries
   =========================== */

/* Small devices (480px and up) */
@media (min-width: 480px) {
  .auth-form__toggle-password {
    width: 40px;
    height: 40px;
  }

  .auth-form__password-input {
    padding-right: calc(var(--spacing-md) + 44px);
  }
}