Restyle cheap flights cards to prevent name/price overlap

Use stacked layout: city name on top, country + price on a second row.
Removes the badge and horizontal layout that caused truncation issues.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/SearchPage.tsx

@@ -303,20 +303,12 @@ export default function SearchPage({ geo }: Props) {
                 <button
                   key={dest.iata}
                   onClick={() => handleDestinationClick(dest)}
-                  className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-3 text-left hover:shadow-md transition-shadow cursor-pointer"
+                  className="rounded-xl border border-gray-200 bg-white px-4 py-3 text-left hover:shadow-md transition-shadow cursor-pointer"
                 >
-                  {/* City initial badge */}
-                  <div className={`h-10 w-10 rounded-lg flex items-center justify-center text-white font-semibold text-sm flex-shrink-0 ${getBadgeColor(dest.iata)}`}>
-                    {dest.city.charAt(0)}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-sm font-medium text-gray-900">
-                      {dest.city}
-                    </div>
-                    <div className="text-xs text-gray-500">{dest.country}</div>
-                  </div>
-                  <div className="text-sm font-medium text-gray-900 flex-shrink-0 ml-1">
-                    {formatPrice(dest.price_usd)}
+                  <div className="text-sm font-medium text-gray-900">{dest.city}</div>
+                  <div className="flex items-center justify-between mt-0.5">
+                    <span className="text-xs text-gray-500">{dest.country}</span>
+                    <span className="text-sm font-medium text-[#1a73e8]">{formatPrice(dest.price_usd)}</span>
                   </div>
                 </button>
               ))}