/**
 * AQM Popup frontend styles.
 *
 * Deliberately minimal: only the chrome (positioning, backdrop, close button,
 * test-mode badge) is styled here. All visual properties of the popup body
 * — background, padding, margins, border, border-radius, max-width, shadow,
 * typography — come from the Divi Library layout configured in settings.
 */

.aqm-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.aqm-popup-overlay[hidden] {
    display: none !important;
}

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

/*
 * Wrapper around the rendered Divi layout. Intentionally has no visual
 * styling — width, background, border, shadow, etc. all come from the
 * Divi section inside. `position: relative` anchors the close button.
 *
 * `overflow: hidden` + image/picture/video scaling rules below mean the
 * popup never shows a scrollbar — media inside scales to fit the viewport.
 */
.aqm-popup-container {
    position: relative;
    max-width: var(--aqm-popup-max-w, 100vw);
    max-height: var(--aqm-popup-max-h, 100vh);
    /*
     * overflow: visible so Divi-side decorations on modules — box-shadow,
     * outline, and pseudo-element accents — render beyond the container's
     * box edge instead of being clipped. The image itself can't overflow
     * because its max-width / max-height rules already constrain it to
     * the container's content area. The overlay's overflow: hidden still
     * catches anything that extends beyond the viewport.
     */
    overflow: visible;
    transform: translateY(12px) scale(0.98);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Image/video fit-to-viewport. v1.0.16 reintroduces aspect-preserving
 * scaling on media inside the popup so a tall image clips no longer:
 *
 *   - max-width/max-height bound the box to the overlay's content area
 *     (viewport minus overlay padding, exposed as CSS vars by the display
 *     class on the overlay element).
 *   - width: auto + height: auto override Divi's width: 100% on Fullwidth
 *     Image modules so the browser preserves the image's intrinsic aspect
 *     ratio when constraints kick in.
 *
 * Trade-off (carried over from v1.0.11's earlier attempt): on viewports
 * MUCH wider than the image's natural size, the image renders at its
 * natural intrinsic size rather than filling the container width. That's
 * the cost of preserving aspect — for square-ish images in landscape
 * viewports there's no way to both "fill width" and "fit height" without
 * stretching. Use a wider source image if you want it bigger on desktops.
 */
#aqm-popup-content img,
#aqm-popup-content video {
    max-width: 100%;
    max-height: var(--aqm-popup-max-h, 100vh);
    width: auto;
    height: auto;
}

.aqm-popup-overlay.is-open .aqm-popup-container {
    transform: translateY(0) scale(1);
}

/*
 * Close icon. No background — just a white X with a drop-shadow halo for
 * visibility on light and dark content. Override `.aqm-popup-close` via
 * custom CSS if you want a circle, square, brand color, etc.
 */
.aqm-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
    transition: transform 150ms ease-out, filter 150ms ease-out;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}

.aqm-popup-close:hover,
.aqm-popup-close:focus {
    background: transparent;
    outline: none;
    transform: scale(1.15);
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.95));
}

.aqm-popup-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.aqm-popup-close-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: inherit;
}

body.aqm-popup-open {
    overflow: hidden;
}

/*
 * Reset Divi's auto-generated layout wrappers (.et-l, .et_builder_inner_content).
 * These wrappers are injected by Divi when rendering a Library layout via
 * apply_filters('the_content', …) and can't be reached through the Divi UI,
 * so the user has no way to zero out any spacing they impose. Reset to 0.
 *
 * NOTE: Sections, rows, columns, and modules are user-controlled via Divi
 * Builder — we deliberately do NOT touch those by default. See
 * .aqm-popup-edge-to-edge below for the opt-in override.
 */
#aqm-popup-content > .et-l,
#aqm-popup-content > .et-l > .et_builder_inner_content,
#aqm-popup-content .et-l--post,
#aqm-popup-content .et_builder_inner_content {
    padding: 0;
    margin: 0;
    background: transparent;
}

/*
 * Edge-to-edge content mode (opt-in via "Behavior → Edge-to-edge content" in admin).
 *
 * Overrides Divi defaults INSIDE THE POPUP for the elements where Divi's
 * defaults consistently bleed white space into edge-to-edge content:
 *   - Row padding → 0 (Divi default 27px top/bottom)
 *   - Row width → 100% (Divi default is 80% of section — beats `.et_pb_row.et_pb_equal_columns`
 *     at 0,2,0, hence our 0,2,0 selector)
 *   - Column padding → 0
 *   - Image-module bottom margin → 0
 *
 * Section padding is INTENTIONALLY NOT touched here — it's purely controlled
 * by Divi UI (Section settings → Design → Spacing → Padding). Set to 0 for
 * full edge-to-edge images, or any value for card-style popups with breathing
 * room. This is consistent with the broader "Divi controls all popup styling"
 * principle ([[Decision - Divi Controls All Popup Styling]] in vault).
 */
.aqm-popup-edge-to-edge .et_pb_row,
.aqm-popup-edge-to-edge .et_pb_column {
    padding: 0;
}
.aqm-popup-edge-to-edge .et_pb_row {
    width: 100%;
    max-width: 100%;
}
.aqm-popup-edge-to-edge .et_pb_module {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .aqm-popup-overlay,
    .aqm-popup-container {
        transition: none;
    }
}