/* ============================================
   SLOTTOMAT UNIFIED SITE FIX
   Version: 2026-02-06 - Comprehensive Fix
   Fixes: Width, Centering, Mobile, Dropdowns
   ============================================ */

/* ============================================
   1. GLOBAL CONTAINER & WIDTH FIX
   Standardize max-width across all pages
   ============================================ */

/* Main content wrapper - consistent max-width */
.container,
.games-section-content .container,
.rtp-database-page,
.software-description,
.play-game-content,
.game-detail-content,
#games-new-section .container,
#single-game-section .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent body/html overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    display: block !important;
}

/* ============================================
   2. HEADER & DROPDOWN FIX
   Fix navigation dropdown visibility
   ============================================ */

/* Dropdown container z-index */
.nav-dropdown,
.dropdown--cats,
.dropdown--open-on-hover {
    position: relative;
    z-index: 900 !important;
}

/* Dropdown menu - ensure visibility on hover */
.nav-dropdown .dropdown-menu,
.dropdown--cats .dropdown-menu,
.dropdown--open-on-hover .dropdown-menu {
    z-index: 1000 !important;
}

/* Desktop dropdown hover activation */
@media (min-width: 992px) {
    .nav-dropdown:hover .dropdown-menu,
    .dropdown--cats:hover .dropdown-menu,
    .dropdown--open-on-hover:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* Header nav - allow shrinking */
.header-nav {
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

.header-nav .nav-link,
#header-desk .nav-link {
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

/* Logo sizing */
.header-logo img,
.navbar-brand img,
#header-desk .navbar-brand img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================
   3. MOBILE LAYOUT FIX
   Consistent mobile experience
   ============================================ */

/* Mobile base (all screens) */
@media (max-width: 991px) {
    /* Container padding */
    .container,
    .games-section-content .container,
    .rtp-database-page {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Hide desktop nav */
    .desktop-nav,
    .header-nav {
        display: none !important;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle,
    .menu-Icon {
        display: flex !important;
    }

    /* Logo size mobile */
    .header-logo img,
    .navbar-brand img {
        max-height: 45px !important;
    }
}

/* Tablet (768px) */
@media (max-width: 768px) {
    /* Game grid - 2 columns */
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid,
    .games-grid-ocean,
    .games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Container max-width */
    .container {
        max-width: 100% !important;
    }

    /* Text alignment mobile */
    .ocean-hero-content,
    .rtp-hero,
    .newHeader .game-banner-content {
        text-align: center !important;
    }

    /* Filter group full width */
    .filter-group,
    .filter-section {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* RTP table fix */
    .rtp-table-container {
        font-size: 0.85rem !important;
        overflow-x: auto !important;
    }

    .rtp-table th,
    .rtp-table td {
        padding: 10px 8px !important;
    }

    /* Search bar full width */
    .search-bar,
    .ocean-search-box {
        max-width: 100% !important;
        width: 100% !important;
    }

    .search-bar input,
    .ocean-search-box input {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    /* Single column grid for very small screens */
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Smaller padding */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Font sizes */
    .ocean-hero-title,
    .rtp-hero h1,
    .newHeader h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Logo smaller */
    .header-logo img,
    .navbar-brand img {
        max-height: 40px !important;
    }

    /* Stats badges */
    .hero-stats,
    .rtp-stats-bar {
        max-width: 100% !important;
        gap: 10px !important;
    }

    .hero-stat,
    .rtp-stat {
        padding: 10px !important;
        font-size: 0.85rem !important;
    }

    /* Game logos in tables */
    .game-logo {
        width: 35px !important;
        height: 35px !important;
    }

    /* Age gate modal */
    .age-gate-card {
        max-width: calc(100% - 30px) !important;
        margin: 15px !important;
    }

    /* Cookie consent */
    .cookie-consent-bar {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .cookie-consent-buttons {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Ultra-small screens (380px) */
@media (max-width: 380px) {
    .ocean-hero-title,
    .rtp-hero h1 {
        font-size: 1.3rem !important;
    }

    .epic-game-grid,
    .ocean-game-grid {
        gap: 8px !important;
    }

    .game-card-title {
        font-size: 13px !important;
    }
}

/* ============================================
   4. RTP DATABASE PAGE FIX
   ============================================ */

.rtp-database-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.rtp-hero {
    text-align: center !important;
}

.rtp-filters {
    margin-top: -30px !important;
}

@media (max-width: 768px) {
    .rtp-filters {
        margin-top: -15px !important;
    }

    .filter-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ============================================
   5. GAME GRID CONSISTENCY
   Mobile-first responsive grid
   ============================================ */

.epic-game-grid,
#epicFreeGameGrid,
.ocean-game-grid,
.games-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid,
    .games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (min-width: 768px) {
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid,
    .games-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (min-width: 992px) {
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid,
    .games-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
}

@media (min-width: 1200px) {
    .epic-game-grid,
    #epicFreeGameGrid,
    .ocean-game-grid,
    .games-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ============================================
   6. TEXT ALIGNMENT FIX
   Consistent centered headings
   ============================================ */

.newHeader,
.ocean-hero,
.rtp-hero,
.game-banner-content {
    text-align: center !important;
}

.newHeader h1,
.ocean-hero-title,
.rtp-hero h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Content text left-aligned */
.software-description p,
.play-game-content p,
.game-detail-content p {
    text-align: left !important;
}

/* ============================================
   7. Z-INDEX NORMALIZATION
   Prevent stacking conflicts
   ============================================ */

.premium-header,
#header-desk {
    z-index: 1000 !important;
}

.dropdown-menu {
    z-index: 1001 !important;
}

.mobile-drawer,
.mobile-overlay {
    z-index: 1100 !important;
}

#popUp18plus,
.age-gate {
    z-index: 99999 !important;
}

.cookie-consent-bar {
    z-index: 9999 !important;
}

/* ============================================
   8. SINGLE GAME PAGE FIX
   ============================================ */

#single-game-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#single-game-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.game-iframe-wrapper,
.game-iframe-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

.game-frame {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .game-iframe-container {
        min-height: 400px !important;
    }

    #single-game-table {
        font-size: 0.9rem !important;
    }

    #single-game-table td {
        padding: 10px !important;
    }
}

/* ============================================
   9. PREVENT LAYOUT SHIFT
   ============================================ */

.epic-game-grid,
#epicFreeGameGrid {
    min-height: 400px;
    contain: layout style;
}

.epic-game-card:nth-child(-n+8) {
    content-visibility: visible !important;
}

/* ============================================
   10. SCROLLBAR STYLING (Cross-browser)
   ============================================ */

/* Webkit browsers */
.dropdown-grid::-webkit-scrollbar,
.rtp-table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dropdown-grid::-webkit-scrollbar-track,
.rtp-table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.dropdown-grid::-webkit-scrollbar-thumb,
.rtp-table-container::-webkit-scrollbar-thumb {
    background: #da1f15;
    border-radius: 3px;
}

/* Firefox */
.dropdown-grid,
.rtp-table-container {
    scrollbar-width: thin;
    scrollbar-color: #da1f15 rgba(0, 0, 0, 0.1);
}

/* ============================================
   12. CASINO BOX / STAY TUNED MOBILE FIX
   Fix for single slot and software pages
   Added: 2026-02-06
   ============================================ */

/* Base styles for no-casino fallback on all pages */
.no-casino-fallback,
#noCasino {
    background: linear-gradient(145deg, #0d2a45 0%, #061a30 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 50px 35px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

/* Stay tuned image */
.no-casino-fallback img,
#noCasino img {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) !important;
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 20px !important;
}

/* Stay tuned text */
.no-casino-fallback span,
#noCasino span {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin-bottom: 25px !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Free Slots button */
.no-casino-fallback .splbtns,
#noCasino .splbtns {
    display: inline-block !important;
    padding: 14px 35px !important;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    font-size: 1rem !important;
    position: relative !important;
    z-index: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
}

.no-casino-fallback .splbtns:hover,
#noCasino .splbtns:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4) !important;
    background: linear-gradient(135deg, #00e5ff 0%, #00aadd 100%) !important;
    color: #000000 !important;
}

/* Popular casino row container styling */
.popular_casino_row:has(#noCasino),
.popular_casino_row.no-casino-parent {
    background: transparent !important;
    box-shadow: none !important;
    padding: 30px 20px !important;
    margin: 20px auto !important;
    border-radius: 0 !important;
    max-width: 600px !important;
}

/* Single slot page specific styles */
.single-game-content .popular_casino_row,
.play-game-content ~ .container .popular_casino_row,
.sectionPTPB ~ .container .popular_casino_row {
    padding: 30px 15px !important;
    margin: 30px auto !important;
}

/* Software page specific styles */
.software-description ~ .popular_casino_row,
.software-content ~ .popular_casino_row {
    padding: 30px 15px !important;
    margin: 30px auto !important;
}

/* ============================================
   CASINO BOX MOBILE BREAKPOINTS
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .no-casino-fallback,
    #noCasino {
        padding: 40px 25px !important;
        max-width: 90% !important;
        margin: 0 auto 20px !important;
        border-radius: 16px !important;
    }

    .no-casino-fallback img,
    #noCasino img {
        max-width: 240px !important;
        margin-bottom: 15px !important;
    }

    .no-casino-fallback span,
    #noCasino span {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        padding: 10px 5px !important;
    }

    .no-casino-fallback .splbtns,
    #noCasino .splbtns {
        padding: 12px 30px !important;
        font-size: 0.95rem !important;
    }

    .popular_casino_row:has(#noCasino),
    .popular_casino_row.no-casino-parent {
        padding: 20px 15px !important;
        margin: 15px auto !important;
    }

    /* Single slot and software pages mobile */
    .single-game-content .popular_casino_row,
    .play-game-content ~ .container .popular_casino_row,
    .sectionPTPB ~ .container .popular_casino_row,
    .software-description ~ .popular_casino_row {
        padding: 20px 10px !important;
        margin: 20px auto !important;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .no-casino-fallback,
    #noCasino {
        padding: 30px 20px !important;
        max-width: 95% !important;
        border-radius: 14px !important;
        margin: 0 auto 15px !important;
    }

    .no-casino-fallback img,
    #noCasino img {
        max-width: 200px !important;
        margin-bottom: 12px !important;
    }

    .no-casino-fallback span,
    #noCasino span {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
        padding: 8px 5px !important;
    }

    .no-casino-fallback .splbtns,
    #noCasino .splbtns {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
        width: auto !important;
        min-width: 150px !important;
    }

    .popular_casino_row:has(#noCasino),
    .popular_casino_row.no-casino-parent {
        padding: 15px 10px !important;
        margin: 10px auto !important;
    }
}

/* Small mobile (375px and below) */
@media (max-width: 375px) {
    .no-casino-fallback,
    #noCasino {
        padding: 25px 15px !important;
        border-radius: 12px !important;
    }

    .no-casino-fallback img,
    #noCasino img {
        max-width: 180px !important;
        margin-bottom: 10px !important;
    }

    .no-casino-fallback span,
    #noCasino span {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
        margin-bottom: 15px !important;
    }

    .no-casino-fallback .splbtns,
    #noCasino .splbtns {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        min-width: 130px !important;
    }
}

/* Ultra-small screens (320px and below) */
@media (max-width: 320px) {
    .no-casino-fallback,
    #noCasino {
        padding: 20px 12px !important;
        border-radius: 10px !important;
    }

    .no-casino-fallback img,
    #noCasino img {
        max-width: 150px !important;
    }

    .no-casino-fallback span,
    #noCasino span {
        font-size: 0.8rem !important;
    }

    .no-casino-fallback .splbtns,
    #noCasino .splbtns {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
        min-width: 120px !important;
    }
}

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   Ensure consistent styling across all page types
   ============================================ */

/* Override any conflicting styles from bundle-sub.css */
.popular_casino_row #noCasino {
    width: 100% !important;
    max-width: 500px !important;
    color: #ffffff !important;
}

.popular_casino_row #noCasino span {
    color: #ffffff !important;
    font-size: inherit !important;
    display: block !important;
    background: transparent !important;
}

/* Ensure the container doesn't have weird backgrounds on single/software pages */
.single-game-content .container > .row.popular_casino_row,
.software-page .container > .row.popular_casino_row {
    background: transparent !important;
}

/* Fix for any Bootstrap margin utilities that might interfere */
#noCasino.text-center {
    text-align: center !important;
}

#noCasino .mt-3 {
    margin-top: 0.5rem !important;
}

#noCasino .mb-4 {
    margin-bottom: 1rem !important;
}

#noCasino .p-3 {
    padding: 0.5rem !important;
}

#noCasino .d-block {
    display: block !important;
}

/* ============================================
   13. SOFTWARE PAGES MOBILE OPTIMIZATION
   Comprehensive mobile fixes for /software/* pages
   Added: 2026-02-06
   Target: 375px mobile screens and responsive breakpoints
   ============================================ */

/* ============================================
   SOFTWARE HERO SECTION - MOBILE
   ============================================ */

/* Base mobile (768px and below) */
@media (max-width: 768px) {
    /* Hero Section */
    .software-hero {
        padding: 50px 15px 40px !important;
        margin-bottom: 0 !important;
    }

    .software-hero-content {
        padding: 0 10px !important;
    }

    /* Provider Logo - Smaller on mobile */
    .software-bg-logo {
        max-width: 180px !important;
        padding: 20px !important;
        margin: 0 auto 25px !important;
        border-radius: 16px !important;
    }

    /* Hero Title - Responsive font size */
    .software-hero h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin: 0 0 15px !important;
        padding: 0 10px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* Breadcrumb - Smaller text */
    .software-hero .cBreadcrumb {
        margin-top: 15px !important;
    }

    .software-hero .cBreadcrumb span {
        font-size: 12px !important;
    }

    .software-hero .cBreadcrumb span a {
        font-size: 12px !important;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .software-hero {
        padding: 40px 12px 35px !important;
    }

    .software-bg-logo {
        max-width: 150px !important;
        padding: 15px !important;
        margin: 0 auto 20px !important;
        border-radius: 14px !important;
    }

    .software-hero h1 {
        font-size: 22px !important;
        padding: 0 5px !important;
    }

    .software-hero .cBreadcrumb span {
        font-size: 11px !important;
    }
}

/* Ultra-small (375px and below) */
@media (max-width: 375px) {
    .software-hero {
        padding: 35px 10px 30px !important;
    }

    .software-bg-logo {
        max-width: 130px !important;
        padding: 12px !important;
        margin: 0 auto 18px !important;
        border-radius: 12px !important;
    }

    .software-hero h1 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .software-hero .cBreadcrumb span {
        font-size: 10px !important;
    }
}

/* ============================================
   SOFTWARE INTRO CARD - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .software-intro {
        padding: 30px 0 !important;
    }

    .software-intro-card {
        padding: 25px 18px !important;
        margin: 0 10px 30px !important;
        border-radius: 16px !important;
    }

    .software-intro h2 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
    }

    .software-intro h2::after {
        width: 80px !important;
        height: 3px !important;
    }

    .software-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .software-description p {
        font-size: 15px !important;
        margin-bottom: 18px !important;
    }

    .software-description h3 {
        font-size: 18px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }

    .software-description ul,
    .software-description ol {
        padding-left: 20px !important;
        margin: 15px auto !important;
        max-width: 100% !important;
    }

    .software-description li {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .software-intro {
        padding: 25px 0 !important;
    }

    .software-intro-card {
        padding: 20px 15px !important;
        margin: 0 8px 25px !important;
        border-radius: 14px !important;
    }

    .software-intro h2 {
        font-size: 20px !important;
        margin-bottom: 18px !important;
    }

    .software-description {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .software-description p {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .software-description h3 {
        font-size: 16px !important;
    }

    .software-description li {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
}

@media (max-width: 375px) {
    .software-intro-card {
        padding: 18px 12px !important;
        margin: 0 6px 20px !important;
        border-radius: 12px !important;
    }

    .software-intro h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
    }

    .software-description {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .software-description p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .software-description h3 {
        font-size: 15px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }

    .software-description li {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
}

/* ============================================
   SECTION HEADERS - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .sectionhead {
        font-size: 22px !important;
        margin-bottom: 25px !important;
        padding-bottom: 15px !important;
    }

    .sectionhead::after {
        width: 60px !important;
        height: 3px !important;
    }

    .epic-section-title {
        font-size: 22px !important;
        margin-bottom: 25px !important;
        padding: 0 10px !important;
    }

    .epic-section-title::after {
        width: 80px !important;
        height: 3px !important;
        bottom: -10px !important;
    }
}

@media (max-width: 480px) {
    .sectionhead {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    .epic-section-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 375px) {
    .sectionhead {
        font-size: 18px !important;
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }

    .epic-section-title {
        font-size: 18px !important;
        margin-bottom: 18px !important;
    }
}

/* ============================================
   EPIC SEARCH BAR - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .epic-search-bar {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 18px 15px !important;
        margin: 0 10px 25px !important;
        border-radius: 14px !important;
    }

    .search-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .epic-search-input {
        padding: 14px 15px 14px 45px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: 10px !important;
    }

    .search-icon {
        left: 15px !important;
        width: 18px !important;
        height: 18px !important;
    }

    .game-stats {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 15px !important;
        border-radius: 10px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    .stat-number,
    .stat-total {
        font-size: 16px !important;
    }

    .stat-separator {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .epic-search-bar {
        padding: 15px 12px !important;
        margin: 0 8px 20px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }

    .epic-search-input {
        padding: 12px 12px 12px 40px !important;
        font-size: 16px !important;
    }

    .game-stats {
        padding: 8px 12px !important;
    }

    .stat-label {
        font-size: 11px !important;
    }

    .stat-number,
    .stat-total {
        font-size: 14px !important;
    }
}

@media (max-width: 375px) {
    .epic-search-bar {
        padding: 12px 10px !important;
        margin: 0 6px 18px !important;
        border-radius: 10px !important;
    }

    .epic-search-input {
        padding: 10px 10px 10px 38px !important;
    }

    .search-icon {
        left: 12px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .game-stats {
        padding: 8px 10px !important;
    }

    .stat-label {
        font-size: 10px !important;
    }

    .stat-number,
    .stat-total {
        font-size: 13px !important;
    }
}

/* ============================================
   EPIC GAME GRID - SOFTWARE PAGES MOBILE
   Force 2 columns on mobile for software pages
   ============================================ */

@media (max-width: 768px) {
    /* Software page game grid */
    #epicGameGrid,
    .software-content .epic-game-grid,
    .software-page .epic-game-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    #epicGameGrid,
    .software-content .epic-game-grid,
    .software-page .epic-game-grid {
        gap: 10px !important;
        padding: 0 8px !important;
    }
}

@media (max-width: 375px) {
    #epicGameGrid,
    .software-content .epic-game-grid,
    .software-page .epic-game-grid {
        gap: 8px !important;
        padding: 0 6px !important;
    }
}

/* ============================================
   EPIC GAME CARD - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .epic-game-card {
        border-radius: 14px !important;
    }

    .game-card-image {
        height: 140px !important;
    }

    .game-card-info {
        padding: 12px 10px !important;
    }

    .game-card-title {
        font-size: 13px !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.25 !important;
    }

    /* Stats badges - Stack vertically */
    .game-stats-row {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .stat-badge {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .stat-icon {
        font-size: 14px !important;
    }

    .stat-badge .stat-label {
        font-size: 8px !important;
    }

    .stat-badge .stat-value {
        font-size: 11px !important;
    }

    /* Game details grid */
    .game-details-grid {
        gap: 6px !important;
        padding-top: 10px !important;
    }

    .detail-label {
        font-size: 8px !important;
    }

    .detail-value {
        font-size: 10px !important;
    }

    /* Play overlay button */
    .epic-play-btn {
        padding: 10px 20px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }

    .epic-play-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 480px) {
    .epic-game-card {
        border-radius: 12px !important;
    }

    .game-card-image {
        height: 120px !important;
    }

    .game-card-info {
        padding: 10px 8px !important;
    }

    .game-card-title {
        font-size: 12px !important;
        margin: 0 0 6px 0 !important;
    }

    .game-stats-row {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .stat-badge {
        padding: 6px 8px !important;
        gap: 6px !important;
        border-radius: 6px !important;
    }

    .stat-icon {
        font-size: 12px !important;
    }

    .stat-badge .stat-label {
        font-size: 7px !important;
    }

    .stat-badge .stat-value {
        font-size: 10px !important;
    }

    .game-details-grid {
        gap: 5px !important;
        padding-top: 8px !important;
    }

    .detail-label {
        font-size: 7px !important;
    }

    .detail-value {
        font-size: 9px !important;
    }

    .epic-play-btn {
        padding: 8px 16px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }
}

@media (max-width: 375px) {
    .epic-game-card {
        border-radius: 10px !important;
    }

    .game-card-image {
        height: 100px !important;
    }

    .game-card-info {
        padding: 8px 6px !important;
    }

    .game-card-title {
        font-size: 11px !important;
        margin: 0 0 5px 0 !important;
        line-height: 1.2 !important;
    }

    .game-stats-row {
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .stat-badge {
        padding: 5px 6px !important;
        gap: 5px !important;
        border-radius: 5px !important;
        border-width: 1px !important;
    }

    .stat-icon {
        font-size: 10px !important;
    }

    .stat-badge .stat-label {
        font-size: 6px !important;
        letter-spacing: 0 !important;
    }

    .stat-badge .stat-value {
        font-size: 9px !important;
    }

    .game-details-grid {
        gap: 4px !important;
        padding-top: 6px !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .detail-item {
        gap: 2px !important;
    }

    .detail-label {
        font-size: 6px !important;
        letter-spacing: 0 !important;
    }

    .detail-value {
        font-size: 8px !important;
    }

    .epic-play-btn {
        padding: 6px 12px !important;
        font-size: 10px !important;
        gap: 5px !important;
        border-radius: 30px !important;
    }

    .epic-play-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ============================================
   SOFTWARE CONTENT CONTAINER - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .software-content {
        padding: 0 !important;
    }

    .software-content .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .software-content .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .software-content .col-md-12 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Section spacing */
    .sectionPTPB {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .mt-30 {
        margin-top: 25px !important;
    }
}

@media (max-width: 480px) {
    .software-content .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .sectionPTPB {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .mt-30 {
        margin-top: 20px !important;
    }
}

@media (max-width: 375px) {
    .software-content .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .sectionPTPB {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .mt-30 {
        margin-top: 15px !important;
    }
}

/* ============================================
   FAQ SECTION - SOFTWARE PAGES MOBILE
   ============================================ */

@media (max-width: 768px) {
    .faq-section {
        padding: 30px 0 !important;
    }

    .faq-section h2,
    .faq-section .faq-heading {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .faq-item,
    .accordion-item {
        margin-bottom: 12px !important;
    }

    .faq-question,
    .accordion-button {
        font-size: 14px !important;
        padding: 15px !important;
    }

    .faq-answer,
    .accordion-body {
        font-size: 13px !important;
        padding: 15px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 25px 0 !important;
    }

    .faq-section h2 {
        font-size: 20px !important;
    }

    .faq-question,
    .accordion-button {
        font-size: 13px !important;
        padding: 12px !important;
    }

    .faq-answer,
    .accordion-body {
        font-size: 12px !important;
        padding: 12px !important;
    }
}

@media (max-width: 375px) {
    .faq-section {
        padding: 20px 0 !important;
    }

    .faq-section h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .faq-question,
    .accordion-button {
        font-size: 12px !important;
        padding: 10px !important;
    }

    .faq-answer,
    .accordion-body {
        font-size: 11px !important;
        padding: 10px !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   GAME DETAIL CONTENT SECTION - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .game-detail-content {
        padding: 30px 0 !important;
    }

    .game-detail-content .software-description {
        padding: 25px 18px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 480px) {
    .game-detail-content {
        padding: 25px 0 !important;
    }

    .game-detail-content .software-description {
        padding: 20px 15px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 375px) {
    .game-detail-content {
        padding: 20px 0 !important;
    }

    .game-detail-content .software-description {
        padding: 15px 12px !important;
        border-radius: 12px !important;
    }
}

/* ============================================
   SIDEBAR / RELATED PROVIDERS - MOBILE
   Hide or stack sidebar on mobile
   ============================================ */

@media (max-width: 768px) {
    .sidebar,
    .related-providers,
    .provider-sidebar {
        display: none !important; /* Hide sidebar on mobile */
    }

    /* If we want to show it, stack it below main content */
    .software-content .row {
        flex-direction: column !important;
    }

    .software-content .col-lg-8,
    .software-content .col-lg-9,
    .software-content .col-md-8,
    .software-content .col-md-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .software-content .col-lg-4,
    .software-content .col-lg-3,
    .software-content .col-md-4,
    .software-content .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 30px !important;
    }
}

/* ============================================
   PAGINATION - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 25px 0 !important;
    }

    .pagination .page-link,
    .pagination li a {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-width: 36px !important;
    }
}

@media (max-width: 375px) {
    .pagination {
        gap: 3px !important;
    }

    .pagination .page-link,
    .pagination li a {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-width: 32px !important;
    }
}

/* ============================================
   LOAD MORE BUTTON - MOBILE
   ============================================ */

@media (max-width: 768px) {
    #loadMoreGames,
    .load-more-btn,
    .btn-load-more {
        width: 100% !important;
        max-width: 280px !important;
        margin: 25px auto !important;
        padding: 14px 30px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 375px) {
    #loadMoreGames,
    .load-more-btn,
    .btn-load-more {
        max-width: 240px !important;
        padding: 12px 25px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   UTILITY CLASSES - MOBILE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
    /* Margin and padding mobile overrides */
    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mt-30 {
        margin-top: 20px !important;
    }

    .pt-5, .py-5 {
        padding-top: 2rem !important;
    }

    .pb-5, .py-5 {
        padding-bottom: 2rem !important;
    }

    /* Text size utilities */
    .display-4 {
        font-size: 1.75rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }

    /* Row negative margins fix */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > * {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 375px) {
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .display-4 {
        font-size: 1.5rem !important;
    }

    .lead {
        font-size: 0.9rem !important;
    }

    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .row > * {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL ON SOFTWARE PAGES
   ============================================ */

@media (max-width: 768px) {
    #single-game-section,
    .software-page,
    .software-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    #single-game-section *,
    .software-page *,
    .software-content * {
        max-width: 100% !important;
    }

    /* Ensure images don't overflow */
    #single-game-section img,
    .software-page img,
    .software-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   ANIMATIONS DISABLE ON MOBILE
   Improve performance
   ============================================ */

@media (max-width: 768px) {
    .epic-game-card {
        animation: none !important;
    }

    .epic-game-card::before {
        animation: none !important;
    }

    .software-hero::after {
        animation: none !important;
    }

    .software-hero::before {
        animation: none !important;
    }

    .epic-search-bar::before {
        animation: none !important;
    }
}