Promote version 27e11cd to main

Promoted commit 27e11cdae722eed3f0e7c4c77e9d2700b65c55af to main branch

script.js

@@ -3,7 +3,17 @@ document.addEventListener('DOMContentLoaded', function() {
     if (document.getElementById('coin-particles')) {
         initCoinParticles();
     }
-// Input focus effects
+
+    // Payment method selection
+    const paymentMethods = document.querySelectorAll('.payment-method');
+    paymentMethods.forEach(method => {
+        method.addEventListener('click', function() {
+            paymentMethods.forEach(m => m.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+
+    // Input focus effects
     const inputs = document.querySelectorAll('.input-glow input');
     inputs.forEach(input => {
         input.addEventListener('focus', function() {

style.css

@@ -135,6 +135,32 @@ body {
 .progress-bar .step.active + .connector::after {
   width: 100%;
 }
+
+.payment-method {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 140, 0, 0.2);
+  color: var(--color-white-soft);
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+.payment-method.active {
+  background: rgba(255, 140, 0, 0.1);
+  border: 1px solid var(--color-glow-orange);
+  box-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
+  opacity: 1;
+}
+
+.payment-method:hover {
+  opacity: 1;
+}
+
 .input-glow {
   position: relative;
   border-radius: 10px;