Update app.py

app.py

@@ -597,7 +597,7 @@ Click and share to calculate your Poultry feed needs:
 
 
 # ============================================================
-# FEED CALCULATION
+# FEED CALCULATION - WITH BOXED NUMBERS
 # ============================================================
 
 def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_code, breed, request: gr.Request):
@@ -676,7 +676,7 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
         currency_symbol, expected_weight, flock_weight
     )
 
-    # Output HTML
+    # Output HTML with BOXED NUMBERS
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -684,126 +684,126 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     if days:
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
-html = f"""
-<div style="font-size: 17px; line-height: 1.8;">
+    html = f"""
+    <div style="font-size: 17px; line-height: 1.8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
 
-<div style="background: #f0fdf4; padding: 18px 22px; border-radius: 14px; border-left: 6px solid #22c55e; margin-bottom: 20px;">
-    <div style="font-size: 13px; color: #16a34a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;">Quick Answer</div>
-    
-    <!-- EXACT FEED - Boxed -->
-    <div style="font-size: 20px; font-weight: 700; color: #166534;">
-        Exact feed needed:
-        <span style="display: inline-block; background: #166534; color: white; border-radius: 12px; padding: 4px 18px; font-size: 30px; font-weight: 900;">
-            {total_bags:.1f}
-        </span>
-        bags of {bag_size:g} kg feed
+    <div style="background: #f0fdf4; padding: 18px 22px; border-radius: 14px; border-left: 6px solid #22c55e; margin-bottom: 20px;">
+        <div style="font-size: 13px; color: #16a34a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;">Quick Answer</div>
+        
+        <!-- EXACT FEED - Boxed -->
+        <div style="font-size: 20px; font-weight: 700; color: #166534;">
+            Exact feed needed:
+            <span style="display: inline-block; background: #166534; color: white; border-radius: 12px; padding: 4px 18px; font-size: 30px; font-weight: 900; box-shadow: 0 2px 8px rgba(22, 101, 52, 0.3);">
+                {total_bags:.1f}
+            </span>
+            bags of {bag_size:g} kg feed
+        </div>
+        
+        <!-- APPROXIMATE BAGS - Boxed -->
+        <div style="font-size: 20px; font-weight: 700; color: #1e40af; margin-top: 6px;">
+            Approximately:
+            <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 4px 18px; font-size: 26px; font-weight: 800; box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);">
+                {rounded_bags}
+            </span>
+            bags to purchase (rounded up)
+        </div>
+        
+        <!-- BIRD COUNT - Boxed -->
+        <div style="color: #374151; font-size: 16px; margin-top: 8px;">
+            To raise
+            <span style="display: inline-block; background: #fef3c7; border: 2px solid #f59e0b; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #92400e;">
+                {birds:,}
+            </span>
+            {breed} broilers to
+            <span style="display: inline-block; background: #fce4ec; border: 2px solid #ef4444; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #991b1b;">
+                {age_text} ({total_days} days)
+            </span>
+        </div>
+        
+        <div style="margin-top: 8px; font-size: 13px;">
+            <span style="background: {breed_color}; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600;">{breed}</span>
+            <span style="background: #6b7280; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600; margin-left: 8px;">{country_name}</span>
+        </div>
     </div>
-    
-    <!-- APPROXIMATE BAGS - Boxed -->
-    <div style="font-size: 20px; font-weight: 700; color: #1e40af; margin-top: 6px;">
-        Approximately:
-        <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 4px 18px; font-size: 26px; font-weight: 800;">
-            {rounded_bags}
-        </span>
-        bags to purchase (rounded up)
+
+    <div style="margin-bottom: 16px;">
+        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Breakdown</div>
+        <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
+            <tr style="border-bottom: 1px solid #e5e7eb;">
+                <td style="padding: 10px 4px;"><strong>Starter</strong></td>
+                <td style="padding: 10px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
+                <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{starter_bags_display} bags</td>
+            </tr>
+            <tr style="border-bottom: 1px solid #e5e7eb;">
+                <td style="padding: 10px 4px;"><strong>Finisher</strong></td>
+                <td style="padding: 10px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
+                <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{finisher_bags_display} bags</td>
+            </tr>
+            <tr>
+                <td style="padding: 10px 4px; font-weight: 700;">TOTAL</td>
+                <td style="padding: 10px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
+                <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #166534;">{total_bags:.1f}</td>
+            </tr>
+        </table>
     </div>
-    
-    <!-- BIRD COUNT - Boxed -->
-    <div style="color: #374151; font-size: 16px; margin-top: 8px;">
-        To raise
-        <span style="display: inline-block; background: #fef3c7; border: 2px solid #f59e0b; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #92400e;">
-            {birds:,}
-        </span>
-        {breed} broilers to
-        <span style="display: inline-block; background: #fce4ec; border: 2px solid #ef4444; border-radius: 10px; padding: 2px 14px; font-size: 18px; font-weight: 700; color: #991b1b;">
-            {age_text} ({total_days} days)
-        </span>
+
+    <div style="margin-bottom: 16px; background: #eff6ff; padding: 14px 18px; border-radius: 10px; border-left: 4px solid #3b82f6;">
+        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Cost</div>
+        <div style="font-size: 32px; font-weight: 900; color: white;">
+            <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 6px 22px; box-shadow: 0 2px 10px rgba(30, 64, 175, 0.3);">
+                {currency_symbol}{total_cost:,.0f}
+            </span>
+        </div>
+        <div style="color: #6b7280; font-size: 14px; margin-top: 4px;">
+            Approximately {rounded_bags} bags x {currency_symbol}{price_per_bag:,.0f} per bag
+        </div>
     </div>
-    
-    <div style="margin-top: 8px; font-size: 13px;">
-        <span style="background: {breed_color}; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600;">{breed}</span>
-        <span style="background: #6b7280; color: white; padding: 3px 12px; border-radius: 14px; font-weight: 600; margin-left: 8px;">{country_name}</span>
+
+    <div style="border-top: 1px solid #e5e7eb; padding-top: 14px;">
+        <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Expected Performance</div>
+        <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
+            <tr style="border-bottom: 1px solid #e5e7eb;">
+                <td style="padding: 8px 4px;">Body weight per bird</td>
+                <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
+                    <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
+                        {expected_weight:.3f} kg
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td style="padding: 8px 4px;">Flock live weight</td>
+                <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
+                    <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
+                        {flock_weight:,.1f} kg
+                    </span>
+                </td>
+            </tr>
+        </table>
     </div>
-</div>
-
-<div style="margin-bottom: 16px;">
-    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Breakdown</div>
-    <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
-        <tr style="border-bottom: 1px solid #e5e7eb;">
-            <td style="padding: 10px 4px;"><strong>Starter</strong></td>
-            <td style="padding: 10px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
-            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{starter_bags_display} bags</td>
-        </tr>
-        <tr style="border-bottom: 1px solid #e5e7eb;">
-            <td style="padding: 10px 4px;"><strong>Finisher</strong></td>
-            <td style="padding: 10px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
-            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #1e293b;">{finisher_bags_display} bags</td>
-        </tr>
-        <tr>
-            <td style="padding: 10px 4px; font-weight: 700;">TOTAL</td>
-            <td style="padding: 10px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
-            <td style="padding: 10px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #166534;">{total_bags:.1f}</td>
-        </tr>
-    </table>
-</div>
-
-<div style="margin-bottom: 16px; background: #eff6ff; padding: 14px 18px; border-radius: 10px; border-left: 4px solid #3b82f6;">
-    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Feed Cost</div>
-    <div style="font-size: 32px; font-weight: 900; color: white;">
-        <span style="display: inline-block; background: #1e40af; color: white; border-radius: 12px; padding: 4px 20px;">
-            {currency_symbol}{total_cost:,.0f}
-        </span>
+
+    <div style="margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 14px;">
+        <div style="font-size: 13px; color: #6b7280; font-weight: 600; margin-bottom: 8px;">Share Results:</div>
+        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+            <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
+                <button style="background: #25D366; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">WhatsApp</button>
+            </a>
+            <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
+                <button style="background: #ea4335; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Email</button>
+            </a>
+            <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
+                <button style="background: #1877f2; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Facebook</button>
+            </a>
+            <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
+                <button style="background: #000000; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Twitter/X</button>
+            </a>
+        </div>
     </div>
-    <div style="color: #6b7280; font-size: 14px; margin-top: 4px;">
-        Approximately {rounded_bags} bags x {currency_symbol}{price_per_bag:,.0f} per bag
+
+    <div style="margin-top: 14px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 10px;">
+        Estimate based on {breed} benchmark. Actual results may vary.
     </div>
-</div>
-
-<div style="border-top: 1px solid #e5e7eb; padding-top: 14px;">
-    <div style="font-size: 13px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Expected Performance</div>
-    <table style="width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px;">
-        <tr style="border-bottom: 1px solid #e5e7eb;">
-            <td style="padding: 8px 4px;">Body weight per bird</td>
-            <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
-                <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
-                    {expected_weight:.3f} kg
-                </span>
-            </td>
-        </tr>
-        <tr>
-            <td style="padding: 8px 4px;">Flock live weight</td>
-            <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px;">
-                <span style="display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 14px;">
-                    {flock_weight:,.1f} kg
-                </span>
-            </td>
-        </tr>
-    </table>
-</div>
-
-<div style="margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 14px;">
-    <div style="font-size: 13px; color: #6b7280; font-weight: 600; margin-bottom: 8px;">Share Results:</div>
-    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-        <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-            <button style="background: #25D366; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">WhatsApp</button>
-        </a>
-        <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-            <button style="background: #ea4335; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Email</button>
-        </a>
-        <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-            <button style="background: #1877f2; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Facebook</button>
-        </a>
-        <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-            <button style="background: #000000; color: white; padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Twitter/X</button>
-        </a>
     </div>
-</div>
-
-<div style="margin-top: 14px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 10px;">
-    Estimate based on {breed} benchmark. Actual results may vary.
-</div>
-</div>
-"""
+    """
 
     return html, f"✅ Calculation saved for {email.strip().lower()}."
 
@@ -1053,72 +1053,6 @@ button { min-height: 48px !important; }
     padding: 15px; 
     background: #fffbeb; 
 }
-
-/* ============================================================
-   MOBILE VISIBILITY FIX - Make numbers bold and dark
-   ============================================================ */
-
-/* Quick Answer numbers */
-.quick-answer-number {
-    font-size: 28px !important;
-    font-weight: 900 !important;
-    color: #166534 !important;
-}
-
-.quick-answer-approx {
-    font-size: 24px !important;
-    font-weight: 800 !important;
-    color: #1e40af !important;
-}
-
-/* Feed Breakdown numbers */
-.feed-table td:last-child {
-    font-weight: 700 !important;
-    color: #1e293b !important;
-}
-
-/* Feed Cost number */
-.feed-cost-value {
-    font-size: 30px !important;
-    font-weight: 900 !important;
-    color: #1e40af !important;
-}
-
-/* Expected Performance numbers */
-.performance-value {
-    font-weight: 700 !important;
-    color: #1e293b !important;
-}
-
-/* All number values in results */
-.answer-box strong, 
-.answer-box b {
-    font-weight: 700 !important;
-    color: #1e293b !important;
-}
-
-/* Make all table values darker */
-table td {
-    color: #1e293b !important;
-}
-
-/* Specific to the quick answer area */
-div[style*="background: #f0fdf4"] strong,
-div[style*="background: #f0fdf4"] b {
-    color: #166534 !important;
-    font-weight: 700 !important;
-}
-
-div[style*="background: #f0fdf4"] .big-number {
-    color: #166534 !important;
-    font-weight: 800 !important;
-}
-
-/* The approx purchase number */
-div[style*="color: #1e40af"] {
-    color: #1e40af !important;
-    font-weight: 800 !important;
-}
 """
 
 # ============================================================