/* WC Room Preview — Lumina cream/teal aesthetic */
.wcrp { box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
.wcrp *, .wcrp *::before, .wcrp *::after { box-sizing: border-box; }
.wcrp__loading { padding: 60px; text-align: center; color: #7a7368; font-size: 14px; }
.wcrp__layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 16px 0; }
@media (max-width: 880px) { .wcrp__layout { grid-template-columns: 1fr; } }

.wcrp__stage {
  position: relative; background: #efe7d8; border-radius: 16px;
  overflow: hidden; aspect-ratio: 16/10; min-height: 360px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 20px 40px -20px rgba(0,0,0,0.18);
}
.wcrp__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wcrp__art {
  position: absolute; cursor: grab; touch-action: none;
  box-shadow: 0 18px 36px -8px rgba(0,0,0,0.55), 0 6px 12px -4px rgba(0,0,0,0.35);
  border-radius: 2px; user-select: none; background: #000;
}
.wcrp__art.is-dragging { cursor: grabbing; }
.wcrp__art img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 2px; }
.wcrp__art .wcrp__handle {
  position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px;
  background: #0c6b86; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.wcrp__panel {
  background: #fff; border-radius: 16px; padding: 22px; border: 1px solid rgba(0,0,0,0.06);
}
.wcrp__eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #0c6b86; font-weight: 600; margin: 0 0 16px; }
.wcrp__group { margin-bottom: 22px; }
.wcrp__group:last-child { margin-bottom: 0; }
.wcrp__label { display: block; font-size: 12px; color: #5a5248; font-weight: 500; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.wcrp__rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wcrp__room-btn {
  aspect-ratio: 1/1; border: 2px solid transparent; border-radius: 8px;
  background: #efe7d8 center/cover no-repeat; cursor: pointer; padding: 0;
  font-size: 10px; color: #5a5248; font-weight: 500;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  transition: border-color 0.15s;
}
.wcrp__room-btn.is-active { border-color: #0c6b86; }
.wcrp__room-btn:hover { border-color: rgba(12,107,134,0.4); }

.wcrp__dropzone {
  border: 2px dashed rgba(12,107,134,0.35); border-radius: 10px;
  padding: 24px 14px; text-align: center; cursor: pointer;
  background: rgba(12,107,134,0.04); color: #5a5248; font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.wcrp__dropzone:hover, .wcrp__dropzone.is-drag { background: rgba(12,107,134,0.1); border-color: #0c6b86; }
.wcrp__dropzone input[type=file] { display: none; }

.wcrp__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border-radius: 999px; font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid #0f0f0f; background: #0f0f0f;
  color: #fff; font-family: inherit; width: 100%;
}
.wcrp__btn:hover { background: #0c6b86; border-color: #0c6b86; }
.wcrp__btn--ghost { background: transparent; color: #0f0f0f; }
.wcrp__btn--ghost:hover { background: #0f0f0f; color: #fff; }
.wcrp__saved { font-size: 12px; color: #0c6b86; margin-top: 8px; text-align: center; min-height: 18px; }