/**************************
 * ACF Pinpoint Custom for LMC
 * Enqueue in Admin page for preview, and in VC element
 **************************/


/**************************
 * Pinpoint frame
 **************************/
.vii-acf-pinpoint, .vii-acf-pinpoint__frame {position:relative;}
.vii-acf-pinpoint__frame-image {background:var(--vii-color-primary); user-select:none; border-radius:10px; overflow:hidden;}
.vii-acf-pinpoint__frame-image img {width:100% !important; display:block; pointer-events:none;}

/**************************
 * Pinpoint dot
 **************************/
.vii-acf-pinpoint__pin:hover {z-index:3;}
.vii-acf-pinpoint__pin {position:absolute; z-index:2; transform:translate(-50%, -50%);}


/* dot */
.vii-acf-pinpoint__pin-dot {width:25px; height:25px; position:relative;}

/* dot > icon */
.vii-acf-pinpoint__pin-dot-icon {
    position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;
    border:2px solid #fff; border-radius:50%;
    background:#42b883; box-shadow:0 0 10px 0 #8e8e8e;
}

/* dot > radar */
.vii-acf-pinpoint__pin-dot:after {
    content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;
    border:1px solid #fff; border-radius:50%; background:#fff;
    animation:radar 1.2s infinite;
}
@keyframes radar {
    from {transform:scale(.8); opacity:1;}
    to {transform:scale(1.8); opacity:0;}
}

/* dot > plus icon */
.vii-acf-pinpoint__pin-dot svg {
    position:relative; z-index:3; width:100%; height:100%;
    transform:scale(.7);
}

/**************************
 * Pinpoint dot label
 **************************/
/* label */
@media (hover:hover) {
    .vii-acf-pinpoint__pin:hover .vii-acf-pinpoint__pin-label,
    .vii-acf-pinpoint:not(.admin) .vii-acf-pinpoint__frame:not(:hover) .vii-acf-pinpoint__pin-label {opacity:0; transform:translateX(-50%) scale(.5);}
}

.vii-acf-pinpoint__pin-label {
    position:absolute; top:calc(100% + 5px); left:50%; pointer-events:none;
    transform:translateX(-50%);
    background:rgba(255, 255, 255, 0.6); color:#000; border:1px solid #eee;
    padding:3px 10px; border-radius:4px;
    box-shadow:0 0 10px 0 #8e8e8e; backdrop-filter:blur(3px);
    text-align:center; white-space:nowrap;
    transition:all .3s ease; cursor:default;
    font-size:14px; line-height:1.2;
}

/**************************
 * Pinpoint popup
 **************************/
/* popup */
.vii-acf-pinpoint__pin-popup {
    background:#fff; box-shadow:0 0 0 1px #b5b5b5;
    padding:10px 15px; border-radius:8px;
    transition:all .3s ease;
}
.vii-acf-pinpoint__pin-popup.mobile {display:none;}
.vii-acf-pinpoint__pin-popup.mobile.easy-popup-enabled {display:block;}
.vii-acf-pinpoint__pin-popup.desktop {
    --popup-transform:translateX(-50%);
    --popup-transform-hover:translateX(-50%) scale(.8);
    --popup-space:calc(100% + 13px);
    --popup-arrow-space:calc(100% - 1px);

    display:none;
    position:absolute;
    min-width:160px;
    transform:var(--popup-transform);
}
.vii-acf-pinpoint__pin-popup.desktop:before {
    content:""; width:0; height:0; position:absolute;
    transform:var(--popup-transform);
}

@media (hover:hover) {
    .vii-acf-pinpoint__pin:not(:hover) .vii-acf-pinpoint__pin-popup.desktop {
        opacity:0; visibility:hidden;
        transform:var(--popup-transform-hover);
    }
    .vii-acf-pinpoint__pin-popup.desktop {display:block;}
}

/* popup  > text */
.vii-acf-pinpoint__pin-popup.desktop.type-text {text-align:center;}

/* popup  > wysiwyg */
.vii-acf-pinpoint__pin-popup.desktop.type-wysiwyg {
    min-width:300px; padding:20px;
}


/**************************
 * Pinpoint popup > position
 **************************/
/* popup > position > top */
.vii-acf-pinpoint__pin-popup.desktop.position-top {
    bottom:var(--popup-space); left:50%;
    transform-origin:center bottom;
}
.vii-acf-pinpoint__pin-popup.desktop.position-top:before {
    top:var(--popup-arrow-space); left:50%;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #fff;
}

/* popup > position > left */
.vii-acf-pinpoint__pin-popup.desktop.position-left {
    --popup-transform-hover:translateY(-50%) scale(.8);
    --popup-transform:translateY(-50%);
    right:var(--popup-space); top:50%;
    transform-origin:right center;
}
.vii-acf-pinpoint__pin-popup.desktop.position-left:before {
    top:50%; left:var(--popup-arrow-space);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:7px solid #fff;
}

/* popup > position > bottom */
.vii-acf-pinpoint__pin-popup.desktop.position-bottom {
    --popup-transform-hover:translateX(-50%) scale(.8);
    --popup-transform:translateX(-50%);
    top:var(--popup-space); left:50%;
    transform-origin:center top;
}
.vii-acf-pinpoint__pin-popup.desktop.position-bottom:before {
    left:50%; bottom:var(--popup-arrow-space);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #fff;
}

/* popup > position > right */
.vii-acf-pinpoint__pin-popup.desktop.position-right {
    --popup-transform-hover:translateY(-50%) scale(.8);
    --popup-transform:translateY(-50%);
    left:var(--popup-space); top:50%;
    transform-origin:left center;
}
.vii-acf-pinpoint__pin-popup.desktop.position-right:before {
    top:50%; right:var(--popup-arrow-space);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:7px solid #fff;
}


/**************************
 * Pinpoint popup > Custom
 **************************/
.vii-acf-pinpoint__pin-popup-item {
    min-width:auto; width:208px; text-align:center;
    background:transparent; padding-bottom:5px;
}

/* Product image */
.vii-acf-pinpoint__pin-popup-item__image {
    aspect-ratio:1; background-color:#fff; border-radius:5px;
    margin-bottom:8px; display:block;
}
.vii-acf-pinpoint__pin-popup-item__image > img {
    object-position:center center;
    height:100%; width:100%;
    min-height:100%; min-width:100%; max-height:100%; max-width:100%;
    object-fit:contain;
}

.vii-acf-pinpoint__pin-popup-item__title {
    display:block;
    font-size:15px; font-family:var(--vii-font-primary); font-weight:500;
    color:var(--vii-color-blue); text-transform:uppercase; letter-spacing:.08em; line-height:1.6;
    margin-bottom:4px; transition:var(--vii-transition);
}
.vii-acf-pinpoint__pin-popup-item__title:hover {color:var(--vii-color-secondary);}

.vii-acf-pinpoint__pin-popup-item .price {
    font-weight:500;
    color:#e61d12;
    display:block;
}


/**************************
 * Pinpoint responsive
 **************************/
@media only screen and (max-width:1024px) {
    .vii-acf-pinpoint__pin-popup.desktop {display:none;}
}
@media only screen and (max-width:850px) {
    .vii-acf-pinpoint__pin-label {display:none;}
    .vii-acf-pinpoint__pin-popup.desktop {display:none;}
    .vii-acf-pinpoint__frame:not(:hover) .vii-acf-pinpoint__pin-dot {opacity:.8;}

    /* dot */
    .vii-acf-pinpoint__pin-dot {width:18px; height:18px;}
}

.vii-acf-pinpoint-popup .easy-popup-inner {max-width:260px; margin:0 auto;}
.vii-acf-pinpoint-popup .vii-acf-pinpoint__pin-popup-item {max-width:unset; width:auto;}
.vii-acf-pinpoint-popup .easy-popup-close-button {top:auto; bottom:100%; padding:0; margin-bottom:3px;}
.vii-acf-pinpoint-popup .easy-popup-close-button svg {fill:#fff;}
.easy-popup-master {background:rgba(0, 0, 0, .5) !important;}