/* ==========================================================================
   Текстовые страницы «как приложение» (29.09.2026)
   Корень — .tx-page на .container страницы. Два раздела:
   1) .text-page — pages/terms, privacy, guarantee, account-delete;
   2) .of-*      — pages/offer (поверх её встроенного <style>).

   Телефон (≤768) — TextPageScaffold приложения
   (lib/features/public_pages/widgets/text_page.dart): шапка page-mhead
   (redesign.css) + светлый лист, отступы 15/24/15/40, текст прямо на
   листе без карточки; h1 24/700 по центру mb 20; h2 20/600 lh 1.2,
   сверху 30 (у первого 10), снизу 15; h4 16/600 lh 1.5 mb 8; абзац
   16/400 lh 1.5 mb 16; список — отступ 18, точка 5, зазор 10, пункт mb 16.
   Отступы заголовков — padding, а не margin: в приложении отступы блоков
   складываются (абзац 16 + h2 30 = 46), а margin в CSS схлопнулся бы в 30.
   Экраны в приложении открываются поверх таббара — нижнего меню нет.

   ПК (≥769) — фон light, текст в белой карточке r24 ~880 по центру.
   Оферты в приложении нет (открывает сайт во внешнем браузере): телефон —
   белые карточки на светлом листе, ПК — две колонки карточками r24.

   Все @media — screen: печать оферты держится за её встроенные правила
   @media print (.header/.footer/.of-toc скрыты), их не перебиваем.
   Разметка и скрипты страниц не менялись (id s1…s17, .of-sec[data-title],
   .of-toc-list, .of-mobile-toc, #of-copy-btn, #of-copy-label — хуки).
   ========================================================================== */

.tx-page {
	--page-gutter: 15px; /* боковой отступ .container — для page-mhead */
}

/* ==========================================================================
   1. ТЕКСТОВЫЕ СТРАНИЦЫ (.text-page)
   ========================================================================== */
.tx-page .text-page {
	color: var(--black);
}

.tx-page .text-page h1.title {
	text-align: center;
	color: var(--black);
}

.tx-page .text-page h2 {
	margin: 0;
	font-weight: 600;
	line-height: 1.2;
	color: var(--black);
}

.tx-page .text-page h4 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--black);
}

.tx-page .text-page p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.5;
}

/* маркер — точка 5 px: отступ 18 + точка 5 + зазор 10 = текст с 33 */
.tx-page .text-page ul {
	margin: 0;
	padding-left: 33px;
	list-style: none;
}

.tx-page .text-page ul li {
	position: relative;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.5;
}

.tx-page .text-page ul li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -15px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--black);
}

.tx-page .text-page a {
	color: var(--accent);
}

/* ---------- Телефон — экран приложения ---------- */
@media screen and (max-width: 768px) {
	/* светлый фон (и под листом, и под подвалом) */
	body:has(.tx-page),
	main.content:has(.tx-page) {
		background: var(--light);
	}

	/* в приложении эти экраны поверх таббара — нижнего меню нет
	   (как у профиля продавца); запас подвала под меню больше не нужен */
	body:has(.tx-page) .mobile-menu {
		display: none;
	}

	body:has(.tx-page) .footer {
		margin-bottom: max(24px, env(safe-area-inset-bottom));
	}

	/* лист: отступы ListView 15/24/15/40 (main.css давал padding-top 15) */
	.tx-page .text-page.page-msheet {
		padding: 24px 15px 40px;
	}

	.tx-page .text-page h1.title {
		margin: 0 0 20px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
	}

	.tx-page .text-page h2 {
		padding: 30px 0 15px;
		font-size: 20px;
	}

	.tx-page .text-page h1.title + h2 {
		padding-top: 10px;
	}

	/* ссылки accent без подчёркивания; длинный адрес переносится,
	   а не вылезает за экран (main.css держал nowrap) */
	.tx-page .text-page a {
		border-bottom: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* ---------- ПК — белая карточка на светлом фоне ---------- */
@media screen and (min-width: 769px) {
	body:has(.tx-page) {
		background: var(--light);
	}

	/* низ 24: последний абзац/пункт добавляет свои 16 → 40 */
	.tx-page .text-page {
		max-width: 880px;
		margin: 0 auto;
		padding: 40px 40px 24px;
		border-radius: 24px;
		background: var(--white);
	}

	.tx-page .text-page h1.title {
		margin: 0 0 28px;
		font-size: 32px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.4px;
	}

	.tx-page .text-page h2 {
		padding: 32px 0 14px;
		font-size: 22px;
	}

	.tx-page .text-page h1.title + h2 {
		padding-top: 4px;
	}

	.tx-page .text-page a {
		border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
	}

	.tx-page .text-page a:hover {
		border-bottom-color: transparent;
	}
}

@media screen and (min-width: 769px) and (max-width: 992px) {
	.tx-page .text-page {
		padding: 32px 32px 16px;
	}

	.tx-page .text-page h1.title {
		font-size: 28px;
	}
}

/* ==========================================================================
   2. ОФЕРТА (.of-*) — pages/offer.blade.php
   Встроенный <style> страницы задаёт раскладку (две колонки, оглавление,
   пункты); здесь — цвета токенами, карточки без рамок и теней, липкие
   отступы под шапку ПК. .of — он же .page-msheet на телефоне.
   ========================================================================== */
@media screen {
	.tx-page .of {
		color: var(--black);
	}

	/* --- шапка документа: заголовок без градиента --- */
	.tx-page .of-eyebrow {
		border: 0;
		background: var(--card-lilac);
		color: var(--accent);
	}

	.tx-page .of-h1 {
		background: none;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: var(--black);
	}

	.tx-page .of-lead {
		color: var(--gray);
	}

	.tx-page .of-meta-pill {
		border: 0;
		background: var(--white);
		color: var(--black);
	}

	/* --- карточки: белые, без рамки и тени --- */
	.tx-page .of-toc,
	.tx-page .of-doc,
	.tx-page .of-mobile-toc {
		border: 0;
		box-shadow: none;
		background: var(--white);
	}

	/* --- оглавление --- */
	.tx-page .of-toc-title {
		color: var(--label-gray);
	}

	.tx-page .of-toc a,
	.tx-page .of-mobile-toc-body a {
		color: var(--black);
	}

	.tx-page .of-toc a:hover {
		background: var(--light);
		color: var(--accent);
	}

	.tx-page .of-toc a.is-active {
		background: var(--card-lilac);
		color: var(--accent);
		font-weight: 600;
	}

	.tx-page .of-toc-num {
		color: var(--label-gray);
	}

	.tx-page .of-toc a.is-active .of-toc-num {
		color: var(--accent);
	}

	.tx-page .of-mobile-toc > summary {
		color: var(--black);
	}

	.tx-page .of-mobile-toc-body a:active {
		background: var(--light);
	}

	/* --- текст документа --- */
	.tx-page .of-preamble {
		border-bottom: 1px solid var(--card-lilac);
		color: rgb(22 14 24 / 70%); /* black 70 % */
	}

	.tx-page .of-preamble strong {
		color: var(--black);
	}

	/* номер раздела — сплошной accent вместо градиента */
	.tx-page .of-sec-num {
		background: var(--accent);
		color: var(--white);
	}

	.tx-page .of-sec-title {
		color: var(--black);
	}

	.tx-page .of-cl {
		color: var(--black);
	}

	.tx-page .of-cl--sub .of-cl-num {
		color: var(--label-gray);
	}

	.tx-page .of-cl b,
	.tx-page .of-cl strong,
	.tx-page .of-term dt,
	.tx-page .of-req-name,
	.tx-page .of-req-v,
	.tx-page .of-formula-body {
		color: var(--black);
	}

	/* «Например» */
	.tx-page .of-eg {
		border-left-color: var(--accent);
		border-radius: 0 12px 12px 0;
		background: var(--light);
		color: var(--gray);
	}

	/* формула возврата */
	.tx-page .of-formula {
		border: 0;
		border-radius: 16px;
		background: var(--light);
	}

	.tx-page .of-formula-note {
		color: var(--gray);
	}

	/* термины */
	.tx-page .of-term {
		border: 0;
		border-radius: 14px;
		background: var(--light);
		color: rgb(22 14 24 / 70%); /* black 70 % */
	}

	.tx-page .of-term dd::before {
		color: var(--label-gray);
	}

	/* реквизиты */
	.tx-page .of-req-card {
		border: 1px solid var(--card-lilac);
		border-radius: 16px;
	}

	.tx-page .of-req-cap {
		background: var(--accent);
		color: var(--white);
	}

	.tx-page .of-req-row + .of-req-row {
		border-top: 1px solid var(--card-lilac);
	}

	.tx-page .of-req-k {
		color: var(--gray);
	}

	/* «Скопировать реквизиты» — кнопка приложения 48 r16 */
	.tx-page .of-copy {
		height: 48px;
		padding: 0 24px;
		justify-content: center;
		border-radius: 16px;
		background: var(--accent);
		color: var(--white);
		font-size: 14px;
		font-weight: 700;
		transition: background 0.2s ease;
	}

	.tx-page .of-copy:hover {
		transform: none;
		box-shadow: none;
		background: var(--accent-alternate);
	}

	.tx-page .of-copy svg {
		color: var(--white);
	}

	.tx-page .of-copy.is-done {
		background: var(--call-green);
	}

	/* подвал документа */
	.tx-page .of-foot {
		border-top: 1px solid var(--card-lilac);
		color: var(--gray);
	}
}

/* ---------- Оферта: телефон — карточки на светлом листе ---------- */
@media screen and (max-width: 768px) {
	/* .of = .page-msheet: встроенный <style> перебивал лист (фон, r16,
	   поля 22/14) — возвращаем лист как у остальных страниц */
	.tx-page .of {
		max-width: none;
		margin: -24px calc(-1 * var(--page-gutter)) 0;
		padding: 24px 15px 40px;
		border-radius: 24px 24px 0 0;
		background: var(--light);
		line-height: 1.5;
	}

	/* заголовок как h1 текстовых страниц: 24/700 по центру; метка
	   «Документы» дублирует шапку — на телефоне не показываем */
	.tx-page .of-hero {
		margin-bottom: 20px;
	}

	.tx-page .of-eyebrow {
		display: none;
	}

	.tx-page .of-h1 {
		margin: 0 0 10px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0;
	}

	.tx-page .of-lead {
		margin-bottom: 14px;
		font-size: 14px;
		line-height: 1.5;
	}

	.tx-page .of-meta-pill {
		padding: 6px 12px;
		font-size: 12px;
	}

	/* оглавление — белая карточка r16 */
	.tx-page .of-mobile-toc {
		margin-bottom: 12px;
		border-radius: 16px;
	}

	.tx-page .of-mobile-toc > summary {
		padding: 14px 16px;
		font-size: 15px;
		font-weight: 600;
	}

	.tx-page .of-mobile-toc-body {
		padding: 0 8px 10px;
	}

	/* документ — белая карточка r20 */
	.tx-page .of-doc {
		padding: 20px 16px 24px;
		border-radius: 20px;
	}

	.tx-page .of-preamble {
		padding-bottom: 18px;
		font-size: 14px;
		line-height: 1.6;
	}

	.tx-page .of-sec {
		padding-top: 24px;
		scroll-margin-top: 16px;
	}

	.tx-page .of-sec-head {
		gap: 10px;
		margin-bottom: 14px;
	}

	.tx-page .of-sec-num {
		width: 28px;
		height: 28px;
		border-radius: 9px;
		font-size: 13px;
	}

	.tx-page .of-sec-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0;
	}

	/* номер пункта — в строку с текстом, как задумано во встроенном
	   <style> («display: inline» у номера): в сетке номер становился
	   отдельной строкой, поэтому пункт на телефоне — обычный блок */
	.tx-page .of-cl {
		display: block;
		margin-bottom: 12px;
		font-size: 15px;
		line-height: 1.6;
	}

	.tx-page .of-term {
		padding: 12px 14px;
	}

	.tx-page .of-foot {
		margin-top: 24px;
	}
}

/* ---------- Оферта: ПК — колонки карточками r24 на светлом фоне ---------- */
@media screen and (min-width: 769px) {
	.tx-page .of {
		max-width: none;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.tx-page .of-hero {
		margin-bottom: 28px;
	}

	.tx-page .of-h1 {
		font-size: 34px;
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.6px;
	}

	.tx-page .of-layout {
		gap: 24px;
	}

	/* липкая шапка ПК — 124 px: оглавление и якоря разделов ниже неё */
	.tx-page .of-toc {
		top: 144px;
		max-height: calc(100vh - 164px);
		padding: 20px 14px;
		border-radius: 24px;
	}

	.tx-page .of-sec {
		scroll-margin-top: 144px;
	}

	.tx-page .of-doc {
		padding: 36px 40px 40px;
		border-radius: 24px;
	}

	/* 769–992: оглавление аккордеоном над документом (встроенный <style>) */
	.tx-page .of-mobile-toc {
		border-radius: 20px;
	}
}

/* ==========================================================================
   Печать — шапки телефона нет, лист без сдвига под неё
   ========================================================================== */
@media print {
	.tx-page .page-mhead {
		display: none !important;
	}

	.tx-page .page-msheet {
		margin: 0 !important;
	}
}