/* * Velocity Talent — dialling-code picker + national number. * * Markup: resources/views/partials/phone-country-row.blade.php * Behaviour: public/js/vt-phone-field.js * * EXTRACTED 17/09/2026 from velocity-talent-auth.css, which is loaded only by * the four auth screens. The picker is now also on the seeker and employer * PROFILE screens, and those load a different stylesheet — so the rules had to * either move here or be copied, and a copy would drift the first time the * join or the RTL flip was touched. * * The number input is addressed as `.vt-phone__input`, not `.vt-auth__input`: * the row has to sit inside three different field wrappers (.vt-auth__field on * the auth pages, .vt-field on the seeker profile, .vt-exp-field on the * employer profile) and must not assume any of them. The blade puts * `vt-phone__input` on the input alongside whichever base class the host page * uses for its own borders and background. * * Everything is in logical properties, so the row flips with page direction * without an RTL counterpart — see the join block near the bottom. */ /* ─────────────────────────────────────────────────────────────────────────── Phone field: dialling-code picker + national number Markup: resources/views/partials/phone-country-field.blade.php The carries dir="ltr" for its digits — so a logical rule rounded its right edge on the Arabic page, where that edge is the seam. LTR: [ code ][ number ] RTL: [ number ][ code ] — in both, the code box is the one in reading-start position, so the outer edge flips with the page. */ .vt-phone__select, .vt-phone__trigger { border-radius: 12px 0 0 12px; } .vt-phone__num .vt-phone__input { border-radius: 0 12px 12px 0; } /* Error state mirrors .vt-auth__field.has-error for the two custom controls. */ .vt-auth__field.has-error .vt-phone__select, .vt-auth__field.has-error .vt-phone__trigger, .vt-field.has-error .vt-phone__select, .vt-field.has-error .vt-phone__trigger, .vt-exp-field.has-error .vt-phone__select, .vt-exp-field.has-error .vt-phone__trigger { border-color: rgba(255, 99, 99, 0.55); } @media (max-width: 480px) { .vt-phone__code { width: 124px; } .vt-phone__panel { width: 250px; } } /* ═══════════════════════════════════════════════════════════════════════════ HOST-PROOFING + RTL Added 17/09/2026, when the row moved onto the seeker and employer profile screens. Two problems this block exists to solve, both invisible until the control is dropped into a page it was not born in: 1. THE HOST PAGE'S OWN INPUT STYLES WIN. The row borrows the host's input class for colours and borders (`form-control` on the seeker profile, `vt-exp-field__input` on the employer one, `vt-auth__input` on the auth screens). Those are single class selectors, and so were the rules above — so on the profile screens the host won: the joined corners reverted to a plain 8px radius and the 44px padding that makes room for the icon dropped to 14px, putting the glyph on top of the digits. 2. THE RTL MIRRORING LIVED IN AN AUTH-ONLY STYLESHEET. velocity-talent-auth-rtl.css is not loaded by the profile screens, so the code box kept LTR corner rounding while sitting on the right, and the digits were right-aligned. Both are fixed by specificity rather than by load order or !important: `.vt-phone .vt-phone__num .vt-phone__input` is three classes and beats any single-class host rule AND the generic `[dir="rtl"] .vt-auth__input`, wherever those files happen to sit in the order. Do not "simplify" these back to two classes. That is the bug. ═══════════════════════════════════════════════════════════════════════════ */ /* ---- The number box: LTR content, room for the icon, joined corner ------- */ .vt-phone .vt-phone__num .vt-phone__input, [dir="rtl"] .vt-phone .vt-phone__num .vt-phone__input { direction: ltr; text-align: left; padding-left: 44px; padding-right: 16px; } /* ---- The icon: always at the visual left of the number box --------------- */ .vt-phone .vt-phone__num .vt-phone__icon, [dir="rtl"] .vt-phone .vt-phone__num .vt-phone__icon { inset-inline-start: auto; left: 14px; right: auto; } /* ---- The join (ملتصقات) ------------------------------------------------- LTR: [ code ][ number ] RTL: [ number ][ code ] In both, the code box is the one in reading-start position, so the outer rounded edge flips with the page. Physical corners, not logical ones — see the long note on the base rules earlier in this file. */ .vt-phone .vt-phone__select, .vt-phone .vt-phone__trigger { border-radius: 12px 0 0 12px; } .vt-phone .vt-phone__num .vt-phone__input { border-radius: 0 12px 12px 0; } [dir="rtl"] .vt-phone .vt-phone__select, [dir="rtl"] .vt-phone .vt-phone__trigger { border-radius: 0 12px 12px 0; } [dir="rtl"] .vt-phone .vt-phone__num .vt-phone__input { border-radius: 12px 0 0 12px; } /* ---- The search panel --------------------------------------------------- Only the two BOXES are LTR. The panel is prose — Arabic country names and an Arabic search placeholder — so it reads RTL, with the dialling code pinned back to LTR because "+962" is LTR content wherever it appears. */ [dir="rtl"] .vt-phone .vt-phone__panel { left: 0; right: auto; direction: rtl; text-align: right; } [dir="rtl"] .vt-phone .vt-phone__opt-code { direction: ltr; } /* ---- Height parity ------------------------------------------------------ The two boxes must be the same height or the join shows a step. The code box is fixed at 48px above; the host's input may not be, so pin it here too. */ .vt-phone .vt-phone__num .vt-phone__input { height: 48px; }