.zt-popup {
    display: none;
}

.zt-popup.uk-open,
.zt-popup.zt-popup--fallback-open {
    display: block;
}

.zt-popup__dialog {
    overflow: hidden;
    border-radius: 14px;
}

.zt-popup__dialog--small {
    width: min(92vw, 420px);
}

.zt-popup__dialog--medium {
    width: min(92vw, 620px);
}

.zt-popup__dialog--large {
    width: min(94vw, 860px);
}

.zt-popup__dialog--xlarge {
    width: min(96vw, 1100px);
}

.zt-popup__layout {
    display: block;
}

.zt-popup__layout--left,
.zt-popup__layout--right {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: stretch;
}

.zt-popup__layout--right {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
}

.zt-popup__image-wrap {
    min-height: 180px;
    background: rgba(0, 0, 0, 0.04);
}

.zt-popup__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}

.zt-popup__layout--top .zt-popup__image {
    max-height: 360px;
}

.zt-popup__title {
    margin-top: 0;
}

.zt-popup__text > :last-child {
    margin-bottom: 0;
}

.zt-popup__actions {
    margin-top: 24px;
    margin-bottom: 0;
}

/* Minimal fallback in case UIkit JS/CSS is not loaded. In YOOtheme Pro, UIkit normally handles this. */
.zt-popup--fallback-open {
    position: fixed;
    inset: 0;
    z-index: 1010;
    overflow-y: auto;
    padding: 30px 15px;
    background: rgba(0, 0, 0, 0.6);
}

.zt-popup--fallback-open .zt-popup__dialog {
    margin: 0 auto;
    background: #fff;
    position: relative;
}

.zt-popup--fallback-open .zt-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

html.zt-popup-fallback-active,
html.zt-popup-fallback-active body {
    overflow: hidden;
}

@media (max-width: 767px) {
    .zt-popup__layout--left,
    .zt-popup__layout--right {
        display: block;
    }

    .zt-popup__image,
    .zt-popup__image-wrap {
        min-height: 160px;
    }
}