/* Стилі документації «Інтернет-магазин HugeProfit».
   Для WordPress: вставити один раз у «Вигляд → Налаштувати → Додатковий CSS».
   Усі правила обмежені класом .hp-doc, щоб не зачепити тему сайту. */

.hp-doc { --hp-accent: #3e8ed0; --hp-ok: #1f8a4c; --hp-warn: #b7791f; --hp-border: #e3e7ee; --hp-soft: #f5f8fc;
  max-width: 860px; line-height: 1.65; font-size: 17px; }
.hp-doc h2 { margin: 2.2em 0 .6em; font-size: 1.6em; line-height: 1.25; }
.hp-doc h3 { margin: 1.8em 0 .5em; font-size: 1.25em; }
.hp-doc p, .hp-doc ul, .hp-doc ol { margin: 0 0 1em; }
.hp-doc .hp-lead { font-size: 1.1em; color: #4a5568; }

/* Пронумерований крок */
.hp-doc .hp-step { border: 1px solid var(--hp-border); border-radius: 14px; padding: 20px 24px 8px; margin: 0 0 24px; background: #fff; }
.hp-doc .hp-step > h2 { margin: 0 0 .6em; font-size: 1.3em; display: flex; gap: .5em; align-items: baseline; }
.hp-doc .hp-step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em;
  border-radius: 50%; background: var(--hp-accent); color: #fff; font-size: .8em; font-weight: 700; }
.hp-doc .hp-step ol { padding-left: 1.3em; }
.hp-doc .hp-step li { margin-bottom: .35em; }

/* Назви кнопок і полів інтерфейсу */
.hp-doc .hp-ui { font-weight: 600; white-space: nowrap; }

/* Плашки */
.hp-doc .hp-note { border-radius: 10px; padding: 12px 16px; margin: 0 0 1.2em; background: var(--hp-soft); border-left: 4px solid var(--hp-accent); }
.hp-doc .hp-note.hp-ok { background: #eef8f2; border-left-color: var(--hp-ok); }
.hp-doc .hp-note.hp-warn { background: #fdf6ea; border-left-color: var(--hp-warn); }
.hp-doc .hp-note p:last-child { margin-bottom: 0; }

/* Скриншоти */
.hp-doc .hp-shot { margin: 8px 0 22px; }
.hp-doc .hp-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--hp-border); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(20, 30, 50, .06); }
.hp-doc .hp-shot.hp-narrow img { max-width: 420px; }
.hp-doc .hp-shot.hp-phone img { max-width: 300px; }
.hp-doc .hp-shot figcaption { font-size: .85em; color: #6b7280; margin-top: 6px; }
.hp-doc .hp-shots-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.hp-doc .hp-shots-row .hp-shot { flex: 1 1 260px; }

/* Таблиці */
.hp-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95em; }
.hp-doc th, .hp-doc td { border: 1px solid var(--hp-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.hp-doc th { background: var(--hp-soft); }

/* Зміст / навігація між статтями */
.hp-doc .hp-toc { border: 1px solid var(--hp-border); border-radius: 12px; padding: 14px 20px; background: var(--hp-soft); }
.hp-doc .hp-next { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--hp-border); }