#bos-popup-overlay { position: fixed;
inset: 0;
z-index: 99990;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2rem); background-color: rgba(0, 0, 0, 0.52);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px); opacity: 0;
visibility: hidden;
transition:
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
} #bos-popup-overlay:not([hidden]) {
visibility: visible;
}
#bos-popup-overlay.bos-popup--visible {
opacity: 1;
} #bos-popup-box {
position: relative; background-color: var(--bos-popup-bg, var(--wp--preset--color--background, #ffffff));
color: var(--bos-popup-text, var(--wp--preset--color--foreground, #1a1a1a)); border-radius: var(--wp--custom--border-radius, clamp(8px, 1.5vw, 16px)); --bos-box-pad-v: clamp(1.75rem, 5vw, 3rem);
--bos-box-pad-h: clamp(1.75rem, 5vw, 3.5rem);
padding: var(--bos-box-pad-v) var(--bos-box-pad-h);
width: min(560px, 100%);
max-height: 90svh;
overflow-y: auto;
overscroll-behavior: contain; box-shadow:
0 2px  4px rgba(0, 0, 0, 0.04),
0 8px 24px rgba(0, 0, 0, 0.10),
0 24px 64px rgba(0, 0, 0, 0.12); transform: translateY(24px) scale(0.97);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border-top: 3px solid var(--bos-popup-accent, var(--wp--preset--color--primary, transparent));
}
#bos-popup-overlay.bos-popup--visible #bos-popup-box {
transform: translateY(0) scale(1);
} #bos-popup-close {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer; color: var(--bos-popup-close, var(--bos-popup-text, var(--wp--preset--color--foreground, #1a1a1a)));
opacity: 0.55;
transition:
opacity 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
#bos-popup-close:hover,
#bos-popup-close:focus-visible {
opacity: 1;
background-color: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
outline: none;
} #bos-popup-close svg {
width: 18px;
height: 18px;
flex-shrink: 0;
} #bos-popup-headline {
margin: 0 2.5rem 0.75rem 0; font-size: clamp(1.25rem, 3vw, 1.6rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em; font-family: var(--wp--preset--font-family--heading, inherit);
color: var(--bos-popup-text, var(--wp--preset--color--foreground, inherit));
}
.bos-popup-text {
margin-top: 0.5rem;
font-size: clamp(0.9rem, 2vw, 1.05rem);
line-height: 1.65;
color: var(--bos-popup-text, var(--wp--preset--color--foreground, inherit));
opacity: 0.85;
font-family: var(--wp--preset--font-family--body, inherit);
}
.bos-popup-text p { margin: 0 0 0.75em; }
.bos-popup-text p:last-child { margin-bottom: 0; }
.bos-popup-text a {
color: var(--bos-popup-accent, var(--wp--preset--color--primary, inherit));
text-decoration: underline;
text-underline-offset: 0.2em;
} .bos-popup-cta {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin-top: 1.5rem;
padding: 0.65em 1.6em; border-radius: var(--wp--custom--button-border-radius, var(--wp--custom--button--border-radius, 100px));
background-color: var(--bos-popup-accent, var(--wp--preset--color--primary, #0073aa));
color: var(--wp--preset--color--background, #ffffff);
font-family: var(--wp--preset--font-family--heading, inherit);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition:
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.bos-popup-cta:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
color: var(--wp--preset--color--background, #ffffff);
text-decoration: none;
}
.bos-popup-cta:focus-visible {
outline: 3px solid var(--bos-popup-accent, var(--wp--preset--color--primary, #0073aa));
outline-offset: 3px;
}
.bos-popup-cta:active {
transform: translateY(0);
filter: brightness(0.95);
} @media (prefers-reduced-motion: reduce) {
#bos-popup-overlay,
#bos-popup-box,
#bos-popup-close,
.bos-popup-cta {
transition: none !important;
animation: none !important;
}
} .bos-popup-image {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
} .bos-popup-image--top {
display: block;
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: var(--wp--custom--border-radius, clamp(8px, 1.5vw, 16px))
var(--wp--custom--border-radius, clamp(8px, 1.5vw, 16px))
0 0;
} #bos-popup-box.bos-popup-box--img-top {
padding: 0;
border-top: none; } #bos-popup-box.bos-popup-box--img-top .bos-popup-content {
padding: var(--bos-box-pad-v) var(--bos-box-pad-h);
} #bos-popup-box.bos-popup-box--img-top #bos-popup-close {
background-color: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--bos-popup-close, #1a1a1a);
opacity: 1;
border-color: transparent;
} .bos-popup-image--middle,
.bos-popup-image--bottom {
width: 100%;
max-height: 200px;
border-radius: calc(var(--wp--custom--border-radius, clamp(8px, 1.5vw, 16px)) * 0.6);
margin: 1rem 0;
}
.bos-popup-image--bottom {
margin-bottom: 0.25rem;
} #bos-popup-box.bos-popup--center {
text-align: center;
}
#bos-popup-box.bos-popup--center .bos-popup-cta { margin-left: auto;
margin-right: auto;
display: inline-flex;
} #bos-popup-box::-webkit-scrollbar {
width: 6px;
}
#bos-popup-box::-webkit-scrollbar-track {
background: transparent;
}
#bos-popup-box::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}