/* =========================================================
   ROOM SHAPE MODAL
========================================================= */

.room-shape-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
}

.room-shape-modal.hidden{
display:none;
}

.room-shape-window{

width:460px;

background:#081224;

border-radius:18px;

border-top:4px solid #f59e0b;

box-shadow:
0 25px 60px rgba(
0,
0,
0,
.45
);

overflow:hidden;

}

.room-shape-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 22px;

border-bottom:1px solid rgba(
255,
255,
255,
.08
);

font-size:18px;

font-weight:800;

color:#fff;

}

.room-shape-close{

width:36px;
height:36px;

border:none;

background:none;

color:#fff;

font-size:22px;

cursor:pointer;

border-radius:10px;

}

.room-shape-body{

display:flex;

justify-content:center;

gap:14px;

padding:20px;

}

.room-shape-card{

width:90px;

height:105px;
background:#ececec;
border:1px solid #999;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.15s;
}

.room-shape-card:hover{

border-color:#f59e0b;

}

.room-shape-card.active{
background:#f2e67a;
border-color:#b49a00;
}

.room-shape-icon{

margin-bottom:8px;

transform:scale(.8);

}

.room-shape-label{

text-align:center;

font-size:14px;

line-height:1.2;

color:#222;

}

.room-shape-footer{

padding:16px 20px;

display:flex;

justify-content:flex-end;

gap:10px;

border-top:1px solid rgba(
255,
255,
255,
.08
);

}

/* =========================================================
   ROOM CONFIG MODAL
========================================================= */

.room-config-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
}

.room-config-modal.hidden{
display:none;
}

.room-config-window{

width:700px;

background:#081224;

border-radius:18px;

border-top:4px solid #f59e0b;

box-shadow:
0 25px 60px rgba(
0,
0,
0,
.45
);

overflow:hidden;

}

.room-config-header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 22px;

border-bottom:1px solid rgba(
255,
255,
255,
.08
);

font-size:18px;

font-weight:800;

color:#fff;

}

.room-config-body{
display:flex;
padding:20px;
gap:24px;
}

.room-preview-panel{

width:220px;

height:220px;
background:#fff;
border:1px solid #999;
display:flex;
align-items:center;
justify-content:center;
}

.room-config-panel{

width:420px;

flex:none;

}

.room-config-group{

margin-bottom:12px;

}

.room-config-group label{

display:block;

font-size:14px;

font-weight:700;

margin-bottom:6px;

color:#cbd5e1;

}

.room-config-group input{

width:100%;

height:32px;

padding:0 14px;

background:rgba(
255,
255,
255,
.05
);

border:1px solid rgba(
255,
255,
255,
.12
);

border-radius:10px;

font-size:14px;

color:#fff;

}

.orientation-grid{

display:flex;

gap:10px;

}

.orientation-btn{

color:#fff;

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(
255,
255,
255,
.12
);

background:rgba(
255,
255,
255,
.05
);

cursor:pointer;

font-weight:700;

}

.orientation-btn.active{
background:#d9d9d9;
border-color:#666;
}

.room-config-footer{

padding:16px 20px;

display:flex;

justify-content:flex-end;

gap:10px;

border-top:1px solid rgba(
255,
255,
255,
.08
);

}

.hidden{
display:none;
}

.room-photo-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(180px,1fr));
gap:16px;
margin-top:20px;
}

.room-photo-item{
border:1px solid #e5e7eb;
border-radius:16px;
overflow:hidden;
background:#fff;
}

.room-photo-preview{
width:100%;
height:160px;
object-fit:cover;
display:block;
}

.room-photo-note{
padding:12px;
font-size:13px;
line-height:1.5;
color:#374151;
white-space:pre-wrap;
}

.room-config-panel select{

width:100%;

height:32px;

padding:0 14px;

background:rgba(
255,
255,
255,
.05
);

border:1px solid rgba(
255,
255,
255,
.12
);

border-radius:10px;

color:#fff;

}

.room-config-panel select option{

color:#000;
background:#fff;

}

.orientation-btn svg,
.orientation-btn path,
.orientation-btn rect,
.orientation-btn line{

stroke:#fff !important;
fill:none;

}

.orientation-btn.active svg,
.orientation-btn.active path,
.orientation-btn.active rect,
.orientation-btn.active line{

stroke:#f59e0b !important;

}