:root {
  --pp-pwa-lock-blue: #272b58;
  --pp-pwa-lock-logo: url("/billing/assets/branding/Premium-Productions-Logo.svg");
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.portrait-lock-fallback,
html.portrait-upside-down-fallback,
html.portrait-lock-fallback body,
html.portrait-upside-down-fallback body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.portrait-lock-fallback body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform: none;
}

html.portrait-lock-fallback body > * {
  visibility: hidden;
}

html.portrait-upside-down-fallback body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  transform: rotate(180deg);
  transform-origin: center center;
  -webkit-overflow-scrolling: touch;
}

html.portrait-upside-down-fallback::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--pp-pwa-lock-blue);
}

html.portrait-lock-fallback::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    var(--pp-pwa-lock-logo) center calc(50% - 108px) / clamp(150px, 30vw, 260px) auto no-repeat,
    var(--pp-pwa-lock-blue);
}

html.portrait-lock-fallback::after {
  content: "PORTRAIT ONLY\A TURN YOUR PHONE UPRIGHT";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 116px 30px 30px;
  color: #fff;
  font-family: "Bryson", "Anton", "Arial Black", system-ui, sans-serif;
  font-size: clamp(34px, 8vw, 70px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  white-space: pre-line;
}

@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: max(16px, 1rem);
  }
}