/* * New Order — Step 1 (CR-A116-18). Classes lifted verbatim from the frozen * card (kpm/products/ynetplus/cr/attachments/order-flow-r1.html rev4 * `#step1`) — same selectors, same values, drawing on tokens.css (identical * :root variable names to the card's own, see tokens.css header). Additions * beyond the static mockup are called out inline; each is a functional * necessity (interactivity/accessibility), never a visual deviation. * * 🔴 No qty/stepper, no Subtotal/HST row styling exists here on purpose — * the 2026-08-12 card correction deleted them; see shared/price-rail.js. */ /* ===================================================================== * Shared wizard contract (CR-A116-38) — the seam between this CSS and the * three step modules (step-product.js, step-job-site.js, step-delivery.js). * Class names are FIXED by the CR so all four workstreams (this file + * modal.css, and the three JS files) stay file-disjoint; do not rename. * Values below are taken verbatim from the ratified cards' own error-box / * qq-foot / qq-foot-slot / btn-back / btn-primary rules (new-order-1- * product.html, order-jobsite-r1.html, new-order-3-delivery.html) — one * shape, used on all three steps (Drew's ruling #2: Back and Next live in * one consistent place across the wizard). * ===================================================================== */ /* ---------- .nof-error — the ONE error language, every failure, every step. Geometry/colors copied from new-order-3-delivery.html's .error-box, the card's own "corrected" version (its BUILD NOTES: "build it exactly as-is, don't route it through another container's error class") — this fixes the real defect where step 3's failure message rendered as unstyled black text because the old error style was scoped to a container step 3 never used. #FECACA has no token in tokens.css — same one-off border color .qq-foot .order-error already hardcodes below. */ .nof-error { background: var(--danger-soft); border: 1px solid #FECACA; border-radius: var(--r-md); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; } .nof-error__icon { width: 20px; height: 20px; border-radius: 50%; background: var(--danger); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .nof-error__icon svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; } .nof-error strong { display: block; font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 2px; } .nof-error p { margin: 0; font-size: 13px; color: var(--danger); line-height: 1.5; } /* ---------- .nof-footer — a step's own footer row. [[BF-611]] 2026-08-24: now rendered INTO the shared modal shell's real handle.foot (see the `.modal-foot.new-order-modal-foot` rule further below) rather than inline in the scrolling body — the "shell contributes NO footer" framing this comment used to open with is no longer true; kept only as the step footers' own class/markup, unchanged. Back sits left, Next sits right via margin-left:auto on .nof-footer__next — this (rather than justify-content:space-between plus an empty placeholder div) is how Next stays glued to the same right-hand slot on step 1, where .nof-footer__back is simply absent rather than rendered- empty: an auto-margin doesn't care whether anything precedes it. */ /* [[BF-549]] 2026-08-19 — sticky bottom, mirrors .ctx-ladder's sticky top above (see that rule's header note for the full -18px derivation: it cancels .modal-body's own 18px padding, modal.css, uniformly for every step sharing that one scrollport). background/border-top already present below are enough to occlude scrolled content underneath once stuck — no new color/border needed here, unlike .step3-footer-row below which had neither. Covers both consumers unchanged: step 1's `.qq-foot.nof-footer` combo (qq-foot's own later padding/background rule still wins the cascade, untouched) and step 2's plain `.nof-footer` inside #jsFooter. */ .nof-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: 14px 20px; border-top: 1px solid var(--line); background: var(--field); position: sticky; bottom: -18px; z-index: 10; } .nof-footer__back { height: 48px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink-soft); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font); flex-shrink: 0; } .nof-footer__back:hover { background: var(--field); } .nof-footer__next { margin-left: auto; height: 48px; padding: 0 22px; border: none; border-radius: var(--r-md); background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background var(--dur-1) var(--ease); font-family: var(--font); } .nof-footer__next:hover { background: var(--blue-deep); } /* CR-A116-41 fix (Drew's UAT 2026-08-19): the footer's right side is an explicit SLOT — a right-docked column holding the primary button with its reason/caption line beneath it. Replaces the flex-basis:100% wrap trick, which in practice left the reason line ON the button row (misaligning Next against Back) and, in step 1, put the caption inside the blue-painted wrapper. The slot always reserves the caption row's height so the footer never changes size when a reason appears or clears (nothing moves). */ .nof-footer__slot { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .nof-footer__slot .nof-reason, .nof-footer__slot .cta-caption { flex-basis: auto; margin: 0; height: 16px; line-height: 16px; text-align: right; overflow: hidden; } /* The slot is a column (button + caption row), so centering the footer's items would sink Back to the slot's vertical middle — Back must align with the Next BUTTON, not the slot. Top-align and let both buttons share row 1. */ .nof-footer:has(.nof-footer__slot) { align-items: flex-start; } .nof-footer__next .icon { stroke: #fff; } /* [[BF-611]] 2026-08-24 — New Order modal footer pinning. new-order-modal.js now passes its modal shell's real `handle.foot` (marker class added there: `.new-order-modal-foot`) as each step's footHost instead of leaving `handle.foot` hidden while every step rendered its own footer inline in the scrolling body. `.modal-foot` (modal.css) carries its own box treatment (padding/border-top) — doubling up with the step footer's own (`.nof-footer`/`.step3-footer-row`, both already fully styled: padding, border-top, background) would draw two stacked boxes. This neutralizes the shell's own box so the step's footer supplies the only visible one, and makes it a plain block so the step footer's own width/layout rules (already correct on their own — see .nof-footer__slot's margin-left:auto above) aren't fighting `.modal-foot`'s flex/justify-content:flex-end sizing a non-full-width child. */ .modal-foot.new-order-modal-foot { display: block; padding: 0; border-top: none; } .modal-foot.new-order-modal-foot > .nof-footer, .modal-foot.new-order-modal-foot > .step3-footer-row { position: static; } /* .step3-footer-row (unlike .nof-footer/.qq-foot) has never carried its own horizontal padding — it relied on the 18px inset .modal-body gave every scrolling child (see the "No padding added" note on its own rule below). Moved out to .modal-foot, that ambient inset is gone, so this supplies its own — 20px, matching the other two footers' existing convention — and drops the margin-top that used to space it from the content flowing above it in the same scrollport (irrelevant now; it's the footer's own region). */ .modal-foot.new-order-modal-foot > .step3-footer-row { padding: 0 20px; margin-top: 0; } /* ---------- .nof-reason — the short muted line beneath a blocked primary. flex-basis:100% forces it onto its own row inside .nof-footer's wrapping flex row (a 2-item row wraps a 3rd item without needing an extra wrapper element); margin-left:auto then docks that new row's content under the right-aligned Next button — same visual result as the card's own .block-reason, without a wrapper class the CR's contract doesn't name. */ .nof-reason { flex-basis: 100%; max-width: 230px; margin-left: auto; margin-top: 2px; text-align: right; font-size: 11.5px; color: var(--muted); } /* ---------- .is-blocked / .is-submitting — modifiers on a primary CTA. Compounded against every primary-button class this app actually uses (.nof-footer__next here, plus the pre-existing .btn-primary/.btn-place) so the modifier works regardless of which base class a given step's CTA carries — bare `.is-blocked`/`.is-submitting` stay as a fallback. */ .is-blocked, .nof-footer__next.is-blocked, .btn-primary.is-blocked, .btn-place.is-blocked { background: #E5E7EB; color: var(--muted); cursor: not-allowed; pointer-events: none; } .is-blocked .icon, .nof-footer__next.is-blocked .icon, .btn-primary.is-blocked .icon, .btn-place.is-blocked .icon { stroke: var(--muted); } .is-submitting, .nof-footer__next.is-submitting, .btn-primary.is-submitting, .btn-place.is-submitting { background: var(--blue-deep); color: #fff; cursor: not-allowed; pointer-events: none; } .spinner-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; flex-shrink: 0; animation: nof-spin .7s linear infinite; } @keyframes nof-spin { to { transform: rotate(360deg); } } /* ---------- .nof-reserve — generic marker for "this block holds its worst-case height, empty space is fine, the box itself never resizes" (Drew's ruling #1). Exact heights are per-block, not per this utility — see .price-block/.site-summary/.unit-reserved below, each already carrying its own fixed height from its own card — so .nof-reserve only adds the two properties every such block needs regardless of its height: a hard box-sizing and clipped overflow, so nothing inside can force the box taller than its reserved number. */ .nof-reserve { box-sizing: border-box; overflow: hidden; } .nof-footer__back:focus-visible, .nof-footer__next:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .qq-card-wrap { display: flex; justify-content: center; /* BF-live-2026-08-17 (Drew): was var(--sp-4) [16px] top/bottom — doubled up with modal-body's own 18px padding (modal.css) once this card moved inside the modal shell (CR-A116-30). Tightened to the next token down; the card's own internal spacing (untouched here) still reads as a distinct block. */ padding: var(--sp-2) 0; } .qq-card { width: 100%; /* 2026-08-17 (Drew, live directive — modal wider+shorter): was 640px. The modal shell's `l` size widened 720 -> 900px (modal.css) specifically so Step 1 could trade vertical stacking for horizontal room instead of just adding side margin; this card now uses that room via .qq-two-col below (Edge style+Edge colour, Width/Height+Price paired side-by-side) rather than growing wider for its own sake. */ max-width: 800px; /* [[BF-494]] 2026-08-17 — FRAMELESS inside the modal. This block used to draw `background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop)`, which was correct while Step 1 was a standalone PAGE. CR-A116-30 moved the flow into the shared modal shell (assets/js/shared/modal.js), and the shell already supplies exactly that frame — so the build drew a bordered, shadowed card INSIDE a bordered, shadowed modal. The ratified card nulls it for this context verbatim (new-order-1-product.html:100): .qq-card{width:100%; background:transparent; border:none; border-radius:0;} `overflow: hidden` went with it — it only existed to clip child borders against the (now absent) rounded corner. Scope note: `.qq-card` has NO non-modal caller left. Its only consumers are step-product.js (this step), step-delivery.js's shimmer/error states and new-order-modal.js's own loader — all three render inside the modal, so the null is applied on the base rule rather than under an `.m-shell`- style guard that could never discriminate anything. The shimmer keeps its own visible surface explicitly — see .qq-card.shimmer-card below. */ background: transparent; border: none; border-radius: 0; box-shadow: none; } /* Pairs two adjacent .order-choice-group sections (or a section + the price slot) side-by-side instead of stacked — the concrete mechanism for "trade vertical space for the newly-available horizontal space" (Drew, 2026-08-17). Only used where both halves are non-empty (step-product.js's twoUp() helper falls back to plain concatenation otherwise, so a lone section never sits half-width with dead space next to it). Collapses back to one column under 760px available width (tablet shell + phone) — same threshold philosophy as modal.css's own `l` tablet breakpoint. */ .qq-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .qq-two-col > .order-choice-group, .qq-two-col > #step1PriceSlot { min-width: 0; } @media (max-width: 760px) { .qq-two-col { grid-template-columns: 1fr; gap: var(--sp-2); } } /* BF-live-2026-08-17: qq-head/qq-body/qq-group-label vertical spacing tightened one token step each (Drew — modal body needed internal scrolling to see the price box on a normal laptop viewport). Horizontal padding, font-sizes, and the 44px tap targets below are untouched — this is a density pass only, no visual redesign. */ .qq-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 20px; border-bottom: 1px solid var(--line); } .qq-head .badge { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--blue-soft); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qq-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; } .qq-head p { font-size: 13px; color: var(--muted); margin: 2px 0 0; } .qq-body { padding: var(--sp-2) 20px; display: flex; flex-direction: column; gap: var(--sp-2); } /* ===================================================================== * Context ladder (CR-A116-45) — Drew's live-UAT ruling, 2026-08-19: one * shared, read-only PRODUCT/SITE strip, pinned as the FIRST element inside * each wizard step's own body container, directly under the modal header. * Rendered by the one shared helper in new-order-modal.js * (wizard.ladderHtml()/wizard.patchLadder()) — consumed unmodified by all * three step modules, not three hand-copies. Geometry/colours verbatim from * the ratified cards (new-order-1-product.html / order-jobsite-r1.html / * new-order-3-delivery.html, Claude Design "YNET+ Client App"). * * Fixed 44px content row, NEVER wraps, NEVER changes height as a cell * fills — white-space:nowrap + real ellipsis (min-width:0 on the flex text * cells) is what keeps that promise regardless of how long an address or * product description gets. * * Bleed math (the negative-margin trick that lets the strip span edge-to- * edge under the header): the cards' own mockup uses one simplified body * wrapper: production nests three DIFFERENT real containers with three * different real paddings, so each host below cancels exactly its OWN * padding — same per-host override pattern the cards themselves use for * `.gal-card .ctx-ladder`. * * [[BF-549]] 2026-08-19 (Drew's live UAT: «اون لدر که اضافه شده، باعث شده * دگمه های پایین برن پایین‌تر و مودال اسکرول بخوره» — the ladder pushed the * footer below the fold). Sticky top pins the ladder under modal.css's * `.modal-head`; sticky bottom on each step's own footer (below) pins IT * to the shell's bottom edge — `.modal-body` (modal.css) stays the ONLY * scrolling element, only the content between the two now moves. * `top: -18px` cancels `.modal-body`'s own `padding: 18px` (modal.css * literal, matched here, not invented — same cross-file-literal pattern * job-site.css's own comments already use): sticky's offset is resolved * against the nearest SCROLLING ancestor's padding edge (`.modal-body`), * not against any of the non-scrolling wrappers in between (`.qq-card-wrap` * / `.job-site-card-wrap`'s own `padding: var(--sp-2) 0`, `.qq-card` / * `.job-site-card`'s own zero padding) — those wrappers only change WHEN * stickiness engages during scroll, never WHERE it rests once engaged. That * makes this one offset correct for all three hosts below unchanged, * despite their differing padding — verified against modal.css's own * "`.modal-body` is already the only scrolling element" note, not assumed. * z-index clears `.places-dropdown` (job-site.css, z-index:5 — the create- * site address autocomplete, the only other stacked element that can * scroll near this strip). */ .ctx-ladder { height: 44px; flex-shrink: 0; display: flex; align-items: stretch; background: var(--field); border-bottom: 1px solid var(--line); position: sticky; top: -18px; z-index: 10; } .ctx-cell { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); overflow: hidden; } .ctx-cell + .ctx-cell { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); } .ctx-badge { flex-shrink: 0; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-sm); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .ctx-badge.product { background: var(--violet); } .ctx-badge.site { background: var(--teal); } .ctx-val { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-val.placeholder { color: var(--faint); font-weight: 500; } /* Step 1 host: .qq-card-wrap > .qq-card > .qq-body (padding: var(--sp-2) 20px, above). */ .qq-body .ctx-ladder { margin: calc(-1 * var(--sp-2)) -20px 0; padding: 0 20px; } /* Step 2 host: .job-site-card > .card-body (padding: var(--sp-3) 22px — job-site.css's own existing literal, matched here, not invented). */ .job-site-card .card-body .ctx-ladder { margin: calc(-1 * var(--sp-3)) -22px 0; padding: 0 22px; } /* Step 3 host: .step3-wrap (padding: var(--sp-2) 0, below) — replaces the deleted .identity-bar in this exact slot. No horizontal bleed needed (the host already has 0 horizontal padding); var(--sp-6) reserves the same gap below the strip the old identity-bar's own margin-bottom did. */ .step3-wrap .ctx-ladder { margin: calc(-1 * var(--sp-2)) 0 var(--sp-6); padding: 0 20px; } .qq-group-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-1); display: flex; align-items: center; gap: 6px; } .btn-grid { display: grid; gap: 8px; } .btn-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .btn-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } .btn-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .opt-btn { min-height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--field); color: var(--ink-soft); font-size: 13px; line-height: 1.45; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 8px 4px; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); position: relative; font-family: var(--font); /* pixel-round2 §4.2:
in the card ->