/* Секции не-чит товаров на странице игры: макросы, триггербот, ИИ-аимбот.
   Подключается условно из games/index.php, только когда такие товары для игры есть.

   Почему отдельный файл, а не $additional_css: там CSS лежит внутри PHP-строки
   в ОДИНАРНЫХ кавычках, и любой апостроф роняет прод в белую страницу.

   Префикс evx- выбран потому, что Bootstrap 5 подключён глобально: имена вроде
   card, btn, badge, row, col заняты им. Совпадений с evx- нет ни в бутстрапе,
   ни в стилях страницы.

   Брейкпоинты строго те же, что у страницы: 1199 / 968 / 768 / 480.
   Свои не изобретаем, иначе разъедется с .cheats-showcase и .section-title. */

/* ===== Полоса из секций =====
   Была прямоугольником во всю ширину с жёсткими линиями сверху и снизу — выглядело грубо.
   Теперь это скруглённый остров: границ нет, края растворяются, фон мягкий. */
.evx-band {
    max-width: 1280px;
    margin: 0 auto 80px;
    padding: 40px 0 44px;
    border-radius: 32px;
    background:
        radial-gradient(900px 380px at 18% -10%, rgba(139,92,246,.10), transparent 62%),
        radial-gradient(700px 320px at 88% 108%, rgba(34,211,238,.06), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
/* разделитель между секциями: тонкий, с растворяющимися краями */
.evx-sep {
    max-width: 1060px; height: 1px; margin: 36px auto;
    background: linear-gradient(90deg, transparent,
        rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent);
}

/* ===== Секция и её акцент ===== */
.evx-section {
    --evx-accent: #8b5cf6;
    --evx-accent-soft: rgba(139,92,246,.14);
    --evx-accent-line: rgba(139,92,246,.34);
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    width: 100%; box-sizing: border-box;
    scroll-margin-top: 24px;   /* липкой шапки на сайте нет, компенсировать нечего */
}
.evx-section--macro   { --evx-accent:#22d3ee; --evx-accent-soft:rgba(34,211,238,.13);  --evx-accent-line:rgba(34,211,238,.34); }
.evx-section--trigger { --evx-accent:#f59e0b; --evx-accent-soft:rgba(245,158,11,.13);  --evx-accent-line:rgba(245,158,11,.34); }

/* ===== Шапка секции: слева, а не по центру — иначе три .section-title дают стену ===== */
.evx-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.evx-head__ico {
    flex:0 0 44px; width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    background: var(--evx-accent-soft); border:1px solid var(--evx-accent-line); color: var(--evx-accent);
}
.evx-head__txt { flex:1 1 260px; min-width:0; }
.evx-head__title { margin:0; font-size:1.6rem; font-weight:800; line-height:1.25; color: var(--text-light, #f8fafc); }
.evx-head__sub { margin-top:4px; font-size:.88rem; line-height:1.45; color: var(--text-gray, #94a3b8); }
.evx-head__price {
    flex:0 0 auto; display:inline-flex; align-items:baseline; gap:6px;
    padding:8px 14px; border-radius:999px; white-space:nowrap; font-size:.85rem;
    background: var(--evx-accent-soft); border:1px solid var(--evx-accent-line); color: var(--text-light, #f8fafc);
}
.evx-head__price b { color: var(--evx-accent); font-size:1rem; font-weight:800; }

/* ===== Карточка во всю ширину. Один товар должен занимать всю полосу,
        иначе получается «сиротливая карточка», ради ухода от которой всё и делалось ===== */
.evx-card {
    display:grid; grid-template-columns: 44% minmax(0,1fr); align-items:stretch;
    min-height:240px; border-radius:20px; overflow:hidden;
    background: var(--bg-card, rgba(255,255,255,.05));
    border:1px solid var(--border, rgba(255,255,255,.1));
    transition: border-color .25s, box-shadow .25s;
}
/* когда товаров в секции несколько, они идут стопкой */
.evx-card + .evx-card { margin-top: 18px; }
.evx-card:hover { border-color: var(--evx-accent-line); box-shadow: 0 18px 40px -24px rgba(0,0,0,.8); }
.evx-card--rev { grid-template-columns: minmax(0,1fr) 44%; }
.evx-card--rev .evx-media { order:2; }
.evx-card--rev .evx-body  { order:1; }

/* ===== Медиа: сцена во всю колонку + миниатюры оверлеем ===== */
.evx-media { position:relative; min-width:0; background:#0b1020; overflow:hidden; }
.evx-stage { position:absolute; inset:0; overflow:hidden; }
/* contain, а не cover: это скриншоты интерфейса, у них обрезать края нельзя */
.evx-stage__img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:#0b1020; }
.evx-stage::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:72px; pointer-events:none;
    background: linear-gradient(to top, rgba(6,10,20,.72), rgba(6,10,20,0));
}
.evx-thumbs {
    position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
    display:flex; gap:8px; align-items:center; min-width:0; overflow:hidden;
}
.evx-thumb {
    flex:0 0 64px; width:64px; height:36px; padding:0; cursor:pointer;
    border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25);
    transition: border-color .2s, transform .2s;
}
.evx-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.evx-thumb:hover { border-color: var(--evx-accent); transform: translateY(-2px); }
.evx-thumb.is-active { border-color: var(--evx-accent); box-shadow: 0 0 0 2px var(--evx-accent-soft); }
.evx-thumb--more {
    flex:0 0 auto; height:36px; padding:0 10px; border-radius:7px;
    display:inline-flex; align-items:center; font-size:.78rem; font-weight:700;
    color:#fff; text-decoration:none;
    background: rgba(10,14,26,.75); border:1px solid rgba(255,255,255,.25);
}
.evx-thumb--more:hover { border-color: var(--evx-accent); color:#fff; }

/* ===== Тело ===== */
.evx-body { min-width:0; display:flex; flex-direction:column; padding:20px 26px 18px; }
.evx-eyebrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.evx-eyebrow__type { font-size:.72rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color: var(--evx-accent); }
.evx-title { margin:0 0 8px; font-size:1.35rem; font-weight:800; line-height:1.25; color: var(--text-light, #f8fafc); overflow-wrap:break-word; }
.evx-lead {
    margin:0 0 12px; font-size:.95rem; line-height:1.55; color: var(--text-gray, #94a3b8);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* сетку функций переиспользуем из страницы, только перекрашиваем в акцент секции */
.evx-body .preview-features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom:12px; gap:6px; }
.evx-body .preview-feature-category {
    display:flex; align-items:center; gap:8px; text-align:left; padding:6px 9px;
    background: var(--evx-accent-soft); border-color: var(--evx-accent-line);
}
.evx-body .preview-feature-icon { margin:0; font-size:.95rem; color: var(--evx-accent); }
.evx-body .preview-feature-name { font-size:.8rem; }

/* тарифы чипами: три-пять ценников в ряд визуально работают как несколько карточек */
.evx-tariffs { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 13px; }
.evx-tariff {
    flex:0 1 auto; min-width:96px; display:flex; flex-direction:column; gap:2px;
    padding:7px 11px; border-radius:10px; text-decoration:none;
    background: rgba(255,255,255,.04); border:1px solid var(--border, rgba(255,255,255,.1));
    transition: border-color .2s, background .2s, transform .2s;
}
.evx-tariff:hover { border-color: var(--evx-accent); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.evx-tariff__dur { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; color: var(--text-gray, #94a3b8); }
.evx-tariff__price { font-size:1rem; font-weight:800; white-space:nowrap; color: var(--text-light, #f8fafc); }
.evx-tariff--popular { background: var(--evx-accent-soft); border-color: var(--evx-accent-line); }
.evx-tariff--popular .evx-tariff__price { color: var(--evx-accent); }

.evx-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto; }
.evx-cta .btn-preview { flex:1 1 240px; margin-top:0; padding:11px 18px; font-size:.94rem; }
.evx-more {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
    padding:11px 16px; min-height:44px; border-radius:12px; font-weight:600; font-size:.9rem;
    color: var(--text-light, #f8fafc); text-decoration:none; background:transparent;
    border:1px solid var(--border, rgba(255,255,255,.14)); transition: border-color .2s, background .2s;
}
.evx-more:hover { border-color: var(--evx-accent); background: rgba(255,255,255,.05); color: var(--text-light, #f8fafc); }

.evx-meta {
    display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
    margin-top:11px; padding-top:10px; font-size:.8rem; color: var(--text-gray, #94a3b8);
    border-top:1px solid var(--border, rgba(255,255,255,.08));
}
.evx-meta__item { display:inline-flex; align-items:center; gap:6px; }
/* Font Awesome грузится асинхронно — фиксированный слот под иконку убирает скачок вёрстки */
.evx-meta__item i { font-size:.85rem; width:16px; flex:0 0 16px; text-align:center; color: var(--evx-accent); }

/* ===== Якорные чипы в шапке страницы ===== */
.evx-anchors { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.evx-anchor {
    --evx-accent:#8b5cf6; --evx-accent-soft:rgba(139,92,246,.12); --evx-accent-line:rgba(139,92,246,.35);
    display:inline-flex; align-items:center; gap:8px; box-sizing:border-box;
    padding:9px 15px; min-height:40px; border-radius:999px; white-space:nowrap;
    font-size:.9rem; font-weight:600; text-decoration:none; color: var(--text-light, #f8fafc);
    background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
    transition: border-color .2s, background .2s, transform .2s;
}
.evx-anchor--macro   { --evx-accent:#22d3ee; --evx-accent-soft:rgba(34,211,238,.12); --evx-accent-line:rgba(34,211,238,.35); }
.evx-anchor--trigger { --evx-accent:#f59e0b; --evx-accent-soft:rgba(245,158,11,.12); --evx-accent-line:rgba(245,158,11,.35); }
.evx-anchor:hover { border-color: var(--evx-accent); background: rgba(255,255,255,.09); transform: translateY(-1px); color: var(--text-light, #f8fafc); }
.evx-anchor__ico { color: var(--evx-accent); font-size:.95rem; }
.evx-anchor__price { color: var(--evx-accent); font-weight:800; }
.evx-anchor__arr { font-size:.72rem; opacity:.65; }
/* одинокий чип рядом с бейджами выглядит потерянным — делаем его намеренно акцентным */
.evx-anchors--solo .evx-anchor { background: var(--evx-accent-soft); border-color: var(--evx-accent-line); }

/* ===== Адаптив ===== */
@media (max-width: 1199px) {
    .evx-card { min-height:225px; }
    .evx-body { padding:18px 20px 16px; }
}
@media (max-width: 968px) {
    .evx-band { padding:36px 0 40px; margin-bottom:60px; }
    .evx-sep { margin:32px auto; }
    .evx-card, .evx-card--rev { grid-template-columns:1fr; min-height:0; }
    .evx-card .evx-media, .evx-card--rev .evx-media { order:0; position:relative; aspect-ratio:16/9; }
    .evx-card .evx-body,  .evx-card--rev .evx-body  { order:1; padding:22px 20px 22px; }
    .evx-head__title { font-size:1.45rem; }
    .evx-head__price { order:3; }
}
@media (max-width: 768px) {
    .evx-head { gap:12px; }
    .evx-head__ico { flex:0 0 38px; width:38px; height:38px; font-size:1rem; }
    .evx-head__title, .evx-title { font-size:1.3rem; }
    .evx-thumb { flex:0 0 62px; width:62px; height:35px; }
    .evx-cta { flex-direction:column; align-items:stretch; }
    .evx-cta .btn-preview { flex:1 1 auto; }
    .evx-more { justify-content:center; }
    .game-header .evx-anchors { justify-content:center; }
    .evx-anchor { font-size:.85rem; padding:9px 14px; }
}
@media (max-width: 480px) {
    .evx-band { padding:28px 0 32px; }
    .evx-section { padding:0 15px; }
    .evx-body { padding:18px 16px 20px; }
    .evx-head__title, .evx-title { font-size:1.18rem; }
    .evx-lead { -webkit-line-clamp:4; font-size:.94rem; }
    /* на 375px flex-wrap даёт сирот, сетка предсказуема */
    .evx-tariffs { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .evx-tariff { min-width:0; }
    .evx-thumbs { left:10px; right:10px; bottom:10px; gap:6px; }
    .evx-thumb { flex:0 0 54px; width:54px; height:31px; }
    .evx-anchor { font-size:.82rem; padding:8px 12px; min-height:38px; }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* === Аудит 2026-09-16: края секции как у соседних, миниатюры на мобиле под сценой === */
.evx-section { box-sizing: border-box; }
@media (max-width: 768px) {
    .evx-card .evx-media, .evx-card--rev .evx-media { aspect-ratio: auto; display: flex; flex-direction: column; }
    .evx-stage { position: relative; inset: auto; aspect-ratio: 16/9; }
    .evx-stage::after { display: none; }
    .evx-thumbs { position: static; padding: 8px 10px; background: #0b1020; }
}