/* =======================================================
   PLAYQWIK — G2G METRO STYLE MOBILE THEME
   Super Premium, Ultra-clean, App-like Mobile UI
   ======================================================= */

/* ─── GLOBAL MOBILE VARIABLES & OVERRIDES ─── */
:root {
    --navbar-height: 56px;
    --bottom-nav-height: 60px;
    --g2g-dark-bg: #111317;
    --g2g-card-bg: #1e2229;
    --g2g-orange: #ff7a00;
    --g2g-green: #00d285;
    --g2g-border: #282e38;
    --g2g-text-secondary: #8e9aab;
}

@media (max-width: 768px) {
    /* Push content up to start right below modern compact header */
    body {
        padding-bottom: calc(var(--bottom-nav-height) + 16px) !important;
        background-color: var(--bg-primary) !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    }
    
    /* ─── CONTAINER PADDING OVERRIDES ─── */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ─── PREMIUM G2G BOTTOM NAVIGATION BAR ─── */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        background: #ffffff;
        border-top: 1.5px solid var(--border);
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        z-index: 10000;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.05);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        text-decoration: none !important;
        font-size: 10px;
        font-weight: 600;
        width: 20%;
        height: 100%;
        transition: color 0.15s ease;
        gap: 3px;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 19px;
        transition: transform 0.15s ease;
    }
    
    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav-item.active {
        color: var(--primary) !important;
    }
    
    .mobile-bottom-nav-item.active i {
        transform: translateY(-1px);
    }

    /* Floating central action button for 'Sell' similar to G2G custom buttons */
    .mobile-bottom-nav-item.action-btn {
        position: relative;
        top: -6px;
    }

    .mobile-bottom-nav-item.action-btn .action-btn-inner {
        width: 42px;
        height: 42px;
        background: var(--primary);
        color: #ffffff !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
        margin-bottom: 2px;
        border: 3px solid #ffffff;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .mobile-bottom-nav-item.action-btn:hover .action-btn-inner,
    .mobile-bottom-nav-item.action-btn.active .action-btn-inner {
        transform: scale(1.08);
        background: #4338ca;
    }

    .mobile-bottom-nav-item.action-btn .action-btn-inner i {
        font-size: 16px !important;
        color: white !important;
    }

    /* ─── ULTRA-CLEAN COMPACT MOBILE HEADER (G2G STYLE) ─── */
    .main-nav {
        height: var(--navbar-height) !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        border-bottom: 1.5px solid var(--border) !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.03) !important;
    }

    .nav-content-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Compact G2G logo */
    .navbar-logo {
        font-size: 16px !important;
        font-weight: 800 !important;
        gap: 6px !important;
        text-transform: uppercase;
    }

    .navbar-logo .logo-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* Hide standard desktop items */
    .nav-search-v4,
    .nav-links,
    .nav-actions .btn-ghost,
    .nav-actions .btn-outline {
        display: none !important;
    }

    /* Modern layout for right header buttons on G2G (Direct login / profile triggers) */
    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Profile / quick sign up buttons */
    .nav-actions .btn-primary {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        min-height: 32px !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--bg-secondary);
        border: none;
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 16px;
        transition: 0.15s ease;
    }

    /* ─── FULL-WIDTH SEARCH BAR DIRECTLY BELOW NAVBAR (G2G STYLE) ─── */
    .hero-search-capsule {
        margin: 12px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-wrap {
        border-radius: 10px !important;
        background: var(--bg-secondary) !important;
        border: 1.5px solid var(--border) !important;
        padding: 4px 6px !important;
        box-shadow: none !important;
    }

    .search-wrap input {
        font-size: 14px !important;
        padding: 8px 10px !important;
        color: var(--text-primary) !important;
    }

    .search-wrap i {
        font-size: 14px !important;
        margin-left: 10px !important;
        color: var(--text-tertiary) !important;
    }

    .search-wrap button {
        display: none !important; /* Hide massive search button to keep it clean */
    }

    /* ─── HERO SECTION COMPACTING ─── */
    .hero {
        padding: 24px 12px 16px 12px !important;
        margin-top: 0 !important;
        text-align: left !important;
        background: #ffffff !important;
        border-bottom: 8px solid var(--bg-secondary);
    }

    .hero-badge {
        display: inline-flex !important;
        font-size: 10px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        margin-bottom: 12px !important;
    }

    .hero h1 {
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        margin-bottom: 6px !important;
    }

    .hero p.lead {
        font-size: 13px !important;
        text-align: left !important;
        margin-bottom: 12px !important;
        max-width: 100% !important;
        color: var(--text-secondary) !important;
    }

    .hero-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }

    .hero-tags .text-tertiary {
        display: none !important;
    }

    .hero-tags a.badge-v3 {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        background: var(--bg-secondary) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
    }

    /* ─── CATEGORIES & GAME CARDS GRID (2 COLUMNS COMPACT - G2G STYLE) ─── */
    .trending-games {
        padding: 20px 0 !important;
        background: #ffffff !important;
        border-bottom: 8px solid var(--bg-secondary);
    }

    .trending-games .d-flex.justify-content-between {
        margin-bottom: 14px !important;
    }

    .section-label {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }

    .section-title {
        font-size: 18px !important;
        font-weight: 800 !important;
    }

    .trending-games .row {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }

    /* Compact square game card styling */
    .game-card-v4 {
        padding: 12px 8px !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        border: 1px solid var(--border) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        text-align: left !important;
    }

    .game-card-v4 .game-icon-bg {
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: var(--primary-light) !important;
    }

    .game-card-v4 .game-icon-bg i {
        font-size: 16px !important;
    }

    .game-card-v4 .mt-3 {
        margin-top: 0 !important;
        text-align: left !important;
    }

    .game-card-v4 h4 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
        color: var(--text-primary) !important;
    }

    .game-card-v4 span {
        font-size: 10px !important;
        color: var(--text-tertiary) !important;
    }

    /* ─── LATEST ARRIVALS COMPACT SCROLLER ─── */
    .newly-added {
        padding: 20px 0 !important;
        border-bottom: 8px solid var(--bg-secondary);
        background: #ffffff !important;
    }

    .newly-added .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        gap: 10px !important;
        scrollbar-width: none !important;
    }

    .newly-added .row::-webkit-scrollbar {
        display: none !important;
    }

    .newly-added .col {
        flex: 0 0 auto !important;
        width: 140px !important;
        padding: 0 !important;
    }

    .newly-added a {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 12px 8px !important;
        border-radius: 10px !important;
    }

    .newly-added a div {
        margin-bottom: 8px !important;
    }

    .newly-added a span {
        font-size: 12px !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* ─── PREMIUM G2G-STYLE PRODUCT CARDS (1 COLUMN LIST VIEW FOR MAXIMUM READABILITY) ─── */
    .hot-listings-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .product-card {
        display: flex !important;
        flex-direction: row !important;
        background: #ffffff !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        padding: 10px !important;
        gap: 12px !important;
        box-shadow: none !important;
    }

    /* Small horizontal image preview */
    .product-card a {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        text-decoration: none !important;
        color: inherit !important;
        gap: 12px !important;
    }

    .product-card a > div[style*="height: 200px"],
    .product-card a > div[style*="height: 140px"],
    .product-card a > div:first-child {
        width: 90px !important;
        height: 90px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        background: var(--bg-secondary) !important;
        position: relative !important;
    }

    .product-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Category label overlay in card */
    .product-card a > div:first-child > div {
        display: none !important; /* Hide badge inside image on list view */
    }

    /* Main body details of listing */
    .product-card a > div[style*="padding: 24px"],
    .product-card a > div:last-child {
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .product-card h3 {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: var(--text-primary) !important;
        margin-bottom: 4px !important;
        height: 34px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Price and seller details row */
    .product-card a > div:last-child > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        margin-top: auto !important;
    }

    .product-card .btn-primary {
        display: none !important; /* G2G doesn't have buy button directly on card list; clicking opens product details */
    }

    .product-card div[style*="font-size: 24px"] {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: var(--primary) !important;
    }

    .product-card div[style*="font-size: 13px"] {
        font-size: 11px !important;
        color: var(--text-tertiary) !important;
        font-weight: 600 !important;
    }

    /* ─── HOW IT WORKS (SLIM DESIGN) ─── */
    .how-it-works {
        padding: 24px 12px !important;
        background: #ffffff !important;
        border-bottom: 8px solid var(--bg-secondary);
    }

    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .step-card {
        padding: 12px 16px !important;
        background: var(--bg-secondary) !important;
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    .step-card .step-number {
        display: none !important;
    }

    .step-card .step-icon {
        font-size: 24px !important;
        margin: 0 !important;
    }

    .step-card h3 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
    }

    .step-card p {
        font-size: 11px !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
    }

    /* ─── INDEX STATS GRID COMPACT ─── */
    .index-stats-section {
        background: #ffffff !important;
        padding: 24px 0 !important;
    }

    .index-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .index-stats-grid > div {
        padding: 12px !important;
        background: var(--bg-secondary) !important;
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
    }

    .index-stats-grid .stat-number {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--primary) !important;
    }

    .index-stats-grid div[style*="font-size: 14px"] {
        font-size: 11px !important;
        color: var(--text-secondary) !important;
        margin-top: 4px !important;
    }

    /* ─── FOOTER SLIMMING ─── */
    footer {
        padding: 24px 12px !important;
        background: var(--bg-secondary) !important;
        border-top: 1px solid var(--border) !important;
        margin-top: 0 !important;
    }

    footer .container > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
    }

    footer .navbar-logo {
        margin-bottom: 12px !important;
    }

    footer p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    footer h4 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }

    footer ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 12px !important;
    }

    footer ul li a {
        font-size: 12px !important;
    }

    footer .container > div:last-child {
        padding-top: 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ─── CATEGORY FILTERS ACCORDION (G2G STYLE) ─── */
    .category-filter-toggle {
        padding: 10px 14px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        background: #ffffff !important;
        border: 1.5px solid var(--border) !important;
        color: var(--text-primary) !important;
    }

    /* Horizontal scroll filter chips */
    .filter-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 4px 0 12px 0 !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }

    .filter-pills::-webkit-scrollbar {
        display: none !important;
    }

    .filter-pill {
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid var(--border) !important;
        color: var(--text-secondary) !important;
    }

    .filter-pill.active {
        background: var(--primary-light) !important;
        color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    /* ─── PRODUCT DETAIL PAGE COMPACT (G2G STYLE) ─── */
    .col-lg-8 > .bg-white {
        border-radius: 12px !important;
        padding: 12px !important;
    }

    .col-lg-8 > .bg-white > .bg-light {
        height: 200px !important;
        border-radius: 10px !important;
    }

    .col-lg-4 .card {
        border-radius: 12px !important;
        margin-top: 12px !important;
    }

    /* ─── SELLER DASHBOARD & STATS ─── */
    .seller-dash-header {
        margin-bottom: 20px !important;
    }

    .seller-dash-header h1 {
        font-size: 22px !important;
    }

    .seller-dash-header p {
        font-size: 13px !important;
    }

    /* ─── WALLET PAGE DETAILS ─── */
    .input-group {
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .table-responsive {
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
    }

    /* ─── POPUP DRAWER NAVIGATION (SLIDE-IN Drawer styling) ─── */
    .mobile-menu {
        max-width: 280px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        padding-top: calc(env(safe-area-inset-top) + 20px) !important;
        box-shadow: 5px 0 25px rgba(0,0,0,0.15) !important;
    }

    .mobile-menu-overlay {
        top: 0 !important;
        background: rgba(17, 19, 23, 0.6) !important;
        backdrop-filter: blur(4px) !important;
    }

    /* ─── CATEGORY LISTINGS HORIZONTAL CARD LIST (G2G STYLE) ─── */
    .category-listings-grid {
        grid-template-columns: 1fr !important;
    }
    
    .category-listings-grid .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .category-listings-grid article.card {
        display: flex !important;
        flex-direction: row !important;
        padding: 10px !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        height: auto !important;
    }

    .category-listings-grid article.card a {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 12px !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .category-listings-grid article.card .position-relative {
        width: 90px !important;
        height: 90px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        background: var(--bg-secondary) !important;
    }

    .category-listings-grid article.card .card-body {
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .category-listings-grid article.card h3 {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: var(--text-primary) !important;
        margin-bottom: 4px !important;
        height: 34px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .category-listings-grid article.card .mt-2.pt-3 {
        padding-top: 0 !important;
        margin-top: auto !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
    }

    .category-listings-grid article.card .text-primary {
        font-size: 16px !important;
        font-weight: 800 !important;
    }
}