carries BOTH classes: .login-2026 the shared auth skin from auth/auth.css .registerbusiness-2026 the screen-only rules below Nothing here may match without .registerbusiness-2026 on the page — except section 7, which cannot: select2 appends its dropdown to , outside

. That section is scoped by the container / dropdown classes registerBusiness.js stamps, which are unique to this screen. --------------------------------------------------------------------------- WHAT THE 2026 SHELL TAKES AWAY headPublic.php does not load customCss.php, so all four sheets this screen had under the 2024 shell are gone: materialdesignicons.min.css only ever used by commented-out markup campton-font.css .campton-* classes are inert now; Inter is used bd-wizard.css supplied .wizard/.steps/.actions layout login/registerBusinessWizard.css supplied the country pill, and leaked unscoped rules (input{padding:…!important}, section{…}, .select2-dropdown{border:0!important}) into every element on the page So the wizard chrome and the phone/country controls are rebuilt here from scratch. Nothing below uses !important except where it must beat an inline style written by JavaScript — each of those is commented. WHAT jQUERY STEPS BUILDS AT RUNTIME .wizard.clearfix.vertical > .steps.d-none + .content + .actions The step list and the Previous/Next/Submit buttons exist in NO view file, so they are styled where they land. .vertical is on the container whatever the visual orientation is — it comes from generateWizard()'s default stepsOrientation and is not a layout instruction here. THEME NOTE updatePublicTheme() only adds/removes .public-light-mode client-side, so after a toggle without a reload can carry both theme classes or neither. Dark is the base; light is keyed off .public-light-mode, never .public-dark-mode. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens + page frame auth.css sizes its card at 448px. The review step carries twelve fields, so this screen runs a wider card and a two-column field grid. ---------------------------------------------------------------------- */ .registerbusiness-2026 { --rb26-gap: 18px; /* read by section 7 so the select2 controls match these field metrics */ --reg-field-h: 44px; --reg-field-r: 999px; /* pill, same as the login fields (.l26-input) */ --reg-field-fs: 15px; } /* Two equal halves: intro left, card right. The card fills its half rather than running a fixed width, so the split stays 50/50 at every desktop size. */ .registerbusiness-2026 .rb26-grid { /* centred in the page like the login and password screens: the card keeps the same space above and below it. auth.css supplies align-items:center and the min-height; this screen used to cancel both and pin the card to the top, which left the leftover height as one gap under the card (208px at a 1200px-tall window). A wizard step taller than the screen still grows the page and scrolls, as before. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The left column is the only thing that scrolls with the page on desktop, so pin it while the wizard is tall. */ .registerbusiness-2026 .rb26-intro { position: sticky; top: 32px; } .registerbusiness-2026 .l26-title { max-width: 12ch; } .registerbusiness-2026 .l26-lead { max-width: 400px; } .registerbusiness-2026 .rb26-signin { margin: 30px 0 0; color: var(--l26-text); font-size: 13.5px; } /* The same line is repeated at the foot of the card for the mobile layout, where the intro column is hidden. */ .registerbusiness-2026 .rb26-signin-card { display: none; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--l26-rule); text-align: center; } /* registerBusiness.js ADDS AND REMOVES bootstrap col-* classes on #newVendorWizardParent every time step 0 is entered or left (col-xs-12 col-sm-12 col-md-8 col-lg-6 col-xl-6, or col-md-12). Those would resize the card mid-flow, so the width is pinned here. (0,2,0) beats bootstrap's (0,1,0) .col-lg-6 regardless of source order. */ .registerbusiness-2026 .rb26-panel { flex: 0 0 auto; width: 100%; max-width: none; padding: 0; } .registerbusiness-2026 .rb26-card { max-width: none; padding: 30px 32px 32px; } /* ------------------------------------------------------------------------- 2. Progress bar progressbar.js injects an SVG into #newVendorProgressBar. Both stroke colours are SVG ATTRIBUTES (trail #eee, bar #4bbf73), which a CSS `stroke` overrides cleanly. The "N %" readout is an INLINE style — and it is misleading, because generateWizard() animates priorIndex/numberOfSteps, so it reads 0% on step 1 and 80% on the review step and only completes after a successful submit. The stepper below says where you are, so the readout is hidden rather than corrected (correcting it would mean changing generateWizard()). ---------------------------------------------------------------------- */ /* Hidden: the line it drew across the top of the card read as a stray border, and the stepper below already says where you are. progressbar.js still renders into it, so nothing in generateWizard() notices. */ .registerbusiness-2026 .rb26-progress { display: none; } /* Inline style: position/right/top/color are all set on the element by generateProgressbar(), so this needs !important to win. */ .registerbusiness-2026 .rb26-progress .progressbar-text { display: none !important; } /* ------------------------------------------------------------------------- 3. The stepper generateWizard() adds .d-none to .steps whenever a progress bar is in use, and bootstrap's .d-none is display:none!important — so un-hiding it needs !important too. The

contain only N; the label next to it is appended by 2026/js/login/registerWizard.js, which reads data-step-label off each

. If that script never runs the stepper still works, just with numbers. ---------------------------------------------------------------------- */ .registerbusiness-2026 .wizard .steps.d-none { display: block !important; } .registerbusiness-2026 .wizard .steps > ul { display: flex; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; } .registerbusiness-2026 .wizard .steps > ul > li { flex: 1 1 0; min-width: 0; } /* jQuery Steps keeps every step clickable; the plugin itself refuses a forward jump that fails validation, so the cursor is left as a pointer only on steps already visited. */ .registerbusiness-2026 .wizard .steps > ul > li > a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; color: var(--l26-muted); font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: default; } .registerbusiness-2026 .wizard .steps > ul > li > a .number { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--l26-chip-line); border-radius: 50%; background: var(--l26-chip); color: var(--l26-muted); font-size: 11.5px; font-weight: 700; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .registerbusiness-2026 .wizard .steps > ul > li > a .rb26-step-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .registerbusiness-2026 .wizard .steps > ul > li.done > a, .registerbusiness-2026 .wizard .steps > ul > li.current > a { color: var(--l26-title); } .registerbusiness-2026 .wizard .steps > ul > li.done > a .number { border-color: var(--l26-primary-line); background: var(--l26-primary-soft); color: var(--l26-primary); } .registerbusiness-2026 .wizard .steps > ul > li.current > a .number { border-color: transparent; background: linear-gradient(90deg, var(--l26-primary-2) 0%, var(--l26-primary-deep) 100%); color: #FFFFFF; } /* The connector between the dots. Not drawn after the last step. */ .registerbusiness-2026 .wizard .steps > ul > li { position: relative; } .registerbusiness-2026 .wizard .steps > ul > li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); width: calc(100% - 36px); height: 1px; background: var(--l26-rule); } .registerbusiness-2026 .wizard .steps > ul > li.done::after { background: var(--l26-primary-line); } /* jQuery Steps emits screen-reader-only text and relies on the host stylesheet to hide it — bd-wizard.css had a .wizard .audible rule, and the 2026 shell does not load that file. Without this, "current step:" prints inside the active step. Hidden the accessible way, not with display:none. */ .registerbusiness-2026 .wizard .audible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The plugin moves focus to the step anchor on EVERY step change, and Chrome then matches :focus-visible on it -- so a ring would permanently box whichever step is current. The current step is already unmistakable from its filled number, so the ring is kept only for steps the user tabs to themselves. */ .registerbusiness-2026 .wizard .steps > ul > li > a:focus { outline: none; } .registerbusiness-2026 .wizard .steps > ul > li:not(.current) > a:focus-visible { outline: 2px solid var(--l26-primary); outline-offset: 3px; border-radius: 6px; } /* jQuery Steps renders a screen-reader-only heading per step; auth.css has no rule for it and it would otherwise print as a stray line. */ .registerbusiness-2026 .wizard .content > .title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 4. Step body ---------------------------------------------------------------------- */ .registerbusiness-2026 .wizard .content { overflow: visible; } .registerbusiness-2026 .rb26-step { margin: 0 0 22px; } .registerbusiness-2026 .rb26-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 16px; border: 1px solid var(--l26-primary-line); border-radius: 16px; background: var(--l26-primary-soft); color: var(--l26-primary); font-size: 19px; } .registerbusiness-2026 .rb26-step-title { margin: 0; color: var(--l26-title); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } /* The copy comes from config/wizardMessages.php and contains
, so line breaks are the author's. */ .registerbusiness-2026 .rb26-step-lead { margin: 8px 0 0; color: var(--l26-text); font-size: 13.5px; line-height: 1.6; } .registerbusiness-2026 .rb26-perks { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; } .registerbusiness-2026 .rb26-perk { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--l26-chip-line); border-radius: 999px; background: var(--l26-chip); color: var(--l26-chip-text); font-size: 12.5px; font-weight: 500; } .registerbusiness-2026 .rb26-perk i { color: var(--l26-primary); font-size: 13px; } /* ------------------------------------------------------------------------- 5. Fields Two columns on the card's natural width; .rb26-field-wide spans both. Inputs keep .form-control so any bootstrap wiring survives; these selectors are (0,2,0) and beat it regardless of source order. ---------------------------------------------------------------------- */ .registerbusiness-2026 .rb26-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rb26-gap); } .registerbusiness-2026 .rb26-field { display: flex; flex-direction: column; min-width: 0; margin: 0; } .registerbusiness-2026 .rb26-field-wide { grid-column: 1 / -1; } .registerbusiness-2026 .rb26-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--l26-label, var(--l26-title)); font-size: 11.5px; font-weight: 700; letter-spacing: .075em; line-height: 1.2; text-transform: uppercase; } .registerbusiness-2026 .rb26-req { color: var(--l26-primary); font-size: 12px; } /* Right-aligned to the field's edge, centred on the label line (it used to sit on the baseline, which dropped the small lowercase word below the caps). */ .registerbusiness-2026 .rb26-opt { margin-left: auto; color: var(--l26-muted); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; line-height: 1; text-transform: none; } .registerbusiness-2026 .rb26-input { display: block; width: 100%; height: var(--reg-field-h); padding: 0 18px; border: 1px solid var(--l26-input-line); border-radius: var(--reg-field-r); background: var(--l26-input); color: var(--l26-input-text); font-size: var(--reg-field-fs); line-height: 42px; outline: none; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; } .registerbusiness-2026 .rb26-input::placeholder { color: var(--l26-placeholder); opacity: 1; } .registerbusiness-2026 .rb26-input:focus { border-color: var(--l26-input-line); background: var(--l26-input); color: var(--l26-input-text); box-shadow: 0 0 0 3px rgba(243, 114, 32, .2); } /* alertifyErrMessage() marks a failed field by writing style="border:1px solid #f00" straight onto the element, and clears it with 'initial'. Both are inline, so nothing here can or should fight them — this only softens the corner the browser would otherwise square off. */ .registerbusiness-2026 .rb26-error { margin: 7px 0 0; color: #FCA5A5; font-size: 12px; font-weight: 500; line-height: 1.45; } .registerbusiness-2026 .rb26-error:empty { display: none; } body.public-light-mode .registerbusiness-2026 .rb26-error { color: #B91C1C; } /* ------------------------------------------------------------------------- 6. Phone + country pill select2PhoneNumberWidth() measures .mobilePhoneNumberGroup(Final) and injects a