/**
 * RTM Popup Builder — frontend positioning & animations.
 * Position/animation classes are produced by PositionManager::css_classes().
 */

.rtm-pb-popup {
    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: none;
    font-family: inherit;
}

.rtm-pb-popup[hidden] {
    display: none;
}

.rtm-pb-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.rtm-pb-popup.is-open .rtm-pb-overlay {
    opacity: 1;
}

.rtm-pb-dialog {
    position: fixed;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 100vw;
    max-height: 100vh;
}

.rtm-pb-popup.is-open .rtm-pb-dialog {
    opacity: 1;
}

.rtm-pb-body {
    /* drop-shadow, not box-shadow: it hugs the rendered shape, so any
       border-radius set on the Elementor container inside is respected
       instead of a square shadow peeking out at the corners. */
    filter: drop-shadow(0 24px 48px rgba(10, 12, 30, 0.28));
    overflow: auto;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Placement                                                            */
/* ------------------------------------------------------------------ */

.rtm-pb--center .rtm-pb-dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rtm-pb--fullscreen .rtm-pb-dialog {
    inset: 0;
}

.rtm-pb--fullscreen .rtm-pb-body {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rtm-pb--corner .rtm-pb-dialog {
    margin: 16px;
}

.rtm-pb--corner-tl .rtm-pb-dialog { top: 0; left: 0; }
.rtm-pb--corner-tr .rtm-pb-dialog { top: 0; right: 0; }
.rtm-pb--corner-bl .rtm-pb-dialog { bottom: 0; left: 0; }
.rtm-pb--corner-br .rtm-pb-dialog { bottom: 0; right: 0; }

.rtm-pb--slide-in .rtm-pb-dialog {
    top: 50%;
    transform: translateY(-50%);
}

.rtm-pb--side-left .rtm-pb-dialog { left: 0; }
.rtm-pb--side-right .rtm-pb-dialog { right: 0; }

.rtm-pb--bar .rtm-pb-dialog {
    left: 0;
    right: 0;
}

.rtm-pb--bar .rtm-pb-body {
    width: 100%;
    filter: drop-shadow(0 4px 16px rgba(10, 12, 30, 0.2));
}

.rtm-pb--bar-top .rtm-pb-dialog { top: 0; }
.rtm-pb--bar-bottom .rtm-pb-dialog { bottom: 0; }

/* ------------------------------------------------------------------ */
/* Entrance animations (closed state per placement)                     */
/* ------------------------------------------------------------------ */

.rtm-pb--anim-zoom:not(.is-open).rtm-pb--center .rtm-pb-dialog {
    transform: translate(-50%, -50%) scale(0.85);
}

.rtm-pb--anim-slide:not(.is-open).rtm-pb--center .rtm-pb-dialog {
    transform: translate(-50%, -40%);
}

.rtm-pb--anim-zoom:not(.is-open).rtm-pb--fullscreen .rtm-pb-dialog,
.rtm-pb--anim-slide:not(.is-open).rtm-pb--fullscreen .rtm-pb-dialog {
    transform: scale(0.97);
}

.rtm-pb--anim-slide:not(.is-open).rtm-pb--corner-tl .rtm-pb-dialog,
.rtm-pb--anim-slide:not(.is-open).rtm-pb--corner-bl .rtm-pb-dialog,
.rtm-pb--anim-zoom:not(.is-open).rtm-pb--corner-tl .rtm-pb-dialog,
.rtm-pb--anim-zoom:not(.is-open).rtm-pb--corner-bl .rtm-pb-dialog {
    transform: translateX(-40px);
}

.rtm-pb--anim-slide:not(.is-open).rtm-pb--corner-tr .rtm-pb-dialog,
.rtm-pb--anim-slide:not(.is-open).rtm-pb--corner-br .rtm-pb-dialog,
.rtm-pb--anim-zoom:not(.is-open).rtm-pb--corner-tr .rtm-pb-dialog,
.rtm-pb--anim-zoom:not(.is-open).rtm-pb--corner-br .rtm-pb-dialog {
    transform: translateX(40px);
}

.rtm-pb--slide-in.rtm-pb--side-left:not(.is-open) .rtm-pb-dialog {
    transform: translate(-105%, -50%);
}

.rtm-pb--slide-in.rtm-pb--side-right:not(.is-open) .rtm-pb-dialog {
    transform: translate(105%, -50%);
}

.rtm-pb--bar-top:not(.is-open) .rtm-pb-dialog {
    transform: translateY(-100%);
}

.rtm-pb--bar-bottom:not(.is-open) .rtm-pb-dialog {
    transform: translateY(100%);
}

/* ------------------------------------------------------------------ */
/* Close button                                                         */
/* ------------------------------------------------------------------ */

.rtm-pb-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 18, 35, 0.45);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
}

.rtm-pb-close:hover {
    background: rgba(15, 18, 35, 0.75);
}

/* The icon, whichever kind it is.
 *
 * Font icons already scale with the button -- font-size is set per popup
 * from the Size control -- but an uploaded SVG has its own intrinsic size
 * and would otherwise ignore it entirely. `1em` ties it to the same number.
 *
 * `fill: currentColor` is what makes the Icon color control reach an SVG at
 * all: it arrives inline, carrying whatever fill it was drawn with.
 *
 * `flex-shrink: 0` is what keeps it on screen. Padding is charged against
 * the button's width (see Elementor\CloseButton::style), so a Padding at or
 * past half the Size leaves a content box of zero -- and this button is a
 * flex container, so its icon is a flex item with nothing to sit in.
 *
 * A font icon survives that: `<i>` is not replaced, its automatic minimum
 * size is the glyph's min-content width, and it simply overflows. An inline
 * SVG does not: it carries a viewBox but no intrinsic width or height, so
 * its content size suggestion is zero, `min-width: auto` resolves to zero,
 * and it shrinks away entirely. Same button, same numbers, icon gone --
 * which is exactly how the front end lost the mark the editor still drew. */
.rtm-pb-close svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentColor;
    display: block;
}

.rtm-pb-close i {
    flex-shrink: 0;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
    .rtm-pb--corner .rtm-pb-dialog,
    .rtm-pb--slide-in .rtm-pb-dialog {
        margin: 8px;
    }

    .rtm-pb-body {
        max-height: calc(100vh - 16px);
    }
}