/* =========================================================
   KH Welcome Popup — Premium V2
   - No bottom button
   - Close button floats outside the image
   - Click image, X, or backdrop to close
========================================================= */

:root{
    --kh-popup-max-width: 900px;
    --kh-popup-image-max-height: 84vh;
    --kh-popup-radius: 18px;
    --kh-popup-overlay: rgba(8, 12, 18, .80);
    --kh-popup-transition: 360ms cubic-bezier(.22, 1, .36, 1);
}

.kh-welcome-popup{
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:52px 30px 30px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity var(--kh-popup-transition),
        visibility var(--kh-popup-transition);
}

.kh-welcome-popup::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.08), transparent 40%),
        var(--kh-popup-overlay);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.kh-welcome-popup.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.kh-welcome-popup__overlay{
    position:absolute;
    inset:0;
    cursor:pointer;
}

.kh-welcome-popup__dialog{
    position:relative;
    z-index:2;
    width:min(92vw, var(--kh-popup-max-width));
    max-height:calc(100vh - 82px);
    overflow:visible;
    border-radius:var(--kh-popup-radius);
    transform:translateY(24px) scale(.97);
    opacity:0;
    transition:
        transform var(--kh-popup-transition),
        opacity var(--kh-popup-transition);
}

.kh-welcome-popup.active .kh-welcome-popup__dialog{
    transform:translateY(0) scale(1);
    opacity:1;
}

.kh-welcome-popup__image-wrapper{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    max-height:var(--kh-popup-image-max-height);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--kh-popup-radius);
    background:#0d1118;
    box-shadow:
        0 42px 110px rgba(0,0,0,.58),
        0 12px 34px rgba(0,0,0,.32);
    cursor:pointer;
}

.kh-welcome-popup__image{
    display:block;
    width:100%;
    height:auto;
    max-height:var(--kh-popup-image-max-height);
    object-fit:contain;
    object-position:center;
    border-radius:inherit;
}

/* Floating outside the top-right corner */
.kh-welcome-popup__close{
    position:absolute;
    top:-25px;
    right:-25px;
    z-index:5;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    padding:0;
    border:2px solid rgba(255,255,255,.90);
    border-radius:999px;
    background:rgba(11,15,22,.92);
    color:#fff;
    font:inherit;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    box-shadow:
        0 10px 28px rgba(0,0,0,.42),
        inset 0 0 0 4px rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.kh-welcome-popup__close:hover{
    transform:scale(1.08);
    background:#111722;
    border-color:#fff;
}

.kh-welcome-popup__close:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:4px;
}

body.kh-popup-open{
    overflow:hidden;
    padding-right:var(--kh-scrollbar-compensation, 0px);
}

@media (max-width:767px){
    :root{
        --kh-popup-max-width:94vw;
        --kh-popup-image-max-height:68vh;
        --kh-popup-radius:14px;
    }

    .kh-welcome-popup{
        padding:46px 14px 18px;
    }

    .kh-welcome-popup__dialog{
        width:min(94vw, 620px);
        max-height:calc(100vh - 64px);
    }

    .kh-welcome-popup__close{
        top:-20px;
        right:-4px;
        width:44px;
        height:44px;
        font-size:28px;
    }
}

@media (max-height:700px){
    :root{
        --kh-popup-image-max-height:66vh;
    }
}

@media (prefers-reduced-motion:reduce){
    .kh-welcome-popup,
    .kh-welcome-popup__dialog,
    .kh-welcome-popup__close{
        transition:none !important;
    }
}