/* Wrapper */
.upk-image-wrapper {
    position: relative;
    width: 100%;    
    overflow: hidden;
    border-radius: 0px;
}

/* Image: Always cover */
.upk-image-wrapper img {
    width: 100%;
    
    object-fit: cover;
    display: block;
}

/* "+" symbol */
.upk-plus {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 32px;
    font-weight: 300;
    color: white;
    background: rgba(0,0,0,0.35);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* CARD clickable */
.upk-card {
    cursor: pointer;
}

/* OVERLAY */
.upk-global-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.0);
    transition: background .35s ease;
    z-index: 99998;
    pointer-events: none;
}
.upk-global-overlay.active {
    background: rgba(0,0,0,0.45);
    pointer-events: all;
}

/* SIDEBAR */
.upk-sidebar {
    position: fixed;
    top: 0;
    right: -500px;
    width: 440px;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,0.12);
    transition: right .45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    padding: 40px;
    overflow-y: auto;
}
.upk-sidebar.active {
    right: 0;
}

/* Scrollbar */
.upk-sidebar::-webkit-scrollbar { width: 8px; }
.upk-sidebar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Mobile drawer */
@media(max-width: 768px){
    .upk-sidebar {
        width: 100%;
        height: 70vh;
        bottom: -70vh;
        right: 0;
        top: auto;
        border-radius: 20px 20px 0 0;
        transition: bottom .45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .upk-sidebar.active {
        bottom: 0;
    }
}

/* Close button */
.upk-close {
    font-size: 32px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
}

/* Hover Zoom Effect */
.upk-image-wrapper img {
    transition: transform .35s ease;
}

.upk-card:hover .upk-image-wrapper img {
    transform: scale(1.03);
}