/* Ajusta o intl-tel-input ao tema escuro e devolve o posicionamento que o
   CSS do Elementor sobrescreve (ele zera position/display dos filhos do
   field-group, e sem isto a bandeira e o DDI sobem para cima do campo). */

.iti {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2;
}

.iti__selected-flag {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: auto !important;
  padding: 0 8px 0 14px !important;
  background-color: transparent !important;
}

.iti input,
.iti input[type="tel"] {
  width: 100% !important;
  position: relative !important;
}

/* espaco para a bandeira + DDI dentro do campo */
.iti--separate-dial-code input {
  padding-left: 96px !important;
}

.iti__selected-dial-code {
  color: #cfcac4 !important;
  font-size: 15px !important;
  margin-left: 6px !important;
}

.iti__arrow {
  border-top-color: #cfcac4 !important;
  margin-left: 6px !important;
}

/* lista de paises */
.iti__country-list {
  background-color: #141210 !important;
  border: 1px solid #2a2622 !important;
  color: #f5f2ee !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5) !important;
  max-height: 240px !important;
  text-align: left !important;
}
.iti__country { padding: 9px 12px !important; }
.iti__country.iti__highlight { background-color: rgba(198, 160, 109, .16) !important; }
.iti__country-name { color: #f5f2ee !important; font-size: 15px !important; }
.iti__dial-code { color: #96918c !important; font-size: 14px !important; }
.iti__divider { border-bottom-color: #2a2622 !important; }

@media (max-width: 480px) {
  .iti--separate-dial-code input { padding-left: 88px !important; }
  .iti__selected-flag { padding: 0 6px 0 10px !important; }
}