/* 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-sm) 0;
	justify-content: center;
	z-index: 9999;
}

body:not(.wp-admin) .popup-wrapper::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #382E28;
  mix-blend-mode: multiply;
  opacity: .5;
}

.popup-outer {
    text-align: center;
    padding: var(--m-md) var(--m-lg);
    border-radius: max(20px, 1.5625vw);
    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.875vw);
    right: max(24px, 1.875vw);
	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 .logo {
	max-width: max(128px, 8.515625vw);
}

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

.popup-wrapper .popup-content .headline p:first-child {
    margin-top: 0;
}

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

@media (max-width: 767.98px) {
    .popup-wrapper .popup-outer {
        padding: var(--m-sm);
    }
}

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

    .popup-wrapper .popup-outer {
        padding: var(--m-sm) var(--grid-gap);
    }
}