/**
 * Steam XMR Store - Responsive Design
 * Version: 2.0.0 (July 26, 2025)
 */

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* ===== MOBILE STYLES (max-width: 767px) ===== */
@media (max-width: 767px) {
    /* Page layout */
    .responsive_page_frame {
        padding: 10px 5px;
    }
    
    .responsive_page_content {
        padding: 15px 10px;
    }
    
    /* Adjust page header */
    .page_header h1 {
        font-size: 24px;
    }
    
    .page_header p {
        font-size: 14px;
    }
    
    /* Adjust product grid for mobile */
    .products_list_header {
        grid-template-columns: 40px 65px 1fr 60px 65px !important;
        padding: 8px 5px !important;
        gap: 4px !important;
        font-size: 11px !important;
    }
    
    .product_item_list {
        grid-template-columns: 40px 65px 1fr 60px 65px !important;
        padding: 8px 5px !important;
        gap: 4px !important;
        min-height: 60px; /* Increase for better touch targets */
    }
    
    /* DETAILS button styles for desktop rows */
    .details {
        display: inline-block !important;
        padding: 4px 8px;
        background: linear-gradient(to bottom, #4b6b8d 5%, #2a4763 95%);
        border-radius: 2px;
        color: #c7d5e0;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
    }
    
    /* Product title handling on mobile */
    .product_name {
        position: relative;
        z-index: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 4px !important;
        display: flex;
        align-items: center;
    }
    
    /* Force DETAILS button to show on mobile and hide title */
    .view_button {
        display: inline-block !important;
        background: linear-gradient(to bottom, #4b6b8d 5%, #2a4763 95%) !important;
        border-radius: 2px !important;
        color: #c7d5e0 !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
        white-space: nowrap;
        font-weight: 500;
    }
    
    .product_title {
        display: none !important;
    }
    
    /* Info button visibility */
    .info-button {
        display: inline-flex !important;
        margin-left: 5px !important;
    }
    
    /* Mobile buttons adjustments */
    .product_actions {
        display: flex !important;
        justify-content: center;
    }
    
    .product_price {
        font-size: 14px !important;
    }
    
    .product_number {
        font-size: 12px !important;
        padding: 5px !important;
    }
    
    /* Buy button sizing for mobile */
    .btn_green_white_innerfade, 
    .btn_buy {
        min-width: auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .btn_green_white_innerfade span,
    .btn_buy {
        padding: 6px 10px !important;
        font-size: 14px !important;
        font-weight: bold !important;
    }
    
    /* Adjust search filter for mobile */
    .search_filter {
        width: 100%;
    }
    
    .search_inputs {
        flex-direction: column;
        gap: 8px;
    }
    
    .search_button {
        padding: 10px;
    }
    
    /* Adjust pagination for mobile */
    .pagination {
        margin: 20px 0;
    }
    
    .pagination_btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ===== TABLET STYLES (min-width: 768px and max-width: 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Make minor adjustments for tablets */
    .products_list_header,
    .product_item_list {
        grid-template-columns: 50px 75px 1fr 70px 75px;
        padding: 8px;
    }
    
    .view_button {
        display: none !important; /* Hide DETAILS button on tablets */
    }
    
    /* Adjust product name for better readability on tablets */
    .product_title {
        max-width: 300px;
    }
}

/* ===== DESKTOP STYLES (min-width: 992px) ===== */
@media (min-width: 992px) {
    /* Ensure DETAILS button is hidden on desktop */
    .view_button {
        display: none !important;
    }
}