/*
 * Siluette UI 0.4.1 — компоненты «icon_list», «header_icons», «includes_icons»
 * Порт примера Flowbite «List with icons»
 * ( https://flowbite.com/docs/typography/lists/#icons ) под наш аккордеон.
 *
 * Все правила продублированы «с нуля» (а не только переопределения), чтобы
 * компонент не рассыпался, если сниппет с аккордеоном однажды уберут.
 * Цвет галочки меняется в одном месте — color у .su-li__icon.
 *
 * СТАНДАРТ РАЗМЕРОВ (см. readme.md, раздел «Стандарт»):
 * галочка пункта — 18×18, иконка заголовка секции — 24×24,
 * иконка строки «Курс включает» — 18×18. Всем иконкам в flex-контейнерах
 * обязательно flex: 0 0 <размер> — БЕЗ этого иконка сжимается по длине
 * текста пункта (грабли №41 в mistakes.md).
 */

/* Списки с галочками (ul.custom-list) — работают ВЕЗДЕ: в аккордеоне
   краткого описания, в расширенном описании товара, в текстовых виджетах.
   Поэтому правила без привязки к .accordion-content. */

.custom-list.su-list {
	list-style: none;
	padding-left: 0;
	margin: 15px 0;
}

.custom-list.su-list li.su-li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	line-height: 1.5;
}

.custom-list.su-list li.su-li:last-child {
	margin-bottom: 0;
}

/* Галочка пункта: размер задан и CSS (главное), и атрибутами SVG
   (страховка, если CSS не загрузился). flex: 0 0 18px запрещает сжатие. */

.su-li__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	color: #16a34a;
}

/* Шаги FAQ («Как купить и получить курс?», div.faq-step):
   размеры даёт общее правило выше, здесь только отступ сверху. */

.custom-accordion-wrapper .faq-step.su-li .su-li__icon {
	margin: 4px 10px 0 0;
}

/* Иконки заголовков секций (стиль Bootstrap Icons).
   Размер/отступы — как у старых PNG-иконок (.accordion-icon в accordion.css).
   Цвет линий меняется здесь. */

.accordion-header .su-hicon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	margin-right: 10px;
	color: #374151;
}

/* Строки «Курс включает / містить» — аналоги старых JPG
   (камера/документ/скачивание/плей/бесконечность/медаль) */

.course-includes-list .su-ci-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-right: 10px;
	color: #374151;
}

/* ═════════════════════ Акции у цены — зона single-product-field-top ═════
 *
 * (0.6.0, 25.08.2026) Виджеты акций стоят СРАЗУ ПОД ЦЕНОЙ — по Baymard
 * предложение, оторванное от цены, либо не замечают, либо не понимают,
 * к чему оно относится. Стили лежат именно здесь, а не в course-page.css:
 * тот грузится только на пилотных товарах, а зона видна на всех.
 *
 * Виджет — обычный текстовый, владелец правит слова в админке. Вся
 * одёжка (плашка, иконка, цвет) навешивается отсюда, поэтому внутри
 * виджета не нужны ни картинки, ни встроенные стили.
 */

.su-cp-price-widgets {
	/* снизу столько же, сколько сверху: плашка прилипала к строке
	   «Вы экономите» — та идёт следующим элементом без своего отступа */
	margin: 12px 0 14px;
	display: grid;
	gap: 8px;
}

.su-cp-price-widget {
	position: relative;
	background: #F0FDF4;
	border-left: 3px solid #16A34A;
	border-radius: 6px;
	padding: 9px 14px 9px 38px;
	font-size: 14px;
	line-height: 1.45;
	color: #1F2937;
}

.su-cp-price-widget b,
.su-cp-price-widget strong {
	color: #15803D;
}

.su-cp-price-widget::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 11px;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath fill-rule='evenodd' d='M1 4.5A2.5 2.5 0 0 1 3.5 2h8A1.5 1.5 0 0 1 13 3.5V5h.5A1.5 1.5 0 0 1 15 6.5v6A1.5 1.5 0 0 1 13.5 14h-10A2.5 2.5 0 0 1 1 11.5v-7zm11.5 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}

/* Второй план плашки: пояснение после тире. Главное — «−20% при покупке
   от 2 курсов» (strong, зелёный), пояснение мельче и тёмным, чтобы
   выгода читалась первой, а условие вторым. */
.su-cp-price-widget small {
	font-size: 13px;
	font-weight: 400;
	color: #1F2937;
}

.su-cp-price-widget .textwidget > p {
	margin: 0;
}

.su-cp-price-widget .textwidget a {
	color: #15803D;
	text-decoration: underline;
}

/* Заголовок виджета (before_title из register_sidebar). До 0.7.0 не был
   стилизован вовсе и наследовал абзац темы — разнобой прямо у цены. */
.su-cp-price-widget__t {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 700;
	color: #15803D;
}

/* ═════════════════════ Шаги покупки — нумерованные кружки ═══════════════
 *
 * (0.6.0, 25.08.2026) Раздел «Покупка занимает минуту» в виджете под
 * кнопкой. Шаги идут по порядку, поэтому номера, а не галочки: галочка
 * говорит «сделано», а здесь последовательность действий.
 *
 * Номер рисует CSS-счётчик — в разметке цифр нет. Так номера не съедут,
 * если владелец поменяет местами или удалит шаг в админке.
 */

.su-buy-steps {
	counter-reset: su-buy;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.su-buy-steps li {
	counter-increment: su-buy;
	position: relative;
	padding-left: 30px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #374151;
}

.su-buy-steps li::before {
	content: counter(su-buy);
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #16A34A;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.su-buy-note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #E5E7EB;
	font-size: 13px;
	line-height: 1.5;
	color: #6B7280;
}

.su-buy-note a {
	color: #15803D;
}