/* ============================================================
 *  Elevate My Dorm — 2D Visualizer Modal
 *  File: visualizer.css
 * ============================================================
 *  Styles for the "Visualize My Room" modal launched from the
 *  design page. Self-contained; all selectors namespaced .emv-*
 *  so nothing here can collide with the existing designer CSS.
 * ============================================================ */

/* ---- overlay + shell ---- */
.emv-overlay{
  position:fixed; inset:0; z-index:9000;
  background:rgba(14,16,22,.78);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
}
.emv-overlay.emv-open{ display:flex; }

.emv-shell{
  width:100%; max-width:1080px; max-height:92vh;
  background:#15171f; color:#e9ecf2;
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
}

/* ---- header ---- */
.emv-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #262a36;
  flex:0 0 auto;
}
.emv-title{ font-size:17px; font-weight:700; letter-spacing:.2px; }
.emv-title small{
  display:block; font-size:11px; font-weight:500;
  color:#8b90a0; letter-spacing:.4px; margin-top:2px;
}
.emv-x{
  background:#262a36; color:#e9ecf2; border:0;
  width:34px; height:34px; border-radius:9px;
  font-size:18px; cursor:pointer; line-height:1;
}
.emv-x:hover{ background:#333847; }

/* ---- wall toggle ---- */
.emv-walls{
  display:flex; gap:8px; padding:14px 20px 4px;
  flex:0 0 auto;
}
.emv-wall-btn{
  flex:1; padding:9px 6px; border-radius:9px;
  background:#1d2029; color:#aeb3c2;
  border:1px solid #2b2f3c; cursor:pointer;
  font-size:13px; font-weight:600; letter-spacing:.3px;
  transition:background .15s,color .15s,border-color .15s;
}
.emv-wall-btn:hover{ background:#242836; color:#e9ecf2; }
.emv-wall-btn.emv-active{
  background:linear-gradient(135deg,#2dd4a8,#3b9ad4);
  color:#0e1016; border-color:transparent;
}

/* ---- stage ---- */
.emv-stage-wrap{
  flex:1 1 auto; overflow:auto; padding:20px;
  display:flex; align-items:center; justify-content:center;
}
.emv-stage{
  position:relative;
  background:linear-gradient(#20242f,#191c25);
  border:1px solid #2b2f3c; border-radius:10px;
  overflow:hidden;
}
/* floor band along the bottom of an elevation */
.emv-floor{
  position:absolute; left:0; right:0; bottom:0;
  background:#1c1f29;
  border-top:2px solid #313644;
}

/* a placed item, drawn as a labelled card until real cutouts exist */
.emv-item{
  position:absolute;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  box-sizing:border-box;
  border-radius:6px;
  border:1.5px solid rgba(45,212,168,.55);
  background:rgba(45,212,168,.10);
  color:#cfe9e1; font-size:10px; font-weight:600;
  text-align:center; padding:3px;
  overflow:hidden;
}
.emv-item img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.emv-item .emv-item-label{
  width:100%; line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.emv-item.emv-onwall{
  border-style:dashed;
  background:rgba(59,154,212,.10);
  border-color:rgba(59,154,212,.55);
  color:#cfe2ef;
}

/* ---- empty / message states ---- */
.emv-msg{
  color:#8b90a0; font-size:14px; text-align:center;
  max-width:340px; line-height:1.5;
}

/* ---- footer ---- */
.emv-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px;
  border-top:1px solid #262a36; flex:0 0 auto;
}
.emv-note{ font-size:11px; color:#7c8190; line-height:1.4; }
.emv-count{ font-size:12px; color:#aeb3c2; white-space:nowrap; }

/* ---- launch button (placed on the design page) ---- */
.emv-launch{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:12px; cursor:pointer;
  font:700 14px/1.1 'Poppins',system-ui,sans-serif;
  color:#FFFFFF;
  background:#16243F;
  border:none;
  box-shadow:0 1px 2px rgba(10,25,47,.12), 0 4px 14px rgba(22,36,63,.26);
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}
.emv-launch:hover{ background:#22324F; transform:translateY(-1px); }
.emv-launch:active{ background:#0A192F; transform:translateY(0); }
.emv-launch:hover{ background:#F0FBFA; border-color:#00BFAE; color:#00897E; transform:translateY(-1px); }
.emv-launch:active{ background:#E0F5F2; transform:translateY(0); }
.emv-launch:hover{ filter:brightness(1.06); }

@media(max-width:560px){
  .emv-overlay{ padding:0; }
  .emv-shell{ max-height:100vh; border-radius:0; }
  .emv-wall-btn{ font-size:12px; }
}