.ct-popup-inner {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: var(--popup-height);
    max-width: min(var(--popup-max-width, 400px), calc(100vw - var(--popup-edges-offset, 25px) * 2));
    max-height: min(var(--popup-max-height, var(--viewport-height, 100vh)), calc(var(--viewport-height, 100vh) - var(--popup-edges-offset, 25px) * 2))
}

@supports(height: 100dvh) {
    .ct-popup-inner {
        --viewport-height: 100dvh
    }
}

.ct-popup-inner>article {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: inherit;
    box-shadow: var(--popup-box-shadow);
    border-radius: var(--popup-border-radius, 7px);
    -webkit-backface-visibility: hidden
}

.ct-popup-inner .ct-popup-content {
    width: 100%;
    border-radius: inherit;
    padding: var(--popup-padding, 30px);
    overflow-y: var(--popup-overflow-y, visible);
    overflow-x: var(--popup-overflow-x, visible);
    -webkit-backface-visibility: hidden
}

[data-popup-size=medium] {
    --popup-max-width: 600px
}

[data-popup-size=large] {
    --popup-max-width: 900px
}

[data-popup-position*=top] .ct-popup-inner {
    top: var(--popup-edges-offset, 25px)
}

[data-popup-position*=left] .ct-popup-inner {
    left: var(--popup-edges-offset, 25px)
}

[data-popup-position*=right] .ct-popup-inner {
    right: var(--popup-edges-offset, 25px)
}

[data-popup-position*=bottom] .ct-popup-inner {
    bottom: var(--popup-edges-offset, 25px)
}

[data-popup-position*=center] .ct-popup-inner {
    inset-inline: var(--popup-edges-offset, 25px);
    margin-inline: auto
}

[data-popup-position*=middle] .ct-popup-inner {
    top: 50%;
    transform: translateY(-50%)
}

[data-popup-overflow=scroll] {
    --popup-overflow-y: auto;
    --popup-overflow-x: hidden
}

[data-popup-overflow=hidden] {
    --popup-overflow-y: hidden;
    --popup-overflow-x: hidden
}

[data-popup-backdrop] {
    position: fixed;
    z-index: 999999
}

[data-popup-backdrop=no] {
    --background-image: none;
    --background-color: transparent
}

[data-popup-backdrop=yes] {
    inset: 0
}

[data-popup-animation] {
    opacity: var(--opacity, 0);
    visibility: var(--visibility, hidden);
    transition: opacity var(--popup-entrance-speed, 0.3s) ease-in-out, visibility var(--popup-entrance-speed, 0.3s) ease-in-out
}

[data-popup-animation] .ct-popup-inner>article {
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) scale(var(--scale, 1));
    transition: transform var(--popup-entrance-speed, 0.3s) ease-in-out
}

[data-popup-animation].active {
    --opacity: 1;
    --visibility: visible;
    --translate-x: 0;
    --translate-y: 0;
    --scale: 1
}

[data-popup-animation]:not(.active) {
    pointer-events: none
}

[data-popup-animation=zoom-in] {
    --scale: 0.8
}

[data-popup-animation=slide-left] {
    --translate-x: calc(var(--popup-entrance-value, 50px) * -1)
}

[data-popup-animation=slide-right] {
    --translate-x: var(--popup-entrance-value, 50px)
}

[data-popup-animation=slide-top] {
    --translate-y: calc(var(--popup-entrance-value, 50px) * -1)
}

[data-popup-animation=slide-bottom] {
    --translate-y: var(--popup-entrance-value, 50px)
}

.ct-popup .ct-toggle-close {
    --toggle-button-position: absolute;
    --toggle-button-z-index: 10;
    --theme-icon-size: 10px;
    --toggle-button-size: 28px;
    --toggle-button-radius: 100%
}

.ct-popup .ct-toggle-close[data-location=inside] {
    top: 14px;
    --toggle-button-inset-end: 14px
}

.ct-popup .ct-toggle-close[data-location=outside] {
    top: -14px;
    --toggle-button-inset-end: -14px
}