/*
 * Pixel Popup Builder - front styles
 * All selectors are namespaced under .pxp- to avoid theme collisions.
 * No global element selectors are used.
 */

.pxp-overlay {
    position: fixed;
    inset: 0;
    z-index: 999990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--pxp-anim-duration, 300ms) ease;
    pointer-events: none;
}

.pxp-overlay.pxp-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Dedicated background layer (image veil) — sits behind the popup so its own
   opacity applies to the image, not the popup. */
.pxp-veil-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pxp-box {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    transform: translateY(0) scale(1);
    transition:
        transform var(--pxp-anim-duration, 300ms) ease,
        opacity var(--pxp-anim-duration, 300ms) ease;
}

/* Animation entry states */
.pxp-anim-fade .pxp-box { opacity: 0; }
.pxp-anim-zoom .pxp-box { opacity: 0; transform: scale(0.85); }
.pxp-anim-slide-top .pxp-box { opacity: 0; transform: translateY(-40px); }
.pxp-anim-slide-bottom .pxp-box { opacity: 0; transform: translateY(40px); }
.pxp-anim-slide-left .pxp-box { opacity: 0; transform: translateX(-40px); }
.pxp-anim-slide-right .pxp-box { opacity: 0; transform: translateX(40px); }

.pxp-overlay.pxp-visible .pxp-box {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Layout variants */
.pxp-type-top-bar,
.pxp-type-bottom-bar {
    align-items: stretch;
}

.pxp-type-top-bar .pxp-box,
.pxp-type-bottom-bar .pxp-box {
    max-width: 100vw;
    width: 100%;
    border-radius: 0;
    max-height: none;
}

.pxp-type-top-bar { align-items: flex-start; justify-content: center; }
.pxp-type-bottom-bar { align-items: flex-end; justify-content: center; }

/* Bars don't dim the page, so their overlay must NOT capture clicks across the
   whole screen (that would block a floating button sitting in a corner). Let
   clicks pass through the empty overlay area; only the bar box itself is
   interactive. Same approach already used for the floating-box position. */
.pxp-type-top-bar.pxp-visible,
.pxp-type-bottom-bar.pxp-visible {
    pointer-events: none;
}
.pxp-type-top-bar .pxp-box,
.pxp-type-bottom-bar .pxp-box {
    pointer-events: auto;
}
.pxp-type-slide-left { justify-content: flex-start; }
.pxp-type-slide-right { justify-content: flex-end; }
.pxp-type-slide-bottom { align-items: flex-end; }
.pxp-type-slide-top { align-items: flex-start; }

/* Give edge-anchored positions some breathing room so they don't stick to the
   very edge of the screen. */
.pxp-type-slide-left .pxp-box { margin-left: 24px; }
.pxp-type-slide-right .pxp-box { margin-right: 24px; }
.pxp-type-slide-bottom .pxp-box { margin-bottom: 24px; }
.pxp-type-slide-top .pxp-box { margin-top: 24px; }

/* Bars: detach from the edges too. They no longer span the full width, get a
   side margin and rounded corners so they read as a floating bar. */
.pxp-type-top-bar .pxp-box,
.pxp-type-bottom-bar .pxp-box {
    width: auto;
    max-width: calc(100vw - 48px);
    border-radius: 10px;
}
.pxp-type-top-bar .pxp-box { margin: 20px 24px 0; }
.pxp-type-bottom-bar .pxp-box { margin: 0 24px 20px; }

@media (max-width: 600px) {
    .pxp-type-slide-left .pxp-box { margin-left: 12px; }
    .pxp-type-slide-right .pxp-box { margin-right: 12px; }
    .pxp-type-slide-bottom .pxp-box { margin-bottom: 12px; }
    .pxp-type-slide-top .pxp-box { margin-top: 12px; }
    .pxp-type-top-bar .pxp-box { margin: 12px 12px 0; max-width: calc(100vw - 24px); }
    .pxp-type-bottom-bar .pxp-box { margin: 0 12px 12px; max-width: calc(100vw - 24px); }
}

/* Floating box: anchored to the bottom-right corner, does not cover screen. */
.pxp-type-floating {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
    background: transparent !important;
}

/* When visible, the floating overlay must NOT capture clicks across the whole
   screen (it's transparent and only occupies a corner). Match the specificity
   of .pxp-overlay.pxp-visible so this wins: let clicks pass through the empty
   area; only the box itself stays interactive. */
.pxp-type-floating.pxp-visible {
    pointer-events: none;
}

.pxp-type-floating .pxp-box {
    pointer-events: auto;
    max-width: 360px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.pxp-type-fullscreen .pxp-box {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

/* Close button */
.pxp-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.pxp-close:hover {
    opacity: 0.8;
}

.pxp-close.pxp-close-outside {
    top: -16px;
    right: -16px;
}

/* For bleeding-image layouts: X sits just inside the top-right edge, over the
   image, so it isn't clipped by the rounded corner. */
.pxp-close.pxp-close-edge {
    top: 10px;
    right: 10px;
}

/* When the X is outside, the box shows overflow so the X isn't clipped. The
   inner column wrapper then clips the bleeding image to the box shape. Since
   inherit resolves against .pxp-content (no radius), set it explicitly. */
.pxp-box.pxp-outside-x.pxp-has-cols .pxp-layout-cols {
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}
.pxp-box.pxp-outside-x .pxp-top-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.pxp-box.pxp-outside-x .pxp-only-image {
    border-radius: 10px;
}

.pxp-content {
    padding: 24px;
}

.pxp-content h2 {
    margin-top: 0;
}

/* Consecutive buttons sit side by side and wrap if they don't fit. */
.pxp-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 8px 0 12px;
}
.pxp-btn-row > div {
    margin: 0 !important;
}

/* Image-top layout: the first image bleeds to the top edges, no rounding,
   and covers roughly the top half of the popup instead of its full height. */
.pxp-box.pxp-has-top-image {
    overflow: hidden;
}
.pxp-top-image {
    display: block;
    width: calc(100% + 48px);
    max-width: none;
    height: 40vh;
    min-height: 200px;
    max-height: 400px;
    object-fit: cover;
    margin: -24px -24px 16px -24px;
    border-radius: 0;
}

/* Image-only layout: the popup is just the image, sized to it. */
.pxp-box.pxp-has-only-image {
    padding: 0 !important;
    overflow: hidden;
    width: auto !important;
    max-width: 92vw;
    max-height: 88vh !important;
    background: transparent !important;
}
.pxp-box.pxp-has-only-image .pxp-content {
    padding: 0 !important;
    max-width: 100%;
    max-height: 88vh;
    overflow: hidden;
}
.pxp-only-image {
    display: block;
    max-width: 100% !important;
    max-height: 88vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: inherit;
}
.pxp-only-image-link {
    display: block;
    line-height: 0;
    max-width: 100%;
    max-height: 88vh;
}
.pxp-only-image-link .pxp-only-image {
    max-height: 88vh !important;
}

/* --- Content layouts --- */

/* Two-column layouts (image-left / image-right). */
.pxp-layout-cols {
    display: flex;
    align-items: stretch;
    min-height: 400px;
    width: 100%;
}

.pxp-col-content {
    flex: 1 1 50%;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
}

.pxp-col-content > * {
    width: 100%;
}

.pxp-col-content h2,
.pxp-col-content p {
    width: 100%;
}

.pxp-col-image {
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
}

/* When the image column is a link, the anchor takes the column's place and the
   inner image div fills it completely. */
.pxp-col-image-link {
    flex: 1 1 50%;
    display: block;
    min-height: 400px;
    text-decoration: none;
    line-height: 0;
    font-size: 0;
    align-self: stretch;
}
.pxp-col-image-link .pxp-col-image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
}

/* Two-column box: wider, image bleeds to the edges (no padding, clip corners). */
.pxp-box.pxp-has-cols {
    max-width: 860px;
    width: 90vw;
    overflow: hidden;
    border-radius: 10px;
    padding: 0 !important;
}
.pxp-box.pxp-has-cols .pxp-content {
    padding: 0 !important;
    margin: 0 !important;
}
.pxp-box.pxp-has-cols .pxp-layout-cols {
    margin: 0;
}
/* The image column (and its link wrapper) extend a hair past the seam so no
   sub-pixel gap lets the box background show as a thin dark line. */
.pxp-layout-cols .pxp-col-image,
.pxp-layout-cols .pxp-col-image-link {
    margin-right: -1px;
}
.pxp-box.pxp-image-right .pxp-layout-cols .pxp-col-image,
.pxp-box.pxp-image-right .pxp-layout-cols .pxp-col-image-link {
    margin-right: 0;
    margin-left: -1px;
}

/* Stack the columns on narrow screens (image on top). */
@media (max-width: 600px) {
    .pxp-layout-cols {
        flex-direction: column;
        min-height: 0;
    }
    .pxp-col-image {
        min-height: 200px;
        flex-basis: 200px;
    }
    .pxp-col-content {
        padding: 28px 24px;
    }
}

/* On small screens, ignore the desktop percentage and use most of the width
   so the popup never turns into a narrow strip. */
@media (max-width: 600px) {
    .pxp-box {
        width: 92vw !important;
        max-width: 92vw !important;
    }
}

/* Body scroll lock helper */
body.pxp-noscroll {
    overflow: hidden !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pxp-overlay,
    .pxp-box {
        transition: none !important;
    }
}

/* The image link inside a popup should not show the browser focus ring: it's
   a wrapped image, not a form control, and the outline flashed on load looked
   like a stray black line. Covers :focus and :focus-visible across browsers. */
.pxp-box .pxp-img-link,
.pxp-box .pxp-img-link:focus,
.pxp-box .pxp-img-link:focus-visible,
.pxp-box .pxp-img-link:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}