/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: Poppins-Regular;
  src: url('Poppins-Regular.2e2e78ae2e650600e21b.woff2') format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Poppins-SemiBold;
  src: url('Poppins-SemiBold.6d2d57a260e2c11be328.woff2') format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Poppins-Bold;
  src: url('Poppins-Bold.843381ce6a6311e05d7d.woff2') format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Sacramento-Regular";
  src: url('Sacramento-Regular.ffb60fa0a09d0d5cb97c.woff2') format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SeaweedScript-Regular";
  src: url('SeaweedScript-Regular.9bc072d222d7d96f8faf.woff2') format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#container {
  flex: 1;
  height: var(--zype-viewport-height, 100dvh);
  max-height: 100dvh;
  overflow: auto;
  background-color: #0d0d0d;
}

html.merchant-mode #leftPanel,
html.mobile-mode #leftPanel {
  display: none !important;
}

html.mobile-mode body {
  background-color: #0d0d0d;
}

html.mobile-mode #container,
html.mobile-mode #parentRoot,
html.mobile-mode #root {
  min-height: 100dvh;
  min-height: var(--zype-viewport-height, 100dvh);
}

html.mobile-mode #container {
  overflow: hidden;
}

html.mobile-mode.landscape-mode body {
  height: 100%;
}

html.mobile-mode.landscape-mode #container {
  height: var(--zype-visible-height, 100dvh);
  max-height: var(--zype-visible-height, 100dvh);
}
html.mobile-mode.landscape-mode #rootPanel {
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  max-height: none;
}
html.mobile-mode.landscape-mode #parentRoot,
html.mobile-mode.landscape-mode #root {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}
html.mobile-mode.landscape-mode .parentRoot.fullBleed {
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
}
html.mobile-mode.landscape-mode .desktopRoot.fullBleed {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.parentRoot {
  position: relative;
  background-color: #0d0d0d;
  height: 100%;
  display: flex;
  padding-left: 10vw;
  padding-right: 10vw;
  align-items: center;
  justify-content: center;
}
.desktopRoot {
  width: 375px;
  height: 677px;
  -webkit-overflow-scrolling: touch;
  margin: 0px;
  padding: 0px;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  overflow: hidden;
  border: double 1em transparent;
  border-radius: 20px;
  border-width: 0.5px;
  background-image:
    linear-gradient(#0d0d0d, #0d0d0d),
    linear-gradient(to bottom, #434343 33%, #fff 51%, transparent 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.desktopRoot.smallScreen {
  width: 350px;
  height: 600px;
}
.desktopRoot.mediumScreen {
  width: 350px;
  height: 620px;
}
/* Mobile browsers render the app edge to edge instead of inside the phone frame.
   Declared after the size variants so it wins on equal specificity. */
.parentRoot.fullBleed {
  width: 100%;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}
.desktopRoot.fullBleed {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.desktopRootPanel {
  height: var(--zype-viewport-height, 100dvh);
  max-height: 100dvh;
  display: flex;
}
.desktopRootPanel.desktop {
  align-items: center;
  justify-content: center;
}
/* The phone frame can be taller than the visual viewport, so #container
   scrolls. Don't lock the split shell to 100dvh or the left panel background
   stops while the black container shows below it. */
html.has-left-panel #rootPanel.desktopRootPanel {
  height: auto;
  min-height: var(--zype-viewport-height, 100dvh);
  max-height: none;
  align-items: stretch;
}
.sidePanelDesktopMode {
  visibility: visible;
  padding-left: 10vw;
  width: 100%;
  flex-direction: column;
  background-color: #3e3f3e;
}
html.has-left-panel #leftPanel {
  height: auto;
  max-height: none;
  align-self: stretch;
}
html.has-left-panel .parentRoot {
  height: auto;
  min-height: var(--zype-viewport-height, 100dvh);
}
.gradientText {
  background: linear-gradient(to left, #e94578, #fc8440);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
  background-clip: text;
}
.leftPanelHeader {
  display: flex;
  flex-direction: column;
}
.leftPanelFooter {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 5vh;
}
.zypeLogoContainer {
  height: 8vh;
}
.cardImageContainer {
  flex: 1;
}
.storeButtons {
  display: flex;
  flex-direction: row;
}
.socialLinks {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 25px;
}
.iconLink {
  display: flex;
  align-items: center;
}
.socialIcons {
  margin-right: 3.6vh;
  width: 23px;
  height: 23px;
}
/* The width/height attributes on these images exist only to reserve space before
   they load, so height must stay auto or the attribute value wins over the ratio. */
.storeButton {
  margin-right: 2.6vh;
  width: 140px;
  height: auto;
}
.imagesItem.lastItem,
.storeButton.lastItem {
  margin-right: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: calc(100% + env(safe-area-inset-top));
  /* Overridden with a pixel value on mobile so the shell tracks the visible
     viewport instead of the taller URL-bar-included first measurement. */
  --zype-viewport-height: 100dvh;
}
*:focus {
  outline: none;
}
body {
  touch-action: pan-y;
  display: flex;
  overflow: hidden;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: scrollbar;
  margin: 0;
  padding: 0;
}
#loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #444444;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  position: absolute;
  inset: 0;
  margin: auto;
}
.imagesContainer {
  display: flex;
  flex-direction: row;
  margin-top: 45px;
}
.imagesItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 5vw;
  height: 120px;
}
.cardImage {
  width: 70px;
  height: auto;
}
.cardTitle {
  color: #fff;
  font-size: 12px;
  font-family: Poppins-SemiBold;
  margin-top: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cardSubTitle {
  color: #fff;
  font-size: 12px;
  font-family: Poppins-Regular;
  margin-top: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subTitle {
  color: #fff;
  font-size: 35px;
  font-family: Poppins-SemiBold;
  margin: 25px 0 0;
}
.title {
  color: #fff;
  font-size: 58px;
  margin-top: 15px;
  font-family: Poppins-SemiBold;
}
.zypeLogo {
  width: 100px;
  height: auto;
  margin-top: 5vh;
}

@media only screen and (max-width: 900px) {
  #leftPanel {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .subTitle {
    font-size: 28px;
  }
  .title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 1280px) {
  .sidePanelDesktopMode {
    padding-left: 5vw;
  }
}
@media only screen and (max-height: 620px) {
  .parentRoot {
    align-items: flex-start;
  }
  .cardImage {
    width: 55px;
  }
  .subTitle {
    font-size: 28px;
  }
  .title {
    font-size: 48px;
  }
  .zypeLogo {
    width: 80px;
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}