/* One shared popup shell. Feature styles own only the content inside the surface. */
.kinma-popup[hidden] { display: none !important; }

body.kinma-popup-open { overflow: hidden; }
body.kinma-popup-open .kinma-idle-stage { display: none !important; }

@media (min-width: 1025px) {
    .kinma-popup {
        position: fixed !important;
        z-index: 120000 !important;
        inset: 0 !important;
        box-sizing: border-box !important;
        padding: clamp(22px, 4vh, 52px) clamp(22px, 4vw, 68px) !important;
        background: rgba(26, 26, 26, .42) !important;
        backdrop-filter: none !important;
        pointer-events: auto !important;
    }

    /* Native framework popups use grid. Adopted legacy roots keep their existing
       display toggle so their feature-specific open/close code continues to work. */
    .kinma-popup:not([data-kinma-popup-adopted="true"]) {
        display: grid !important;
        place-items: center !important;
    }

    .kinma-popup[data-kinma-popup-adopted="true"] {
        align-items: center !important;
        justify-content: center !important;
    }

    .kinma-popup > .modal-overlay,
    .kinma-popup > [class$="-modal-backdrop"],
    .kinma-popup > [class$="-popup-backdrop"] { display: none !important; }

    .kinma-popup__surface {
        position: relative !important;
        box-sizing: border-box !important;
        width: min(88vw, 1120px) !important;
        height: min(84vh, 900px) !important;
        max-width: none !important;
        max-height: none !important;
        margin: auto !important;
        overflow: auto;
        border: 0 !important;
        border-radius: 26px !important;
        background: #fff !important;
        box-shadow: 0 22px 70px rgba(0, 0, 0, .18) !important;
        color: #1a1a1a;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overscroll-behavior: contain;
        container-type: size;
        pointer-events: auto !important;
    }

    .kinma-popup__content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .kinma-popup__close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 20;
        display: grid !important;
        flex: 0 0 42px;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        place-items: center !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #1a1a1a !important;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .12) !important;
        font: 400 27px/1 Arial, sans-serif;
        margin: 0 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }

    .kinma-popup__close:hover,
    .kinma-popup__close:focus-visible { background: #ededed !important; }

    /* License keeps its ticket layout inside the standardized white shell. */
    .ancestr-license-modal.kinma-popup { background: rgba(26, 26, 26, .42) !important; }
    .ancestr-license-modal .kinma-popup__surface { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 12px; overflow: hidden; }
    .ancestr-license-modal .ancestr-license-modal__header,
    .ancestr-license-modal .ancestr-license-modal__content { border-radius: 18px; background: #1a1a1a; }
    .ancestr-license-modal .ancestr-license-modal__header { position: relative; margin-bottom: 8px; }
    .ancestr-license-modal .ancestr-license-modal__content { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: auto; }
    .ancestr-license-modal .ancestr-license-options { min-height: 0; align-items: stretch; }
    .ancestr-license-modal .ancestr-license-option { height: 100%; }
    .ancestr-license-modal .kinma-popup__close { position: absolute; top: 12px; right: 12px; margin: 0; transform: none; }
}

@media (max-width: 1024px) {
    .kinma-popup:not([data-kinma-popup-adopted="true"]) {
        position: fixed;
        z-index: 120000;
        inset: 0;
        display: grid;
        place-items: end center;
        background: rgba(26, 26, 26, .42);
    }

    .kinma-popup[data-kinma-popup-adopted="true"] {
        position: fixed !important;
        z-index: 120000 !important;
        inset: 0 !important;
        box-sizing: border-box !important;
        align-items: flex-end !important;
        justify-content: center !important;
        background: rgba(26, 26, 26, .42) !important;
    }

    .kinma-popup__surface {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        overflow: auto;
        border-radius: 22px 22px 0 0 !important;
        background: #fff !important;
    }
}

/* Hidden is the final authority. This rule intentionally comes after every
   desktop/mobile display mode so a closed popup can never be forced open. */
html .kinma-popup[hidden],
html .kinma-popup[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}