/** * CWS Suite — Phone (country picker) form field. * * Port of the Claude Design "phone-picker.css", scoped under .cws-phone-picker * (the dropdown, rendered at , is scoped under .cws-phone-menu). Design * tokens are CSS custom properties so the white defaults can be overridden * per-form via Elementor Custom CSS. Button-ish parts (chip + menu rows) pin * padding and background with !important so Elementor's global button styles * (which set a longhand background-color, often orange) can't leak in. */ /* Force the Elementor-owned label above the field, whatever the form's label-position setting is. */ .elementor-field-group:has(.cws-phone-picker) { flex-wrap: wrap; } .elementor-field-group:has(.cws-phone-picker) > .elementor-field-label { width: 100%; flex: 0 0 100%; margin-bottom: 6px; } .cws-phone-picker { --cwsp-pill: #ffffff; /* pill fill */ --cwsp-pill-border: #ddd3bd; /* pill border */ --cwsp-pill-shadow: 0 1px 0 rgba(60, 40, 10, .04), 0 6px 18px -10px rgba(60, 40, 10, .18); --cwsp-ink: #1a1a1a; --cwsp-ink-soft: #56524a; --cwsp-ink-mute: #8a8578; --cwsp-focus-ring: rgba(26, 26, 26, .08); --cwsp-radius: 14px; --cwsp-pill-h: 56px; --cwsp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --cwsp-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; display: block; width: 100%; font-family: var(--cwsp-font); } .cws-phone-picker * { box-sizing: border-box; } /* The hidden E.164 carrier never shows. */ .cws-phone-picker .cws-phone-value { display: none !important; } /* ---------- Shell (the pill chrome) -------------------------------------- */ .cws-phone-shell { background: var(--cwsp-pill) !important; border: 1px solid var(--cwsp-pill-border); border-radius: var(--cwsp-radius); box-shadow: var(--cwsp-pill-shadow); min-height: var(--cwsp-pill-h); display: flex; align-items: stretch; transition: border-color .15s, box-shadow .15s, background .15s; } .cws-phone-shell:hover { border-color: #cdc6b3; } .cws-phone-picker.is-active .cws-phone-shell { border-color: var(--cwsp-ink); box-shadow: 0 0 0 3px var(--cwsp-focus-ring), var(--cwsp-pill-shadow); } /* ---------- Country chip (trigger) --------------------------------------- */ .cws-phone-chip { appearance: none; border: 0; background-color: transparent !important; background: transparent !important; padding: 0 10px 0 16px !important; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; color: var(--cwsp-ink); border-radius: var(--cwsp-radius); letter-spacing: -0.005em; white-space: nowrap; } .cws-phone-chip:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; } .cws-phone-chip-flag { font-family: var(--cwsp-emoji); font-size: 20px; line-height: 1; transform: translateY(-1px); } .cws-phone-chip-name { font-size: 16px; font-weight: 500; } .cws-phone-chip-dial { font-size: 16px; color: var(--cwsp-ink-mute); font-variant-numeric: tabular-nums; } .cws-phone-caret { color: var(--cwsp-ink-mute); margin-left: 4px; transition: transform .15s; flex: none; } .cws-phone-picker.is-open .cws-phone-caret { transform: rotate(180deg); color: var(--cwsp-ink); } /* Hide flag when toggled off. */ .cws-phone-picker[data-show-flag="no"] .cws-phone-chip-flag { display: none; } /* ---------- Divider ------------------------------------------------------- */ .cws-phone-sep { width: 1px; background: var(--cwsp-pill-border); margin: 12px 0; flex: none; } /* ---------- Number side --------------------------------------------------- */ .cws-phone-prefix { display: inline-flex; align-items: center; padding-left: 16px; font-size: 16px; color: var(--cwsp-ink-mute); font-variant-numeric: tabular-nums; } .cws-phone-prefix:empty { display: none; } /* Reset Elementor's textual-field chrome — the pill owns the frame. */ .cws-phone-picker .cws-phone-display { appearance: none; border: 0; background: transparent !important; box-shadow: none; font: inherit; font-size: 16px; flex: 1; min-width: 0; width: 100%; outline: none; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; padding: 0 16px; height: auto; line-height: var(--cwsp-pill-h); } .cws-phone-picker .cws-phone-display:focus { border: 0; box-shadow: none; } .cws-phone-picker .cws-phone-display::placeholder { color: var(--cwsp-ink-mute); opacity: .55; } .cws-phone-prefix + .cws-phone-display { padding-left: 8px; } /* ---------- Split layout (two pills) ------------------------------------- */ .cws-phone-picker[data-layout="split"] .cws-phone-shell { background: transparent; border: 0; box-shadow: none; gap: 12px; } .cws-phone-picker[data-layout="split"] .cws-phone-sep { display: none; } .cws-phone-picker[data-layout="split"] .cws-phone-chip { background: var(--cwsp-pill) !important; border: 1px solid var(--cwsp-pill-border); border-radius: var(--cwsp-radius); box-shadow: var(--cwsp-pill-shadow); min-height: var(--cwsp-pill-h); transition: border-color .15s, box-shadow .15s; } .cws-phone-picker[data-layout="split"].is-open .cws-phone-chip, .cws-phone-picker[data-layout="split"] .cws-phone-chip:hover { border-color: var(--cwsp-ink); } /* The number pill wraps prefix + display in split mode. */ .cws-phone-picker[data-layout="split"] .cws-phone-prefix, .cws-phone-picker[data-layout="split"] .cws-phone-display { background: var(--cwsp-pill) !important; } .cws-phone-picker[data-layout="split"] .cws-phone-prefix { border: 1px solid var(--cwsp-pill-border); border-right: 0; border-radius: var(--cwsp-radius) 0 0 var(--cwsp-radius); box-shadow: var(--cwsp-pill-shadow); padding-left: 18px; padding-right: 8px; min-height: var(--cwsp-pill-h); } .cws-phone-picker[data-layout="split"] .cws-phone-display { border: 1px solid var(--cwsp-pill-border); border-radius: var(--cwsp-radius); box-shadow: var(--cwsp-pill-shadow); transition: border-color .15s, box-shadow .15s; } .cws-phone-picker[data-layout="split"] .cws-phone-prefix:not(:empty) + .cws-phone-display { border-left: 0; border-radius: 0 var(--cwsp-radius) var(--cwsp-radius) 0; box-shadow: none; } .cws-phone-picker[data-layout="split"].is-focused .cws-phone-display, .cws-phone-picker[data-layout="split"].is-focused .cws-phone-prefix { border-color: var(--cwsp-ink); } /* ---------- Dropdown menu (rendered at ) --------------------------- */ .cws-phone-menu { --cwsp-menu-bg: #ffffff; --cwsp-pill-border: #ddd3bd; --cwsp-ink: #1a1a1a; --cwsp-ink-mute: #8a8578; --cwsp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --cwsp-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; position: fixed; z-index: 100000; width: 320px; max-width: calc(100vw - 16px); background: var(--cwsp-menu-bg); border: 1px solid var(--cwsp-pill-border); border-radius: 14px; box-shadow: 0 1px 0 rgba(60, 40, 10, .04), 0 20px 50px -20px rgba(40, 28, 8, .35), 0 6px 20px -10px rgba(40, 28, 8, .2); overflow: hidden; font-family: var(--cwsp-font); animation: cws-phone-menu-in .16s ease-out; transform-origin: top left; } .cws-phone-menu * { box-sizing: border-box; } @keyframes cws-phone-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .cws-phone-menu-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cwsp-pill-border); color: var(--cwsp-ink-mute); } .cws-phone-menu-search svg { flex: none; } .cws-phone-menu-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--cwsp-ink); } .cws-phone-menu-search input::placeholder { color: var(--cwsp-ink-mute); } .cws-phone-menu-list { max-height: 280px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #d8d1bf transparent; } .cws-phone-menu-list::-webkit-scrollbar { width: 10px; } .cws-phone-menu-list::-webkit-scrollbar-thumb { background: #d8d1bf; border-radius: 10px; border: 3px solid var(--cwsp-menu-bg); } .cws-phone-menu-row { width: 100%; display: grid; grid-template-columns: 24px 1fr auto 18px; align-items: center; gap: 10px; padding: 9px 10px !important; border: 0; background-color: transparent !important; background: transparent !important; border-radius: 9px; cursor: pointer; font: inherit; text-align: left; color: var(--cwsp-ink); } .cws-phone-menu-row.is-active { background-color: rgba(26, 26, 26, .06) !important; } .cws-phone-menu-flag { font-family: var(--cwsp-emoji); font-size: 18px; line-height: 1; } .cws-phone-menu-name { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cws-phone-menu-dial { font-size: 13px; color: var(--cwsp-ink-mute); font-variant-numeric: tabular-nums; } .cws-phone-menu-check { color: var(--cwsp-ink); } .cws-phone-menu-empty { padding: 18px; text-align: center; color: var(--cwsp-ink-mute); font-size: 14px; }