/* ── Simple Popup ──────────────────────────────────────────────────────────── */

.sp-popup {
    position: fixed;
    bottom: 130px;
    right: 130px;
    z-index: 99999;

    /* 4:3 ratio at max 400 px width */
    width: min(400px, calc(100vw - 280px));
    aspect-ratio: 4 / 3;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

    /* Slide-in from bottom-right */
    animation: sp-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sp-slide-in {
    from {
        opacity: 0;
        transform: translate(40px, 40px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.sp-popup.sp-hidden {
    display: none;
}

/* Close button — outside top-right corner */
.sp-popup-close {
    position: absolute;
    top: -14px;
    right: -14px;

    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;

    background: #fff;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, color 0.15s;
}

.sp-popup-close:hover {
    background: #333;
    color: #fff;
}

/* Mobile: shrink when viewport is narrow */
@media (max-width: 600px) {
    .sp-popup {
        bottom: 20px;
        right: 20px;
        width: calc(100vw - 40px);
    }
}