/** * Styling for the intl-tel-input phone field + the back-fill prompt modal. */ /* --- Field: make the intl-tel-input wrapper behave like a normal input --- */ .theaisle-phone-form-group .iti { display: block; width: 100%; } .theaisle-phone-form-group .iti__tel-input, .theaisle-phone-form-group input[type="tel"] { width: 100%; } /* * Once intl-tel-input wraps the input, the theme's "input ~ label" sibling * selector no longer matches, so the label keeps its floated position. Pin it * there explicitly so it never overlaps the flag / dial-code. */ .theaisle-phone-form-group label { top: -9px; } /* * The theme's dashboard styles give `.form-group input` `position: relative; * z-index: 2`, which stacks the input ABOVE intl-tel-input's flag/country * trigger — so clicks on the flag hit the input and the country dropdown never * opens (registration + account pages load that stylesheet; the modal often * renders on pages that don't, which is why only the forms broke). Lift the * flag container above the input so the country picker is always clickable. Two * classes here out-rank the theme's single-class `.form-group input` rule. */ .theaisle-phone-form-group .iti__flag-container, .theaisle-phone-form-group .iti__selected-flag { z-index: 3; } /* * intl-tel-input fills in an example number as the placeholder. Render it faint * so it doesn't look like the field is already completed. */ .theaisle-phone-form-group input::placeholder { color: #9aa0a6 !important; opacity: 1 !important; /* Firefox lowers placeholder opacity by default */ } .theaisle-phone-form-group input::-webkit-input-placeholder { color: #9aa0a6 !important; } .theaisle-phone-form-group input::-moz-placeholder { color: #9aa0a6 !important; opacity: 1 !important; } .theaisle-phone-form-group input:-ms-input-placeholder { color: #9aa0a6 !important; } /* * The country dropdown (desktop) is appended to so it escapes the form's * overflow clipping, and the mobile picker uses intl-tel-input's full-screen * popup. Both attach to the same .iti--container element. It must sit above * MyListing's auth popup, the dashboard, AND our own prompt modal, so push it * to the top of the stack. A near-max z-index covers any theme overlay whose * own z-index we don't control. */ .iti--container, .iti--fullscreen-popup { z-index: 2147483600 !important; } .iti__dropdown-content, .iti__country-list { z-index: 2147483600; } /* --- Back-fill prompt modal --- */ .theaisle-phone-prompt { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 20px; } .theaisle-phone-prompt.is-visible { display: flex; } .theaisle-phone-prompt-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 40, 0.55); } .theaisle-phone-prompt-box { position: relative; z-index: 1; width: 100%; max-width: 420px; background: #fff; border-radius: 10px; padding: 28px 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .theaisle-phone-prompt-box h2 { margin: 0 0 10px; font-size: 20px; } .theaisle-phone-prompt-box > p { margin: 0 0 18px; color: #555; font-size: 14px; line-height: 1.5; } .theaisle-phone-prompt .theaisle-phone-form-group { margin-bottom: 6px; } .theaisle-phone-prompt-error { min-height: 18px; margin: 0 0 12px; color: #c0392b; font-size: 13px; } .theaisle-phone-prompt-actions { display: flex; gap: 10px; flex-wrap: wrap; } .theaisle-phone-prompt-actions .button { flex: 1 1 auto; }