/* GLOBAL */

body{
margin:0;
font-family:Segoe UI,Arial;
background:#111;
color:#fff;
}

/* FLOOR SELECTOR */

.floor-gallery{
width:100%;
}

.floor-item{
position:relative;
height:20vh;
min-height:160px;
overflow:hidden;
cursor:pointer;
}

.floor-item img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .8s ease;
}

.floor-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.35);
}

.floor-overlay h2{
letter-spacing:4px;
font-size:32px;
opacity:0;
transform:translateY(20px);
transition:.4s;
}

.floor-item:hover img{
transform:scale(1.12);
}

.floor-item:hover h2{
opacity:1;
transform:translateY(0);
}

/* LIGHTBOX OVERLAY */

.lightbox{

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

width:100vw;
height:100vh;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.7);
backdrop-filter:blur(6px);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:999999;

padding:20px;
box-sizing:border-box;

}

.lightbox.active{
opacity:1;
visibility:visible;
}

/* MODAL */

.modal{

position:relative;

width:90%;
max-width:820px;
max-height:90vh;

background:#fff;

border-radius:16px;

box-shadow:0 30px 80px rgba(0,0,0,.6);

padding:20px;

display:flex;
flex-direction:column;

margin:auto;

transform:scale(.9);
opacity:0;

transition:.35s;

}

.lightbox.active .modal{
transform:scale(1);
opacity:1;
}

/* TITLE */

.floor-title{
text-align:center;
color:#222;
font-size:24px;
margin-bottom:10px;
}

/* CAROUSEL */

.carousel-wrapper{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-height:70vh;
overflow:hidden;
margin:auto;
}

.carousel{
display:flex;
width:100%;
transition:transform .45s cubic-bezier(.4,0,.2,1);
}

.slide{
min-width:100%;
display:flex;
align-items:center;
justify-content:center;
}

.slide img,
.slide video{
width:100%;
height:auto;
max-height:70vh;
object-fit:contain;
border-radius:10px;
background:#000;
display:block;
}

/* NAV BUTTONS */

.nav{

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

width:46px;
height:46px;

display:flex;
align-items:center;
justify-content:center;

font-size:26px;

cursor:pointer;

background:rgba(0,0,0,.55);
color:#fff;

border-radius:50%;

transition:.25s;

opacity:0;

}

.controls-visible .nav{
opacity:1;
}

.left{
left:10px;
}

.right{
right:10px;
}

.nav:hover{
background:rgba(0,0,0,.85);
}

/* CLOSE BUTTON */

.close{

position:absolute;

top:12px;
right:16px;

font-size:30px;
line-height:30px;

cursor:pointer;

color:#333;

background:#ffffffdd;

width:38px;
height:38px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

box-shadow:0 4px 10px rgba(0,0,0,.25);

z-index:50;

}

/* DESCRIPTION */

.desc{
text-align:center;
margin-top:10px;
color:#444;
}

/* THUMBNAILS */

.thumbs{
display:flex;
gap:10px;
margin-top:15px;
overflow-x:auto;
padding-bottom:5px;
}

.thumbs img,
.thumbs video{
width:90px;
height:60px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
border:2px solid transparent;
}

.active-thumb{
border:2px solid #2196f3;
}

/* RESPONSIVE */

@media(max-width:768px){

.modal{
width:95%;
padding:12px;
}

.slide img,
.slide video{
max-height:60vh;
}

.floor-overlay h2{
font-size:22px;
}

.close{
top:10px;
right:10px;
width:40px;
height:40px;
font-size:28px;
}

}

/* WORDPRESS THEME CONFLICT FIX */

.floor-gallery *,
.lightbox *,
.modal *{
box-sizing:border-box;
}