/* Final policy dialog layer. Keep this file after styles.css. */
html body .legal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10020 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 4vw, 48px) !important;
  background: rgba(17, 24, 32, 0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html body .legal-overlay[hidden] {
  display: none !important;
}

html body .legal-dialog,
html body .legal-dialog.open {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, calc(100vw - 40px)) !important;
  max-height: min(76vh, 720px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  text-align: center !important;
}

html body .legal-dialog:not(.open) {
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .legal-dialog.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body .legal-head,
html body .legal-head > div {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .legal-head {
  position: relative !important;
  padding: 28px 72px 20px !important;
}

html body .legal-head span,
html body .legal-head strong,
html body .legal-body,
html body .legal-body p {
  text-align: center !important;
}

html body .legal-head button {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
}

html body .legal-body {
  display: grid !important;
  justify-items: center !important;
  padding: 26px 34px 34px !important;
}

html body .legal-body p {
  max-width: 460px !important;
  margin: 0 auto !important;
}

@media (max-width: 620px) {
  html body .legal-dialog,
  html body .legal-dialog.open {
    width: min(420px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 36px) !important;
  }

  html body .legal-head {
    padding: 24px 62px 18px !important;
  }

  html body .legal-head button {
    top: 18px !important;
    right: 18px !important;
  }

  html body .legal-body {
    padding: 22px 24px 30px !important;
  }
}