/* =========================
   INTL TEL INPUT - GLOBAL
========================= */
:root {
  --iti-path-flags-1x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.15.0/build/img/flags.webp');
  --iti-path-flags-2x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.15.0/build/img/flags@2x.webp');
  --iti-path-globe-1x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.15.0/build/img/globe.webp');
  --iti-path-globe-2x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.15.0/build/img/globe@2x.webp');
}

/* Base */
.iti {
  width: 100%;
  display: block;
}

.iti--allow-dropdown,
.iti--separate-dial-code {
  width: 100%;
}

/* Inputs ocupando 100% */
.iti input,
.iti .iti__tel-input,
label.input .iti input {
  width: 100% !important;
  box-sizing: border-box;
}

/* Campos padronizados */
[data-field="cpf"],
[data-field="cnpj"],
[data-field="cpf-cnpj"],
[data-field="phone-br"] {
  letter-spacing: .2px;
}

/* =========================
   LAYOUT PADRÃO (STEP01 + MODAL)
========================= */

/* Espaço para bandeira + DDI */
.iti--separate-dial-code .iti__tel-input,
.iti--show-flags .iti__tel-input {
  padding-left: 110px !important;
}

/* Container da bandeira */
.iti__country-container {
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
  bottom: 0;
}

/* Área da bandeira + DDI */
.iti__selected-country {
  height: 100%;
  padding-left: 12px;
  padding-right: 10px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(0,0,0,0.08);
  border-radius: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Ajuste para tema escuro (modais/material) */
.modal .iti__selected-country {
  border-right: 1px solid rgba(255,255,255,0.08);
}

.iti__selected-dial-code,
.iti__arrow {
  color: inherit;
}

.iti__flag-container,
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
}

/* =========================
   DROPDOWN / SEARCH
========================= */

.iti__country-container,
.iti__dropdown-content,
.iti__country-list {
  z-index: 9999 !important;
}

.iti__country-list {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #333;
}

/* Campo de busca */
.iti__search-input {
  width: 100% !important;
  box-sizing: border-box;
  padding: 10px 12px !important;
  text-indent: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.iti__search-input::placeholder {
  color: #777;
}

/* Remove ícone bugado */
.iti__search-input + .iti__search-icon,
.iti__search-icon,
.iti__search-input::before,
.iti__search-input::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* =========================
   MODAIS (ajustes extras)
========================= */

.modal .iti .form-control,
.modal .iti__tel-input {
  min-height: calc(1.5em + 1rem + 2px);
  background: inherit;
  color: inherit;
  border-radius: inherit;
}

#modalCadCliente {
  z-index: 1070;
}

#modalCadCliente + .modal-backdrop,
.modal-backdrop.show:nth-of-type(2) {
  z-index: 1065;
}
/* =========================
   VALIDAÇÃO VISUAL
========================= */
[data-field].is-invalid,
[data-validate].is-invalid,
.iti input.is-invalid,
.iti .iti__tel-input.is-invalid {
  border-color: #c54d4d !important;
  box-shadow: 0 0 0 4px rgba(197, 77, 77, 0.12) !important;
}

[data-field].is-invalid:focus,
[data-validate].is-invalid:focus,
.iti input.is-invalid:focus,
.iti .iti__tel-input.is-invalid:focus {
  border-color: #c54d4d !important;
  box-shadow: 0 0 0 4px rgba(197, 77, 77, 0.16) !important;
}

.iti:has(input.is-invalid),
.iti:has(.iti__tel-input.is-invalid) {
  border-radius: inherit;
}

.iti:has(input.is-invalid) .iti__selected-country,
.iti:has(.iti__tel-input.is-invalid) .iti__selected-country {
  border-right-color: rgba(197, 77, 77, 0.28) !important;
}

/* ===== FIX VALIDAÇÃO EM MODAIS / INPUTS PADRÃO ===== */
.bd-form input.is-invalid,
.bd-form textarea.is-invalid,
.bd-form select.is-invalid {
  border-color: #c54d4d !important;
  box-shadow: 0 0 0 4px rgba(197, 77, 77, 0.12) !important;
}

.bd-form input.is-invalid:focus,
.bd-form textarea.is-invalid:focus,
.bd-form select.is-invalid:focus {
  border-color: #c54d4d !important;
  box-shadow: 0 0 0 4px rgba(197, 77, 77, 0.16) !important;
}

/* Garante que o campo CPF também responda corretamente */
input[data-field="cpf"].is-invalid,
input[data-field="cnpj"].is-invalid,
input[data-field="cpf-cnpj"].is-invalid {
  border-color: #c54d4d !important;
}