/**
* Страница товара — секции под карточкой (тарифы, оплата, активация, гарантии, FAQ).
* Подключается ТОЛЬКО на товаре (см. functions.php → is_product()).
* Стиль b26: Inter, акцент #2563EB, мягкие тени, скругления. Цены — динамические.
*/
/* «Как оплачиваем» (_op_pay): карточки способов со SVG-иконками + янтарное предупреждение. */
/* «Как оплатить <сервис>» — инструкция вертикальным таймлайном (Вариант A):
номер-плитка слева, соединяющая линия, заголовок + описание справа. */
.op-pay__lead { text-align: center; max-width: 680px; margin: 0 auto 30px; font-size: 15px; color: #64748b; line-height: 1.6; }
/* Акцент в инструкции: обёртка **текст** в поле _op_pay → жирный с мягкой подсветкой. */
.op-em { font-weight: 700; color: #92400e; background: #fdf0d5; padding: 1px 6px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.op-pay__cards { display: flex; flex-direction: column; gap: 0; }
.op-pay__card { position: relative; padding: 0 0 20px; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.op-pay__card::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: -2px; width: 2px; background: #e7e9ed; }
.op-pay__card:last-child { padding-bottom: 0; }
.op-pay__card:last-child::before { display: none; }
.op-pay__num { align-self: start; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(140deg, #3b82f6, #1d4ed8); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55); z-index: 1; }
.op-pay__body { min-width: 0; padding-top: 7px; }
.op-pay__body > b { display: block; font-size: 15px; color: #0b0c0e; letter-spacing: -.2px; }
.op-pay__body > p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: #6b7280; }
.op-pay a { color: #2563eb; font-weight: 600; text-decoration: none; }
.op-pay a:hover { text-decoration: underline; }
/* Карточки-варианты внутри шага (напр. «Регион Россия» / «Другой регион»). */
.op-pay__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; margin-top: 11px; }
.op-pay__opt { border: 1px solid #dfe6f2; border-radius: 12px; padding: 12px 13px; background: #fafbfe; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.op-pay__opt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(28, 30, 68, .28); border-color: #b9c9f0; }
.op-pay__opt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.op-pay__opt-ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: #e8f0fe; color: #1d4ed8; display: flex; align-items: center; justify-content: center; }
.op-pay__opt-ic svg { width: 16px; height: 16px; }
.op-pay__opt-h b { font-size: 13.5px; color: #0b0c0e; }
.op-pay__opt-t { display: block; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
/* Плашка «под ключ» — менеджер зайдёт в аккаунт или по AnyDesk (+300 ₽). */
.op-assist { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; background: linear-gradient(115deg, #f4f8ff, #ffffff 62%); border: 1px solid #dce6f8; border-radius: 16px; padding: 20px 22px; box-shadow: 0 14px 34px -16px rgba(29, 78, 216, .30); }
.op-assist__ic { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(140deg, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6); }
.op-assist__ic svg { width: 24px; height: 24px; }
.op-assist__t { flex: 1; min-width: 200px; }
.op-assist__t b { display: block; font-size: 16px; font-weight: 800; color: #0b0c0e; letter-spacing: -.2px; margin-bottom: 2px; }
/* Подпись блоком: у строчного span свой line-height не работает, и строки расходились. */
.op-assist__t span { display: block; font-size: 13.5px; color: #64748b; line-height: 1.5; }
.op-assist__p { flex: 0 0 auto; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(140deg, #3b82f6, #1d4ed8); border-radius: 12px; padding: 12px 20px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .55); }
.op-pay__warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; background: #fffaf0; border: 1px solid #f2e6cc; border-radius: 12px; padding: 12px 15px; }
.op-pay__warn svg { width: 18px; height: 18px; flex: 0 0 auto; color: #e0910b; margin-top: 1px; }
.op-pay__warn p { margin: 0; font-size: 13px; line-height: 1.6; color: #8a6a2e; }
.op-pay__warn b { color: #6b4f1a; }
.op-pay__warn a { color: #b45309; font-weight: 600; }
/* Баннер-помощник (менеджер) */
.op-pay__help { margin-top: 20px; border-radius: 16px; padding: 17px 20px; color: #fff; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; background: linear-gradient(120deg, #3b82f6, #1d4ed8); box-shadow: 0 12px 28px -14px rgba(37, 99, 235, .5); }
.op-pay__help::after { content: ""; position: absolute; right: -30px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 62%); pointer-events: none; }
.op-pay__help-t { position: relative; z-index: 1; }
.op-pay__help-t b { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 2px; letter-spacing: -.2px; }
.op-pay__help-t span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.op-pay__help .op-pay__help-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; color: #1d4ed8; font-weight: 700; font-size: 13.5px; text-decoration: none; padding: 11px 18px; border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .3); transition: transform .16s ease; }
.op-pay__help .op-pay__help-btn:hover { transform: translateY(-2px); text-decoration: none; }
.op-pay__help-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 600px) {
.op-pay__help { flex-direction: column; align-items: flex-start; }
.op-pay__help .op-pay__help-btn { width: 100%; justify-content: center; }
}
/* Блок «Активировать пробный период за 300 ₽» */
.op-trial { margin-top: 20px; border-radius: 16px; padding: 17px 20px; color: #fff; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; background: linear-gradient(120deg, #10b981, #047857); box-shadow: 0 12px 28px -14px rgba(5, 150, 105, .5); }
.op-trial::after { content: ""; position: absolute; right: -30px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%); pointer-events: none; }
.op-trial__ic { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: #fff; position: relative; z-index: 1; }
.op-trial__ic svg { width: 24px; height: 24px; }
.op-trial__t { position: relative; z-index: 1; flex: 1; min-width: 200px; }
.op-trial__t b { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 2px; letter-spacing: -.2px; }
.op-trial__t span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.op-trial__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: normal; background: #fff; color: #047857; font-weight: 800; font-size: 13.5px; line-height: 1.25; text-decoration: none; padding: 12px 20px; border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .3); transition: transform .16s ease; }
.op-trial__btn:hover { transform: translateY(-2px); text-decoration: none; }
@media (max-width: 600px) {
.op-trial { flex-direction: column; align-items: flex-start; }
.op-trial__btn { width: 100%; justify-content: center; }
}
/* Плитки-выгоды под интро */
.op-benes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 6px; }
.op-benes__i { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e7e9f1; border-radius: 14px; padding: 11px 13px; box-shadow: 0 4px 12px -8px rgba(28, 30, 68, .18); }
.op-benes__ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #eef2ff; color: #2563eb; display: grid; place-items: center; }
.op-benes__ic svg { width: 18px; height: 18px; }
.op-benes__t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.op-benes__t b { font-size: 13px; color: #0b0c0e; }
.op-benes__t > span { font-size: 12px; color: #64748b; }
@media (max-width: 640px) { .op-benes { grid-template-columns: repeat(2, 1fr); } }
/* ── Шапка товара: база в main.css (.oplatim-uix-card, крошки), здесь поправки ── */
/* Плашка доверия без висячего последнего слова. */
.oplatim-uix-card .uix-badge { text-wrap: balance; }
/* Подписи плиток «Скорость / Гарантия / Оплата»: 12px и контраст, как у всех подписей. */
.oplatim-uix-card .uix-label { font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: #64748b; }
/* Крошки одной строкой (span-обёртки ставит product-template.php): длинное название и раздел
сжимаются с «…», «Главная» и «Магазин» остаются целыми. */
.single-product .woocommerce-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.woocommerce-breadcrumb .op-bc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.woocommerce-breadcrumb .op-bc:first-child, .woocommerce-breadcrumb .op-bc:nth-child(3) { flex-shrink: 0; }
.woocommerce-breadcrumb .op-bc:last-child { flex-shrink: 3; }
.woocommerce-breadcrumb .op-bc__sep { flex: 0 0 auto; }
/* Крошки стоят над картинкой и блоком покупки (перенос в product-template.php):
отбиваем их от шапки и от верха карточки, ширину не ограничиваем. */
.single-product .woocommerce-breadcrumb { margin: 0 0 14px; font-size: 13px; color: #6b7280; }
.single-product .woocommerce-breadcrumb a { color: #6b7280; text-decoration: none; }
.single-product .woocommerce-breadcrumb a:hover { color: #0b0c0e; }
.single-product .woocommerce-breadcrumb .op-bc:last-child { color: #454c57; font-weight: 600; }
/* На телефоне картинка товара не прилипает к шапке (сильнее базового правила галереи ниже). */
@media (max-width: 921px) { .single-product.woocommerce div.product .woocommerce-product-gallery { margin-top: 16px; } }
/* Блок «Гарантии и безопасность» */
.op-guars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.op-guars__i { display: flex; gap: 12px; align-items: center; min-height: 74px; background: #fff; border: 1px solid #e7e9f1; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 12px -8px rgba(28, 30, 68, .18); }
.op-guars__ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; background: #eef2ff; color: #2563eb; display: grid; place-items: center; }
.op-guars__ic svg { width: 21px; height: 21px; }
.op-guars__t { min-width: 0; }
.op-guars__t b { display: block; font-size: 14.5px; color: #0b0c0e; margin-bottom: 3px; letter-spacing: -.2px; }
.op-guars__t > span { display: block; font-size: 12.5px; color: #6b7280; line-height: 1.45; text-wrap: balance; }
/* Иллюстрация товара: слайдер галереи отключён (woo-slim), поэтому снимаем opacity:0 и даём картинке нормальный размер. */
.woocommerce div.product .woocommerce-product-gallery { opacity: 1 !important; width: 100%; margin: 0 0 24px; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 16px 40px -22px rgba(15, 23, 42, .45); }
.woocommerce div.product .woocommerce-product-gallery__image a { pointer-events: none; cursor: default; }
/* ── Верх карточки: картинка слева по центру относительно блока покупки ──
Обёртку .op-ptop ставит inc/product-template.php: в ней картинка и блок покупки.
Ширины колонок те же, что были у float (50% и 46% с зазором 4%). */
@media (min-width: 922px) {
.single-product.woocommerce .op-ptop { display: grid; grid-template-columns: 58% 38%; column-gap: 4%; align-items: start; }
/* ширины у Woo и Astra заданы длинными селекторами (у картинки есть и класс images),
поэтому здесь селекторы такие же длинные и с приоритетом */
.single-product.woocommerce div.product .op-ptop > div.images.woocommerce-product-gallery,
.single-product.woocommerce div.product .op-ptop > div.summary { float: none !important; width: auto !important; }
/* обёртка прервала схлопывание отступов: верхний отступ первой секции снимаем,
иначе между блоком покупки и секциями появляется лишний зазор */
.single-product.woocommerce div.product > .op-psections > *:first-child { margin-top: 0; }
}
/* От 1200 картинка и блок покупки почти одной высоты, поэтому низ колонок выравниваем:
рамка картинки тянется до низа блока покупки (высоту ей даёт main.css).
Нижний отступ блока покупки переносим на обёртку, иначе он растягивает строку сетки. */
@media (min-width: 1200px) {
.single-product.woocommerce .op-ptop { align-items: stretch; margin-bottom: 34px; }
.single-product.woocommerce div.product .op-ptop > div.summary { margin-bottom: 0 !important; }
}
/* Калькулятор пополнения — карточка в ряду тарифов. Середина (подсказка ↔ результат) + низ (поле + кнопка). */
.op-tc { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.op-tc__top { display: flex; align-items: center; gap: 12px; }
.op-tc__ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #2563eb; display: grid; place-items: center; }
.op-tc__ic svg { width: 23px; height: 23px; }
.op-tc__hd b { display: block; font-size: 17px; color: #0b0c0e; letter-spacing: -.3px; }
.op-tc__hd span { font-size: 12.5px; color: #6b7280; }
.op-tc__req { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: #92400e; background: #fff8ec; border: 1px solid #f3e6c8; border-radius: 10px; padding: 8px 11px; margin: 0; line-height: 1.4; }
.op-tc__req svg { flex: 0 0 auto; width: 15px; height: 15px; color: #d97706; margin-top: 1px; }
.op-tc__chips { display: flex; gap: 8px; }
.op-tc__chips button { flex: 1; border: 1px solid #e2e6ef; background: #f7f9fc; border-radius: 10px; padding: 9px 4px; font: 700 13px 'Inter', sans-serif; color: #334155; cursor: pointer; transition: border-color .15s, color .15s; }
.op-tc__chips button:hover { border-color: #2563eb; color: #2563eb; }
.op-tc__field { display: flex; align-items: center; gap: 4px; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 2px 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.op-tc__field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.op-tc__cur { flex: 0 0 auto; font-size: 22px; font-weight: 800; color: #94a3b8; }
.op-tc__amt { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 4px; font: 800 24px 'Inter', sans-serif; color: #0f172a; }
.op-tc__hint { flex: 0 0 auto; font-size: 12px; color: #64748b; white-space: nowrap; }
.op-tc__err[hidden] { display: none; }
.op-tc__err { margin: 0; font-size: 12.5px; color: #dc2626; font-weight: 600; }
.op-tc__out { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, #f4f8ff, #eef2ff); border: 1px solid #e0e7ff; border-radius: 12px; padding: 12px 16px; }
.op-tc__out-l { display: flex; flex-direction: column; min-width: 0; }
.op-tc__label { font-size: 13px; color: #64748b; font-weight: 600; }
.op-tc__for { font-size: 12px; color: #64748b; margin-top: 1px; }
.op-tc__price { flex: 0 0 auto; font-size: 15px; color: #0f172a; font-weight: 700; white-space: nowrap; }
.op-tc__rub { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
/* Цвета кнопки — .op-brandbtn (catalog.css), здесь только раскладка. */
.op-tc__cta { display: block; text-align: center; margin-top: auto; border-radius: 12px; padding: 13px; font-weight: 700; font-size: 15px; }
.op-tc__cta.is-off { opacity: .45; pointer-events: none; box-shadow: none; }
.op-sections {
--op-accent: #2563EB;
--op-accent-d: #1d4ed8;
--op-ink: #0f172a;
--op-muted: #64748b;
--op-line: #e2e8f0;
font-family: 'Inter', sans-serif;
color: var(--op-ink);
clear: both; /* уйти под картинку и сводку Woo (они с float), не «прилипать» вверху */
width: 100%;
margin-top: 32px;
}
/* Заголовок секции */
.op-sec {
margin: 46px 0 0;
}
.op-sec__h {
text-align: center;
font-size: 27px;
font-weight: 800;
letter-spacing: -.01em;
margin: 0 0 6px;
color: var(--op-ink);
}
.op-sec__sub {
text-align: center;
color: var(--op-muted);
font-size: 15px;
margin: 0 0 28px;
}
/* Короткое интро: по левому краю, как текст статьи (центрированный абзац читается хуже). */
.op-intro {
max-width: 860px;
margin: 6px auto 0; /* по центру: вкладки над ним и заголовки секций под ним тоже по центру */
text-align: center;
color: #475569;
font-size: 16.5px;
line-height: 1.6;
text-wrap: pretty;
}
.op-intro b { color: var(--op-ink); }
/* На узком экране абзац занимает 5-6 строк: по центру такое читается хуже, прижимаем влево. */
@media (max-width: 640px) {
.op-intro { text-align: left; }
}
/* ── Тарифы ── */
.op-tariffs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
align-items: stretch;
}
/* 2-4 карточки делят ряд поровну, без пустой половины (класс ставит product-template.php). */
.op-tariffs--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
.op-tariffs--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-tariffs--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .op-tariffs--n3, .op-tariffs--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .op-tariffs--n2, .op-tariffs--n3, .op-tariffs--n4 { grid-template-columns: minmax(0, 1fr); } }
/* Только калькулятор пополнения (без тарифов, напр. API): инфо-панель + окно, 2 колонки на ПК */
.op-tariffs--calc-only { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; gap: 36px; max-width: 900px; margin: 0 auto; }
.op-topinfo__h { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 18px; color: #0b0c0e; }
.op-topinfo__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.op-topinfo__s { display: flex; gap: 14px; align-items: flex-start; }
.op-topinfo__n { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(140deg, #3b82f6, #1d4ed8); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55); }
.op-topinfo__t b { display: block; font-size: 15px; color: #0b0c0e; letter-spacing: -.1px; }
.op-topinfo__t span { font-size: 13px; color: #6b7280; line-height: 1.5; }
.op-topinfo__note { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
.op-tariffs--calc-only { grid-template-columns: 1fr; max-width: 460px; gap: 0; }
.op-topinfo { display: none; }
}
.op-plan {
background: #fff;
border: 1.5px solid var(--op-line);
border-radius: 18px;
padding: 26px 22px;
display: flex;
flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
}
.op-plan:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .25);
}
.op-plan--pop {
border-color: var(--op-accent);
box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .4);
position: relative;
}
.op-plan--pop::before {
content: 'Популярный';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--op-accent);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 5px 14px;
border-radius: 999px;
white-space: nowrap;
}
.op-plan__name {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--op-accent);
}
.op-plan__vol {
font-size: 13px;
color: var(--op-muted);
margin-bottom: 14px;
}
.op-plan__price {
font-size: 29px;
font-weight: 800;
line-height: 1.1;
color: var(--op-ink);
}
.op-plan__price span {
font-size: 14px;
color: var(--op-muted);
font-weight: 600;
}
/* Тарифы v2: зачёркнутая цена-якорь + переключатель вариантов объёма. */
.op-plan__old { font-size: 14px; color: #9aa1ac; text-decoration: line-through; margin: 0 0 3px; line-height: 1.1; }
.op-plan__old[hidden] { display: none; }
.op-plan__price .op-plan__num { font-size: 29px; font-weight: 800; color: var(--op-ink); }
.op-plan__sel { display: block; width: 100%; margin: 14px 0 8px; border: 1.5px solid #d8dee8; border-radius: 12px; padding: 12px 40px 12px 14px; font: 600 14px 'Inter', sans-serif; color: #0f172a; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.op-plan__sel:hover { border-color: #b7ccf6; }
.op-plan__sel:focus { outline: 0; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.op-plan__ref { font-size: 12.5px; color: var(--op-muted); margin: 5px 0 0; }
.op-plan__ref[hidden] { display: none; }
.op-plan__usd-v { font-weight: 700; color: #334155; }
.op-plan__feats {
list-style: none;
margin: 0 0 22px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.op-plan__feats li {
font-size: 14px;
color: #334155;
padding-left: 26px;
position: relative;
line-height: 1.45;
}
.op-plan__feats li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #16a34a;
font-weight: 800;
}
.op-plan__btn {
margin-top: auto;
text-align: center;
padding: 13px;
border-radius: 12px;
font-weight: 700;
font-size: 15px;
background: #f1f5f9;
color: var(--op-accent-d) !important;
border: 1.5px solid #e2e8f0;
text-decoration: none !important;
transition: background .15s ease, color .15s ease;
}
.op-plan__btn:hover { background: #e7eefb; }
/* Кнопка популярного тарифа, solo-тарифа, пополнения и «Связаться» — фирменная .op-brandbtn
(catalog.css): здесь только раскладка, цвета в одном месте. */
/* Один тариф: слева фичи, справа цена + переключатель месяц/год (не «пустая колонка»). */
.op-tariffs--solo { display: block; }
.op-solo { display: grid; grid-template-columns: 1fr 320px; max-width: 860px; margin: 0 auto; background: #fff; border: 1.5px solid var(--op-line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 44px -30px rgba(15, 23, 42, .35); }
.op-solo__l { padding: 28px 30px; }
.op-solo__name { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--op-accent); margin-bottom: 4px; }
.op-solo__tag { font-size: 13px; color: var(--op-muted); margin-bottom: 18px; }
.op-solo__feats { margin: 0; }
.op-solo__r { padding: 26px; background: #f8fafc; border-left: 1px solid var(--op-line); display: flex; flex-direction: column; }
/* Номиналов бывает много (например, пакеты Jelly у Weverse): переключатель переносится на вторую строку,
кнопки по ширине содержимого, иначе последний номинал обрезается. */
.op-solo__toggle { display: flex; flex-wrap: wrap; gap: 6px; background: #eef1f6; border-radius: 12px; padding: 5px; margin-bottom: 18px; }
.op-solo__opt { flex: 1 1 auto; min-width: 0; white-space: nowrap; border: 0; background: transparent; border-radius: 9px; padding: 10px 8px; font: 700 14px 'Inter', sans-serif; color: #4b5563; cursor: pointer; }
.op-solo__opt.is-on { background: #fff; color: var(--op-ink); box-shadow: 0 2px 6px -2px rgba(28, 30, 68, .2); }
.op-solo__save { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: #16a34a; }
.op-solo__old { font-size: 15px; color: #9aa1ac; text-decoration: line-through; margin-bottom: 2px; }
.op-solo__old[hidden] { display: none; }
.op-solo__price { font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--op-ink); }
.op-solo__price .op-solo__per { font-size: 14px; font-weight: 600; color: var(--op-muted); }
.op-solo__ref { font-size: 12.5px; color: var(--op-muted); margin-top: 6px; }
.op-solo__ref[hidden] { display: none; }
.op-solo__usd { font-weight: 700; color: #334155; }
.op-solo__btn { margin-top: 20px; text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.op-solo__note { font-size: 12px; color: #64748b; text-align: center; margin-top: 10px; }
.op-tariffs--solo .op-quote { margin-top: 22px; }
@media (max-width: 640px) {
.op-solo { grid-template-columns: 1fr; max-width: 480px; }
.op-solo__r { border-left: 0; border-top: 1px solid var(--op-line); }
}
/* «Не нашли тариф?»: белая карточка в один ряд, как строка помощи на витрине.
Текст тянется, кнопка держит свою ширину: раньше текст занимал жёсткие 720px
и кнопка падала под него, оставляя пустоту справа. */
.op-quote {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
flex-wrap: wrap;
padding: 22px 26px;
border: 1px solid var(--ui-line);
border-radius: var(--ui-r);
background: var(--ui-bg);
box-shadow: var(--ui-card-sh);
}
.op-quote__t { flex: 1 1 320px; min-width: 0; font-size: 14.5px; line-height: 1.55; color: var(--ui-text); }
.op-quote__t b {
display: block;
margin-bottom: 4px;
font-family: var(--ui-h-font);
font-size: 16.5px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ui-ink);
}
.op-quote__t br { display: none; } /* заголовок уже отдельной строкой */
.op-quote__btn {
flex: 0 0 auto;
padding: 13px 26px;
border-radius: 999px;
font-weight: 700;
font-size: 14.5px;
white-space: nowrap;
}
@media (max-width: 600px) { .op-quote__t { flex: 0 1 auto; } .op-quote__btn { width: 100%; text-align: center; } }
/* ── Вкладки «Описание | Отзывы»: сегмент-переключатель (хэш #otzyvy) ── */
.op-tabs { display: flex; justify-content: center; gap: 5px; background: #eef2f8; border: 1px solid #e6ecf5; border-radius: 16px; padding: 5px; width: max-content; max-width: 100%; margin: 40px auto 8px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); }
.op-tabs__btn, .op-tabs__btn:hover, .op-tabs__btn:focus, .op-tabs__btn:active { border: 0; background: transparent; color: #64748b; box-shadow: none; }
.op-tabs__btn { border-radius: 12px; padding: 11px 26px; font: 700 14.5px 'Inter', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.op-tabs__btn svg { width: 17px; height: 17px; opacity: .65; transition: opacity .16s ease, color .16s ease; }
.op-tabs__btn:hover, .op-tabs__btn:focus { color: #0f172a; }
.op-tabs__btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.op-tabs__btn.is-on, .op-tabs__btn.is-on:hover, .op-tabs__btn.is-on:focus { background: #fff; color: #0f172a; box-shadow: 0 4px 12px -3px rgba(15, 23, 42, .2); }
.op-tabs__btn.is-on svg { opacity: 1; color: #2563eb; }
.op-tabs__n { font-size: 11.5px; font-weight: 700; color: #2563eb; background: #e8effd; border-radius: 999px; padding: 3px 8px; }
.op-tabs__btn.is-on .op-tabs__n { background: #2563eb; color: #fff; }
.op-tabpane[hidden] { display: none; }
@media (max-width: 520px) { .op-tabs { width: 100%; } .op-tabs__btn { flex: 1; justify-content: center; padding: 11px 8px; } }
/* ── FAQ ── */
.op-faq { max-width: 820px; margin: 0 auto; }
/* Размеры = эталон гифт-полок .agc-faq: 15px / 14×16 / радиус 12. */
.op-faq details {
background: #fff;
border: 1px solid var(--op-line);
border-radius: 12px;
padding: 0;
margin-bottom: 8px;
overflow: hidden;
}
.op-faq summary {
font-size: 15px;
font-weight: 700;
line-height: 1.45;
color: var(--op-ink);
padding: 14px 16px;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary::after {
content: '+';
flex: 0 0 auto;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eef4ff;
color: var(--op-accent);
font-size: 16px;
font-weight: 700;
line-height: 1;
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.op-faq details { transition: border-color .15s ease, box-shadow .15s ease; }
.op-faq details:hover { border-color: #c9d8f0; }
.op-faq details[open] { border-color: #b7c9ec; box-shadow: 0 12px 26px -20px rgba(37, 99, 235, .45); }
.op-faq details[open] summary::after { transform: rotate(45deg); background: var(--op-accent); color: #fff; }
.op-faq__a {
padding: 0 16px 15px;
color: var(--op-muted);
font-size: 14.5px;
line-height: 1.6;
}
@media (max-width: 600px) {
.op-sec { margin-top: 34px; }
.op-sec__h { font-size: 23px; }
.op-pay__lead { font-size: 14.5px; margin-bottom: 24px; }
.op-assist { padding: 16px; gap: 13px; }
.op-assist__t { min-width: 140px; }
.op-assist__p { width: 100%; text-align: center; }
.op-plan__price { font-size: 26px; }
.op-quote { flex-direction: column; align-items: flex-start; }
}
/* ── Липкая панель на телефоне: цена и кнопка, только после прокрутки основной кнопки (app.js).
Скрытая панель невидима и для клавиатуры (visibility), кнопка — фирменная .op-brandbtn. ── */
.op-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #e6ebf2; box-shadow: 0 -6px 24px -10px rgba(15, 23, 42, .28); transform: translateY(115%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.op-sticky.is-on { transform: translateY(0); visibility: visible; transition: transform .25s ease; }
.op-sticky__price { min-width: 0; font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.3px; white-space: nowrap; }
.op-sticky__price .op-price-before, .op-sticky__price .op-price-after { font-size: 12px; color: #64748b; font-weight: 600; letter-spacing: 0; }
.op-sticky__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 12px; white-space: nowrap; }
@media (max-width: 767px) { .op-sticky { display: flex; } }
/* ═══════════════════════════════════════════════════════════
Отзывы на товаре — премиум Focus UIX (вкладка + форма)
═══════════════════════════════════════════════════════════ */
/* Форма отзыва — стиль Stripe / Apple. */
#respond .comment-form, #respond #commentform { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#respond .comment-notes { font-size: 13px; color: #64748b; margin: 0 0 18px; }
#respond .op-turnstile { margin: 4px 0 18px; min-height: 65px; }
#respond .comment-form label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin: 0 0 6px; }
#respond .op-req, #respond .required { color: #dc2626; font-weight: 700; }
#respond .comment-form textarea {
width: 100%; box-sizing: border-box; margin: 0;
border: 1.5px solid #e2e8f0; border-radius: 11px;
padding: 12px 14px; font-size: 15px; color: #0f172a; background: #fff;
box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
#respond .comment-form textarea:focus {
border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); outline: none;
}
#respond .comment-form-comment { margin: 0 0 16px; }
/* Звёзды рейтинга — современные (золото при наведении/выборе). */
#respond .comment-form-rating > label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin: 0 0 8px; }
/* Кнопка «Отправить» — в стиле наших основных кнопок. */
#respond input#submit {
background: #2563eb; border: 0; border-radius: 12px; color: #fff;
font-weight: 700; font-size: 15px; padding: 14px 30px; cursor: pointer; margin-top: 4px;
box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .7); transition: background .15s ease, transform .08s ease;
}
#respond input#submit:hover { background: #1d4ed8; }
#respond input#submit:active { transform: translateY(1px); }
/* ═══════════════════════════════════════════════════════════
Блок отзывов на товаре (.op-reviews / форма / эмодзи / окно входа).
Перенесено из инлайн-