/* Load after the storefront stylesheet. Only the purchase-terms modal changes. */
#overlay-root .product-terms-dialog {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  overflow-wrap: anywhere;
}

#overlay-root .product-terms-dialog > :not(.terms-dialog-scroll) {
  flex: 0 0 auto;
  min-width: 0;
}

#overlay-root .product-terms-dialog > .terms-dialog-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#overlay-root .product-terms-dialog > .terms-reading-action {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The backdrop centers the dialog, so reserve equal space on both edges. */
@supports (padding: max(0px, 1px)) {
  #overlay-root .product-terms-dialog {
    --terms-edge-y: max(24px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    --terms-edge-x: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    max-width: min(490px, calc(100vw - var(--terms-edge-x) - var(--terms-edge-x)));
    max-height: calc(100vh - var(--terms-edge-y) - var(--terms-edge-y));
    max-height: calc(100dvh - var(--terms-edge-y) - var(--terms-edge-y));
  }
}

/* Give the terms usable space on short phones and in landscape. */
@media (max-height: 480px) {
  #overlay-root .product-terms-dialog {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #overlay-root .product-terms-dialog > .dialog-eyebrow {
    margin-bottom: 6px;
    padding-right: 30px;
  }

  #overlay-root .product-terms-dialog > h2 {
    margin-bottom: 8px;
  }

  #overlay-root .product-terms-dialog > .terms-reading-status {
    margin-top: 6px;
  }

  #overlay-root .product-terms-dialog > .terms-dialog-scroll {
    margin-top: 6px;
  }

  #overlay-root .product-terms-dialog > .terms-reading-action {
    margin-top: 12px;
  }
}