/* Страницы цен (/ceny/) — единый стиль для всех восьми страниц.
   Страницы писали разные люди, и каждая была свёрстана по-своему: три вида
   оглавления, <hr> через раздел, таблицы и цитаты в стиле блога. Сборка
   приводит разметку к одной структуре (.ceny-body, .ceny-toc, .ceny-links,
   .ceny-table), а этот файл задаёт ей один вид. Подключается только на
   ценах, все правила ограничены этими классами. */

:root {
  --ceny-ink: #111;
  --ceny-text: #2B2F33;
  --ceny-muted: #6B7480;
  --ceny-teal: #004766;
  --ceny-orange: #FF9706;
  --ceny-line: #E3E8EF;
  --ceny-soft: #F5F7FA;
}

/* ------------------------------------- ссылки на другие страницы цен
   Анкоры — полные названия страниц, как в колонке на Битриксе. */
.wrapper .inner_text .ceny-links {
  margin: 56px 0 0;
  padding: 24px 28px;
  border: 1px solid var(--ceny-line);
  border-radius: 16px;
  background: #FFF; /* фон страницы тоже --ceny-soft, блок с ним сливался */
}
.wrapper .inner_text .ceny-links__title {
  margin: 0 0 12px;
  color: var(--ceny-ink);
  font-size: 19px;
  font-weight: 700;
}
.wrapper .inner_text .ceny-links ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrapper .inner_text .ceny-body .ceny-links ul:not(.not_mark) > li { margin: 0; padding: 0; }
.wrapper .inner_text .ceny-body .ceny-links ul:not(.not_mark) > li::before { content: none; display: none; }
.wrapper .inner_text .ceny-links a {
  color: var(--ceny-teal);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: rgba(0, 71, 102, 0.3);
  text-underline-offset: 3px;
}
.wrapper .inner_text .ceny-links a:hover { color: var(--ceny-orange); text-decoration-color: currentColor; }

/* ------------------------------------------------------------ текст */
.wrapper .inner_text .ceny-body {
  max-width: 900px;
  color: var(--ceny-text);
  font-size: 16px;
  line-height: 1.7;
}
.wrapper .inner_text .ceny-body p { margin: 0 0 16px; }
.wrapper .inner_text .ceny-body h2 {
  margin: 56px 0 18px;
  color: var(--ceny-ink);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.wrapper .inner_text .ceny-body h3 {
  margin: 32px 0 12px;
  color: var(--ceny-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.wrapper .inner_text .ceny-body ul,
.wrapper .inner_text .ceny-body ol { margin: 0 0 18px; padding-left: 22px; }
.wrapper .inner_text .ceny-body li { margin: 0 0 6px; }
/* Тема рисует у любого <ol> кружок-номер 46px (абсолютно, с отступом 78px),
   а у <ul> — галочку-картинку. В тексте цен списки короткие: номер — просто
   цифра того же цвета, что ссылки, маркер — точка. */
.wrapper .inner_text .ceny-body ol { counter-reset: ceny; list-style: none; padding-left: 0; }
.wrapper .inner_text .ceny-body ol > li {
  position: relative;
  padding-left: 30px !important; /* у темы 78px !important */
  counter-increment: ceny;
}
.wrapper .inner_text .ceny-body ol > li::before {
  content: counter(ceny) ".";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ceny-teal);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}
.wrapper .inner_text .ceny-body ul:not(.not_mark) > li { position: relative; padding-left: 20px; }
.wrapper .inner_text .ceny-body ul:not(.not_mark) > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ceny-orange);
}
.wrapper .inner_text .ceny-body ul { padding-left: 0; list-style: none; }
.wrapper .inner_text .ceny-body > br { display: none; }
/* Тема ставит любому <strong> 22px: вводные слова посреди абзаца
   («Тип реализации.») выпрыгивали из строки крупным шрифтом. */
.wrapper .inner_text .ceny-body strong,
.wrapper .inner_text .ceny-body b { color: var(--ceny-ink); font-size: inherit; font-weight: 700; line-height: inherit; }

/* Ссылка на страницу услуги в конце вступления. */
.wrapper .inner_text .ceny-body .ceny-service a { color: var(--ceny-teal); text-decoration: underline; text-underline-offset: 3px; }
.wrapper .inner_text .ceny-body .ceny-service a:hover { color: var(--ceny-orange); }

/* -------------------------------------------------------- оглавление */
.wrapper .inner_text .ceny-toc {
  margin: 24px 0 8px;
  border: 1px solid var(--ceny-line);
  border-radius: 14px;
  background: #FFF;
}
.wrapper .inner_text .ceny-toc summary {
  padding: 14px 20px;
  color: var(--ceny-ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.wrapper .inner_text .ceny-toc summary span { color: var(--ceny-muted); font-weight: 400; }
.wrapper .inner_text .ceny-toc ol {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 20px 16px;
  columns: 2;
  column-gap: 32px;
}
.wrapper .inner_text .ceny-toc li { max-width: 100%; break-inside: avoid; margin: 0 0 6px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.wrapper .inner_text .ceny-toc ol > li { padding-left: 28px !important; }
.wrapper .inner_text .ceny-toc ol > li::before { color: var(--ceny-muted); font-weight: 400; }
.wrapper .inner_text .ceny-toc a { color: var(--ceny-teal); text-decoration: none; }
.wrapper .inner_text .ceny-toc a:hover { color: var(--ceny-orange); }

/* ----------------------------------------------------------- таблицы
   Тема делает любую <th> плашкой 25–27px с отступами 28px и ширину от
   350px, у «Контекстной рекламы» — ещё и скругления 30px в углах. */
.wrapper .inner_text .ceny-table,
.wrapper .inner_text .ceny-body .table_blog,
.wrapper .inner_text .ceny-body .table-responsive {
  margin: 20px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--ceny-line);
  border-radius: 14px;
}
.wrapper .inner_text .ceny-body table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.wrapper .inner_text .ceny-body table tr th,
.wrapper .inner_text .ceny-body table tr td {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--ceny-line);
  border-radius: 0 !important;
  background: #FFF;
  color: var(--ceny-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.wrapper .inner_text .ceny-body table tr:last-child th,
.wrapper .inner_text .ceny-body table tr:last-child td { border-bottom: 0; }
.wrapper .inner_text .ceny-body table thead th,
.wrapper .inner_text .ceny-body table tr:first-child th {
  background: var(--ceny-soft);
  color: var(--ceny-ink);
  font-size: 14px;
  font-weight: 600;
}
/* Таблица «подпись — значение»: подпись слева, цена справа и главная. */
.wrapper .inner_text .ceny-body table tr th + td {
  color: var(--ceny-teal);
  font-size: 16px;
  font-weight: 700;
}
.wrapper .inner_text .ceny-body table tr:not(:first-child) th { background: var(--ceny-soft); font-weight: 600; }
.wrapper .inner_text .ceny-body table .price,
.wrapper .inner_text .ceny-body table td.ceny-price { min-width: 120px; color: var(--ceny-teal); font-weight: 700; }

/* ------------------------------------------------ выноски, карточки */
.wrapper .inner_text .ceny-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--ceny-orange);
  border-radius: 0 12px 12px 0;
  background: #FFF7EC;
  font-size: 16px;
}
/* Кавычку тема рисует и на цитате, и на абзаце внутри неё. */
.wrapper .inner_text .ceny-body blockquote::before,
.wrapper .inner_text .ceny-body blockquote::after,
.wrapper .inner_text .ceny-body blockquote p::before,
.wrapper .inner_text .ceny-body blockquote p::after { content: none; display: none; }
.wrapper .inner_text .ceny-body blockquote p { margin: 0; font-size: 16px; line-height: 1.6; }

.wrapper .inner_text .ceny-body .case-item,
.wrapper .inner_text .ceny-body .review-item {
  margin: 16px 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--ceny-soft);
}
.wrapper .inner_text .ceny-body .case-item h3 { margin-top: 0; font-size: 18px; }
.wrapper .inner_text .ceny-body .case-item p:last-child,
.wrapper .inner_text .ceny-body .review-item p:last-child { margin-bottom: 0; }

.wrapper .inner_text .ceny-body .faq-item { border-bottom: 1px solid var(--ceny-line); }
.wrapper .inner_text .ceny-body .faq-item summary {
  padding: 14px 0;
  color: var(--ceny-ink);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.wrapper .inner_text .ceny-body .faq-item p { padding-bottom: 8px; }

/* ------------------------------------------------- блоки с кнопками */
.wrapper .inner_text .ceny-cta {
  margin: 40px 0;
  padding: 28px 32px;
  border: 2px solid var(--ceny-orange);
  border-radius: 16px;
  background: #FFF;
}
.wrapper .inner_text .ceny-cta__title {
  margin: 0 0 6px;
  color: var(--ceny-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.wrapper .inner_text .ceny-cta .reklama_text_button {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.wrapper .inner_text .ceny-cta .reklama_min_title {
  flex: 1 1 260px;
  margin: 0;
  color: var(--ceny-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.wrapper .inner_text a.ceny-cta__button {
  /* У .button темы display: flex и ширина по контейнеру — кнопка
     растягивалась на весь блок и уезжала под текст. */
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  width: auto;
  padding: 16px 28px;
  border-radius: 50px;
  background: var(--ceny-orange);
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.wrapper .inner_text a.ceny-cta__button:hover { background: #E98500; }

/* ----------------------------------------------------------- телефон */
@media (max-width: 767.98px) {
  .wrapper .inner_text .ceny-links { padding: 20px; }
  .wrapper .inner_text .ceny-links ul { grid-template-columns: 1fr; }
  .wrapper .inner_text .ceny-body { font-size: 15px; }
  .wrapper .inner_text .ceny-body h2 { margin-top: 40px; font-size: 23px; }
  .wrapper .inner_text .ceny-body h3 { font-size: 18px; }
  .wrapper .inner_text .ceny-toc ol { columns: 1; }
  .wrapper .inner_text .ceny-cta { margin: 32px 0; padding: 22px 20px; }
  .wrapper .inner_text .ceny-cta__title { font-size: 19px; }
  .wrapper .inner_text .ceny-cta .reklama_text_button { flex-direction: column; align-items: stretch; }
  /* В столбце flex-basis текста становится высотой — отсюда была пустота. */
  .wrapper .inner_text .ceny-cta .reklama_min_title { flex: none; }
  .wrapper .inner_text .ceny-toc ol { padding: 0 16px 14px; }
  .wrapper .inner_text a.ceny-cta__button { width: 100%; }
}

/* ------------------------------------------ липкая кнопка на телефоне */
.ceny-sticky { display: none; }
@media (max-width: 767.98px) {
  .ceny-sticky {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #FFF;
    box-shadow: 0 -4px 16px rgba(0, 48, 63, 0.12);
  }
  .ceny-sticky__form { flex: 1; }
  .ceny-sticky__form a,
  .ceny-sticky__phone {
    display: block;
    padding: 14px 16px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .ceny-sticky__form a { background: #FF9706; color: #FFF; }
  .ceny-sticky__phone { flex: 0 0 auto; border: 2px solid #004766; color: #004766; }
  /* Панель не должна закрывать низ страницы и плавающие кнопки сайта. */
  body.page { padding-bottom: 76px; }
  body.page .fly_stick, body.page .up { bottom: 90px; }
}