/* brandstudio.css — «استوديو العلامات» and the >4 brand picker (Brand Onboarding 1B).
   Scoped under .bs / .bs-ov / .bpick*. Calm and owner-grade: soft surfaces, one strong action per view,
   motion that settles rather than performs.
   COMPATIBILITY (SUNMI Chromium 62/64): no flexbox `gap` (Chrome 84) — spacing is margins; grids use
   `grid-gap` with `gap` after it; no clamp(), no :focus-visible, no inset, no logical shorthands, no
   backdrop-filter dependency; prefers-reduced-motion (Chrome 74) is mapped onto the same switch the
   data-motion="reduced" attribute uses, so an old device can be told explicitly. */

.bs, .bs-ov {
  --bs-dur-instant: 120ms; --bs-dur-fast: 160ms; --bs-dur-base: 220ms; --bs-dur-panel: 280ms; --bs-dur-success: 520ms;
  --bs-ease-standard: cubic-bezier(.4, 0, .2, 1); --bs-ease-enter: cubic-bezier(0, 0, .2, 1); --bs-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --bs-rise: 6px;
  --bs-line: rgba(28, 26, 23, .09); --bs-line-strong: rgba(28, 26, 23, .16);
  --bs-paper: #fffdf9; --bs-sunk: rgba(28, 26, 23, .035); --bs-ink: #1c1a17; --bs-ink-2: #5b5750;
  --bs-ok: #1f7a4d; --bs-ok-soft: rgba(31, 122, 77, .10); --bs-todo: #7a5408; --bs-todo-soft: rgba(176, 124, 20, .11);
  --bs-r: 16px; --bs-r-sm: 11px;
  --bs-shadow: 0 1px 2px rgba(28, 26, 23, .05), 0 6px 22px -14px rgba(28, 26, 23, .22);
  --bs-shadow-up: 0 2px 4px rgba(28, 26, 23, .06), 0 16px 34px -18px rgba(28, 26, 23, .32);
}
.bs[data-motion="reduced"], .bs-ov[data-motion="reduced"] { --bs-dur-instant: 1ms; --bs-dur-fast: 1ms; --bs-dur-base: 1ms; --bs-dur-panel: 1ms; --bs-dur-success: 1ms; --bs-rise: 0px; }
@media (prefers-reduced-motion: reduce) {
  .bs, .bs-ov, .bpick-layer { --bs-dur-instant: 1ms; --bs-dur-fast: 1ms; --bs-dur-base: 1ms; --bs-dur-panel: 1ms; --bs-dur-success: 1ms; --bs-rise: 0px; }
}

.bs { max-width: 1240px; margin: 0 auto; padding: 4px 4px 48px; color: var(--text, #1c1a17); }
.bs [data-verbatim] { unicode-bidi: plaintext; }
.bs h2, .bs h3 { margin: 0; }
.bs button { font: inherit; }

/* ---- hero + tools ------------------------------------------------------------------------------ */
.bs-hero { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 18px; }
.bs-hero__t { flex: 1 1 360px; margin: 0 0 12px 16px; }
.bs-hero h2 { font-size: var(--ms-page, 24px); font-weight: 800; letter-spacing: -.01em; }
.bs-hero p { margin: 6px 0 0; color: var(--muted, #6b6b6b); font-size: 15px; line-height: 1.7; max-width: 640px; }
.bs-cta { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 12px 20px 12px 22px; margin-bottom: 12px;
  background: var(--bs-ink); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--bs-shadow);
  transition: transform var(--bs-dur-fast) var(--bs-ease-standard); }
.bs-cta svg { margin-left: 8px; }
.bs-cta:hover { transform: translateY(-1px); box-shadow: var(--bs-shadow-up); }
.bs-cta:active { transform: translateY(0) scale(.985); }
.bs-cta:focus, .bs-btn:focus, .bs-card:focus, .bs-sw:focus, .bs-link:focus, .bs-seg button:focus, .bs-sentinel:focus { outline: 2px solid var(--bs-ink, #1c1a17); outline-offset: 2px; }
.bs-sw--custom:focus-within { outline: 2px solid var(--bs-ink, #1c1a17); outline-offset: 2px; }

.bs-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.bs-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; margin: 0 0 10px 12px; }
.bs-search svg { position: absolute; right: 13px; color: var(--muted, #6b6b6b); pointer-events: none; }
.bs-search input { width: 100%; height: 44px; border: 1px solid var(--bs-line-strong); border-radius: 12px; padding: 0 40px 0 14px; background: var(--card, #fff); color: inherit; font: inherit; font-size: 15px;
  }
.bs-search input:focus { outline: none; border-color: var(--bs-ink-2); box-shadow: 0 0 0 3px rgba(28, 26, 23, .08); }
.bs-search--sm { flex: 0 1 240px; margin: 0 0 0 10px; }
.bs-search--sm input { height: 44px; font-size: 14px; }
.bs-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bs-sunk); margin: 0 0 10px; }
.bs-seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; color: var(--muted, #6b6b6b); font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px;
  }
.bs-seg button + button { margin-right: 2px; }
.bs-seg button.is-on { background: var(--card, #fff); color: var(--text, #1c1a17); box-shadow: 0 1px 2px rgba(28, 26, 23, .08); }

/* ---- library grid + cards ---------------------------------------------------------------------- */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); grid-gap: 16px; gap: 16px; }
.bs-card { position: relative; display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--bs-line); border-radius: var(--bs-r);
  padding: 18px 18px 14px; cursor: pointer; box-shadow: var(--bs-shadow); min-height: 196px;
  transition: transform var(--bs-dur-fast) var(--bs-ease-standard); }
.bs-card:hover { transform: translateY(-2px); box-shadow: var(--bs-shadow-up); border-color: var(--bs-line-strong); }
.bs-card:active { transform: translateY(0) scale(.992); }
.bs-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.bs-mark { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: var(--bs-sunk); flex: 0 0 auto; }
.bs-mark--lg { width: 68px; height: 68px; border-radius: 18px; }
.bs-card__n { font-size: 17px; font-weight: 800; line-height: 1.35; word-break: break-word; }
.bs-card__en { color: var(--muted, #6b6b6b); font-size: 13px; margin-top: 2px; min-height: 18px; text-align: right; }
.bs-card__meta { margin-top: 10px; color: var(--bs-ink-2); font-size: 14px; }
.bs-card__ready { margin-top: 4px; color: var(--muted, #6b6b6b); font-size: 13px; }
.bs-card__go { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--text, #1c1a17); }
.bs-card__go svg { transform: scaleX(-1); transition: transform var(--bs-dur-fast) var(--bs-ease-standard); }
.bs-card:hover .bs-card__go svg { transform: scaleX(-1) translateX(3px); }
.bs-card--sk { cursor: default; box-shadow: none; }

.bs-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--bs-sunk); color: var(--bs-ink-2); }
.bs-pill--draft { background: rgba(91, 100, 112, .10); color: #4b5563; }
.bs-pill--created { background: var(--bs-todo-soft); color: var(--bs-todo); }
.bs-pill--ready { background: rgba(31, 111, 139, .10); color: #1f5f78; }
.bs-pill--active { background: var(--bs-ok-soft); color: var(--bs-ok); }
.bs-pill--paused { background: rgba(185, 28, 28, .08); color: #9b1c1c; }

/* ---- skeletons, empty, failure ---------------------------------------------------------------- */
.bs-sk { border-radius: 10px; background: var(--bs-sunk); animation: bsPulse 1.4s ease-in-out infinite; }
.bs-sk--mark { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px; }
.bs-sk--line { height: 14px; margin: 8px 0; width: 70%; }
.bs-sk--line.short { width: 42%; }
.bs-sk--block { height: 220px; border-radius: var(--bs-r); margin-top: 16px; }
@keyframes bsPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bs[data-motion="reduced"] .bs-sk { animation: none; }
.bs-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; border: 1px dashed var(--bs-line-strong); border-radius: var(--bs-r); background: var(--bs-paper); }
.bs-empty h3 { font-size: 17px; }
.bs-empty p { color: var(--muted, #6b6b6b); margin: 6px 0 0; }
.bs-empty--sm { padding: 18px 14px; }
.bs-fail { grid-column: 1 / -1; padding: 22px; border-radius: var(--bs-r); background: rgba(185, 28, 28, .05); border: 1px solid rgba(185, 28, 28, .18); text-align: center; }
.bs-fail p { margin: 0 0 12px; color: #9b1c1c; font-weight: 600; }

/* ---- buttons ------------------------------------------------------------------------------------ */
.bs-btn, .bs-ov .bs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: transform var(--bs-dur-instant) var(--bs-ease-standard), opacity var(--bs-dur-fast) var(--bs-ease-standard); }
.bs-btn svg { margin-left: 6px; }
.bs-btn:active { transform: scale(.985); }
.bs-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.bs-btn--primary { background: var(--bs-ink); color: #fff; }
.bs-btn--primary:hover { background: #33302b; }
.bs-btn--soft { background: var(--bs-sunk); color: var(--text, #1c1a17); border-color: var(--bs-line); }
.bs-btn--soft:hover { background: rgba(28, 26, 23, .07); }
.bs-btn--ghost { background: transparent; color: var(--bs-ink-2); border-color: var(--bs-line-strong); }
.bs-btn--ghost:hover { background: var(--bs-sunk); }
.bs-btn.is-busy { opacity: .7; }
.bs-link { border: 0; background: none; padding: 4px 2px; min-height: 44px; color: var(--bs-ink, #1c1a17); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 95, 120, .35); }
.bs-link--danger { color: #9b1c1c; text-decoration-color: rgba(155, 28, 28, .35); }
.bs-x { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--bs-sunk); color: var(--bs-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bs-x:hover { background: rgba(28, 26, 23, .08); }

/* ---- overlay ------------------------------------------------------------------------------------ */
.bs-ov { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* the app's confirm dialog (riskConfirm → .vpop) and toasts sit above a studio dialog while one is open — a «discard?»
   asked from inside the flow must never open behind it; the owner-only canary badge steps aside */
body.bs-ov-open .vpop { z-index: 9350; }
body.bs-ov-open .toastx { z-index: 9360; }
body.bs-ov-open #canaryBadge { display: none; }
.bs-ov__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 18, 15, .42); opacity: 0; transition: opacity var(--bs-dur-panel) var(--bs-ease-enter); }
.bs-ov__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; background: var(--card, #fff); color: var(--text, #1c1a17);
  border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(20, 18, 15, .45); opacity: 0; transform: translateY(var(--bs-rise)) scale(.985);
  transition: opacity var(--bs-dur-panel) var(--bs-ease-enter), transform var(--bs-dur-panel) var(--bs-ease-enter); -webkit-overflow-scrolling: touch; }
.bs-ov--wide .bs-ov__panel { max-width: 1120px; height: calc(100vh - 40px); display: flex; flex-direction: column; }
.bs-ov.is-in .bs-ov__scrim { opacity: 1; }
.bs-ov.is-in .bs-ov__panel { opacity: 1; transform: none; }
.bs-ov.is-out .bs-ov__scrim { opacity: 0; transition-duration: var(--bs-dur-fast); transition-timing-function: var(--bs-ease-exit); }
.bs-ov.is-out .bs-ov__panel { opacity: 0; transform: translateY(var(--bs-rise)); transition-duration: var(--bs-dur-fast); transition-timing-function: var(--bs-ease-exit); }

.bs-flow { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bs-flow__bar { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bs-line); }
.bs-flow__bar h2 { font-size: 18px; font-weight: 800; margin-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-flow__bar .bs-x { margin-right: auto; }
.bs-flow__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 22px 8px; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.bs-flow__foot { display: flex; justify-content: flex-end; align-items: center; padding: 14px 22px 18px; border-top: 1px solid var(--bs-line); }
.bs-flow__foot .bs-btn + .bs-btn { margin-right: 10px; }
.bs-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: bsstep; }
.bs-steps li { counter-increment: bsstep; display: flex; align-items: center; color: var(--muted, #6b6b6b); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.bs-steps li + li { margin-right: 18px; }
.bs-steps li::before { content: counter(bsstep); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; margin-left: 7px;
  background: var(--bs-sunk); color: var(--bs-ink-2); font-size: 12.5px; }
.bs-steps li.is-on { color: var(--text, #1c1a17); }
.bs-steps li.is-on::before { background: var(--bs-ink); color: #fff; }
.bs-steps li.is-done::before { content: '✓'; background: var(--bs-ok-soft); color: var(--bs-ok); }
.bs-stepview { flex: 1 0 auto; display: flex; flex-direction: column; opacity: 0; transform: translateY(var(--bs-rise)); transition: opacity var(--bs-dur-base) var(--bs-ease-enter), transform var(--bs-dur-base) var(--bs-ease-enter); }
/* the step's own actions sit at the bottom of the sheet, where a full-height dialog keeps them (never mid-page) */
.bs-stepview > .bs-flow__foot { margin-top: auto; }
.bs-stepview.is-in { opacity: 1; transform: none; }

/* ---- step 1: identity form + live stage ---------------------------------------------------------- */
.bs-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-gap: 28px; gap: 28px; align-items: start; }
.bs-form { min-width: 0; }
.bs-field { display: flex; flex-direction: column; margin: 0 0 18px; }
.bs-field label, .bs-label { font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.bs-field em, .bs-label em { font-style: normal; font-weight: 600; color: var(--muted, #6b6b6b); font-size: 12.5px; margin-right: 6px; }
.bs-field input, .bs-field select, .bs-inv input { height: 46px; border: 1px solid var(--bs-line-strong); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15.5px; background: var(--card, #fff); color: inherit;
  }
.bs-field input:focus, .bs-field select:focus, .bs-inv input:focus { outline: none; border-color: var(--bs-ink-2); box-shadow: 0 0 0 3px rgba(28, 26, 23, .08); }
.bs-field small { color: var(--muted, #6b6b6b); font-size: 12.5px; margin-top: 6px; line-height: 1.6; }
.bs-swatches { display: flex; flex-wrap: wrap; align-items: center; }
.bs-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; margin: 0 0 8px 8px; cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform var(--bs-dur-fast) var(--bs-ease-standard); }
.bs-sw:hover { transform: scale(1.06); }
.bs-sw.is-on { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--bs-ink); }
.bs-sw--custom { overflow: hidden; background: #8a8f98; background: conic-gradient(#e11d48, #f59e0b, #16a34a, #0284c7, #7c3aed, #e11d48); display: inline-block; }
.bs-sw--custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.bs-logo { display: flex; flex-wrap: wrap; align-items: center; }
.bs-logo .bs-btn { margin-left: 10px; }
.bs-logo small { flex-basis: 100%; color: var(--muted, #6b6b6b); font-size: 12.5px; margin-top: 8px; }
.bs-form__err { display: block; margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(185, 28, 28, .06); color: #9b1c1c; font-weight: 600; font-size: 13.5px; }
.bs-form__err[hidden] { display: none; }

.bs-stage { position: -webkit-sticky; position: sticky; top: 0; background: var(--bs-paper); border: 1px solid var(--bs-line); border-radius: 18px; padding: 16px; }
.bs-stage__badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--bs-ink-2); background: var(--bs-sunk); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }
.bs-stage__set > * + * { margin-top: 14px; }
.bs-stage.is-settle .bs-stage__set { animation: bsSettle var(--bs-dur-base) var(--bs-ease-enter); }
@keyframes bsSettle { from { opacity: .72; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.bs[data-motion="reduced"] .bs-stage.is-settle .bs-stage__set, .bs-ov[data-motion="reduced"] .bs-stage.is-settle .bs-stage__set { animation: none; }
.bs-stage__cap { display: block; font-size: 12px; font-weight: 700; color: var(--muted, #6b6b6b); margin-bottom: 6px; }
.bs-mini-card { display: flex; align-items: center; background: var(--card, #fff); border: 1px solid var(--bs-line); border-radius: 14px; padding: 12px; }
.bs-mini-card .bs-mark { width: 44px; height: 44px; border-radius: 12px; margin-left: 12px; }
.bs-mini-card > div { flex: 1 1 auto; min-width: 0; }
.bs-mini-card b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-mini-card i { display: block; font-style: normal; color: var(--muted, #6b6b6b); font-size: 12.5px; text-align: right; }
.bs-mini-pos { display: flex; padding: 6px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--bs-line); overflow: hidden; }
.bs-mini-pos__tab { padding: 8px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--bs-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.bs-mini-pos__tab + .bs-mini-pos__tab { margin-right: 4px; }
.bs-mini-pos__tab.is-on { background: var(--st-accent, #1f6f8b); color: var(--st-fg, #fff); box-shadow: 0 4px 11px -6px var(--st-accent, #1f6f8b); }
.bs-mini-rcpt { background: #fff; color: #111; border: 1px solid var(--bs-line); border-radius: 6px; padding: 14px 16px; text-align: center; font-family: 'Courier New', monospace, var(--font, sans-serif); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.bs-mini-rcpt img { max-width: 120px; max-height: 56px; object-fit: contain; display: block; margin: 0 auto 8px; filter: grayscale(1); }
.bs-mini-rcpt b { display: block; font-family: inherit; font-size: 15px; }
.bs-mini-rcpt span { display: block; font-size: 12.5px; color: #444; margin-top: 2px; }
.bs-mini-rcpt hr { border: 0; border-top: 1px dashed #bbb; margin: 10px 0; }
.bs-mini-rcpt small { display: block; font-size: 11.5px; color: #555; line-height: 1.6; }

/* ---- step 2: embedded Product Studio -------------------------------------------------------------- */
.bs-ps { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 420px; }
.bs-ps__h { display: flex; align-items: flex-start; margin-bottom: 14px; }
.bs-ps__h .bs-mark { width: 44px; height: 44px; margin-left: 12px; }
.bs-ps__h p { margin: 4px 0 0; color: var(--muted, #6b6b6b); font-size: 14px; line-height: 1.7; }
.bs-ps__frame { position: relative; flex: 1 1 auto; min-height: 460px; border: 1px solid var(--bs-line); border-radius: 14px; overflow: hidden; background: var(--bs-paper); }
.bs-ps__frame iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.bs-ps__load { position: absolute; top: 0; right: 0; left: 0; padding: 18px; z-index: 1; background: var(--bs-paper); transition: opacity var(--bs-dur-base) var(--bs-ease-exit); }
.bs-ps__load.is-gone { opacity: 0; pointer-events: none; }

/* ---- step 3: created ------------------------------------------------------------------------------ */
.bs-done { text-align: center; max-width: 620px; margin: 18px auto 10px; }
.bs-done h3 { font-size: 22px; font-weight: 800; margin-top: 10px; }
.bs-done > p { color: var(--bs-ink-2); margin: 6px 0 18px; font-size: 15px; }
.bs-done__mark { display: block; margin: 0 auto; }
.bs-done__ring { stroke: var(--bs-ok); opacity: .25; }
.bs-done__tick { stroke: var(--bs-ok); stroke-dasharray: 36; stroke-dashoffset: 36; animation: bsTick var(--bs-dur-success) var(--bs-ease-enter) 80ms forwards; }
@keyframes bsTick { to { stroke-dashoffset: 0; } }
.bs-ov[data-motion="reduced"] .bs-done__tick { animation: none; stroke-dashoffset: 0; }
.bs-done__card { max-width: 380px; margin: 0 auto 20px; text-align: right; }
.bs-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 12px; gap: 12px; text-align: right; }
.bs-next__c { border: 1px solid var(--bs-line); border-radius: 14px; padding: 14px; background: var(--bs-paper); opacity: 0; transform: translateY(var(--bs-rise));
  transition: opacity var(--bs-dur-base) var(--bs-ease-enter), transform var(--bs-dur-base) var(--bs-ease-enter); }
.bs-stepview.is-in .bs-next__c { opacity: 1; transform: none; }
.bs-stepview.is-in .bs-next__c:nth-child(2) { transition-delay: 30ms; }
.bs-stepview.is-in .bs-next__c:nth-child(3) { transition-delay: 60ms; }
.bs-next__c b { display: block; font-size: 14.5px; }
.bs-next__c span { display: block; color: var(--muted, #6b6b6b); font-size: 13px; margin-top: 4px; line-height: 1.6; }

/* ---- control centre ------------------------------------------------------------------------------- */
.bs-crumb { margin: 0 0 10px; }
.bs-crumb .bs-link { text-decoration: none; color: var(--bs-ink-2); }
.bs-crumb .bs-link svg { margin-left: 4px; }
.bs-head { display: flex; flex-wrap: wrap; align-items: center; background: var(--card, #fff); border: 1px solid var(--bs-line); border-radius: 20px; padding: 18px; box-shadow: var(--bs-shadow); position: relative; overflow: hidden; }
.bs-head::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--st-accent, var(--bs-ink)); opacity: .85; }
.bs-head .bs-mark--lg { margin-left: 16px; }
.bs-head__t { flex: 1 1 220px; min-width: 0; }
.bs-head__t h2 { font-size: 22px; font-weight: 800; word-break: break-word; }
.bs-head__en { color: var(--muted, #6b6b6b); font-size: 14px; margin: 2px 0 8px; text-align: right; }
.bs-head__t .bs-pill { margin-top: 6px; }
.bs-head__act { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8px; }
.bs-head__hint { color: var(--muted, #6b6b6b); font-size: 12.5px; margin-top: 6px; }
.bs-head--sk { height: 104px; }
.bs-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bs-sunk); color: var(--bs-ink-2); font-size: 14px; }
.bs-sec { margin-top: 16px; background: var(--card, #fff); border: 1px solid var(--bs-line); border-radius: var(--bs-r); padding: 18px; opacity: 0; transform: translateY(var(--bs-rise));
  transition: opacity var(--bs-dur-base) var(--bs-ease-enter), transform var(--bs-dur-base) var(--bs-ease-enter); }
.bs-sec.is-in { opacity: 1; transform: none; }
.bs-sec--quiet { background: transparent; border-style: dashed; }
.bs-sec__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bs-sec__h h3 { font-size: var(--ms-section, 18px); font-weight: 800; flex: 1 1 auto; margin-left: 10px; }
.bs-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--bs-sunk); font-size: 12.5px; font-weight: 700; margin-right: 6px; vertical-align: middle; }
.bs-sum { font-size: 13.5px; font-weight: 700; color: var(--bs-todo); background: var(--bs-todo-soft); border-radius: 999px; padding: 5px 11px; }
.bs-sum.is-ok { color: var(--bs-ok); background: var(--bs-ok-soft); }
.bs-fine { color: var(--muted, #6b6b6b); font-size: 13px; line-height: 1.7; margin: 10px 0 0; }
.bs-brs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 12px; gap: 12px; }
.bs-br { border: 1px solid var(--bs-line); border-radius: 14px; padding: 14px; background: var(--bs-paper); }
.bs-br[hidden] { display: none; }
.bs-br__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bs-br__h b { font-size: 15.5px; margin-left: 8px; word-break: break-word; }
.bs-br__more { margin-top: 8px; font-size: 13px; color: var(--bs-ink-2); }
.bs-br__more summary { cursor: pointer; font-weight: 700; color: var(--muted, #6b6b6b); }
.bs-br__more p { margin: 6px 0 0; line-height: 1.7; }
.bs-checks { list-style: none; margin: 0; padding: 0; }
.bs-checks li { display: flex; flex-wrap: wrap; align-items: center; padding: 7px 0; border-top: 1px solid var(--bs-line); font-size: 14px; }
.bs-checks li:first-child { border-top: 0; }
.bs-chk { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; margin-left: 9px; flex: 0 0 auto; }
.bs-checks li.is-ok .bs-chk { background: var(--bs-ok-soft); color: var(--bs-ok); }
.bs-checks li.is-todo .bs-chk { background: var(--bs-todo-soft); color: var(--bs-todo); }
.bs-chk__k { font-weight: 700; margin-left: 8px; }
.bs-chk__v { color: var(--bs-ink-2); flex: 1 1 auto; }
.bs-checks li .bs-link { margin-right: auto; }
.bs-checks--brand li { padding: 9px 0; }
.bs-prods { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 24px; }
.bs-prods li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--bs-line); break-inside: avoid; font-size: 14px; }
.bs-prods b { font-weight: 700; white-space: nowrap; margin-right: 10px; }
.bs-idgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.bs-idedit, .bs-logoedit, .bs-inv, .bs-legal, .bs-rcpt-pv { border: 1px solid var(--bs-line); border-radius: 14px; padding: 14px; background: var(--bs-paper); min-width: 0; }
.bs-logoedit { display: flex; align-items: flex-start; }
.bs-logoedit .bs-mark--lg { margin-left: 14px; }
.bs-row { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.bs-row > * { margin: 0 0 6px 10px; }
.bs-inv input { width: 120px; text-transform: uppercase; letter-spacing: .06em; }
.bs-code { font-size: 20px; font-weight: 800; letter-spacing: .08em; margin-top: 8px; }
.bs-legal > div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--bs-line); font-size: 14px; }
.bs-legal > div:first-child { border-top: 0; }
.bs-legal span { color: var(--muted, #6b6b6b); margin-left: 12px; }
.bs-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 10px; gap: 10px; margin-top: 10px; }
.bs-opt { border: 1px solid var(--bs-line); border-radius: 12px; padding: 12px; background: var(--bs-paper); }
.bs-opt b { display: block; font-size: 14.5px; }
.bs-opt__s { display: block; color: var(--muted, #6b6b6b); font-size: 12.5px; margin-top: 3px; }
.bs-prog { color: var(--bs-ink-2); font-size: 13px; }

/* ---- dialogs ---------------------------------------------------------------------------------------- */
.bs-dlg { padding: 20px 22px 18px; }
.bs-dlg__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bs-dlg__h h2 { font-size: 18px; font-weight: 800; margin-left: 12px; }
.bs-dlg__foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.bs-dlg__foot .bs-btn + .bs-btn { margin-right: 10px; }
.bs-adv { border: 1px solid var(--bs-line); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.bs-adv summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--bs-ink-2); }
.bs-adv .bs-field { margin: 12px 0 2px; }

/* ---- responsive ------------------------------------------------------------------------------------ */
@media (max-width: 1240px) { .bs-id { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
@media (max-width: 900px) {
  .bs-id { grid-template-columns: minmax(0, 1fr); }
  .bs-stage { position: static; }
  .bs-idgrid { grid-template-columns: minmax(0, 1fr); }
  .bs-next { grid-template-columns: minmax(0, 1fr); }
  .bs-steps li span, .bs-steps li { font-size: 12.5px; }
}
@media (max-width: 560px) {
  .bs-ov { padding: 0; align-items: flex-end; }
  .bs-ov__panel { max-height: 100%; border-radius: 18px 18px 0 0; }
  .bs-ov--wide .bs-ov__panel { height: 100vh; border-radius: 0; }
  .bs-flow__bar { flex-wrap: wrap; padding: 12px 14px; }
  .bs-flow__bar h2 { flex: 1 1 auto; font-size: 16px; }
  .bs-steps { order: 3; flex-basis: 100%; margin-top: 10px; }
  .bs-steps li + li { margin-right: 12px; }
  .bs-flow__body { padding: 16px 14px 8px; }
  .bs-flow__foot { padding: 12px 14px 16px; }
  .bs-flow__foot .bs-btn { flex: 1 1 auto; }
  .bs-hero__t { margin-left: 0; }
  .bs-cta { width: 100%; justify-content: center; }
  .bs-search { max-width: none; margin-left: 0; }
  .bs-grid { grid-template-columns: minmax(0, 1fr); }
  .bs-brs { grid-template-columns: minmax(0, 1fr); }
  .bs-head .bs-mark--lg { width: 56px; height: 56px; }
  .bs-head__act { width: 100%; align-items: stretch; }
  .bs-head__act .bs-btn { width: 100%; }
  .bs-sec__h .bs-btn { margin-top: 8px; }
  .bs-search--sm { flex-basis: 100%; margin: 8px 0 0; max-width: none; }
  .bs-ps__frame { min-height: 380px; }
}

/* ═══ >4 BRAND PICKER (brandpicker.js) ═══════════════════════════════════════════════════════════════ */
.bpick { display: inline-flex; align-items: center; max-width: 260px; height: 44px; padding: 0 10px 0 12px; border-radius: 11px; border: 1px solid var(--border, rgba(0, 0, 0, .12));
  background: var(--surface, #fff); color: var(--text, #1c1a17); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-1, none); }
.bpick:focus { outline: 2px solid var(--accent, #1f6f8b); outline-offset: 2px; }
.bpick__mk { width: 26px; height: 26px; border-radius: 8px; object-fit: contain; margin-left: 8px; flex: 0 0 auto; background: rgba(0, 0, 0, .04); }
.bpick__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bpick__chev { margin-right: 6px; flex: 0 0 auto; opacity: .7; }
body.brandless .bpick { display: none; }
.bpick-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9400; --bs-dur-fast: 160ms; --bs-dur-panel: 280ms; --bs-ease-enter: cubic-bezier(0, 0, .2, 1); }
.bpick-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 18, 15, .38); opacity: 0; transition: opacity var(--bs-dur-fast) linear; }
.bpick-layer.is-sheet.is-open .bpick-scrim { opacity: 1; }
.bpick-panel { position: absolute; background: var(--card, #fff); color: var(--text, #1c1a17); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 18px 44px -18px rgba(20, 18, 15, .42); display: flex; flex-direction: column; overflow: hidden; }
.bpick-layer.is-pop .bpick-panel { border-radius: 14px; max-height: 420px; opacity: 0; transform: translateY(-4px); transition: opacity var(--bs-dur-fast) var(--bs-ease-enter), transform var(--bs-dur-fast) var(--bs-ease-enter); }
.bpick-layer.is-sheet .bpick-panel { right: 0; left: 0; bottom: 0; border-radius: 18px 18px 0 0; max-height: 72vh; transform: translateY(100%); transition: transform var(--bs-dur-panel) var(--bs-ease-enter); }
.bpick-layer.is-open .bpick-panel { opacity: 1; transform: none; }
.bpick-grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .18); margin: 10px auto 2px; }
.bpick-search { padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.bpick-input { width: 100%; height: 42px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--surface, #fff); color: inherit; }
.bpick-input:focus { outline: none; border-color: rgba(0, 0, 0, .35); }
.bpick-list { list-style: none; margin: 0; padding: 6px; overflow: auto; -webkit-overflow-scrolling: touch; }
.bpick-opt { display: flex; align-items: center; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.bpick-opt.is-active { background: rgba(0, 0, 0, .09); box-shadow: inset 0 0 0 2px rgba(28, 26, 23, .55); }
.bpick-opt.is-current { font-weight: 800; }
.bpick-opt .bpick__mk { width: 32px; height: 32px; margin-left: 10px; }
.bpick-opt__n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpick-opt__ok { margin-right: 8px; color: #1f7a4d; }
.bpick-empty { padding: 18px; text-align: center; color: var(--muted, #6b6b6b); }
.bpick-empty[hidden] { display: none; }
/* the English UI (dir=ltr): the same gaps, on the other side (physical margins — the Chromium 62 floor) */
[dir="ltr"] .bpick { padding: 0 12px 0 10px; }
[dir="ltr"] .bpick__mk { margin-left: 0; margin-right: 8px; }
[dir="ltr"] .bpick__chev { margin-right: 0; margin-left: 6px; }
.bpick-layer[dir="ltr"] .bpick-opt .bpick__mk { margin-left: 0; margin-right: 10px; }
.bpick-layer[dir="ltr"] .bpick-opt__ok { margin-right: 0; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .bpick-panel { transition: none !important; } }
html[data-motion="reduced"] .bpick-panel, .bpick-layer[data-motion="reduced"] .bpick-panel, .bpick-layer[data-motion="reduced"] .bpick-scrim { transition: none !important; }

/* the unified POS «more brands» trigger (>4 brands) — same face as the shell picker */
.posbrand-more { display: inline-flex; align-items: center; }

/* ---- accessibility helpers (Brand Studio 1B review) --------------------------------------------- */
.bs-motion.is-on { text-decoration: none; background: var(--bs-sunk); border-radius: 9px; padding: 4px 10px; }
/* the tick is decoration: it lives in an aria-hidden span, so the control is still read «حركة أقل» (pressed / not) */
.bs-motion__ok { display: none; }
.bs-motion.is-on .bs-motion__ok { display: inline; }
.bs-motion--sys { color: var(--muted, #6b6b6b); font-size: 13px; }
.bs-sw { width: 44px; height: 44px; }
/* list-item keeps the open/closed triangle (Chromium draws the marker only for list-item); padding makes the 44px */
.bs-adv summary, .bs-br__more summary { display: list-item; min-height: 44px; box-sizing: border-box; padding: 12px 0; line-height: 20px; cursor: pointer; }
.bpick:focus { outline-color: #1c1a17; }
.bs-flow__body { scroll-padding-bottom: 96px; }
/* visually hidden, still read and focusable where asked (step headings, live regions) */
.bs-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bs-sr:focus { outline: none; }
/* the file input stays in the page (a real button opens it) but is never seen or tabbed to */
.bs-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.bs-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.bs-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bs-note--sm { font-size: 13.5px; margin-top: 10px; }
.bs-legal small { display: block; color: var(--muted, #6b6b6b); font-size: 12.5px; margin-top: 2px; }
.bs-motion { margin-right: auto; }
.bs-ov[data-motion="reduced"] .bs-sk { animation: none; }
@media (prefers-reduced-motion: reduce) { .bs-sk { animation: none; } }
/* phones: the sheet is the viewport the browser actually shows (100vh counts a hidden URL bar), and the step's
   actions stay on screen above the home indicator */
@media (max-width: 560px) {
  .bs-ov--wide .bs-ov__panel { height: 100%; max-height: 100%; }
  .bs-stepview > .bs-flow__foot { position: -webkit-sticky; position: sticky; bottom: 0; background: var(--card, #fff); z-index: 2; padding-bottom: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* 1B.1 — «حذف الفرع» sits at the end of the branch card, away from its checks */
.bs-row--end { justify-content: flex-end; }