/* ========================================================================== תן לי — Agent Register page (page-templates/agent-register.php) only. Loaded together with agent-app.css, which already defines the --aa-* tokens on the ancestor .agent-auth element (this page reuses the same auth-shell wrapper as screen 01, Login — tenli_agent_app_render_auth_shell_ open()/_close()) — every rule below just inherits those custom properties, no new palette. Everything here is scoped under .agent-register so it can never leak onto any other page, and never touches main.css classes globally — it only re-skins the SAME shared markup (wizard__field, supplier-signup__*, terms-gate, .btn) that page-templates/supplier-signup. php also renders via the exact same PHP functions (inc/supplier-terms.php, inc/agent-register.php) — that page still loads main.css, so its look is completely unaffected. Near-identical to assets/css/agent-pilot.css (same shared markup, same re-skin approach) minus the search-stage rules this page never renders, and minus any OTP rules at all — this form has no email/phone verification step (see the page template's own docblock for why), so it never renders the .claim-otp markup either. ========================================================================== */ /* -------------------------------------------------------------------- */ /* Card shell — page-templates/supplier-signup.php passes this as an extra */ /* class alongside .agent-auth__card--wide (tenli_agent_app_render_auth_ */ /* shell_open()'s $card_class param takes a space-separated list) so only */ /* THIS page gets the wider card; agent-pilot.php keeps --wide's normal */ /* 640px untouched. width:100% on .agent-auth__card already makes any */ /* max-width here a ceiling, not a fixed size, so mobile needs no separate */ /* override — it already shrinks to fit exactly like --wide does today. */ /* -------------------------------------------------------------------- */ .supplier-signup__card { max-width: 900px; padding-top: 34px; padding-bottom: 26px; } .agent-register .agent-auth__logo { margin-bottom: 14px; } .agent-register .agent-auth__subtitle { margin: 6px 0 16px; color: #46526b; } /* -------------------------------------------------------------------- */ /* Form fields — re-skins the shared .wizard__field/select/input/textarea */ /* markup (page-templates/agent-register.php, inc/signup-verification.php) */ /* with the agent-app field look instead of main.css's public-site one. */ /* -------------------------------------------------------------------- */ .agent-register .wizard__field { margin-block-end: 12px; } .agent-register .wizard__field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--aa-text); margin-block-end: 8px; } .agent-register .wizard__field input[type="text"], .agent-register .wizard__field input[type="email"], .agent-register .wizard__field input[type="tel"], .agent-register .wizard__field input[type="url"] { width: 100%; height: 48px; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 0 14px; font: inherit; font-size: 14px; color: var(--aa-text); background: var(--aa-white); } .agent-register .wizard__field input:focus { border-color: var(--aa-teal); } .agent-register .wizard__field-hint { font-size: 12.5px; color: var(--aa-text-muted); margin-block-start: 6px; } /* Step-1 field icons (2026-08 visual pass) — a small, decorative (aria-hidden, pointer-events:none) icon sits at the field's logical start (the right edge in this RTL layout) for every field on the first step; icons come from the shared tenli_agent_app_icon_svg() library where one already exists ('building'/'users'/'mail'/'phone'), plus two new small ones just for city/website (tenli_supplier_signup_pin_icon_svg()/_link_icon_svg(), inc/supplier-signup.php) since no map-pin/link icon existed in that shared set yet. Same positioning technique as the existing password show/hide icon (.agent-auth__eye/.agent-auth__password-wrap). */ .agent-register .wizard__field--icon { position: relative; } .agent-register .wizard__field-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--aa-text-muted); pointer-events: none; display: flex; align-items: center; justify-content: center; } .agent-register .wizard__field-icon svg { width: 100%; height: 100%; } /* Same specificity as the base input[type="..."] rule above (which sets the padding shorthand) is required here, or this loses the cascade and the icon silently overlaps the placeholder text — confirmed live via getComputedStyle before this fix (paddingInlineStart stayed 14px). */ .agent-register .wizard__field--icon input[type="text"], .agent-register .wizard__field--icon input[type="email"], .agent-register .wizard__field--icon input[type="tel"], .agent-register .wizard__field--icon input[type="url"] { padding-inline-start: 40px; } .agent-register .supplier-signup__specialty-list { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 12px 14px; max-height: 220px; overflow-y: auto; } .agent-register .supplier-signup__checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--aa-text); } .agent-register .supplier-signup__checkbox input { width: auto; accent-color: var(--aa-teal-dark); } /* Small shared icon for the ~64 "extra" specialties (2026-08) — continuing the icon+label direction the 6 core category cards already use, but with ONE consistent icon rather than 64 bespoke ones (no per-item icon asset exists for these, and inventing that many would be its own project). */ .agent-register .supplier-signup__checkbox-icon { width: 14px; height: 14px; color: var(--aa-teal-dark); flex-shrink: 0; display: flex; } .agent-register .supplier-signup__checkbox-icon svg { width: 100%; height: 100%; } /* -------------------------------------------------------------------- */ /* Terms gate (inc/supplier-terms.php) — same classes as the public page, */ /* re-skinned. */ /* -------------------------------------------------------------------- */ /* Same shared function as page-templates/supplier-signup.php and agent-pilot.php (inc/supplier-terms.php:tenli_render_supplier_terms_gate()) — moved from an always-visible inline scroll box to a "פתיחת ההסכם לעיון" button + wide native , staged-wizard redesign (2026-08). .terms-gate__scroll no longer exists in the shared markup, replaced by .terms-gate-modal__scroll inside the dialog. */ .agent-register .terms-gate__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--aa-text); margin-block-end: 6px; } .agent-register .terms-gate__card { text-align: center; } .agent-register .terms-gate__summary { margin: 0 0 12px; font-size: 13px; color: var(--aa-text-muted); } .agent-register .terms-gate__hint { font-size: 12px; color: var(--aa-text-muted); margin: 10px 0 0; } .agent-register .terms-gate--unavailable p { font-size: 13.5px; color: var(--aa-text-muted); } .agent-register .terms-gate-modal { width: min(640px, 92vw); border: none; border-radius: var(--aa-radius); padding: 0; max-height: calc(100vh - 80px); box-shadow: 0 24px 60px -20px rgba(15, 32, 57, 0.35); } .agent-register .terms-gate-modal::backdrop { background: rgba(5, 39, 72, 0.55); } .agent-register .terms-gate-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--aa-border); } .agent-register .terms-gate-modal__head h2 { font-size: 17px; color: var(--aa-navy-deep); margin: 0; } .agent-register .terms-gate-modal__close { font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; color: var(--aa-text-muted); } .agent-register .terms-gate-modal__close:hover { background: var(--aa-bg); } .agent-register .terms-gate-modal__notice { margin: 0; padding: 10px 24px; background: var(--aa-amber-bg); color: var(--aa-amber-fg); font-size: 12.5px; font-weight: 700; text-align: center; border-bottom: 1px solid var(--aa-border); } .agent-register .terms-gate-modal__scroll { max-height: 50vh; overflow-y: auto; padding: 16px 24px; font-size: 13.5px; line-height: 1.7; color: var(--aa-text-muted); } .agent-register .terms-gate-modal__foot { padding: 14px 24px 20px; border-top: 1px solid var(--aa-border); text-align: left; } /* -------------------------------------------------------------------- */ /* Buttons — reuses .btn/.btn--outline-sm class NAMES from the shared */ /* render functions, mapped onto the agent-app button look (not */ /* main.css's, which is never loaded on this page). */ /* -------------------------------------------------------------------- */ .agent-register .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 11px 20px; border-radius: var(--aa-radius-pill); border: none; cursor: pointer; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease; } .agent-register .btn--primary { background: var(--aa-navy-deep); color: #fff; box-shadow: 0 6px 16px -6px rgba(22, 51, 90, 0.5); justify-content: center; } /* Real bug (reported live, confirmed via getComputedStyle: near-black text on a near-black button — unreadable): the "already registered" screen's primary CTA is an , not a