:root {
  --push-modal-bg: #ffffff;
  --push-modal-text: #111827;
  --push-modal-muted: rgba(17, 24, 39, 0.7);
  --push-modal-border: rgba(17, 24, 39, 0.14);
  --push-modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);

  --push-backdrop-dim: rgba(0, 0, 0, 0.4);
  --push-backdrop-bleed: 4px;
}

:root[data-bs-theme='dark'] {
  --push-modal-bg: var(--flex-ebony-600, #131530);
  --push-modal-text: var(--flex-text, #f2f3fa);

  --push-modal-muted: rgba(242, 243, 250, 0.65);
  --push-modal-border: var(--flex-border, rgba(255, 255, 255, 0.14));
  --push-modal-shadow: var(--bs-box-shadow, 0 12px 36px rgba(0, 0, 0, 0.55));

  --push-backdrop-dim: rgba(0, 0, 0, 0.62);
  --push-backdrop-bleed: 4px;
}

.flex-push-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.flex-push-modal.d-none {
  display: none !important;
}

.flex-push-backdrop {
  position: absolute;
  inset: 0;
  background: var(--push-backdrop-dim);

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.push-onboard-open {
  overflow: hidden;
}

.flex-push-dialog {
  position: relative;
  width: min(520px, 100%);
  background: var(--push-modal-bg);
  border: 1px solid var(--push-modal-border);
  border-radius: 18px;
  box-shadow: var(--push-modal-shadow);
  padding: 16px 16px 14px;
  color: var(--push-modal-text);
}

.flex-push-dialog .text-muted,
.flex-push-dialog .small.text-muted {
  color: var(--push-modal-muted) !important;
}

.flex-push-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.flex-push-sub {
  margin-bottom: 0.25rem;
}

.flex-push-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--push-modal-muted);
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
}

.flex-push-close:hover {
  color: var(--push-modal-text);
}
.flex-push-close:active {
  transform: scale(0.98);
}

#push-onboarding .flex-push-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0.5px);

  bottom: max(
    0px,
    calc(
      var(
          --flex-bottom-nav-measured,
          var(--flex-bottom-nav-cover-h, var(--flex-bottom-nav-total-h, 0px))
        ) + var(--flex-backdrop-overlap, 2px) - var(--push-backdrop-bleed)
    )
  ) !important;
}