.mmp-overlay {
    position: fixed;
    inset: 0;
    /* Colour + opacity are combined server-side into one rgba() value, so the
       overlay's own opacity is only used for the fade in/out animation. */
    background: var(--mmp-overlay-rgba, rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: var(--mmp-align, center);
    justify-content: var(--mmp-justify, center);
    padding: var(--mmp-top, 16px) 16px 16px;
    box-sizing: border-box;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mmp-overlay.mmp-active {
    opacity: 1;
    visibility: visible;
}

/* The dialog holds background/border/shadow and the (non-scrolling) close button.
   The inner .mmp-content scrolls, so the close button never scrolls away. */
.mmp-overlay .mmp-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--mmp-width, 600px));
    transform: translate(var(--mmp-pos-x, 0px), var(--mmp-pos-y, 0px));
    height: var(--mmp-height, auto);
    max-height: calc(100vh - var(--mmp-top, 16px) - 16px);
    background: var(--mmp-bg, #fff);
    border-radius: var(--mmp-radius, 8px);
    border-style: solid;
    border-width: var(--mmp-border-width, 0);
    border-color: var(--mmp-border-color, #ddd);
    position: relative;
    box-shadow: var(--mmp-shadow-x, 0px) var(--mmp-shadow-y, 10px) var(--mmp-shadow-blur, 30px) var(--mmp-shadow-spread, 10px) var(--mmp-shadow-rgba, rgba(0, 0, 0, 0.18));
    box-sizing: border-box;
    outline: none;
}
.mmp-overlay .mmp-dialog .mmp-content {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    padding: var(--mmp-padding, 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mmp-overlay .mmp-dialog.mmp-no-scroll .mmp-content {
    overflow: hidden;
}
/* Leave room above the popup when the close button sits outside it */
.mmp-overlay .mmp-dialog.mmp-pos-out-right,
.mmp-overlay .mmp-dialog.mmp-pos-out-left {
    max-height: calc(100vh - var(--mmp-top, 16px) - 16px - var(--mmp-close-size, 20px) * 2.4);
    margin-top: calc(var(--mmp-close-size, 20px) * 2.4);
}

.mmp-overlay .mmp-dialog.mmp-fixed-top {
    margin-top: 0;
    max-height: calc(100vh - var(--mmp-top, 0px) - 16px);
}

/* Close button. High specificity + all:unset so theme button styles can't hide or restyle it. */
.mmp-overlay .mmp-dialog button.mmp-close {
    all: unset;
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: calc(var(--mmp-close-size, 20px) * 1.6) !important;
    height: calc(var(--mmp-close-size, 20px) * 1.6) !important;
    padding: 0 calc(var(--mmp-close-size, 20px) * 0.3) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: var(--mmp-close-size, 20px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--mmp-close-color, #000) !important;
    background: var(--mmp-close-bg, transparent) !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}
.mmp-overlay .mmp-dialog button.mmp-close:hover,
.mmp-overlay .mmp-dialog button.mmp-close:focus-visible {
    color: var(--mmp-close-hover, #555) !important;
}
.mmp-overlay .mmp-dialog button.mmp-close:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}
.mmp-overlay .mmp-dialog button.mmp-close svg {
    width: 1em !important;
    height: 1em !important;
    display: block !important;
}
.mmp-overlay .mmp-dialog button.mmp-close-label {
    font-size: calc(var(--mmp-close-size, 20px) * 0.7) !important;
}
.mmp-overlay .mmp-dialog.mmp-shape-circle button.mmp-close {
    border-radius: 50% !important;
    padding: 0 !important;
    min-width: calc(var(--mmp-close-size, 20px) * 1.6) !important;
}
.mmp-overlay .mmp-dialog.mmp-shape-circle button.mmp-close-label {
    border-radius: 999px !important;
    padding: 0 calc(var(--mmp-close-size, 20px) * 0.6) !important;
}
.mmp-overlay .mmp-dialog.mmp-shape-rounded button.mmp-close {
    border-radius: 6px !important;
}

/* Positions */
.mmp-overlay .mmp-dialog.mmp-pos-in-right button.mmp-close { top: var(--mmp-close-offset, 14px); right: var(--mmp-close-offset, 14px); }
.mmp-overlay .mmp-dialog.mmp-pos-in-left button.mmp-close {
    top: var(--mmp-close-offset, 14px) !important;
    left: var(--mmp-close-offset, 14px) !important;
}
.mmp-overlay .mmp-dialog.mmp-pos-out-right button.mmp-close {
    bottom: calc(100% + 6px) !important;
    right: 0 !important;
}
.mmp-overlay .mmp-dialog.mmp-pos-out-left button.mmp-close {
    bottom: calc(100% + 6px) !important;
    left: 0 !important;
}
/* Outside buttons sit on the dark overlay, so shape-less ones default to white-ish only if the user picks it */


.mmp-overlay .mmp-dialog button.mmp-close,
.mmp-overlay .mmp-dialog button.mmp-close:hover,
.mmp-overlay .mmp-dialog button.mmp-close:focus {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    width: auto !important;
}

html.mmp-scroll-locked,
body.mmp-scroll-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .mmp-overlay, .mmp-close { transition: none; }
}