/**
 * Copyright © Aisshpra. All rights reserved.
 *
 * Aisshpra Image Popup. Plain CSS (not LESS) so it loads in any theme, incl. Codazon fastest/baby_kid.
 *
 * Sizing: the dialog width is the smallest of
 *   - the admin "Desktop Max Width" (100vw on mobile),
 *   - the image's natural width (never upscaled),
 *   - the viewport width minus gutters,
 *   - the viewport height minus gutters, multiplied by the image ratio (so the full height fits).
 * The image then fills that width with height:auto + aspect-ratio, so it is never stretched or cropped.
 * Variables --aip-ratio, --aip-nat-w and --aip-max-w are set per popup by image-popup.js.
 */

html.aip-lock,
html.aip-lock body {
    overflow: hidden !important;
}

.aip-overlay {
    --aip-gutter-x: 32px;
    --aip-gutter-y: 32px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--aip-overlay, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity 0.25s ease;
    overscroll-behavior: contain;
    -webkit-tap-highlight-color: transparent;
}

.aip-overlay.aip-open {
    opacity: 1;
}

.aip-overlay .aip-dialog {
    --aip-extra: 0px;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: min(
        var(--aip-max-w, 600px),
        var(--aip-nat-w, 600px),
        calc(100vw - var(--aip-gutter-x)),
        calc((100vh - var(--aip-gutter-y) - var(--aip-extra)) * var(--aip-ratio, 1))
    );
    /* Dynamic viewport height excludes mobile browser toolbars; ignored by older browsers. */
    width: min(
        var(--aip-max-w, 600px),
        var(--aip-nat-w, 600px),
        calc(100vw - var(--aip-gutter-x)),
        calc((100dvh - var(--aip-gutter-y) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--aip-extra)) * var(--aip-ratio, 1))
    );
    margin: 0;
    outline: none;
    transition: transform 0.25s ease;
}

.aip-overlay .aip-dialog.aip-has-never {
    --aip-extra: 46px;
}

.aip-overlay .aip-dialog.aip-close-outside {
    --aip-gutter-x: 72px;
    --aip-gutter-y: 72px;
}

.aip-overlay .aip-media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    line-height: 0;
    text-decoration: none;
}

.aip-overlay .aip-media picture {
    display: block;
}

.aip-overlay .aip-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: var(--aip-ratio, 1);
    object-fit: contain;
    margin: 0;
    border: 0;
}

/* ---------- Close button (reset theme button styles first) ---------- */
.aip-overlay .aip-close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #222;
    font: 400 18px/1 Arial, sans-serif;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

/* Invisible extra hit area so the smaller button is still easy to tap. */
.aip-overlay .aip-close::before {
    content: '';
    position: absolute;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
}

.aip-overlay .aip-close:hover {
    background: #fff;
    transform: scale(1.08);
}

.aip-overlay .aip-close:focus-visible,
.aip-overlay .aip-never:focus-visible,
.aip-overlay .aip-media:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.aip-overlay .aip-close span {
    display: block;
    margin-top: -1px;
}

.aip-overlay .aip-close-outside .aip-close {
    top: -13px;
    right: -13px;
}

/* ---------- "Don't show again" ---------- */
.aip-overlay .aip-never {
    all: unset;
    box-sizing: border-box;
    display: block;
    min-height: 36px;
    margin: 10px auto 0;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-decoration: underline;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* ---------- Mobile (class set by JS from the configured breakpoint) ---------- */
.aip-overlay.aip-is-mobile .aip-dialog,
.aip-overlay.aip-is-mobile .aip-dialog.aip-close-outside {
    --aip-gutter-x: 32px;
    --aip-gutter-y: 32px;
}

.aip-overlay.aip-is-mobile .aip-close,
.aip-overlay.aip-is-mobile .aip-close-outside .aip-close {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    font-size: 19px;
}

.aip-overlay.aip-is-mobile .aip-media {
    border-radius: 6px;
}

/* ---------- Animations ---------- */
.aip-overlay.aip-anim-zoom .aip-dialog {
    transform: scale(0.92);
}

.aip-overlay.aip-anim-slide-up .aip-dialog {
    transform: translateY(40px);
}

.aip-overlay.aip-open .aip-dialog {
    transform: none;
}

.aip-overlay.aip-anim-none,
.aip-overlay.aip-anim-none .aip-dialog {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .aip-overlay,
    .aip-overlay .aip-dialog,
    .aip-overlay .aip-close {
        transition: none !important;
        transform: none !important;
    }
}