/* ============================================================ AUTH V3 — signup + login Ported from the shipday-signup-flow prototype's styles.css. Reference: docs/signup-flow-v2-design.md Self-contained on purpose: the V3 pages load ONLY this file, so the sd-avenir @font-face blocks are declared here rather than pulling in all of custom_fonts_colors.css. No Bootstrap / bootstrap-select / intl-tel-input / Handlebars / Google Fonts — the design's .btn-primary would collide with Bootstrap's, and none of them are needed. The prototype's post-signup setup-wizard styles are deliberately NOT here (/signup-info is out of scope and keeps signupUserInfo.css). ============================================================ */ /* ── Fonts (mirrors custom_fonts_colors.css) ───────────────── */ @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/300-Avenir-Light-07.woff) format('woff'); font-weight: 300; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/400-AvenirLTStd-Book.woff) format('woff'); } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/500-AvenirLTStd-Roman.otf) format('woff'); font-weight: 500; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/600-Avenir-Medium-09.woff) format('woff'); font-weight: 600; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/700-Avenir-Heavy-05.woff) format('woff'); font-weight: 700; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/800-AvenirLTStd-Black.woff) format('woff'); font-weight: 800; } /* ── Design Tokens ────────────────────────────────────────── */ :root { /* Colors */ --color-primary: #008062; --color-primary-hover: #006a52; --color-primary-light: #ebfef6; /* Right-panel background. Intentionally a DIFFERENT green from --color-primary-light (which drives dropdown hover/selected states). Don't merge them. */ --color-panel-bg: #d7f5e9; --color-primary-ring: rgba(0, 128, 98, 0.1); --color-accent: #01ad85; --color-border-accent: #0abf8c; --color-text: #0a0a0a; --color-text-secondary: #404040; --color-text-muted: #525252; --color-text-placeholder: #737373; --color-text-disabled: #a3a3a3; --color-text-label: #262626; --color-border: #e3e4eb; --color-border-otp: #d4d4cf; --color-bg: #ffffff; --color-bg-disabled: #f4f4f8; --color-bg-hover: #f4f4f8; --color-danger: #dc2626; --color-danger-bg: #fef2f2; /* Typography — Avenir is self-hosted in this repo, so no Nunito / Google Fonts fallback is needed (unlike the prototype). */ --font-family: 'sd-avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Radii */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-full: 99px; /* Shadows / Rings */ --ring-primary: 0 0 0 3px var(--color-primary-ring); } /* ============================================================ RESET + BASE ============================================================ */ /* `.sd-auth-v3` itself is listed alongside its descendants on purpose: the class sits on , and a descendant-only reset leaves the UA stylesheet's default `body { margin: 8px }` in place — which shows up as an 8px white gap between the green right panel and the viewport edge. That gap reads as a bug (see the note on .right-panel below). */ .sd-auth-v3, .sd-auth-v3 *, .sd-auth-v3 *::before, .sd-auth-v3 *::after { box-sizing: border-box; margin: 0; padding: 0; } body.sd-auth-v3 { background: var(--color-bg); /* dvh tracks the *visible* viewport, so mobile browser chrome can't push the footer below the fold the way 100vh does. The vh line stays first as the fallback — an engine without dvh ignores the second declaration. */ min-height: 100vh; min-height: 100dvh; font-family: var(--font-family); -webkit-font-smoothing: antialiased; } .sd-auth-v3 button, .sd-auth-v3 input { font-family: inherit; } /* ============================================================ LAYOUT ============================================================ */ .main-content { display: flex; min-height: 100vh; min-height: 100dvh; } .left-panel { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); } /* ── Header ── */ .reg-header { width: 100%; padding: 32px 40px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* The Shipday logo ships as two SVG halves in this repo (images/signup-info/logo-part-1.svg + logo-part-2.svg). */ .reg-header-logo { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .reg-header-logo img { height: 32px; width: auto; display: block; } /* ── Footer ── */ .reg-footer { width: 100%; max-width: 700px; padding: 0 40px 24px; flex-shrink: 0; text-align: center; align-self: center; } .reg-footer-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.4; font-weight: 500; } .reg-footer-text a { color: #03624C; text-decoration: none; } .reg-footer-text a:hover { text-decoration: underline; } /* ============================================================ STEPS ============================================================ */ @keyframes stepFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .step { display: none; flex: 1; flex-direction: column; } .step.active { display: flex; animation: stepFadeIn 0.28s ease forwards; } @media (prefers-reduced-motion: reduce) { .step.active { animation: none; } } /* ============================================================ FORM AREA ============================================================ */ .form-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 40px; gap: 40px; background: var(--color-bg); } /* All direct children of form-area cap at 420px so inputs stay readable regardless of how wide the panel gets. */ .form-area > * { width: 100%; max-width: 420px; } /* Each auth step wraps its fields in a

to scope browser autofill / password-manager heuristics (every step lives in the same document). The form is then form-area's only direct child, so it has to replicate the exact flex/gap layout its contents used to get from .form-area. */ .form-area form { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 420px; } .form-area form > * { width: 100%; } /* Per-step gap overrides */ #step-login-password .form-area, #step-login-password .form-area form, #step-business .form-area, #step-business .form-area form, #step-location .form-area, #step-location .form-area form { gap: 48px; } /* #step-login is denser than any designed step — heading, two fields, a link and two buttons in one column, because email and password were merged onto one screen. At the shared 40px the gap above the buttons equalled the gap below the heading, so the buttons read as a third group instead of this form's conclusion. Spacing has to shrink going down: 40 / 32 / 16. */ #step-login .form-area, #step-login .form-area form { gap: 32px; } /* Puts the heading back at 40px — it IS the separate thing here. */ #step-login .form-hero { margin-bottom: 8px; } /* Lifts the group off the optical centre; a centred block reads low when a header sits above it. Padding rather than justify-content on purpose — changing the layout mode is what causes the white-gap trap noted below. Desktop only. There is no dead space to correct once the viewport is short enough for the form to fill it, and this selector carries an id, so an unscoped version would outrank the `padding` shorthand in the max-width:1023 block and leave 72px of empty scroll under a phone form. */ @media (min-width: 1024px) { #step-login .form-area { padding-bottom: 72px; } } .form-inner { display: flex; flex-direction: column; gap: 48px; } /* ============================================================ FORM HERO ============================================================ */ .form-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .form-title-b { font-size: 32px; font-weight: 800; color: var(--color-text); text-align: center; letter-spacing: -0.02em; line-height: 1.3; font-family: var(--font-family); /* Lets a lang file force a line break by putting a real \n in the string — AuthI18n writes titles with textContent, and normal white-space would collapse that to a space. `pre-line` keeps newlines and still collapses everything else, so it only affects strings that ask for it (today: the French signup title). Titles whose markup spans several lines would show those breaks too, so keep each

's inline text on one line. / white-space: pre-line; } .form-subtitle-b { font-size: 16px; color: var(--color-text-secondary); font-weight:600; text-align: center; line-height: 1.4; max-width: 360px; } / ── Layout helpers ── / .form-stack-sm { display: flex; flex-direction: column; gap: 12px; width: 100%; } .form-stack-md { display: flex; flex-direction: column; gap: 24px; width: 100%; } .form-stack-lg {display: flex;flex-direction: column;gap: 16px;width: 100%;} .form-stack-sm--center { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; } .login-credentials { display: flex; flex-direction: column; gap: 24px; width: 100%; } .form-desc { font-size: 16px; color: var(--color-text-secondary); font-weight: 600; text-align: center; line-height: 1.4; margin: 0; } .forgot-link { font-size: 15px; align-self: flex-start; / It sits inside .label-field, so it would otherwise inherit the 8px label-to-input gap and read as glued to the field above it. / margin-top: 4px; } .subtitle { font-size: 16px; font-weight: 600; color: var(--color-text-secondary); text-align: center; line-height: 1.4; word-break: break-word; } .subtitle strong { font-weight: 700; color: var(--color-text); } / ============================================================ LABEL FIELD (label above input) ============================================================ / .label-field { display: flex; flex-direction: column; gap: 8px; width: 100%; } .field-error { display: none; font-size: 13px; font-weight: 500; color: var(--color-danger); margin: -2px 0 0; } .field-error.visible { display: block; } .label-field-label { font-size: 16px; font-weight: 600; color: var(--color-text); line-height: 1.4; } .label-field-input { height: 48px; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 16px; font-size: 16px; font-weight: 500; font-family: inherit; color: var(--color-text); background: var(--color-bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .label-field-input:focus { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .label-field-input::placeholder { color: var(--color-text-placeholder); font-weight: 500; } .label-field-input.valid { border-color: var(--color-primary); } .label-field-input:disabled { background: var(--color-bg-disabled); color: var(--color-text-muted); cursor: not-allowed; } / Google Places renders the city and its secondary location in adjacent spans without punctuation. Keep the dropdown readable as "City, State, Country". / body.sd-auth-v3 .pac-item-query + span::before { content: ", "; } / Shared invalid state for wrapper-based fields (phone, password) / .label-field-input.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } / ── Autofill ───────────────────────────────────────────────── Two things the UA does that need overriding. It paints its own background on an autofilled input — `background` cannot win against that layer, an inset box-shadow can. And it fires no `input` event, so the 1ms animation below is the only signal a script gets; AuthValidate.onAutofill() listens for it by this keyframe name. Rename the keyframe and that hook silently stops firing. / @keyframes sdAuthAutofill { from { outline-color: transparent; } to { outline-color: transparent; } } .sd-auth-v3 input:-webkit-autofill, .sd-auth-v3 input:-webkit-autofill:hover, .sd-auth-v3 input:-webkit-autofill:active { -webkit-box-shadow: inset 0 0 0 100px var(--color-bg); box-shadow: inset 0 0 0 100px var(--color-bg); -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); animation: sdAuthAutofill 1ms; } / The inset fill replaces box-shadow wholesale, so the focus ring and the error background have to be restated or they vanish once autofilled. Only for .label-field-input, which owns its own border and ring. The password input must NOT get it: the ring is an OUTER shadow and that input sits inside .password-wrap, whose :focus-within already draws it. Applying it to both painted the ring twice — and the inner one's right edge falls mid-field where the eye toggle begins, showing up as a vertical bar beside it. / .sd-auth-v3 .label-field-input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100px var(--color-bg), var(--ring-primary); box-shadow: inset 0 0 0 100px var(--color-bg), var(--ring-primary); } .sd-auth-v3 .label-field-input.invalid:-webkit-autofill, .sd-auth-v3 .password-wrap.invalid input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px var(--color-danger-bg); box-shadow: inset 0 0 0 100px var(--color-danger-bg); } / ============================================================ GOOGLE PLACES-STYLE BUSINESS SEARCH ============================================================ / .gplace-field { position: relative; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); padding: 0 16px 0 12px; transition: border-color 0.15s, box-shadow 0.15s; } .gplace-field.focused { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .gplace-input-row { display: flex; align-items: center; gap: 12px; height: 48px; } .gplace-source { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; padding-right: 12px; border-right: 1px solid var(--color-border); height: 32px; } .gplace-source-label { font-size: 10px; color: var(--color-text-muted); line-height: 1; white-space: nowrap; } .gplace-g-icon { width: 18px; height: 18px; flex: 0 0 18px; } .gplace-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--color-text); font-weight: 500; } .gplace-input::placeholder { color: var(--color-text-placeholder); } .gplace-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 850; overflow: hidden; } .gplace-field.open .gplace-dropdown { display: block; } .gplace-result { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background 0.12s ease; } .gplace-result:hover { background: var(--color-bg-hover); } .gplace-pin { flex: 0 0 auto; color: var(--color-text-muted); margin-top: 2px; } .gplace-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gplace-result-name { font-size: 15px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gplace-result-name b { font-weight: 700; } .gplace-result-address { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gplace-powered { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 10px 16px; font-size: 12px; color: var(--color-text-muted); } .gplace-google-word { font-weight: 600; letter-spacing: 0.2px; } .gplace-google-word span:nth-child(1) { color: #4285F4; } .gplace-google-word span:nth-child(2) { color: #EA4335; } .gplace-google-word span:nth-child(3) { color: #FBBC05; } .gplace-google-word span:nth-child(4) { color: #4285F4; } .gplace-google-word span:nth-child(5) { color: #34A853; } .gplace-google-word span:nth-child(6) { color: #EA4335; } .gplace-linked-check { flex: 0 0 auto; color: var(--color-primary); font-size: 14px; font-weight: 600; } / ============================================================ FORM ACTIONS ============================================================ / .form-actions { display: flex; flex-direction: column; gap: 20px; } .form-actions-b { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; } .form-signin-text { font-size: 15px; color: var(--color-text-secondary); text-align: center; font-weight: 600; } .form-signin-link { color: var(--color-primary); font-weight: 700; text-decoration: none; cursor: pointer; } .form-signin-link:hover { text-decoration: underline; } / ============================================================ OTP ============================================================ / .otp-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2.5vw, 12px); width: 100%; } .otp-group { display: flex; align-items: center; gap: clamp(4px, 2vw, 8px); } .otp-box { width: clamp(38px, 11vw, 48px); height: clamp(38px, 11vw, 48px); border: 1px solid var(--color-border-otp); border-radius: var(--radius-md); background: var(--color-bg); text-align: center; font-family: inherit; font-size: clamp(16px, 4.5vw, 20px); font-weight: 600; color: var(--color-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; caret-color: var(--color-primary); } .otp-box:focus { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .otp-box.complete { border-color: var(--color-primary); background: #f0fdf8; color: var(--color-primary); } .otp-box.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); } .otp-box:disabled { background: var(--color-bg-disabled); color: var(--color-text-disabled); cursor: not-allowed; } .otp-sep { width: clamp(6px, 2vw, 10px); height: 1.5px; background: var(--color-border-otp); border-radius: 2px; flex-shrink: 0; } .otp-input-block { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .otp-error { display: none; font-size: 13px; font-weight: 500; color: var(--color-danger); text-align: center; margin: 0; } .otp-error.visible { display: block; } @keyframes otpShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .otp-row.shake { animation: otpShake 0.4s ease; } @media (prefers-reduced-motion: reduce) { .otp-row.shake { animation: none; } } .resend-link.disabled { color: var(--color-text-disabled); cursor: default; pointer-events: none; text-decoration: none; } .otp-sent-msg { display: none; color: var(--color-primary); font-weight: 500; } .otp-sent-msg.visible { display: inline; } / ============================================================ BUTTONS Primary buttons start DISABLED-looking and only go green when the step's validator adds .ready. Removing [disabled] without adding .ready leaves a grey button that looks dead but is clickable. ============================================================ / .btn-primary { width: 100%; height: 48px; background: var(--color-bg-disabled); color: var(--color-text-disabled); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: 16px; font-weight: 700; cursor: not-allowed; transition: background 0.2s, color 0.2s; } .btn-primary.ready { background: var(--color-primary); color: white; cursor: pointer; } .btn-primary.ready:hover { background: var(--color-primary-hover); } .btn-primary.is-busy { cursor: progress; opacity: 0.75; } .btn-outline { width: 100%; height: 48px; background: var(--color-bg); color: var(--color-text-label); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color 0.15s; } .btn-outline:hover { border-color: var(--color-primary); } / ============================================================ HELPER TEXT ============================================================ / .helper-text { text-align: center; line-height: 1.4; color: var(--color-text-secondary); } .helper-text.sm { font-size: 14px; } .helper-text.md { font-size: 16px; } .helper-text a { color: #027948; font-weight: 700; text-decoration: none; cursor: pointer; } .helper-text a:hover { text-decoration: underline; } / Inline form-level error (replaces V2's bootstrap error modal) / .auth-form-error { display: none; font-size: 14px; font-weight: 500; color: var(--color-danger); background: var(--color-danger-bg); border-radius: var(--radius-md); padding: 10px 14px; text-align: center; line-height: 1.4; } .auth-form-error.visible { display: block; } / Slot for the page-level error, sitting between the steps and the footer so it's visible whichever step is active. / .reg-error-slot { width: 100%; padding: 0 40px 12px; display: flex; justify-content: center; flex-shrink: 0; } .reg-error-slot .auth-form-error { width: 100%; max-width: 420px; } / ============================================================ OR DIVIDER ============================================================ / .or-divider { display: flex; align-items: center; gap: 24px; } .or-divider-line { flex: 1; height: 1px; background: var(--color-border); } .or-divider span { font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; } / ============================================================ PASSWORD FIELD ============================================================ / .password-wrap { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); display: flex; align-items: center; transition: border-color 0.15s, box-shadow 0.15s; } .password-wrap:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .password-wrap.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } .password-wrap.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .password-wrap input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: none; / Rounded on the left, square on the right where the eye toggle sits. Only shows when the browser paints its own background over the input (autofill) — the input is otherwise transparent and the wrapper draws the visible border. / border-radius: var(--radius-lg) 0 0 var(--radius-lg); font-family: inherit; font-size: 16px; font-weight: 500; color: var(--color-text); background: transparent; outline: none; } .password-wrap input::placeholder { color: var(--color-text-muted); } .eye-toggle { width: 52px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #8c8c8c; flex-shrink: 0; } .eye-toggle:hover { color: var(--color-text-secondary); } / ============================================================ PHONE FIELD ============================================================ / .phone-field { position: relative; display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); height: 48px; background: var(--color-bg); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .phone-field:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .phone-field.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } .phone-field.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .phone-prefix { display: flex; align-items: center; gap: 5px; padding: 0 16px; border-right: 1px solid var(--color-border); height: 100%; font-size: 16px; color: var(--color-text); white-space: nowrap; flex-shrink: 0; } .phone-prefix .flag-icon { width: 20px; height: 20px; } .phone-field input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: none; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--color-text); background: transparent; outline: none; } .phone-field input::placeholder { color: var(--color-text-placeholder); } .phone-field input:disabled { color: var(--color-text-muted); cursor: not-allowed; } / ============================================================ CUSTOM SELECT DROPDOWN — unified component Used by the header language picker and the signup country picker. ============================================================ / .cust-select { position: relative; width: 100%; } / ── Trigger ── / .cust-select-trigger { height: 48px; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); display: flex; align-items: center; padding: 0 14px; gap: 8px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; user-select: none; } .cust-select-trigger:hover { border-color: #c0c2cc; } .cust-select.cs-open .cust-select-trigger { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .cust-select.cs-disabled { opacity: 0.7; } .cust-select.cs-disabled .cust-select-trigger { cursor: not-allowed; background: var(--color-bg-disabled); } .cust-select-flag { width: 18px; height: 18px; flex: 0 0 18px; display: block; } .cust-select-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cust-select-label.is-placeholder { color: var(--color-text-placeholder); font-weight: 500; } .cust-select-chevron { flex: 0 0 auto; color: #8c8c8c; transition: transform 0.2s ease; } .cust-select.cs-open .cust-select-chevron { transform: rotate(180deg); } / ── Panel ── / .cust-select-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 100%; background: var(--color-bg); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 900; max-height: 280px; padding: 4px; flex-direction: column; overflow: hidden; } .cust-select.cs-open .cust-select-panel { display: flex; } / Applied via JS when there isn't enough room below the trigger. Without this the panel (absolute, but still counted in scrollable overflow) grows the page's scroll height and the page visibly jumps. / .cust-select.cs-open-up .cust-select-panel { top: auto; bottom: calc(100% + 4px); } / Scrollable option list inside the panel, so a sticky search row can sit above it (the prototype had 14 countries and needed neither). / .cust-select-options { overflow-y: auto; min-height: 0; scrollbar-width: none; } .cust-select-options::-webkit-scrollbar { display: none; } / ── Search row (country picker only — ~235 options) ── / .cust-select-search { flex: 0 0 auto; padding: 4px 4px 8px; } .cust-select-search input { width: 100%; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--color-text); background: var(--color-bg); outline: none; } .cust-select-search input:focus { border-color: var(--color-primary); } .cust-select-search input::placeholder { color: var(--color-text-placeholder); } .cust-select-empty { display: none; padding: 12px 10px; font-size: 14px; color: var(--color-text-muted); text-align: center; } .cust-select-empty.visible { display: block; } / ── Option rows ── / .cust-select-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; transition: background 0.12s ease; border-radius: 8px; } .cust-select-option:hover { background: var(--color-primary-light); } .cust-select-option.cs-selected { background: var(--color-primary-light); } .cust-select-option.cs-hidden { display: none; } .cust-select-option.cs-option-disabled { opacity: 0.45; cursor: not-allowed; } .cust-select-option.cs-option-disabled:hover { background: transparent; } .cust-select-option-flag { width: 18px; height: 18px; flex: 0 0 18px; display: block; } .cust-select-option-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cust-select-option-dial { flex: 0 0 auto; font-size: 13px; color: var(--color-text-muted); } .cust-select-check { flex: 0 0 auto; color: var(--color-primary); font-size: 14px; font-weight: 600; visibility: hidden; } .cust-select-option.cs-selected .cust-select-check { visibility: visible; } / ── Header context: shrink trigger to content, panel right-aligned ── / / Header variant (login only — signup renders the picker as a form field). Base .cust-select is a full-width 48px control that matches .label-field-input; in the header it has to shrink to a compact pill and open right-aligned so the panel doesn't hang off the viewport edge. / .reg-header .cust-select { width: auto; flex: 0 0 auto; } .reg-header .cust-select-trigger { width: auto; height: 40px; padding: 0 10px 0 12px; } .reg-header .cust-select-label { flex: 0 0 auto; font-size: 14px; } .reg-header .cust-select-panel { left: auto; right: 0; min-width: 260px; } / The country dataset