/* ======================================================== intl_phone.css — Tematizacao da widget intl-tel-input v1 — 2026-05-27 — alinhar widget com glassmorphism cyan Prefixo: .iti, .ctip (CoreTalent intl phone) ======================================================== */ /* Servir o sprite de bandeiras LOCALMENTE em vez do CDN. Razao: cdn.jsdelivr.net responde com CORS bloqueado para o flags.png (apenas para o ficheiro de imagem, o CSS/JS funcionam normalmente). Servir do proprio dominio garante carregamento em XAMPP e Hostinger. IMPORTANTE: este selector deve ficar ACIMA das regras de tema abaixo porque o intl-tel-input core CSS ja injecta backgroundImage; aqui apenas o redirecionamos. Path absoluto a partir do site root. */ .iti__flag { background-image: url("../img/intl-tel-input/flags.png") !important; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-image: url("../img/intl-tel-input/flags@2x.png") !important; } } /* Container herda a largura do form-control-elite */ .iti { width: 100%; display: block; } /* Input em si: respeita o estilo elite do CoreTalent */ .iti__tel-input, .iti input[type="tel"], .iti input[type="text"] { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 209, 224, 0.18); border-radius: 8px; color: #fff; padding: 12px 14px 12px 56px; font-size: 14px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-sizing: border-box; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .iti__tel-input:hover { border-color: rgba(0, 209, 224, 0.35); background: rgba(255, 255, 255, 0.06); } .iti__tel-input:focus { outline: none; border-color: #00d1e0; box-shadow: 0 0 0 3px rgba(0, 209, 224, 0.18); background: rgba(255, 255, 255, 0.07); } .iti__tel-input::placeholder { color: rgba(255, 255, 255, 0.45); opacity: 1; } /* Botao da bandeira (lado esquerdo) */ .iti__flag-container { border-radius: 8px 0 0 8px; } .iti__selected-flag { background: rgba(0, 209, 224, 0.08); border-radius: 8px 0 0 8px; padding: 0 10px; transition: background 0.2s ease; } .iti__selected-flag:hover, .iti__selected-flag:focus, .iti.iti--show-flags .iti__selected-flag[aria-expanded="true"] { background: rgba(0, 209, 224, 0.18); outline: none; } .iti__arrow { border-top-color: rgba(255, 255, 255, 0.55); } .iti__arrow--up { border-bottom-color: #00d1e0; } /* Scrollbar custom do dropdown/lista de paises — fina cyan, sem setas. v6.11 (2026-05-27): sem esta override, .iti__dropdown-content tem overflow:scroll no core CSS, e renderiza uma scrollbar nativa com setas Windows. */ .iti__dropdown-content, .iti__country-list { scrollbar-width: thin; scrollbar-color: rgba(0, 209, 224, 0.45) transparent; } .iti__dropdown-content::-webkit-scrollbar, .iti__country-list::-webkit-scrollbar { width: 6px; } .iti__dropdown-content::-webkit-scrollbar-track, .iti__country-list::-webkit-scrollbar-track { background: transparent; } .iti__dropdown-content::-webkit-scrollbar-thumb, .iti__country-list::-webkit-scrollbar-thumb { background: rgba(0, 209, 224, 0.18); border-radius: 10px; } .iti__dropdown-content::-webkit-scrollbar-thumb:hover, .iti__country-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 209, 224, 0.45); } .iti__dropdown-content::-webkit-scrollbar-button, .iti__country-list::-webkit-scrollbar-button { display: none; } /* Dropdown wrapper (intl-tel-input v18) — quando portalado para via dropdownContainer, este e o elemento absolute-positioned que envolve o ul. Sem este override fica com fundo branco do core CSS, criando uma bordas esbranquicadas em torno do ul tematizado. */ .iti__dropdown-content { background: transparent !important; border-radius: 10px; z-index: 10000; } /* Container body-level (criado quando dropdownContainer: document.body) */ .iti--container { z-index: 10000; } /* Dropdown de paises */ .iti__country-list { background: rgba(0, 26, 31, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0, 209, 224, 0.22); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); color: #fff; max-height: 260px; overflow-y: auto; padding: 6px 0; margin-top: 4px; z-index: 9999; } .iti__country { padding: 8px 12px; color: rgba(255, 255, 255, 0.85); transition: background 0.15s ease, color 0.15s ease; } .iti__country:hover { background: rgba(0, 209, 224, 0.12); color: #fff; } .iti__country.iti__highlight { background: rgba(0, 209, 224, 0.18); } .iti__country-name { color: inherit; } .iti__dial-code { color: rgba(0, 209, 224, 0.85); } .iti__divider { border-bottom-color: rgba(255, 255, 255, 0.08); } /* Search box (intl-tel-input com country search habilitado) */ .iti__search-input { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 209, 224, 0.22); border-radius: 6px; color: #fff; padding: 8px 10px; margin: 6px 8px 8px; width: calc(100% - 16px); box-sizing: border-box; font-size: 13px; } .iti__search-input::placeholder { color: rgba(255, 255, 255, 0.45); } .iti__search-input:focus { outline: none; border-color: #00d1e0; } /* Mensagem de erro / valido (badge custom CoreTalent) */ .ctip-error { display: block; color: #ff8a8a; font-size: 12px; margin-top: 6px; min-height: 1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .ctip-valid { display: block; color: #00ff88; font-size: 12px; margin-top: 6px; min-height: 1em; } /* Mobile breakpoints */ @media (max-width: 480px) { .iti__country-list { max-height: 220px; font-size: 13px; } .iti__tel-input, .iti input[type="tel"], .iti input[type="text"] { padding-left: 52px; font-size: 14px; } }