/* Ajustes do intl-tel-input ao design deste site — carregado só em
   /es e /en, junto com js/intl-phone.js.

   A lib envolve o <input> num <div class="iti"> que por padrão é
   inline-block. Nos nossos formulários o input é filho de um container
   flex em coluna (.form-group) ou de .wa-form__group, e precisa ocupar
   a largura toda; sem isto o campo encolhe e desalinha dos demais. */

.iti {
  display: block;
  width: 100%;
}

/* O input dentro do wrapper mantém o estilo do formulário da página
   (borda, padding, raio), que vem do CSS embutido de cada página. Só
   garantimos que ele não vaze da caixa. */
.iti > input,
.iti > input[type="tel"] {
  width: 100%;
}

/* Seletor de país: alinhado à borda do campo, sem fundo próprio, para
   parecer parte do input e não um bloco colado nele. */
.iti__country-container {
  padding: 1px;
}

.iti--separate-dial-code .iti__selected-country {
  background: transparent;
  border-radius: 8px 0 0 8px;
}

.iti--separate-dial-code .iti__selected-country:hover,
.iti--separate-dial-code .iti__selected-country:focus {
  background: var(--color-bg-light, #F5F7F9);
}

/* A lista de países precisa ficar acima do formulário e do widget de
   WhatsApp (FAB em 990, modal do widget acima disso). */
.iti__dropdown-content {
  z-index: 9600;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Campo de busca do dropdown com a mesma linguagem visual dos inputs. */
.iti__search-input {
  border-radius: 8px 8px 0 0;
  font-family: inherit;
}

/* Dentro do modal do widget de WhatsApp o input é menor: reduz o
   respiro do seletor para o campo não ficar apertado. */
.wa-form__group .iti--separate-dial-code .iti__selected-country {
  border-radius: 6px 0 0 6px;
}

/* iOS dá zoom em input com menos de 16px; o dropdown de busca também. */
@media (max-width: 768px) {
  .iti__search-input {
    font-size: 16px;
  }
}