refactor: improve InfoBox and NoteBox components with collapsible design

- Convert InfoBox to collapsible details element with chevron indicators
- Add internationalized default title support for InfoBox
- Update NoteBox styling to match new design system
- Replace custom alert styling with consistent border-based design
- Add text-base class to fieldset legends for uniform sizing
- Remove className prop from InfoBox and NoteBox (no longer needed)
- Update translations for clearer payment instruction descriptions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/ui/NoteBox.tsx

@@ -1,7 +1,8 @@
+import { CogIcon } from "@heroicons/react/24/outline";
 import { FC, ReactNode } from "react";
 
-export const NoteBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
-    <div className={`alert max-w-md flex flex-row items-start gap-[.8rem] ml-1 ${className}`}>
-        <span className="w-6 h-6 text-xl">⚠️</span>
-        <span className="text-left">{children}</span>
-    </div>
+export const NoteBox: FC<{ children: ReactNode }> = ({ children }) =>
+
+<div className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
+  <div className="mt-2 italic text-sm"><CogIcon className="w-6 h-6 inline mt-[-.3em] text-blue-400" /> {children}</div>
+</div>