/* Final containment layer for Page Builder Pro. */

html,
body.page-builder-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

[hidden] {
    display: none !important;
}

body.page-builder-shell *,
body.page-builder-shell *::before,
body.page-builder-shell *::after {
    box-sizing: border-box;
}

body.page-builder-shell :is(img, svg, video, canvas, iframe, embed, object) {
    max-width: 100%;
}

body.page-builder-shell :is(button, input, select, textarea) {
    min-width: 0;
    max-width: 100%;
}

body.page-builder-shell :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(49, 94, 232, .35);
    outline-offset: 2px;
}

body.page-builder-shell :is(
    .pro-topbar,
    .pro-brand,
    .pro-workspace-switch,
    .pro-context-control,
    .pro-page-control,
    .pro-actions,
    .pro-workspace,
    .pro-sidebar,
    .pro-nav,
    .pro-panel-stack,
    .builder-side-panel,
    .pro-stage,
    .stage-toolbar,
    .stage-context,
    .stage-tools,
    .stage-view,
    .pro-inspector,
    .inspector-content,
    .builder-modal,
    .builder-modal-dialog,
    #builder-design-view,
    #builder-live-view,
    #gjs,
    #builder-public-frame,
    #builder-live-frame
) {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

body.page-builder-shell .pro-topbar,
body.page-builder-shell .pro-workspace {
    width: 100%;
    max-width: 100%;
}

body.page-builder-shell .pro-actions,
body.page-builder-shell .stage-tools {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.page-builder-shell .pro-actions > *,
body.page-builder-shell .stage-tools > * {
    flex: 0 0 auto;
}

body.page-builder-shell :is(.builder-side-panel, .inspector-content) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.page-builder-shell :is(.builder-side-panel, .inspector-content) :is(h1, h2, h3, h4, p, label, small, strong, button) {
    overflow-wrap: anywhere;
}

body.page-builder-shell :is(.builder-side-panel, .inspector-content) :is(input, select, textarea) {
    width: 100%;
}

body.page-builder-shell .stage-view,
body.page-builder-shell #builder-design-view,
body.page-builder-shell #builder-live-view {
    overflow: hidden;
}

body.page-builder-shell :is(#gjs, #builder-public-frame, #builder-live-frame) {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

body.page-builder-shell .builder-modal {
    overflow: auto;
    overscroll-behavior: contain;
}

body.page-builder-shell .builder-modal-dialog {
    width: min(100%, 960px);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: auto;
}

@media (max-width: 820px) {
    body.page-builder-shell .pro-topbar {
        overflow: hidden;
    }

    body.page-builder-shell .pro-workspace {
        grid-template-columns: var(--builder-shell-rail) minmax(0, 1fr) !important;
    }

    body.page-builder-shell .pro-sidebar {
        grid-template-columns: var(--builder-shell-rail) minmax(0, 1fr) !important;
    }

    body.page-builder-shell .pro-panel-stack {
        max-width: calc(100vw - var(--builder-shell-rail));
        overflow: hidden;
    }

    body.page-builder-shell .pro-nav button {
        min-width: 0;
        min-height: 44px;
    }

    body.page-builder-shell :is(input, select, textarea) {
        font-size: 16px;
    }

    body.page-builder-shell .builder-modal-dialog {
        width: calc(100vw - .7rem);
        max-width: calc(100vw - .7rem);
        max-height: calc(100dvh - .7rem);
    }
}

@media (max-width: 520px) {
    body.page-builder-shell .pro-page-control {
        grid-template-columns: minmax(0, 1fr) minmax(90px, 34%);
    }

    body.page-builder-shell .pro-page-control button {
        width: 100%;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-builder-shell .pro-actions button,
    body.page-builder-shell .stage-tools button {
        min-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-builder-shell *,
    body.page-builder-shell *::before,
    body.page-builder-shell *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}