.panel-container {
    position: fixed;
    z-index: var(--elevation-low);
    inset: 1rem; /* top/right/bottom/left */
    padding: 1rem;
    padding-right: 0;
    box-sizing: border-box;
    margin: 0;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-panel);
    background-color: var(--bg-color-panel);
    border: var(--border-panel);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    min-height: 0;
}
/* Full height panels on small screens dont get any round corners or shadow */
.panel-type-full-screen.panel-container {
    border-radius: 0;
    box-shadow: none;
}

/* Open state: JS removes .hidden */
.panel-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, 0);
}

/* Front-end templates are cloned by runtime; keep hidden sources out of paint/layout overflow. */
body:not(.wp-admin) .panel-container.hidden[data-control-id] {
    display: none;
}

.panel-child-anchor {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.panel-child-anchor.panel-child-anchor-overlay-active {
    z-index: var(--elevation-high);
    isolation: isolate;
}

.panel-child-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: auto;
    animation: panel-overlay-in 180ms ease-out 120ms forwards;
}

.panel-container.panel-type-child.panel-child-instance {
    position: absolute;
    inset: auto;
    top: calc(100% + var(--panel-child-gap, 0.5rem));
    left: 0%;
    right: auto;
    bottom: auto;
    --panel-child-translate-x: 0;
    --panel-child-translate-y: 0;
    --panel-child-content-max-height: min(70vh, 40rem);
    margin: 0;
    width: min(36rem, calc(100vw - 2rem));
    min-height: 0;
    transform: translate(var(--panel-child-translate-x), var(--panel-child-translate-y));
}

.panel-container.panel-type-child.panel-child-instance:not(.hidden) {
    transform: translate(var(--panel-child-translate-x), var(--panel-child-translate-y));
}

.panel-container.panel-type-child.panel-child-instance > .panel-content {
    height: auto;
    max-height: var(--panel-child-content-max-height);
    overflow: auto;
    min-height: 0;
}

.panel-container.panel-type-child.panel-child-instance > .panel-content > .form-block.form-fill-vertical-space.form-allow-scrollbar {
    block-size: var(--panel-child-content-max-height);
    max-block-size: var(--panel-child-content-max-height);
    min-block-size: 0;
}

.panel-container.panel-type-child.panel-child-instance.panel-child-v-top {
    top: auto;
    bottom: calc(100% + var(--panel-child-gap, 0.5rem));
}

.panel-container.panel-type-child.panel-child-instance.panel-child-v-middle {
    top: 50%;
    bottom: auto;
    --panel-child-translate-y: -50%;
}

.panel-container.panel-type-child.panel-child-instance.panel-child-v-bottom {
    top: calc(100% + var(--panel-child-gap, 0.5rem));
    bottom: auto;
}

.panel-container.panel-type-child.panel-child-instance.panel-child-h-left {
    left: 0%;
    right: auto;
}

.panel-container.panel-type-child.panel-child-instance.panel-child-h-middle {
    left: 50%;
    right: auto;
    --panel-child-translate-x: -50%;
}

.panel-container.panel-type-child.panel-child-instance.panel-child-h-right {
    left: auto;
    right: 0%;
}


/* Close button */
.panel-container > .panel-close-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    background-color: var(--bg-color-inv);
    color: var(--color-text-inv);
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}

/* Panel close icon */
.panel-close-icon {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}
.panel-close-icon-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
}
@media (min-width: 960px) {
    .panel-container > .panel-close-button {
        top: 1.25rem;
        right: 1rem;
    }
    .panel-close-icon {
        width: 2.25rem;
        height: 2.25rem;
    }
    .panel-close-icon-line {
        width: 18px;
    }
}

.panel-close-icon-line-1 {
    transform: translate(-50%, -50%) rotate(45deg);
}
.panel-close-icon-line-2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*
.panel-container > .panel-close-button:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9);
}
.panel-container > .panel-close-button:focus {
    outline: 2px solid rgba(0, 0, 0, 0.25);
    outline-offset: 2px;
}
*/

/* Editor: the close button is displayed but non-functional */
.panel-container > .panel-close-button[disabled] {
    cursor: default;
    opacity: 0.85;
}

/* Inner content */
.panel-container > .panel-content {
    min-height: inherit;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: none;
}

.panel-container.panel-anim-fade {
    transition: opacity 180ms ease-out,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 220ms; /* hide after transform finishes */
}
.panel-container.panel-anim-fade:not(.hidden) {
    transition: opacity 180ms ease-out,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}


.panel-container.panel-anim-unroll {
    /* Default closed baseline for unroll (down) */
    max-height: 0;
    max-width: none;
    transition: max-height 560ms cubic-bezier(0.16, 1, 0.3, 1),
        max-width 560ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 160ms ease-out,
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 560ms;
}
.panel-container.panel-anim-unroll:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, 0);
    transition:
        max-height 560ms cubic-bezier(0.16, 1, 0.3, 1),
        max-width 560ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 160ms ease-out,
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* Child panels need an explicit unrolled max-height on desktop. */
.panel-container.panel-type-child.panel-child-instance.panel-anim-unroll {
    max-width: min(36rem, calc(100vw - 2rem));
    max-height: 0;
}

.panel-container.panel-type-child.panel-child-instance.panel-anim-unroll:not(.hidden) {
    max-height: var(--panel-child-content-max-height);
}

/* -------------------------
Unroll: DOWN (default)
- anchored to top (expands downward)
------------------------- */
.panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down {
    top: 0; left: 0; right: 0;
    bottom: auto;
    height: calc(100vh);
    max-height: 0;
}
.panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down:not(.hidden) {
    max-height: calc(100vh);
}
@media (min-width: 960px) {
    .panel-type-full-screen.panel-container {
        border-radius: var(--radius-large);
        box-shadow: var(--shadow-panel);
    }
    .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down {
        top: 1rem; left: 1rem; right: 1rem;
        height: calc(100vh - 2rem);
    }
    .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down:not(.hidden) {
        max-height: calc(100vh - 2rem);
    }
}
/* -------------------------
Unroll: UP
- anchored to bottom (expands upward)
------------------------- */
.panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up {
    bottom: 1rem; left: 1rem; right: 1rem;
    top: auto;
    height: calc(100vh - 2rem);
    max-height: 0;
}

.panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up:not(.hidden) {
    max-height: calc(100vh - 2rem);
}

/* -------------------------
Unroll: LEFT
- anchored to left (expands rightward)
------------------------- */
.panel-container.panel-anim-unroll.panel-dir-left {
    left: 1rem; top: 1rem; bottom: 1rem;
    right: auto;
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    max-width: 0;
    max-height: none;
}

.panel-container.panel-anim-unroll.panel-dir-left:not(.hidden) {
    max-width: calc(100vw - 2rem);
}

/* -------------------------
Unroll: RIGHT
- anchored to right (expands leftward)
------------------------- */
.panel-container.panel-anim-unroll.panel-dir-right {
    right: 1rem; top: 1rem; bottom: 1rem;
    left: auto;
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    max-width: 0;
    max-height: none;
}

.panel-container.panel-anim-unroll.panel-dir-right:not(.hidden) {
    max-width: calc(100vw - 2rem);
}

/* Ensure content fills the unrolled dimensions for left/right variants */
.panel-container.panel-anim-unroll.panel-dir-left > .panel-content,
.panel-container.panel-anim-unroll.panel-dir-right > .panel-content {
    height: 100%;
}

/* Rail panel layout */
.panel-container.panel-type-rail {
    --panel-rail-width: min(500px, calc(100vw - 2rem));
    --panel-rail-offscreen-offset: 1rem;
    top: 1rem;
    bottom: 1rem;
    width: var(--panel-rail-width);
    max-width: var(--panel-rail-width);
    height: calc(100vh - 2rem);
}

.panel-container.panel-type-rail.panel-rail-left,
.panel-container.panel-type-rail:not(.panel-rail-right) {
    left: 1rem;
    right: auto;
}

.panel-container.panel-type-rail.panel-rail-right {
    right: 1rem;
    left: auto;
}

.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-left,
.panel-container.panel-type-rail.panel-anim-unroll:not(.panel-rail-right),
.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-right {
    max-width: var(--panel-rail-width);
    max-height: none;
    transition:
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 180ms ease-out,
        visibility 0s linear 560ms;
}

.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-left,
.panel-container.panel-type-rail.panel-anim-unroll:not(.panel-rail-right) {
    transform: translateX(calc(-100% - var(--panel-rail-offscreen-offset)));
}

.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-right {
    transform: translateX(calc(100% + var(--panel-rail-offscreen-offset)));
}

.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-left:not(.hidden),
.panel-container.panel-type-rail.panel-anim-unroll:not(.panel-rail-right):not(.hidden),
.panel-container.panel-type-rail.panel-anim-unroll.panel-rail-right:not(.hidden) {
    transform: translateX(0);
    transition:
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 180ms ease-out,
        visibility 0s linear 0s;
}


/* Adjustment of full block for the presence of the WP admin bar */
body.admin-bar .panel-type-full-screen.panel-container {
    top: calc(var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down {
    top: calc(var(--wp-admin--admin-bar--height, 32px));
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down:not(.hidden) {
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up:not(.hidden) {
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-left,
body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-right {
    top: calc(var(--wp-admin--admin-bar--height, 32px));
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.admin-bar .panel-container.panel-type-rail {
    top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
    height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
}
@media (min-width: 960px) {
    body.admin-bar .panel-type-full-screen.panel-container {
        top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
    }
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down {
        top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
        height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
    }
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-down:not(.hidden) {
        max-height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
    }
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up {
        height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
    }
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-up:not(.hidden) {
        max-height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
    }
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-left,
    body.admin-bar .panel-type-full-screen.panel-container.panel-anim-unroll.panel-dir-right {
        top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
        height: calc(100vh - 2rem - var(--wp-admin--admin-bar--height, 32px));
    }
}

/* Rail panels switch to full-screen mode on small viewports (same breakpoint as child mode). */
@media (max-width: 781px) {
    .panel-container.panel-type-rail.panel-rail-left,
    .panel-container.panel-type-rail:not(.panel-rail-right),
    .panel-container.panel-type-rail.panel-rail-right {
        --panel-rail-offscreen-offset: 0px;
        inset: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .panel-container.panel-type-rail.panel-anim-unroll.panel-rail-left,
    .panel-container.panel-type-rail.panel-anim-unroll:not(.panel-rail-right),
    .panel-container.panel-type-rail.panel-anim-unroll.panel-rail-right {
        max-width: 100vw;
    }

    body.admin-bar .panel-container.panel-type-rail.panel-rail-left,
    body.admin-bar .panel-container.panel-type-rail:not(.panel-rail-right),
    body.admin-bar .panel-container.panel-type-rail.panel-rail-right {
        top: var(--wp-admin--admin-bar--height, 32px);
        height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .panel-container,
    .panel-container.panel-anim-fade,
    .panel-container.panel-anim-unroll,
    .panel-container:not(.hidden),
    .panel-container.panel-anim-fade:not(.hidden),
    .panel-container.panel-anim-unroll:not(.hidden) {
        transition: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: none;
        max-width: none;
        inset: 1rem;
        top: auto; right: auto; bottom: auto; left: auto;
    }
}

/* Full-screen overlay injected into <body> when enabled panels are open */
.panel-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--elevation-base);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: panel-overlay-in 180ms ease-out 120ms forwards;
}

@keyframes panel-overlay-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-overlay,
    .panel-child-backdrop {
        animation: none;
        opacity: 1;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}