/* Страхові компанії: каталог [wf_insurers] и страница обзора /insurance/{slug}.

   Вёрстка — по макетам «Страхові компанії» и «Огляд страхової» (десктоп и
   мобильные) дизайн-системы WizFinder (claude.ai/design). Токены — значения
   из её tokens/*.css, но объявлены только внутри каталога и обзора:
   глобальные --green/--gray и т.п. перекрыли бы переменные темы на всём сайте.
   Блок отзывов на обзоре — общий с МФО (credit-reviews.css). */

.wf-ins,
.wf-insurer {
  --dark-green: rgb(8,92,68);
  --dark-violet: rgb(44,42,74);
  --violet: rgb(76,72,130);
  --green: rgb(0,198,119);
  --light-green-2: rgb(208,249,200);
  --light-green-3: rgb(230,255,224);
  --light-green-4: rgb(245,248,243);
  --gray: rgb(248,248,248);
  --gray-mid: rgb(168,169,175);
  --grey-600: rgb(102,102,102);
  --grey-500: rgb(123,123,124);
  --grey-100: rgb(242,242,247);
  --line-200: rgb(223,223,223);
  --line-300: rgb(218,222,221);
  --blue-50: rgb(236,243,255);
  --ring-card: inset 0 0 0 1px var(--line-200);
  --radius-16: 16px;
  --radius-19: 19px;

  /* Шрифт сайта — Manrope из глобальных стилей темы, а не Inter дизайн-системы. */
  font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif);
}

.wf-ins-icon {
  display: block;
  flex-shrink: 0;
}

/* ---------- Каталог ----------
   По умолчанию — десктопный макет: карточки списком, кнопки справа в шапке,
   показатели и виды одной строкой. До 767px — мобильный: кнопки внизу
   карточки, показатели в зелёном блоке. */

.wf-ins {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1170px;
  margin: 0 auto;
  color: #000;
}

/* Тема ставит отступы спискам и абзацам — внутри каталога они свои. */
.wf-ins ul,
.wf-ins p,
.wf-ins dl,
.wf-ins dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-ins button { font: inherit; }

/* Плашки «Показники за …» / «Дані …» — продолжение заголовка страницы. */
.wf-ins__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -16px;
}

.wf-ins-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: var(--radius-19);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.wf-ins-pill--blue { background: var(--blue-50); color: var(--dark-violet); }
.wf-ins-pill--green { background: var(--light-green-2); color: #000; }

/* Вкладки видов страхования */
.wf-ins__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wf-ins .wf-ins-tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: var(--radius-19);
  background: #fff;
  box-shadow: var(--ring-card);
  color: var(--dark-violet);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.wf-ins .wf-ins-tab:hover { background: var(--light-green-4); }

.wf-ins .wf-ins-tab.is-active {
  background: var(--dark-green);
  box-shadow: none;
  color: #fff;
}

/* «Знайдено N» + сортировка; список идёт сразу за ними, ближе обычного. */
.wf-ins__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -16px;
}

.wf-ins__found {
  padding: 6px 12px;
  border-radius: var(--radius-19);
  background: var(--grey-100);
  color: var(--dark-violet);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.wf-ins__sort {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wf-ins__sort-label {
  color: var(--dark-violet);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.wf-ins__select {
  position: relative;
  display: flex;
  width: 230px;
  color: var(--dark-violet);
}

.wf-ins__select select {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 16px;
  border: 0;
  border-radius: var(--radius-16);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-300);
  color: var(--dark-violet);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.wf-ins__select select:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--dark-green); }

.wf-ins__select .wf-ins-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  pointer-events: none;
}

/* Список карточек */
.wf-ins__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-ins-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-16);
  background: #fff;
  box-shadow: var(--ring-card);
  transition: box-shadow 120ms ease;
}

.wf-ins-card[hidden] { display: none; }
.wf-ins-card.is-compared { box-shadow: inset 0 0 0 2px var(--dark-green); }

.wf-ins-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wf-ins-card__ident {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.wf-ins-card__logo {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.wf-ins-card__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--light-green-4);
  color: var(--dark-green);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.wf-ins-card__logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Бейдж места поверх угла логотипа; топ-3 — зелёный, как оценка в рейтинге. */
.wf-ins-card__rank {
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 90px;
  background: var(--grey-100);
  box-shadow: 0 0 0 3px #fff;
  color: var(--dark-violet);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.wf-ins-card__rank.is-top { background: var(--green); color: var(--light-green-3); }

.wf-ins-card__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wf-ins .wf-ins-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.wf-ins-card__name a {
  color: inherit;
  text-decoration: none;
}

.wf-ins-card__name a:hover { text-decoration: underline; }

.wf-ins-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  height: 22px;
  padding: 3px 8px 3px 6px;
  box-sizing: border-box;
  border-radius: var(--radius-19);
  background: var(--light-green-3);
  color: var(--dark-green);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* Кнопки — Button дизайн-системы: 50px, радиус 16, 16/700. */
.wf-ins-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wf-ins .wf-ins-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-16);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 120ms ease, transform 80ms ease;
}

.wf-ins .wf-ins-btn:hover { filter: brightness(0.96); }
.wf-ins .wf-ins-btn:active { transform: translateY(1px); }

.wf-ins .wf-ins-btn--green { background: var(--dark-green); color: #fff; }
/* Светлая кнопка — #F5F8F3 (light-green-4), не салатовая light-green-2. */
.wf-ins .wf-ins-btn--light { background: var(--light-green-4); color: var(--dark-green); }
.wf-ins .wf-ins-btn--grey { background: var(--grey-100); color: var(--dark-violet); }

.wf-ins .wf-ins-compare.is-active { background: var(--light-green-4); color: var(--dark-green); }

.wf-ins-compare__on,
.wf-ins-compare.is-active .wf-ins-compare__off { display: none; }

.wf-ins-compare.is-active .wf-ins-compare__on,
.wf-ins-compare__off { display: flex; }

/* Показатели и виды — одной строкой под разделителем. Обёртка показателей
   на десктопе «растворяется», чтобы все четыре колонки были соседями. */
.wf-ins-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 32px;
  padding-top: 20px;
  box-shadow: inset 0 1px 0 var(--grey-100);
}

.wf-ins-card__kpi { display: contents; }

.wf-ins-card__ratio {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
}

.wf-ins-card__ratio-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-ins-card__sum {
  display: flex;
  flex: 1 1 130px;
  flex-direction: column;
  gap: 8px;
}

.wf-ins-card__lines-block {
  display: flex;
  flex: 2 1 280px;
  flex-direction: column;
  gap: 8px;
}

.wf-ins-card__label {
  color: var(--grey-500);
  font-size: 13px;
  line-height: 1;
}

.wf-ins-card__ratio-value {
  color: var(--dark-green);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.wf-ins-card__ratio-value.is-empty { color: var(--gray-mid); }

.wf-ins-card__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--grey-100);
}

.wf-ins-card__bar > span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--green);
}

.wf-ins-card__sum dd {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Чипы видов: зелёный с точкой — можно оформить онлайн. */
.wf-ins-card__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wf-ins-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-19);
  background: var(--grey-100);
  color: var(--dark-violet);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.wf-ins-chip--online {
  background: var(--light-green-3);
  color: var(--dark-green);
}

.wf-ins-chip--online::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--green);
}

.wf-ins__nothing {
  padding: 40px 24px;
  border-radius: var(--radius-16);
  background: var(--gray);
  color: var(--grey-600);
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}

.wf-ins__nothing[hidden] { display: none; }

.wf-ins__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-16);
  background: var(--blue-50);
  color: var(--dark-violet);
}

.wf-ins__note p {
  font-size: 14px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---------- Мобильный макет ---------- */

@media (max-width: 767px) {
  .wf-ins { gap: 20px; }
  .wf-ins__meta { margin-top: -8px; gap: 6px; }

  /* Лента вкладок до краёв экрана, без полосы прокрутки. */
  .wf-ins__tabs {
    flex-wrap: nowrap;
    margin: 0 -15px;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wf-ins__tabs::-webkit-scrollbar { display: none; }

  .wf-ins__controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: -8px;
  }

  .wf-ins__sort { width: 100%; }
  .wf-ins__select { flex: 1 1 auto; width: auto; }
  .wf-ins__select select { font-size: 12px; font-weight: 700; }

  .wf-ins-card {
    gap: 16px;
    padding: 15px;
  }

  /* Шапка раскладывается: имя — сверху, кнопки — в самый низ карточки. */
  .wf-ins-card__head { display: contents; }
  .wf-ins-card__ident { order: 1; gap: 14px; }
  .wf-ins-card__body { order: 2; }
  .wf-ins-card__actions { order: 3; }

  .wf-ins-card__logo { width: 48px; height: 48px; }
  .wf-ins-card__logo-box { font-size: 16px; }

  .wf-ins-card__rank {
    top: -7px;
    left: -7px;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
  }

  .wf-ins-card__title { gap: 7px; }
  .wf-ins .wf-ins-card__name { font-size: 18px; }

  /* «Огляд» — на всю ширину, «Сайт компанії» и «Порівняти» — пополам. */
  .wf-ins .wf-ins-btn { flex: 1 1 0; padding: 0 12px; }
  .wf-ins .wf-ins-card__review { flex-basis: 100%; }

  .wf-ins-card__body {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 0;
    box-shadow: none;
  }

  /* Десктопные flex-basis в колонке стали бы высотой — снимаем. */
  .wf-ins-card__ratio,
  .wf-ins-card__sum,
  .wf-ins-card__lines-block { flex: none; }

  /* Без колоночного зазора: иначе линия над суммами рвалась бы посередине,
     отступ между суммами — padding второй. */
  .wf-ins-card__kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 0;
    padding: 14px;
    border-radius: var(--radius-16);
    background: var(--light-green-4);
  }

  .wf-ins-card__ratio {
    grid-column: 1 / -1;
    max-width: none;
  }

  .wf-ins-card__ratio-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .wf-ins-card__ratio .wf-ins-card__label { color: var(--grey-600); }
  .wf-ins-card__ratio-value { font-size: 24px; }
  .wf-ins-card__bar { background: #fff; }

  /* Суммы — под разделителем внутри зелёного блока. */
  .wf-ins-card__sum {
    gap: 6px;
    padding-top: 12px;
    box-shadow: inset 0 1px 0 var(--light-green-2);
  }

  .wf-ins-card__sum + .wf-ins-card__sum { padding-left: 12px; }
  .wf-ins-card__sum .wf-ins-card__label { color: var(--grey-600); font-size: 12px; }
  .wf-ins-card__sum dd { font-size: 16px; }

  .wf-ins-card__lines-label { display: none; }

  .wf-ins__nothing { padding: 32px 16px; font-size: 14px; }

  .wf-ins__note { gap: 10px; padding: 14px; }
  .wf-ins__note p { font-size: 13px; }
}

/* ---------- Логотип-картинка в плитке (каталог и обзор) ---------- */

.wf-ins-card__logo-box.has-img,
.wf-ip-logo__box.has-img {
  padding: 4px;
  box-sizing: border-box;
}

/* ---------- Страница обзора ----------
   По макетам «Огляд страхової» (десктоп) и «… - мобільна». По умолчанию —
   десктоп: слева липкая карточка и оглавление, справа секции. До 959px —
   мобильный: шапка с логотипом и оценкой, кнопки, секции подряд. */

.wf-ip {
  gap: 24px;
  scroll-padding-top: 80px;
}

.wf-ip a { color: var(--violet, rgb(76,72,130)); }

.wf-ip-empty {
  padding: 16px;
  border-radius: 12px;
  background: #FDF0F0;
  color: #B32D2E;
}

.wf-ip-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

.wf-ip .wf-ip-back { color: var(--gray-mid); }
.wf-ip .wf-ip-back:hover { color: var(--dark-green); }

/* Шапка */
.wf-ip-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wf-ip-head__main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wf-ip-head__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wf-ip .wf-ip-h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.wf-ip-pills { margin-top: 0; }

/* На десктопе логотип и оценка — в карточке слева, в шапке только заголовок. */
@media (min-width: 960px) {
  .wf-ip-logo--head,
  .wf-ip .wf-ip-head .wf-ip-rating { display: none; }
}

.wf-ins-pill--mtsbu { background: var(--light-green-3); color: var(--dark-green); }

/* Логотип с бейджем места */
.wf-ip-logo {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.wf-ip-logo__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--light-green-4);
  color: var(--dark-green);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.wf-ip-logo__box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wf-ip-logo__rank {
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 90px;
  background: var(--grey-100);
  box-shadow: 0 0 0 3px #fff;
  color: var(--dark-violet);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.wf-ip-logo__rank.is-top { background: var(--green); color: var(--light-green-3); }

/* Оценка «★ 4,2 · 12 відгуків» */
.wf-ip .wf-ip-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  text-decoration: none;
}

.wf-ip-rating__star { display: flex; color: var(--green); }

.wf-ip-rating__avg {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.wf-ip-rating__count {
  color: var(--violet, rgb(76,72,130));
  font-size: 13px;
  line-height: 1;
  text-decoration: underline;
}

/* Две колонки */
.wf-ip-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
}

.wf-ip-aside {
  position: sticky;
  top: calc(var(--wf-header-h, 80px) + 16px);
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 24px;
  max-width: 360px;
}

.wf-ip-main {
  display: flex;
  flex: 999 1 560px;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

/* Карточка компании в боковой колонке */
.wf-ip-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border-radius: var(--radius-16);
  box-shadow: var(--ring-card);
}

.wf-ip-card__ident {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wf-ip-card__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wf-ip-card__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.wf-ip-card__rows { display: flex; flex-direction: column; }

.wf-ip-card__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  box-shadow: inset 0 -1px 0 var(--grey-100);
  font-size: 15px;
  line-height: 1.2;
}

.wf-ip-card__row:last-child { box-shadow: none; }
.wf-ip-card__row dd { font-weight: 700; }
.wf-ip-card__row dd.is-accent { color: var(--dark-green); }

.wf-ip-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* flex: none — каталожное «flex: 1 1 0» в колонке схлопнуло бы высоту кнопки. */
.wf-ip .wf-ip-card__actions .wf-ins-btn { flex: none; width: 100%; }

/* Оглавление — как на обзоре МФО (.co-sidebar-toc в credit-offer.css; тот
   файл грузится только на credit_offer, поэтому правила продублированы). */
.wf-ip .co-sidebar-toc .wf-toc__title {
  display: block;
  margin: 0 0 10px;
  color: #101621;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.wf-ip .co-sidebar-toc .wf-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-ip .co-sidebar-toc .wf-toc__item { margin: 0; }

.wf-ip .co-sidebar-toc .wf-toc__link {
  display: block;
  color: #2f3642;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wf-ip .co-sidebar-toc .wf-toc__link:hover,
.wf-ip .co-sidebar-toc .wf-toc__link.active { color: #0f9f66; }

/* Секции */
.wf-ip-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: calc(var(--wf-header-h, 80px) + 16px);
}

.wf-ip .wf-ip-h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* «Показники»: на десктопе голубая плашка с белым блоком внутри */
.wf-ip-metrics {
  gap: 24px;
  padding: 28px;
  border-radius: var(--radius-16);
  background: var(--blue-50);
}

.wf-ip .wf-ip-metrics .wf-ip-h2 { color: var(--dark-violet); }

.wf-ip-kpi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-16);
  background: #fff;
}

.wf-ip-kpi__ratio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-ip-kpi__ratio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wf-ip-kpi__ratio-label { font-size: 15px; line-height: 1; }

.wf-ip-kpi__ratio-value {
  color: var(--dark-green);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.wf-ip-kpi__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--grey-100);
}

.wf-ip-kpi__bar > span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--green);
}

.wf-ip-kpi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding-top: 8px;
}

.wf-ip-kpi__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-ip-kpi__cell dt {
  color: var(--grey-500);
  font-size: 13px;
  line-height: 1;
}

.wf-ip-kpi__cell dd {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.wf-ip-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--dark-violet);
}

.wf-ip-note p {
  font-size: 14px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* «Види страхування» */
.wf-ip-lines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.wf-ip-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-16);
  background: var(--light-green-4);
}

.wf-ip-line__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 90px;
  background: #fff;
  color: var(--green);
}

.wf-ip-line__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wf-ip-line__name {
  color: var(--dark-green);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}

.wf-ip-line__online {
  color: var(--grey-600);
  font-size: 12px;
  line-height: 1;
}

/* «Про компанію» */
.wf-ip-about__body p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.wf-ip-about__body p:last-child { margin-bottom: 0; }

/* Текст обзора из редактора — типографика как в теле статьи. */
.wf-ip-content { font-size: 16px; line-height: 1.6; }
.wf-ip-content > :first-child { margin-top: 0; }
.wf-ip-content > :last-child { margin-bottom: 0; }

.wf-ip .wf-ip-content h2 {
  margin: 40px 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  scroll-margin-top: calc(var(--wf-header-h, 80px) + 16px);
}

.wf-ip .wf-ip-content h3 { margin: 28px 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; }
/* .wf-ip — ещё и .wf-ins: его сброс списков снял бы маркеры, возвращаем. */
.wf-ip .wf-ip-content p { margin: 0 0 14px; }
.wf-ip .wf-ip-content ul,
.wf-ip .wf-ip-content ol { margin: 0 0 14px; padding-left: 22px; }
.wf-ip .wf-ip-content ul { list-style: disc; }
.wf-ip .wf-ip-content ol { list-style: decimal; }
.wf-ip-content li { margin: 0 0 6px; }

@media (max-width: 959px) {
  .wf-ip .wf-ip-content h2 { margin-top: 28px; font-size: 20px; }
}

/* Отзывы — общий блок МФО; только отступ от заголовка секции под якорь. */
.wf-ip .co-reviews { scroll-margin-top: calc(var(--wf-header-h, 80px) + 16px); }

.wf-ip-disclaimer {
  color: var(--grey-500);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Обзор: мобильный макет ---------- */

@media (max-width: 959px) {
  .wf-ip { gap: 16px; }

  /* Шапка с логотипом и оценкой, «: огляд і відгуки» — только на десктопе. */
  .wf-ip .wf-ip-h1 { font-size: 24px; font-weight: 800; line-height: 1; }
  .wf-ip-h1__tail { display: none; }
  .wf-ip-head { gap: 16px; }
  .wf-ip-logo--head { width: 56px; height: 56px; }
  .wf-ip-logo--head .wf-ip-logo__box { font-size: 18px; }
  .wf-ip-logo--head .wf-ip-logo__rank { top: -7px; left: -7px; height: 24px; padding: 0 6px; font-size: 12px; }

  .wf-ip-layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 28px; }

  /* Из карточки на телефоне остаются только кнопки, оглавления нет. */
  .wf-ip-aside { position: static; max-width: none; flex: none; gap: 0; }
  .wf-ip-card { padding: 0; box-shadow: none; gap: 0; }
  .wf-ip-card__ident,
  .wf-ip-card__rows,
  .wf-ip-toc { display: none; }

  .wf-ip-main { flex: none; gap: 28px; }

  .wf-ip-section { gap: 14px; }
  .wf-ip .wf-ip-h2 { font-size: 20px; }

  /* «Показники»: без голубой плашки, цифры — в зелёном блоке, пояснение — голубое. */
  .wf-ip-metrics { gap: 14px; padding: 0; background: none; }
  .wf-ip .wf-ip-metrics .wf-ip-h2 { color: #000; }

  .wf-ip-kpi { gap: 14px; padding: 16px; background: var(--light-green-4); }
  .wf-ip-kpi__ratio { gap: 8px; }
  .wf-ip-kpi__ratio-label { color: var(--grey-600); font-size: 13px; }
  .wf-ip-kpi__ratio-value { font-size: 28px; }
  .wf-ip-kpi__bar { height: 6px; background: #fff; }
  .wf-ip-kpi__bar > span { height: 6px; }

  .wf-ip-kpi__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    padding-top: 14px;
    box-shadow: inset 0 1px 0 var(--light-green-2);
  }

  .wf-ip-kpi__cell { gap: 6px; }
  .wf-ip-kpi__cell dt { color: var(--grey-600); font-size: 12px; }
  .wf-ip-kpi__cell dd { font-size: 16px; }

  .wf-ip-note { padding: 14px; border-radius: var(--radius-16); background: var(--blue-50); }
  .wf-ip-note p { font-size: 13px; }

  .wf-ip-lines__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wf-ip-line { gap: 10px; padding: 12px; }
  .wf-ip-line__icon { width: 36px; height: 36px; }
  .wf-ip-line__icon .wf-ins-icon { width: 20px; height: 20px; }
  .wf-ip-line__name { font-size: 13px; }
}