move code to static files

hub/services/static/css/price-calculator.css

@@ -33,4 +33,37 @@
     to {
         opacity: 1;
     }
+}
+
+
+/* Subtle styling for the best plan */
+.card.border-success.border-2 {
+    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.1) !important;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.card.border-success.border-2:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15) !important;
+}
+
+/* Best choice badge styling */
+.badge.bg-success {
+    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
+    border: 2px solid white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    min-width: max-content;
+}
+
+/* Subtle enhancement for best plan button */
+.btn-success.shadow {
+    transition: all 0.2s ease-in-out;
+}
+
+.btn-success.shadow:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important;
 }

hub/services/static/js/price-calculator.js

@@ -1834,4 +1834,22 @@ document.addEventListener('DOMContentLoaded', () => {
     if (document.getElementById('cpuRange')) {
         new PriceCalculator();
     }
-});
+});
+
+function selectPlan(element) {
+    const planId = element.getAttribute('data-plan-id');
+    const planName = element.getAttribute('data-plan-name');
+
+    // Find the plan dropdown in the contact form
+    const planDropdown = document.getElementById('id_choice');
+    if (planDropdown) {
+        // Find the option with matching plan id and select it
+        for (let i = 0; i < planDropdown.options.length; i++) {
+            const optionValue = planDropdown.options[i].value;
+            if (optionValue.startsWith(planId + '|')) {
+                planDropdown.selectedIndex = i;
+                break;
+            }
+        }
+    }
+}