/* Mobile Responsive CSS - Minimal Essential Fixes Only */
/* Only fix critical mobile issues without breaking the layout */

/* --- FONT AWESOME ICON FIX (2025-07-17) --- */
@media only screen and (max-width: 768px) {
  /* Ensure Font Awesome icons display properly */
  .fas, .far, .fab, .fa,
  .fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-style: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
  }
  
  .fas, .fa-solid {
    font-weight: 900 !important;
  }
  
  .far, .fa-regular {
    font-weight: 400 !important;
  }
  
  .fab, .fa-brands {
    font-weight: 400 !important;
  }
}

/* --- ESSENTIAL MOBILE FIXES ONLY --- */
@media only screen and (max-width: 768px) {
    
    /* Essential body fixes */
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* CRITICAL: Make cart and wishlist buttons visible */
    .add-to-cart-btn, 
    .add-to-wishlist-btn,
    .cart-button,
    .wishlist-button,
    .btn-cart,
    .btn-wishlist {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 10px !important;
        font-size: 14px !important;
        text-align: center !important;
        border-radius: 5px !important;
        min-height: 44px !important;
    }
    
    /* Basic button colors */
    .add-to-cart-btn,
    .cart-button,
    .btn-cart {
        background-color: #4CAF50 !important;
        color: white !important;
        border: none !important;
    }
    
    .add-to-wishlist-btn,
    .wishlist-button,
    .btn-wishlist {
        background-color: #ff6b6b !important;
        color: white !important;
        border: none !important;
    }
    
    /* CRITICAL: Ensure game card buttons are visible */
    .game-card .card-actions,
    .game-card .button-group,
    .game-card .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        margin-top: 10px !important;
    }
    
    /* Essential navbar button sizing */
    .navbar .btn, .navbar .btn-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        margin: 0 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Notification badges */
    .btn-icon .badge {
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        height: 14px !important;
        width: 14px !important;
        font-size: 0.65rem !important;
        border-radius: 50% !important;
        background: #dc3545 !important;
        color: white !important;
        border: 1px solid #fff !important;
    }
    
    /* Essential modal sizing */
    .modal-dialog {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0 !important;
    }
    
    .modal-content {
        height: 95vh !important;
        max-height: 95vh !important;
    }
    
    /* Game card button touch targets */
    .game-card-new .btn,
    .game-card .btn,
    .product-card .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
    }
    
    /* Specific button styling */
    .view-details-btn {
        background-color: #66c0f4 !important;
        color: white !important;
        border: none !important;
        width: 100% !important;
    }
    
    .add-to-cart-btn-card {
        background-color: #4CAF50 !important;
        color: white !important;
        border: none !important;
        width: 100% !important;
    }
    
    .purchased-game-btn {
        background-color: #17a2b8 !important;
        color: white !important;
        border: none !important;
        width: 100% !important;
    }
}

/* --- END ESSENTIAL MOBILE FIXES --- */