Add server location select in pricing section, pre-select best server after ping, pass location in basket JSON payload

index.html

@@ -70,6 +70,10 @@
       .section-light{background:var(--cream);padding:3.5rem 0}.section-dark{background:var(--midnight);padding:3.5rem 0}.section-dark h2{color:#fff}
       .section-kicker{font-family:Inter,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem;text-align:center}
       .section-title{text-align:center;margin-bottom:2rem;color:var(--ink)}.section-dark .section-title{color:#fff}
+      .pricing-server-row{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
+      .pricing-server-row label{font-family:Inter,sans-serif;font-size:.82rem;color:var(--brass);text-transform:uppercase;letter-spacing:.08em}
+      .pricing-server-select{padding:.5rem 1rem;border-radius:var(--radius);border:1px solid var(--line-brass);background:rgba(255,255,255,.08);color:#fff;font-family:Inter,sans-serif;font-size:.85rem;outline:none;cursor:pointer;min-width:180px}
+      .pricing-server-select option{background:var(--midnight);color:#fff}
       @media(max-width:992px){.server-grid{grid-template-columns:repeat(3,1fr)}}
       @media(max-width:768px){.hero{min-height:auto;padding:3rem 0 0}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;text-align:center}.hero-stats{gap:.75rem}.hero-city-label{bottom:1rem;right:1rem;font-size:.78rem;padding:.5rem .9rem}}
       @media(max-width:576px){.server-grid{grid-template-columns:repeat(2,1fr)}.server-banner-header{flex-direction:column;align-items:flex-start}}
@@ -255,6 +259,10 @@
       <div class="container">
         <p class="section-kicker">Rates &amp; Suites</p>
         <h2 class="section-title">Your Plan, Your Timing: Upgrade Anytime</h2>
+        <div class="pricing-server-row">
+          <label for="pricingServerLocation">Server Location</label>
+          <select id="pricingServerLocation" class="pricing-server-select"></select>
+        </div>
         <div class="pricing-grid">
           <!-- Side Hustle -->
           <div class="pcard">

script.js

@@ -448,16 +448,19 @@ var si = 0,
               var results = [];
               var pending = SERVERS.length;
 
-              /* Populate trial form location dropdown */
+              /* Populate trial form AND pricing server location dropdowns */
               var trialLoc = document.getElementById('trialLocation');
-              if (trialLoc) {
+              var pricingLoc = document.getElementById('pricingServerLocation');
+              [trialLoc, pricingLoc].forEach(function(el) {
+                if (el) {
                   SERVERS.forEach(function(s) {
                     var opt = document.createElement('option');
                     opt.value = s.host;
                     opt.textContent = s.city;
-                  trialLoc.appendChild(opt);
+                    el.appendChild(opt);
                   });
                 }
+              });
 
               SERVERS.forEach(function(s) {
                 pingServer(s.host).then(function(r) {
@@ -469,15 +472,19 @@ var si = 0,
                     valid.sort(function(a, b) { return a.time - b.time; });
                     var best = valid[0];
                     var bestServer = SERVERS.filter(function(s) { return s.host === best.host; })[0];
-                    /* Preselect best server in trial form */
-                    if (trialLoc && bestServer) {
-                      for (var i = 0; i < trialLoc.options.length; i++) {
-                        if (trialLoc.options[i].value === bestServer.host) {
-                          trialLoc.selectedIndex = i;
+                    /* Preselect best server in trial and pricing forms */
+                    if (bestServer) {
+                      [trialLoc, pricingLoc].forEach(function(el) {
+                        if (el) {
+                          for (var i = 0; i < el.options.length; i++) {
+                            if (el.options[i].value === bestServer.host) {
+                              el.selectedIndex = i;
                               break;
                             }
                           }
                         }
+                      });
+                    }
                     if (bestServer && heroImages[best.host]) {
                       /* Highlight the matching server card */
                       var cards = document.querySelectorAll('.server-card');
@@ -627,8 +634,10 @@ var si = 0,
                 });
             })();
 
-            /* Buy Now — POST basket via form, opens checkout in new tab */
+            /* Buy Now — POST basket via form with server location, opens checkout in new tab */
             window.buyNow = function (productId) {
+                var locSelect = document.getElementById('pricingServerLocation');
+                var location = locSelect ? locSelect.value : '';
                 var form = document.createElement('form');
                 form.method = 'POST';
                 form.action = 'https://ODOO4projects.com/shop/post_basket';
@@ -637,7 +646,9 @@ var si = 0,
                 var basket = document.createElement('input');
                 basket.type = 'hidden';
                 basket.name = 'basket';
-                basket.value = JSON.stringify([{ product_id: productId, qty: 1 }]);
+                var item = { product_id: productId, qty: 1 };
+                if (location) { item.location = location; }
+                basket.value = JSON.stringify([item]);
                 form.appendChild(basket);
                 var clear = document.createElement('input');
                 clear.type = 'hidden';