/* Слой оформления оплаты VANYA (/buy/*, /abuse) поверх Bulma и старого <style> buy.ejs — этап «единый стиль», STYLE_SPEC §5.7
   (подход «б»: DOM и скрипты страницы не трогаем, меняем вид). Файл создан пустым 09.10.2026 (пакет F), чтобы у него появился
   хеш в ссылке (CHECKOUT_ASSETS в front.js, seo.checkoutCss); заполняет пакет O7.
   Правила:
   - подключать только вне фрейма приложения: <% if(!locals.appEmbed){ %><link rel="stylesheet" href="<%= seo.checkoutCss %>"><% } %>
     (фрейм 1.21 рисуется старым <style>, его вид не меняется);
   - каждое правило — под html:not(.vv-embed) (партиал app-embed ставит этот класс на <html> во фрейме);
   - шрифт — var(--font) (css/onest.css), цвета — токены lp2 (#E8101C, #C80E19, #1C1C1E, #6C6C70, #F2F2F7, #D1D1D6);
   - в именах классов нет подстроки «vpn» (asVPS).
   Кэшируется Cloudflare: ссылка идёт с ?v=<хеш содержимого>, после правки нужен рестарт front.js.

   Заполнено 09.10.2026 (пакет O7).
   Где стоит ссылка. buy.ejs и abuse.ejs ставят её первой строкой <body>, сразу после <head>: таблица стилей в конце <body> (после
   старого <style>) дала бы мелькание прежнего вида, пока файл грузится. Каскад от этого не зависит: префикс html:not(.vv-embed)
   добавляет каждому правилу (0,1,1), поэтому правило слоя сильнее правила старого <style> buy.ejs с тем же селектором, где бы
   оно ни стояло. Отсюда приём, которого держится весь файл: селектор старого <style> повторяется здесь целиком, с префиксом.
   Если старое правило с !important — новое тоже с !important (тогда снова решает специфичность).
   Что меняется (STYLE_SPEC §5.7 и §1): шрифт Onest вместо системного; жёлтые и оранжевые акценты (кружки шагов, рамка
   фокуса, жёлтая плашка «Итого», бейджи сводки, кнопка «Да, правильная почта») — на нейтральные и красный lp2; панели без теней
   и рамок, радиус 22; поля 52 px; главные кнопки — красные #E8101C; вкладки тарифов — сегментный переключатель; галочки у
   преимуществ в сводке и капс-подписи («ИТОГО К ОПЛАТЕ», «APP STORE») убраны; подвал (partials/footer.ejs) — в шрифте и
   цветах сайта. Тексты, суммы, раскрытие у кнопки оплаты и рейтинги — прежние. */

/* ---------- токены: старые переменные <style> buy.ejs перенастроены на палитру lp2 ---------- */
html:not(.vv-embed) {
	--primary: #E8101C;
	--primary-strong: #D00C18;
	--info: #C80E19;
	--text: #1C1C1E;
	--text-2: #6C6C70;
	--text-3: #AEAEB2;
	--border: #E5E5EA;
	--border-2: #D1D1D6;
	--surface-2: #F2F2F7;
	--surface-3: #E5E5EA;
	--inset: #F2F2F7;
	--danger: #C80E19;
	--danger-bg: #FDECEC;
	--shadow-sm: none;
	--shadow: none;
	--ck-link: #C80E19;
	--ck-link-hover: #9C0A13;
	--ck-link-underline: rgba(200, 14, 25, .35);
	--ck-hover: rgba(120, 120, 128, .1);
	--ck-line: #E5E5EA;
	--ck-quiet: #D1D1D6;
	--ck-btn: #E8101C;
	/* наведение главной кнопки (10.10.2026, решение владельца): тёмная заливка и красная рамка 3 px — как --btn-hover-dark и
	   --btn-hover-ring в lp2.css; было #D00C18 */
	--ck-btn-hover: #2A1214;
	--ck-btn-hover-ring: inset 0 0 0 3px #E8101C;
	--ck-btn-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 24px -12px rgba(232, 16, 28, .75);
	--ck-focus-ring: 0 0 0 3px rgba(28, 28, 30, .12);
	/* подарочные месяцы (09.10.2026, пакет B3): тёмно-оранжевый текст на светло-оранжевой плашке — как --gift в lp2.css и
	   --hp-gift в index.ejs; 6,0:1 на белом, 5,4:1 на плашке, 4,8:1 на сером #E5E5EA ленты вкладок (09.10.2026, Q3: был #A84E0E —
	   на ленте 4,45:1, ниже 4,5:1) */
	--ck-gift: #A04A0D;
	--ck-gift-bg: #FDF1E8;
}

/* ---------- шрифт и страница ---------- */
html:not(.vv-embed) body {
	font-family: var(--font);
	color: var(--text);
	background: #F2F2F7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern", "liga";
}
/* Bulma задаёт полям и кнопкам свой системный стек отдельно от body */
html:not(.vv-embed) button,
html:not(.vv-embed) input,
html:not(.vv-embed) select,
html:not(.vv-embed) textarea { font-family: var(--font); }
/* ссылки и фокус — с нулевой специфичностью префикса (:where): перекрашивают синие ссылки Bulma, но не крошки, шапку и
   правила ниже, у которых свой класс */
:where(html:not(.vv-embed)) a { color: var(--ck-link); }
:where(html:not(.vv-embed)) a:hover { color: var(--ck-link-hover); }
:where(html:not(.vv-embed)) :focus-visible { outline: 2px solid #1C1C1E; outline-offset: 2px; }
/* кнопки Bulma (10.10.2026, проверка QT): правило выше их не достаёт — Bulma снимает обводку у .button:focus (outline: 0, своя
   специфичность выше), и «Оплатить», «Активировать бесплатно», «Отправить на проверку» в фокусе с клавиатуры не было видно.
   Та же обводка, что у остальных кнопок сайта; фрейм приложения (vv-embed) не затронут */
html:not(.vv-embed) .button:focus-visible { outline: 2px solid #1C1C1E; outline-offset: 2px; }

/* колонка страницы — та же, что у шапки сайта (1180 с полями по 24 px): логотип и заголовок стоят на одной вертикали */
html:not(.vv-embed) .section.is-medium { padding: 28px 24px 72px; }
html:not(.vv-embed) .section.is-medium > .container { max-width: 1132px; }

/* ---------- заголовок и строка цены ---------- */
html:not(.vv-embed) h1.ck-title {
	font-size: clamp(30px, 1.2rem + 1.6vw, 44px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--text);
	text-wrap: balance;
}
html:not(.vv-embed) .ck-price-line { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--text-2); }
html:not(.vv-embed) .ck-price-line-amount { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html:not(.vv-embed) .columns.mt-5 { margin-top: 24px !important; }

/* ---------- шаги «1 Тариф · 2 Почта · 3 Способ оплаты» ---------- */
html:not(.vv-embed) .ck-step-head { margin: 32px 0 12px; gap: 10px; }
html:not(.vv-embed) #selectPaymentBlock > .ck-step-head:first-child { margin-top: 4px; }
html:not(.vv-embed) .ck-step-num {
	width: 24px;
	height: 24px;
	background: #1C1C1E;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
}
html:not(.vv-embed) .ck-step-txt { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- тарифы: сегментный переключатель ---------- */
html:not(.vv-embed) .tabs ul {
	background: #E5E5EA;
	border-radius: 14px;
	padding: 4px;
	gap: 2px;
}
html:not(.vv-embed) .tabs li a {
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
}
html:not(.vv-embed) .tabs li a:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
html:not(.vv-embed) .tabs li.is-active a {
	background: #FFFFFF;
	color: var(--text);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* белая подложка активной вкладки (её создаёт скрипт страницы) — с тем же радиусом и тенью */
html:not(.vv-embed) .ck-tab-thumb { border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
html:not(.vv-embed) .tabs ul.has-thumb li.is-active a { background: transparent; box-shadow: none; }
/* «+6 мес.» — подарочные месяцы. С 09.10.2026 (пакет B3, решение владельца «выделить поярче, как было раньше») — значок подарка
   (img.ck-gift-ico в разметке, прежний gift.png 48×48) и тёмно-оранжевый текст, как подарок в тарифах главной и посадочных
   (.plan-gift--on); до этого — серым. Значок 1,1em — не шире строки, высота вкладки прежняя */
html:not(.vv-embed) .tabs li a b { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ck-gift); }
html:not(.vv-embed) .tabs li.is-active a b { color: var(--ck-gift); }
html:not(.vv-embed) .tabs li a .ck-gift-ico { flex: none; width: 1.1em; height: 1.1em; }
html:not(.vv-embed) .tabs li a:focus-visible { outline: 2px solid #1C1C1E; outline-offset: -2px; }
/* Затухание края ленты вкладок (09.10.2026) — только с той стороны, где есть скрытые вкладки (старое правило <style> buy.ejs
   затухает всегда справа и бледнит выбранную последнюю вкладку). Классы fade-ready, fade-l, fade-r ставит скрипт buy.ejs
   (updateTabsFade) на любой ширине; без скрипта на ≤1023 px остаётся прежнее затухание справа. С 09.10.2026 (пакет B3) правила —
   без медиазапроса: со значками подарка русские вкладки на 1024–1079 px на 30–35 px шире колонки, лента там прокручивается,
   и край должен затухать так же, как на планшете. Где вкладки помещаются, fade-l и fade-r нет — и маски нет. */
html:not(.vv-embed) .tabs.fade-ready { -webkit-mask-image: none; mask-image: none; }
html:not(.vv-embed) .tabs.fade-ready.fade-r {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
}
html:not(.vv-embed) .tabs.fade-ready.fade-l {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
}
html:not(.vv-embed) .tabs.fade-ready.fade-l.fade-r {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 44px), transparent 100%);
}
/* 1024–1215 px: колонка с вкладками у Bulma узкая (7/12 от 960–1170), и пять вкладок не помещались — последняя обрезалась без
   намёка на прокрутку (растушёвку края старый <style> даёт только до 1023 px). Здесь колонки 62/38 вместо 58/42 и вкладки
   плотнее: и русские, и английские помещаются целиком от 1024 px (замер 09.10.2026, Chrome). От 1216 px хватает отступов 12 px */
@media screen and (min-width: 1024px) and (max-width: 1215px) {
	html:not(.vv-embed) #selectPaymentBlock.column.is-7 { flex: none; width: 62%; }
	html:not(.vv-embed) .ck-side.column.is-5 { flex: none; width: 38%; }
}
/* Плотные вкладки (14 px, поля 9 px) — с 09.10.2026 (пакет B3) на всех ширинах от 1024 px, а не только до 1215: значки подарка
   добавили трём вкладкам по ≈19 px, и при 15 px с полями 12 px русские вкладки на 1216–1440 px не помещались в колонку 650 px
   (681 против 642). С 14/9 — 615 px, запас 19 px; английские короче */
@media screen and (min-width: 1024px) {
	html:not(.vv-embed) .tabs li a { padding: 8px 9px; font-size: 14px; }
}

/* итог под вкладками на телефоне и планшете (до 1023 px) */
html:not(.vv-embed) .mini-total {
	background: #FFFFFF;
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	padding: 9px 14px 10px;
}
html:not(.vv-embed) .mini-total i { color: var(--text-2); }
html:not(.vv-embed) .mini-total .mini-total-label { font-size: 14px; font-weight: 500; color: var(--text-2); }
html:not(.vv-embed) .mini-total .price-total { font-size: 17px; font-weight: 600; font-variant-numeric: normal; }

/* ---------- панели: белые, радиус 22, без теней и рамок ---------- */
html:not(.vv-embed) #selectPaymentBlock .box,
html:not(.vv-embed) #stripeBlock .box,
html:not(.vv-embed) #processingPayment .box,
html:not(.vv-embed) .ck-summary {
	border: 0;
	border-radius: 22px;
	box-shadow: none;
	background: #FFFFFF;
}

/* ---------- почта ---------- */
html:not(.vv-embed) .ck-email { padding: 20px; }
html:not(.vv-embed) .ck-email .input.email,
html:not(.vv-embed) .ck-promo #promoInput,
html:not(.vv-embed) .ck-abuse .input {
	height: 52px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1.5px solid var(--ck-quiet);
	box-shadow: none;
	font-size: 17px;
	color: var(--text);
	background: #FFFFFF;
	transition: border-color .15s ease, box-shadow .15s ease;
}
html:not(.vv-embed) .ck-email .input.email::placeholder,
html:not(.vv-embed) .ck-promo #promoInput::placeholder,
html:not(.vv-embed) .ck-abuse .input::placeholder { color: var(--text-3); }
html:not(.vv-embed) .ck-email .input.email:focus,
html:not(.vv-embed) .ck-promo #promoInput:focus,
html:not(.vv-embed) .ck-abuse .input:focus { border-color: #1C1C1E; box-shadow: var(--ck-focus-ring); outline: none; }
html:not(.vv-embed) .ck-email .input.email.is-danger,
html:not(.vv-embed) .ck-promo #promoInput.is-danger { border-color: #C80E19; }
html:not(.vv-embed) .ck-email .input.email.is-danger:focus,
html:not(.vv-embed) .ck-promo #promoInput.is-danger:focus { box-shadow: 0 0 0 3px rgba(200, 14, 25, .14); }
html:not(.vv-embed) .ck-email .input.email[readonly] { background: #F2F2F7; color: var(--text-2); }
html:not(.vv-embed) .ck-email .input.email[readonly]:focus { border-color: var(--ck-quiet); box-shadow: none; }
html:not(.vv-embed) .ck-email .help { font-size: 14px; color: var(--text-2); }
html:not(.vv-embed) .email-help.is-danger { color: #C80E19 !important; font-weight: 500; }

/* подсказка «Возможно, вы имели в виду …» */
html:not(.vv-embed) #suggestedEmailBlock { border-radius: 14px; background: #FFF4E5; }
html:not(.vv-embed) #suggestedEmailBlock .message-body { border: 0; border-radius: 14px; color: var(--text); font-size: 15px; }
html:not(.vv-embed) #suggestedEmailBlock .button.is-warning,
html:not(.vv-embed) #suggestedEmailBlock .button.is-white {
	height: auto;
	min-height: 36px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	white-space: normal;
}
html:not(.vv-embed) #suggestedEmailBlock .button.is-warning { background: #1C1C1E; color: #FFFFFF; border: 0; }
html:not(.vv-embed) #suggestedEmailBlock .button.is-warning:hover { background: #3A3A3C; color: #FFFFFF; }
html:not(.vv-embed) #suggestedEmailBlock .button.is-white { background: #FFFFFF; color: var(--text); border: 1.5px solid var(--ck-quiet); }
html:not(.vv-embed) #suggestedEmailBlock .button.is-white:hover { background: #F2F2F7; }

/* ---------- способы оплаты: белые строки-панели ---------- */
html:not(.vv-embed) .ck-pay {
	padding: 16px 18px 16px 16px;
	margin-bottom: 10px !important;
	transition: background-color .15s ease, transform .15s ease;
}
/* ховер — с id блока: иначе фон и тень панели (#selectPaymentBlock .box выше) сильнее */
html:not(.vv-embed) #selectPaymentBlock .ck-pay:hover {
	background-color: #F7F7F9;
	border-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--ck-line);
	transform: none;
}
html:not(.vv-embed) #selectPaymentBlock .ck-pay:active { transform: scale(.985); }
html:not(.vv-embed) .ck-pay .media-content strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html:not(.vv-embed) .ck-pay .media-content .content,
html:not(.vv-embed) .ck-pay .media-content .content p { font-size: 14px; line-height: 1.4; color: var(--text-2) !important; }
html:not(.vv-embed) .ck-pay .media-right .icon {
	background: transparent;
	color: var(--text-3) !important;
	transition: color .15s ease;
}
html:not(.vv-embed) .ck-pay .media-right .icon i { font-size: 16px !important; }
html:not(.vv-embed) .ck-pay:hover .media-right .icon { background: transparent; color: var(--text) !important; transform: none; }
html:not(.vv-embed) .left-image-payment-block { background: #F2F2F7; border: 0; border-radius: 14px; }
html:not(.vv-embed) #selectPaymentBlock .ck-pay-off:hover { background-color: #FFFFFF; box-shadow: none; transform: none; }
html:not(.vv-embed) #selectPaymentBlock .ck-pay-off:active { transform: none; }
html:not(.vv-embed) .ck-pay-off .media-right .icon,
html:not(.vv-embed) .ck-pay-off:hover .media-right .icon { color: var(--text-3) !important; }
html:not(.vv-embed) .ck-secure { margin-top: 14px; font-size: 13px; color: var(--text-2); }
html:not(.vv-embed) .ck-secure i { color: var(--text-2); }

/* ---------- промокод ---------- */
html:not(.vv-embed) .ck-promo-toggle a {
	font-size: 15px;
	font-weight: 500;
	color: var(--ck-link);
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: var(--ck-link-underline);
}
html:not(.vv-embed) .ck-promo-toggle a:hover { color: var(--ck-link-hover); text-decoration-color: currentColor; }
html:not(.vv-embed) .ck-promo-toggle a i { color: inherit; }
html:not(.vv-embed) .ck-promo { padding: 20px; }
html:not(.vv-embed) .ck-promo .label { font-size: 15px; font-weight: 500; color: var(--text); }
html:not(.vv-embed) .ck-promo .promo-apply {
	height: 52px;
	margin-left: 8px;
	padding: 0 20px;
	border-radius: 12px !important;
	border: 1.5px solid var(--ck-quiet);
	background: #FFFFFF;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
}
html:not(.vv-embed) .ck-promo .promo-apply:hover { background: #F2F2F7; border-color: var(--text-3); }
html:not(.vv-embed) .ck-promo .field.has-addons .control:first-child:not(:only-child) .input { border-radius: 12px; }
html:not(.vv-embed) .ck-promo .promo-help.is-danger,
html:not(.vv-embed) .ck-promo .promo-help { color: #C80E19; font-weight: 500; font-size: 14px; }
html:not(.vv-embed) .ck-promo .ck-promo-success { border-radius: 14px; background: #F2F2F7; color: var(--text); font-weight: 500; font-size: 15px; }
html:not(.vv-embed) .ck-promo .ck-promo-success.is-warning { background: #FFF4E5; }
html:not(.vv-embed) .ck-promo .promo-cancel { font-size: 14px; color: var(--text-2); }
html:not(.vv-embed) .ck-promo .promo-cancel:hover { color: var(--text); }

/* ---------- кнопки ---------- */
/* главная (оплатить картой, активировать промокод, отправить отзыв на /abuse) — малая главная кнопка lp2 (.btn-main--s) */
html:not(.vv-embed) #stripeBlock .button.is-link,
html:not(.vv-embed) .button.is-success,
html:not(.vv-embed) .ck-abuse .button.is-info {
	height: auto;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px;
	background: var(--ck-btn);
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	box-shadow: var(--ck-btn-shadow);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* заблокированные (правило [disabled] ниже, та же специфичность) наведение не меняет — как и до 10.10.2026.
   Тёмное наведение — только в @media (hover: hover), с мышью или трекпадом (10.10.2026, пакет K, решение владельца): на сенсорном
   экране :hover после касания остаётся («залипает»), и кнопка оставалась тёмной. Там при касании — только :active (уменьшение ниже).
   Наведение Bulma (.button.is-success:hover и др.) и buy.ejs (#stripeBlock .button.is-link:hover) правила покоя выше перебивают
   (у них html:not(.vv-embed) — специфичность выше), поэтому без @media кнопка остаётся в покое. С мышью вид прежний */
@media (hover: hover) {
	html:not(.vv-embed) #stripeBlock .button.is-link:hover,
	html:not(.vv-embed) .button.is-success:hover,
	html:not(.vv-embed) .ck-abuse .button.is-info:hover { background: var(--ck-btn-hover); color: #FFFFFF; box-shadow: var(--ck-btn-hover-ring); }
}
html:not(.vv-embed) #stripeBlock .button.is-link:active,
html:not(.vv-embed) .button.is-success:active,
html:not(.vv-embed) .ck-abuse .button.is-info:active { transform: scale(.985); }
html:not(.vv-embed) .button.is-success[disabled],
html:not(.vv-embed) .ck-abuse .button.is-info[disabled] { background: var(--ck-btn); opacity: .5; box-shadow: none; }
/* тихая (назад к способам оплаты) — .btn-quiet lp2 */
html:not(.vv-embed) #stripeBlock .button.is-white,
html:not(.vv-embed) .button.is-light {
	height: 38px;
	padding: 0 14px;
	border: 1.5px solid var(--ck-quiet);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
}
html:not(.vv-embed) #stripeBlock .button.is-white:hover,
html:not(.vv-embed) .button.is-light:hover { background: #F2F2F7; border-color: var(--text-3); color: var(--text); }
html:not(.vv-embed) #processingPayment .fa-spinner,
html:not(.vv-embed) #loadingPayment .fa-spinner { color: var(--text-2); }

/* ---------- предложение перейти на тариф длиннее (виден после оплаты месяца, полугода или года) ---------- */
html:not(.vv-embed) .notification.ck-upgrade {
	margin-top: 24px;
	padding: 20px 22px;
	border-radius: 22px;
	background: #FFFFFF;
	color: var(--text-2);
	box-shadow: none;
}
html:not(.vv-embed) .notification.ck-upgrade h4 { color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
html:not(.vv-embed) .notification.ck-upgrade p { font-size: 15px; line-height: 1.5; }
html:not(.vv-embed) .notification.ck-upgrade .upgrade-timer {
	background: #F2F2F7 !important;
	color: var(--text) !important;
	font-weight: 600;
}
html:not(.vv-embed) .notification.ck-upgrade .alreadyPaid,
html:not(.vv-embed) .notification.ck-upgrade .price-total,
html:not(.vv-embed) .notification.ck-upgrade .price-total-usual { color: var(--text); font-weight: 600; }

/* ---------- сводка заказа ---------- */
html:not(.vv-embed) .ck-summary { padding: 24px; }
html:not(.vv-embed) .ck-summary h3 { font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
html:not(.vv-embed) .ck-summary .monthlyPrice { font-size: 15px; color: var(--text-2) !important; }
html:not(.vv-embed) .ck-summary .tags .tag {
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	padding: .35em .7em;
}
html:not(.vv-embed) .ck-summary .tag.yourDiscount { background: rgba(232, 16, 28, .08) !important; color: #C80E19 !important; }
html:not(.vv-embed) .ck-summary .tag.upgdradePlan { background: #F2F2F7 !important; color: var(--text) !important; }
/* Подарочные месяцы в сводке («+3 месяца в подарок», «+1 месяц в подарок по промокоду») — с 09.10.2026 (пакет B3) заметнее:
   значок подарка (тот же gift-48.png, что во вкладках) и тёмно-оранжевый на светло-оранжевой плашке, в пару к красной «Ваша
   скидка». Текст чипа .freeMonths пишет скрипт страницы (.html()), поэтому значок — фоном ::before, разметку и скрипт не трогаем */
html:not(.vv-embed) .ck-summary .tag.freeMonths,
html:not(.vv-embed) .ck-summary .tag.referredUser { background: var(--ck-gift-bg) !important; color: var(--ck-gift) !important; font-weight: 600; }
html:not(.vv-embed) .ck-summary .tag.freeMonths::before,
html:not(.vv-embed) .ck-summary .tag.referredUser::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin-right: .35em;
	background: url(/images/thumbs/gift-48.png) center / contain no-repeat;
}
/* «Итого к оплате» — строка с линией сверху вместо жёлтой плашки; подпись обычным регистром */
html:not(.vv-embed) .ck-hero > .column:last-child {
	margin-top: 18px;
	padding: 16px 0 0 !important;
	background: none;
	border: 0;
	border-top: 1px solid var(--ck-line);
	border-radius: 0;
	gap: 4px 12px;
}
html:not(.vv-embed) .ck-hero > .column:last-child::before {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-2);
}
html:not(.vv-embed) .ck-hero .tag.is-large { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: normal; }
html:not(.vv-embed) .ck-hero .tag.price-old { font-size: 17px; font-weight: 500; color: var(--text-3) !important; }
/* «Выбрать годовой тариф …» на месячном — тихая кнопка: главная на экране одна, это способ оплаты слева */
html:not(.vv-embed) .ck-summary .monthSubscription {
	height: auto;
	min-height: 46px;
	margin-top: 20px;
	border: 1.5px solid var(--ck-quiet);
	border-radius: 14px;
	background: #FFFFFF !important;
	background-image: none !important;
	color: var(--text) !important;
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
}
html:not(.vv-embed) .ck-summary .monthSubscription:hover { background: #F2F2F7 !important; border-color: var(--text-3); transform: none; box-shadow: none; }
html:not(.vv-embed) .ck-summary hr { background: var(--ck-line); margin: 20px 0 18px; }
/* преимущества — обычный список без зелёных галочек */
html:not(.vv-embed) .ck-summary .icon-text .check-icon { display: none; }
html:not(.vv-embed) .ck-summary .icon-text strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
html:not(.vv-embed) .ck-summary p.block { padding-left: 0; font-size: 15px; line-height: 1.5; margin-top: 2px; color: var(--text-2) !important; }

/* рейтинги (цифры не меняем — решение владельца): панель как остальные, подписи сторов без капса */
html:not(.vv-embed) .ck-ratings { border: 0; border-radius: 22px; box-shadow: none; }
html:not(.vv-embed) .ck-ratings .heading { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
html:not(.vv-embed) .ck-ratings .title { font-size: 24px; font-weight: 600; }

/* раскрытие у оплаты — текст тот же */
html:not(.vv-embed) .ck-legal { font-size: 13px; line-height: 1.55; color: var(--text-2); }
html:not(.vv-embed) .ck-legal a { color: var(--text-2); text-decoration-color: var(--text-3); }
html:not(.vv-embed) .ck-legal a:hover { color: var(--text); text-decoration-color: currentColor; }

/* ---------- окна соглашения и ожидания оплаты ---------- */
/* поверх шапки сайта (у неё z-index 50, как был у прежней шапки, — затемнение окна до сих пор её не закрывало); окно документа
   (#legalModal, z-index 60 в разметке) открывается из окна соглашения и должно остаться над ним */
html:not(.vv-embed) .modal { z-index: 70; }
html:not(.vv-embed) #legalModal { z-index: 80 !important; }
html:not(.vv-embed) .modal-content .box { border: 0; border-radius: 22px; }
html:not(.vv-embed) .modal-content .box { color: var(--text); }
html:not(.vv-embed) .modal-content .box h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html:not(.vv-embed) .modal-content .box h4 { font-weight: 600; }
html:not(.vv-embed) .modal-content .checkbox input { accent-color: #E8101C; }
html:not(.vv-embed) .modal-content .checkbox a:hover { color: var(--ck-link); text-decoration-color: currentColor; }

/* ---------- телефон ---------- */
@media screen and (max-width: 767px) {
	html:not(.vv-embed) .section.is-medium { padding: 18px 16px 48px; }
	html:not(.vv-embed) .ck-price-line { font-size: 16px; margin-top: 8px; }
	html:not(.vv-embed) .ck-price-line-amount { font-size: 18px; }
	html:not(.vv-embed) .columns.mt-5 { margin-top: 12px !important; }
	html:not(.vv-embed) .ck-step-head { margin: 26px 0 10px; }
	html:not(.vv-embed) .ck-step-txt { font-size: 18px; }
	html:not(.vv-embed) .tabs li a { padding: 8px 12px; }
	html:not(.vv-embed) .ck-email,
	html:not(.vv-embed) .ck-promo { padding: 16px; }
	html:not(.vv-embed) .ck-pay { padding: 14px 14px 14px 12px; }
	html:not(.vv-embed) .ck-summary { padding: 20px 18px; }
	html:not(.vv-embed) .ck-hero .tag.is-large { font-size: 30px; }
}

/* ---------- подвал /buy и /abuse (partials/footer.ejs) ----------
   Свой подвал оплаты (решение 4 этапа: «свой, только в новом стиле и шрифте»): почта, часы поддержки, флаги, строка «создан в
   2022 …», язык и документы — прежние, вид — как у подвала сайта (css/site-footer.css): белая полоса с линией сверху, текст
   по левому краю в колонке сайта. Bulma задаёт любому footer padding с !important (bulma_style.css) — поэтому и здесь он
   с !important. */
html:not(.vv-embed) footer.ck-foot {
	padding: 44px 0 32px !important;
	background: #FFFFFF;
	border-top: 1px solid var(--ck-line);
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
}
html:not(.vv-embed) .ck-foot-in { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
html:not(.vv-embed) .ck-foot-mail { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
html:not(.vv-embed) .ck-foot-mail a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: var(--ck-link-underline);
}
html:not(.vv-embed) .ck-foot-mail a:hover { color: var(--ck-link); text-decoration-color: currentColor; }
html:not(.vv-embed) .ck-foot-hours { margin-top: 4px; color: var(--text-2); }
html:not(.vv-embed) .ck-foot-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
html:not(.vv-embed) .ck-foot-flags img { display: block; width: 24px; height: auto; }
html:not(.vv-embed) .ck-foot-made { margin-top: 10px; max-width: 46em; font-size: 14px; color: var(--text-2); }
html:not(.vv-embed) .ck-foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px 32px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ck-line);
}
html:not(.vv-embed) .ck-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
html:not(.vv-embed) .ck-foot-links li { margin: 0; }
html:not(.vv-embed) .ck-foot-links a,
html:not(.vv-embed) .ck-foot-lang a { color: var(--text-2); text-decoration: none; }
html:not(.vv-embed) .ck-foot-links a:hover,
html:not(.vv-embed) .ck-foot-lang a:hover { color: var(--text); text-decoration: underline; }
html:not(.vv-embed) .ck-foot-lang { flex: none; font-size: 14px; }
html:not(.vv-embed) .ck-foot-lang a { display: inline-flex; align-items: center; gap: 6px; }
html:not(.vv-embed) .ck-foot-lang img { display: block; width: 18px; height: auto; }
/* 09.10.2026, пакет L1 («английский переключатель везде»): у /buy и /abuse английский текст рисует тот же шаблон по куке, поэтому
   «English»/«Русский» здесь — кнопка (кука и перезагрузка, js/site-header.js). Вид — как у ссылки выше: серая подпись с флагом,
   подчёркивание при наведении; рамку, фон и шрифт кнопки браузера снимаем. */
html:not(.vv-embed) .ck-foot-lang button {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; letter-spacing: inherit; color: var(--text-2); text-decoration: none; text-align: left;
}
html:not(.vv-embed) .ck-foot-lang button:hover { color: var(--text); text-decoration: underline; }
@media screen and (max-width: 767px) {
	html:not(.vv-embed) footer.ck-foot { padding: 32px 0 28px !important; }
	html:not(.vv-embed) .ck-foot-in { padding-inline: 16px; }
	html:not(.vv-embed) .ck-foot-mail { font-size: 18px; }
	html:not(.vv-embed) .ck-foot-bottom { flex-direction: column; }
}

/* ---------- /abuse (abuse.ejs) ----------
   Та же колонка, шрифт и поля, что у оплаты; картинка «Вас заметили» — небольшой иллюстрацией справа (на телефоне — над
   заголовком). Форма — белая панель; крючки скрипта страницы (.email, .file-name, .button, #sendReviewBlock, #reviewSent)
   прежние. */
html:not(.vv-embed) .ck-abuse { padding: 28px 0 72px; }
html:not(.vv-embed) .ck-abuse-in {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: minmax(0, 720px) minmax(0, 280px);
	justify-content: space-between;
	align-items: start;
	gap: 32px 48px;
}
html:not(.vv-embed) .ck-abuse-pic { margin: 8px 0 0; }
html:not(.vv-embed) .ck-abuse-pic img { display: block; width: 100%; height: auto; border-radius: 22px; }
html:not(.vv-embed) .ck-abuse h1.ck-title { margin-bottom: 18px; }
html:not(.vv-embed) .ck-abuse p { font-size: 18px; line-height: 1.65; color: var(--text); }
html:not(.vv-embed) .ck-abuse p + p { margin-top: 14px; }
html:not(.vv-embed) .ck-abuse h2 {
	margin: 40px 0 14px;
	font-size: clamp(24px, 1rem + 1vw, 30px);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text);
}
html:not(.vv-embed) .ck-abuse-stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
html:not(.vv-embed) .ck-abuse-stores a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 18px;
	border: 1.5px solid var(--ck-quiet);
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
html:not(.vv-embed) .ck-abuse-stores a:hover { background: #F2F2F7; border-color: var(--text-3); color: var(--text); }
html:not(.vv-embed) .ck-abuse .box {
	margin-top: 32px;
	padding: 24px;
	border: 0;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: none;
}
html:not(.vv-embed) .ck-abuse .box { color: var(--text); }
html:not(.vv-embed) .ck-abuse .box h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
html:not(.vv-embed) .ck-abuse .box p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
html:not(.vv-embed) .ck-abuse .box p + p { margin-top: 10px; }
html:not(.vv-embed) .ck-abuse .field { margin-top: 20px; }
html:not(.vv-embed) .ck-abuse .label { margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--text); }
html:not(.vv-embed) .ck-abuse .file-cta,
html:not(.vv-embed) .ck-abuse .file-name {
	height: 52px;
	border: 1.5px solid var(--ck-quiet);
	background: #FFFFFF;
	color: var(--text);
	font-size: 16px;
}
html:not(.vv-embed) .ck-abuse .file-cta { border-radius: 12px 0 0 12px; font-weight: 600; }
html:not(.vv-embed) .ck-abuse .file-name { padding-block: 0; line-height: 49px; border-left: 0; border-radius: 0 12px 12px 0; max-width: 22em; color: var(--text-2); }
html:not(.vv-embed) .ck-abuse .file-label:hover .file-cta { background: #F2F2F7; color: var(--text); }
html:not(.vv-embed) .ck-abuse .file-input:focus-visible + .file-cta { outline: 2px solid #1C1C1E; outline-offset: 2px; }
html:not(.vv-embed) .ck-abuse .message { margin-top: 32px; border-radius: 22px; background: #FFFFFF; }
html:not(.vv-embed) .ck-abuse .message-body { padding: 24px; border: 0; color: var(--text); }
html:not(.vv-embed) .ck-abuse .message-body p { font-size: 16px; }
@media screen and (min-width: 768px) and (max-width: 1023px) {
	html:not(.vv-embed) .ck-abuse-in { grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; }
}
@media screen and (max-width: 767px) {
	html:not(.vv-embed) .ck-abuse { padding: 18px 0 48px; }
	html:not(.vv-embed) .ck-abuse-in { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; gap: 20px; }
	html:not(.vv-embed) .ck-abuse-pic { order: -1; margin: 0; width: 160px; }
	html:not(.vv-embed) .ck-abuse-pic img { border-radius: 16px; }
	html:not(.vv-embed) .ck-abuse p { font-size: 16px; line-height: 1.6; }
	html:not(.vv-embed) .ck-abuse h2 { margin-top: 32px; }
	html:not(.vv-embed) .ck-abuse .box { padding: 18px; }
	html:not(.vv-embed) .ck-abuse .file,
	html:not(.vv-embed) .ck-abuse .file-label { max-width: 100%; }
	html:not(.vv-embed) .ck-abuse .file-name { flex: 1 1 auto; min-width: 0; max-width: none; }
	html:not(.vv-embed) .ck-abuse .button.is-info { width: 100%; }
}