.push-permission {
  position: fixed;
  inset: 0;
  width: min(420px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  overflow-y: auto;
  padding: 30px 26px 22px;
  border: 1px solid var(--rose-tint);
  border-radius: 24px;
  background: var(--background);
  color: var(--dark);
  box-shadow: 0 20px 65px rgba(31, 16, 22, .18);
  text-align: center;
  font-family: var(--sans);
}
.push-permission::backdrop { background: rgba(31, 16, 22, .25); }
.push-permission-logo { margin: 0 auto 16px; border-radius: 14px; }
.push-permission h2 { margin: 0 0 16px; font: 34px/1.12 var(--serif); }
.push-permission-bell { display: inline-block; width: 26px; height: 26px; vertical-align: -2px; }
.push-permission p { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.push-permission-actions { display: grid; gap: 8px; }
.push-permission-actions button { font: 700 14px var(--sans); cursor: pointer; }
.push-permission-actions .button { border: 0; }
.push-permission-later { min-height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--primary-dark); }
.push-permission-later:hover { background: var(--rose-tint); }
.push-permission button:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 3px; }
.push-permission button:disabled { opacity: .65; cursor: wait; }
.push-permission h2 + .push-permission-subtitle { margin: -6px 0 12px; color: var(--dark); font-size: 16px; }
.push-permission .push-permission-feedback { color: var(--primary-dark); font-size: 13px; }
html:has(.push-permission[open]) { overflow: hidden; }
/* Notificações page: once active, turning off is a secondary action. */
.button.is-push-active { border: 1px solid var(--rose-tint); background: transparent; color: var(--primary-dark); box-shadow: none; }