/* Vakansiya yaratish — bosqichma-bosqich onboarding uslubida (brend ranglari/shriftlarida). */
.wiz{display:grid;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r24);box-shadow:var(--hair);overflow:hidden}
.wiz-main{padding:44px 40px;display:flex;flex-direction:column;gap:28px;min-height:560px}
.wiz-top{display:flex;align-items:center;gap:10px}
.wiz-top .wordmark{font-size:18px}
.wiz-progress{display:flex;gap:6px}
.wiz-progress span{height:5px;flex:1;border-radius:99px;background:var(--line);transition:background-color .15s}
.wiz-progress span.done{background:var(--forest)}
.wiz-progress span.active{background:var(--green)}
/* No-JS fallback: every step stays visible (one long form, still fully submittable).
   Once kabinet-wizard.js runs it adds .js-ready and switches to one-step-at-a-time. */
.wiz-step{display:flex;flex-direction:column;gap:22px}
.wiz.js-ready .wiz-step{display:none;flex:1}
.wiz.js-ready .wiz-step.active{display:flex}
.wiz-step h2{font:800 32px/1.2 var(--sora);letter-spacing:-.015em;max-width:16ch}

.wiz-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:480px){.wiz-cards{grid-template-columns:repeat(3,1fr)}}
.wiz-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px 12px;min-height:112px;background:var(--mist);border:1.5px solid var(--line);border-radius:var(--r16);cursor:pointer;font:700 14px/1.25 var(--manrope);color:var(--forest);-webkit-tap-highlight-color:transparent;transition:border-color .12s,background-color .12s}
.wiz-card:hover{border-color:var(--sage)}
.wiz-card .ico{width:24px;height:24px;color:var(--ink2)}
.wiz-card.is-sel{background:var(--forest);border-color:var(--forest);color:var(--white)}
.wiz-card.is-sel .ico{color:var(--green)}
.wiz-card .chk{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:99px;background:var(--green);color:var(--forest);display:none;align-items:center;justify-content:center}
.wiz-card .chk svg{width:12px;height:12px;stroke-width:3}
.wiz-card.is-sel .chk{display:flex}

/* Custom-amount fallback: a quiet link that reveals the field, not a permanent extra input
   sitting under every card grid (that's not in the reference and reads as an afterthought). */
.wiz-alt{background:none;border:0;padding:0;color:var(--ink2);font:700 13px/1 var(--manrope);text-decoration:underline;cursor:pointer;align-self:flex-start}
.wiz-alt-field{display:none}
.wiz-alt-field.is-open{display:flex}

.wiz-nav{display:flex;align-items:center;gap:12px;margin-top:auto}
.wiz-nav [data-wiz="next"]{margin-left:auto}

.wiz-side{display:none}
@media (min-width:760px){
  .wiz{grid-template-columns:1fr 300px}
  .wiz-side{display:flex;flex-direction:column;justify-content:space-between;padding:36px 30px;background:var(--forest);color:var(--white)}
  .wiz-side .art{align-self:center;margin:auto 0}
  .wiz-side p{color:var(--green);font:700 15px/1.4 var(--manrope);max-width:20ch}
}