export const stripePaymentDialogStyles = {
  overlay:
    "fixed inset-0 z-70 flex items-center justify-center bg-[rgba(0,0,0,0.5)] pb-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,20px)+var(--app-safe-top,0))]",
  dialog:
    "max-h-[calc(var(--app-visible-height,100dvh)-calc(var(--dialog-safe-margin,20px)*2))] w-full max-w-(--dialog-wide-max-width,420px) overflow-y-auto rounded-(--responsive-card-radius,32px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,18px) pb-(--responsive-card-padding,18px) pt-(--responsive-card-padding-lg,24px) shadow-[0_18px_40px_rgba(0,0,0,0.16)]",
  header: "mb-(--page-section-gap,18px) text-left",
  title:
    "m-0 mb-[clamp(7px,1.481vw,8px)] text-(length:--responsive-page-title,22px) font-bold leading-[1.2] text-text-foreground",
  content:
    "m-0 text-(length:--responsive-body,14px) leading-normal text-[#393939]",
  form: "flex flex-col gap-(--page-section-gap,18px)",
  error:
    "m-0 text-(length:--responsive-caption,13px) leading-[1.45] text-[#c0392b]",
  actions: "flex w-full gap-(--spacing-md,12px)",
  button:
    "min-h-(--pwa-button-height,44px) flex-auto cursor-pointer rounded-bottom-sheet border-0 text-(length:--responsive-body,16px) font-semibold disabled:cursor-not-allowed disabled:opacity-55",
  secondary: "bg-(--color-text-secondary,#9e9e9e) text-(--color-page-background,#ffffff)",
  primary:
    "bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-(--color-page-background,#ffffff)",
} as const;
