/* =========================
   Variáveis de layout
========================= */
:root {
  --ewpf-flag-w: 20px;
  --ewpf-flag-h: 15px;
  --ewpf-flag-left: 12px;
  --iti-arrow-padding: 12px;
  --iti-triangle-border: 4px;
  --iti-arrow-height: 6px;
  --iti-arrow-color: #6b7280;
  --ewpf-arrow-w: 18px;
  --ewpf-arrow-h: 6px;
}

/* =========================
   PRÉ-INICIALIZAÇÃO (antes do JS)
   Mostra bandeira BR + seta via background-image (2 layers)
========================= */
input[data-whatsapp-field].ewpf-preload {
  /* seta SVG inline (triângulo apontando para baixo) */
  --ewpf-arrow-svg: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'>\
    <path d='M0,0 L8,0 L4,6 Z' fill='%236b7280'/>\
  </svg>");

  background-image:
    var(--ewpf-arrow-svg),
    /* seta */
    url('../images/br.svg');
  /* bandeira BR (assets/images/br.svg) */

  background-repeat: no-repeat, no-repeat;

  /* posição: bandeira à esquerda; seta logo depois da bandeira */
  background-position:
    calc(var(--ewpf-flag-left) + var(--ewpf-flag-w) + var(--iti-arrow-padding)) center,
    var(--ewpf-flag-left) center;

  background-size:
    var(--ewpf-arrow-w) var(--ewpf-arrow-h),
    var(--ewpf-flag-w) var(--ewpf-flag-h);

  /* espaço para bandeira + seta + respiro */
  padding-left: calc(var(--ewpf-flag-left) + var(--ewpf-flag-w) + var(--iti-arrow-padding) + var(--ewpf-arrow-w) + 10px);

  box-sizing: border-box;
}

/* Quando o intl-tel-input montar, limpamos o preload */
.iti input[data-whatsapp-field] {
  background-image: none !important;
  padding-left: 1em;
  /* o componente controla o padding real */
}

/* =========================
   ESTILOS INTL-TEL-INPUT
========================= */

/* largura integral */
.iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
  width: 100%;
}

/* container da bandeira/arrow como linha (flag + arrow) */
.iti .iti__selected-country {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1em !important;
}

/* flag real com pequeno espaçamento para a seta */
.iti .iti__selected-country .iti__flag {
  display: inline-block;
  margin-right: 8px;
}

/* seta real (triângulo) à direita da flag */
.iti .iti__selected-country .iti__arrow {
  display: inline-block;
  margin-left: var(--iti-arrow-padding);
  width: 0;
  height: 0;
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid transparent;
  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}

/* hover/focus sem estourar o fundo */
.iti__selected-country:hover,
.iti__selected-country:focus,
.iti__selected-country:focus-visible,
.iti__selected-country:active {
  background: #F2F2F2 !important;
}

.iti__selected-country-primary {
  padding: 0;
}

.iti__selected-country-primary:hover,
.iti__selected-country-primary:active,
.iti__selected-country-primary:focus,
.iti__selected-country:focus-visible {
  background: none !important;
}

/* dropdown: rolar só o conteúdo; z-index alto p/ popups */
.iti--inline-dropdown .iti__dropdown-content {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 100000 !important;
}

/* garantir sobreposição correta */
.iti__flag-container {
  z-index: 5 !important;
}

.iti__country-list {
  z-index: 100000 !important;
}

/* limpeza dos botões da busca */
button.iti__selected-country {
  background: transparent;
  border: none !important;
  margin: 0 !important;
  -webkit-appearance: none;
}

button.iti__search-clear,
button.iti__search-clear.iti__hide,
button.iti__search-clear.iti__hide:hover,
button.iti__search-clear.iti__hide:focus {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* hover na área do dropdown não “grudar” no primary */
.iti__dropdown-content:hover .iti__selected-country-primary {
  background: none !important;
}

/* UX do campo de busca no dropdown */
.iti__search-input {
  padding: 10px 30px;
}

/* placeholder mais suave */
input[data-whatsapp-field]::placeholder {
  opacity: .5;
}

/* responsivo */
@media (max-width: 767px) {
  .iti.iti--allow-dropdown.iti--show-flags {
    width: 100%;
  }

  .iti--fullscreen-popup .iti__dropdown-content {
    z-index: 9999999999999999999 !important;
  }
}