/* ==========================================================================
   product-page.css
   Точечные улучшения страницы товара поверх main.css.
   Подключать ПОСЛЕ main.css. Селекторы намеренно повторяют реальную
   цепочку из main.css (#product .content .main-info / .info-page ...),
   чтобы специфичность гарантированно перекрывала базовые правила
   независимо от порядка сборки. Акцент — фиолетовый (#a029d9 — уже
   встречается в main.css как .btn.purple; #ab00ff/#c04dff — из виджета
   чата, для hover/glow). Заменяет оранжевый акцент только в пределах
   #product — на остальной сайт файл не подключён, так что глобально
   ничего не меняется.
   ========================================================================== */

:root {
    --pp-purple: #a029d9;
    --pp-purple-bright: #c04dff;
    --pp-purple-glow: rgba(171, 0, 255, .5);
}

/* ---------- 1. Контраст в правой колонке ---------- */

/* лейблы (pretitle) были rgba(255,255,255,.4) — приподнимаем читаемость */
#product .content .main-info .right-block .pretitle,
#product .content .main-info .right-block .pre-title {
    color: rgba(255, 255, 255, .55);
}

/* подписи в системных требованиях — было #515560, на тёмной подложке
   грани почти не видно */
#product .content .info-page .recoms-block .block-recom-wrapper .block-recom .recom-info span {
    color: #7d8592;
}

/* значения требований делаем чуть заметнее */
#product .content .info-page .recoms-block .block-recom-wrapper .block-recom .recom-info {
    color: #d7dae0;
    font-weight: 500;
}

/* заголовки блоков ("Функции чита" / "Системные требования") —
   добавляем тонкий акцентный подчёркивающий штрих для structure */
#product .content .info-page .title {
    position: relative;
    padding-bottom: 16px;
}

#product .content .info-page .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--pp-purple);
}

/* ---------- 2. Правая колонка: закрываем пустоту под кнопкой покупки ---------- */

#product .content .main-info .right-block .trust-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

#product .content .main-info .right-block .trust-row .trust-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 10px;
    background: #21252c;
    border: 2px solid #272c34;
    border-radius: 10px;
}

#product .content .main-info .right-block .trust-row .trust-item i {
    font-size: 18px;
    color: var(--pp-purple-bright);
}

#product .content .main-info .right-block .trust-row .trust-item span {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
    font-weight: 400;
}

/* кнопка "Приобрести" — была orange из базового .btn, переводим на фиолет */
#product .content .main-info .right-block .go-buy .btn.goih {
    background: var(--pp-purple);
    box-shadow: 0 10px 26px -10px var(--pp-purple-glow);
    transition: .25s all;
}

#product .content .main-info .right-block .go-buy .btn.goih:hover {
    background: var(--pp-purple-bright);
    box-shadow: 0 12px 30px -8px var(--pp-purple-glow);
    transform: translateY(-1px);
}

/* выбранный тарифный план — было orange !important в main.css,
   перебиваем тем же !important */
#product .content .main-info .right-block .select .select-sub .sel-wrapper .sel.active {
    color: var(--pp-purple-bright) !important;
    border-color: var(--pp-purple) !important;
}

#product .content .main-info .right-block .select .select-sub .sel-wrapper .sel.active .check {
    border-color: var(--pp-purple) !important;
}

#product .content .main-info .right-block .select .select-sub .sel-wrapper .sel.active .check::before {
    background: var(--pp-purple-bright);
}

/* значок в предупреждении об оплате */
#product .content .main-info .right-block .warning i {
    color: var(--pp-purple-bright);
}

/* бейдж "Популярное" на превью */
#product .content .main-info .left-block .global .avatar .popular {
    color: var(--pp-purple-bright);
}

/* ---------- 3. Блок "Функции чита" ---------- */

/* чипы табов уже были в main.css, просто усиливаем состояние active —
   сейчас active/hover выглядят одинаково (просто серый фон),
   на active добавляем акцентную обводку как у выбранного тарифа */
#product .content .info-page .functions .functions-header .func-name {
    color: #7d8592;
}

#product .content .info-page .functions .functions-header .func-name:hover {
    color: #fff;
}

#product .content .info-page .functions .functions-header .func-name.active {
    background: #272c34;
    border-color: var(--pp-purple);
    color: var(--pp-purple-bright);
}

/* список опций внутри выбранного таба сейчас рендерится сплошным
   текстом с <br> — раскладываем в колонки, чтобы читалось как список
   функций, а не абзац */
#product .content .info-page .functions .functions-desc {
    background: hsl(218.18deg 14.29% 15.1% / 43%);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 20px 24px;
}

#product .content .info-page .functions .desc {
    column-count: 2;
    column-gap: 28px;
    color: rgba(255, 255, 255, .7);
}

#product .content .info-page .functions .desc br {
    display: block;
    content: '';
    margin-top: 10px;
}