.virtual-building-image{
    width: 1000px;
    height: 600px;
    border-radius: 32px;
    background-image: url('/assets/Website/images/Images/Desktop/virtual-building-mode-desktop.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;



}


.hover-points-container.mobile{
    display: none;
}


.hover-points-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.entry-container{
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

.single-point{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(250, 250, 250, 0.75);
    position: relative; /* Add this */
}

.single-point.active {
    background-color: rgba(46, 184, 117, 0.5);
}

.single-point.empty {
    background-color: #9E4C4F !important; /* Red when unavailable */
}

.single-point.active .inner-circle,
.single-point.empty .inner-circle {
    opacity: 0;
}

.single-point.active::after,
.single-point.empty::after {
    content: attr(data-floor);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.inner-circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--white);
}


.virtual-building-hover-container{
    width: 260px;
    height: 112px;
    border-radius: 24px;
    background-color: rgba(51, 51, 51, 0.75);
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}


.virtual-button-hover-info-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.text-container{
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 1px;
    font-weight: var(--semiBold);
    color: var(--neutral-05);
}

.bolded-hover-virtual{
    font-weight: var(--bold);
    color: var(--inverse);
}


.hover-btn-icon{
    filter: var(--filter-inverse);
}

.virtual-button-hover-info-btn{
    margin-top: 16px;
    width: 100%;
    background-color: rgba(46, 184, 117, 0.5);
}


.virtual-building-hover-container.empty .virtual-button-hover-info-btn{
    background-color: #9E4C4F;
    pointer-events: none;
    cursor: not-allowed;

}

.virtual-building-hover-container.empty .hover-btn-icon{
    display: none;
}





/* ВХОД А */


.entry-container.A{
    right: 660px;
    bottom: 26px;
    width: 90px;

}

.entry-container.A .single-point.floor2{

    align-self: flex-end;
    margin-bottom: 40px;
}
.entry-container.A .single-point.floor4{

    align-self: flex-end;
    margin-bottom: 40px;

}

.entry-container.A .single-point.floor6{

    align-self: flex-end;
    margin-bottom: 40px;


}

.entry-container.A .single-point.floor8{

    margin-bottom: 42px;


}

.entry-container.A .single-point.floor3{

    margin-bottom: 40px;


}

.entry-container.A .single-point.floor5{

    margin-bottom: 40px;


}

.entry-container.A .single-point.floor7{

    margin-bottom: 40px;


}
.entry-container.A .single-point.floor9{

    margin-bottom: 36px;
    align-self: flex-start;



}




/* ВХОД Б */


.entry-container.B{
    right: 400px;
    bottom: 26px;
    width: 90px;

}

.entry-container.B .single-point.floor2{

    align-self: flex-end;
    margin-bottom: 30px;
}
.entry-container.B .single-point.floor4{

    align-self: flex-end;
    margin-bottom: 30px;

}

.entry-container.B .single-point.floor6{

    align-self: flex-end;
    margin-bottom: 30px;

}

.entry-container.B .single-point.floor8{

    margin-bottom: 30px;

}

.entry-container.B .single-point.floor3{

    margin-bottom: 30px;

}

.entry-container.B .single-point.floor5{

    margin-bottom: 30px;

}

.entry-container.B .single-point.floor7{

    margin-bottom: 30px;

}
.entry-container.B .single-point.floor9{

    margin-bottom: 24px;
    align-self: flex-start;


}




/* ВХОД В */


.entry-container.C{
    right: 230px;
    bottom: 24px;
    width: 90px;

}

.entry-container.C .single-point.floor2{

    align-self: flex-end;
    margin-bottom: 22px;
}
.entry-container.C .single-point.floor4{

    align-self: flex-end;
    margin-bottom: 22px;
}

.entry-container.C .single-point.floor6{

    align-self: flex-end;
    margin-bottom: 22px;
}

.entry-container.C .single-point.floor8{

    margin-bottom: 28px;
}

.entry-container.C .single-point.floor3{

    margin-bottom: 22px;
}

.entry-container.C .single-point.floor5{

    margin-bottom: 22px;
}

.entry-container.C .single-point.floor7{

    margin-bottom: 22px;
}
.entry-container.C .single-point.floor9{
    align-self: flex-start;

    margin-bottom: 12px;
}









.single-point.entryA{
    right: 240px;
    bottom: 196px;
    position: absolute;

}
.single-point.entryB{
    right: 114px;
    bottom: 166px;

    position: absolute;


}
.single-point.entryC{
    right: 28px;
    bottom: 150px;
    position: absolute;


}

@media (width < 1040px) {


    .virtual-building-image{
        width: 700px;
        height: 420px;
        border-radius: 32px;
        background-image: url('/assets/Website/images/Images/Tablet/virtual-building-mode-tablet.png');



    }



    /* ВХОД А */


    .entry-container.A{
        right: 450px;
        bottom: 14px;
        width: 90px;

    }

    .entry-container.A .single-point.floor2{

        align-self: flex-end;
        margin-bottom: 20px;
    }
    .entry-container.A .single-point.floor4{

        align-self: flex-end;
        margin-bottom: 20px;

    }

    .entry-container.A .single-point.floor6{

        align-self: flex-end;
        margin-bottom: 20px;


    }

    .entry-container.A .single-point.floor8{

        margin-bottom: 24px;


    }

    .entry-container.A .single-point.floor3{

        margin-bottom: 22px;


    }

    .entry-container.A .single-point.floor5{

        margin-bottom: 26px;


    }

    .entry-container.A .single-point.floor7{

        margin-bottom: 28px;


    }
    .entry-container.A .single-point.floor9{

        margin-bottom: 16px;
        align-self: flex-start;



    }




    /* ВХОД Б */


    .entry-container.B{
        right: 280px;
        bottom: 16px;
        width: 70px;

    }

    .entry-container.B .single-point.floor2{

        align-self: flex-end;
        margin-bottom: 10px;
    }
    .entry-container.B .single-point.floor4{

        align-self: flex-end;
        margin-bottom: 16px;

    }

    .entry-container.B .single-point.floor6{

        align-self: flex-end;
        margin-bottom: 16px;

    }

    .entry-container.B .single-point.floor8{

        margin-bottom: 14px;

    }

    .entry-container.B .single-point.floor3{

        margin-bottom: 16px;

    }

    .entry-container.B .single-point.floor5{

        margin-bottom: 16px;

    }

    .entry-container.B .single-point.floor7{

        margin-bottom: 16px;

    }
    .entry-container.B .single-point.floor9{

        margin-bottom: 10px;
        align-self: flex-start;


    }




    /* ВХОД В */


    .entry-container.C{
        right: 156px;
        bottom: 15px;
        width: 70px;

    }

    .entry-container.C .single-point.floor2{

        align-self: flex-end;
        margin-bottom: 8px;
    }
    .entry-container.C .single-point.floor4{

        align-self: flex-end;
        margin-bottom: 8px;
    }

    .entry-container.C .single-point.floor6{

        align-self: flex-end;
        margin-bottom: 6px;
    }

    .entry-container.C .single-point.floor8{

        margin-bottom: 8px;
    }

    .entry-container.C .single-point.floor3{

        margin-bottom: 8px;
    }

    .entry-container.C .single-point.floor5{

        margin-bottom: 16px;
    }

    .entry-container.C .single-point.floor7{

        margin-bottom: 14px;
    }
    .entry-container.C .single-point.floor9{
        align-self: flex-start;

        margin-bottom: 8px;
    }




}
@media (width < 1330px) {
    .virtual-building-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .virtual-building-filter-container {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        height: auto;
        padding: 32px;

    }

   
}
@media (width < 720px) {


    .virtual-building-image {
        width: 320px;
        height: 400px;
        border-radius: 32px;
        background-image: url('/assets/Website/images/Images/Mobile/virtual-building-search-mobile.png');


    }

    .virtual-building-filter-container {
        width: 320px;
        height: 378px;
        background-color: var(--neutral-01);
        border-radius: 32px;
        box-shadow: 0px 0px 6px 0px hsla(0, 0%, 0%, 0.2);
        padding: 32px 16px;

        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;

    }

    .single-point.active-dot::after,
    .single-point:hover::after {
        content: attr(data-entrance);
    }

    .hover-points-container.desktop {
        display: none;
    }

    .hover-points-container.mobile {
        display: flex;
    }


}