/* ============================================================= WPP Phone Mask — Country Selector Elementor Pro | wa-form-contact-lead ============================================================= */ /* ── Wrapper do campo telefone ─────────────────────────────── */ .wpp-phone-wrapper { display: flex !important; align-items: stretch !important; width: 100% !important; position: relative !important; gap: 0 !important; background: transparent !important; } /* ── Botão seletor de país ─────────────────────────────────── */ .wpp-country-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 0 10px !important; border: 1px solid #ccc !important; border-right: none !important; border-radius: 4px 0 0 4px !important; background: #f8f8f8 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: 14px !important; color: #333 !important; height: auto !important; min-height: 42px !important; transition: background 0.15s ease, border-color 0.15s ease !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } .wpp-country-btn:hover { background: #e0e0e0 !important; border-color: #999 !important; color: #111 !important; } .wpp-country-btn:hover .wpp-dial { color: #111 !important; } .wpp-country-btn:hover .wpp-arrow { color: #555 !important; } .wpp-country-btn:focus-visible { outline: 2px solid #0073aa !important; outline-offset: -2px !important; } .wpp-country-btn.wpp-open { background: #e8e8e8 !important; border-color: #aaa !important; } /* Flag e texto do botão */ .wpp-flag { font-size: 18px !important; line-height: 1 !important; display: inline-block !important; } .wpp-dial { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } .wpp-arrow { display: inline-flex !important; align-items: center !important; color: #888 !important; transition: transform 0.2s ease !important; } .wpp-country-btn.wpp-open .wpp-arrow { transform: rotate(180deg) !important; } /* ── Input de telefone (ajuste para encaixar no botão) ──────── */ .wpp-phone-wrapper input[type="text"], .wpp-phone-wrapper input[type="tel"], .wpp-phone-wrapper .elementor-field { border-radius: 0 4px 4px 0 !important; border-left: none !important; flex: 1 !important; min-width: 0 !important; width: 100% !important; } .wpp-phone-wrapper input:focus { border-color: #aaa !important; outline: none !important; box-shadow: none !important; } /* ============================================================= DROPDOWN — renderizado no com position:fixed ============================================================= */ .wpp-dropdown { background: #ffffff !important; border: 1px solid #ddd !important; border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; /* z-index definido via JS (2147483647) para garantir sobreposição ao popup */ animation: wpp-dropdown-in 0.15s ease !important; -webkit-overflow-scrolling: touch !important; } @keyframes wpp-dropdown-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Busca ─────────────────────────────────────────────────── */ .wpp-search-wrap { padding: 10px 10px 6px !important; background: #fafafa !important; border-bottom: 1px solid #eee !important; flex-shrink: 0 !important; } .wpp-search { width: 100% !important; box-sizing: border-box !important; border: 1px solid #ddd !important; border-radius: 6px !important; padding: 7px 10px !important; font-size: 13px !important; outline: none !important; background: #fff !important; color: #333 !important; transition: border-color 0.15s !important; -webkit-appearance: none !important; appearance: none !important; } .wpp-search:focus { border-color: #0073aa !important; box-shadow: 0 0 0 2px rgba(0,115,170,0.15) !important; } /* ── Lista de países ───────────────────────────────────────── */ .wpp-country-list { list-style: none !important; margin: 0 !important; padding: 4px 0 !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1 !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* Scrollbar estilizada (webkit) */ .wpp-country-list::-webkit-scrollbar { width: 10px !important; } .wpp-country-list::-webkit-scrollbar-track { background: #f0f0f0 !important; border-radius: 0 0 8px 0 !important; } .wpp-country-list::-webkit-scrollbar-thumb { background: #bbb !important; border-radius: 99px !important; border: 2px solid #f0f0f0 !important; /* cria efeito de padding visual */ } .wpp-country-list::-webkit-scrollbar-thumb:hover { background: #888 !important; } /* Firefox */ .wpp-country-list { scrollbar-width: thin !important; scrollbar-color: #bbb #f0f0f0 !important; } /* ── Item de país ──────────────────────────────────────────── */ .wpp-country-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; cursor: pointer !important; font-size: 13.5px !important; color: #333 !important; transition: background 0.1s ease !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } .wpp-country-item:hover { background: #f0f7ff !important; } .wpp-country-item:active { background: #e0efff !important; } .wpp-country-item.wpp-active { background: #e8f4fd !important; font-weight: 600 !important; } .wpp-country-item.wpp-active::after { content: '✓' !important; margin-left: auto !important; color: #0073aa !important; font-size: 13px !important; flex-shrink: 0 !important; } .wpp-item-flag { font-size: 20px !important; line-height: 1 !important; flex-shrink: 0 !important; display: inline-block !important; width: 26px !important; text-align: center !important; } .wpp-item-name { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .wpp-item-dial { color: #888 !important; font-size: 12px !important; font-weight: 600 !important; flex-shrink: 0 !important; letter-spacing: 0.03em !important; } /* Estado vazio */ .wpp-country-empty { padding: 16px 12px !important; text-align: center !important; color: #999 !important; font-size: 13px !important; font-style: italic !important; list-style: none !important; } /* ============================================================= RESPONSIVIDADE MOBILE ============================================================= */ @media (max-width: 600px) { .wpp-country-btn { padding: 0 8px !important; min-height: 44px !important; /* touch target mínimo iOS */ } .wpp-flag { font-size: 16px !important; } .wpp-dial { font-size: 12px !important; } /* Em telas muito pequenas, oculta a seta para ganhar espaço */ .wpp-arrow { display: none !important; } .wpp-country-item { padding: 12px 10px !important; /* área de toque maior em mobile */ font-size: 14px !important; } .wpp-item-flag { font-size: 18px !important; width: 24px !important; } .wpp-search { font-size: 16px !important; /* evita zoom automático no iOS */ padding: 10px !important; } } /* ============================================================= COMPATIBILIDADE COM TEMAS / ELEMENTOR Garante que estilos do tema não quebrem o seletor ============================================================= */ /* Reseta botão que possa ter sido estilizado pelo tema */ .wpp-country-btn, .wpp-country-btn:focus, .wpp-country-btn:active, .wpp-country-btn:hover { margin: 0 !important; line-height: normal !important; font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; vertical-align: middle !important; } /* Garante que o dropdown não seja afetado por overflow do popup */ body > .wpp-dropdown { /* Aplicado via JS com position:fixed e z-index máximo */ } /* Dark mode — caso o tema use prefers-color-scheme */ @media (prefers-color-scheme: dark) { .wpp-dropdown { background: #1e1e1e !important; border-color: #444 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } .wpp-search-wrap { background: #252525 !important; border-color: #444 !important; } .wpp-search { background: #2d2d2d !important; border-color: #555 !important; color: #e0e0e0 !important; } .wpp-country-item { color: #e0e0e0 !important; } .wpp-country-item:hover { background: #2a3a4a !important; } .wpp-country-item.wpp-active { background: #1a3048 !important; } .wpp-item-dial { color: #aaa !important; } .wpp-country-btn { background: #2d2d2d !important; border-color: #555 !important; color: #e0e0e0 !important; } .wpp-country-btn:hover { background: #3a3a3a !important; border-color: #777 !important; color: #fff !important; } .wpp-country-list::-webkit-scrollbar-track { background: #2a2a2a !important; } .wpp-country-list::-webkit-scrollbar-thumb { background: #555 !important; border: 2px solid #2a2a2a !important; } .wpp-country-list::-webkit-scrollbar-thumb:hover { background: #777 !important; } .wpp-country-list { scrollbar-color: #555 #2a2a2a !important; } }