refactor(app): migrate shared styles to tailwind

src/app/subscription/components/__tests__/tailwind-components.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import { SubscriptionCtaButton } from "../subscription-cta-button";
 import { SubscriptionPaymentMethod } from "../subscription-payment-method";
 import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
+import { StripePaymentDialog } from "../stripe-payment-dialog";
 
 describe("subscription Tailwind components", () => {
   it("renders SubscriptionCtaButton with loading state", () => {
@@ -68,4 +69,19 @@ describe("subscription Tailwind components", () => {
     expect(html).toContain("-translate-y-0.5");
     expect(html).toContain("/images/subscription/gcash-logo.svg");
   });
+
+  it("renders StripePaymentDialog fallback with Tailwind dialog utilities", () => {
+    const html = renderToStaticMarkup(
+      <StripePaymentDialog
+        clientSecret="client-secret"
+        onClose={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('role="alertdialog"');
+    expect(html).toContain("fixed inset-0");
+    expect(html).toContain("max-w-(--dialog-wide-max-width,420px)");
+    expect(html).toContain("Payment unavailable");
+    expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
+  });
 });