/* =========================================================
   cabinet-cards.css — карточки игр в Личном кабинете.

   Контекст: шорткоды cabinet_mygames / form_fest / *_projects
   (festival/festival.php) выводят сетку `.game-grid.cabinet-grid`
   с карточками `.game-item`. Полноценное оформление карточек
   жило только в css/games-archive.css под body.tax-festival /
   body.post-type-archive-games и НЕ подключалось в кабинете —
   поэтому карточки были «голыми» (миниатюра 0px, заголовок —
   красная подчёркнутая ссылка).

   Здесь — те же стили карточки, портированные под `.cabinet-grid`.
   Подключается из header.php только на странице кабинета.

   Переменные --igp-* приходят из css/home/home.css (грузится всегда).
   ========================================================= */

/* ---------- Сетка ---------- */
.cabinet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

/* Карточка: 2 в ряд на десктопе (учитываем gap). */
.cabinet-grid .game-item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
    width: auto;
    box-sizing: border-box;
    background: var(--igp-bg-card, #ffffff);
    color: var(--igp-text, #1a1a1a);
    border: 1px solid var(--igp-border-primary, #ececec);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cabinet-grid .game-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--igp-shadow-color, rgba(0, 0, 0, 0.12));
    border-color: var(--igp-accent, #c23016);
}

/* Ссылка-обёртка вокруг обложки/заголовка/описания — без подчёркивания. */
.cabinet-grid .game-item > a {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1 1 auto;
}

/* ---------- Обложка (16:9) ---------- */
.cabinet-grid .game-item .game-item-thumb {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    padding-top: 0 !important;
    background-color: var(--igp-bg-tertiary, #f3f3f3);
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: 0;
    overflow: hidden;
    flex: 0 0 auto;
}

/* ---------- Заголовок и описание ---------- */
.cabinet-grid .game-item .game-item-title {
    margin: 0;
    padding: 16px 18px 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--igp-text, #1a1a1a);
    text-decoration: none;
}

.cabinet-grid .game-item .game-item-excerpt {
    margin: 0;
    padding: 0 18px 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--igp-text-muted, #595959);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    text-decoration: none;
}

/* ---------- Ряд кнопок (трейлер / геймплей) ---------- */
.cabinet-grid .game-item .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 16px;
    margin-top: auto;
}
/* Текст кнопок «трейлер»/«геймплей» — белый на красном фоне.
   Глобальное правило ссылок (site.css: body:not(.home) .container a:not(...))
   красит ссылки в --igp-accent и из-за :not()-специфичности перебивает
   белый цвет из .trailer-btn (main.css) — поэтому !important. */
.cabinet-grid .game-item a.trailer-btn,
.cabinet-grid .game-item a.gameplay-btn {
    color: #ffffff !important;
}

/* ---------- Бейдж статуса игры ---------- */
/* Плашка статуса позиционируется АБСОЛЮТНО поверх обложки (левый верх).
   Карточка .game-item — position: relative (см. выше), поэтому отсчёт от неё. */
.cabinet-grid .game-item .game-item-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    padding: 5px 11px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
}
/* «На рассмотрении» — янтарный (предупреждение). Непрозрачный фон, т.к.
   плашка лежит поверх обложки и должна читаться на любой картинке. */
.cabinet-grid .game-item .game-item-status-pending {
    background: #f3b24a;
    color: #5a3b06;
    border: 1px solid #e09a27;
}
/* «Черновик» — нейтральный тёмный, читается поверх любой обложки. */
.cabinet-grid .game-item .game-item-status-draft {
    background: rgba(40, 44, 50, 0.86);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Доп-элементы кабинета ---------- */
/* Кнопка «Редактировать» поверх карточки (cabinet_mygames) — кружок с
   иконкой-карандашом. Это ссылка <a> на /add-game/?edit=<id>; текст скрыт
   (font-size:0). Фон-плашка — на самом элементе, а иконка вынесена в ::before
   отдельным слоем: так в тёмной теме можно инвертировать ТОЛЬКО иконку
   (edit.svg чёрный → на тёмном кружке не виден), не трогая фон.
   ВАЖНО: admin-theme.css правилом `.game-item a { background: ... !important }`
   стирает фон у ссылок внутри карточки, поэтому background-color с !important. */
.cabinet-grid .game-item .game-item-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 0;
    border-radius: 50%;
    background-color: var(--igp-bg-card, #ffffff) !important;
    background-image: none !important;
    box-shadow: 0 0 12px var(--igp-shadow-color, rgba(0, 0, 0, 0.15));
    border: 1px solid var(--igp-border-primary, #ececec);
    transition: opacity .2s ease;
}
.cabinet-grid .game-item .game-item-edit::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("../imgs/edit.svg") no-repeat center / contain;
}
.cabinet-grid .game-item .game-item-edit:hover {
    opacity: .75;
}
/* Тёмная тема: edit.svg чёрный — инвертируем в белый (только иконку). */
html body.admin-theme-dark .cabinet-grid .game-item .game-item-edit::before,
html[data-theme="dark"] .cabinet-grid .game-item .game-item-edit::before {
    filter: invert(1) brightness(1.6);
}
/* Кнопка-список «В список / В списке» (экспертские карточки). */
.cabinet-grid .game-item .inwish,
.cabinet-grid .game-item .outwish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
/* Блок «Последнее обновление» (cabinet_mygames, post_status=publish). */
.cabinet-grid .game-item .game-update-last {
    padding: 0 18px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--igp-text-muted, #595959);
}
.cabinet-grid .game-item .game-update-last-label {
    font-weight: 600;
    color: var(--igp-text, #1a1a1a);
}
.cabinet-grid .game-item .game-update-last-count {
    color: var(--igp-accent, #c23016);
}
/* Кнопка «Добавить обновление». */
.cabinet-grid .game-item .game-update-btn {
    display: inline-block;
    margin: 0 18px 16px;
    cursor: pointer;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .cabinet-grid .game-item {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Кнопка-бургер меню кабинета (.lk-panel-button) нужна только на мобиле:
   её размеры/фон заданы лишь в @media (max-width:1024px), а обработчик клика
   (js/common.js) срабатывает только при width<1024. На ПК кнопка схлопывалась
   в крошечный серый квадрат-«точку» в углу панели — прячем её на десктопе. */
@media (min-width: 1025px) {
    .lk-panel-button {
        display: none !important;
    }
}

/* =========================================================
   CF7-форма «Поддержка» (.ndg-form) в кабинете.

   Базовый чип-лейбл .lep (css/main.css) — серая плашка
   uppercase, налезающая на поле. В кабинете заменяем на
   обычный тёмный текст-подпись. Плюс textarea не получала
   рамку/фон (border:none) и сливалась с белым фоном —
   выравниваем её по виду с input.
   ========================================================= */
.ndg-form label .lep {
    display: block;
    width: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: var(--igp-text, #1a1a1a);
    text-transform: none;
    padding: 0 0 6px 2px;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}
.ndg-form label {
    display: block;
    margin-bottom: 18px;
}
.ndg-form textarea.wpcf7-textarea {
    border: 1px solid var(--igp-border-primary, #e4e4e4);
    border-radius: 10px;
    background: var(--igp-bg-card, #ffffff);
    color: var(--igp-text, #1a1a1a);
    padding: 12px 14px;
    width: 100%;
    min-height: 160px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}
.ndg-form textarea.wpcf7-textarea:focus,
.ndg-form input.wpcf7-text:focus {
    border-color: var(--igp-accent, #c23016);
    outline: none;
}

/* --- Невалидное поле: тонкая красная рамка вместо дефолтной --- */
.ndg-form .wpcf7-not-valid {
    border-color: #e2483d !important;
    box-shadow: 0 0 0 2px rgba(226, 72, 61, 0.12);
}
/* --- Подсказка-ошибка под полем: компактная, слева, не блок по центру.
   Цвет с !important — admin-theme.css красит весь текст в светлый. --- */
.ndg-form .wpcf7-not-valid-tip,
html body.admin-theme-dark .ndg-form .wpcf7-not-valid-tip {
    position: static !important;
    display: block;
    margin: 6px 0 0 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: #e2483d !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
}
/* --- Общий блок-уведомление (ошибка / спам / успех) --- */
.ndg-form .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 12px 16px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 10px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: left !important;
}
/* Ошибка валидации — мягкий красный (вместо ярко-жёлтой рамки CF7).
   text-align:left с !important — main.css форсит center для .invalid. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    text-align: left !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    background: rgba(226, 72, 61, 0.10) !important;
    border-color: rgba(226, 72, 61, 0.45) !important;
    color: #e2483d !important;
}
/* Успешная отправка — мягкий зелёный. */
.wpcf7 form.sent .wpcf7-response-output {
    display: block !important;
    background: rgba(60, 170, 90, 0.12) !important;
    border-color: rgba(60, 170, 90, 0.45) !important;
    color: #2f9e54 !important;
}
/* Спам — мягкий оранжевый. */
.wpcf7 form.spam .wpcf7-response-output {
    background: rgba(245, 130, 40, 0.12) !important;
    border-color: rgba(245, 130, 40, 0.45) !important;
    color: #d9731f !important;
}

/* =========================================================
   Приветственный блок ЛК (.lk-hello) — вкладка «Главная».

   Обёртку <div class="lk-hello"> ставит cabinet-page.php вокруг
   текста из ACF Options (lk_hello_player / lk_hello_participant).
   Текст приходит из WYSIWYG, поэтому стилизуем дочерние теги
   (h2/p/strong/a), а не конкретную разметку.

   Минимализм: только типографика — крупный заголовок с акцентным
   штрихом, воздух между абзацами, акцентные strong. Без карточек
   и фонов. Цвета через --igp-* (живут в light/dark, см. home.css).

   Селектор с .wdp-lk-tab-content для веса: admin-theme.css красит
   текст кабинета в светлый через свои правила — добиваем специфичность.
   ========================================================= */
.wdp-lk-tab-content .lk-hello {
    max-width: 760px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--igp-text-muted, #6b6b6b);
    font-size: 16px;
    line-height: 1.7;
}

/* Заголовок «Добро пожаловать!» — крупный, с акцентным штрихом слева. */
.wdp-lk-tab-content .lk-hello h2 {
    margin: 0 0 24px;
    padding-left: 16px;
    border-left: 4px solid var(--igp-accent, #d32029);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--igp-text, #272727);
}

/* Абзацы — воздух между ними, читаемый muted-цвет. */
.wdp-lk-tab-content .lk-hello p {
    margin: 0 0 18px;
}
.wdp-lk-tab-content .lk-hello p:last-child {
    margin-bottom: 0;
}

/* Акцентные strong — фирменный цвет, чуть плотнее. */
.wdp-lk-tab-content .lk-hello strong {
    color: var(--igp-text, #272727);
    font-weight: 700;
}

/* Ссылки (почта/разделы) — акцентным цветом, подчёркивание на hover. */
.wdp-lk-tab-content .lk-hello a {
    color: var(--igp-accent, #d32029);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.wdp-lk-tab-content .lk-hello a:hover {
    border-bottom-color: var(--igp-accent, #d32029);
}

/* P.S. в конце — мельче и приглушённее, как сноска. */
.wdp-lk-tab-content .lk-hello p:last-of-type {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--igp-border, #e4e4e4);
    font-size: 14px;
    color: var(--igp-text-muted, #6b6b6b);
}

/* =========================================================
   Чип «Уникальный идентификатор» (#unique-id / #unique-id-exp).

   В шаблоне это <strong class="btn"> → класс .btn раздувает его
   в большую красную плашку-кнопку. Здесь перебиваем под компактный
   аккуратный чип: моноширинный ID, акцентная подложка + обводка
   (в тон бейджу роли), клик копирует значение.
   ========================================================= */
/* !important — основной .btn (css/main.css:334) задаёт background, color,
   высоту 37px, padding 0 50px, font 'Molot' 20px тоже с !important на фоне.
   Перебиваем размер/вид чипа явно, иначе остаётся большая красная плашка. */
.wdp-lk-tab-content-short #unique-id,
.wdp-lk-tab-content-short #unique-id-exp {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 4px 12px !important;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em;
    color: var(--igp-accent, #d32029) !important;
    background: color-mix(in srgb, var(--igp-accent, #d32029) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--igp-accent, #d32029) 30%, transparent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background .15s ease, border-color .15s ease;
}
/* Иконка «копировать» перед числом (чистый CSS, без правки разметки). */
.wdp-lk-tab-content-short #unique-id::before,
.wdp-lk-tab-content-short #unique-id-exp::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>") no-repeat center / contain;
    opacity: .85;
}
.wdp-lk-tab-content-short #unique-id:hover,
.wdp-lk-tab-content-short #unique-id-exp:hover {
    background: color-mix(in srgb, var(--igp-accent, #d32029) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--igp-accent, #d32029) 45%, transparent) !important;
}
/* Подпись «Уникальный идентификатор:» — компактнее и приглушённее. */
.wdp-lk-tab-content-short > p {
    margin: 0;
    font-size: 13px;
    color: var(--igp-text-muted, #6b6b6b);
}