/* Widget Grid */
.zoom-instagram-widget__follow-me {
    margin-top: 15px;
    text-align: center;
}

.wpzoom-instagram-widget-select-feed select {
    max-width: 100%;
}

.wp-block-wpzoom-instagram-block,
.zoom-instagram {

    .zoom-instagram {
        background: none;
        padding: 0;
        border: none;
    }

}

.zoom-instagram,
.wpz-insta-lightbox {

    img[src=""],
    img:not([src]) {
      visibility: hidden;
    }

}


/* styling just for the block */
.zoom-instagram {
    font-size: 14px;
    // overflow: hidden; // TODO: remove this after testing
    display: block; /* fix for Neve theme's display: flex; */


    img {
        height: auto;
        max-width: 100%;
    }


    form[disabled] {
        pointer-events: none;

        &:not(.loading) {
            opacity: 0.5;
        }
    }

    .zoom-instagram-widget__header {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin: 0 0 25px;


        .wpz-insta-stats {
            display: flex;
            gap: 20px;
            margin: 5px 0;

            .wpz-insta-posts,
            .wpz-insta-followers,
            .wpz-insta-following {

                strong {
                    font-weight: 600;
                }
            }
        }



        .zoom-instagram-widget__header-column-left {
            position: relative;

            &.has-stories {
                margin: 3px 0 0 3px;

                &:before {
                    content: '';
                    position: absolute;
                    top: -4px;
                    left: -4px;
                    right: -4px;
                    bottom: -4px;
                    // background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
                    background:radial-gradient(white 66%, transparent 0), linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
                    border-radius: 50%;
                    z-index: 0;
                }

                img {
                    position: relative;
                    z-index: 1;
                    vertical-align: top;
                    border: .8px solid rgba(0,0,0,.3);
                    box-shadow: 0 0 0px 2px #fff;
                }
            }
        }


        .zoom-instagram-widget__header-column-left {
            min-width: 70px;

            img {
                height: 70px;
                width: 70px;
                border-radius: 50%;
            }
        }

        .zoom-instagram-widget__header-column-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: left;
        }

        .zoom-instagram-widget__header-name {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.5;
            padding: 0;
            margin: 0 0 5px;
            letter-spacing: 0;
        }

        .zoom-instagram-widget__header-user {
            font-weight: 600;
            font-size: 13px;
            line-height: normal;
            padding: 0;
            margin: 0;

            a {
                text-decoration: none;
            }

            .wpz-insta-badge {
                display: inline-block;
                vertical-align: middle;
                margin-left: 5px;
            }
        }

        .zoom-instagram-widget__header-bio {
            font-size: 13px;
            font-weight: normal;
            line-height: 1.6;
            padding: 0;
            margin: 6px 0 0;
            text-align: left;
        }
    }

    .zoom-instagram-widget__footer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        margin: 25px 0 0;

        > * {
            display: block;
        }


        .wpz-insta-view-on-insta-button,
        .wpzinsta-pro-load-more input[type='submit'],
        .wpzinsta-pro-load-more-wrapper .wpzinsta-pro-load-more-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            text-transform: none;
            letter-spacing: normal;
            line-height: 18px;
            color: #fff;
            background-color: #3496ff;
            padding: 8px 12px;
            border: none;
            border-radius: 3px;
            margin: 0;
            transition: all 0.3s linear;

            &:hover,
            &:active {
                text-decoration: none;
                opacity: .8;
            }
        }

        // New AJAX load more button
        .wpzinsta-pro-load-more-wrapper {
            margin: 0;
            
            .wpzinsta-pro-load-more-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0;
                cursor: pointer;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
                font-size: 14px;
                font-weight: 500;
                text-decoration: none;
                text-transform: none;
                letter-spacing: normal;
                line-height: 18px;
                color: #fff;
                background-color: #3496ff;
                padding: 8px 12px;
                border: none;
                border-radius: 3px;
                margin: 0;
                transition: all 0.3s linear;

                &:hover,
                &:active {
                    text-decoration: none;
                    opacity: .8;
                }

                &::before {
                    content: '';
                    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 50 50' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: center;
                    height: 18px;
                    width: 0;
                    transition: all 0.3s linear;
                }

                &:disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
            }

            &.loading {
                .wpzinsta-pro-load-more-btn {
                    gap: 6px;

                    &::before {
                        width: 18px;
                    }
                }
            }

            &[data-disabled="true"] {
                .wpzinsta-pro-load-more-btn {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
            }
        }

        // Legacy support for old form-based load more
        .wpzinsta-pro-load-more {
            margin: 0;

            button[type='submit'] {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                cursor: pointer;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
                font-size: 14px;
                font-weight: 500;
                text-decoration: none;
                text-transform: none;
                letter-spacing: normal;
                line-height: 18px;
                color: #fff;
                background-color: #3496ff;
                padding: 8px 12px;
                border: none;
                border-radius: 3px;
                margin: 0;
                transition: all 0.3s linear;

                &:hover,
                &:active {
                    text-decoration: none;
                    opacity: .8;
                }

                &::before {
                    content: '';
                    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 50 50' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: center;
                    height: 18px;
                    width: 0;
                    transition: all 0.3s linear;
                }
            }

            &.loading {
                button[type='submit'] {
                    gap: 6px;

                    &::before {
                        width: 18px;
                    }
                }
            }
        }
    }

    // Hide Load more on fullwidth/carousel (button is always in DOM for preview).
    &.layout-fullwidth,
    &.layout-carousel {
        .zoom-instagram-widget__footer .wpzinsta-pro-load-more-wrapper {
            display: none !important;
        }
    }

    .zoom-instagram-widget__items-wrapper {
        // overflow: hidden; // TODO: remove this after testing
    }

    .zoom-instagram-widget__items {
        list-style: none !important;
        padding: 0;
        margin: 0;


        &::before,
        &::after {
            display: none;
        }

        .zoom-instagram-widget__item .zoom-instagram-link {
            height: 100%;
        }


        &.layout-grid {
            .zoom-instagram-widget__item {
                img:not(.wpz-insta-product-popover-item-img) {
                    object-fit: cover;
                    width: 100%;
                    aspect-ratio: 1/1;
                    height: 100% !important;
                }
            }
        }

        &.layout-fullwidth {
            white-space: nowrap;
            display: grid;
            // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-template-rows:auto;
            grid-auto-rows: 0;

            .zoom-instagram-widget__item {
                img:not(.wpz-insta-product-popover-item-img) {
                    aspect-ratio: 1;
                    height: 100% !important;
                }
            }

        }

        &.layout-carousel {
            display: flex;
            height: auto !important;
            overflow: visible;

            &.zoom-instagram-widget__items--no-js {

                .zoom-instagram-widget__item {
                    height: auto;
                    flex: auto;
                }

            }

            .zoom-instagram-widget__item {
                height: auto;

                img:not(.wpz-insta-product-popover-item-img) {
                    aspect-ratio: 1;
                    object-fit: cover;
                    height: auto;
                    width: 100%;
                }
            }
        }
    }

}


.layout-legacy.zoom-instagram-widget__items {

    list-style: none !important;

    .zoom-instagram-widget__item {
        float: left;
        position: relative;
        margin-top: 0 !important;
        padding: 0;
    }

    .zoom-instagram-widget__overlay {
        position: relative;
    }

}


.zoom-instagram-widget-user-info-middle-cell {
    padding: 0px 20px;
}

.zoom-instagram-widget-user-info {
    .zoom-instagram-widget-user-info-fullname {
        font-weight: 600;
        font-size: 16px;
    }

    .zoom-instagram-widget-user-info-names-wrapper {
        padding-right: 20px;
        word-break: break-word;
    }

    .zoom-instagram-widget-user-info-username {
        font-size: 14px;
        font-weight: 600;
        word-break: break-all;
    }
}

.zoom-instagram-widget-user-info-bio {
    text-align: left;
    font-size: 14px;
    margin: 0 0 15px;
}



.zoom-instagram-widget__items {

    .zoom-instagram-widget__item .zoom-instagram-link {
        display: block;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .svg-icon {
        position: absolute;
        width: 20px;
        padding: 0;
        height: 20px;
        display: flex;
        top: 8px;
        right: 8px;
        z-index: 1;
        transition: opacity 0.25s ease-in-out;
        filter: drop-shadow( 1px 2px 1px rgba(0, 0, 0, .07));


    }
}

.zoom-instagram-widget__item {
    position: relative;
    transition: all 0.1s ease-in-out;
    list-style-type: none !important;

    &.new {
        opacity: 0;
        transform: scale(0);
        transform-origin: center;
        animation: show 500ms linear forwards;
    }

    .zoom-instagram-widget__item-inner-wrap {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    img {
        object-fit: cover;
        object-position: center;
        height: 100%;
        transition: all .5s cubic-bezier(.215,.61,.355,1);
        will-change: transform;
        margin-bottom: 0 !important;
    }

    &:hover {

        img {
            transform: scale(1.07);
        }
    }
}

/* Prevent extra space conflict from theme */
.widget_block .zoom-instagram-widget__items ul li.zoom-instagram-widget__item,
.widget.zoom-instagram-widget ul li.zoom-instagram-widget__item,
.widget.zoom-new-instagram-widget ul li.zoom-instagram-widget__item {
    padding: 0;
}

.widget_block .zoom-instagram-widget__items-wrapper,
.widget.zoom-new-instagram-widget .zoom-instagram-widget__items-wrapper {
    // overflow: hidden; // TODO: remove this after testing
}

.widget_block .zoom-instagram-widget__items,
.widget.zoom-new-instagram-widget .zoom-instagram-widget__items {

    padding: 0;
    margin: 0;

    &::before,
    &::after {
        display: none;
    }

    &.layout-grid {
        .zoom-instagram-widget__item {
            img:not(.wpz-insta-product-popover-item-img) {
                width: 100%;
                aspect-ratio: 1/1;
            }
        }
    }

    &.layout-fullwidth {
        // display: flex;
        // width: 5000px;

        .zoom-instagram-widget__item {
            img:not(.wpz-insta-product-popover-item-img) {
                aspect-ratio: 1;
            }
        }
    }

    &.layout-carousel {
        display: flex;
        height: auto;

        .zoom-instagram-widget__item {
            height: auto;

            img:not(.wpz-insta-product-popover-item-img) {
                aspect-ratio: 1;
                height: auto;
                width: 100%;
            }
        }
    }

    .zoom-instagram-widget__item {

        position: relative;
        margin: 0;
        list-style-type: none;

        &.new {
            opacity: 0;
            transform: scale(0);
            transform-origin: center;
            animation: show 500ms linear forwards;
        }

        .zoom-instagram-widget__item-inner-wrap {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        img {
            object-fit: cover;
            object-position: center;
            height: 100%;
        }

        .zoom-instagram-link {
            // padding-bottom: 100%;
        }
    }
}


/* View on Instagram button */
.ig-b- {
    display: inline-block;
}

a.ig-b-v-24 {
   border-color: #3897f0;
   color: #3897f0 !important;
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   font-weight: 600 !important;
   outline: none;
   overflow: hidden;
   white-space: nowrap;
   -webkit-appearance: none;
   font-family: sans-serif;
   padding: 5px 15px;
   font-size: 14px;
   transition: all 0.15s ease-in-out;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-decoration: none !important;
}

a.ig-b-v-24:hover {
    background: #3897f0;
    border-color: #3897f0;
    color: #ffffff !important;
}

.zoom-instagram-widget__item .hover-controls {
    opacity: 0;
    z-index: 9;
    width: 100%;
    text-align: center;
    transition: opacity 0.25s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .zoom-instagram-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        svg {
            width: 100%;
            height: 100%;
        }
        &.icon-heart-outline {
            position:relative;
            top: 1px;
        }
    }

}

.zoom-instagram-widget__items[data-lightbox="1"] .zoom-instagram-widget__item .zoom-instagram-icon-wrap {
    pointer-events: none;
}


.zoom-instagram-widget__items[data-lightbox="1"] .zoom-instagram-widget__item img {
    cursor: pointer;
}



.zoom-instagram-widget__item {


    .hover-controls ~ .zoom-instagram-icon-wrap {
        bottom: 10%;
        pointer-events: all;
    }

    .hover-layout.small {
        .hover-controls ~ .zoom-instagram-icon-wrap {
            bottom: 6%;
        }

        .zoom-instagram-icon-wrap {
            bottom: calc(50% - 15px);
        }
    }

    .zoom-instagram-icon-wrap {
        bottom: calc(50% - 15px);
        height: 30px;
        width: 100%;
        position: absolute;
        z-index: 9;
        text-align: center;
    }

    &:hover .hover-controls {
        opacity: 1;
    }

    .zoom-instagram-icon-wrap {
        opacity: 0;
        transition: opacity 0.25s ease-in-out;

        .zoom-svg-instagram-stroke {
            transform: scale(.50);
        }


    }

    &:hover .zoom-instagram-icon-wrap {
        opacity: 1;

        .zoom-svg-instagram-stroke {
            transform: scale(.90);
        }

    }

    .hover-controls {
        .dashicons {
            font-size: 20px;
            width: 20px;
            height: 20px;
            color: #ffffff;
            vertical-align: middle;
        }

        .counter {
            padding-left: 5px;
            padding-right: 12px;
            font-weight: 500;
            color: #ffffff;
            font-size: 14px;
            opacity: 0.8;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
                "Helvetica Neue", sans-serif;
        }
    }
}




.zoom-instagram-widget__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    &:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
    }

    &:hover:after {
        opacity: 0.5;
        background-color: #000000;
    }
}

.zoom-instagram-widget__black:after {
    background-color: #000000;
}

.zoom-svg-instagram-simple {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICAgIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIKICAgICB2aWV3Qm94PSIwIDAgNTAgNTAiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjsiPiAgICA8cGF0aCBzdHlsZT0ibGluZS1oZWlnaHQ6bm9ybWFsO3RleHQtaW5kZW50OjA7dGV4dC1hbGlnbjpzdGFydDt0ZXh0LWRlY29yYXRpb24tbGluZTpub25lO3RleHQtZGVjb3JhdGlvbi1zdHlsZTpzb2xpZDt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDt0ZXh0LXRyYW5zZm9ybTpub25lO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbCIgZD0iTSAxNiAzIEMgOC44MzI0ODM5IDMgMyA4LjgzMjQ4MzkgMyAxNiBMIDMgMzQgQyAzIDQxLjE2NzUxNiA4LjgzMjQ4MzkgNDcgMTYgNDcgTCAzNCA0NyBDIDQxLjE2NzUxNiA0NyA0NyA0MS4xNjc1MTYgNDcgMzQgTCA0NyAxNiBDIDQ3IDguODMyNDgzOSA0MS4xNjc1MTYgMyAzNCAzIEwgMTYgMyB6IE0gMTYgNSBMIDM0IDUgQyA0MC4wODY0ODQgNSA0NSA5LjkxMzUxNjEgNDUgMTYgTCA0NSAzNCBDIDQ1IDQwLjA4NjQ4NCA0MC4wODY0ODQgNDUgMzQgNDUgTCAxNiA0NSBDIDkuOTEzNTE2MSA0NSA1IDQwLjA4NjQ4NCA1IDM0IEwgNSAxNiBDIDUgOS45MTM1MTYxIDkuOTEzNTE2MSA1IDE2IDUgeiBNIDM3IDExIEEgMiAyIDAgMCAwIDM1IDEzIEEgMiAyIDAgMCAwIDM3IDE1IEEgMiAyIDAgMCAwIDM5IDEzIEEgMiAyIDAgMCAwIDM3IDExIHogTSAyNSAxNCBDIDE4LjkzNjcxMiAxNCAxNCAxOC45MzY3MTIgMTQgMjUgQyAxNCAzMS4wNjMyODggMTguOTM2NzEyIDM2IDI1IDM2IEMgMzEuMDYzMjg4IDM2IDM2IDMxLjA2MzI4OCAzNiAyNSBDIDM2IDE4LjkzNjcxMiAzMS4wNjMyODggMTQgMjUgMTQgeiBNIDI1IDE2IEMgMjkuOTgyNDA3IDE2IDM0IDIwLjAxNzU5MyAzNCAyNSBDIDM0IDI5Ljk4MjQwNyAyOS45ODI0MDcgMzQgMjUgMzQgQyAyMC4wMTc1OTMgMzQgMTYgMjkuOTgyNDA3IDE2IDI1IEMgMTYgMjAuMDE3NTkzIDIwLjAxNzU5MyAxNiAyNSAxNiB6IiBmb250LXdlaWdodD0iNDAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgd2hpdGUtc3BhY2U9Im5vcm1hbCIgb3ZlcmZsb3c9InZpc2libGUiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
    background-size: 100%;
}

.zoom-svg-instagram-stroke {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;base64, ') 50% 50% no-repeat;
    background-size: 100%;
    transition: all .5s cubic-bezier(.215,.61,.355,1);

}

.zoom-instagram-widget__item .hover-layout.small {
    .hover-controls .dashicons {
        font-size: 15px;
        width: 15px;
        height: 15px;
    }

    .zoom-instagram-icon-wrap .zoom-svg-instagram-stroke {
        width: 18px;
        height: 18px;
    }

    .hover-controls .counter {
        padding-left: 5px;
        padding-right: 12px;
        font-size: 13px;
    }
    .hover-controls .counter:last-child {
        padding-right: 0;
    }
}





 /** Instagram user info **/

 .zoom-instagram-widget-user-info {
     display: flex;
     padding: 0 0px 20px;


     .zoom-instagram-widget-user-info-picture {
         flex: 1;

         img {
             border-radius: 50%;
         }
     }

     .zoom-instagram-widget-user-info-meta {
         display: flex;
         flex: 3;
         flex-direction: column;
         margin-left: 15px;
         text-align: left;
         justify-content: center;
     }

     .zoom-instagram-widget-user-info-about-data {
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
     }

     .zoom-instagram-widget-user-info-stats {
         font-size: 14px;
         line-height: 1.2;
         justify-content: space-between;
         display: flex;
         text-align: center;
     }

     .zoom-instagram-widget-user-info-follow-button {
         padding: 0 24px;
         margin-top: 10px;
         background: #3897f0;
         color: #fff !important;
         font-size: 14px;
         font-weight: 600;
         line-height: 26px;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         text-transform: none;
         border-radius: 3px;
         outline: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         display: block;
         border: none;
         box-shadow: none;
         text-decoration: none !important;

         &:hover {
             color: #fff;
             opacity: 0.8;
             box-shadow: none;
             border: none;
             text-decoration: none;
         }
     }

     .zoom-instagram-widget-user-info-counts {
         font-weight: 600;
     }

     .zoom-instagram-widget-user-info-counts-subhead {
         opacity: 0.7;
         font-size: 14px;
     }
 }




.zoom-instagram-widget__items .zoom-instagram-widget__item.media-icons-normal .svg-icon {
    opacity: 1;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.media-icons-normal:hover .svg-icon {
    opacity: 0;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.media-icons-hover .svg-icon {
    opacity: 0;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.media-icons-hover:hover .svg-icon {
    opacity: 1;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.media-icons-hover.media-icons-normal .svg-icon {
    opacity: 1;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item .zoom-instagram-date {
    position: absolute;
    display: flex;
    right: 10px;
    bottom: 5px;
    z-index: 1;
    font-weight: 500;
    color: #fff;
    transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.date-hover .zoom-instagram-date {
    opacity: 0;
}

.zoom-instagram-widget__items .zoom-instagram-widget__item.date-hover:hover .zoom-instagram-date {
    opacity: .6;
}

/** Lightbox **/
.wpzoom-lightbox .mfp-inline-holder .mfp-content {
    max-width: none;
    height: 100%;
}

.wpzoom-lightbox .mfp-container {
    backdrop-filter: blur(10px);
}


.wpz-insta-lightbox {
    pointer-events: all;
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    background-color: white;
    border-radius: 4px;
    max-height: 100%;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
}



.wpz-insta-lightbox-wrapper {

    display: flex;
    justify-content: center;
    pointer-events: none;
    height: 80vh;

    position: relative;
    top: 50%;
    transform: translateY(-50%);


    .wpz-insta-lightbox .details-wrapper {
        width: 30%;

        .wpz-insta-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #efefef;

            .wpz-insta-avatar img {
                width: 42px;
                height: 42px;
                border-radius: 50%;
            }

            .wpz-insta-username a,
            .wpz-insta-follow a {
                color: #262626;
                font-weight: 600;
                text-decoration: none;
                font-size: 14px;
            }

            .wpz-insta-username a:hover {
                text-decoration: underline;
            }

            .wpz-insta-follow a {
                color: #0095f6;
            }

            > div {
                margin-right: 13px;
                min-width: 42px;
            }

            .wpz-insta-buttons {
                display: flex;

                > div {
                    padding: 5px;
                }
            }
        }

        .wpz-insta-caption {
            color: #262626;
            line-height: 1.5;
            font-size: 14px;
            padding: 16px;
            font-weight: normal;
            overflow-y: scroll;
            max-height: 384px;
            min-height: 80px;
            border-bottom: 1px solid #efefef;
        }
    }
}


.wpzoom-lightbox {
    &.mfp-gallery {
        z-index: 100000;
        pointer-events: none;
    }

    button.mfp-close {
        pointer-events: all;
        color: #fff;
        font-size: 50px;
        font-weight: 100;
        margin-top: 25px;
        margin-right: 15px;
    }

    .mfp-prevent-close {
        pointer-events: all;
    }

    button.mfp-close:hover {
        text-decoration: none;
    }
}


.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .wpz-insta-date {
    font-size: 11px;
    padding: 16px;
    color: #8e8e8e;
    flex: 1;
}

.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .wpz-insta-counts {
    display: flex;
    gap: 16px;
    padding: 0 16px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #262626;

    .wpz-insta-likes,
    .wpz-insta-comments {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .wpz-insta-likes .dashicons-heart {
        color: #c0c7ca;
    }

    .wpz-insta-comments .dashicons-admin-comments {
        color: #c0c7ca;
    }
}

.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .image-wrapper {
    flex-grow: 1;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 70%;
    background: #000;
    border-radius: 4px 0 0 4px;
    overflow: hidden;

    & > img,
    .wpzoom-swiper-image {
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
        min-height: 100%;
        display: block;
        margin: 0 auto;
        padding: 0;

        &.blurred {
            // filter: blur(12px);
        }
    }
    .wpz-no-reel-link-wrapper {

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:rgba($color: #000, $alpha: 0.2);
        display: flex;
        justify-content: center;
        align-items: center;

        .wpz-no-reel-link {
            font-size: 14px;
            padding:10px 20px;
            color: #262626;
            background-color: rgba(255,255,255,.7);
            border-radius: 50px;
            line-height: 1.4;
            text-decoration: none;
            transition: all .2s ease;

            &:hover {
                background-color: rgba(255,255,255,.9);
            }
        }
    }


}


.wpz-insta-lightbox-wrapper > .swiper {
    pointer-events: none;
    width: 1000px;

    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 25px;
    }

}

.wpz-insta-lightbox-wrapper video {
    height: 100%;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}


.wpz-insta-lightbox-wrapper {

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev,
    .swiper-button-prev,
    .swiper--rtl .swiper-button-next {
        background-image: none;
    }

}



.wpz-insta-lightbox-wrapper > .swiper .swiper .swiper-button-prev,
.wpz-insta-lightbox-wrapper > .swiper .swiper .swiper-button-next {
    --swiper-navigation-size: 30px;
    color: #000;
    background: #fff;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    border-radius: 50%;
}

.wpz-insta-lightbox-wrapper > .swiper .swiper .swiper-button-prev::after,
.wpz-insta-lightbox-wrapper > .swiper .swiper .swiper-button-next::after {
    font-size: 16px;
}

.wpz-insta-lightbox-wrapper > .swiper > .swiper-wrapper {
    pointer-events: all;
}

.wpz-insta-lightbox-wrapper > .swiper > .swiper-button-prev,
.wpz-insta-lightbox-wrapper > .swiper > .swiper-button-next {
    position: fixed;
    pointer-events: all;
}

.wpz-insta-lightbox-wrapper > .swiper .swiper-button-prev,
.wpz-insta-lightbox-wrapper > .swiper .swiper-button-next {
    color: #fff;
    opacity: 0.75;
}

.wpz-insta-lightbox-wrapper > .swiper .swiper-button-prev:hover,
.wpz-insta-lightbox-wrapper > .swiper .swiper-button-next:hover {
    opacity: 1;
}

.wpz-insta-lightbox-wrapper > .swiper .swiper-button-prev.swiper-button-disabled,
.wpz-insta-lightbox-wrapper > .swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0.25 !important;
}

.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

/* Linked product block in lightbox (before header) */
.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .wpz-insta-lightbox-product {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #efefef;
    background: #fafafa;

    .wpz-insta-lightbox-product__item {
        &:not(:last-child) {
            border-bottom: 1px solid #efefef;
            padding-bottom: 12px;
        }
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        line-height: 1;

        &:hover {
            opacity: 0.8;
        }
    }

    .wpz-insta-lightbox-product__link {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: inherit;
    }

    .wpz-insta-lightbox-product__img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .wpz-insta-lightbox-product__info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .wpz-insta-lightbox-product__title {
        font-size: 14px;
        font-weight: 600;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wpz-insta-lightbox-product__price {
        font-size: 13px;
        color: #262626;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;

        .woocommerce-Price-amount {
            font-weight: 600;
        }

        // Hide screen reader text
        .screen-reader-text {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        // Original price (strikethrough)
        del {
            color: #8e8e8e;
            font-weight: 400;
            text-decoration: line-through;
            opacity: 0.8;

            .woocommerce-Price-amount {
                font-weight: 400;
            }
        }

        // Sale price
        ins {
            text-decoration: none;
            color: #262626;
            font-weight: 600;

            .woocommerce-Price-amount {
                font-weight: 600;
            }
        }
    }

    .wpz-insta-lightbox-product__buy-now {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.2s;
        text-transform: none;
        line-height: 1;
        border: none;

        &:hover {
            background-color: var(--wpz-insta-buy-now-hover, #3496ff) !important;
        }
    }

    // Card layout styles
    &.wpz-insta-lightbox-product--card {
        padding: 16px;
        gap: 0;
        background: #fff;

        .wpz-insta-lightbox-product__card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100%;
        }

        .wpz-insta-lightbox-product__card-link {
            display: block;
            text-decoration: none;
            margin-bottom: 12px;
        }

        .wpz-insta-lightbox-product__card-img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 8px;
        }

        .wpz-insta-lightbox-product__card-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
            width: 100%;
        }

        .wpz-insta-lightbox-product__card-title {
            font-size: 15px;
            font-weight: 600;
            color: #262626;
        }

        .wpz-insta-lightbox-product__card-price {
            font-size: 14px;
            color: #262626;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;

            .woocommerce-Price-amount {
                font-weight: 600;
            }

            // Original price (strikethrough)
            del {
                color: #8e8e8e;
                font-weight: 400;
                text-decoration: line-through;
                opacity: 0.8;

                .woocommerce-Price-amount {
                    font-weight: 400;
                }
            }

            // Sale price
            ins {
                text-decoration: none;
                color: #262626;
                font-weight: 600;

                .woocommerce-Price-amount {
                    font-weight: 600;
                }
            }
        }

        .wpz-insta-lightbox-product__card-button {
            display: block;
            text-decoration: none;
            transition: background-color 0.2s;
            padding: 12px 16px;
            font-size: 14px;
            &:hover {
                background-color: var(--wpz-insta-buy-now-hover, #3496ff) !important;
            }
        }

        // Carousel styles
        &.wpz-insta-lightbox-product--carousel {
            padding: 0;
        }

        .wpz-insta-lightbox-product__carousel {
            position: relative;
            overflow: hidden;
        }

        .wpz-insta-lightbox-product__carousel-inner {
            display: flex;
            transition: transform 0.3s ease;
        }

        .wpz-insta-lightbox-product__carousel-inner .wpz-insta-lightbox-product__card {
            flex: 0 0 100%;
            padding: 16px;
            box-sizing: border-box;
        }

        .wpz-insta-lightbox-product__carousel-prev,
        .wpz-insta-lightbox-product__carousel-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            border: none;
            background: transparent;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: opacity 0.2s, background-color 0.2s;

            &:hover {
                background: #fff;
            }

            &:disabled {
                opacity: 0.3;
                cursor: not-allowed;
            }

            svg {
                width: 18px;
                height: 18px;
                color: #262626;
            }
        }

        .wpz-insta-lightbox-product__carousel-prev {
            left: 8px;
        }

        .wpz-insta-lightbox-product__carousel-next {
            right: 8px;
        }

        .wpz-insta-lightbox-product__carousel-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 8px 0 16px;

            .wpz-insta-lightbox-product__carousel-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #dbdbdb;
                cursor: pointer;
                transition: background-color 0.2s;

                &.active {
                    background: #262626;
                }

                &:hover:not(.active) {
                    background: #8e8e8e;
                }
            }
        }
    }
}

.wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .view-post {
    padding: 16px;
    text-decoration: none;
    font-size: 12px;
    color: #262626;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    border-top: 1px solid #efefef;
    flex-wrap: wrap;
    justify-content: space-between;

      a {
        text-decoration: none;
        font-size: 12px;
        color: #262626;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        display: inline-block;

        span {
            margin-right: 10px;
        }

    }

    .delimiter {
        padding: 0px 10px;
        opacity: .3;
    }

}


.wp-admin {

    .wp-block-wpzoom-instagram-block .zoom-instagram-widget__overlay, .zoom-instagram .zoom-instagram-widget__overlay {
        cursor: pointer;
    }

    .wp-block-wpzoom-instagram-block .zoom-instagram-widget__items .zoom-instagram-widget__item .zoom-instagram-link,
    .zoom-instagram .zoom-instagram-widget__items .zoom-instagram-widget__item .zoom-instagram-link,
    .zoom-instagram .zoom-instagram-widget__header .zoom-instagram-widget__header-user a,
    .zoom-instagram .zoom-instagram-widget__footer .wpz-insta-view-on-insta-button:hover,
    .zoom-instagram .zoom-instagram-widget__footer .wpz-insta-view-on-insta-button:active,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more input[type=submit]:hover,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more input[type=submit]:active,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more button[type=submit]:hover,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more button[type=submit]:active,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more-wrapper .wpzinsta-pro-load-more-btn:hover,
    .zoom-instagram .zoom-instagram-widget__footer .wpzinsta-pro-load-more-wrapper .wpzinsta-pro-load-more-btn:active {
        pointer-events: none;
    }

    .zoom-instagram.layout-masonry .zoom-instagram-widget__items.zoom-instagram-widget__items--no-js .zoom-instagram-widget__item img,
    .zoom-instagram.layout-masonry .zoom-instagram-widget__items.zoom-instagram-widget__items--no-js .masonry-items-sizer img {
        filter: none;
    }

}


#zuck-modal-content .story-viewer .head .right .close,
#zuck-modal-content .story-viewer .head .back {
    color: #fff !important;
    text-decoration: none;
}

#zuck-modal-content .story-viewer .head .right .close:hover,
#zuck-modal-content .story-viewer .head .back:hover {
    opacity: .7;
}



@keyframes show {
    100% {
        transform: none;
        opacity: 1;
    }
}

:root {
--swiper-navigation-color: white !important;
--swiper-theme-color: white !important;
--swiper-navigation-size: 30px;
}

@media screen and (max-width: 1200px) {
    .wpz-insta-lightbox-wrapper {
        .wpz-insta-lightbox {
            flex-wrap: wrap;
        }
    }

    .wpz-insta-lightbox-wrapper > .swiper {
        width: 86%;
    }

}

@media screen and (max-width: 1024px) {

    #zuck-modal-content .story-viewer .head .right {
        min-width: 150px;
        text-align: right;
    }

    #zuck-modal-content .story-viewer .head .right .time {
        display: inline-block !important;
    }

    #zuck-modal .story-viewer .head .right .wpz-insta-mute-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    #zuck-modal .story-viewer .head .right .wpz-insta-mute-btn {
        align-items: center !important;
    }

}


@media screen and (max-width: 860px) {

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .wpz-insta-caption {
        font-size: 12px;
        max-height: 134px;
    }

}


@media screen and (max-width: 768px) {

    .wpz-insta-lightbox {
        flex-direction: column;
        max-height: none;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .image-wrapper img:not(.wpz-insta-lightbox-tag__img)  {
        max-height: 400px;
        min-width: 400px;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .image-wrapper {
        border-radius: 4px 4px 0 0;
        max-width: 100%;
        height: 65%;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper .wpz-insta-caption {
        max-height: 134px;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper {
        width: 100%;
        height: 35%;
    }

    .zoom-instagram .zoom-instagram-widget__items.layout-fullwidth .zoom-instagram-widget__item {
        max-width: 160px;
    }

    .zoom-instagram .zoom-instagram-widget__items.layout-fullwidth {
        // grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        grid-template-columns: repeat(6,1fr) !important;
    }
}



@media screen and (max-width: 600px) {

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .image-wrapper img:not(.wpz-insta-lightbox-tag__img) {
        min-height: 280px;
        min-width: 280px;
    }

    .wpz-insta-lightbox-wrapper > .swiper {
        width: 76%;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .image-wrapper {
        height: 55%;
    }

    .wpz-insta-lightbox-wrapper .wpz-insta-lightbox .details-wrapper {
        height: 45%;
    }


    .zoom-instagram.layout-grid.featured-layout.columns-5.featured-layout-11 .zoom-instagram-widget__item:first-child {
        grid-column: span 5 !important;
    }

    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-16 .zoom-instagram-widget__item:first-child,
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-17 .zoom-instagram-widget__item:nth-child(12n+1),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-17 .zoom-instagram-widget__item:nth-child(12n+8),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-18 .zoom-instagram-widget__item:nth-child(18n+1),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-18 .zoom-instagram-widget__item:nth-child(18n+14) {
        grid-column: span 5 !important;
        grid-row: span 5 !important;
    }

    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-19 .zoom-instagram-widget__item:nth-child(48n+1),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-19 .zoom-instagram-widget__item:nth-child(48n+12),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-19 .zoom-instagram-widget__item:nth-child(48n+29),
    .zoom-instagram.layout-grid.featured-layout.columns-6.featured-layout-19 .zoom-instagram-widget__item:nth-child(48n+36) {
        grid-column: span 4 !important;
        grid-row: span 4 !important;
    }

    .zoom-instagram.layout-grid.featured-layout.columns-5.featured-layout-14 .zoom-instagram-widget__item:nth-child(38n+1) {
        grid-column: span 3 !important;
        grid-row: span 3 !important;
    }

    .zoom-instagram .zoom-instagram-widget__items.layout-fullwidth .zoom-instagram-widget__item {
        max-width: 130px;
    }

    .zoom-instagram .zoom-instagram-widget__items.layout-fullwidth {
        // grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        grid-template-columns: repeat(4,1fr) !important;
    }
}

@keyframes wpz-insta-shimmer-bg {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Image Loading Shimmer Effect - only applies before wpz-insta-loaded is added */
.zoom-instagram-widget__items .zoom-instagram-widget__item:not(.wpz-insta-loaded) {
    .zoom-instagram-widget__item-inner-wrap {
        background: #f0f0f0;

        /* Shimmer overlay */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
            background-size: 200% 100%;
            animation: wpz-insta-shimmer-bg 1.5s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }

        /* Hide images while loading */
        > img.zoom-instagram-link,
        > img.zoom-instagram-link-new {
            opacity: 0;
        }
    }
}

/* Fade in images when loaded */
.zoom-instagram-widget__items .zoom-instagram-widget__item.wpz-insta-loaded {
    .zoom-instagram-widget__item-inner-wrap {
        > img.zoom-instagram-link,
        > img.zoom-instagram-link-new {
            transition: opacity 0.3s ease-in-out, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
    }
}


.wpz-insta-link-product-btn {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	background: #3496ff;
	color: #fff;
	border: none;
	padding: 12px 16px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: background 0.2s;
	width: auto;

	&:hover {
		background: #2b88e9;
	}

	.dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}


// Frontend: badge when item is linked to a product
.wpz-insta-product-badge {
	position: absolute;
    display: flex;
    align-items: center;
	top: 10px;
	left: 10px;
	z-index: 10;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 3px;
	text-transform: none;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	pointer-events: none;
    gap: 6px;
    line-height: 1;
}

// Frontend Buy now button (link to product page)
.wpz-insta-buy-now-wrapper {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.zoom-instagram-widget__item:hover .wpz-insta-buy-now-wrapper {
    opacity: 1;
}

.wpz-insta-buy-now-btn {
    background-color: var(--wpz-insta-buy-now-bg, #111111);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--wpz-insta-buy-now-color, #fff) !important;
    border: none;
    padding: 12px 26px;
    border-radius: var(--wpz-insta-buy-now-radius, 3px);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;

    &:hover {
        background: var(--wpz-insta-buy-now-hover-bg, #3496ff);
        color: var(--wpz-insta-buy-now-color, #fff) !important;
    }
}

// Product icon + popover (display type: icon)
.wpz-insta-product-icon-wrap {
    position: absolute;
    z-index: 10;
    pointer-events: auto;

    &.wpz-insta-product-icon-position-top-left {
        top: 10px;
        left: 10px;
    }
    &.wpz-insta-product-icon-position-top-right {
        top: 10px;
        right: 10px;
    }
    &.wpz-insta-product-icon-position-bottom-left {
        bottom: 10px;
        left: 10px;
    }
    &.wpz-insta-product-icon-position-bottom-right {
        bottom: 10px;
        right: 10px;
    }
}

.wpz-insta-product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wpz-insta-icon-size, 36px);
    height: var(--wpz-insta-icon-size, 36px);
    background: var(--wpz-insta-icon-bg, #333333);
    color: var(--wpz-insta-icon-color, #fff);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

    &:hover {
        filter: brightness(0.9);
    }

    svg {
        width: 55.56%;
        height: 55.56%;
    }
}

.wpz-insta-product-popover {
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
    padding: 8px 0;
    .wpz-insta-product-icon-position-bottom-left {
        left: 0;
        bottom: 100%;
    }
    .wpz-insta-product-icon-position-bottom-right & {
        right: 0;
        bottom: 100%;
    }
    .wpz-insta-product-icon-position-top-left & {
        left: 0;
    }
    .wpz-insta-product-icon-position-top-right & {
        right: 0;
    }

    .wpz-insta-product-popover-wrapper{
        padding: 12px 0;
        min-width: 220px;
        max-width: 280px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
}

.wpz-insta-product-icon-wrap:hover .wpz-insta-product-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wpz-insta-product-popover-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    padding: 0 12px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.wpz-insta-product-popover-list {
    list-style: none;
    margin: 0 !important;
    padding: 0 8px;
    max-height: 240px;
    overflow-y: auto;
}

.wpz-insta-product-popover-item {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
    list-style-type: none !important;
    &:last-child {
        border-bottom: none;
    }
}

.wpz-insta-product-popover-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;

    &:hover {
        background: #f5f5f5;
    }
}

.wpz-insta-product-popover-item-img {
    width: 44px;
    height: 44px;
    max-width: 46px !important;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.wpz-insta-product-popover-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.wpz-insta-product-popover-item-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpz-insta-product-popover-item-price {
    font-size: 12px;
    color: #111111;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;

    .woocommerce-Price-amount {
        font-weight: 600;
    }

    // Hide screen reader text
    .screen-reader-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    // Original price (strikethrough)
    del {
        color: #8e8e8e;
        font-weight: 400;
        text-decoration: line-through;
        opacity: 0.8;

        .woocommerce-Price-amount {
            font-weight: 400;
        }
    }

    // Sale price
    ins {
        text-decoration: none;
        color: #111111;
        font-weight: 600;

        .woocommerce-Price-amount {
            font-weight: 600;
        }
    }
}

.wpz-insta-product-popover-item-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #8c8f94;

    svg {
        width: 20px;
        height: 20px;
    }
}

.wpz-insta-product-popover-item-add {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: #111111;
    color: #fff !important;
    border-radius: 4px;
    transition: background 0.2s;

    &:hover {
        background: #3496ff;
        color: #fff !important;
    }
}

// Lightbox: icon + popover (reuse popover styles, position within details)
.wpz-insta-lightbox-wrapper .wpz-insta-lightbox-product-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;

    &.wpz-insta-product-icon-position-top-left,
    &.wpz-insta-product-icon-position-top-right,
    &.wpz-insta-product-icon-position-bottom-left,
    &.wpz-insta-product-icon-position-bottom-right {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }
}

// Lightbox: Tagged product markers on images
@keyframes wpz-insta-lightbox-tag-show {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.wpz-insta-lightbox-tags {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.wpz-insta-lightbox-tag {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 11;

    &__dot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
        color: #1d2327;

        svg {
            width: 18px;
            height: 18px;
        }

        &:hover {
            transform: scale(1.1);
            background: #fff;
        }
    }

    &__popover {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
        max-width: 280px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        z-index: 100;
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            top: calc(100% - 1px);
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: #fff;
        }
    }

    &:hover &__popover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    &__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        text-decoration: none;
        color: inherit;
        line-height: 1;

        &:hover {
            text-decoration: none;
        }
    }

    &__img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
    }

    &__info {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    &__title {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #1d2327;
        line-height: 1.3;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__price {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #111111;

        del {
            color: #999;
            margin-right: 4px;
        }

        ins {
            text-decoration: none;
        }
    }
}

// Hide tags for album slides by default (JS will manage visibility)
// Tags with album_index >= 0 are album-specific, hide until JS shows them
.wpz-insta-lightbox-tag[data-album-index] {
    &:not([data-album-index="-1"]) {
        display: none;
    }

    // Show tags with album_index = -1 (single image, not album-specific)
    &[data-album-index="-1"] {
        display: block;
    }

    // Show tags when JS adds the visible class (with entrance animation)
    &.wpz-insta-lightbox-tag--visible {
        display: block;
        animation: wpz-insta-lightbox-tag-show 0.3s ease-out forwards;
    }
}