/* ==========================================================================
   post-job-wizard-step1.html — Шаг 1 из 9: должность, количество, город (Figma 6:1297)
   ========================================================================== */

.wizard-body {
  background: #fff;
  padding-bottom: 6.5rem; /* room for sticky footer */
}

/* ---------- Header extras (shared pattern with other wizard steps) ---------- */

.header-help {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ri-ink);
}

.header-help img { width: 22px; height: auto; opacity: .85; }
.header-help span { display: flex; flex-direction: column; line-height: 1.2; }
.header-help strong { font-size: .85rem; font-weight: 500; color: var(--ri-ink); }
.header-help small { font-size: .72rem; color: var(--ri-text-mute-2); font-weight: 300; }

.site-header .btn-login { font-size: .82rem; gap: .5rem; }

/* ---------- Page intro ---------- */

.wizard-page-lead {
  color: var(--ri-text-mute-2);
  font-size: .95rem;
  margin: 0 0 .4rem;
}

.wizard-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #2e313b;
  margin: 0 0 2rem;
}

/* ---------- Step tracker (left column) ---------- */

.wizard-steps {
  margin: 0 0 1.5rem;
  padding: 0;
  border-left: 2px solid var(--ri-line);
}

.wizard-steps__item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0 .6rem 1.1rem;
  margin-left: -2px;
  border-left: 2px solid var(--ri-line);
}

.wizard-steps__item:last-child {
  border-left-color: transparent;
}

.wizard-steps__item div { display: flex; flex-direction: column; line-height: 1.3; }
.wizard-steps__item strong { font-size: .8rem; font-weight: 400; color: #676766; }
.wizard-steps__item span { font-size: .72rem; color: #8e9098; font-weight: 300; }

.wizard-steps__icon,
.wizard-steps__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  background: #f4f5f7;
}

.wizard-steps__icon img { width: 16px; height: auto; opacity: .55; }

.wizard-steps__num {
  font-size: .8rem;
  font-weight: 500;
  color: #9a9c9f;
}

.wizard-steps__item.is-active {
  border-left-color: var(--ri-gold);
}

.wizard-steps__item.is-active strong { color: var(--ri-ink); font-weight: 600; }
.wizard-steps__item.is-active span { color: var(--ri-text-muted); }
.wizard-steps__item.is-active .wizard-steps__num {
  background: var(--ri-gold);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.wizard-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  background: #fdf7e8;
  border: 1px solid #fbf2e2;
  border-radius: var(--ri-radius-sm);
  padding: 1.1rem 1.2rem;
}

.wizard-promo img { width: 26px; height: auto; }
.wizard-promo p { margin: 0; font-size: .78rem; color: #837a63; line-height: 1.5; }
.wizard-promo strong { display: block; color: #9e9d9c; font-weight: 400; font-size: .78rem; }

/* ---------- Form blocks ---------- */

.wizard-step-label {
  color: var(--ri-gold-light);
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: .4rem;
}

.wizard-block {
  background: #fefefe;
  border: 1px solid #f6f6f7;
  border-radius: var(--ri-radius-md);
  padding: 1.5rem 1.7rem;
  margin-bottom: 1.2rem;
}

.wizard-block__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #505151;
  margin: 0 0 .3rem;
}

.wizard-block__lead {
  font-size: .85rem;
  color: #979aa4;
  margin: 0 0 1.2rem;
}

/* ---------- Role grid (step 1) ---------- */

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-bottom: 1.3rem;
}

.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #fdfdfd;
  border: 1px solid #f1f2f4;
  border-radius: var(--ri-radius-sm);
  padding: 1.2rem .6rem;
  font-size: .8rem;
  color: #6c6d72;
  text-align: center;
}

.role-card__icon { width: 30px; height: auto; }

.role-card.is-selected {
  background: #fdf5ed;
  border-color: #f7cfa4;
  color: #707071;
  font-weight: 700;
}

.role-card__check {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 18px;
  height: 18px;
}

.role-card__check img { width: 100%; height: 100%; }

.role-card--other { color: #6e7074; }

/* ---------- Notes ---------- */

.wizard-note {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: #fbfbfb;
  border: 1px solid #f2f3f5;
  border-radius: var(--ri-radius-sm);
  padding: 1rem 1.1rem;
}

.wizard-note img { width: 22px; height: auto; flex-shrink: 0; margin-top: 1px; }
.wizard-note p { margin: 0; font-size: .78rem; color: #696c77; font-weight: 300; line-height: 1.5; }
.wizard-note strong { color: #4a4d57; font-weight: 500; }

.wizard-note--info {
  background: #f5f8fd;
  border-color: #eef4fc;
}

.wizard-note--info img { width: 24px; }
.wizard-note--info p { color: #6d7180; }

/* ---------- Quantity grid (step 2) ---------- */

.qty-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.3rem;
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 68px;
  height: 62px;
  justify-content: center;
  background: #fefefe;
  border: 1px solid #ddd;
  border-radius: var(--ri-radius-sm);
  font-size: 1.05rem;
  color: #5c5e62;
  padding: 0 1rem;
}

.qty-btn--bold { font-weight: 700; }

.qty-btn.is-selected {
  background: #fef4ea;
  border-color: #fdbe68;
  color: #5c5b59;
  font-weight: 600;
}

.qty-btn.is-selected img { width: 18px; height: auto; }

.qty-btn--other {
  color: #9497a2;
  font-size: .85rem;
}

.qty-btn--other img { width: 14px; height: auto; }

/* ---------- Location fields (step 3) ---------- */

.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-bottom: .6rem;
}

.location-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.location-field__label {
  font-size: .78rem;
  color: #989ca6;
}

.location-field__control {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fdfdfd;
  border: 1px solid #e6e8ec;
  border-radius: 6px;
  padding: .7rem .9rem;
  font-size: .82rem;
  color: #7b7b7e;
}

.location-field__control img { width: 11px; height: auto; margin-left: auto; }
.location-field__pin { width: 16px !important; height: auto; margin-left: 0 !important; }

.wizard-hint {
  font-size: .75rem;
  color: #a0a3ab;
  margin: 0;
}

/* ---------- Collapsed steps 4–9 ---------- */

.wizard-block--collapsed {
  padding: 0.4rem 1.7rem;
}

.collapsed-steps__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f1f2f4;
}

.collapsed-steps__item:last-child { border-bottom: 0; }

.collapsed-steps__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ri-line);
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: #838793;
}

.collapsed-steps__item div { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.collapsed-steps__item strong { font-size: .82rem; font-weight: 500; color: #4b4d54; }
.collapsed-steps__item span { font-size: .74rem; color: #a3a6ad; font-weight: 300; }

.collapsed-steps__chevron { width: 8px; height: auto; flex-shrink: 0; opacity: .5; }

/* ---------- Preview banner ---------- */

.preview-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fdf6ee;
  border: 1px solid #fce6cd;
  border-radius: var(--ri-radius-md);
  padding: 1.6rem 1.8rem;
}

.preview-banner__illustration { width: 90px; height: auto; flex-shrink: 0; }

.preview-banner__body h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: #535250;
  margin: 0 0 .5rem;
}

.preview-banner__body > p {
  font-size: .82rem;
  color: #97979d;
  margin: 0 0 1rem;
  max-width: 46rem;
}

.preview-banner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.preview-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 6px;
  padding: .6rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}

.preview-chip img { width: 15px; height: auto; }

.preview-chip--green { background: #ecf8f0; color: #739c7b; }
.preview-chip--blue { background: #edf4fe; color: #7891d2; }
.preview-chip--violet { background: #f0edfd; color: #947cd2; }

/* ---------- Sticky footer ---------- */

.wizard-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e8eaed;
  padding: 1rem 0;
  z-index: 20;
}

.wizard-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
}

.wizard-footer__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.wizard-footer__progress-label {
  font-size: .8rem;
  color: #62646b;
}

.wizard-footer__progress-track {
  display: block;
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: #ececec;
  overflow: hidden;
}

.wizard-footer__progress-bar {
  display: block;
  width: 11%;
  height: 100%;
  border-radius: 999px;
  background: var(--ri-gold);
}

.btn-wizard-back,
.btn-wizard-next {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border-radius: 7px;
  padding: .6rem 1.3rem;
  font-size: .8rem;
  cursor: pointer;
}

.btn-wizard-back {
  background: #fcfcfc;
  border: 1px solid #dee0e6;
  color: #575a61;
}

.btn-wizard-back img { width: 16px; height: auto; }
.btn-wizard-back strong { display: block; font-weight: 500; font-size: .85rem; color: #6e7077; }
.btn-wizard-back small { font-size: .68rem; color: #9ea1a7; font-weight: 300; }

.btn-wizard-next {
  background: #dd740c;
  border: 1px solid #e4923c;
  color: #fff;
}

.btn-wizard-next img { width: 16px; height: auto; }
.btn-wizard-next strong { display: block; font-weight: 500; font-size: .9rem; color: #fff; }
.btn-wizard-next small { font-size: .68rem; color: #f5cda2; font-weight: 300; }

@media (max-width: 991.98px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .location-grid { grid-template-columns: 1fr; }
  .wizard-footer__inner { justify-content: center; text-align: center; }
  .preview-banner { flex-direction: column; text-align: center; }
  .wizard-body { padding-bottom: 9rem; }
}