/**
 * Club popup styles. Namespaced .wdcp-* with a high z-index so it never clashes
 * with Betheme builder popups. The artwork box keeps a square-ish ratio so the
 * percent-positioned CTA hotspot stays aligned across viewports.
 */

.wdcp-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 26, 72, 0.55);
}

.wdcp-overlay.is-open {
    display: flex;
}

.wdcp-modal {
    position: relative;
    width: min(94vw, 720px);
    max-height: 92vh;
}

.wdcp-art {
    position: relative;
    width: 100%;
    line-height: 0;
}

.wdcp-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* The whole banner is the CTA link → go to the club page. */
.wdcp-cta {
    display: block;
    line-height: 0;
    border-radius: 16px;
}

.wdcp-cta:focus-visible {
    outline: 3px solid #5CC9F5;
    outline-offset: 2px;
}

.wdcp-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2; /* above the CTA hotspot so it can't be swallowed on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #24317C;
    background: #ffffff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* SVG close icon centres perfectly regardless of font metrics. */
.wdcp-close svg {
    display: block;
}

.wdcp-close:hover,
.wdcp-close:focus-visible {
    background: #EAF6FC;
    outline: none;
}

/* Lock background scroll while the popup is open. */
body.wdcp-lock {
    overflow: hidden;
}

@media (max-width: 480px) {
    .wdcp-close {
        top: 8px;
        right: 8px;
    }
}