/* ==========================================================================
   Телефон: фиксированный код страны и ввод номера
   ========================================================================== */

.phone-field__label {
  color: #40586d;
  font-size: 0.76rem;
  font-weight: 760;
}

.phone-input {
  display: flex;
  align-items: stretch;

  min-width: 0;
  min-height: 52px;

  border: 1px solid #cbd8e4;
  border-radius: 12px;

  background: #ffffff;

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

.phone-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(15, 94, 170, 0.11);
}

/* Флаг и код страны */

.phone-input__prefix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;

  padding-inline: 12px;

  border-right: 1px solid #e1e9f0;
  border-radius: 11px 0 0 11px;

  background: #f5f9fc;
  color: var(--color-text);

  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;

  user-select: none;
}

.phone-input__flag {
  display: block;
  flex: 0 0 21px;

  width: 21px;
  height: 15px;

  border: 1px solid #d6dfe8;
  border-radius: 3px;
}

/* Редактируемая часть */

.phone-input > .phone-input__number {
  flex: 1 1 0%;

  min-width: 0;
  width: 100%;

  margin: 0;
  padding: 13px 12px;

  border: 0;
  border-radius: 0 11px 11px 0;

  background: transparent;
  color: var(--color-text);

  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;

  box-shadow: none;
}

.phone-input > .phone-input__number:focus {
  outline: none;
  box-shadow: none;
}

.phone-input__number::placeholder {
  color: #8293a3;
  opacity: 1;
}

/* Ошибка подсвечивает всё составное поле */

.phone-input:has(
  input:is(
    .is-invalid,
    .input-validation-error,
    [aria-invalid="true"]
  )
) {
  border-color: var(--color-danger);
  background: #fff9f9;
}

/*
 * Если ширины недостаточно, имя и телефон располагаются
 * друг под другом, а не сжимают номер.
 */
.lead-form .form-grid--short {
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .phone-input {
    transition: none;
  }
}