/** * GF Country Phone Field — front-end styles. * * .gfcp-field-wrap — thin wrapper used by both modes. * .gfcp-field-wrap--dropdown — combined flex field (toggle button + input). * .gfcp-field-wrap--detect — positioned ancestor for the absolute flag. * .gfcp-panel — fixed-position floating overlay (). */ /* ── Field wrappers ──────────────────────────────────────────────────────── */ /* Base — used by both modes */ .gfcp-field-wrap { display: block; width: 100%; box-sizing: border-box; } /* Dropdown mode: combined chrome with border + flex row */ .gfcp-field-wrap--dropdown { display: flex !important; flex-direction: row !important; align-items: stretch; border: 1px solid #b3b3b3; border-radius: 4px; background: #fff; } /* Auto-detect mode: positioned ancestor for the absolute flag */ .gfcp-field-wrap--detect { position: relative; } /* Toggle button — left segment of the combined field */ .gfcp-toggle { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 0 10px; background: #f5f5f5; border: none; border-right: 1px solid #b3b3b3; border-radius: 3px 0 0 3px; /* clip left corners without wrapper overflow:hidden */ cursor: pointer; font-size: 14px; line-height: 1.2; color: #1a1a1a; white-space: nowrap; height: 100%; min-height: 38px; } .gfcp-toggle:hover { background: #ebebeb; } .gfcp-toggle:focus { outline: 2px solid #2271b1; outline-offset: -2px; position: relative; z-index: 1; } /* Phone input — dropdown mode: loses its own border/radius so the wrapper provides the single combined outer border. */ .gfcp-field-wrap--dropdown input.gfcp-phone-input { flex: 1 1 auto; min-width: 0; border: none !important; border-radius: 0 3px 3px 0 !important; padding: 8px 10px; font-size: inherit; background: transparent; } /* Phone input — auto-detect mode: keep the theme's native border/radius; just add a smooth padding-left transition for the flag-inset effect. */ .gfcp-field-wrap--detect input.gfcp-phone-input { display: block; width: 100%; box-sizing: border-box; transition: padding-left 0.15s ease; } /* When a flag is visible, inset the text so it clears the flag. */ .gfcp-field-wrap--detect input.gfcp-phone-input.gfcp-has-flag { padding-left: 38px !important; } /* ── Flag images ─────────────────────────────────────────────────────────── */ .gfcp-flag-wrap, .gfcp-item-flag-wrap { display: inline-flex; align-items: center; flex-shrink: 0; width: 20px; height: 15px; overflow: hidden; } .gfcp-flag-img { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } /* ── Toggle button internals ─────────────────────────────────────────────── */ .gfcp-code { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; } .gfcp-caret { width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6d6d6d; } /* ── Floating panel (fixed overlay, appended to ) ──────────────────── */ .gfcp-panel { position: fixed; z-index: 1000000; /* above GF, overlays, nav bars */ background: #fff; border: 1px solid #b3b3b3; border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); overflow: hidden; /* width set inline by JS to match button width / max 300px */ } .gfcp-search-wrap { padding: 8px; border-bottom: 1px solid #ececec; background: #fafafa; } .gfcp-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #b3b3b3; border-radius: 4px; font-size: 14px; } .gfcp-search:focus { outline: 2px solid #2271b1; outline-offset: 0; border-color: #2271b1; } /* ── Country list ────────────────────────────────────────────────────────── */ .gfcp-list { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; } .gfcp-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; color: #1a1a1a; } .gfcp-item:hover { background: #f0f6fc; } .gfcp-item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gfcp-item-code { flex: 0 0 auto; color: #6d6d6d; font-variant-numeric: tabular-nums; font-size: 13px; } .gfcp-empty { padding: 12px; text-align: center; color: #6d6d6d; font-size: 14px; } /* ── Auto-detect mode ────────────────────────────────────────────────────── */ /* Flag cell — absolutely positioned over the left edge of the phone input. Hidden (opacity 0) until a dialling-code prefix is recognised; fades in while the input padding-left transitions to clear it. */ .gfcp-detect-flag-cell { position: absolute; top: 50%; transform: translateY(-50%); left: 9px; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; /* never intercepts clicks/taps */ opacity: 0; transition: opacity 0.15s ease; } /* Visible state — added by JS when a country code prefix is matched */ .gfcp-detect-flag-cell--visible { opacity: 1; }