/* phone-ru.css
   Стили для объединённого phone.js
   Поддерживает:
   - активное состояние контейнера
   - техническую валидность (.valid)
   - строгую валидность (.strict-valid)
*/

.phone-ru {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;

  padding: 6px;

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

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

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

.phone-ru .flag {
  width: 28px;
  height: 18px;
  display: block;
  border-radius: 3px;
  user-select: none;
}

.phone-ru .prefix {
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  user-select: none;
  white-space: nowrap;
}

.phone-ru .digits {
  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.3px;
  color: inherit;
}

.phone-ru .digits::placeholder {
  color: #9aa3af;
}

/* Технически заполнено: 10 цифр набрано */
.phone-ru.valid {
  border-color: #0a7d2c;
  box-shadow: 0 0 0 4px rgba(10, 125, 44, 0.08);
}

.phone-ru .digits[data-valid="1"] {
  color: #0a7d2c;
}

/* Строго валиден по business-правилам */
.phone-ru.strict-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.12);
}

.phone-ru .digits[data-strict-valid="1"] {
  color: #0a7d2c;
}

/* Чтобы строгая валидность не теряла подсветку при фокусе */
.phone-ru.strict-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);
}


/* Ошибка после blur: номер неполный или не проходит РФ-проверку */
.phone-ru.phone-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);
}

.phone-ru.phone-invalid .digits,
.phone-ru.phone-invalid .prefix {
  color: #b91c1c;
}

.phone-ru.phone-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);
}