/*********************************************
 * Type: form
**********************************************/
.another-popup.ap--form .ap-popup-content__text {margin-bottom:20px;}


/*********************************************
 * Type: iframe
**********************************************/
.another-popup.ap--iframe {--ep-padding:0;}
.another-popup.ap--iframe .ap-popup-content {width:100%;}
.another-popup.ap--iframe iframe {width:100%; display:block; height:clamp(300px, 63.25vh, 506px);}


/*********************************************
 * Type: image
**********************************************/
/* general */
.another-popup.ap--images {--ep-padding:0;}
.another-popup.ap--images .easy-popup-content {background:rgba(0, 0, 0, 0);}
.another-popup.ap--images .easy-popup-container {max-width:100vw; width:auto;}
.another-popup.ap--images .easy-popup-overflow {display:flex;}
.another-popup.ap--images .ap-popup-img {
    display:flex; align-items:center; justify-content:center;
    width:100%;
}
.another-popup.ap--images .ap-popup-img-bg {width:auto; max-width:100%; height:100%; max-height:100%;}
.another-popup.ap--images a.ap-popup-img-bg {display:block;}
.another-popup.ap--images .ap-popup-img img {
    contain-intrinsic-size:auto var(--ep-max-width);
    contain:unset !important;

    display:block; width:100%; height:100%;
    max-width:100%; max-height:100%; min-width:100%; min-height:100%;
    object-fit:contain; object-position:center;
}
.another-popup.ap--images .ap-popup__slider {
    --ap-image-max-width:100%;
    width:clamp(100px, var(--ap-image-max-width), calc(100vw - 40px));
}
.another-popup.ap--images .ap-popup-img-bg {border-radius:var(--ep-radius); overflow:hidden;}
.another-popup.ap--images .ap-popup-img-bg img {
    max-height:calc(100vh - 80px - var(--height-bar));
}

/* slider */
.another-popup.ap--image-slider .easy-popup-content {overflow:visible;}
.another-popup.ap--image-slider .ep-close-button {right:clamp(-100vw, calc((600px - 100vw) / 2), 0px);}
.another-popup.ap--image-slider .ap-popup-img-bg {border-radius:0;}
.another-popup.ap--image-slider a.ap-popup-img-bg {width:fit-content;}

.another-popup.ap--image-slider .ap-popup__items,
.another-popup.ap--image-slider .ap-popup-img,
.another-popup.ap--image-slider .ap-popup-img-bg {height:calc(100vh - 80px - var(--height-bar));}


/* max width */
.ap-popup-img-bg {
    --ap-image-max-width:100%;
    max-width:var(--ap-image-max-width);
}

/* Image has link > hover */
.another-popup a.ap-popup-img-bg {position:relative; overflow:hidden;}
.another-popup a.ap-popup-img-bg img {transition:all .3s ease; z-index:2;}
.another-popup a.ap-popup-img-bg:hover img {transform:scale(1.03); filter:brightness(1.1);}

/* Flickity - Fade (default flickity) */
.another-popup .flickity-enabled.is-fade .flickity-slider > * {
    pointer-events:none; z-index:0;
    opacity:0 !important;
    transition:opacity .45s ease;
}
.another-popup .flickity-enabled.is-fade .flickity-slider > .is-selected {
    pointer-events:auto; z-index:1;
    opacity:1 !important;
}

/* Flickity - Custom dots */
.another-popup ol.flickity-page-dots {padding-top:10px;}


/*********************************************
 * Admin bar enabled
**********************************************/
:root {
    --height-bar:0px;
}
body.admin-bar {--height-bar:32px;}
body.admin-bar:has(.ap-popup) .easy-popup-container {padding-top:calc(var(--height-bar) + 40px)}

@media only screen and (max-width:782px) {
    body.admin-bar:has(.ap-popup) {--height-bar:46px;}
}


/*********************************************
 * Type: promo
**********************************************/
.another-popup.ap--promo {
    --ep-padding:0;
    --ep-max-width:1024px;
    --ep-image-mobile-aspect:4/2;

    .easy-popup-inner {container:ap--promo / inline-size;}

    .ap-popup-content__col {
        width:100%;

        &.image {
            align-self:stretch;
            display:flex; align-items:center; justify-content:center;

            img {height:100%; width:100%; object-fit:cover; object-position:center;}
        }

        &.content {padding:20px;}
    }
}

@container ap--promo (min-width: 601px) {
    .another-popup.ap--promo {
        .ap-popup-content {display:flex; flex-wrap:wrap; align-items:center;}
        .ap-popup-content__col {
            width:50%;

            &.content {padding:40px;}
        }
    }
}
@container ap--promo (max-width: 600px) {
    .another-popup.ap--promo {
        .ap-popup-content__col {
            &.image {aspect-ratio:var(--ep-image-mobile-aspect);}
        }
    }
}