/*
 * New Order — Step 2: Job site (CR-A116-20). Classes lifted verbatim from
 * the frozen card (kpm/products/ynetplus/cr/attachments/order-jobsite-r1.html
 * rev2, all five sections) — same selectors (except the outer wrapper,
 * renamed `.card` -> `.job-site-card` to avoid colliding with any future
 * generic `.card` component; every class inside it is unchanged), same
 * values, drawing on tokens.css (identical :root variable names to the
 * card's own). Additions beyond the static mockup are called out inline;
 * each is a functional necessity (interactivity/a11y/live-preview), never a
 * visual deviation — see the forge report's pixel self-check table for the
 * full account of every one, including the a11y touch-target bumps.
 *
 * The design-doc's own outer layout (`.stage` 520px/1fr two-column grid +
 * `.annotations` sidebar) is NOT reproduced — that scaffolding exists only
 * to show the card next to its explanatory notes on the design page itself;
 * it is not part of the card. The real page centers the single card, same
 * adaptation `order-flow.css` already made for Step 1's `.qq-card-wrap`.
 */

/* BF-live-2026-08-17: wrap/card-head/card-body vertical spacing tightened
   one token step each (Drew — same redundant-double-padding-with-modal-body
   fix as step1's qq-card-wrap/step3's step3-wrap; modal.css's .modal-body
   already pads 18px). The result-list itself (below) is untouched — a long
   list legitimately scrolls, this pass only removes excess static chrome. */
.job-site-card-wrap {
  display: flex;
  justify-content: center;
  padding: var(--sp-2) 0;
}

/* [[BF-494]] 2026-08-17 — FRAMELESS + full modal width.
   Was: `max-width: 520px; background: var(--bg); border: 1px solid var(--line);
   border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden`.
   Correct while Step 2 was a standalone page; wrong once CR-A116-30 moved the
   flow into the shared modal shell, which supplies that frame itself. The
   build was drawing a bordered 520px column floating inside ~864px of modal
   content width — a card inside a card, plus ~344px of dead space.
   The ratified card's in-modal override is unambiguous
   (order-jobsite-r1.html:238):
     .m-shell .card{width:100%; border:none; border-radius:0; box-shadow:none;}
   Scope note: `.job-site-card` has NO non-modal caller — its only consumer is
   step-job-site.js (grep: 2 render sites, both in that file), which is loaded
   solely by new-order-modal.js. So the null lands on the base rule; there is
   no page context left for it to discriminate against.
   WIDTH — deliberate, documented adaptation, NOT the card's literal
   `width:100%`: steps 1 and 3 both cap at `max-width: 800px` centered inside
   the same 900px modal (order-flow.css `.qq-card` / `.step3-wrap`, both set by
   Drew's own 2026-08-17 live pass, and both likewise deviating from their
   cards' literal 100%). Matching that keeps the three wizard steps on one
   measure instead of making Step 2 the odd wide one mid-flow. Recovers ~280px
   of the ~344px the 520px cap was wasting. If Drew wants the true full bleed,
   this one line becomes `max-width: none`. */
.job-site-card {
  width: 100%;
  max-width: 800px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* [[BF-494]]: `.card-head` is no longer rendered — step-job-site.js dropped
   the in-modal "Job site / Search your job sites" heading because the modal
   header already names the flow and the step. Rules kept (unreferenced) for
   the same reason order-flow.css keeps `.qq-head`: a phone/standalone shell,
   which has no modal chrome to duplicate, needs them back verbatim. */
.job-site-card .card-head { padding: var(--sp-2) 22px; border-bottom: 1px solid var(--line); }
.job-site-card .card-head h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.job-site-card .card-head p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.job-site-card .card-body { padding: var(--sp-3) 22px; display: flex; flex-direction: column; gap: var(--sp-2); }
.job-site-card .card-foot { padding: var(--sp-2) 22px; border-top: 1px solid var(--line); background: var(--field); }

/* field-label: base rule already global (order-flow.css) with identical
   font-size/weight/tracking/color — only margin-bottom differs on this
   card (was 8px vs the global 5px; tightened to var(--sp-1) here), so only
   that is overridden, scoped. */
.job-site-card .field-label { margin-bottom: var(--sp-1); }

/* ---------- Section 1: search & pick ---------- */
.search-wrap { position: relative; }
.search-input {
  width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--blue); border-radius: var(--r-md);
  background: #fff; font-size: 14px; color: var(--ink); box-shadow: 0 0 0 3px var(--blue-soft);
  font-family: var(--font);
  /* a11y: card's implicit height (~42px from padding+line-height) is under
     the 44px minimum tap target — bumped explicitly, not silently (see
     forge report pixel table). */
  min-height: 44px;
}
/* Drew, 2026-08-18: this placeholder is ANIMATED — it types itself out through
   a short cycle of address hints to draw the eye to the field, now that the
   match list no longer opens on arrival. The animation is intentionally NOT
   here: it rewrites the `placeholder` ATTRIBUTE from step-job-site.js
   (startPlaceholderAnimation), because CSS cannot animate placeholder text.
   So there is no @keyframes to disable, and `prefers-reduced-motion: reduce`
   is honoured in that JS via matchMedia — same outcome as the CSS convention
   at job-sites.css:110 (reduced motion = no animation, not a slower one), just
   enforced where the animation actually lives. Styling the placeholder here is
   safe; adding a transition to it is not (it would fight a per-character
   rewrite). */
.search-input::placeholder { color: var(--faint); }
.search-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }

.result-list { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 2px; }
.result-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  background: #fff; width: 100%; border-left: none; border-right: none; border-top: none; text-align: left;
  cursor: pointer; font-family: var(--font); min-height: 44px;
  /* The card draws this as a <div> that inherits body's font-size/color;
     making it a real <button> for keyboard a11y pulls in the browser's
     button user-agent defaults (13.33px, black) unless reset explicitly —
     restore the inherited values so nothing downstream (nested spans
     already set their own sizes, but the row itself was measurably off). */
  font-size: 16px; font-weight: 400; color: var(--ink);
}
.result-row:last-child { border-bottom: none; }
.result-row.highlight { background: var(--blue-soft); }
.result-row .r-icon {
  width: 32px; height: 32px; border-radius: var(--r-md); background: var(--field); color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.result-row.highlight .r-icon { background: var(--blue); color: #fff; }
.result-row.highlight .r-icon .icon { stroke: #fff; }
.result-row .r-text { text-align: left; }
.result-row .r-text .r-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.result-row .r-text .r-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.result-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* Hover — absent from the static mockup (a mockup draws no interaction
   states) but required for a real clickable row; same treatment the card's
   own .highlight state already implies visually. */
.result-row:hover:not(.highlight) { background: var(--line-soft); }

/* selected-site-head: BF-live-2026-08-17 — the list-collapse fix's own
   "Change" link back to the match list, sitting next to the "Selected —"
   label. Not in the frozen order-jobsite-r1 mockup (that card never showed
   a collapsed list + return path) — functional necessity, same rationale
   as the hover states above. */
.selected-site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.btn-change-site {
  background: none; border: none; padding: 2px 0; margin: 0; font-family: var(--font); font-size: 12px;
  font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  flex-shrink: 0;
}
.btn-change-site:hover { color: var(--blue-deep); }
.btn-change-site:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.site-card { border: 2px solid var(--blue); border-radius: var(--r-md); background: var(--blue-soft); padding: 16px; }
.site-card .sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.site-card .sc-icon { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.site-card .sc-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.site-card .sc-sub { font-size: 11px; color: var(--blue-deep); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.unit-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-chip {
  min-width: 52px; height: 40px; padding: 0 12px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-family: var(--font);
  /* pixel-round2 §4.2: <div>-in-card -> <button>-in-build inherits Chromium's
     UA button typography (line-height: normal, text-align: center) unless
     stopped — same mechanism as every other fixed control in this program.
     Unitless line-height scales correctly for BOTH this element's 13px and
     .new-chip's 12px (both cards measure the same 1.45 ratio). */
  line-height: 1.45; text-align: left;
  /* a11y bump: card draws 40px chips; real tap target raised to 44px
     (min-height, height left as visual reference) — noted, not silent. */
  min-height: 44px;
}
.unit-chip.selected { border-color: var(--blue); background: var(--blue); color: #fff; }
.unit-chip.new-chip { border-style: dashed; color: var(--muted); font-weight: 600; font-size: 12px; gap: 6px; }
.unit-chip.new-chip.selected { border-style: solid; background: var(--blue); color: #fff; }
.unit-chip.new-chip .icon { width: 13px; height: 13px; }
.unit-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.unit-chip:disabled { opacity: .6; cursor: not-allowed; }
.unit-chip:hover:not(.selected):not(:disabled) { border-color: var(--blue); }

/* [[BF-515]] 2026-08-18 — the unit slot's RESTING state (Drew: *«وقتی بیلدینگ
   انتخاب میشه، باید تو یه محل مشخص، یونیت رو انتخاب کنه … که خیلی خالی
   نمونه»* — the unit must be chosen in one specific place, and that place
   shouldn't sit too empty).

   🔴 STATIC ON PURPOSE — no animation, no @keyframes, nothing borrowed from
   `.skel` below. Drew offered "placeholder or shimmer"; those are not
   interchangeable here. A shimmer states "content is loading", and in this
   state nothing has been requested — the user hasn't picked a site yet — so
   it would animate forever without ever resolving. This file draws real
   shimmers for the real load (`.skel`, used by the unit slot itself while
   GET /{id}/units is in flight); keeping that signal honest is worth more
   than the extra motion here.

   Geometry deliberately matches the `.site-card` that replaces it — same
   radius, same 16px padding baseline — so the swap reads as one box being
   filled in rather than two different boxes trading places. Dashed + --field
   is this file's existing idiom for "not filled in yet" (`.inline-add`,
   `.unit-chip.new-chip`), so no new visual vocabulary is introduced. */
.unit-slot-empty {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--field);
  padding: 20px 16px;
  text-align: center;
}
/* Same type ramp as the real card's `.sc-sub` eyebrow (11px/uppercase/.04em),
   in --muted rather than --blue-deep — the label holds its position across
   both states, only its colour and wording change. */
.unit-slot-empty .use-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
/* Matches `.empty-state .es-sub` — 12px --muted is this card's established
   size for a one-line explanatory sub. --faint would drop it below the
   contrast the rest of the step holds its secondary copy to. */
.unit-slot-empty .use-text {
  font-size: 12px;
  color: var(--muted);
}

/* CR-A116-38 gap reconciliation — `#jsUnitSlot` (step-job-site.js) now wraps
   its content in the shared-contract `.unit-reserved` box (order-flow.css,
   kept verbatim, matches the ratified card) instead of a bare `.nof-reserve`
   + inline geometry. This file's OWN `.site-card` / `.unit-slot-empty`
   already draw a full framed surface (their own border + background) for
   every state this slot renders, so `.unit-reserved`'s own border/
   background/padding would double-frame the box and, via its 12px padding,
   starve their inner content of height inside the fixed 96px envelope.
   Nulled here exactly the way order-flow.css's own `.price-block.problem`
   nulls its own frame when `.nof-error` fills it edge-to-edge — one real
   surface shows through, never two. `:empty` covers the one state that
   renders neither child (no site picked, create-form open) — same invisible
   blank 96px space as the bare wrapper this replaces. overflow-y:auto /
   overflow-x:hidden restore this slot's pre-existing scroll behaviour (the
   >24-unit mini list scrolls inside the fixed box); `.unit-reserved`'s own
   rule sets no overflow, since the static card never needed to scroll. */
.unit-reserved:has(> .site-card),
.unit-reserved:has(> .unit-slot-empty),
.unit-reserved:empty {
  border: none;
  background: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.unit-reserved .site-card,
.unit-reserved .unit-slot-empty {
  height: 100%;
  box-sizing: border-box;
}
/* Loading (shimmer) sub-state — bare `.site-card`, no modifier: a centered
   row, verbatim step-job-site.js's own former inline style. */
.unit-reserved .site-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Picker sub-state (label + chip row) — verbatim step-job-site.js's own
   former inline style; `align-items: normal` restores the default the
   inline version relied on implicitly (no align-items === initial/normal),
   which the bare `.site-card` rule above would otherwise leak in as
   `center` via the cascade. */
.unit-reserved .site-card.uc-picker {
  align-items: normal;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
}
.unit-reserved .unit-slot-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
}

/* [[BF-515]] `.card-body` is a flex column with `gap: var(--sp-2)`, so an
   EMPTY slot still costs a gap on both sides — the blank-query state would
   otherwise sit 16px below the search field while every populated state sits
   8px below it. Both slots legitimately render nothing in some states
   (#jsResultsSlot on a blank query, #jsUnitSlot while the create form is
   open), and `:empty` matches only a truly childless element, which is
   exactly what those branches produce (`return ''`). Taking them out of flow
   keeps one consistent rhythm under the search field in every state. */
#jsResultsSlot:empty,
#jsUnitSlot:empty { display: none; }

/* ---------- Section 2: not found -> create inline ---------- */
/* Scoped under .job-site-card — `.empty-state` is ALSO defined (differently:
   dashed border, --r-lg radius, --field background, flex) by dashboard.css,
   which loads AFTER this file in index.html's global stylesheet list.
   Round-1 fix declared only text-align/padding, so higher specificity here
   won ONLY those two properties — border/border-radius/background/display/
   gap kept falling through to dashboard.css's rule undeclared (pixel-round2
   §4.1: a dashed grey rounded box where the card draws a plain transparent
   block). Every property the card's plain-block state needs is now named
   explicitly here — a scoping override must declare the WHOLE competing
   property set, not the subset that happened to differ at measurement
   time. */
.job-site-card .empty-state {
  text-align: center; padding: 32px 20px;
  border: 0; border-radius: 0; background: transparent; display: block; gap: normal;
}
.job-site-card .empty-state .es-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--field); color: var(--faint);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.job-site-card .empty-state .es-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.job-site-card .empty-state .es-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.btn-create {
  display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; border: none;
  border-radius: var(--r-md); padding: 0 18px; height: 44px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font);
}
.btn-create .icon { stroke: #fff; }
.btn-create:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.places-wrap { position: relative; }
.places-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff; font-size: 14px; color: var(--ink); font-family: var(--font);
  min-height: 44px; /* a11y bump, see .search-input note above */
}
.places-input::placeholder { color: var(--faint); }
.places-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.places-dropdown {
  position: relative; margin-top: 4px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); z-index: 5; overflow: hidden;
}
.places-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; width: 100%; background: #fff; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer; font-family: var(--font); min-height: 44px;
  /* Same button-vs-div reset as .result-row above — only `color` was
     missing here (font-size was already explicit). */
  font-weight: 400; color: var(--ink);
}
.places-row:last-child { border-bottom: none; }
.places-row .icon { color: var(--faint); margin-top: 2px; }
.places-row.highlight { background: var(--blue-soft); }
.places-row .p-main { color: var(--ink); font-weight: 600; }
.places-row .p-sub { color: var(--muted); font-size: 11px; }
.places-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.places-row:hover:not(.highlight) { background: var(--line-soft); }
.lock-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); margin-top: 8px; }
.lock-note .icon { width: 12px; height: 12px; }

.confirmed-tag {
  display: inline-flex; align-items: center; gap: 8px; background: var(--blue-soft); border: 1px solid #BFDBFE;
  color: var(--blue-deep); font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: var(--r-md);
}
.confirmed-tag .icon { color: var(--blue-deep); }

.text-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff;
  font-size: 13px; color: var(--ink); font-family: var(--font);
  min-height: 44px; /* a11y bump, see .search-input note above */
}
.text-input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.text-input::placeholder { color: var(--faint); }
.text-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* [[BF-495]] 2026-08-17 — "Save & use this site" was rendering as a small
   centred pill instead of the card's full-width CTA.
   This rule used to declare ONLY `height: 46px`. Every other property fell
   through to the UNSCOPED `.btn-primary` in client-table.css:33
   (`display: inline-flex; padding: 0 24px`, no width) — which loads LATER in
   index.html's global stylesheet list and so won every same-specificity tie.
   Identical cascade trap to the one order-flow.css:174-185 already documents
   and fixed for Step 1 by scoping `.qq-foot .btn-primary`; Step 2 had only
   ever overridden the height. Fixed the same way — scoped to this card's own
   footer, so client-table.css (shared with every list page, out of scope
   here) is not touched.
   Values are the ratified card's own `.btn-primary`
   (order-jobsite-r1.html:164): width:100%; height:46px; and the flex
   centering it draws. A scoping override must declare the WHOLE competing
   property set, not just the properties that happened to differ — the same
   lesson this file's own `.empty-state` note above records. */
.job-site-card .card-foot .btn-primary {
  width: 100%;
  height: 46px;
  padding: 1px 6px;
  border: none;
  border-radius: var(--r-md);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.job-site-card .card-foot .btn-primary:hover:not(:disabled) { background: var(--blue-deep); }
.job-site-card .card-foot .btn-primary:disabled { cursor: not-allowed; opacity: .6; }
.job-site-card .card-foot .btn-primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Retained for any .btn-primary this card renders OUTSIDE its footer. */
.job-site-card .btn-primary { height: 46px; }
.verify-note { display: flex; gap: 8px; font-size: 11px; color: var(--muted); align-items: flex-start; padding-top: 2px; }
.verify-note .icon { color: var(--faint); margin-top: 1px; }

/* ---------- Section 3: new unit inline ---------- */
.inline-add {
  background: var(--field); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 14px;
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.inline-add .grow { flex: 1; min-width: 120px; }
.btn-add-small {
  height: 40px; padding: 0 16px; border: none; border-radius: var(--r-md); background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font);
  /* a11y bump: card draws 40px; real tap target raised to 44px. */
  min-height: 44px;
}
.btn-add-small .icon { stroke: #fff; width: 14px; height: 14px; }
.btn-add-small:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-add-small:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Section 4: states ---------- */
.skeleton-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.skel {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm); animation: jsc-shimmer 1.6s ease infinite;
}
@keyframes jsc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skel.circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.skel.line1 { width: 70%; height: 12px; margin-bottom: 6px; }
.skel.line2 { width: 45%; height: 10px; }

.danger-box { background: var(--danger-soft); border: 1px solid #FCA5A5; border-radius: var(--r-md); padding: 16px; text-align: center; }
.danger-box .icon { color: var(--danger); width: 24px; height: 24px; margin: 0 auto 10px; }
.danger-box .dt { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.danger-box .ds { font-size: 12px; color: #991B1B; margin-bottom: 14px; }
.btn-retry {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--danger);
  color: var(--danger); font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: var(--r-md);
  cursor: pointer; font-family: var(--font);
  /* a11y bump: card's implicit height (~30px) raised to 44px. */
  min-height: 44px;
}
.btn-retry .icon { width: 13px; height: 13px; stroke: var(--danger); }
.btn-retry:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* ---------- Section 5: phone reflow (~390px, card's own breakpoint) ---------- */
@media (max-width: 480px) {
  .job-site-card { max-width: 100%; }
  .inline-add { flex-direction: column; align-items: stretch; }
  .inline-add .btn-add-small { width: 100%; justify-content: center; }
}