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

.email-ru,
[data-email-wrap] {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;

  padding: 6px;

  border: 1px solid var(--email-border, var(--border, #d0d4db));
  border-radius: 10px;
  background: var(--email-bg, var(--tile, #fff));

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

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

.email-ru input[type="email"],
.email-ru input[data-inline-email],
[data-email-wrap] input[type="email"],
[data-email-wrap] input[data-inline-email] {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;

  font: 600 16px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.2px;
  color: inherit;
}

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

/* Корректный email */
.email-ru.email-valid,
[data-email-wrap].email-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);
}

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

/* Предупреждение: подозрительное окончание домена */
.email-ru.email-tld-warn,
[data-email-wrap].email-tld-warn {
  border-color: #b45309;
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.08);
}

.email-ru.email-tld-warn input[type="email"],
.email-ru.email-tld-warn input[data-inline-email],
[data-email-wrap].email-tld-warn input[type="email"],
[data-email-wrap].email-tld-warn input[data-inline-email] {
  color: #b45309;
}

/* Ошибка после blur / submit */
.email-ru.email-invalid,
[data-email-wrap].email-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);
}

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

/* Чтобы валидное и warning/error состояния не теряли акцент при фокусе */
.email-ru.email-valid:focus-within,
[data-email-wrap].email-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);
}

.email-ru.email-tld-warn:focus-within,
[data-email-wrap].email-tld-warn:focus-within {
  border-color: #b45309;
  box-shadow:
    0 0 0 4px rgba(180, 83, 9, 0.12),
    0 0 0 1px rgba(180, 83, 9, 0.08);
}

.email-ru.email-invalid:focus-within,
[data-email-wrap].email-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);
}