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

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

html,
body {
    overflow-x: hidden;
    -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: 768px) {

    /* ---------- Scroll & Layout Fix ---------- */
    html,
    body {
        height: auto !important;
        overflow-y: auto !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 ---------- */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: 100dvh !important;
        z-index: 9999 !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;
    }

    body.mobile-sb-open .sidebar {
        transform: translateX(0) !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 ---------- */
    .topbar {
        height: 52px !important;
        padding: 0 10px !important;
        z-index: 1000 !important;
        background: rgba(5, 8, 15, .8) !important;
    }

    .topbar-bc {
        display: none !important;
    }

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

    .tb-user-name {
        max-width: 70px;
        font-size: .75rem !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-left,
    .footer-center,
    .footer-right {
        flex: unset !important;
        flex-direction: column !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !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 {
        overflow-x: hidden !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;
    }

    .fg-banner {
        height: 110px !important;
        padding: 15px !important;
    }

    .fg-banner .btitle {
        font-size: 1.25rem !important;
    }

    .fg-banner .bright {
        display: none;
    }

    .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 ---------- */
    .podium-section {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 40px !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;
    }

    /* ---------- Global Search Overrides ---------- */
    .tb-search.open {
        width: calc(100vw - 20px) !important;
        position: fixed !important;
        left: 10px !important;
        top: 56px !important;
        /* Just below topbar */
        z-index: 2000 !important;
    }

    .tb-sr-results {
        max-height: 65vh !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 ═══ */