/*
 * ═══════════════════════════════════════════════════════════
 *  BETX7 MOBILE ULTRA PERFORMANCE CSS
 *  Strategy: GPU-safe properties only on mobile
 *  — Only transform + opacity animated
 *  — backdrop-filter stripped on low-end
 *  — touch-action: manipulation everywhere (kills 300ms delay)
 *  — content-visibility for game grids (DOM cost reduction)
 *  — Passive scroll + overscroll-behavior for native feel
 * ═══════════════════════════════════════════════════════════
 */

/* ── 1. Global touch acceleration ── */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Remove 300ms tap delay on all interactive elements */
a, button, input, select, textarea,
[role="button"], [role="link"],
.btn, .nav-link, .nav-item, .x2-btm-item,
.desktop-nav a, .user-menu li a,
.wallet-box, .menu-btn, .btn-mobile-trigger {
    touch-action: manipulation;
}

/* ── 2. Smooth native scrolling ── */
html {
    scroll-behavior: auto; /* avoid jank from CSS smooth-scroll on mobile */
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none; /* prevent pull-to-refresh lag */
}

/* Scrollable containers: fast momentum scrolling */
.main,
[class*="scroll"],
[class*="list"],
.casino-games-grid,
#mainContent,
.game-list,
.match-list,
.events-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── 3. Hardware-accelerated composited layers for key UI ── */
header,
.x2-btm-nav,
#page-loader,
.pl-inner {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── 4. content-visibility for off-screen game/match cards ── */
/* Reduces rendering cost of large card grids */
.game-item,
.game-card,
[class*="game-card"],
.casino-game-card,
.match-card,
.event-row,
.sport-event {
    content-visibility: auto;
    contain-intrinsic-size: 0 180px;
    contain: layout style;
}

/* ── 5. MOBILE: Strip expensive GPU effects ── */
@media (max-width: 768px) {

    /* ── 5a. Remove backdrop-filter (biggest GPU win on mobile) ── */
    header,
    .user-menu,
    .wallet-box,
    .x2-btm-nav,
    .pl-glass,
    [style*="backdrop-filter"],
    [style*="-webkit-backdrop-filter"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Compensate with solid opaque backgrounds */
    header {
        background: #0a0a0a !important;
        box-shadow: 0 2px 0 rgba(255,215,0,0.15) !important;
    }

    .user-menu {
        background: #0b0b0b !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.85) !important;
    }

    .wallet-box {
        backdrop-filter: none !important;
        background: #111 !important;
        box-shadow: 0 0 0 1px rgba(255,215,0,.22) !important;
    }

    /* ── 5b. Simplify box-shadows (reduce compositing layers) ── */
    .btn-solid,
    .btn-outline,
    .btn-primary,
    .btn-white-outline {
        box-shadow: none !important;
        animation: none !important; /* kill cta-pulse on mobile */
    }

    /* Keep only a single simple shadow on cards */
    .game-card,
    .casino-game-card,
    .match-card,
    .event-row,
    [class*="card"] {
        box-shadow: none !important;
    }

    /* ── 5c. Strip neon text-shadow (repaints on every frame when animated) ── */
    .wallet-box i,
    .user-menu li a i,
    .desktop-nav a.active,
    .x2-btm-home-ring {
        display:flex;align-items:center;justify-content:center;
        width:48px;height:48px;border-radius:50%;
        background:#027B5B;color:#000;
        box-shadow:0 4px 16px rgba(2,123,91,.35),0 0 0 3px rgba(0,0,0,1);
        transition:all .2s ease; }
    .x2-btm-home-ring svg{stroke:#000;stroke-width:2.2}
    .x2-btm-home:hover .x2-btm-home-ring{
        transform:scale(1.06);
        box-shadow:0 6px 20px rgba(2,123,91,.45),0 0 0 3px rgba(0,0,0,1);
    }
    .x2-btm-home .x2-btm-label{color:#027B5B;margin-top:2px}

    /* Simplify loader animations to opacity only */
    .pl-logo-aura,
    .pl-logo-ring,
    .pl-logo-core {
        animation: none !important;
        opacity: 0.6;
    }

    .pl-ring-slow {
        animation: none !important;
    }

    /* Keep spinner (cheap single transform rotate) */
    .pl-spinner {
        box-shadow: none !important;
    }

    /* ── 5e. Simplify background gradients on body ── */
    body {
        background: #050505 !important;
    }

    /* ── 5f. Reduce transition durations for snappier feel ── */
    *,
    *::before,
    *::after {
        transition-duration: 120ms !important;
    }

    /* Preserve meaningful transitions */
    #page-loader {
        transition: opacity 0.4s cubic-bezier(0.4,0,1,1),
                    transform 0.4s cubic-bezier(0.4,0,1,1) !important;
    }

    #page-loader.pl-entered .pl-inner {
        transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                    transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
    }

    /* ── 5g. Touch target minimums (44×44px per WCAG) ── */
    .btn,
    .nav-link,
    .x2-btm-item,
    .btn-mobile-trigger,
    .btn-solid,
    .btn-outline,
    .menu-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* ── 5h. Disable image filters on game thumbnails ── */
    .game-item img,
    .game-card img,
    .casino-game-card img {
        filter: none !important;
        transition: opacity 200ms ease !important;
    }

    /* Lazy-loaded image fade-in */
    img[data-src],
    img.bx7-lazy:not(.bx7-loaded) {
        opacity: 0;
    }
    img.bx7-loaded {
        opacity: 1;
        transition: opacity 250ms ease;
    }
}

/* ── 6. ULTRA-LOW-END: applied by JS via body.bx7-tier-low ── */
body.bx7-tier-low * {
    animation-play-state: paused !important;
    transition: none !important;
}
body.bx7-tier-low .pl-spinner {
    animation-play-state: running !important; /* keep spinner alive */
}
body.bx7-tier-low .pl-bg,
body.bx7-tier-low .pl-particles,
body.bx7-tier-low .pl-sweep,
body.bx7-tier-low .pl-flash {
    display: none !important;
}
/* On low-end, replace animated ring with static ring */
body.bx7-tier-low .pl-logo-ring {
    animation: none !important;
    opacity: 0.5;
    transform: translate(-50%,-50%);
}

/* ── 7. Optimized scroll-snap for horizontal carousels ── */
.slider,
[class*="carousel"],
[class*="swiper"] {
    scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    scroll-behavior: auto; /* smooth-scroll kills FPS on mobile */
}
.slide,
[class*="swiper-slide"] {
    scroll-snap-align: start;
}

/* ── 8. iOS safe area + body padding fix ── */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .x2-btm-nav {
            padding-bottom: calc(6px + env(safe-area-inset-bottom));
        }
        body {
            padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ── 9. Prevent layout shift on image load ── */
img:not([width]):not([height]) {
    aspect-ratio: auto;
}
.game-item img,
.game-card img,
.casino-game-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}

/* ── 10. Skeleton loader for lazy content ── */
.bx7-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,106,0,0.07) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: bx7Shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes bx7Shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
/* Reduce shimmer on mobile */
@media (max-width: 768px) {
    .bx7-skeleton {
        animation-duration: 2.2s;
    }
}

/* ── 11. Optimized font rendering on mobile ── */
@media (max-width: 768px) {
    body,
    .nav-link,
    .pl-label,
    .btn {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }
}

/* ──────────────────────────────────────────────────────────
   WALLET BOX — Bet365‑inspired compact neon style override
   Constraints: CSS only, keep existing HTML/JS
   Accent: #029354 (neon green)
   Applies on both desktop and mobile, with responsive tweaks
   Uses !important to overrule previous theme rules safely
   ────────────────────────────────────────────────────────── */

/* Base container */
.wallet-box {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;            /* compact header height */
    min-height: 34px !important;
    padding: 0 10px !important;         /* tight horizontal padding */
    border-radius: 8px !important;      /* 6–10px radius */
    background: linear-gradient(180deg, #131313 0%, #0f0f0f 100%) !important; /* dark integration */
    border: 1px solid rgba(2,147,84,0.55) !important;                        /* neon green edge */
    box-shadow:
        0 0 0 1px rgba(2,147,84,0.25) inset,
        0 2px 10px rgba(2,147,84,0.22),
        0 0 18px rgba(2,147,84,0.12) !important;                             /* soft neon glow */
    color: #EAF7F1 !important;
    overflow: hidden !important;        /* prevent shimmer overflow */
    transition:
        border-color .2s ease,
        box-shadow .25s ease,
        background-color .2s ease,
        transform .18s ease !important;                                       /* smooth feel */
    animation: wbPulseGlow 3.8s ease-in-out infinite;                          /* elegant pulse */
}

/* Icon — compact, sportsbook feel */
.wallet-box i {
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: linear-gradient(145deg, #029354 0%, #016b3d 100%) !important; /* neon → darker */
    border: 1px solid rgba(2,147,84,0.45) !important;
    color: #0d1a15 !important;        /* glyph contrast on neon bg */
    box-shadow: 0 1px 6px rgba(2,147,84,0.28) !important;
}

/* Balance text */
.wallet-box .wallet-info span,
.wallet-box span {
    color: #eafff5 !important;
    font-weight: 800 !important;
    letter-spacing: .15px !important;
}
.wallet-box .wallet-info small,
.wallet-box small {
    color: rgba(165,255,214,0.85) !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}

/* Hover/active states */
.wallet-box:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(2,147,84,0.75) !important;
    box-shadow:
        0 0 0 1px rgba(2,147,84,0.35) inset,
        0 4px 16px rgba(2,147,84,0.35),
        0 0 22px rgba(2,147,84,0.2) !important;
}
.wallet-box:active { transform: translateY(0) scale(.99) !important; }

/* Subtle light sweep/shimmer */
.wallet-box::after {
    content: "";
    position: absolute;
    top: 0; left: -140%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.08) 22%,
        rgba(255,255,255,0.14) 35%,
        rgba(255,255,255,0.06) 48%,
        rgba(255,255,255,0) 60%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: wbSweep 5.2s ease-in-out infinite;
}

/* Keyframes */
@keyframes wbSweep {
    0%   { left: -140%; }
    28%  { left: 120%; }
    100% { left: 120%; }
}
@keyframes wbPulseGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(2,147,84,0.24) inset,
            0 2px 9px rgba(2,147,84,0.18),
            0 0 16px rgba(2,147,84,0.10);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(2,147,84,0.36) inset,
            0 3px 14px rgba(2,147,84,0.28),
            0 0 20px rgba(2,147,84,0.16);
    }
}

/* Mobile tightening */
@media (max-width: 480px) {
    .wallet-box {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        max-width: 60vw !important;
    }
    .wallet-box i { width: 16px !important; height: 16px !important; line-height: 16px !important; }
    .wallet-box .wallet-info span, .wallet-box span { font-size: 11.5px !important; }
}