/* Страницы раздела «Виджеты» (pages/page-widget.php), поверх analytics.css.
   Только переменные темы и схемы 4l (--accent / --on-accent / --accent-tint) — светлая и тёмная темы без отдельных правил. */

/* ---------- Знакомо? — четыре карточки 2×2 ---------- */
.wg-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wg-pains .an-pains__item, .wg-pains .an-pains__item:nth-child(4), .wg-pains .an-pains__item:nth-child(5) { grid-column: span 1; }

/* ---------- Возможности ---------- */
.wg-page .an-feature__text .subtitle { margin-bottom: .75rem; }
.wg-feature__title { margin: 0 0 1.5rem; font-size: 1.75rem; font-weight: 800; line-height: 1.2; color: var(--color-text-heading); }

/* ---------- Что важно знать / Кому подойдёт ---------- */
.wg-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.wg-note { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); }
/* Акцентная полоска внутри карточки: толстая border-top на скруглённых углах давала «уши» */
.wg-note::before { content: ""; width: 2.5rem; height: 4px; margin-bottom: .5rem; border-radius: 2px; background: var(--accent); }
.wg-note b { font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--color-text-heading); }
.wg-note span { color: var(--color-text); line-height: 1.45; }

/* ---------- Стоимость ---------- */
.wg-prices { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1.25rem; align-items: stretch; }
.wg-price { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 2rem 1.75rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); }
.wg-price__term { margin: 0; font-weight: 700; color: var(--color-text); }
.wg-price__value { margin: 0; font-size: 2.5rem; font-weight: 800; line-height: 1.1; color: var(--color-text-heading); white-space: nowrap; }
.wg-price__badge { align-self: flex-start; margin-top: .5rem; padding: .3rem .8rem; border-radius: 999px; background: var(--on-accent); color: var(--accent); font-size: .8125rem; font-weight: 700; }
.wg-price--accent { background: var(--accent); border-color: var(--accent); }
.wg-price--accent .wg-price__term, .wg-price--accent .wg-price__value { color: var(--on-accent); }
.wg-price--cta { justify-content: space-between; gap: 1.25rem; background: var(--accent-tint); border-style: dashed; border-color: var(--accent-line); }
.wg-price__note { margin: 0; line-height: 1.5; color: var(--color-text); }
.wg-price--cta .btn { align-self: flex-start; }

/* ---------- Как установить / подключить ---------- */
.wg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.wg-step { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); }
.wg-step:not(:last-child)::after { content: ""; position: absolute; top: 3rem; right: -1.25rem; width: 1.25rem; border-top: 2px dashed var(--accent-line); }
.wg-step__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.125rem; font-weight: 800; }
.wg-step__title { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; color: var(--color-text-heading); }
.wg-step__text { margin: 0; line-height: 1.5; color: var(--color-text); }

/* ---------- Политика ---------- */
.wg-legal { margin: 1.5rem 0 0; color: var(--color-text-secondary); font-size: .9375rem; }
.wg-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Другие решения ---------- */
.wg-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.wg-more__item { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); background: var(--color-bg-2); border: 1px solid var(--color-border-secondary); color: var(--color-text); text-decoration: none; transition: transform var(--transition), border-color var(--transition); }
.wg-more__item:hover { transform: translateY(-3px); border-color: var(--accent); }
.wg-more__item b { font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--color-text-heading); }
.wg-more__item span { line-height: 1.5; }
.wg-more__item .an-link { margin-top: auto; padding-top: .5rem; }

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
  .wg-notes, .wg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-step::after { display: none; }
  .wg-prices { grid-template-columns: 1fr 1fr; }
  .wg-price--cta { grid-column: 1 / -1; }
  .wg-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-feature__title { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .wg-pains, .wg-notes, .wg-prices, .wg-more, .wg-steps { grid-template-columns: minmax(0, 1fr); }
  .wg-price__value { font-size: 2rem; }
  .wg-price--cta .btn, .wg-page .an-hero__actions .an-cta-btn { width: 100%; justify-content: center; }
}

/* Финальный CTA на синем: вторичная ссылка «Задать вопрос» рядом с кнопкой установки */
.an-final .an-link { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.an-final .an-link:hover { color: #fff; text-decoration-color: #fff; }