/* * MG7 country-code panel styles — ported from the legacy marketing site so the * rebuilt (/v2) "+DDI" dropdown is visually identical to the live site. The * native intl-tel-input list is hidden on every field marked `.mg7-iti-managed`; * our panel is appended to and position:fixed, so it opens strictly below * the field, never clipped by an overflow ancestor and never covering the * trigger. Colors are the resolved token literals (no CSS-var dependency). */ .iti.mg7-iti-managed .iti__country-list { display: none !important; } .mg7-cc-panel { position: fixed; z-index: 100000001; /* above the WhatsApp float + any modal */ display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 18px 44px -16px rgba(11, 20, 43, 0.28); overflow: hidden; font-family: "League Spartan", sans-serif; } .mg7-cc-panel[hidden] { display: none; } .mg7-cc-search { flex: 0 0 auto; padding: 10px 12px; background: #fff; border-bottom: 1px solid #e2e8f0; } .mg7-cc-search input { width: 100% !important; box-sizing: border-box !important; height: 44px !important; margin: 0 !important; padding: 0 12px 0 40px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; font-family: "League Spartan", sans-serif; font-size: 16px !important; /* >=16px so iOS doesn't zoom on focus */ line-height: 42px !important; color: #1c2733 !important; outline: none !important; background-color: #fff !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjdhOTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PHBhdGggZD0ibTIxIDIxLTQuMy00LjMiLz48L3N2Zz4=") !important; background-repeat: no-repeat !important; background-position: 14px center !important; } .mg7-cc-search input::placeholder { color: #6b7a90; } .mg7-cc-search input:focus { border-color: #2fa0ff !important; box-shadow: 0 0 0 3px rgba(47, 160, 255, 0.15); } .mg7-cc-list { flex: 1 1 auto; margin: 0; padding: 6px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mg7-cc-list::-webkit-scrollbar { width: 8px; } .mg7-cc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .mg7-cc-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #1c2733; cursor: pointer; } .mg7-cc-option[hidden] { display: none; } .mg7-cc-option:hover, .mg7-cc-option.is-highlight { background: rgba(47, 160, 255, 0.1); } .mg7-cc-option.is-active { font-weight: 600; color: #1f86e0; } .mg7-cc-option .iti__flag { flex: 0 0 auto; } .mg7-cc-name { font-size: 0.98rem; } .mg7-cc-dial { color: #6b7a90; margin-left: auto; font-variant-numeric: tabular-nums; } .mg7-cc-empty { padding: 16px 14px; text-align: center; color: #6b7a90; font-size: 0.95rem; } .mg7-cc-empty[hidden] { display: none; }