/* body:has(.popup-wrapper) {
    overflow: hidden;
} */

body:not(.wp-admin) .popup-wrapper {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	height: 100svh;
	top: 0;
	left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--m-small) 0;
	justify-content: center;
	z-index: 9999;
}

.popup-outer {
    text-align: center;
    padding: var(--m-small) var(--m-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
	position: relative;
	width: 100%;
    max-width: max(1080px, 60vw);
    height: fit-content;
}

body:not(.wp-admin) .popup-outer {
    margin: auto max(24px, 5vw);
}

.popup-close {
    display: block;
    width: max(24px, 1.25vw);
    aspect-ratio: 1/1;
    align-self: flex-end;
    position: absolute;
    top: max(24px, 1.25vw);
    right: max(24px, 1.25vw);
	mask-image: url(../../img/icon-close.svg);
	-webkit-mask-image: url(../../img/icon-close.svg);
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
    background-color: currentColor;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
	border: none;
	transition: all 0.3s ease;
}

.popup-close:hover {
	transform: scale(1.1);
}

.popup-content .text-container p:first-child {
	margin-top: 0;
}


.popup-wrapper .popup-content .headline {
	word-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
    text-transform: uppercase;
}

/* Layout: wide */
.popup-wrapper.wide .popup-content {
    grid-template-columns: 1fr auto 1fr;
    grid-column-gap: var(--grid-gap);
}

.popup-wrapper.wide .popup-content .text-spinner {
    grid-area: 1/1/1/1;
}

.popup-wrapper.wide .popup-content .headline {
    grid-area: 1/2/1/2;
}

.popup-wrapper.wide .popup-content .sub-headline {
    grid-area: 2/1/2/span 3;
}

.popup-wrapper.wide .popup-content .text-container {
    grid-area: 3/1/3/span 3;
}

.popup-wrapper.wide .popup-content .btns-container {
    grid-area: 4/1/4/span 3;
}

/* Layout: narrow */
.popup-wrapper.narrow .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-wrapper.narrow .popup-outer {
    padding: var(--m-small) var(--m-large);
    max-width: max(960px, 44.53125vw);
}

.popup-wrapper.narrow .popup-content .sub-headline {
    text-wrap: balance;
}

@media (max-width: 767.98px) {
    .popup-wrapper.wide .popup-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-wrapper.narrow .popup-outer {
        padding: var(--m-small);
    }
}

@media (max-width: 575.98px) {
    .popup-outer {
        margin-left: var(--grid-gap);
        margin-right: var(--grid-gap);
    }

    .popup-wrapper.wide .popup-outer,
    .popup-wrapper.narrow .popup-outer {
        padding: var(--m-small) var(--grid-gap);
    }
}