/* One overlay policy for the public website, host app and native WebView. */
[data-overlay-ancestor] {
    z-index: auto !important;
    isolation: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    overflow: visible !important;
    clip-path: none !important;
}

/* Fallback before the first observer pass. Runtime assigns opening order. */
.modal { z-index: 2147483602; }
.modal-backdrop { z-index: 2147483601; }

/* Long forms scroll inside the viewport, including after mobile browser chrome
   changes height. Do not constrain every modal-content: several long forms use
   the outer modal as their scroll container instead of Bootstrap's modal-body. */
.modal[data-overlay-active] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.modal[data-overlay-active] > .modal-dialog {
    max-height: none;
}

.modal[data-overlay-active] .modal-footer {
    flex-shrink: 0;
}

/* The calendar action form deliberately has a pinned footer and scrolling body. */
.calendar-action-overlay[data-overlay-active] {
    padding: 0 !important;
    overflow: hidden !important;
}
.calendar-action-overlay[data-overlay-active] > .calendar-action-dialog {
    height: 100vh;
    height: 100dvh;
}
.calendar-action-overlay[data-overlay-active] .modal-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

/* Custom dialogs which do not use Bootstrap also need an accessible scroll end. */
:is(.cs1-popup, .form-popup, .calendar-missing-price-sheet,
    .month-day-click-popover, .calendar-sync-instruction-modal,
    .calendar-disconnect-modal)[data-overlay-active],
[data-overlay-active] > :is(.sp-modal, .feature-note-dialog, .pts-delete-dialog) {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    box-sizing: border-box;
}