/* ============================================================
   FLEEP CASINO — фирменная стилистика (тёмная тема)
   Базовый акцент: #D91000 (красный градиент из макетов)
   Подключается только в public/frontends/fleep/index.html.
   ============================================================ */

html[data-theme="dark"] body.fleep-ui,
body.fleep-ui {
    --fleep-red: #D91000;
    --fleep-red-light: #F3372B;
    --fleep-red-dark: #AB2416;
    --fleep-bg: #141415;
    --fleep-surface: #1D1E20;
    --fleep-elevated: #262628;
    --fleep-muted: #383C41;
    --fleep-text: #FFFFFF;
    --fleep-text-muted: #83898E;
    --fleep-text-dim: #3C3C45;

    --btn-primary: #D91000;
    --btn-primary-hover: #F3372B;
    --btn-primary-text: #ffffff;

    --accent: #D91000;
    --accent-hover: #F3372B;
    --accent-muted: #F3372B;
    --accent-deep: #AB2416;
    --accent-dim: rgba(217, 16, 0, 0.14);
    --accent-glow: rgba(217, 16, 0, 0.32);

    --nav-active: #D91000;
    --nav-active-bg: rgba(217, 16, 0, 0.12);

    --bg: #141415;
    --bg-elevated: #1D1E20;
    --bg-card: #1D1E20;
    --bg-card-hover: #262628;
    --surface: #1D1E20;
    --hero-bg: #1D1E20;

    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.1);

    --text: #FFFFFF;
    --text-muted: #83898E;
    --text-dim: #3C3C45;

    --glass: rgba(29, 30, 32, 0.92);
    --glass-border: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] body.fleep-ui {
    --fleep-bg: #F8F6F4;
    --fleep-surface: #FFFFFF;
    --fleep-elevated: #EEEDEB;
    --fleep-muted: #E4E2DE;
    --fleep-text: #1A1B1E;
    --fleep-text-muted: #5C6369;
    --fleep-text-dim: #8A9198;
    --fleep-divider: #D8D6D2;
    --fleep-panel-bg: #FFFFFF;
    --fleep-panel-hover: #F2F1EF;
    --fleep-border: rgba(0, 0, 0, 0.08);
    --fleep-border-strong: rgba(0, 0, 0, 0.12);

    --bg: #F8F6F4;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #EEEDEB;
    --surface: #FFFFFF;
    --hero-bg: #FFFFFF;

    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);

    --text: #1A1B1E;
    --text-muted: #5C6369;
    --text-dim: #8A9198;

    --glass: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.cosmic-bg-disabled {
    background-color: var(--fleep-bg) !important;
    background-image: none !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.cosmic-bg-disabled {
    background-color: var(--fleep-bg) !important;
    background-image: none !important;
    color: var(--fleep-text);
}

body.cosmic-bg-disabled::before,
[data-theme="dark"] body.cosmic-bg-disabled::before {
    display: none !important;
}

/* ============================================================
   Layout: sidebar 240px, header 64px (макет 1920)
   ============================================================ */
html body .casino-sidebar,
html[data-theme="dark"] body .casino-sidebar,
body.cosmic-bg-disabled .casino-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    background: var(--fleep-surface) !important;
    background-color: var(--fleep-surface) !important;
    background-image: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
}

html body .casino-main,
body.cosmic-bg-disabled .casino-main {
    background: var(--fleep-bg) !important;
}

html body .casino-header,
html body .casino-topbar,
html body .header-shell {
    background: var(--fleep-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    min-height: 64px !important;
}

/* Fleep: непрозрачная fixed-шапка поверх casino-surface-polish */
@media (min-width: 721px) {
    body.fleep-ui .casino-header.fleep-header {
        background: var(--fleep-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: var(--fleep-shadow-header, 0 2px 4px rgba(0, 0, 0, 0.2)) !important;
        border-bottom: 1px solid var(--fleep-border, rgba(255, 255, 255, 0.06)) !important;
    }
}

/* ============================================================
   Кнопки primary — красный градиент Fleep
   ============================================================ */
body.fleep-ui .btn-primary,
body.fleep-ui button.btn-primary,
body.fleep-ui .btn.btn-primary,
body.fleep-ui .header-btn-deposit,
body.fleep-ui button.header-btn-deposit {
    background: linear-gradient(135deg, #F3372B 0%, #D91000 50%, #AB2416 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(217, 16, 0, 0.35) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}

body.fleep-ui .btn-primary:hover,
body.fleep-ui button.btn-primary:hover,
body.fleep-ui .btn.btn-primary:hover,
body.fleep-ui .header-btn-deposit:hover,
body.fleep-ui button.header-btn-deposit:hover {
    background: linear-gradient(135deg, #FF4A3E 0%, #F3372B 50%, #D91000 100%) !important;
    box-shadow: 0 8px 24px rgba(217, 16, 0, 0.45) !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

body.fleep-ui .btn-outline,
body.fleep-ui button.btn-outline,
body.fleep-ui .btn.btn-outline {
    background: var(--fleep-elevated) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

body.fleep-ui .btn-outline:hover,
body.fleep-ui button.btn-outline:hover {
    background: #2e2e31 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ============================================================
   Sidebar navigation
   ============================================================ */
html body .sidebar-nav-item,
html[data-theme="dark"] body .sidebar-nav-item {
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    font-weight: 500 !important;
}

html body .sidebar-nav-item span,
html body .sidebar-nav-item .sidebar-nav-text,
html body .sidebar-nav-item svg {
    color: var(--text-muted) !important;
    stroke: currentColor !important;
}

html body .sidebar-nav-item:hover {
    background: var(--fleep-elevated) !important;
    color: #ffffff !important;
}

html body .sidebar-nav-item:hover * {
    color: #ffffff !important;
}

html body .sidebar-nav-item.active {
    background: rgba(217, 16, 0, 0.12) !important;
    color: var(--fleep-red) !important;
    font-weight: 600 !important;
}

html body .sidebar-nav-item.active * {
    color: var(--fleep-red) !important;
}

html body .sidebar-nav-item.active::before,
html body .sidebar-nav-item.active::after {
    display: none !important;
}

html body .sidebar-section-title,
html body .sidebar-group-title,
html body .sidebar-section-label {
    color: var(--fleep-text-dim) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

html body .sidebar-brand-shell {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    filter: none !important;
}

html body .sidebar-brand-shell .logo,
html body .sidebar-brand-logo,
html body .header-brand-logo {
    box-shadow: none !important;
    filter: none !important;
}

html body .sidebar-collapse-btn {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
}

html body .sidebar-collapse-btn:hover {
    background: #2e2e31 !important;
    color: #ffffff !important;
}

html body .sidebar-hero-card,
html body .sidebar-hero-demo,
html body .sidebar-level-card {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}

html body .sidebar-nav-badge,
html body .sidebar-nav-item-badge {
    background: linear-gradient(135deg, #F3372B, #D91000) !important;
    color: #ffffff !important;
}

/* ============================================================
   Header: поиск, баланс, вторичные кнопки
   ============================================================ */
.header-search input,
.header-search .header-search-input {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.header-search input::placeholder {
    color: var(--text-muted) !important;
}

.header-balance-shell,
.header-balance-block {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

.header-btn-login,
.header-btn-register {
    border-radius: 8px !important;
}

.header-btn-login {
    background: var(--fleep-elevated) !important;
    color: var(--fleep-red) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   Карточки игр и категории
   ============================================================ */
.game-card,
.slot-card,
.home-category-card,
.provider-card {
    background: var(--fleep-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.game-card:hover,
.slot-card:hover,
.home-category-card:hover {
    background: var(--fleep-elevated) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.game-card-title,
.slot-card-title {
    color: #ffffff !important;
}

.game-thumb-tag--rtp {
    background: rgba(29, 30, 32, 0.92) !important;
    color: var(--fleep-red) !important;
    border-color: rgba(217, 16, 0, 0.35) !important;
}

/* ============================================================
   Stories / баннеры / секции главной
   ============================================================ */
.story-ring,
.story-item-ring {
    border-color: var(--fleep-red) !important;
}

.home-section-title,
.section-heading,
.catalog-section-title {
    color: #ffffff !important;
}

.home-hero-banner,
.hero-banner-shell,
.home-promo-banner {
    border-radius: 8px !important;
}

/* ============================================================
   Модалки и формы
   ============================================================ */
.modal-content,
.dialog-content,
.account-modal-content {
    background: var(--fleep-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

.modal-title,
.dialog-title {
    color: #ffffff !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.profile-input,
.deposit-custom-select-trigger {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

input:focus,
select:focus,
textarea:focus,
.profile-input:focus {
    border-color: var(--fleep-red) !important;
    box-shadow: 0 0 0 3px rgba(217, 16, 0, 0.15) !important;
}

/* ============================================================
   Чипы / табы / фильтры
   ============================================================ */
.chip,
.filter-chip,
.catalog-tab,
.home-provider-tab {
    background: var(--fleep-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
}

.chip--active,
.filter-chip.active,
.catalog-tab.active,
.home-provider-tab.active {
    background: rgba(217, 16, 0, 0.12) !important;
    border-color: rgba(217, 16, 0, 0.35) !important;
    color: var(--fleep-red) !important;
}

/* ============================================================
   Прелоадер (цвета через CSS — HTML тоже обновлён)
   ============================================================ */
.preloader {
    background: var(--fleep-bg) !important;
    pointer-events: none !important;
}

.preloader-bar-fill {
    background: linear-gradient(90deg, #AB2416, #D91000, #F3372B, #D91000) !important;
    background-size: 200% 100% !important;
}

/* ============================================================
   Ссылки и акценты — только в main column, не в sidebar
   ============================================================ */
.fleep-main-column a:not(.btn):not(.logo):not(.fleep-promo-card):not(.fleep-cat-item):not(.fleep-btn) {
    color: var(--fleep-red);
}

.fleep-main-column a:not(.btn):not(.logo):not(.fleep-promo-card):not(.fleep-cat-item):not(.fleep-btn):hover {
    color: var(--fleep-red-light);
}

.badge-primary,
.tag-primary,
.chip--active,
[class*="badge--primary"] {
    background: rgba(217, 16, 0, 0.18) !important;
    color: #F3372B !important;
    border-color: rgba(217, 16, 0, 0.35) !important;
}

/* ============================================================
   Footer / SEO блок
   ============================================================ */
.footer-shell,
.casino-footer,
.home-faq {
    background: var(--fleep-bg) !important;
    background-image: none !important;
    border-color: var(--fleep-divider, rgba(255, 255, 255, 0.04)) !important;
}

body.fleep-ui .casino-footer.fleep-footer {
    background: var(--fleep-bg) !important;
    background-image: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

body.fleep-ui .casino-footer.fleep-footer::before,
body.fleep-ui .casino-footer.fleep-footer::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ============================================================
   Логотип: полный в развёрнутом sidebar, mark в свёрнутом
   ============================================================ */
html body .sidebar-brand-logo .sidebar-brand-logo-img--full {
    display: block !important;
    height: auto !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 150px !important;
}

html body .sidebar-brand-logo .sidebar-brand-logo-img--mark {
    display: none !important;
}

html body .casino-sidebar.collapsed .sidebar-brand-logo-img--full,
html body.sidebar-collapsed .sidebar-brand-logo-img--full {
    display: none !important;
}

html body .casino-sidebar.collapsed .sidebar-brand-logo-img--mark,
html body.sidebar-collapsed .sidebar-brand-logo-img--mark {
    display: block !important;
    max-height: 32px !important;
    max-width: 32px !important;
    margin: 0 auto !important;
}

/* ============================================================
   Edge-to-edge layout (как в макете — без внешних отступов)
   ============================================================ */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

.casino-layout,
.casino-shell,
.app-shell {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Адаптив: мобильное меню
   ============================================================ */
@media (max-width: 768px) {
    html body .casino-sidebar {
        background: var(--fleep-surface) !important;
    }

    .sidebar-mobile-header {
        background: var(--fleep-bg) !important;
        border-bottom: 1px solid var(--fleep-divider, rgba(255, 255, 255, 0.04)) !important;
    }
}