/* stepper.css — the step rail of the booking wizard (wizard.html) and the business sign-up
   (site_register.html): who you are booking with / what you are building at the top, how far
   along you are, and each step with what was chosen in it (done steps can be reopened).
   On narrow screens the rail shrinks to one line: the progress segments and the current step. */
.sx-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.sx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-logo { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; font-size: 19px; font-weight: 800;
  color: var(--br); background: var(--bs); }
.sx-logo img { width: 100%; height: 100%; object-fit: cover; }
.sx-brand-tx { min-width: 0; display: grid; gap: 1px; }
.sx-brand-tx b { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-brand-tx small { font-size: 12px; color: var(--mu); }

/* how far along */
.sx-prog { display: grid; gap: 8px; }
.sx-prog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--mu); }
.sx-prog-h b { font-size: 13px; color: var(--ink); }
.sx-now { display: none; }
.sx-bar { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--br) 13%, var(--sf)); }
.sx-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .5s cubic-bezier(.3, .8, .3, 1); background: var(--br); }

/* the steps */
.sx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sx-step { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--mu);
  transition: background .15s, box-shadow .15s; outline: none; }
.sx-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 24px; top: 43px; bottom: -7px; width: 2px; border-radius: 2px; background: var(--ln); }
.sx-step.is-done:not(:last-child)::before { background: var(--br); }
.sx-dot { position: relative; z-index: 1; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  font-size: 12.5px; font-weight: 800; color: var(--mu); background: var(--sf); border: 2px solid var(--ln); transition: background .2s, border-color .2s, box-shadow .2s; }
.sx-tx { display: grid; gap: 1px; min-width: 0; flex: 1; padding-top: 4px; }
.sx-t { font-size: 13.5px; font-weight: 700; color: inherit; }
.sx-v { font-size: 12px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-v:empty { display: none; }
.sx-step.is-done { color: var(--ink); }
/* new-ui-ux: done = blue with a check, current = saffron, the rest grey */
.sx-step.is-done .sx-dot { color: var(--ob, #fff); background: var(--br); border-color: var(--br); }
.sx-step.is-cur { color: var(--ink); background: var(--sf); box-shadow: 0 10px 26px -18px rgba(15, 31, 58, .5), inset 0 0 0 1px var(--ln); }
.sx-step.is-cur .sx-dot { color: #1B1204; background: var(--ac); border-color: var(--ac); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 22%, transparent); }
.sx-step.is-cur .sx-t { color: var(--ink); font-weight: 800; }
.sx-step.is-link { cursor: pointer; }
.sx-step.is-link::after { content: "تغییر"; align-self: center; font-size: 11.5px; font-weight: 700; color: var(--br); opacity: 0; transition: opacity .15s; }
.sx-step.is-link:hover, .sx-step.is-link:focus-visible { background: color-mix(in srgb, var(--br) 6%, transparent); }
.sx-step.is-link:hover::after, .sx-step.is-link:focus-visible::after { opacity: 1; }
.sx-step.is-link:focus-visible { box-shadow: inset 0 0 0 2px var(--br); }

/* narrow: one line of progress segments + the current step's name */
@media (max-width: 900px) {
  .sx-rail { gap: 10px; }
  .sx-prog { order: 1; gap: 6px; }
  .sx-pct { display: none; }
  .sx-now { display: inline; color: var(--ink); font-weight: 800; }
  .sx-bar { display: none; }
  .sx-steps { order: 2; display: flex; gap: 4px; }
  .sx-step { flex: 1; height: 5px; padding: 0; border-radius: 999px; background: var(--ln); box-shadow: none !important; }
  .sx-step > *, .sx-step::before, .sx-step::after { display: none !important; }
  .sx-step.is-done { background: var(--br); }
  .sx-step.is-cur { background: var(--ac); }
}
@media (prefers-reduced-motion: reduce) { .sx-bar i { transition: none; } }