/* ============================================================
   iGM Feature Pack — frontend styles
   Используем CSS-переменные темы (--color-navy, --color-accent,
   --color-card, --color-bg, --color-border, --color-muted, --shadow-soft)
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   1. БЛОК РЕКОМЕНДУЕМЫХ КАЗИНО (вставляется через AJAX)

   Сами карточки рендерятся через темплейт темы casino-card-compact.php,
   поэтому стили самих карточек тут НЕ переопределяем — только обёртку,
   рейтинг-бейдж и сетку.
   ────────────────────────────────────────────────────────────── */

.igm-fp-recommended {
    margin: 36px 0;
    animation: igm-fp-fadein 0.3s ease;
}

@keyframes igm-fp-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.igm-fp-recommended__header {
    text-align: center;
    margin-bottom: 22px;
}

.igm-fp-recommended__title {
    font-size: 26px;
    margin: 0 0 6px;
    color: var(--color-navy, #0c1e4a);
}

.igm-fp-recommended__subheading {
    color: var(--color-muted, #6b7280);
    margin: 0;
    font-size: 15px;
}

.igm-fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 720px) {
    .igm-fp-grid { grid-template-columns: 1fr; gap: 14px; }
    .igm-fp-recommended__title { font-size: 22px; }
}

/* Обёртка карточки с рейтинг-бейджем */
.igm-fp-card-wrap {
    position: relative;
}

.igm-fp-card-rank-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--color-accent, #2fb86e);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(47, 184, 110, 0.35);
    z-index: 3;
}

.igm-fp-card-wrap--rank-1 .igm-fp-card-rank-badge {
    background: #f5b942;
    box-shadow: 0 4px 10px rgba(245, 185, 66, 0.45);
}
.igm-fp-card-wrap--rank-2 .igm-fp-card-rank-badge { background: #b3b8c2; }
.igm-fp-card-wrap--rank-3 .igm-fp-card-rank-badge { background: #cb8451; }


/* ── 2. Плашка-предупреждение ─────────────────────── */

.igm-fp-warning {
    background: linear-gradient(135deg, #fff5f5, #ffe8e6);
    border: 1px solid #ffcfcb;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.igm-fp-warning__icon { flex-shrink: 0; color: #c0392b; }
.igm-fp-warning__icon svg { fill: currentColor; }

.igm-fp-warning__text h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #6b1f1a;
}

.igm-fp-warning__text p {
    margin: 0;
    color: #7a3a35;
    font-size: 14px;
    line-height: 1.45;
}

/* Вариант для казино в чёрном списке — более тревожный, красный левый бордер */
.igm-fp-warning--blacklisted {
    background: linear-gradient(135deg, #fee, #fdd);
    border: 1px solid #f5b5b0;
    border-left: 4px solid #c0392b;
}

.igm-fp-warning--blacklisted .igm-fp-warning__icon { color: #a3231a; }
.igm-fp-warning--blacklisted .igm-fp-warning__text h3 { color: #5a1714; }

/* Вариант для гео-блокировки — мягче, оранжево-красный (это не «опасно», а «неподходит») */
.igm-fp-warning--geo {
    background: linear-gradient(135deg, #fff8f0, #ffeed6);
    border: 1px solid #f5d2a0;
}

.igm-fp-warning--geo .igm-fp-warning__icon { color: #c87a16; }
.igm-fp-warning--geo .igm-fp-warning__text h3 { color: #6e4810; }
.igm-fp-warning--geo .igm-fp-warning__text p { color: #7a5824; }

@media (max-width: 600px) {
    .igm-fp-warning { padding: 14px 16px; gap: 10px; }
    .igm-fp-warning__text h3 { font-size: 16px; }
}


/* ============================================================
   3. ФИКС: СТРЕЛКА ПРОКРУТКИ ПОД ТЕКСТОМ КАРТОЧКИ СТАТЬИ

   Причина:
     .scroll-row__control имеет z-index: 2
     .article-card__media и .article-card__body тоже z-index: 2
     При равных z-index выигрывает тот, кто позже в DOM (карточка),
     поэтому стрелка прячется под карточкой.

   У casino-card и bonus-card такого z-index нет, поэтому там работает.

   Решение: поднимаем z-index стрелки выше карточек статей.
   ============================================================ */

.scroll-row__control,
.scroll-row-wrap .scroll-row__control--prev,
.scroll-row-wrap .scroll-row__control--next {
    z-index: 5;
}

/* Дополнительная защита: если в каком-то блоке статей стрелка визуально
   "наезжает" на текст из-за того, что карточка stacked (фото сверху,
   текст снизу), смещаем её ближе к фото. Селектор :has() — для блоков,
   содержащих stacked-карточки. */
.scroll-row-wrap:has(.article-card--stacked) .scroll-row__control {
    /* В stacked-варианте текст ниже фото; центр всей карточки попадает
       на текст. Сдвигаем стрелку выше — на уровень фото. */
    top: 90px;
    transform: translateY(0);
}

/* На мобиле (max-width: 900px) тема скрывает стрелки через display:none,
   поэтому дополнительные мобильные правки для стрелок не нужны. */


/* ============================================================
   4. ФИКС: КНОПКИ НА 404-СТРАНИЦЕ БЕЗ СТИЛЕЙ

   Шаблон 404.php использует классы .btn, .btn-primary, .btn-secondary,
   которые НЕ ОПРЕДЕЛЕНЫ в style.css темы. Кнопки выглядят как обычные
   ссылки. Добавляем стили, опираясь на дизайн .button / .button--primary
   / .button--ghost темы.
   ============================================================ */

.error-404-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    line-height: 1.2;
    min-height: 44px; /* touch target */
}

.error-404-actions .btn-primary {
    background: var(--color-accent, #2fb86e);
    color: #fff;
}

.error-404-actions .btn-primary:hover,
.error-404-actions .btn-primary:focus {
    background: #28a05e;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(47, 184, 110, 0.25);
}

.error-404-actions .btn-secondary {
    background: transparent;
    color: var(--color-navy, #0c1e4a);
    border-color: var(--color-border, #e6e8ef);
}

.error-404-actions .btn-secondary:hover,
.error-404-actions .btn-secondary:focus {
    background: #f7f8fb;
    border-color: var(--color-navy, #0c1e4a);
}


/* ============================================================
   5. 404 НА МОБИЛЬНЫХ — АДАПТИВНОСТЬ

   В теме уже есть @media (max-width: 768px) с
   `.error-404-actions { flex-direction: column }` — поэтому кнопки
   стают в колонку. Но картинка-цифра 404 имеет min-height: 320px,
   что слишком много на узких экранах. И заголовок может слипаться.
   ============================================================ */

@media (max-width: 768px) {
    /* Цифра 404: компактнее */
    .error-404-hero .hero__image {
        min-height: 180px;
        max-width: 100%;
        margin: 0 auto;
    }

    .error-404-hero .hero__image span {
        font-size: clamp(56px, 16vw, 84px);
    }

    /* Заголовок и текст */
    .error-404-hero .hero__title {
        font-size: clamp(24px, 6vw, 32px);
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .error-404-hero .hero__subtitle p {
        font-size: 15px;
        line-height: 1.5;
        margin: 6px 0;
    }

    /* Карточка ниже — не давим её внутренним padding */
    .error-404-card .content-card {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .error-404-card h2 {
        font-size: 20px;
    }

    .error-404-card ul {
        margin: 10px 0 0 18px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    /* Уменьшаем плашку с цифрой 404 на узких экранах */
    .error-404-hero .hero__image {
        min-height: 110px;
        aspect-ratio: 16 / 7;
    }

    .error-404-hero .hero__image span {
        font-size: 60px;
    }

    .error-404-actions {
        margin-top: 18px;
    }

    .error-404-card {
        margin-top: 18px;
    }

    .error-404-card .content-card {
        padding: 16px 14px;
    }
}


/* ============================================================
   6. Fallback для отсутствия casino-card-compact.php
   ============================================================ */

.igm-fp-card-fallback {
    display: block;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border, #e6e8ef);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    color: var(--color-navy, #0c1e4a);
    font-weight: 600;
}

.igm-fp-card-fallback:hover {
    background: #f7f8fb;
}