/**
 * SEO-калькулятор — компактный квиз на странице услуги.
 *
 * Скругления — из дизайн-системы темы (`--radius-*`), цвета — из `--color-*`.
 * Иерархия радиусов: блок калькулятора (--radius-0) → карточки (--radius-1)
 * → вложенные плашки (--radius-2) → поля и кнопки-1 (--radius-3) → чипы (--radius-4).
 */

.lsac {
  --lsac-blue: var(--color-blue, #003F8F);
  --lsac-blue-h: var(--color-blue-hover, #2A72CF);
  --lsac-ink: var(--color-black, #000);
  --lsac-text: var(--color-text, #505050);
  --lsac-line: #e7e7ea;
  --lsac-soft: var(--color-brand-light, #f3f3f3);
  --lsac-ok: #1c7c4a;
  --lsac-bad: #b3261e;

  --lsac-r: var(--radius-0, 6rem);
  --lsac-r-card: var(--radius-1, 4rem);
  --lsac-r-block: var(--radius-2, 2rem);
  /* Поля — как в формах сайта (тема задаёт им радиус --radius-2). */
  --lsac-r-field: var(--radius-2, 2rem);
  --lsac-r-chip: var(--radius-4, .5rem);
  --lsac-r-btn: 1.4rem;

  width: 100%;
  max-width: 1160px;
  margin: 3.2rem auto 4.8rem;
  padding: 3.2rem 3.2rem 3.4rem;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--lsac-line);
  border-radius: var(--lsac-r);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .08);
  color: var(--lsac-text);
  font-size: 1.6rem;
  line-height: 1.55;
}
.lsac * { box-sizing: border-box; }
.lsac a { color: var(--lsac-blue); }

.lsac__head { margin-bottom: 2.4rem; }
.lsac__eyebrow {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lsac-blue);
  font-weight: 600;
}
.lsac__title { margin: 0 0 .8rem; font-size: 2.8rem; font-weight: 600; line-height: 1.15; color: var(--lsac-ink); }
.lsac__lead { margin: 0; max-width: 72rem; font-size: 1.5rem; }

.lsac__q { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 600; color: var(--lsac-ink); }

/* Шаги-квиз */
.lsac__steps {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.lsac__step {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--lsac-line);
  border-radius: var(--lsac-r-block);
  background: var(--lsac-soft);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lsac__step b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #c9d3e4;
  color: #fff;
  font-size: 1.3rem;
}
.lsac__step span { display: flex; flex-direction: column; font-weight: 600; color: var(--lsac-ink); font-size: 1.35rem; line-height: 1.25; }
.lsac__step em { font-style: normal; font-weight: 400; font-size: 1.2rem; color: #8a8f96; }
.lsac__step:hover { border-color: var(--lsac-blue-h); }
.lsac__step.is-active { border-color: var(--lsac-blue); background: #eef4fd; }
.lsac__step.is-active b { background: var(--lsac-blue); }

/* Переключатель «фразы / сайт» */
.lsac__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; }
.lsac__choice {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--lsac-line);
  border-radius: var(--lsac-r-block);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lsac__choice input { position: absolute; opacity: 0; pointer-events: none; }
.lsac__choice span { display: flex; flex-direction: column; gap: .2rem; }
.lsac__choice b { font-size: 1.5rem; color: var(--lsac-ink); }
.lsac__choice em { font-style: normal; font-size: 1.3rem; color: #8a8f96; }
.lsac__choice::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: .2rem;
  border: 2px solid #c9d3e4;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 .5rem #fff;
}
.lsac__choice:hover { border-color: var(--lsac-blue-h); }
.lsac__choice:has(input:checked) { border-color: var(--lsac-blue); background: #eef4fd; }
.lsac__choice:has(input:checked)::before { border-color: var(--lsac-blue); background: var(--lsac-blue); }
.lsac__choice:has(input:focus-visible) { outline: 2px solid var(--lsac-blue-h); outline-offset: 2px; }

.lsac__panel { margin: 0; }
.lsac__panel[hidden] { display: none; }
.lsac__body { position: relative; }

.lsac__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.lsac__grid--row { margin-top: 1.4rem; }
.lsac__field { display: flex; flex-direction: column; gap: .5rem; }
.lsac__field--wide { grid-column: 1 / -1; }
.lsac__field label { font-size: 1.35rem; font-weight: 600; color: var(--lsac-ink); }
/*
 * Экранирование от кастомного CSS форм в теме: там правило записано как
 * `.lion-page-X .lion-block-Y input, select, textarea { … !important }` — из-за
 * «голых» `select, textarea` в списке селекторов оно действует на весь сайт и
 * затирает радиусы, отступы и кегль у наших полей. Поэтому здесь — `!important`
 * и якорь `#lsac`, чтобы все три поля внутри виджета выглядели одинаково.
 */
#lsac .lsac__field input,
#lsac .lsac__field select,
#lsac .lsac__field textarea {
  width: 100% !important;
  padding: 1.2rem 1.6rem !important;
  border: 1px solid var(--lsac-line) !important;
  border-radius: var(--lsac-r-field) !important;
  font-family: inherit !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  color: var(--lsac-ink) !important;
  background: #fff !important;
}
#lsac .lsac__field textarea { resize: vertical; min-height: 8rem; }
#lsac .lsac__field input:focus,
#lsac .lsac__field select:focus,
#lsac .lsac__field textarea:focus { outline: 2px solid var(--lsac-blue); outline-offset: 0; }
.lsac__hint { font-size: 1.25rem; color: #8a8f96; }

.lsac__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
.lsac__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.25rem 2.2rem;
  border-radius: var(--lsac-r-btn);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lsac__btn--primary { background: var(--lsac-blue); color: #fff; }
.lsac__btn--primary:hover { background: var(--lsac-blue-h); }
.lsac__btn--ghost { background: transparent; border-color: var(--lsac-blue); color: var(--lsac-blue); }
.lsac__btn--ghost:hover { background: #eef4fd; }
.lsac__btn[disabled] { opacity: .6; cursor: default; }
.lsac__free { font-size: 1.3rem; color: #8a8f96; }
.lsac__free.is-warn { color: #b45309; font-weight: 600; }

.lsac__msg { margin-top: 1.4rem; padding: 1.2rem 1.6rem; border-radius: var(--lsac-r-field); font-size: 1.4rem; }
.lsac__msg.is-ok { background: #eaf7ef; color: var(--lsac-ok); }
.lsac__msg.is-error { background: #fdeceb; color: var(--lsac-bad); }

.lsac__lock {
  padding: 2.2rem;
  border: 1px dashed #cfd6e2;
  border-radius: var(--lsac-r-card);
  background: var(--lsac-soft);
}
.lsac__lock-icon { font-size: 2.4rem; }
.lsac__lock h3 { margin: .6rem 0 .8rem; font-size: 1.9rem; font-weight: 600; color: var(--lsac-ink); }
.lsac__lock p { margin: 0 0 1.2rem; }
.lsac__lock-list { margin: 1.2rem 0; padding-left: 1.8rem; }
.lsac__lock-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.2rem; }

.lsac__subtitle { margin: 0 0 .6rem; font-size: 2rem; font-weight: 600; color: var(--lsac-ink); }
.lsac__text { margin: 0 0 1.6rem; max-width: 78rem; }

/* Результат этапа 1 */
.lsac__result { margin-top: 2.4rem; }
.lsac__result[hidden] { display: none; }
.lsac-card { padding: 2.4rem; border: 1px solid var(--lsac-line); border-radius: var(--lsac-r-card); background: #fff; }
.lsac-card + .lsac-card { margin-top: 1.4rem; }
.lsac-card__title { margin: 0 0 .4rem; font-size: 2rem; font-weight: 600; color: var(--lsac-ink); }
.lsac-card__sub { margin: 0 0 1.6rem; font-size: 1.35rem; color: #8a8f96; }
.lsac-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.lsac-num { padding: 1.6rem; border-radius: var(--lsac-r-block); background: var(--lsac-soft); }
.lsac-num span { display: block; font-size: 1.3rem; color: #6b7280; }
.lsac-num strong { display: block; margin-top: .4rem; font-size: 2.2rem; color: var(--lsac-ink); }
.lsac-num em { font-style: normal; font-size: 1.25rem; color: #8a8f96; }
.lsac-tiers { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.lsac-tiers li { display: flex; justify-content: space-between; gap: 1.2rem; padding: 1.1rem 1.4rem; border: 1px solid var(--lsac-line); border-radius: var(--lsac-r-field); }
.lsac-tiers li b { color: var(--lsac-ink); }
.lsac-tiers li em { font-style: normal; color: #8a8f96; font-size: 1.3rem; }
.lsac-go { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.lsac-note { margin: 1.4rem 0 0; font-size: 1.3rem; color: #8a8f96; }

/* Таблица частотности */
.lsac-ws { width: 100%; border-collapse: collapse; margin-top: 1.8rem; font-size: 1.35rem; }
.lsac-ws th,
.lsac-ws td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--lsac-line); vertical-align: top; }
.lsac-ws th { font-weight: 600; color: var(--lsac-ink); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
.lsac-ws tbody tr:last-child td { border-bottom: 0; }
.lsac-ws td em { display: block; font-style: normal; color: #8a8f96; font-size: 1.2rem; }
.lsac-class { display: inline-block; padding: .25rem .8rem; border-radius: var(--lsac-r-chip); font-size: 1.2rem; font-weight: 600; color: #fff; background: #8a8f96; }
.lsac-class--нч { background: #1c7c4a; }
.lsac-class--сч { background: #2A72CF; }
.lsac-class--вч { background: #a86a00; }
.lsac-class--вк { background: #b3261e; }

/* Тарифы — свёрнуты, чтобы блок оставался компактным */
.lsac__more { margin-top: 2.8rem; border-top: 1px solid var(--lsac-line); padding-top: 1.6rem; }
.lsac__more-sum {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.8rem;
  border: 1px solid var(--lsac-line);
  border-radius: var(--lsac-r-block);
  background: var(--lsac-soft);
  font-weight: 600;
  color: var(--lsac-ink);
  cursor: pointer;
  list-style: none;
}
.lsac__more-sum::-webkit-details-marker { display: none; }
.lsac__more-sum::before { content: "+"; color: var(--lsac-blue); font-size: 1.8rem; line-height: 1; }
.lsac__more[open] .lsac__more-sum::before { content: "–"; }
.lsac__more-sum:hover { border-color: var(--lsac-blue-h); }
.lsac__tariffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.8rem; }
.lsac__tariff { padding: 2rem; border: 1px solid var(--lsac-line); border-radius: var(--lsac-r-card); background: #fff; display: flex; flex-direction: column; }
.lsac__tariff-title { margin: 0 0 .2rem; font-size: 2rem; font-weight: 600; color: var(--lsac-ink); }
.lsac__tariff-sub { margin: 0 0 1.4rem; font-size: 1.3rem; color: #8a8f96; }
.lsac__tariff-works { margin: 0 0 1.8rem; padding-left: 1.8rem; font-size: 1.4rem; flex: 1 1 auto; }
.lsac__tariff-works li { margin-bottom: .5rem; }
.lsac__tariff .lsac__btn { width: 100%; }

@media (max-width: 980px) {
  .lsac { padding: 2.4rem; margin: 2.4rem auto 3.2rem; }
  .lsac__steps { grid-template-columns: 1fr; }
  .lsac__step em { display: none; }
  .lsac__tariffs { grid-template-columns: 1fr; }
  .lsac-numbers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lsac { padding: 2rem 1.8rem; }
  .lsac__title { font-size: 2.3rem; }
  .lsac__choices { grid-template-columns: 1fr; }
  .lsac__grid { grid-template-columns: 1fr; }
  .lsac__actions { flex-direction: column; align-items: stretch; }
  .lsac__btn { width: 100%; }
}