/* ==========================================================================
   help-legal.html — «Вакансия отправлена на модерацию»
   Figma node 6:2783 ("сцена 5 (1)")
   ========================================================================== */

.moderation-body { background: var(--ri-cream); }

/* ---------- Header actions ---------- */

.moderation-header-actions { gap: 1.6rem; }

.moderation-help {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: #5c5c61;
}

.moderation-help img { width: 20px; height: auto; }
.moderation-help small { display: block; color: #9a9ba3; font-size: .72rem; font-weight: 300; }

.moderation-login {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--ri-line);
  border-radius: var(--ri-radius-sm);
  padding: .6rem 1.1rem;
  font-size: .85rem;
  color: #4c4d51;
}

.moderation-login img { width: 18px; height: auto; }
.moderation-login small { display: block; color: #9a9ba3; font-size: .72rem; font-weight: 300; }

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

.moderation-page { padding: 2.5rem 0 4rem; }

/* ---------- Hero ---------- */

.moderation-hero {
  background: #eef8ef;
  border: 1px solid #ddede1;
  border-radius: var(--ri-radius-lg);
  padding: 2.6rem 2.4rem;
  text-align: center;
  margin-bottom: 1.6rem;
}

.moderation-hero__check-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.2rem;
}

.moderation-hero__check { width: 64px; height: auto; display: block; }

.moderation-hero__confetti { position: absolute; width: 16px; height: auto; }
.moderation-hero__confetti--1 { top: -12px; left: -18px; }
.moderation-hero__confetti--2 { top: -16px; right: -16px; width: 12px; }
.moderation-hero__confetti--3 { bottom: -10px; left: -14px; width: 12px; }
.moderation-hero__confetti--4 { bottom: -14px; right: -18px; }

.moderation-hero h1 {
  font-size: 1.9rem;
  font-weight: 600;
  color: #2f3336;
  margin: 0 0 .6rem;
}

.moderation-hero__lead { color: #82888f; font-size: 1rem; margin: 0 0 1.8rem; }

.vacancy-mini-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #fdfdfc;
  border: 2px solid #ebf0ef;
  border-radius: var(--ri-radius-md);
  padding: 1.3rem 1.6rem;
  max-width: 520px;
  margin: 0 auto 1.4rem;
  text-align: left;
}

.vacancy-mini-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #eaf6ec;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vacancy-mini-card__icon img { width: 30px; height: auto; }

.vacancy-mini-card h2 { font-size: 1.3rem; font-weight: 500; color: #414347; margin: 0 0 .15rem; }
.vacancy-mini-card p { font-size: .88rem; color: #77787d; margin: 0 0 .2rem; display: flex; align-items: center; gap: .4rem; }
.vacancy-mini-card p img { width: 14px; height: auto; }

.moderation-notice {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: #e6f4e9;
  border: 1px solid #d2e9d8;
  border-radius: var(--ri-radius-sm);
  padding: 1.1rem 1.4rem;
  max-width: 700px;
  margin: 0 auto 1.6rem;
  text-align: left;
}

.moderation-notice img { width: 24px; height: auto; margin-top: .15rem; flex-shrink: 0; }
.moderation-notice strong { display: block; font-size: .92rem; color: #58605d; margin-bottom: .2rem; }
.moderation-notice span { font-size: .8rem; color: #7e8888; line-height: 1.5; }

.moderation-hero__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-moderation {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border-radius: 7px;
  padding: .85rem 1.7rem;
  font-size: .95rem;
  white-space: nowrap;
}

.btn-moderation img { width: 18px; height: auto; }

.btn-moderation--primary { background: #e57405; border: 1px solid #e5882f; color: #fff; }
.btn-moderation--outline { background: #fcfcfc; border: 1px solid #d2d6d9; color: #5e5f63; }

/* ---------- Promote section ---------- */

.moderation-promo {
  background: #eef0fb;
  border: 1px solid #e0e4f8;
  border-radius: var(--ri-radius-lg);
  padding: 2.2rem 2.2rem 2rem;
  text-align: center;
  margin-bottom: 1.6rem;
}

.moderation-promo h3 { font-size: 1.3rem; font-weight: 500; color: #3a3b42; margin: 0 0 .4rem; }
.moderation-promo p { font-size: .88rem; color: #8f91a1; margin: 0 0 1.6rem; }

.promo-card {
  border-radius: var(--ri-radius-sm);
  padding: 1.4rem 1rem;
  text-align: center;
  height: 100%;
}

.promo-card img { width: 28px; height: auto; margin-bottom: .6rem; }
.promo-card h4 { font-size: .92rem; font-weight: 700; color: #4a4b4f; margin: 0 0 .4rem; }
.promo-card p { font-size: .75rem; color: #8c8e97; margin: 0; line-height: 1.4; }

.promo-card--green { background: #f1f8f2; border: 1px solid #e2efe8; }
.promo-card--peach { background: #fcf7f0; border: 1px solid #fae9d1; }
.promo-card--purple { background: #f6f5fd; border: 1px solid #e8e2fb; }
.promo-card--blue { background: #f4f7fd; border: 1px solid #d9e3fc; }

/* ---------- What's next ---------- */

.moderation-next {
  background: #eef0fb;
  border: 1px solid #e0e4f8;
  border-radius: var(--ri-radius-lg);
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.moderation-next__text { flex: 1 1 auto; }
.moderation-next__text h3 { font-size: 1.1rem; font-weight: 500; color: #535760; margin: 0 0 1.1rem; }

.moderation-next__text ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.moderation-next__text li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .85rem;
  color: #7c8290;
  line-height: 1.5;
}

.moderation-next__text li span {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3f7ce2;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moderation-next__illustration { width: 160px; height: auto; flex-shrink: 0; }

/* ---------- Safety banner ---------- */

.moderation-safety {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #edf6ee;
  border: 1px solid #ddede1;
  border-radius: var(--ri-radius-sm);
  padding: 1rem 1.4rem;
  margin-bottom: 1.6rem;
}

.moderation-safety img { width: 26px; height: auto; flex-shrink: 0; }
.moderation-safety strong { display: block; font-size: .85rem; color: #575d5e; }
.moderation-safety span { font-size: .78rem; color: #8c9396; }

/* ---------- Support strip ---------- */

.moderation-support {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  background: #fdfdfd;
  border: 2px solid #e4e7f0;
  border-radius: var(--ri-radius-lg);
  padding: 1.6rem 2rem;
  margin-bottom: 1.8rem;
}

.moderation-support__col { display: flex; align-items: center; gap: 1rem; }
.moderation-support__col img, .moderation-support__col .icon-inline { width: 46px; height: auto; flex-shrink: 0; }
.moderation-support__col strong { display: block; font-size: .9rem; color: #5a5b5f; }
.moderation-support__col span { display: block; font-size: .78rem; color: #a6a9b4; margin: .1rem 0 .3rem; }
.moderation-support__col a { font-size: .8rem; color: #7cbb90; }

.moderation-support__col--right { justify-content: flex-end; text-align: right; }
.moderation-support__col--right > div:first-child { text-align: right; }

.moderation-support__socials { display: flex; gap: .6rem; }
.moderation-support__socials img { width: 32px; height: 32px; }

/* ---------- Legal bottom ---------- */

.moderation-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  font-size: .82rem;
  color: #aaadb8;
  padding-bottom: .5rem;
}

.moderation-legal nav { display: flex; gap: 1.6rem; }
.moderation-legal nav a { color: #a7abb7; }
.moderation-legal nav a:hover { color: var(--ri-gold); }

@media (max-width: 767.98px) {
  .moderation-next { flex-direction: column; text-align: center; }
  .moderation-support__col--right { justify-content: center; }
  .moderation-support { justify-content: center; text-align: center; }
}