/* ==========================================================================
 * Информационные страницы: /token/, /faq/, /terms/, /privacy/, /dmca/, /2257/, /advertising/, /content-removal/
 * (шаблоны legal-router.php и information.php, содержимое — information/*.php).
 * Раньше у этих страниц не было стилей: табы шли столбиком, картинка токена растягивалась на всю ширину.
 * Подключается в template-parts/header/css-style.php.
 * ========================================================================== */
.container-sub-info, .main-container {
	--in-bg: #181818;
	--in-surface: #242424;
	--in-line: #2e2e2e;
	--in-text: #ffffff;
	--in-text-2: #e0e0e0;
	--in-muted: #b0b0b0;
	--in-accent: var(--ph-orange-500, #ff9900);
	padding: 24px 0 56px;
	color: var(--in-text-2);
	font-family: var(--ph-font, Arial, sans-serif);
}

/* ---- табы разделов ---- */
.head-sub-info { margin: 0 0 28px; border-bottom: 1px solid var(--in-line, #2e2e2e); }
.head-sub-info ul {
	display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.head-sub-info ul::-webkit-scrollbar { display: none; }
.head-sub-info li { flex: none; }
.head-sub-info .tab {
	position: relative; display: block; padding: 12px 16px;
	font: 700 13px/1 var(--ph-font, Arial, sans-serif); letter-spacing: .03em; text-transform: uppercase;
	color: var(--in-muted, #b0b0b0); text-decoration: none; white-space: nowrap; transition: color .15s;
}
.head-sub-info .tab::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
	background: var(--in-accent, var(--ph-orange-500, #ff9900)); transform: scaleX(0); transition: transform .2s;
}
.head-sub-info .tab:hover, .head-sub-info .tab:focus-visible { color: #ffffff; }
.head-sub-info .tab.sel { color: var(--in-accent, var(--ph-orange-500, #ff9900)); }
.head-sub-info .tab.sel::after { transform: scaleX(1); }

/* ---- общий текст страниц ---- */
.headline-sub-info { margin: 0 0 20px; }
.headline-sub-info h1, .headline-sub-info-box h1 { margin: 0; font: 700 30px/1.2 var(--ph-font, Arial, sans-serif); color: var(--in-text, #fff); }
.content-sub-info-page { max-width: 880px; font-size: 15px; line-height: 1.65; color: var(--in-text-2, #e0e0e0); }
.content-sub-info-page h2 { margin: 28px 0 10px; font: 700 20px/1.3 var(--ph-font, Arial, sans-serif); color: var(--in-text, #fff); }
.content-sub-info-page h3 { margin: 22px 0 8px; font-size: 17px; color: var(--in-text, #fff); }
.content-sub-info-page p { margin: 0 0 14px; }
.content-sub-info-page ul, .content-sub-info-page ol { margin: 0 0 16px; padding-left: 22px; }
.content-sub-info-page li { margin: 0 0 8px; }
.content-sub-info-page li::marker { color: var(--in-accent, var(--ph-orange-500, #ff9900)); }
.content-sub-info-page strong { color: var(--in-text, #fff); }
.content-sub-info-page a { color: var(--in-accent, var(--ph-orange-500, #ff9900)); text-decoration: underline; text-underline-offset: 2px; }
.content-sub-info-page a:hover { color: #ffaa22; }
.content-sub-info-page .icon-token img { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

/* ==========================================================================
 * TOKENS (/token/, information/token.php)
 * ========================================================================== */
.phtk { display: grid; gap: 28px; }

/* шапка */
.phtk-hero {
	display: flex; align-items: center; gap: 28px; padding: 28px 32px;
	background: radial-gradient(120% 140% at 0% 0%, rgba(var(--ph-accent-rgb, 255, 153, 0), .16) 0%, rgba(var(--ph-accent-rgb, 255, 153, 0), 0) 55%), var(--in-bg, #181818);
	border: 1px solid var(--in-line, #2e2e2e); border-radius: 12px;
}
.phtk-hero__coin { flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 211, 77, .08); box-shadow: 0 0 0 1px rgba(255, 211, 77, .25), 0 10px 40px rgba(255, 170, 0, .18); }
.phtk-hero__coin svg { width: 72px; height: 72px; }
.phtk-hero__body { min-width: 0; }
.phtk-hero__title { margin: 0 0 10px; font: 700 30px/1.2 var(--ph-font, Arial, sans-serif); color: #ffffff; }
.phtk-hero__lead { max-width: 760px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--in-text-2, #e0e0e0); }
.phtk-hero__me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.phtk-balance { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--in-muted, #b0b0b0); }
.phtk-balance b { font-size: 22px; color: #ffd34d; }
.phtk-streak { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 700; color: #ffffff; background: var(--in-surface, #242424); border-radius: 999px; }
.phtk-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px;
	font: 700 14px var(--ph-font, Arial, sans-serif); color: var(--in-text-2, #e0e0e0);
	background: var(--in-surface, #242424); border: 1px solid #3a3a3a; border-radius: 6px; cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.phtk-btn:hover, .phtk-btn:focus-visible { color: var(--in-accent, var(--ph-orange-500, #ff9900)); background: #2a2a2a; border-color: var(--in-accent, var(--ph-orange-500, #ff9900)); }
.phtk-btn--primary { color: #000000; background: var(--in-accent, var(--ph-orange-500, #ff9900)); border-color: var(--in-accent, var(--ph-orange-500, #ff9900)); }
.phtk-btn--primary:hover, .phtk-btn--primary:focus-visible { color: #000000; background: #ffaa22; border-color: #ffaa22; }

/* разделы */
.phtk-sec__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 22px/1.2 var(--ph-font, Arial, sans-serif); color: #ffffff; }
.phtk-sec__title::before { content: ""; width: 4px; height: 22px; background: var(--in-accent, var(--ph-orange-500, #ff9900)); border-radius: 2px; }

/* правила начисления */
.phtk-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.phtk-rule {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto;
	column-gap: 12px; row-gap: 6px; padding: 18px;
	background: var(--in-bg, #181818); border: 1px solid var(--in-line, #2e2e2e); border-radius: 10px;
	transition: border-color .15s, transform .15s;
}
.phtk-rule:hover { border-color: rgba(var(--ph-accent-rgb, 255, 153, 0), .6); transform: translateY(-2px); }
.phtk-rule__ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; color: var(--in-accent, var(--ph-orange-500, #ff9900)); background: rgba(var(--ph-accent-rgb, 255, 153, 0), .1); border-radius: 10px; }
.phtk-rule__amt { display: inline-flex; align-items: center; gap: 5px; justify-self: start; height: 26px; padding: 0 10px; font-size: 14px; font-weight: 800; color: #000000; background: #ffd34d; border-radius: 999px; }
.phtk-rule__amt svg { width: 14px; height: 14px; }
.phtk-rule__title { margin: 0; font-size: 16px; line-height: 1.3; color: #ffffff; }
.phtk-rule__desc { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--in-muted, #b0b0b0); }
.phtk-rule__limit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 0; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--in-muted, #b0b0b0); border-top: 1px solid var(--in-line, #2e2e2e); }
.phtk-rule__ok { color: #3ddc4b; }
.phtk-rule.is-done { border-color: rgba(61, 220, 75, .35); }

/* на что тратить */
.phtk-spend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.phtk-spend__card {
	display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px;
	color: var(--in-text-2, #e0e0e0); text-decoration: none; background: var(--in-bg, #181818);
	border: 1px solid var(--in-line, #2e2e2e); border-radius: 10px; transition: border-color .15s, background-color .15s;
}
.phtk-spend__card:hover, .phtk-spend__card:focus-visible { border-color: var(--in-accent, var(--ph-orange-500, #ff9900)); background: #1e1e1e; }
.phtk-spend__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: #ffd34d; background: rgba(255, 211, 77, .1); border-radius: 50%; }
.phtk-spend__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.phtk-spend__text b { font-size: 15px; color: #ffffff; }
.phtk-spend__text small { font-size: 13px; line-height: 1.45; color: var(--in-muted, #b0b0b0); }
.phtk-spend__arrow { flex: none; color: var(--in-muted, #b0b0b0); transition: transform .15s, color .15s; }
.phtk-spend__card:hover .phtk-spend__arrow { color: var(--in-accent, var(--ph-orange-500, #ff9900)); transform: translateX(3px); }

/* правила/примечания */
.phtk-notes { padding: 20px 22px; background: var(--in-bg, #181818); border: 1px solid var(--in-line, #2e2e2e); border-radius: 10px; }
.phtk-notes ul { margin: 0; padding-left: 20px; }
.phtk-notes li { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--in-text-2, #e0e0e0); }
.phtk-notes li::marker { color: var(--in-accent, var(--ph-orange-500, #ff9900)); }
.phtk-notes__help { margin: 14px 0 0; font-size: 14px; color: var(--in-muted, #b0b0b0); }
.phtk-notes__help a { color: var(--in-accent, var(--ph-orange-500, #ff9900)); font-weight: 700; }

/* ---- примечание «документ на английском» (не-английские языки) ---- */
.phinfo-lang-note { display: flex; align-items: center; gap: 10px; max-width: 880px; margin: 0 0 20px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--in-text-2, #e0e0e0); background: rgba(var(--ph-accent-rgb, 255, 153, 0), .08); border: 1px solid rgba(var(--ph-accent-rgb, 255, 153, 0), .35); border-radius: 8px; }
.phinfo-lang-note::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; font: 700 13px/1 Georgia, serif; color: #000; background: var(--in-accent, var(--ph-orange-500, #ff9900)); border-radius: 50%; }

/* ---- адаптив ---- */
@media (max-width: 767.98px) {
	.container-sub-info, .main-container { padding: 12px 0 40px; }
	.head-sub-info { margin-bottom: 18px; }
	.head-sub-info .tab { padding: 12px 12px; }
	.headline-sub-info h1, .headline-sub-info-box h1 { font-size: 24px; }
	.phtk { gap: 22px; }
	.phtk-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 18px; }
	.phtk-hero__coin { width: 84px; height: 84px; }
	.phtk-hero__coin svg { width: 54px; height: 54px; }
	.phtk-hero__title { font-size: 24px; }
	.phtk-spend { grid-template-columns: 1fr; }
	.phtk-rules { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .phtk-rule, .phtk-spend__arrow { transition: none; } .phtk-rule:hover { transform: none; } }

/* FAQ: ссылки в ответах (information/faq.php) */
.faq--answer a { color: var(--in-accent, var(--ph-orange-500, #ff9900)); text-decoration: underline; text-underline-offset: 2px; }
.faq--answer a:hover, .faq--answer a:focus-visible { color: #ffaa22; }
.faq--question:focus-visible { outline: 2px solid var(--in-accent, var(--ph-orange-500, #ff9900)); outline-offset: -2px; }

/* Табы-кнопки (Advertise / FAQ / Terms …): контрастные цвета при любых сторонних стилях.
   На сайте к табам применялись чужие стили (белые «таблетки» со светло-серым текстом, активный — оранжевый текст
   на оранжевом фоне) — текст сливался. Здесь цвета заданы явно и с приоритетом. */
.container-sub-info .head-sub-info, .head-sub-info { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.head-sub-info ul { gap: 8px !important; padding: 2px 0 10px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.head-sub-info li { background: transparent !important; border: 0 !important; margin: 0 !important; }
.head-sub-info .tab, .head-sub-info .tab span {
	background: transparent !important; color: #d6d6d6 !important; -webkit-text-fill-color: currentColor;
}
.head-sub-info .tab {
	display: inline-flex !important; align-items: center; min-height: 38px; padding: 0 16px !important;
	border: 1px solid #343434 !important; border-radius: 999px !important; background: #1b1b1b !important;
	box-shadow: none !important; font-size: 12.5px; line-height: 1 !important; text-shadow: none !important;
	transition: background .15s, border-color .15s, color .15s;
}
.head-sub-info .tab::after { display: none !important; }
.head-sub-info .tab:hover, .head-sub-info .tab:focus-visible { background: #262626 !important; border-color: #4a4a4a !important; outline: none; }
.head-sub-info .tab:hover, .head-sub-info .tab:hover span, .head-sub-info .tab:focus-visible span { color: #fff !important; }
.head-sub-info .tab:focus-visible { box-shadow: 0 0 0 2px rgba(var(--ph-accent-rgb, 255, 153, 0), .55) !important; }
.head-sub-info .tab.sel, .head-sub-info .tab[aria-current="page"] { background: var(--ph-orange-500, #ff9900) !important; border-color: var(--ph-orange-500, #ff9900) !important; }
.head-sub-info .tab.sel, .head-sub-info .tab.sel span, .head-sub-info .tab[aria-current="page"], .head-sub-info .tab[aria-current="page"] span { color: #111 !important; }
@media (max-width: 767px) { .head-sub-info .tab { min-height: 36px; padding: 0 14px !important; font-size: 12px; } }