/* DashCash universal modal overflow handling.
   Load after page/theme CSS in public, customer and admin layouts.
   Scrollbars appear only when modal content exceeds the available viewport. */
:root {
    --dc-modal-viewport-gap: 32px;
}

/* Native dialogs and custom modal panels. */
:is(
    dialog[open],
    [role="dialog"][aria-modal="true"],
    [data-modal-panel],
    .dc-modal-panel,
    .dc-modal-dialog,
    .dc-modal-content,
    .dc-account-modal-dialog,
    .dc-beneficiary-modal-panel,
    .dc-support-composer-dialog,
    .dc-referral-dialog,
    .dc-transaction-dialog
) {
    max-height: calc(100vh - var(--dc-modal-viewport-gap));
    max-height: calc(100dvh - var(--dc-modal-viewport-gap));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9aabb8 #eef2f0;
}

/* The beneficiary editor panel previously clipped content with overflow:hidden. */
body.dc-user .dc-beneficiary-modal-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Bootstrap modals: keep the header/footer visible and scroll the body when long. */
.modal.show {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal.show .modal-body {
    min-height: 0;
    max-height: calc(100vh - 12rem);
    max-height: calc(100dvh - 12rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9aabb8 #eef2f0;
}
.modal.show .modal-header,
.modal.show .modal-footer {
    flex: 0 0 auto;
}

/* Magnific Popup is used by many admin add/edit forms. Only inline/AJAX dialogs
   are changed; image/video lightboxes keep their original sizing behavior. */
.mfp-wrap.mfp-inline-holder,
.mfp-wrap.mfp-ajax-holder {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mfp-wrap.mfp-inline-holder .mfp-container,
.mfp-wrap.mfp-ajax-holder .mfp-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 24px 12px;
}
.mfp-wrap.mfp-inline-holder .mfp-container::before,
.mfp-wrap.mfp-ajax-holder .mfp-container::before {
    display: none !important;
}
.mfp-wrap.mfp-inline-holder .mfp-content,
.mfp-wrap.mfp-ajax-holder .mfp-content {
    display: block;
    box-sizing: border-box;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9aabb8 #eef2f0;
    margin: auto;
}

/* Lightcase inline/AJAX content. Image and video lightboxes are not affected. */
html[data-lc-type="inline"] #lightcase-case,
html[data-lc-type="ajax"] #lightcase-case,
html[data-lc-type="error"] #lightcase-case {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html[data-lc-type="inline"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap,
html[data-lc-type="ajax"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap,
html[data-lc-type="error"] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* SweetAlert and jConfirm dialogs, if a long confirmation/details body is used. */
.swal2-popup,
.jconfirm .jconfirm-box {
    box-sizing: border-box;
    max-height: calc(100vh - var(--dc-modal-viewport-gap));
    max-height: calc(100dvh - var(--dc-modal-viewport-gap));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9aabb8 #eef2f0;
}

/* Consistent visible scrollbar treatment where the platform displays scrollbars. */
:is(
    dialog[open],
    [role="dialog"][aria-modal="true"],
    [data-modal-panel],
    .dc-modal-panel,
    .dc-modal-dialog,
    .dc-modal-content,
    .dc-account-modal-dialog,
    .dc-beneficiary-modal-panel,
    .dc-support-composer-dialog,
    .dc-referral-dialog,
    .dc-transaction-dialog,
    .modal.show .modal-body,
    .mfp-wrap.mfp-inline-holder .mfp-content,
    .mfp-wrap.mfp-ajax-holder .mfp-content,
    .swal2-popup,
    .jconfirm .jconfirm-box
)::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
:is(
    dialog[open],
    [role="dialog"][aria-modal="true"],
    [data-modal-panel],
    .dc-modal-panel,
    .dc-modal-dialog,
    .dc-modal-content,
    .dc-account-modal-dialog,
    .dc-beneficiary-modal-panel,
    .dc-support-composer-dialog,
    .dc-referral-dialog,
    .dc-transaction-dialog,
    .modal.show .modal-body,
    .mfp-wrap.mfp-inline-holder .mfp-content,
    .mfp-wrap.mfp-ajax-holder .mfp-content,
    .swal2-popup,
    .jconfirm .jconfirm-box
)::-webkit-scrollbar-thumb {
    background: #9aabb8;
    border: 2px solid #eef2f0;
    border-radius: 999px;
}

@media (max-width: 640px) {
    :root {
        --dc-modal-viewport-gap: 20px;
    }
    .modal.show .modal-body {
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
    }
    .mfp-wrap.mfp-inline-holder .mfp-container,
    .mfp-wrap.mfp-ajax-holder .mfp-container {
        align-items: flex-start;
        padding: 12px 8px;
    }
    .mfp-wrap.mfp-inline-holder .mfp-content,
    .mfp-wrap.mfp-ajax-holder .mfp-content {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        margin: 0 auto;
    }
}