/* Shared opaque modal treatment. Keep the backdrop separate from the panel surface. */
.modal-backdrop:not([hidden]) {
  z-index: 100 !important;
}

.login-modal-backdrop:not([hidden]) {
  z-index: 110 !important;
}

.modal-backdrop:not([hidden]) > .modal {
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto;
  padding: clamp(16px, 4vw, 22px) !important;
}

.modal-backdrop:not([hidden]) > .modal h1,
.modal-backdrop:not([hidden]) > .modal h2,
.modal-backdrop:not([hidden]) > .modal h3 {
  font-size: clamp(18px, 5.8vw, 26px) !important;
  line-height: 1.15;
}

.modal-backdrop:not([hidden]) > .modal p,
.modal-backdrop:not([hidden]) > .modal label,
.modal-backdrop:not([hidden]) > .modal input,
.modal-backdrop:not([hidden]) > .modal select,
.modal-backdrop:not([hidden]) > .modal textarea,
.modal-backdrop:not([hidden]) > .modal button,
.modal-backdrop:not([hidden]) > .modal a {
  font-size: clamp(12px, 3.5vw, 14px);
}

.modal-backdrop:not([hidden]) {
  background: rgba(9, 16, 38, .72) !important;
  opacity: 1 !important;
  isolation: isolate;
}

.modal-backdrop:not([hidden]) > .modal {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--surface, #fff) !important;
  background-color: var(--surface, #fff) !important;
  color: var(--ink, #101b4d) !important;
  border: 1px solid var(--line, #dfe5f3) !important;
  isolation: isolate;
}

/* Knowledgebase process dialogs use a dedicated panel class, but must behave
   like every other site dialog: solid panel, readable content, and no bleed
   through from the page underneath. */
.process-modal-backdrop:not([hidden]) {
  z-index: 100 !important;
  background: rgba(9, 16, 38, .72) !important;
  opacity: 1 !important;
  isolation: isolate;
}

.process-modal-backdrop:not([hidden]) > .process-modal {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--surface, #fff) !important;
  background-color: var(--surface, #fff) !important;
  color: var(--ink, #101b4d) !important;
  border: 1px solid var(--line, #dfe5f3) !important;
  box-shadow: 0 24px 70px rgba(20, 30, 90, .3) !important;
  isolation: isolate;
}

.process-modal-backdrop:not([hidden]) > .process-modal h2,
.process-modal-backdrop:not([hidden]) > .process-modal h3 {
  color: var(--ink, #101b4d) !important;
}

.process-modal-backdrop:not([hidden]) > .process-modal p {
  color: var(--muted, #4e5a78);
}

.modal-backdrop:not([hidden]) > .modal h1,
.modal-backdrop:not([hidden]) > .modal h2,
.modal-backdrop:not([hidden]) > .modal h3,
.modal-backdrop:not([hidden]) > .modal label {
  color: var(--ink, #101b4d);
}

.modal-backdrop:not([hidden]) > .data-breach-modal.is-result {
  background: #050507 !important;
  background-color: #050507 !important;
  color: #f7f7fa !important;
  border-color: #27303d !important;
}

.modal-backdrop:not([hidden]) > .data-breach-modal.is-result h1,
.modal-backdrop:not([hidden]) > .data-breach-modal.is-result h2,
.modal-backdrop:not([hidden]) > .data-breach-modal.is-result h3 {
  color: #f7f7fa !important;
}

.modal-backdrop:not([hidden]) > .data-breach-modal.is-result .modal-close {
  color: #aeb2bd !important;
}

@media (max-width: 800px) {
  .modal-backdrop:not([hidden]) {
    padding: 12px !important;
  }

  .modal-backdrop:not([hidden]) > .modal {
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
  }

  .process-modal-backdrop:not([hidden]) {
    padding: 12px !important;
    overflow: hidden;
  }

  .process-modal-backdrop:not([hidden]) > .process-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
  }
}