/* Persistent SPA shell: the sidebar never leaves the DOM during page transitions. */
html, body { min-height: 100%; }
body { overflow-x: hidden; }
.mz-spa-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
  background: #0e0e10;
}
.mz-page-host {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
.mz-spa-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  transform: none;
  will-change: auto;
}
.mz-spa-page > .sc-host { min-height: 100vh; }
.mz-spa-page--transitioning {
  position: absolute;
  will-change: transform, opacity;
  inset: 0 auto auto 0;
}
.mz-spa-page--incoming {
  transform: translateX(100%);
}
.mz-spa-page--animate {
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), opacity .4s ease;
}
.mz-page-host.mz-transitioning { overflow: hidden; }

/* The design-component templates still contain their original flex wrapper.
   In SPA mode the persistent sidebar sits outside it, so the wrapper only owns the page. */
.mz-spa-page .ds-dff5d7bedb,
.mz-spa-page .ds-2764777962 {
  width: 100%;
  min-width: 0;
}

/* Login is full-width and intentionally has no navigation rail. */
body.mz-route-login .mz-sidebar,
body.mz-route-login .mz-mobile-topbar,
body.mz-route-login .mz-sidebar-backdrop { display: none !important; }
body.mz-route-login .mz-page-host { width: 100%; padding-top: 0; }

/* Desktop sidebar stays fully open. Mobile uses the drawer/top-bar defined in design-sidebar.css. */
@media (max-width: 900px) {
  .mz-spa-shell {
    display: block;
    min-height: 100dvh;
  }

  .mz-page-host {
    width: 100%;
    min-height: 100dvh;
    padding-top: var(--mz-mobile-bar-h, 58px);
    box-sizing: border-box;
  }

  .mz-spa-page {
    min-height: calc(100dvh - var(--mz-mobile-bar-h, 58px));
  }

  .mz-spa-page > .sc-host {
    min-height: calc(100dvh - var(--mz-mobile-bar-h, 58px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-spa-page--animate { transition-duration: .01ms !important; }
}

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  transition: opacity .26s ease;
}


/* Pricing layout: center the plan surface in the available page area. */
.mz-spa-page[data-route="/pricing"] .ds-2bfada348d {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Checkout must stay centered in the viewport and its body must be scrollable on short screens. */
.mz-spa-page[data-route="/pricing"] .ds-a7c0c2de45 {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: min(88vh, 820px);
}
.mz-spa-page[data-route="/pricing"] .ds-ad5873ab31 {
  min-height: 0;
  overscroll-behavior: contain;
}
@media (max-width: 900px) {
  .mz-spa-page[data-route="/pricing"] .ds-a7c0c2de45 { width: min(520px, calc(100vw - 24px)); }
}