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/InfoBox.tsx

@@ -1,9 +1,23 @@
+import { ChevronDownIcon, ChevronUpIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { useTranslations } from "next-intl";
 import { FC, ReactNode } from "react";
 
-export const InfoBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
-    <div className={`alert max-w-md flex flex-row items-start gap-[0.5rem] ${className}`}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <span className="text-left">{children}</span>
-    </div>
+export const InfoBox: FC<{
+  children: ReactNode;
+  title?: string;
+}> = ({ children, title }) => {
+
+    const t = useTranslations("info-box");
+
+  return (
+    <details className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
+      <summary className="flex cursor-pointer items-center justify-between">
+        <span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
+        <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
+        <span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
+      </summary>
+      <div className="mt-2 italic text-sm text-gray-400">{children}</div>
+    </details>
+  )
+}
+