/*
 * Fragujemy.com – Mobile Responsiveness (iOS / Android)
 * Plik nadpisuje istniejące style na ekranach ≤768px
 */

/* ═══════════════════════════════════════════════════════════
   0. iOS Safari fixes & global mobile base
   ═══════════════════════════════════════════════════════════ */

html,
body {
    /* clip, not hidden: hidden makes the root a scroll container and breaks the
       topbar's position:sticky (it binds to a non-scrolling box and rides away).
       clip stops horizontal scroll without creating a scroll container. */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   1. HAMBURGER & UI BUTTONS
   ═══════════════════════════════════════════════════════════ */

.mobile-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 150, 255, .1);
    border: 1px solid rgba(0, 150, 255, .3);
    border-radius: 12px;
    color: #00d2ff;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: all .2s;
    flex-shrink: 0;
    z-index: 1001;
}

.mobile-hamburger:active {
    background: rgba(0, 120, 255, .3);
    transform: scale(.95);
}

.sb-close-btn {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 100;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
}

.sidebar-overlay {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BREAKPOINT ≤ 768px
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ---------- Scroll & Layout Fix ---------- */
    html,
    body {
        height: auto !important;
        /* visible, not auto: auto makes body a nested scroll container that traps the
           topbar's sticky. visible lets the viewport scroll the document, so sticky works. */
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell {
        height: auto !important;
        min-height: 100dvh !important;
        display: block !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 52px 1fr !important;
        grid-template-areas: "topbar" "main" !important;
    }

    .main-content {
        height: auto !important;
        min-height: calc(100dvh - 52px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        margin-left: 0 !important;
    }

    .main-inner {
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
        padding: 15px !important;
        padding-bottom: 40px !important;
    }

    /* ---------- Sidebar: CRITICAL FIX ---------- */
    /* The off-canvas menu must itself be scrollable: on short / landscape tablet
       viewports the nav + language flags are taller than the screen, and with the
       inherited overflow:hidden the bottom (language switcher) got clipped and was
       unreachable ("bottom never loads"). overflow-y:auto + a 100vh fallback before
       100dvh (older Chrome/Android dvh quirks) guarantees the whole menu scrolls. */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        transform: translateX(-101%) !important;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1) !important;
        animation: none !important;
        background: rgba(10, 15, 28, .98) !important;
        backdrop-filter: blur(25px) !important;
    }

    /* The nav area shouldn't trap the scroll on mobile — let the whole sidebar scroll
       so the language flags at the very bottom are always reachable. */
    .sidebar .sb-nav {
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    .sidebar .sb-bottom {
        margin-top: auto !important;
    }

    body.mobile-sb-open .sidebar {
        transform: translateX(0) !important;
    }

    /* Item 3: lock background scroll while the sidebar is open. The real scroll
       container is .main-content / .main-inner (CSS-grid layout, overflow-y:auto),
       NOT <body> — so those must be frozen too, or the page scrolls behind the menu. */
    body.mobile-sb-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body.mobile-sb-open .main-content,
    body.mobile-sb-open .main-inner {
        overflow: hidden !important;
        touch-action: none !important;
    }

    .sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, .7) !important;
        z-index: 9998 !important;
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition: opacity .3s;
    }

    body.mobile-sb-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto !important;
    }

    .sb-close-btn {
        display: flex !important;
        z-index: 10005 !important;
        pointer-events: auto !important;
    }

    .mobile-hamburger {
        display: flex;
    }

    /* Override any stuck widths */
    :root {
        --sidebar-w: 0px !important;
    }

    .sb-logo-name,
    .sb-logo-tag,
    .nav-lbl,
    .nav-item-label,
    .nav-item-arrow {
        display: block !important;
        opacity: 1 !important;
    }

    .nav-item {
        justify-content: flex-start !important;
        padding: 12px 14px !important;
        gap: 14px !important;
    }

    .sb-logo {
        justify-content: flex-start !important;
    }

    /* ---------- Topbar Adjustments ---------- */
    /* Mobile header layout:  [≡ hamburger] ............ [🔍 search] [login/avatar]
       Flex row; the hamburger is injected as the first child (js_mobile.js) and the
       search box is pushed to the right with margin-left:auto. */
    .topbar {
        height: 52px !important;
        padding: 0 10px !important;
        z-index: 1000 !important;
        background: rgba(5, 8, 15, .8) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* #1: the breadcrumb / page-name text is hidden in the header on mobile — it used
       to sit centered and collide with the search icon. The page name now lives only
       in the hero banner below (see .fg-banner / #page-label there). */
    .topbar-bc {
        display: none !important;
    }

    .topbar-right {
        gap: 5px !important;
    }

    /* When the search opens it leaves the flex flow (position:fixed, pinned below
       the bar), so its margin-left:auto no longer pushes these items right and they
       would jump to the left. Re-anchor them while the search is open. */
    .tb-search.open ~ .topbar-right {
        margin-left: auto !important;
    }

    /* Item 4: on mobile the user widget collapses to just the avatar (still click-to-expand). */
    .tb-user-btn .tb-user-name,
    .tb-user-btn .tb-user-role,
    .tb-user-btn .arr {
        display: none !important;
    }

    .tb-user-btn {
        padding: 2px !important;
        gap: 0 !important;
    }

    .tb-user-avatar,
    .tb-user-avatar-ph {
        width: 36px !important;
        height: 36px !important;
    }

    .tb-login-btn span {
        display: none;
    }

    .tb-login-btn {
        padding: 8px !important;
        border-radius: 10px !important;
    }

    /* ---------- Mobile Footer Fixes ---------- */
    .site-footer-premium {
        position: relative !important;
        flex-direction: column !important;
        padding: 30px 20px !important;
        gap: 25px !important;
        text-align: center !important;
        margin-top: auto;
        animation: none !important;
    }

    .footer-logo,
    .footer-copy,
    .footer-social-grid {
        flex: unset !important;
        width: auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .footer-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
    }

    .footer-legal {
        font-size: 11px !important;
    }

    .footer-social-grid {
        justify-content: center !important;
        gap: 15px !important;
    }

    .footer-logo {
        justify-content: center !important;
    }

    /* ---------- Game Color branding ---------- */
    .game-csgo,
    .gcsgo,
    .badge-csgo {
        --brand-color: #f18600 !important;
        color: var(--brand-color) !important;
    }

    .game-cs2,
    .gcs2,
    .badge-cs2 {
        --brand-color: #f0a800 !important;
        color: var(--brand-color) !important;
    }

    .gcsgo .srv-accent,
    .gcsgo .cat-bar,
    .gcsgo .srv-bar {
        background: linear-gradient(90deg, #f18600, #ffba50) !important;
    }

    .gcs2 .srv-accent,
    .gcs2 .cat-bar,
    .gcs2 .srv-bar {
        background: linear-gradient(90deg, #f0a800, #ffc060) !important;
    }

    .srv-name {
        font-size: .8rem !important;
    }

    /* ---------- Layout Adjustments ---------- */
    .app-shell {
        /* clip (not hidden): hidden makes .app-shell a scroll container, which traps
           the topbar's position:sticky so it rides away on scroll. clip stops h-scroll
           without creating a scroll container, so sticky binds to the body/window. */
        overflow-x: clip !important;
    }

    .main-content {
        width: 100vw !important;
        overflow-x: hidden !important;
    }

    .main-inner {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Fix for banners and wide elements */
    .fg-banner,
    .site-footer-premium,
    .topbar {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* #3: Mobile banner shows ONLY the page-name title (.btitle), centered. The tag line,
       subtitle, live-stats, CTA and side logo are hidden so it reads as a clean title bar
       — "KARY", "SERWERY", "DEMA", and "FRAGHUB" on the home page (btitle is already the
       page name on every page, so no per-page special-casing is needed). */
    .fg-banner {
        height: 92px !important;
        min-height: 92px !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .fg-banner .btag,
    .fg-banner .bsub,
    .fg-banner .bstats,
    .fg-banner .bstat,
    .fg-banner .bcta,
    .fg-banner .banner-mapname,
    .fg-banner .banner-mapdots,
    .fg-banner .bright {
        display: none !important;
    }

    .fg-banner .bleft,
    .fg-banner .bcontent {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .fg-banner .btitle {
        font-size: 1.6rem !important;
        letter-spacing: .06em !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    .srv-grid {
        grid-template-columns: 1fr !important;
    }

    .sb-edge {
        display: none !important;
    }

    .dash-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---------- Podium Fixes ---------- */
    .podium-wrapper {
        padding: 5px !important;
    }

    .rank-podium {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding-top: 10px !important;
    }

    .podium-spot {
        width: 100% !important;
        max-width: 320px !important;
        transform: translateY(0) !important;
        margin-top: 0 !important;
    }

    .spot-1 {
        order: 1 !important;
    }

    .spot-2 {
        order: 2 !important;
    }

    .spot-3 {
        order: 3 !important;
    }

    /* ---------- Info/Stat Panels ---------- */
    .demo-panel {
        padding: 10px !important;
    }

    .demo-box {
        max-width: 100% !important;
        margin: 0 !important;
        max-height: calc(100dvh - 20px) !important;
    }

    /* ---------- Tabs and Lists (Horizontal Scroll) ---------- */
    .demo-list,
    .demo-daytabs,
    .rank-tabs-container,
    .rank-subtabs-container,
    .profile-tabs-v2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch;
    }

    .demo-daytabs::-webkit-scrollbar,
    .rank-tabs-container::-webkit-scrollbar,
    .rank-subtabs-container::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    /* ---------- Profile Page Specific ---------- */
    .profile-hero-v2 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 30px 20px !important;
        gap: 25px !important;
    }

    .ph-avatar-v2 {
        width: 120px !important;
        height: 120px !important;
    }

    .ph-name-v2 {
        font-size: 2rem !important;
    }

    .ph-top-v2,
    .ph-name-group-v2 {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .profile-info-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-summary-row {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }

    .ssr-right {
        justify-content: center !important;
        width: 100% !important;
    }

    .ssr-stat {
        flex: 1 1 40% !important;
    }

    .pt-item {
        padding: 12px 15px !important;
        font-size: 0.85rem !important;
    }

    /* ---------- Ranking Page Specific ---------- */
    /* #5: stack the podium 1-2-3 on mobile. The JS appends the three cards in DOM
       order [#2, #1, #3] for the desktop center-balanced 3-column podium; collapsed
       to one column that stacked as 2,1,3. Re-order so #1 is on top. */
    .podium-section {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
    }

    .podium-section .rank-1 {
        order: 1 !important;
    }

    .podium-section .rank-2 {
        order: 2 !important;
    }

    .podium-section .rank-3 {
        order: 3 !important;
    }

    .hud-card {
        padding: 20px !important;
    }

    .hud-card .card-details {
        position: relative !important;
        top: 0 !important;
        margin-top: 15px !important;
        padding: 15px !important;
    }

    .rank-selectors {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .rank-selectors .selector-group {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .tactical-table td {
        padding: 12px 10px !important;
    }

    .tactical-table .rank-progress-wrap {
        display: none !important;
    }

    .tactical-table .stat-value {
        font-size: 1.2rem !important;
    }

    /* ---------- Shop Page Specific ---------- */
    .sklep-wrap {
        padding: 30px 20px !important;
    }

    .sklep-title {
        font-size: 2rem !important;
    }

    .sklep-features {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .sk-feat {
        width: 100% !important;
    }

    /* ---------- #2 Mobile search ----------
       Desktop styles it position:absolute; left:50% (centered) which made the icon
       float in the middle of the header. On mobile it's a round icon button on the
       right; tapping it (js_mobile.js) drops a full-width search bar under the topbar. */
    .tb-search {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-left: auto !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
        overflow: hidden !important;
        z-index: 1200 !important;
    }

    /* Touch devices have no real hover — don't let :hover expand the collapsed icon. */
    .tb-search:hover {
        width: 40px !important;
    }

    .tb-search .tb-search-input {
        display: none !important;
    }

    /* Open: full-width bar pinned just below the topbar. */
    .tb-search.open {
        position: fixed !important;
        top: 58px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        height: 50px !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 0 6px 0 12px !important;
        background: rgba(8, 12, 20, .98) !important;
        border-color: rgba(0, 180, 255, .5) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(0, 180, 255, .15) !important;
        z-index: 3000 !important;
    }

    .tb-search.open .tb-search-input {
        display: block !important;
        width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex: 1 !important;
        font-size: 16px !important;
        /* >=16px stops iOS auto-zoom on focus */
        padding: 0 10px !important;
    }

    .tb-search.open .tb-search-icon {
        min-width: 28px !important;
        font-size: 22px !important;
    }

    /* Results dropdown spans the full-width open bar. */
    .tb-search.open .tb-search-results,
    .tb-sr-results {
        position: fixed !important;
        top: 116px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 62vh !important;
        z-index: 3000 !important;
    }

    /* ---------- AI Agent Mobile Fix ---------- */
    .ai-chat-launcher {
        bottom: 20px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .ai-chat-window {
        width: calc(100% - 30px) !important;
        height: 60vh !important;
        bottom: 80px !important;
        right: 15px !important;
    }

    /* Hide Live on small devices if it causes issues, or adjust */
    .topbar-live {
        font-size: 0.7rem !important;
        gap: 4px !important;
    }

    /* ---------- Generic Table Fix ---------- */
    .responsive-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px !important;
    }
}

/* Disable hover effects on touch devices */
@media (hover: none) {

    .srv-card:hover,
    .hud-card:hover {
        transform: none !important;
    }

    .srv-card::after {
        display: none !important;
    }
}

/* ═══ End of Mobile Responsiveness ═══ */