/* =========================================================
   site.css — глобальный override-слой под нашу палитру.
   Подключается на ВСЕХ страницах после legacy main.css/style.css,
   что даёт ему приоритет и позволяет привести старые UM/ACF/WP-блоки
   к единому виду главной без переписывания каждого шаблона.

   Базовые токены: см. css/home/home.css (--igp-*).
   Здесь мы используем только переменные из home.css — он грузится
   раньше, поэтому переменные доступны.
   ========================================================= */

/* ---------- Header: fixed, чтобы пережить legacy body{display:flex} ----------
   Legacy main.css ставит body { display:flex; flex-direction:column }, что
   ломает position:sticky у дочернего элемента. Поэтому хедер делаем fixed +
   компенсируем высоту через padding-top у body. Высота 73px на десктопе,
   60px на мобильной точке (см. home.css). */
.home-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}
/* Компенсация под fixed header — на ВСЕХ страницах, не только home.
   73px на десктопе, 60px на мобиле (где шапка чуть ниже). */
body {
    padding-top: 100px !important;
}
@media (max-width: 720px) {
    body { padding-top: 60px !important; }
}

/* Mobile-overlay меню — принудительный непрозрачный фон.
   admin-theme.css ставит background: transparent !important на ВСЕ div[class]
   с гигантской специфичностью (16+ классов через :not). Перебить через
   selector не получается, поэтому рисуем фон через ::before, который
   admin-theme не трогает. */
.home-header__mobile {
    z-index: 90 !important;
}
.home-header__mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--igp-bg);
    z-index: -1;
}

/* Mobile header layout: лого слева, actions (theme toggle + burger) справа.
   На мобилке .home-header__nav скрыт, его margin-left:auto перестаёт
   работать, и actions прижимается к логотипу. Решаем на .home-header__inner:
   justify-content: space-between. */
@media (max-width: 900px) {
    .home-header__inner {
        justify-content: space-between;
    }
    .home-header__actions {
        margin-left: auto;
    }
}

/* ---------- Hero: 100vh + scroll-down arrow (2026-05-26) ----------
   Hero заполняет viewport, контент центрирован по вертикали, scroll-arrow
   прижата к низу. Padding-bottom 120px резервирует место под стрелку,
   чтобы lead-текст не наезжал на неё. */
.home-hero {
    /* Hero = ровно один экран. body уже имеет padding-top под fixed-шапку,
       так что 100dvh внутри body — это видимая часть под шапкой. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 0 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
@media (max-width: 720px) {
    .home-hero {
        padding: 16px 0 !important;
    }
}
.home-hero .home-container {
    width: 100%;
    /* НЕ ставить position: relative — иначе стрелка scroll прицепится
       к контейнеру (высота = контента), а не к секции (100vh). */
}
.home-hero__inner {
    /* был flex column / center — оставляем как есть */
}
/* Scroll-down indicator */
.home-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--igp-text-muted);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .2s ease, color .2s ease;
}
.home-hero__scroll:hover {
    opacity: 1;
    color: var(--igp-accent);
}
.home-hero__scroll-arrow {
    display: inline-flex;
    animation: home-hero-bounce 2.4s ease-in-out infinite;
}
@keyframes home-hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero__scroll-arrow { animation: none; }
}
@media (max-width: 720px) {
    .home-hero__scroll { bottom: 14px; }
}

/* ---------- Hero CTA — классическая, чистая (2026-05-26) ----------
   Прямоугольник с лёгким скруглением, фирменный красный, белый текст +
   иконка-стрелка. На hover — поднимается на 1px, glow усиливается,
   стрелка чуть сдвигается вправо. Минимум визуального шума. */
.home-hero__actions {
    margin-top: 0;
    display: flex;
    justify-content: center;
}
.home-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 42px;
    background: var(--igp-accent);
    color: var(--igp-on-accent);
    text-decoration: none;
    border: 0;
    border-radius: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 6px 18px rgba(211, 32, 41, 0.32);
    transition:
        transform .18s ease,
        box-shadow .25s ease,
        background .2s ease;
    cursor: pointer;
}
.home-hero__cta:hover {
    background: var(--igp-accent-hover, #e63a44);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 10px 26px rgba(211, 32, 41, 0.45);
}
.home-hero__cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(211, 32, 41, 0.35);
}
.home-hero__cta-label { white-space: nowrap; }
.home-hero__cta-arrow {
    display: inline-flex;
    transition: transform .25s ease;
}
.home-hero__cta:hover .home-hero__cta-arrow {
    transform: translateX(4px);
}
@media (max-width: 540px) {
    .home-hero__cta { padding: 18px 30px; font-size: 16px; }
}

/* ---------- Hero kicker / subtitle / lead — cyberpunk terminal style ----------
   Игровая «терминал»-эстетика: моно-шрифт, угловые скобки, ## prefix, мигающий
   каретик. Сам HERO-заголовок (Molot, glitch) НЕ меняется. */

/* Kicker над H1 */
.home-hero__kicker {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--igp-accent);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.95;
}
.home-hero__bracket {
    color: var(--igp-accent);
    font-weight: 700;
}
.home-hero__kicker-text {
    color: var(--igp-text);
    font-weight: 600;
}
.home-hero__caret {
    color: var(--igp-accent);
    animation: home-hero-caret-blink 1.05s steps(1, end) infinite;
}
@keyframes home-hero-caret-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Subtitle: > text_ — prompt и cursor встроены в текст через ::before/::after,
   чтобы НЕ были отдельными flex-детьми (иначе они переносятся на свою строку). */
.home-hero__subtitle {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    color: var(--igp-text) !important;
    margin: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    font-weight: 500 !important;
    padding: 0 16px;
    display: block !important;
}
.home-hero__subtitle-text {
    display: inline;
    color: var(--igp-text);
    text-wrap: balance;
}
.home-hero__subtitle-text::before {
    content: '> ';
    color: var(--igp-accent);
    font-weight: 700;
}
.home-hero__subtitle-text:not(.is-typing-done)::after {
    content: '_';
    color: var(--igp-accent);
    animation: home-hero-caret-blink 1.05s steps(1, end) infinite;
    margin-left: 2px;
}
/* На мобиле — принудительно ограничиваем ширину строки, чтобы текст
   красиво ломался на 2 строки. */
@media (max-width: 720px) {
    .home-hero__subtitle {
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 8px;
    }
}
.home-hero__subtitle-prompt {
    color: var(--igp-accent);
    font-weight: 700;
}
.home-hero__subtitle-text {
    color: var(--igp-text);
}
.home-hero__subtitle-cursor {
    color: var(--igp-accent);
    animation: home-hero-caret-blink 1.05s steps(1, end) infinite;
    margin-left: 2px;
}
/* Когда typewriter закончил печатать — курсор уходит */
.home-hero__subtitle-text.is-typing-done + .home-hero__subtitle-cursor {
    display: none;
}

/* Lead: ## comment-style */
.home-hero__lead {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace !important;
    font-size: 12.5px !important;
    letter-spacing: 0.01em !important;
    font-style: normal !important;
    color: var(--igp-text-muted, rgba(255,255,255,0.55)) !important;
    margin: 0 !important;
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    justify-content: center;
}
.home-hero__lead-prompt {
    color: var(--igp-accent);
    font-weight: 700;
}

/* Typewriter — поначалу содержимое скрыто, JS постепенно дописывает текст.
   data-typewriter элемент получает класс .is-typing-done когда закончил. */
[data-typewriter]:not(.is-typing-done)::after {
    /* Невидимый span-«stub» от прыжков ширины: используем visibility:hidden копию
       исходного текста через ::after, заодно резервируем место. */
}

@media (max-width: 720px) {
    .home-hero__kicker { font-size: 11px; gap: 6px; margin-bottom: 14px; }
    .home-hero__subtitle { font-size: 12px !important; margin: 16px 0 28px !important; padding: 0 12px; }
    .home-hero__lead { font-size: 11.5px !important; padding: 0 16px; }
    .home-hero__lead-prompt { display: none; }
}

/* ---------- Glitch-анимация при смене темы (2026-05-26) ----------
   .home-hero__char анимируется через color/text-shadow с CSS-переменными.
   На некоторых мобильных GPU при смене data-theme происходит рывок —
   потому что keyframes пересчитываются с новой палитрой посередине цикла.
   Решение: на момент переключения темы (data-theme-changing) отключаем
   анимацию, чтобы избежать «прыжка». Класс ставится JS на 350мс. */
[data-theme-changing] .home-hero__char {
    animation: none !important;
    color: var(--igp-text) !important;
    text-shadow: none !important;
    transform: none !important;
    transition: color .35s ease;
}

/* Sticky-header пересчёт цвета подложки в тёмной теме */
:root[data-theme="dark"] body { background: var(--igp-bg); color: var(--igp-text); }

/* ---------- Контентные обёртки старого шаблона ---------- */
body:not(.home) .banner {
    background: var(--igp-surface);
    padding: 32px 0;
}
body:not(.home) .lozung {
    background: var(--igp-accent) !important;
    color: var(--igp-on-accent);
    border-radius: 14px;
    padding: 14px 22px;
}

/* ---------- Кнопки legacy .btn / .um-button ----------
   Единый размер с .home-btn: padding 16px 28px, radius 12px,
   font-size 15px, weight 600. */
.btn,
button.btn,
a.btn,
input[type="submit"],
.um-button,
.um a.um-button,
.ndg-form input[type="submit"],
.acf-form-submit-wrap input[type="submit"],
.acf-button,
.acf-button.button-primary,
button.button-primary,
.wp-block-button__link,
.searchandfilter input[type="submit"] {
    background: var(--igp-accent, #c23016) !important;
    background-image: none !important;
    color: var(--igp-on-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 16px 28px !important;
    height: auto !important;
    min-height: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
.um-button:hover,
.um a.um-button:hover,
.ndg-form input[type="submit"]:hover,
.acf-form-submit-wrap input[type="submit"]:hover,
.acf-button:hover,
button.button-primary:hover,
.wp-block-button__link:hover {
    background: var(--igp-accent-hover, #e63a44) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
    opacity: 1 !important;
}
/* dark: ACF-кнопки — это <a class="acf-button">, и admin-theme.css
   правилом `html body.admin-theme-dark a { color: --igp-text-link }`
   (голубой, !important) перекрашивает их текст. У кнопки красный фон —
   текст должен быть белым. Перебиваем тем же префиксом, чтобы выиграть
   по специфичности. */
html body.admin-theme-dark a.acf-button,
html body.admin-theme-dark .acf-button,
html body.admin-theme-dark .um-button,
html body.admin-theme-dark .um a.um-button,
html body.admin-theme-dark #fest-form .acf-button,
html body.admin-theme-dark #fest-form .acf-button:hover {
    color: var(--igp-on-accent) !important;
}

/* dark: логотип — inline-SVG внутри <a class="home-header__logo">, часть путей
   залита fill="currentColor" и наследует color ссылки. Правило admin-theme.css
   `html body.admin-theme-dark a { color: --igp-text-link }` (голубой, !important)
   перекрашивает эти пути. Возвращаем логотипу его color (var(--igp-text)),
   перебивая тем же префиксом с большей специфичностью. */
html body.admin-theme-dark a.home-header__logo,
html body.admin-theme-dark a.home-header__logo:hover,
html body.admin-theme-dark .home-header__logo .home-header__logo-svg {
    color: var(--igp-text) !important;
}

/* ---------- Поля ввода ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select,
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um textarea,
.um select,
.acf-input input[type="text"],
.acf-input input[type="email"],
.acf-input input[type="url"],
.acf-input input[type="number"],
.acf-input textarea,
.acf-input select {
    background: var(--igp-surface);
    color: var(--igp-text);
    border: 1px solid var(--igp-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}
input:focus, textarea:focus, select:focus,
.um input:focus, .um textarea:focus, .um select:focus,
.acf-input input:focus, .acf-input textarea:focus, .acf-input select:focus {
    outline: none !important;
    border-color: var(--igp-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--igp-accent) 15%, transparent) !important;
}

/* ---------- Заголовки секций UM/ACF ----------
   В add-game форма с голубыми «табами»-плашками (.acf-fields > h2,
   custom labels). Приводим к нейтральному виду. */
.acf-tab-wrap .acf-tab-button,
.acf-field-tab > .acf-label {
    background: transparent !important;
    color: var(--igp-text) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}
.acf-tab-wrap ul.acf-hl li.active .acf-tab-button,
.acf-tab-wrap ul.acf-hl li a.selected {
    background: var(--igp-accent) !important;
    color: var(--igp-on-accent) !important;
    border-color: var(--igp-accent) !important;
}

/* ---------- ACF: убираем серую подложку всей формы ----------
   У АCF-form контейнер в светло-сером, и поля внутри прозрачные.
   Делаем форму на surface, чтобы перекликалось с карточками. */
.acf-form,
.acf-fields,
.acf-field {
    background: transparent !important;
}
.acf-field > .acf-label > label {
    color: var(--igp-text);
    font-weight: 600;
}
.acf-field > .acf-label > p.description {
    color: var(--igp-text-muted);
}

/* ---------- UM: левая колонка профиля ----------
   Тёмно-серая, чужеродная. Делаем surface + аккуратные карточки. */
.um-account-nav,
.um .um-account-nav,
.um-account-meta {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border);
    border-radius: 14px;
}
.um-account-nav a {
    color: var(--igp-text) !important;
    border-radius: 8px;
}
.um-account-nav a.active,
.um-account-nav a:hover {
    background: color-mix(in srgb, var(--igp-accent) 10%, transparent) !important;
    color: var(--igp-accent) !important;
}

/* ---------- UM: чёрная плашка сообщений / админ-меню ---------- */
.um .um-header {
    background: var(--igp-surface) !important;
    color: var(--igp-text) !important;
    border-radius: 14px 14px 0 0;
}
.um .um-header .um-name a { color: var(--igp-text) !important; }

/* ---------- Старая шапка nominator/festival ---------- */
.lozung,
.simply-title strong {
    color: var(--igp-on-accent);
}

/* ---------- Footer ---------- */
.ndg-footer .footer-main {
    background: var(--igp-text) !important;
}
:root[data-theme="dark"] .ndg-footer .footer-main {
    background: var(--igp-surface) !important;
}
.ndg-footer .ndg-copy-row,
.ndg-footer .footer-main {
    color: rgba(255,255,255,0.85);
}
.ndg-footer .wdp-footer-menu a {
    color: rgba(255,255,255,0.85) !important;
    transition: color .15s ease;
}
.ndg-footer .wdp-footer-menu a:hover {
    color: #fff !important;
}

/* ---------- Контентные страницы (privacy/cookie/terms) ----------
   У них стандартный WP-контент: <h1>, <p>, <ul>. Дать им
   контейнер по центру и нормальную типографику. */
body:not(.home) .page-text,
body:not(.home) .entry-content,
body.page article .post-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    color: var(--igp-text);
    line-height: 1.6;
}
body:not(.home) .entry-content h1,
body:not(.home) .entry-content h2,
body:not(.home) .entry-content h3 {
    color: var(--igp-text);
    font-family: 'Molot', 'Inter', sans-serif;
    font-weight: 500;
}
body:not(.home) .entry-content a {
    color: var(--igp-accent);
}

/* ---------- Уведомления Yoast/cookie-banner ----------
   У многих legacy-сайтов внизу плашка cookie серо-чёрная — пусть
   будет surface + красная кнопка через переменные. */
#cli-bar-msg-container,
.cli-bar-message,
.wt-cli-cookie-bar-container {
    background: var(--igp-text) !important;
    color: #fff !important;
}
.cli-plugin-button,
.wt-cli-accept-all-btn,
.wt-cli-accept-btn,
.cli_settings_button {
    background: var(--igp-accent) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--igp-on-accent) !important;
    font-family: 'Inter', sans-serif !important;
}

/* ---------- WP admin-bar (когда залогинен) ----------
   Подгоним фон под нашу палитру, чтобы не выпадал. */
#wpadminbar {
    background: var(--igp-text) !important;
}

/* ---------- ACF True/False switch — фирменный тогл (2026-05-26 v3) ----------
   ACF рендерит .acf-switch с тремя внутренними блоками: .acf-switch-on,
   .acf-switch-off и .acf-switch-slider. Их положение управляется ACF-овским
   inline-стилем width/left, нам в это лезть бесполезно. Поэтому мы:
   • прячем оба текстовых спана (display:none) — «Да/Нет» дублируют подпись
     поля и в маленьком toggle на них всё равно нет места;
   • контейнер фиксируем 48×26, слайдер — 20×20 кружок;
   • цвет контейнера переключается через .-on (off → surface, on → accent).
*/
.acf-switch {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 999px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 26px !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.acf-switch.-on {
    background: var(--igp-accent) !important;
    border-color: var(--igp-accent) !important;
}
/* Тексты не нужны — сам toggle уже однозначный */
.acf-switch .acf-switch-on,
.acf-switch .acf-switch-off {
    display: none !important;
}
/* Слайдер — белый круг, off=слева, on=справа */
.acf-switch .acf-switch-slider {
    background: #fff !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    top: 2px !important;
    left: 2px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    position: absolute !important;
    transition: left 0.18s ease, border-color 0.18s ease;
}
.acf-switch.-on .acf-switch-slider {
    left: calc(100% - 22px) !important;
    border-color: #fff !important;
}

/* ---------- dark: тоглы как в light ----------
   admin-theme.css в dark делает две вещи:
   1) universal-сброс `html body.admin-theme-dark div:not(...)` прозрачит
      ВСЕ div[class] → белый кружок .acf-switch-slider становится
      прозрачным (исчезает);
   2) `html[lang] body.admin-theme-dark .acf-switch` красит контейнер
      в --igp-bg-tertiary вместо нашего surface.
   Перебиваем тем же оружием — префикс html[lang] body.admin-theme-dark
   поднимает специфичность выше admin-theme. Цвета берём из --igp-*,
   чтобы тогл в dark выглядел так же, как в light. */
html[lang] body.admin-theme-dark #fest-form .acf-switch,
html body.admin-theme-dark #fest-form .acf-switch {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
}
html[lang] body.admin-theme-dark #fest-form .acf-switch.-on,
html body.admin-theme-dark #fest-form .acf-switch.-on {
    background: var(--igp-accent) !important;
    border-color: var(--igp-accent) !important;
}
html[lang] body.admin-theme-dark #fest-form .acf-switch .acf-switch-slider,
html body.admin-theme-dark #fest-form .acf-switch .acf-switch-slider {
    background: #fff !important;
    border: 1px solid var(--igp-border) !important;
}
html[lang] body.admin-theme-dark #fest-form .acf-switch.-on .acf-switch-slider,
html body.admin-theme-dark #fest-form .acf-switch.-on .acf-switch-slider {
    background: #fff !important;
    border-color: #fff !important;
}

/* ---------- /add-game/ login state ----------
   Стили UM-формы входа (.login-form / .reg-info / <h3>) перенесены
   в раздел «/add-game/ — форма подачи игры» в конце файла, чтобы
   логин и сама анкета жили вместе и не конфликтовали каскадом. */

/* ---------- ACF radio/checkbox-списки: убрать лишний отступ слева ----------
   Типографическое правило `body:not(.home) .container ul { padding-left:24px }`
   (для контентных страниц) цепляет и ACF-списки на форме → радио
   «Россия/Беларусь», «2D/3D» съезжают вправо от левого края колонки.
   Обнуляем паддинг/маркеры именно для ACF-списков с запасом
   по специфичности. */
body:not(.home) .container #fest-form ul.acf-radio-list,
body:not(.home) .container #fest-form ul.acf-checkbox-list,
#fest-form ul.acf-radio-list,
#fest-form ul.acf-checkbox-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* ---------- Нативные radio (ACF acf-radio-list, .acf-true-false) ----------
   На странице /add-game/: Графика 2D/3D, RUTUBE/VK, Россия/Беларусь и т.д.
   Прячем браузерный кружок и рисуем свой. */
.acf-radio-list input[type="radio"],
.acf-field-radio input[type="radio"],
.acf-true-false input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--igp-border);
    background: var(--igp-surface);
    margin: 0 8px 0 0;
    vertical-align: -3px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.acf-radio-list input[type="radio"]:hover,
.acf-field-radio input[type="radio"]:hover,
.acf-true-false input[type="radio"]:hover {
    border-color: var(--igp-accent);
}
.acf-radio-list input[type="radio"]:checked,
.acf-field-radio input[type="radio"]:checked,
.acf-true-false input[type="radio"]:checked {
    border-color: var(--igp-accent);
    background: var(--igp-accent);
    box-shadow: inset 0 0 0 3px var(--igp-surface);
}
/* Подпись справа от radio в одну строку */
.acf-radio-list li label,
.acf-field-radio li label {
    color: var(--igp-text);
    cursor: pointer;
    margin-right: 24px;
    line-height: 1.6;
}

/* Подача игры — submit-кнопка в самом низу формы ACF */
#publish,
.acf-form-submit-wrap button,
.acf-form-submit-wrap input[type="submit"],
.acf-form #publish,
input[type="submit"][name="acf_form_submit"],
.acf-form .button-primary {
    background: var(--igp-accent) !important;
    color: var(--igp-on-accent) !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ---------- Контентные WP-страницы (privacy/cookie/terms/reglament) ----------
   Поджимаем контент в читаемую колонку и даём типографику. */
body:not(.home) .container.wrapper,
body:not(.home) .ndg-sidebar-page-content,
body:not(.home).page #main,
body.single article {
    max-width: 1240px;
    margin: 0 auto;
}
body:not(.home) .page-text,
body:not(.home) .entry-content,
body:not(.home) article .post-content,
body:not(.home) .container > h1 + *,
body.page-id-23461 article,
body.page article {
    color: var(--igp-text);
    line-height: 1.65;
    font-size: 16px;
}
body:not(.home) h1.entry-title,
body:not(.home) .container h1 {
    font-family: 'Molot', 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    color: var(--igp-text);
    margin: 32px 0 24px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
body:not(.home) .container h2,
body:not(.home) .container h3,
body:not(.home) .container h4 {
    font-family: 'Molot', 'Inter', sans-serif;
    font-weight: 500;
    color: var(--igp-text);
    margin-top: 28px;
}
body:not(.home) .container h1 + p,
body:not(.home) .container h1 + div,
body:not(.home) .container p,
body:not(.home) .container ul,
body:not(.home) .container ol {
    max-width: 880px;
}
body:not(.home) .container ul,
body:not(.home) .container ol {
    padding-left: 24px;
}
/* Контентные ссылки красные — но не в футере и не в policy-блоке. */
body:not(.home) .container a:not(.ndg-footer a):not(.igp-policy-links a) {
    color: var(--igp-accent);
}
body:not(.home) .container a:not(.ndg-footer a):not(.igp-policy-links a):hover {
    color: var(--igp-accent-hover);
}
/* Футер policy-ссылки — оставляем белые из footer.css */
.ndg-footer .igp-policy-links a {
    color: rgba(255, 255, 255, 0.5) !important;
}
.ndg-footer .igp-policy-links a:hover {
    color: #ffffff !important;
}

/* ---------- Select2 (используется в ACF) ---------- */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--single {
    background-color: var(--igp-surface) !important;
    border-color: var(--igp-border) !important;
    border-radius: 10px !important;
    color: var(--igp-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--igp-accent) !important;
}

/* ---------- Schedule (календарь стримов) ---------- */
.iss-schedule-header,
.iss-day-header,
.iss-weekday,
.iss-schedule th,
.iss-calendar-header {
    background: var(--igp-text) !important;
    color: #fff !important;
    border-color: var(--igp-text) !important;
}
.iss-day.iss-today,
.iss-day-active,
.iss-day-selected,
td.iss-today {
    border-color: var(--igp-accent) !important;
    color: var(--igp-accent) !important;
    background: color-mix(in srgb, var(--igp-accent) 8%, transparent) !important;
}

/* ---------- AmazingForms / generic form labels ----------
   Серые пилюли над полями в form-expert / support / form-fest.
   Они дочерние элементы input wrap (.amazing-form-field-label или
   просто <label> поверх <input>). Перекрашиваем на акцент. */
form label.label,
.amazing-form label,
.amazing-form .form-label,
.contact-form-label,
.form-group > label {
    background: var(--igp-text) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ---------- Pagination ---------- */
.page-numbers {
    color: var(--igp-text);
    border-radius: 8px;
    padding: 8px 12px;
}
.page-numbers.current,
.page-numbers:hover {
    background: var(--igp-accent);
    color: var(--igp-on-accent);
}

/* ---------- ЛК: адаптация иконок к теме ----------
   Иконки табов (.wdp-collapse-menu-icon img) и top-panel (bell/news i)
   запекают цвет в base64, поэтому для тёмной темы инвертируем фильтром.
   В hover-варианте — фирменный красный (запечён) остаётся как есть. */

/* Плавный переход цвета иконки */
.wdp-collapse-menu-icon img,
.wdp-lk-notifications i {
    transition: filter 0.2s ease;
}

/* Tёмная тема: инвертируем серый stroke (#9ca3af → светлее на тёмном фоне).
   invert(1) hue-rotate(180deg) сохраняет красный hover-цвет узнаваемым. */
:root[data-theme="dark"] .wdp-collapse-menu-icon img:not(.hover),
:root[data-theme="dark"] .wdp-lk-notifications i {
    filter: invert(1) hue-rotate(180deg) brightness(0.95);
}

/* Hover-картинка в тёмной теме: красный → чуть светлее, чтоб сохранить контраст */
:root[data-theme="dark"] .wdp-collapse-menu-icon img.hover {
    filter: brightness(1.15) saturate(1.1);
}

/* =========================================================================
   ТИПОГРАФИКА — глобальный пол line-height (2026-05-26).
   Legacy main.css/style.css задаёт lh: 19px на 16px-тексте (ratio 1.19),
   а в ряде заголовков (h1 48/35) lh оказывается МЕНЬШЕ font-size — буквы
   налезают друг на друга. Поднимаем разумный пол для контентных страниц
   и thank-you-шаблонов. Селекторы намеренно специфичные, чтобы не задеть
   home.css / hero-glitch / home-header.
   ========================================================================= */

/* Параграфы внутри ЛК/контента: воздух между строками */
.wdp-lk p,
.wdp-sing-window p,
.wdp-sing-gray p,
.wdp-sing-gray,
.tnx h3 p,
.tnx p,
.text p,
.faq-accordion .panel p,
.welcome p,
.cta p,
.answer p {
    line-height: 1.5;
}

/* Заголовки на legacy-шаблонах: lh >= 1.1 от font-size */
.wdp-sing-window-title h1,
.wdp-sing-window h1,
.wdp-sing-window h2,
.wdp-sing-window h3,
.tnx h3,
.welcome-title,
.lozung h1,
.lozung h2 {
    line-height: 1.2;
}

/* Thank-you (/done/) — основной текст крупный, но без перебора */
.tnx h3 p {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 18px;
}
.tnx h3 p:last-child {
    margin-bottom: 0;
}

/* «Галочка» успеха — фон у блока был утерян при чистке скинов.
   Используем inline SVG в data: чтобы не зависеть от файлов. */
.tnx .checked-yes {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d32029' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><circle cx='32' cy='32' r='28'/><path d='M20 33l9 9 16-18'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

/* «Спасибо» — выровнять центр и убрать огромную пустую зону */
.tnx {
    margin-top: 24px;
    margin-bottom: 48px;
}
.tnx .container {
    padding: 48px 32px;
    text-align: center;
}

/* Подзаголовки в singing-window — больше дышит, нет налеплений */
.wdp-sing-window-title h1 {
    line-height: 1.1;
    margin-bottom: 16px;
}
.wdp-sing-window-title p {
    line-height: 1.5;
    margin-top: 8px;
}

/* Серый info-блок: 16/1.55, нормальные отступы между параграфами */
.wdp-sing-gray {
    line-height: 1.55;
}
.wdp-sing-gray p + p {
    margin-top: 12px;
}

/* Контентные политические страницы и обычные posts: списки/абзацы — 1.6 */
.content-page p,
.content-page li,
.entry-content p,
.entry-content li {
    line-height: 1.6;
}

/* Footer policy-links: lh: 1.5 чтобы при переносе строки не слипались */
.igp-policy-links li {
    line-height: 1.5;
}

/* Мобильный пересчёт: на узких экранах base font 15, lh 1.5 */
@media (max-width: 720px) {
    .tnx h3 p { font-size: 20px; }
    .wdp-sing-window-title h1 { font-size: 32px; }
}

/* ---------- ЛК: убираем захардкоженный красный из меню ----------
   В legacy style.css три ссылки меню (Личные сообщения, Расписание стримов,
   Выйти) имели жёстко прописанный красный цвет — выглядело как «активно».
   Возвращаем нормальный чёрный для idle, красный остаётся для hover/active. */
.wdp-lk-collapse-menu-panel .wdp-collapse-menu-item-link,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link span,
.wdp-collapse-menu-item.wdp-lk-user-panel-logout-link,
.wdp-collapse-menu-item.wdp-lk-user-panel-logout-link span,
a.wdp-lk-user-panel-logout-link,
a#wdp-lk-user-panel-logout-link {
    color: var(--igp-text, #000) !important;
}

/* Inline-SVG для «Расписание стримов» — серый normal как у остальных */
.wdp-lk-stream-schedule-link .wdp-collapse-menu-icon svg {
    color: #9ca3af;
}
.wdp-lk-stream-schedule-link:hover .wdp-collapse-menu-icon svg,
.wdp-lk-stream-schedule-link.active .wdp-collapse-menu-icon svg {
    color: var(--igp-accent, #c23016);
}

/* На hover/active ссылок — текст красный (фирменный) */
.wdp-collapse-menu-item:hover .wdp-collapse-menu-item-link,
.wdp-collapse-menu-item.active .wdp-collapse-menu-item-link,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link:hover,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link.active,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link:hover span,
.wdp-collapse-menu-item.wdp-lk-stream-schedule-link.active span,
.wdp-collapse-menu-item.wdp-lk-user-panel-logout-link:hover,
.wdp-collapse-menu-item.wdp-lk-user-panel-logout-link:hover span,
a.wdp-lk-user-panel-logout-link:hover {
    color: var(--igp-accent, #c23016) !important;
}

/* ---------- ЛК: фон активного пункта меню под тёмную тему ----------
   В style.css idle-фон .wdp-collapse-menu-item:hover/.active = белый.
   В тёмной теме это даёт чёрный прямоугольник (через filter:invert).
   Перебиваем — фон только у .active (на hover фона нет, см. ниже). */
:root[data-theme="dark"] .wdp-collapse-menu-item.active {
    background: var(--igp-surface) !important;
    box-shadow: 0 0 0 1px var(--igp-border) !important;
}

/* ---------- ACF: кнопка «Добавить изображение» (аватар) ----------
   В footer.css был зелёный override #8ac75f — заменяем на фирменный красный
   в едином стиле кнопок (см. блок .btn выше). */
.wdp-lk-tab[data-tab="dev_profile"] .acf-field[data-name="avatar"] .hide-if-value a.acf-button,
.wdp-lk-tab[data-tab="dev_profile"] .acf-field[data-name="avatar"] .hide-if-value a.acf-button:hover {
    background: var(--igp-accent) !important;
    color: var(--igp-on-accent) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}
.wdp-lk-tab[data-tab="dev_profile"] .acf-field[data-name="avatar"] .hide-if-value a.acf-button:hover {
    background: var(--igp-accent-hover) !important;
}

/* ---------- ACF submit «Обновить» внутри ЛК ----------
   В style.css селектор `.wdp-lk-tab .acf-form-submit input` бьёт наш общий
   .btn-override → кнопка получает дефолтный браузерный вид. Перебиваем с
   более высокой специфичностью. */
.wdp-lk-tab .acf-form-submit input[type="submit"],
.wdp-lk-tab .acf-form-submit input.acf-button,
.wdp-lk-tab .acf-form-submit .button-primary {
    background: var(--igp-accent, #c23016) !important;
    background-image: none !important;
    color: var(--igp-on-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    height: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.wdp-lk-tab .acf-form-submit input[type="submit"]:hover,
.wdp-lk-tab .acf-form-submit input.acf-button:hover,
.wdp-lk-tab .acf-form-submit .button-primary:hover {
    background: var(--igp-accent-hover, #e63a44) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
}

/* Расстояние между ACF-полями формы редактирования профиля.
   В style.css .wdp-lk-tab .acf-fields > .acf-field имеет padding: 0,
   из-за чего поля прижаты друг к другу. Даём вертикальный воздух. */
.wdp-lk-tab .acf-fields > .acf-field {
    margin-bottom: 18px !important;
}
.wdp-lk-tab .acf-fields > .acf-field:last-child {
    margin-bottom: 0 !important;
}
.wdp-lk-tab .acf-fields > .acf-field .acf-label {
    margin-bottom: 8px !important;
}
/* Убираем декоративный «блик» из style.css (input::after) */
.wdp-lk-tab .acf-form-submit input::after,
.wdp-lk-tab .acf-form-submit input:hover::after {
    display: none !important;
}

/* ============================================================
   ACF submit «Обновить» в ЛК — фактически кликается ДЕКОР-div
   <div class="btn btn-acf-input btn-big">, реальный <input> скрыт
   через `.btn-hidden input { display:none }`. У старого `.btn` в
   main.css нет background — фон ему даёт наш блок .btn в site.css,
   но при некоторых каскадах (admin-theme.css грузится после, иные
   правила) кнопка визуально остаётся «без фона». Жёсткая фиксация
   именно для этой ACF-кнопки. ============================================================ */
body .acf-form-submit .btn.btn-acf-input,
body .acf-form-submit.btn-hidden .btn.btn-acf-input,
body .acf-form-submit.btn-hidden .btn.btn-acf-input.btn-big,
.wdp-lk-tab .acf-form-submit .btn.btn-acf-input,
.wdp-lk-tab .acf-form-submit.btn-hidden .btn.btn-acf-input,
.wdp-lk-tab .acf-form-submit.btn-hidden .btn.btn-acf-input.btn-big {
    background: var(--igp-accent, #c23016) !important;
    background-color: var(--igp-accent, #c23016) !important;
    background-image: none !important;
    color: var(--igp-on-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    height: auto !important;
    min-height: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
body .acf-form-submit .btn.btn-acf-input:hover,
body .acf-form-submit.btn-hidden .btn.btn-acf-input:hover,
.wdp-lk-tab .acf-form-submit .btn.btn-acf-input:hover {
    background: var(--igp-accent-hover, #e63a44) !important;
    background-color: var(--igp-accent-hover, #e63a44) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
}

/* Декоративные псевдоэлементы старого .btn (border-обводка и
   полупрозрачный «красный заливающийся» :before) выключаем у
   этой кнопки — наш плоский стиль их заменяет. */
body .acf-form-submit .btn.btn-acf-input::before,
body .acf-form-submit .btn.btn-acf-input::after,
.wdp-lk-tab .acf-form-submit .btn.btn-acf-input::before,
.wdp-lk-tab .acf-form-submit .btn.btn-acf-input::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   ЛК: плоский стиль вместо теней
   В исходных стилях многие элементы кабинета получают
   box-shadow 0 0 15px rgba(0,0,0,0.1). На тёмном фоне это
   создаёт грязные «тёмные прямоугольники». Гасим все тени
   внутри .wdp-lk и заменяем выделение на surface-фон + border.
   ============================================================ */
.wdp-lk,
.wdp-lk *,
.wdp-lk *::before,
.wdp-lk *::after {
    box-shadow: none !important;
}

/* Sidebar — отделяем от основного контента бордером справа,
   а не тенью. Работает и в светлой, и в тёмной теме. */
.wdp-lk .wdp-lk-collapse-menu-panel {
    border-right: 1px solid var(--igp-border, #e4e4e4);
    background: transparent;
}

/* Пункты меню sidebar в неактивном состоянии — без фона.
   Перебиваем admin-theme.css, где всем .wdp-collapse-menu-item ставится
   background: var(--igp-bg-card) (из-за чего «Расписание стримов» и
   «Выйти» рендерились с фоном, словно они активны).
   Важно: держим border: 1px solid transparent ВСЕГДА — иначе при
   hover/active появляется бордер и пункт «дёргается» на 2px. */
.wdp-lk .wdp-collapse-menu-item {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

/* Hover (если пункт НЕ активен) — фона нет, меняется только цвет
   иконки/текста. Явно гасим legacy style.css, где :hover тоже красит фон. */
.wdp-lk .wdp-collapse-menu-item:hover:not(.active) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Фон — ТОЛЬКО у активного пункта. На hover фон не появляется,
   меняется лишь цвет иконки/текста (см. блок выше: :hover → --igp-accent).
   Используем --igp-surface-alt: панель sidebar прозрачна (= фон страницы
   --igp-bg #f6f6f6), а --igp-surface в светлой теме почти белый (#ffffff),
   поэтому активный пункт сливался с панелью. --igp-surface-alt (#ededed)
   на тон темнее панели — пункт читается. В тёмной теме перебивается ниже. */
.wdp-lk .wdp-collapse-menu-item.active {
    background: var(--igp-surface-alt, #ededed) !important;
    background-color: var(--igp-surface-alt, #ededed) !important;
    box-shadow: none !important;
    border-radius: 8px;
}
:root[data-theme="dark"] .wdp-lk .wdp-collapse-menu-item.active,
body.admin-theme-dark .wdp-lk .wdp-collapse-menu-item.active {
    background: var(--igp-surface-alt, #2c2c2c) !important;
    background-color: var(--igp-surface-alt, #2c2c2c) !important;
    border: 1px solid var(--igp-border, #353535) !important;
}

/* Контентная область вкладки — без тени, только мягкая рамка */
.wdp-lk .wdp-lk-mainframe,
.wdp-lk .wdp-lk-tab,
.wdp-lk .wdp-lk-tab-content {
    box-shadow: none !important;
}

/* Top-panel (шапка ЛК с аватаром и уведомлениями) — убираем тень */
.wdp-lk .wdp-lk-top-panel,
.wdp-lk .wdp-lk-user-panel,
.wdp-lk .wdp-lk-user-panel-menu {
    box-shadow: none !important;
}

/* ============================================================
   Dropdown уведомлений — фикс «кривого» вида в тёмной теме
   Проблемы:
   - width: 200px слишком узкий, длинные тексты вылазят
   - нет overflow-y, max-height: 300px без скролла «обрезает» вид
   - кнопка «Очистить уведомления» наезжает на последнее уведомление
   - в тёмной теме фон сливается, нет читаемой рамки
   ============================================================ */
.wdp-lk-notifications-list {
    width: 320px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: var(--igp-surface, #ffffff) !important;
    border: 1px solid var(--igp-border, #e4e4e4) !important;
    box-shadow: none !important;
    /* На случай если что-то снизу обрезалось — поднимаем поверх */
    z-index: 50 !important;
}

/* admin-theme.css имеет правило
   `html body.admin-theme-dark div[class]:not(.btn):not(...)` со
   специфичностью выше нашей и `background-color: transparent !important`,
   которое съедает фон любого div'а. Поэтому здесь селектор написан
   так, чтобы быть как минимум той же специфичности (атрибутный
   `div.wdp-lk-notifications-list[class]`), а в идеале — выше.
   ВАЖНО: site.css должен грузиться ПОСЛЕ admin-theme.css; если нет,
   при равной специфичности admin-theme выиграет каскадом. */
:root[data-theme="dark"] div.wdp-lk-notifications-list[class],
body.admin-theme-dark div.wdp-lk-notifications-list[class],
html body.admin-theme-dark div.wdp-lk-notifications-list[class],
html body.admin-theme-dark.admin-theme-dark div.wdp-lk-notifications-list[class] {
    background: var(--igp-surface, #232323) !important;
    background-color: var(--igp-surface, #232323) !important;
    background-image: none !important;
    border: 1px solid var(--igp-border, #353535) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
}

/* jquery.scrollbar оборачивает .wdp-lk-notifications-list.scrollbar-inner
   в .scroll-wrapper, а сам список переносит во внутренний .scroll-content.
   .scroll-wrapper по плагину получает padding: 0 → фон у нашего исходного
   элемента «съедается» обёрткой. Задаём фон явно через --igp-surface
   (а не inherit — в светлой теме inherit тянулся к прозрачному родителю
   .wdp-lk-notifications и фон пропадал). Работает в обеих темах: токен
   --igp-surface = #fff в светлой, #232323 в тёмной. */
.wdp-lk-notifications.scrollbar-inner.scroll-wrapper,
.wdp-lk-notifications-list.scrollbar-inner.scroll-wrapper,
.wdp-lk-notifications-list .scroll-wrapper,
.wdp-lk-notifications-list .scroll-content {
    background: var(--igp-surface, #ffffff) !important;
    background-color: var(--igp-surface, #ffffff) !important;
    border-radius: inherit;
}

.wdp-lk-notifications-list a {
    display: block !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--igp-text-primary, #1a1a1a) !important;
    border-bottom: 1px solid var(--igp-border, #e4e4e4) !important;
    word-break: break-word;
    white-space: normal;
}
.wdp-lk-notifications-list a:last-of-type {
    border-bottom: 0 !important;
}
.wdp-lk-notifications-list a:hover {
    background: color-mix(in srgb, var(--igp-accent, #c23016) 10%, transparent) !important;
    opacity: 1 !important;
    border-radius: 6px;
}

/* Кнопка «Очистить уведомления» — отдельным блоком снизу,
   с разделителем сверху, чтобы не наезжала на последнее уведомление */
.wdp-lk-notifications-list button {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 10px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--igp-border, #e4e4e4) !important;
    border-radius: 0 !important;
    color: var(--igp-accent, #c23016) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer;
}
.wdp-lk-notifications-list button:hover {
    background: color-mix(in srgb, var(--igp-accent, #c23016) 12%, transparent) !important;
    opacity: 1 !important;
}

/* ============================================================
   ЛК — контраст «карточек» в тёмной теме
   В светлой теме .wdp-lk-top-panel, .wdp-lk-user-panel-menu, инпуты
   формы и mainframe-таб имеют белый фон на сером фоне страницы —
   получается мягкое выделение. В тёмной теме admin-theme.css всем им
   ставит --igp-bg-card (#242424), а фон страницы тоже близок к нему,
   и блоки сливаются. Поднимаем «карточки» на --igp-bg-tertiary (#2a2a2a),
   а sidebar — на --igp-bg-hover (#333), чтобы был чёткий рельеф.
   ============================================================ */
:root[data-theme="dark"] .wdp-lk .wdp-lk-top-panel,
:root[data-theme="dark"] .wdp-lk .wdp-lk-user-panel-menu,
:root[data-theme="dark"] .wdp-lk .wdp-lk-user-role-profile,
body.admin-theme-dark .wdp-lk .wdp-lk-top-panel,
body.admin-theme-dark .wdp-lk .wdp-lk-user-panel-menu,
body.admin-theme-dark .wdp-lk .wdp-lk-user-role-profile {
    background: var(--igp-surface, #232323) !important;
    background-color: var(--igp-surface, #232323) !important;
    border: 1px solid var(--igp-border, #353535) !important;
    border-radius: 10px;
}

/* ============================================================
   Модалка «Подтвердить выход» — backdrop blur + контрастный блок
   В исходных стилях overlay был rgba(0,0,0,.5) без blur → фон ЛК
   просвечивает, прочитать модалку сложно. Добавляем blur и более
   плотный overlay; сам блок переоформляем под тёмную тему.
   ============================================================ */
.logout-modal {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.logout-modal-block {
    min-width: 320px;
    padding: 28px 36px !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    text-align: center;
    background: var(--igp-surface, #ffffff) !important;
    color: var(--igp-text-primary, #1a1a1a) !important;
    border: 1px solid var(--igp-border, #e4e4e4);
}

.logout-modal-block a {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 22px;
    background: var(--igp-accent, #c23016) !important;
    color: var(--igp-on-accent) !important;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.15s ease;
}
.logout-modal-block a:hover {
    background: var(--igp-accent-hover, #e63a44) !important;
    transform: translateY(-1px);
}

.logout-modal-block .logout-modal-close {
    right: 10px !important;
    top: 8px !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--igp-text-muted, #888);
    transition: background 0.2s ease, color 0.2s ease;
}
.logout-modal-block .logout-modal-close:hover {
    background: color-mix(in srgb, var(--igp-accent, #c23016) 12%, transparent);
    color: var(--igp-accent, #c23016) !important;
}

/* Тёмная тема — блок на elevated surface */
:root[data-theme="dark"] .logout-modal-block,
body.admin-theme-dark .logout-modal-block,
html body.admin-theme-dark .logout-modal-block {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
    border-color: var(--igp-border-primary, #3a3a3a) !important;
}

/* Активный таб и его контент — тот же elevated-фон, но БЕЗ рамки
   (по запросу: «убери обводку у wdp-lk-tab active») */
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab-content,
body.admin-theme-dark .wdp-lk .wdp-lk-tab-content {
    background: var(--igp-surface, #232323) !important;
    background-color: var(--igp-surface, #232323) !important;
    border: 0 !important;
    border-radius: 10px;
}

/* Активный пункт меню в sidebar — см. канонический блок выше
   (.wdp-collapse-menu-item.active/:hover → --igp-surface-alt). Дубль удалён. */

/* Инпуты формы редактирования профиля — в светлой теме они белые на
   серой подложке. В тёмной admin-theme.css уже даёт --igp-bg-input,
   но из-за обёртки .wdp-lk-tab.active (теперь #2a2a2a) контраст
   почти нулевой. Делаем инпуты явно темнее обёртки. */
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab input[type=text],
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab input[type=email],
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab input[type=url],
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab textarea,
:root[data-theme="dark"] .wdp-lk .wdp-lk-tab select,
body.admin-theme-dark .wdp-lk .wdp-lk-tab input[type=text],
body.admin-theme-dark .wdp-lk .wdp-lk-tab input[type=email],
body.admin-theme-dark .wdp-lk .wdp-lk-tab input[type=url],
body.admin-theme-dark .wdp-lk .wdp-lk-tab textarea,
body.admin-theme-dark .wdp-lk .wdp-lk-tab select {
    background: var(--igp-surface-alt, #2c2c2c) !important;
    background-color: var(--igp-surface-alt, #2c2c2c) !important;
    border: 1px solid var(--igp-border, #353535) !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
}

/* ============================================================
   Медиабиблиотека WordPress (wp.media)
   На фронте модалка открывается через ACF / wp_enqueue_media().
   Без админских стилей backdrop и frame прозрачные → видно
   страницу под модалкой. Даём непрозрачный фон + blur для
   overlay. В тёмной теме — тёмная карточка.
   ============================================================ */
.media-modal-backdrop {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
}

.media-modal,
.media-frame,
.media-frame-content,
.media-frame-router,
.media-frame-menu,
.media-frame-title,
.media-frame-toolbar,
.media-frame .attachments-browser,
.media-frame .media-toolbar,
.media-sidebar,
.media-frame .uploader-inline {
    background: var(--igp-surface) !important;
    background-color: var(--igp-surface) !important;
}

.media-frame,
.media-modal-content {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Тёмная тема — медиабиблиотека на elevated surface */
:root[data-theme="dark"] .media-modal,
:root[data-theme="dark"] .media-frame,
:root[data-theme="dark"] .media-frame-content,
:root[data-theme="dark"] .media-frame-router,
:root[data-theme="dark"] .media-frame-menu,
:root[data-theme="dark"] .media-frame-title,
:root[data-theme="dark"] .media-frame-toolbar,
:root[data-theme="dark"] .media-frame .attachments-browser,
:root[data-theme="dark"] .media-frame .media-toolbar,
:root[data-theme="dark"] .media-sidebar,
:root[data-theme="dark"] .media-frame .uploader-inline,
body.admin-theme-dark .media-modal,
body.admin-theme-dark .media-frame,
body.admin-theme-dark .media-frame-content,
body.admin-theme-dark .media-frame-router,
body.admin-theme-dark .media-frame-menu,
body.admin-theme-dark .media-frame-title,
body.admin-theme-dark .media-frame-toolbar,
body.admin-theme-dark .media-frame .attachments-browser,
body.admin-theme-dark .media-frame .media-toolbar,
body.admin-theme-dark .media-sidebar,
body.admin-theme-dark .media-frame .uploader-inline,
html body.admin-theme-dark .media-modal,
html body.admin-theme-dark .media-frame,
html body.admin-theme-dark .media-frame-content,
html body.admin-theme-dark .media-frame-router,
html body.admin-theme-dark .media-frame-menu,
html body.admin-theme-dark .media-frame-title,
html body.admin-theme-dark .media-frame-toolbar,
html body.admin-theme-dark .media-frame .attachments-browser,
html body.admin-theme-dark .media-frame .media-toolbar,
html body.admin-theme-dark .media-sidebar,
html body.admin-theme-dark .media-frame .uploader-inline {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
    border-color: var(--igp-border-primary, #3a3a3a) !important;
}

/* Заголовок модалки и подзаголовок в тёмной теме */
body.admin-theme-dark .media-modal .media-frame-title h1,
body.admin-theme-dark .media-modal .media-frame-menu .media-menu a,
body.admin-theme-dark .media-modal .media-frame-router .media-router a,
html body.admin-theme-dark .media-modal .media-frame-title h1,
html body.admin-theme-dark .media-modal .media-frame-menu .media-menu a,
html body.admin-theme-dark .media-modal .media-frame-router .media-router a {
    color: var(--igp-text-primary, #f3f3f3) !important;
}

/* Активная вкладка роутера (Загрузить / Библиотека) */
body.admin-theme-dark .media-modal .media-router .media-menu-item.active,
body.admin-theme-dark .media-modal .media-router .media-menu-item:hover,
html body.admin-theme-dark .media-modal .media-router .media-menu-item.active,
html body.admin-theme-dark .media-modal .media-router .media-menu-item:hover {
    background: var(--igp-bg-hover, #333) !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
}

/* Поля поиска и фильтров в медиабиблиотеке — тёмные */
body.admin-theme-dark .media-frame input[type="text"],
body.admin-theme-dark .media-frame input[type="search"],
body.admin-theme-dark .media-frame select,
body.admin-theme-dark .media-frame textarea,
html body.admin-theme-dark .media-frame input[type="text"],
html body.admin-theme-dark .media-frame input[type="search"],
html body.admin-theme-dark .media-frame select,
html body.admin-theme-dark .media-frame textarea {
    background: var(--igp-bg-primary, #1a1a1a) !important;
    background-color: var(--igp-bg-primary, #1a1a1a) !important;
    border: 1px solid var(--igp-border-primary, #3a3a3a) !important;
    color: var(--igp-text-primary, #f3f3f3) !important;
}

/* ============================================================
   FAQ-аккордеон внутри ЛК (вкладка «Инструкция» и пр.)
   Разметка из ACF wp-editor: .faq-accordion > .panel > .toggle/.answer.
   JS-toggle (common.js:34-35) уже работает через классы .open.
   Сейчас стили в main.css задают Pobeda-h2 32px без фона/рамок,
   на тёмной теме контента почти не видно. Приводим к тому же
   визуалу, что .home-faq__item на главной: surface-карточка,
   радиус 18px, бордер, chevron-кнопка справа, плавное раскрытие.
   ============================================================ */
.wdp-lk-tab .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    margin: 0;
}

.wdp-lk-tab .faq-accordion .panel {
    background: var(--igp-surface, #ffffff) !important;
    border: 1px solid var(--igp-border, #e4e4e4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wdp-lk-tab .faq-accordion .panel:hover {
    border-color: color-mix(in srgb, var(--igp-accent, #c23016) 35%, var(--igp-border, #e4e4e4));
}

/* Тёмная тема — elevated surface, чтобы карточки FAQ выделялись
   на основном фоне вкладки .wdp-lk-tab.active. */
:root[data-theme="dark"] .wdp-lk-tab .faq-accordion .panel,
body.admin-theme-dark .wdp-lk-tab .faq-accordion .panel,
html body.admin-theme-dark .wdp-lk-tab .faq-accordion .panel {
    background: var(--igp-surface-alt, #2c2c2c) !important;
    background-color: var(--igp-surface-alt, #2c2c2c) !important;
    border-color: var(--igp-border, #353535) !important;
}
/* Содержимое FAQ-панели (вопрос/ответ) — без своего фона, наследует .panel */
:root[data-theme="dark"] .wdp-lk-tab .faq-accordion .toggle,
:root[data-theme="dark"] .wdp-lk-tab .faq-accordion .answer,
body.admin-theme-dark .wdp-lk-tab .faq-accordion .toggle,
body.admin-theme-dark .wdp-lk-tab .faq-accordion .answer,
html body.admin-theme-dark .wdp-lk-tab .faq-accordion .toggle,
html body.admin-theme-dark .wdp-lk-tab .faq-accordion .answer {
    background: transparent !important;
    background-color: transparent !important;
}

/* Заголовок-кнопка раскрытия */
.wdp-lk-tab .faq-accordion .toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 18px 24px !important;
    position: relative;
    user-select: none;
    width: 100%;
    background: transparent !important;
    transition: background 0.2s ease;
}
.wdp-lk-tab .faq-accordion .toggle:hover {
    background: color-mix(in srgb, var(--igp-accent, #c23016) 6%, transparent) !important;
}

/* Гасим декоративный border-bottom-«линию» и старую стрелку из main.css. */
.wdp-lk-tab .faq-accordion .toggle::before {
    display: none !important;
    content: none !important;
}
.wdp-lk-tab .faq-accordion .toggle::after {
    /* Chevron-кнопка как у .home-faq__chevron */
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    background: var(--igp-surface-alt, #ededed) !important;
    background-image: none !important;
    border-radius: 50% !important;
    transition: transform 0.25s ease, background 0.2s ease !important;
    /* SVG-стрелка через mask, чтобы цвет управлялся currentColor. */
    -webkit-mask: url(../imgs/arrow-down.svg) center / 14px no-repeat;
            mask: url(../imgs/arrow-down.svg) center / 14px no-repeat;
}
:root[data-theme="dark"] .wdp-lk-tab .faq-accordion .toggle::after,
body.admin-theme-dark .wdp-lk-tab .faq-accordion .toggle::after,
html body.admin-theme-dark .wdp-lk-tab .faq-accordion .toggle::after {
    background: var(--igp-surface, #232323) !important;
}

/* Текст вопроса — компактный Inter, не Pobeda 32px. */
.wdp-lk-tab .faq-accordion .toggle h2,
.wdp-lk-tab .faq-accordion .toggle p {
    flex: 1;
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(15px, 1.2vw, 17px) !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--igp-text, var(--igp-text-primary, #1a1a1a)) !important;
    text-align: left;
}

/* Открытое состояние — переворот chevron. */
.wdp-lk-tab .faq-accordion .toggle.open::after {
    transform: rotate(180deg) !important;
}

/* Ответ. */
.wdp-lk-tab .faq-accordion .answer {
    display: none;
    padding: 0 24px 20px 24px !important;
    color: var(--igp-text, var(--igp-text-primary, #1a1a1a));
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    border: none !important;
}
.wdp-lk-tab .faq-accordion .answer.open {
    display: block;
    animation: lk-faq-fade-in 0.2s ease;
}
.wdp-lk-tab .faq-accordion .answer p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
    color: inherit !important;
}
.wdp-lk-tab .faq-accordion .answer p:last-child {
    margin-bottom: 0 !important;
}
.wdp-lk-tab .faq-accordion .answer a {
    color: var(--igp-accent, #c23016);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wdp-lk-tab .faq-accordion .answer strong {
    color: var(--igp-text, var(--igp-text-primary, #1a1a1a));
}

@keyframes lk-faq-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .wdp-lk-tab .faq-accordion .toggle {
        padding: 14px 16px !important;
    }
    .wdp-lk-tab .faq-accordion .answer {
        padding: 0 16px 16px 16px !important;
    }
    .wdp-lk-tab .faq-accordion .toggle::after {
        width: 28px !important;
        height: 28px !important;
        -webkit-mask-size: 12px;
                mask-size: 12px;
    }
}

/* ============================================================
   Мобильное меню ЛК (≤1024px) — кнопка-бургер и панель-«шторка»
   Проблема 1: admin-theme.css:1142 перебивает .lk-panel-button
   фоном --igp-bg-card → красная плашка с SVG-иконкой исчезает,
   кнопка становится пустым прямоугольником.
   Проблема 2: admin-theme.css:180 ставит div[class]:not(...) →
   transparent, из-за чего сама панель wdp-lk-collapse-menu-panel
   при .active просвечивает контентом страницы.
   ============================================================ */
@media (max-width: 1024px) {
    /* Возвращаем красный фон и иконку «бургер» кнопке открытия. */
    html body.admin-theme-dark .lk-panel-button,
    html body.admin-theme-dark .lk-panel-button-mini,
    .lk-panel-button,
    .lk-panel-button-mini {
        background-color: var(--igp-accent, #c23016) !important;
        background-image: url(../imgs/lk/tabs.svg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 22px !important;
        border: 0 !important;
    }
    html body.admin-theme-dark .wdp-lk-collapse-menu-panel.active .lk-panel-button,
    .wdp-lk-collapse-menu-panel.active .lk-panel-button {
        /* открытая панель — крестик */
        background-image: url(/wp-content/uploads/2023/06/filter_on.svg) !important;
        background-size: 18px !important;
    }

    /* Сама панель-«шторка» в открытом состоянии — непрозрачный фон,
       чтобы контент страницы не просвечивал. */
    html body.admin-theme-dark .wdp-lk-main-panel .wdp-lk-collapse-menu-panel,
    html body.admin-theme-dark .wdp-lk-main-panel .wdp-lk-collapse-menu-panel.active,
    body.admin-theme-dark .wdp-lk-main-panel .wdp-lk-collapse-menu-panel.active,
    .wdp-lk-main-panel .wdp-lk-collapse-menu-panel.active {
        background: var(--igp-surface, #232323) !important;
        background-color: var(--igp-surface, #232323) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
        border-right: 1px solid var(--igp-border, #353535) !important;
    }
    /* На светлой теме — белый фон. */
    :root[data-theme="light"] .wdp-lk-main-panel .wdp-lk-collapse-menu-panel.active,
    body:not(.admin-theme-dark) .wdp-lk-main-panel .wdp-lk-collapse-menu-panel.active {
        background: var(--igp-surface) !important;
        background-color: var(--igp-surface) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
    }

    /* Внутренний скролл-обёртка тоже непрозрачная (admin-theme:180
       тоже её обнуляет). */
    html body.admin-theme-dark .wdp-lk-main-panel .wdp-lk-collapse-menu-panel-wrap,
    .wdp-lk-main-panel .wdp-lk-collapse-menu-panel-wrap {
        background: inherit !important;
        background-color: inherit !important;
    }
}

/* =========================================================
   /add-game/ — форма подачи игры (acf_form в fest-add-page.php)
   Цель: убрать «страшные линии» ACF-таблицы (красная полоса
   сверху каждой секции, светлые бока, вертикальный разделитель
   между колонкой лейблов и полем), привести select2 к единому
   виду полей, выровнять колонки и дать секциям воздух.
   Контейнер формы: .container > #fest-form.acf-form.
   ВАЖНО (правило проекта): только flexbox, без display:grid.
   ========================================================= */

/* ---------- Верхний блок: заголовок + описание ----------
   .simply-title-game{margin:40px 0 10px}, .add-game-description{margin:0}
   → описание прижато к заголовку, нет воздуха. Центрируем и разводим. */
.simply-title-game {
    margin: 40px 0 8px !important;
    text-align: center;
}
.add-game-description {
    text-align: center;
    margin: 0 auto 8px;
    max-width: 760px;
    color: var(--igp-text-muted);
    font-size: 15px;
    line-height: 1.5;
}
.add-game-description a {
    color: var(--igp-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Контейнер формы: ширина под анкету ---------- */
#fest-form.acf-form {
    max-width: 920px;
    margin: 24px auto 0;
}

/* ---------- Скрыть техническое поле «Title *» (_post_title) ----------
   Это системный заголовок поста ACF-формы. Пользователю его вводить
   не нужно — fest.js автоматически копирует в #acf-_post_title значение
   из «Названия»/«Краткого описания» (см. festival/js/fest.js). Поэтому
   прячем поле визуально; JS-заполнение по value продолжает работать,
   обязательность (is-required) удовлетворяется программно. */
#fest-form .acf-field--post-title,
#fest-form .acf-field[data-name="_post_title"] {
    display: none !important;
}

/* ---------- Секции-группы (.acf-field-group: «Об игре», «Медиа»…) ----------
   Каждая группа = блок-секция. Дробим воздухом, заголовок группы —
   крупный, со скромным разделителем снизу (не таблично-красным). */
#fest-form .acf-field.acf-field-group {
    border: 0 !important;
    padding: 0 !important;
    margin: 36px 0 0 !important;
}
#fest-form .acf-field.acf-field-group:first-of-type {
    margin-top: 16px !important;
}
/* Заголовок секции (label группы) */
#fest-form .acf-field-group > .acf-label {
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--igp-border) !important;
}
#fest-form .acf-field-group > .acf-label > label {
    font-family: 'Molot', 'Inter', sans-serif;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--igp-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* ---------- Убираем рамку ACF table-layout (.acf-fields -border) ----------
   Источник красной полосы сверху (#c23016), светлых боков (#ccd0d4)
   и вертикального разделителя между колонками. Гасим целиком. */
#fest-form .acf-fields,
#fest-form .acf-fields.-border,
#fest-form .acf-fields.-left,
#fest-form .acf-fields.-left.-border {
    border: 0 !important;
    background: transparent !important;
}
/* Поля внутри: ACF рисует border-top между строками таблицы. Убираем. */
#fest-form .acf-fields > .acf-field {
    border-top: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
}
#fest-form .acf-fields > .acf-field:first-child {
    padding-top: 0 !important;
}

/* ---------- Двухколоночная раскладка (-left): лейбл слева, поле справа ----------
   Было 20% (узкие лейблы → переносы «Семейная игр/игра для детей»).
   Расширяем колонку лейблов, выравниваем по верху, убираем правую
   границу-разделитель. Реализуем на flex, чтобы не зависеть от
   table-cell ACF и не тащить display:grid.
   :not(.acf-hidden) ОБЯЗАТЕЛЕН — иначе display:flex перебивает
   ACF-овский `.acf-hidden { display:none }` и показывает поля,
   скрытые conditional logic (напр. «Видео 16+» при video_type≠vk),
   причём их input остаётся disabled → тогл «не тыкается». */
#fest-form .acf-fields.-left > .acf-field:not(.acf-hidden) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 24px;
}
/* ACF -left рисует вертикальный разделитель колонок через
   .acf-field::before (position:absolute, width:184px, border-left).
   Это и есть «вертикальная линия» между лейблом и полем — гасим. */
#fest-form .acf-fields.-left > .acf-field::before,
#fest-form .acf-fields.-left > .acf-field::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
#fest-form .acf-fields.-left > .acf-field > .acf-label {
    flex: 0 0 30%;
    max-width: 30%;
    width: 30% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
}
#fest-form .acf-fields.-left > .acf-field > .acf-input {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
/* ---------- Секция «Согласия» (#rules): длинные лейблы ----------
   Тексты согласий длинные («Согласие с правилами обработки личных
   данных…» + описание), в колонке 30% жмутся на 3-5 строк. Даём
   лейблу ~70%, а тогл/чекбокс — оставшиеся ~30% справа. */
#fest-form #rules .acf-fields.-left > .acf-field > .acf-label,
#fest-form .acf-field[data-name="rules"] .acf-fields.-left > .acf-field > .acf-label {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    width: 70% !important;
}
#fest-form #rules .acf-fields.-left > .acf-field > .acf-input,
#fest-form .acf-field[data-name="rules"] .acf-fields.-left > .acf-field > .acf-input {
    flex: 1 1 0;
}
#fest-form .acf-fields.-left > .acf-field > .acf-label > label {
    color: var(--igp-text);
    font-weight: 600;
    line-height: 1.35;
}
#fest-form .acf-fields.-left > .acf-field > .acf-label .description,
#fest-form .acf-field > .acf-label > p.description {
    color: var(--igp-text-muted);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------- select2 — единый вид с инпутами (single + multiple) ----------
   Главная причина «неоднородных селектов»: multiple-select2 (Движок/
   Платформа/Жанр/Номинация) приходит с дефолтным светлым фоном и
   бордером #7e8993 → белые плашки в dark. Стилизуем ВИДИМЫЙ
   .select2-selection под --igp-*, как обычные поля формы. */
#fest-form .select2-container--default .select2-selection--single,
#fest-form .select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    padding: 4px 10px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* single: текст и стрелка по центру по вертикали */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--igp-text) !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--igp-text-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--igp-text-muted) transparent transparent transparent !important;
}
/* multiple: чипы выбранных значений под палитру */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Чипы выбранных значений — нейтральная серая плашка (не бренд-акцент,
   иначе они выходят розовыми). gap 6px + padding дают воздух между ними. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--igp-surface-alt, rgba(127,127,127,.12)) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 6px !important;
    color: var(--igp-text) !important;
    padding: 3px 10px !important;
    margin: 2px 0 !important;
    font-size: 13px;
    line-height: 1.4;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--igp-text-muted) !important;
    margin-right: 6px;
    font-weight: 700;
    transition: color .15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--igp-text) !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--igp-text) !important;
    margin-top: 0 !important;
    line-height: 1.4 !important;
    /* input[type=search] по умолчанию белый/системный фон — на тёмной плашке
       он выделяется прямоугольником. Сливаем с плашкой: прозрачный фон. */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--igp-text-muted) !important;
}
/* focus-состояние select2 — как у инпутов */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--igp-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--igp-accent) 15%, transparent) !important;
}
/* выпадающий список select2 — под палитру */
.select2-container--default .select2-dropdown {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}
.select2-container--default .select2-results__option {
    color: var(--igp-text) !important;
    background: transparent !important;
}
/* Наведённый/активный пункт — мягкая акцентная подложка вместо грубого
   серого прямоугольника select2. li.select2-results__option повышает
   специфичность, чтобы перебить правило в style.css:3656. */
.select2-container--default .select2-results li.select2-results__option--highlighted,
.select2-container--default .select2-results li.select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--igp-accent) 12%, transparent) !important;
    color: var(--igp-text) !important;
}
/* Уже выбранный пункт — лёгкая подложка + акцентный текст. */
.select2-container--default .select2-results li.select2-results__option[aria-selected=true] {
    background: color-mix(in srgb, var(--igp-accent) 8%, transparent) !important;
    color: var(--igp-accent) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    border-radius: 8px !important;
    color: var(--igp-text) !important;
}
/* select2-контейнер по ширине поля */
#fest-form .acf-input .select2-container {
    width: 100% !important;
}

/* ---------- ACF gallery / image uploader (Обложка, Скриншоты) ----------
   У них светлая рамка #ccd0d4 — чужеродная в dark. Под палитру. */
#fest-form .acf-gallery,
#fest-form .acf-image-uploader .image-wrap,
#fest-form .acf-gallery-main {
    border: 1px solid var(--igp-border) !important;
    border-radius: 10px !important;
    background: var(--igp-surface) !important;
}
#fest-form .acf-gallery-toolbar {
    background: var(--igp-surface-alt) !important;
    border-color: var(--igp-border) !important;
}
#fest-form .acf-gallery .acf-gallery-attachment {
    border-radius: 8px;
}

/* ---------- ACF repeater-таблица («Steam ключи»: .acf-repeater -table) ----------
   ACF задаёт td #f4f4f4 / th #fff с белым текстом → в dark вся таблица
   светлая, а заголовки колонок невидимы (белый по белому). Перекрашиваем
   фон ячеек/строк/шапки под --igp-* и чиним цвет текста шапки. */
#fest-form .acf-table,
#fest-form .acf-repeater .acf-table,
#fest-form .acf-table > tbody > tr > td,
#fest-form .acf-table > thead > tr > th,
#fest-form .acf-table > tbody > tr > th {
    border-color: var(--igp-border) !important;
}
#fest-form .acf-table {
    border-radius: 10px;
    overflow: hidden;
    background: transparent !important;
}
/* шапка таблицы (.acf-th) */
#fest-form .acf-table > thead > tr > th,
#fest-form .acf-table > tbody > tr.acf-row.-collapsed > td,
#fest-form .acf-thead th {
    background: var(--igp-surface-alt) !important;
    color: var(--igp-text) !important;
}
/* строки/ячейки тела */
#fest-form .acf-table > tbody > tr,
#fest-form .acf-table > tbody > tr > td,
#fest-form .acf-repeater .acf-row,
#fest-form .acf-repeater .acf-row > td {
    background: var(--igp-surface) !important;
    color: var(--igp-text) !important;
}
/* «ручка» порядка строки (drag) */
#fest-form .acf-row-handle,
#fest-form .acf-row-handle.order {
    background: var(--igp-surface-alt) !important;
    color: var(--igp-text-muted) !important;
}
/* кнопка «+ Добавить строку» под таблицей */
#fest-form .acf-actions .acf-button,
#fest-form .acf-repeater .acf-actions .button {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    color: var(--igp-text) !important;
    border-radius: 8px !important;
}

/* ---------- Submit «Добавить игру» — гарантированно по центру ----------
   .acf-form-submit имеет text-align:start. Центрируем кнопку и
   отделяем воздухом от последней секции. */
#fest-form .acf-form-submit {
    text-align: center !important;
    margin-top: 32px !important;
}

/* ---------- Ошибки валидации формы add-game ----------
   ACF по умолчанию красит сообщение об ошибке тёмно-красным на розовом
   фоне. На тёмной теме admin-theme.css перебивает цвет текста в светло-серый
   (--igp-text) и сбрасывает розовый фон → сообщение почти сливается с полем,
   а у ошибочного поля нет рамки. Возвращаем читаемость через токены
   --igp-error*: красная рамка у поля + контрастная плашка сообщения.
   Префикс `html body.admin-theme-dark` поднимает специфичность выше
   admin-theme; парный селектор без префикса работает в light. */

/* Плашка сообщения «… обязательно для заполнения» */
#fest-form .acf-error-message,
#fest-form .acf-notice.-error,
html body.admin-theme-dark #fest-form .acf-error-message,
html body.admin-theme-dark #fest-form .acf-notice.-error {
    background: var(--igp-error-bg) !important;
    border: 1px solid var(--igp-error-border) !important;
    border-radius: 8px;
    padding: 8px 12px !important;
    margin: 0 0 8px !important;
}
#fest-form .acf-error-message p,
#fest-form .acf-notice.-error p,
html body.admin-theme-dark #fest-form .acf-error-message p,
html body.admin-theme-dark #fest-form .acf-notice.-error p {
    color: var(--igp-error-text) !important;
    margin: 0 !important;
}
/* ACF-стрелочка у tooltip-сообщения — в цвет рамки */
#fest-form .acf-error-message:after,
html body.admin-theme-dark #fest-form .acf-error-message:after {
    border-top-color: var(--igp-error-border) !important;
}

/* Поле с ошибкой — заметная красная рамка (input/textarea/select2) */
#fest-form .acf-field.acf-error input[type="text"],
#fest-form .acf-field.acf-error input[type="email"],
#fest-form .acf-field.acf-error input[type="url"],
#fest-form .acf-field.acf-error input[type="number"],
#fest-form .acf-field.acf-error textarea,
#fest-form .acf-field.acf-error .select2-selection,
#fest-form .acf-field.acf-error .acf-gallery,
#fest-form .acf-field.acf-error .acf-image-uploader .image-wrap,
html body.admin-theme-dark #fest-form .acf-field.acf-error input[type="text"],
html body.admin-theme-dark #fest-form .acf-field.acf-error input[type="email"],
html body.admin-theme-dark #fest-form .acf-field.acf-error input[type="url"],
html body.admin-theme-dark #fest-form .acf-field.acf-error input[type="number"],
html body.admin-theme-dark #fest-form .acf-field.acf-error textarea,
html body.admin-theme-dark #fest-form .acf-field.acf-error .select2-selection,
html body.admin-theme-dark #fest-form .acf-field.acf-error .acf-gallery,
html body.admin-theme-dark #fest-form .acf-field.acf-error .acf-image-uploader .image-wrap {
    border-color: var(--igp-error) !important;
    box-shadow: 0 0 0 1px var(--igp-error) !important;
}

/* Метка ошибочного поля — красная, чтобы взгляд цеплялся за проблему */
#fest-form .acf-field.acf-error > .acf-label > label,
html body.admin-theme-dark #fest-form .acf-field.acf-error > .acf-label > label {
    color: var(--igp-error-text) !important;
}

/* Верхнее уведомление «Проверка не пройдена…» — оставляем штатным
   (оно уже красное-сплошное), но фиксируем читаемый белый текст в dark. */
html body.admin-theme-dark #fest-form > .acf-notice:not(.-error),
html body.admin-theme-dark #fest-form .acf-notice.-success {
    color: #fff !important;
}

/* ---------- /add-game/ login state (UM-форма входа) ----------
   Неавторизованный пользователь видит <h3> + UM-логин + reg-info.
   Заголовок жмётся к описанию, поля/кнопка не выровнены аккуратно.
   Собираем аккуратную центрированную карточку. */
.page-template-fest-add-page .container > h3 {
    text-align: center;
    margin: 28px auto 4px !important;
    padding: 0 !important;
    /* обычный шрифт (Inter), не Molot — Molot слишком «плакатный»
       для подзаголовка-подсказки. */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--igp-text);
    text-transform: none;
    letter-spacing: 0;
}
.login-form {
    display: flex;
    justify-content: center;
    margin: 24px auto 0;
}
/* UM-форма штатно сжимается до ~238px, из-за чего поля заметно ýже
   кнопки и съезжают от центра. Фиксируем приятную ширину карточки
   и тянем поля/кнопку на всю её ширину, чтобы всё было выровнено. */
.login-form .um.um-login,
.login-form .um.um-login .um-form {
    width: 360px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.login-form .um.um-login .um-field,
.login-form .um.um-login .um-field-area {
    width: 100% !important;
}
/* UM оборачивает submit в .um-col-alt(inline-block) > .um-center →
   обе обёртки сжаты по содержимому (~102px), поэтому кнопка не
   тянется. Растягиваем всю цепочку обёрток на ширину формы. */
.login-form .um.um-login .um-col-alt,
.login-form .um.um-login .um-center {
    display: block !important;
    width: 100% !important;
    text-align: center;
}
/* поля UM-логина — единый вид с формой add-game.
   В dark admin-theme.css перебивает фон через гиперспецифичный
   `html[lang] body.admin-theme-dark .um-field-area input` (= сине-серый
   --igp-bg-input, !important). Чтобы привести поля к --igp-surface,
   бьём тем же оружием: префикс `html body.admin-theme-dark` поднимает
   специфичность выше admin-theme. Light не затрагиваем (там фон уже ок). */
.login-form .um .um-field-area input[type="text"],
.login-form .um .um-field-area input[type="email"],
.login-form .um .um-field-area input[type="password"],
.login-form .um.um-login input.um-form-field {
    width: 100% !important;
    height: 48px;
    border-radius: 10px !important;
    box-sizing: border-box;
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    color: var(--igp-text) !important;
}
html body.admin-theme-dark .login-form .um .um-field-area input[type="text"],
html body.admin-theme-dark .login-form .um .um-field-area input[type="email"],
html body.admin-theme-dark .login-form .um .um-field-area input[type="password"],
html body.admin-theme-dark .login-form .um.um-login input.um-form-field {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    color: var(--igp-text) !important;
}
.login-form .um.um-login input.um-form-field::placeholder {
    color: var(--igp-text-muted) !important;
    opacity: 1;
}
/* Автозаполнение браузера красит поле своим сине-серым фоном
   (:-webkit-autofill нельзя перебить обычным background). Хак через
   inset box-shadow перекрашивает фон под --igp-surface и в autofill. */
.login-form .um.um-login input.um-form-field:-webkit-autofill,
.login-form .um.um-login input.um-form-field:-webkit-autofill:hover,
.login-form .um.um-login input.um-form-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--igp-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--igp-surface) inset !important;
    -webkit-text-fill-color: var(--igp-text) !important;
    caret-color: var(--igp-text);
}
/* кнопка «Войти» на всю ширину карточки + воздух до «Забыли пароль?» */
.login-form .um .um-form .um-button,
.login-form .um .um-form input[type="submit"] {
    width: 100% !important;
    border-radius: 12px !important;
}
/* ссылка «Забыли пароль?» лежит в .um-col-alt-b (text-align:start) →
   прижата влево. Центрируем контейнер и даём воздух от кнопки. */
.login-form .um .um-form .um-col-alt,
.login-form .um .um-form .um-col-alt-b {
    text-align: center !important;
    margin-top: 12px !important;
}
.login-form .um .um-form a.um-link-alt,
.login-form .um .um-form a[href*="password_reset"] {
    display: inline-block;
}
.reg-info {
    text-align: center;
    margin: 20px auto 0;
    max-width: 360px;
    color: var(--igp-text-muted);
}
.reg-info a {
    color: var(--igp-accent);
}

/* =========================================================
   UM-формы входа и регистрации — общие правки
   (логин на /add-game/ в .login-form + страница /registration/
   .um-register, которая НЕ обёрнута в .login-form).
   ========================================================= */

/* ---------- Отступы между полями ----------
   UM задаёт .um-field { margin: 0 } → поля стоят впритык.
   Добавляем вертикальный воздух между строками формы. */
.login-form .um .um-field,
.um.um-register .um-field,
.um.um-login .um-field {
    margin-bottom: 10px !important;
}
.login-form .um .um-field:last-of-type,
.um.um-register .um-field:last-of-type,
.um.um-login .um-field:last-of-type {
    margin-bottom: 0 !important;
}

/* ---------- Кнопки UM (.um-button) — яркий бренд-акцент ----------
   footer.php инлайном красит ВСЕ .um-button тёмным градиентом
   (#c23016 → #b43630) !important, и т.к. этот <style> идёт в конце
   <body> (позже site.css), на боевом кнопка «Войти»/«Зарегистрироваться»
   получается тёмно-красной и плохо читается в dark. Перебиваем плоским
   --igp-accent с запасом по специфичности (выше, чем у .um-button). */
.login-form .um .um-button,
.login-form .um input[type="submit"].um-button,
.um.um-login .um-button,
.um.um-register .um-button,
.um.um-register input[type="submit"].um-button {
    background: var(--igp-accent) !important;
    background-image: none !important;
    color: var(--igp-on-accent) !important;
    border: 0 !important;
    border-radius: 12px !important;
}
.login-form .um .um-button:hover,
.um.um-login .um-button:hover,
.um.um-register .um-button:hover {
    background: var(--igp-accent-hover) !important;
    background-image: none !important;
}

/* ---------- Поля формы регистрации — единый вид с темой ----------
   .um-register не в .login-form, поэтому login-правила её не ловят.
   Приводим инпуты/textarea/select к --igp-surface (перебивая
   admin-theme и autofill), как у формы входа. */
.um.um-register .um-field-area input[type="text"],
.um.um-register .um-field-area input[type="email"],
.um.um-register .um-field-area input[type="password"],
.um.um-register .um-field-area input[type="tel"],
.um.um-register .um-field-area input[type="number"],
.um.um-register .um-field-area textarea,
.um.um-register input.um-form-field,
html body.admin-theme-dark .um.um-register .um-field-area input,
html body.admin-theme-dark .um.um-register .um-field-area textarea {
    background: var(--igp-surface) !important;
    border: 1px solid var(--igp-border) !important;
    color: var(--igp-text) !important;
    border-radius: 10px !important;
    box-sizing: border-box;
}
.um.um-register input.um-form-field::placeholder,
.um.um-register textarea.um-form-field::placeholder {
    color: var(--igp-text-muted) !important;
    opacity: 1;
}
.um.um-register input.um-form-field:-webkit-autofill,
.um.um-register input.um-form-field:-webkit-autofill:hover,
.um.um-register input.um-form-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--igp-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--igp-surface) inset !important;
    -webkit-text-fill-color: var(--igp-text) !important;
    caret-color: var(--igp-text);
}
/* select2 на регистрации (если есть) — под палитру (правила select2
   из add-game глобальны, но контейнер по ширине добавим тут). */
.um.um-register .select2-container { width: 100% !important; }

/* ---------- ЛК: личные сообщения — заглушки пустого состояния ----------
   .ndg-chat-empty внутри .chat-screen — пустой открытый диалог.
   .ndg-chat-empty--no-dialogs — у пользователя вообще нет чатов. */
.ndg-chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    height: 100%;
    color: var(--igp-text-muted, #8a8a8a);
}
.ndg-chat-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}
/* «Нет ни одного диалога» рендерится на месте контента справа —
   даём свою рамку и фон, чтобы пустота не выглядела как сбой. */
.ndg-chat-empty--no-dialogs {
    min-height: 240px;
    padding: 32px;
    background: var(--igp-surface, #ffffff);
    border: 1px solid var(--igp-border, #e4e4e4);
    border-radius: 12px;
}
:root[data-theme="dark"] .ndg-chat-empty--no-dialogs,
body.admin-theme-dark .ndg-chat-empty--no-dialogs {
    background: var(--igp-surface, #232323);
    border-color: var(--igp-border, #353535);
}