/* Storefront loading surface. */
.foodord-page-loader,
.foodord-page-loader * {
  box-sizing: border-box;
}

.foodord-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: grid;
  place-items: center;
  visibility: hidden;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms;
}

html.foodord-page-loader-active .foodord-page-loader {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

html.foodord-page-loader-leaving .foodord-page-loader {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms;
}

.foodord-page-loader__animation {
  position: relative;
  width: 42px;
  height: 36px;
  contain: layout paint style;
}

.foodord-page-loader__dot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  will-change: transform;
}

.foodord-page-loader__dot--one {
  animation: foodord-page-loader-dot-one 1.5s linear infinite;
}

.foodord-page-loader__dot--two {
  animation: foodord-page-loader-dot-two 1.5s linear infinite;
}

.foodord-page-loader__dot--three {
  animation: foodord-page-loader-dot-three 1.5s linear infinite;
}

@keyframes foodord-page-loader-dot-one {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  8.333% {
    transform: translate3d(8px, -18px, 0);
  }

  16.667% {
    transform: translate3d(16px, -26px, 0);
  }

  25% {
    transform: translate3d(24px, -18px, 0);
  }

  33.333% {
    transform: translate3d(32px, 0, 0);
  }

  50%,
  66.667% {
    transform: translate3d(16px, 0, 0);
  }

  83.333% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes foodord-page-loader-dot-two {
  0%,
  100% {
    transform: translate3d(16px, 0, 0);
  }

  16.667%,
  33.333% {
    transform: translate3d(0, 0, 0);
  }

  41.667% {
    transform: translate3d(8px, -18px, 0);
  }

  50% {
    transform: translate3d(16px, -26px, 0);
  }

  58.333% {
    transform: translate3d(24px, -18px, 0);
  }

  66.667% {
    transform: translate3d(32px, 0, 0);
  }

  83.333% {
    transform: translate3d(16px, 0, 0);
  }
}

@keyframes foodord-page-loader-dot-three {
  0%,
  100% {
    transform: translate3d(32px, 0, 0);
  }

  16.667%,
  33.333% {
    transform: translate3d(16px, 0, 0);
  }

  50%,
  66.667% {
    transform: translate3d(0, 0, 0);
  }

  75% {
    transform: translate3d(8px, -18px, 0);
  }

  83.333% {
    transform: translate3d(16px, -26px, 0);
  }

  91.667% {
    transform: translate3d(24px, -18px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .foodord-page-loader__dot {
    animation: none;
  }
}