.checkout-view {
  background-color: var(--background-light-blue-color);
  isolation: isolate;
}

/* Loader shown until the checkout React app mounts. The mount div already fills the space
   above the footer via the .spa-main flex column, so the placeholder just fills it and
   centres the loader instead of sitting in its top-left corner.

   Plain CSS on purpose: the SPA layout (application_spa) does not load the Tailwind build,
   so utility classes like `flex justify-center items-center` are inert here. */
.checkout-view__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}