/* ===================================================================
   R7 Casino — responsive.css
   Принудительно восстанавливает сетку Swiper в статической HTML
   и делает сайт адаптивным под планшеты и телефоны.
   Файл подключается ПОСЛЕ style.css — поэтому правила имеют приоритет.
   =================================================================== */

/* ---------- 1. Web components: задаём display чтобы не схлопывались ---------- */
swiper-container,
swiper-container.swiper {
    display: block;
    width: 100%;
}

swiper-slide {
    display: block;
    box-sizing: border-box;
}

swiper-container > template,
swiper-slide > template,
swiper-container template,
swiper-slide template {
    display: none !important;
}

/* ---------- 2. Top banner section (Призовой фонд + Турнир) ---------- */
.wolf-banner-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: stretch;
}

.left-slider.wlc-slider,
.right-slider.wlc-slider {
    display: block !important;
    width: 100% !important;
    min-width: 0;
}

.left-slider .wlc-slider__wrapper,
.right-slider .wlc-slider__wrapper,
.left-slider .wlc-slider__slider,
.right-slider .wlc-slider__slider {
    display: block !important;
    width: 100% !important;
}

.left-slider swiper-container,
.right-slider swiper-container,
.wlc-sections__banner-wolf-desktop swiper-container {
    display: block !important;
    width: 100% !important;
}

.left-slider swiper-slide,
.right-slider swiper-slide,
.wlc-sections__banner-wolf-desktop swiper-slide {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
}

/* Сам баннер растянуть на всю ширину карточки */
.wolf-banner-wrapper .banner,
.wolf-banner-wrapper .wlc-banner {
    width: 100% !important;
    box-sizing: border-box;
}

/* ---------- 3. Category tabs (Все игры / Казино / Популярные / ...) ---------- */
.games-categories swiper-container,
.games-categories swiper-container.swiper,
.wlc-category-menu__content swiper-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 214, 0, .35) transparent;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    margin-bottom: -6px;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
}

.games-categories swiper-container::-webkit-scrollbar,
.wlc-category-menu__content swiper-container::-webkit-scrollbar {
    height: 4px;
}

.games-categories swiper-container::-webkit-scrollbar-thumb,
.wlc-category-menu__content swiper-container::-webkit-scrollbar-thumb {
    background: rgba(255, 214, 0, .4);
    border-radius: 2px;
}

.games-categories swiper-slide,
.wlc-category-menu__content swiper-slide {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 0 !important;
    align-items: center;
}

/* ---------- 4. Games grid (карточки игр) ---------- */
/* .wlc-slider — обычный обёрточный блок, занимает 100% ширины */
.wlc-games-grid__games-slider .wlc-slider {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

/* swiper-container — это собственно сетка, прямой родитель slide */
.wlc-games-grid__games-slider swiper-container,
.wlc-games-grid__games-slider swiper-container.swiper {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
}

.wlc-games-grid__games-slider swiper-slide {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    order: 0 !important;
    flex: none !important;
    box-sizing: border-box;
}

.wlc-games-grid__games-slider .wlc-game-thumb,
.wlc-games-grid__games-slider .wlc-game-thumb__card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.wlc-games-grid__games-slider .wlc-game-thumb-media,
.wlc-games-grid__games-slider .wlc-game-thumb-media__wrap {
    width: 100% !important;
}

.wlc-games-grid__games-slider .wlc-game-thumb-media__video,
.wlc-games-grid__games-slider .wlc-game-thumb-media__wrap img,
.wlc-games-grid__games-slider .wlc-game-thumb-media__wrap video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* Скрываем swiper-управление т.к. у нас грид */
.wlc-games-grid .swiper-button-next,
.wlc-games-grid .swiper-button-prev,
.wlc-games-grid__control,
.wlc-category-menu__control--prev.swiper-button-disabled {
    display: none !important;
}

/* ---------- 5. SECTIONS: общий контейнер ---------- */
.wlc-sections__content-games-recommended,
.wlc-sections__content-games-top,
.wlc-sections__content-games-top2,
.wlc-sections__content-games-top3,
.wlc-sections__content-games-top4,
.wlc-sections__content-games-top5,
.wlc-sections__content-games-top6,
.wlc-sections__content-games-bonusbuy,
.wlc-sections__content-games-instant,
.wlc-sections__content-games-livecasino,
.wlc-sections__banner-wolf-desktop,
.wlc-sections__categories {
    width: 100% !important;
    margin-top: 20px !important;
    box-sizing: border-box;
}

/* Все .container внутри секций — на полную ширину родителя */
.wlc-sections__content-games-recommended > .container,
.wlc-sections__content-games-top2 > .container,
.wlc-sections__content-games-top3 > .container,
.wlc-sections__content-games-top4 > .container,
.wlc-sections__content-games-top5 > .container,
.wlc-sections__content-games-top6 > .container,
.wlc-sections__content-games-bonusbuy > .container,
.wlc-sections__content-games-instant > .container,
.wlc-sections__content-games-livecasino > .container,
.wlc-sections__banner-wolf-desktop > .container,
.wlc-sections__categories > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

/* Внутри .container — wlc-sa, wlc-games-grid тоже на 100% */
.wlc-sa,
.wlc-sa-games-grid,
.wlc-games-grid,
.wlc-games-grid--theme-swiper {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
    grid-area: unset !important;
}

/* Сбрасываем grid-area у всех родителей, чтобы они занимали 100% ширины,
   а не плыли в узкие колонки от старой Angular-сетки */
.wlc-games-grid__content > * {
    grid-area: unset !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* ---------- 6. Section content layout ---------- */
/* Контейнер заголовка секции — обычный block, чтобы слайдер занимал всю ширину */
.wlc-games-grid__content {
    display: block !important;
    width: 100% !important;
    position: relative;
}

/* Заголовок секции — inline-flex (выравнивание иконки + текста в строку) */
.wlc-games-grid__content .wlc-section-title {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
    margin-right: 14px;
}

.wlc-games-grid__content .wlc-section-title__icon {
    color: #FFD600;
    display: inline-flex;
    align-items: center;
}

/* Ссылка "Посмотреть все" */
.wlc-games-grid__content .wlc-games-grid__link {
    display: inline-flex !important;
    align-items: center;
    color: #FFD600;
    font-size: 13px;
    text-decoration: none;
    vertical-align: middle;
}

/* Слайдер с играми — 100% ширины, на новой строке */
.wlc-games-grid__content .wlc-games-grid__games-slider {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    clear: both;
}

/* ============================================================
   RESPONSIVE: TABLET (≤ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
    .wlc-games-grid__games-slider swiper-container,
    .wlc-games-grid__games-slider swiper-container.swiper {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ============================================================
   RESPONSIVE: TABLET PORTRAIT (≤ 1024px) — сидбар становится компактным
   ============================================================ */
@media (max-width: 1024px) {
    .wlc-burger-panel--left-fixed {
        width: 60px !important;
    }
    .wlc-burger-panel--left-fixed .wlc-menu__link-text,
    .wlc-burger-panel--left-fixed .wlc-burger-panel__btn-expand {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE (≤ 768px) — главные правила
   ============================================================ */
@media (max-width: 768px) {

    /* Скрыть левый сидбар полностью на мобильных */
    .wlc-burger-panel--left-fixed,
    .wlc-burger-panel--theme-left,
    .wlc-float-panels--theme-default .wlc-burger-panel--left-fixed {
        display: none !important;
    }

    /* Убрать padding-left у основного контейнера */
    .wlc-app,
    .wlc-app-content,
    .wlc-body--fp-left .wlc-app,
    .wlc-body--fp-left-in .wlc-app,
    .wlc-body--fp-left-expanded .wlc-app,
    .wlc-body--fp-left:not(.wlc-body--fp-left-nopadding) .wlc-app {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    body, html { overflow-x: hidden !important; }

    /* Header адаптация */
    .wlc-app-header,
    .wlc-app-header__inner {
        padding: 8px 12px !important;
    }
    .header__right .wlc-btn-search,
    .header__center {
        flex: 1 1 auto !important;
    }
    .header__center .wlc-search-field__input {
        font-size: 13px !important;
    }

    /* Кнопки регистрации */
    .wlc-btn--registration,
    .wlc-btn--login {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Баннеры — в одну колонку */
    .wolf-banner-wrapper {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .right-slider.wlc-slider { display: none !important; }
    .left-slider .banner,
    .wolf-banner-wrapper .banner {
        min-height: 200px !important;
        padding: 16px !important;
    }
    .banner__title { font-size: 18px !important; }
    .banner__description-bottom { font-size: 14px !important; }
    .banner__decor img { max-width: 60% !important; }

    /* Сетка игр: 3 колонки на планшете-портрет / крупном телефоне */
    .wlc-games-grid__games-slider swiper-container,
    .wlc-games-grid__games-slider swiper-container.swiper {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Подпись игры */
    .wlc-game-thumb__name { font-size: 12px !important; }
    .wlc-game-thumb__merchant { font-size: 10px !important; }

    /* Категории — горизонтальный скролл */
    .games-categories swiper-container {
        padding: 4px 0 !important;
    }
    .games-categories swiper-slide .wlc-menu__link {
        font-size: 12px !important;
        padding: 6px 10px !important;
        height: 34px !important;
    }

    /* Секции контента */
    .wlc-sections__content-games-recommended .container,
    .wlc-sections__content-games-top2 .container,
    .wlc-sections__content-games-bonusbuy .container,
    .wlc-sections__content-games-instant .container,
    .wlc-sections__content-games-livecasino .container,
    .wlc-sections__banner-wolf-desktop .container,
    .wlc-sections__categories .container {
        padding: 0 12px !important;
        max-width: 100% !important;
    }

    /* Footer */
    .wlc-footer-menu {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 24px 16px !important;
    }

    /* Промо-полоса внизу */
    .r7-promo-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .r7-promo-bar__text {
        flex: 1 1 100% !important;
        order: 2;
    }
    .r7-promo-bar__badge {
        width: 36px !important;
        height: 36px !important;
    }
    .r7-promo-bar__title { font-size: 13px !important; }
    .r7-promo-bar__subtitle { font-size: 12px !important; }
    .r7-promo-bar__btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* SEO block */
    .r7-seo { padding: 24px 16px 60px !important; }
    .r7-seo__h1 { font-size: 22px !important; }
    .r7-seo__h2 { font-size: 17px !important; }
    .r7-seo p, .r7-seo__faq p { font-size: 14px !important; }
    .r7-seo__list {
        grid-template-columns: 1fr !important;
    }

    /* Основной article block (textSeo) */
    .textSeo .container {
        padding: 16px !important;
    }
    .textSeo h2,
    .textSeo__title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .textSeo p,
    .textSeo li {
        font-size: 14px !important;
    }
}

/* ============================================================
   RESPONSIVE: SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .wolf-banner-wrapper .banner {
        min-height: 170px !important;
        padding: 12px !important;
    }
    .banner__title { font-size: 16px !important; }
    .banner__description-bottom { font-size: 12px !important; }

    /* Header более компактный */
    .header__right .wlc-btn-login .wlc-btn__text,
    .header__right .wlc-btn-registration .wlc-btn__text {
        font-size: 11px !important;
    }

    /* Маленький телефон — 2 колонки */
    .wlc-games-grid__games-slider swiper-container,
    .wlc-games-grid__games-slider swiper-container.swiper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .r7-seo__h1 { font-size: 20px !important; }
}

/* ============================================================
   Дополнительные защиты от схлопывания на любом размере экрана
   ============================================================ */
.wlc-game-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    transition: transform .2s ease;
}
.wlc-game-thumb:hover {
    transform: translateY(-2px);
}

.wlc-game-thumb__title {
    padding: 6px 4px 2px;
    text-align: left;
}

/* Видео должно загружаться, но если упало — показать постер */
.wlc-game-thumb-media__video {
    display: block !important;
    background: #111;
}

/* Защита от горизонтального скролла основной страницы */
.wlc-app,
.wlc-app-content {
    overflow-x: hidden;
}