From 781281f9bc961f0e1644793b13ce2ae258535eef Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Thu, 19 Feb 2026 18:36:12 +0100
Subject: [PATCH] fix billing toggle and Most Popular badge consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix CSS-only billing toggle: radio inputs were nested inside
  .s-billing-toggle, so ~ siblings couldn't reach plan card price
  elements inside <form>. Moved radios to be direct siblings of both
  .s-billing-toggle and <form>. Updated CSS selectors accordingly.
  Removed .price-yearly{display:block} override that broke monthly view.
- Set Most Popular badge on Growth (not Pro) in signup wizard — Growth
  is the natural entry point for lead-receiving suppliers
- Update public pricing page: Growth €149→€199, Pro €399→€499
- Refresh Pro feature list: logo+cover photo, full stats, verified badge
  (no longer described as add-ons since they're built into Pro)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../public/templates/suppliers.html           | 13 ++++----
 .../suppliers/partials/signup_step_1.html     | 30 +++++++++----------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/padelnomics/src/padelnomics/public/templates/suppliers.html b/padelnomics/src/padelnomics/public/templates/suppliers.html
index cb8bc36..9212234 100644
--- a/padelnomics/src/padelnomics/public/templates/suppliers.html
+++ b/padelnomics/src/padelnomics/public/templates/suppliers.html
@@ -350,12 +350,12 @@
       <div class="pricing-card pricing-card--highlight">
         <div class="pricing-card__popular">Most Popular</div>
         <h3>Growth</h3>
-        <div class="price">&euro;149 <span>/mo</span></div>
+        <div class="price">&euro;199 <span>/mo</span></div>
         <div class="credits-inc">30 credits/mo included</div>
         <ul>
           <li>Company name &amp; category badge</li>
           <li>City &amp; country shown</li>
-          <li>Description (3 lines)</li>
+          <li>Description visible</li>
           <li>"Growth" badge</li>
           <li>Priority over free listings</li>
           <li>Access to lead feed</li>
@@ -366,16 +366,15 @@
       <!-- Pro -->
       <div class="pricing-card">
         <h3>Pro</h3>
-        <div class="price">&euro;399 <span>/mo</span></div>
+        <div class="price">&euro;499 <span>/mo</span></div>
         <div class="credits-inc">100 credits/mo included</div>
         <ul>
           <li>Everything in Growth</li>
-          <li>Company logo displayed</li>
-          <li>Full description</li>
-          <li>Website link shown</li>
+          <li>Logo &amp; cover photo</li>
+          <li>Full stats (projects, years, area)</li>
           <li>Verified &#10003; badge</li>
+          <li>Featured card border &amp; glow</li>
           <li>Priority placement</li>
-          <li>Highlighted card border</li>
         </ul>
         <a href="{{ url_for('suppliers.signup') }}?plan=supplier_pro" class="btn-outline" style="display:block;text-align:center">Get Started</a>
       </div>
diff --git a/padelnomics/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html b/padelnomics/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html
index 22ba225..6009978 100644
--- a/padelnomics/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html
+++ b/padelnomics/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_1.html
@@ -2,12 +2,14 @@
   <h2 class="s-step-title">Choose Your Plan</h2>
   <p class="s-step-sub">Select the plan that fits your growth goals.</p>
 
-  <!-- Billing period toggle (CSS-only, no JS) -->
+  <!-- Billing period toggle (CSS sibling selector trick).
+       Radios must be direct siblings of .s-billing-toggle AND <form> so that
+       #bp-X:checked ~ * .price-X can reach into the plan cards. -->
+  <input type="radio" name="_bp_toggle" id="bp-monthly" value="monthly"
+         {% if data.get('billing_period', 'yearly') == 'monthly' %}checked{% endif %}>
+  <input type="radio" name="_bp_toggle" id="bp-yearly" value="yearly"
+         {% if data.get('billing_period', 'yearly') != 'monthly' %}checked{% endif %}>
   <div class="s-billing-toggle">
-    <input type="radio" name="_bp_toggle" id="bp-monthly" value="monthly"
-           {% if data.get('billing_period', 'yearly') == 'monthly' %}checked{% endif %}>
-    <input type="radio" name="_bp_toggle" id="bp-yearly" value="yearly"
-           {% if data.get('billing_period', 'yearly') != 'monthly' %}checked{% endif %}>
     <div class="s-billing-toggle__pill">
       <label for="bp-monthly" class="s-billing-toggle__opt">Monthly</label>
       <label for="bp-yearly" class="s-billing-toggle__opt">
@@ -17,8 +19,8 @@
   </div>
 
   <style>
+    #bp-monthly, #bp-yearly { display: none; } /* radios are layout-only */
     .s-billing-toggle { margin-bottom: 1.25rem; }
-    .s-billing-toggle input[type="radio"] { display: none; }
     .s-billing-toggle__pill {
       display: inline-flex; border: 1px solid #E2E8F0; border-radius: 999px;
       background: #F8FAFC; overflow: hidden;
@@ -28,27 +30,23 @@
       color: #64748B; transition: all 0.15s; border-radius: 999px;
       display: flex; align-items: center; gap: 6px;
     }
-    #bp-monthly:checked ~ .s-billing-toggle__pill label[for="bp-monthly"],
-    #bp-yearly:checked  ~ .s-billing-toggle__pill label[for="bp-yearly"] {
+    /* Radios are now direct siblings of .s-billing-toggle, so ~ reaches it */
+    #bp-monthly:checked ~ .s-billing-toggle label[for="bp-monthly"],
+    #bp-yearly:checked  ~ .s-billing-toggle label[for="bp-yearly"] {
       background: #1D4ED8; color: white;
     }
     .s-save-badge {
       font-size: 0.625rem; font-weight: 700; background: #DCFCE7; color: #16A34A;
       padding: 2px 6px; border-radius: 999px;
     }
-    #bp-yearly:checked ~ .s-billing-toggle__pill label[for="bp-yearly"] .s-save-badge {
+    #bp-yearly:checked ~ .s-billing-toggle label[for="bp-yearly"] .s-save-badge {
       background: rgba(255,255,255,0.2); color: white;
     }
 
-    /* Price display depending on toggle */
+    /* Price display: radios are siblings of <form>, so ~ * reaches plan cards */
     .price-monthly, .price-yearly { display: none; }
     #bp-monthly:checked ~ * .price-monthly { display: block; }
     #bp-yearly:checked  ~ * .price-yearly  { display: block; }
-    /* Default (yearly checked) */
-    .price-yearly { display: block; }
-
-    /* Override when monthly is checked — but CSS sibling limitation means we use
-       the form hidden field trick: the actual billing_period value is set by JS below */
   </style>
 
   <form hx-post="{{ url_for('suppliers.signup_step', step=1) }}"
@@ -63,7 +61,7 @@
       <label class="s-plan-card {% if data.get('plan', 'supplier_growth') == key %}s-plan-card--selected{% endif %}"
              onclick="this.parentNode.querySelectorAll('.s-plan-card').forEach(c=>c.classList.remove('s-plan-card--selected')); this.classList.add('s-plan-card--selected')">
         <input type="radio" name="plan" value="{{ key }}" {% if data.get('plan', 'supplier_growth') == key %}checked{% endif %}>
-        {% if key == 'supplier_pro' %}<div class="s-plan-card__popular">Most Popular</div>{% endif %}
+        {% if key == 'supplier_growth' %}<div class="s-plan-card__popular">Most Popular</div>{% endif %}
         <h3>{{ plan.name }}</h3>
         <div class="price-yearly">
           <div class="price">&euro;{{ plan.yearly_monthly_equivalent }} <span>/mo</span></div>