/* name.css
   Стили для объединённого name.js
   Визуально согласованы с phone-ru.css и email.css
   Поддерживает:
   - активное состояние контейнера
   - валидное ФИО (.name-valid)
   - ошибку (.name-invalid)
*/

.name-ru,
[data-name-wrap] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;

  border: 1px solid var(--name-border, var(--border, #d0d4db));
  border-radius: 12px;
  background: var(--name-bg, var(--bg, #fff));

  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.name-ru:focus-within,
[data-name-wrap]:focus-within {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.name-ru input[type="text"],
.name-ru input[data-inline-name],
[data-name-wrap] input[type="text"],
[data-name-wrap] input[data-inline-name] {
  width: 100%;
  height: 46px;
  padding: 0 14px;

  border: none;
  outline: none;
  background: transparent;

  font: inherit;
  letter-spacing: 0.2px;
  color: inherit;
}

.name-ru input[type="text"]::placeholder,
.name-ru input[data-inline-name]::placeholder,
[data-name-wrap] input[type="text"]::placeholder,
[data-name-wrap] input[data-inline-name]::placeholder {
  color: #9aa3af;
}

/* Корректное ФИО */
.name-ru.name-valid,
[data-name-wrap].name-valid {
  border-color: #0a7d2c;
  box-shadow:
    0 0 0 4px rgba(10, 125, 44, 0.08),
    inset 0 0 0 1px rgba(10, 125, 44, 0.10);
}

.name-ru.name-valid input[type="text"],
.name-ru.name-valid input[data-inline-name],
[data-name-wrap].name-valid input[type="text"],
[data-name-wrap].name-valid input[data-inline-name] {
  color: #0a7d2c;
}

/* Ошибка после blur / submit */
.name-ru.name-invalid,
[data-name-wrap].name-invalid {
  border-color: #b91c1c;
  box-shadow:
    0 0 0 4px rgba(185, 28, 28, 0.08),
    inset 0 0 0 1px rgba(185, 28, 28, 0.10);
}

.name-ru.name-invalid input[type="text"],
.name-ru.name-invalid input[data-inline-name],
[data-name-wrap].name-invalid input[type="text"],
[data-name-wrap].name-invalid input[data-inline-name] {
  color: #b91c1c;
}

/* Чтобы состояния не теряли акцент при фокусе */
.name-ru.name-valid:focus-within,
[data-name-wrap].name-valid:focus-within {
  border-color: #0a7d2c;
  box-shadow:
    0 0 0 4px rgba(10, 125, 44, 0.12),
    0 0 0 1px rgba(10, 125, 44, 0.08);
}

.name-ru.name-invalid:focus-within,
[data-name-wrap].name-invalid:focus-within {
  border-color: #b91c1c;
  box-shadow:
    0 0 0 4px rgba(185, 28, 28, 0.12),
    0 0 0 1px rgba(185, 28, 28, 0.08);
}