/* * Correções de estilo para o intl-tel-input dentro do formulário público. * Temas costumam aplicar regras genéricas a input/ul/li que vencem o CSS da * lib e quebram o dropdown (busca colada, itens enormes). Aqui reforçamos os * pontos essenciais com especificidade alta, escopados sob .iti, sem vazar * para o resto do site. */ /* Fallback das custom properties que a lib espera. Definidas em :root (não só em .iti) porque o dropdown/busca pode ser anexado ao (modo popup), fora do .iti — e nesse caso o calc do padding da lupa cairia a zero, colando o ícone no texto. Valores idênticos aos defaults da biblioteca. */ :root { --iti-border-color: #ccc; --iti-border-width: 1px; --iti-spacer-horizontal: 10px; --iti-flag-width: 20px; --iti-flag-height: 15px; --iti-globe-icon-size: 17px; --iti-clear-icon-size: 15px; --iti-icon-color: #555; --iti-hover-color: rgba(0, 0, 0, .05); } /* Lista de países: remove herança de tema (marcadores, margens, fontes). */ .iti .iti__dropdown-content, .iti__country-list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.3; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } /* Cada país: altura e espaçamento compactos, sem herdar padding gigante. */ .iti__country-list .iti__country, .iti .iti__country { list-style: none; margin: 0; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; cursor: pointer; } .iti__country-list .iti__country-name, .iti .iti__country-name { font-size: 14px; line-height: 1.3; } .iti__country-list .iti__dial-code, .iti .iti__dial-code { color: #888; font-size: 14px; } /* Campo de busca. Estrutura real (v29): .iti__search-input-wrapper > span.iti__search-icon > svg.iti__search-icon-svg seguido do input.iti__search-input (type="search"). O dropdown é anexado ao (modo detached), então NÃO dá para escopar sob .iti. Temas/wp-admin costumam aplicar `input[type=search]{padding:...}` — regra que vence a especificidade simples de .iti__search-input e cola o texto na lupa. Por isso os paddings e a posição do ícone usam !important: é a única forma confiável de garantir o espaçamento da lupa em qualquer tema. */ .iti__search-input-wrapper { position: relative; display: flex; align-items: center; } .iti__search-input { box-sizing: border-box; width: 100%; margin: 0; font-size: 14px; line-height: 1.3; border: 0; border-radius: 6px 6px 0 0; padding-left: 34px !important; padding-right: 32px !important; } .iti__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; z-index: 2; } .iti__search-icon .iti__search-icon-svg, .iti__search-icon svg { width: 14px; height: 14px; display: block; } /* Bandeira nas linhas e no seletor: tamanho previsível. */ .iti .iti__flag { flex: 0 0 auto; } /* O input do telefone em si: garante espaço para a bandeira+DDI à esquerda quando o tema zera o padding. separateDialCode usa --iti--... internamente, então só reforçamos altura/box. */ .iti > input.lm-tel-intl, .iti input.lm-tel-intl { box-sizing: border-box; }