/* Custom Mockup Room — scoped styles (all selectors prefixed cmr- to avoid theme conflicts) */

/* PENTING: pastikan atribut [hidden] SELALU menang dibanding rule
 * display:flex/block/grid milik komponen (mis. .cmr-swatches, .cmr-calib-badge,
 * .cmr-calib-bar, .cmr-size-pills). Tanpa ini, spesifisitas CSS keduanya sama
 * (class vs atribut), dan karena rule komponen ditulis belakangan, dia yang
 * menang — akibatnya elemen yang di-hidden lewat JS/PHP tetap kelihatan
 * (mis. grup bingkai Art Print & Canvas tampil berbarengan). */
[hidden]{ display:none !important; }
.cmr-open-btn, .cmr-overlay, .cmr-overlay *{ box-sizing:border-box; }

.cmr-open-btn{
  margin-top:18px; width:100%; padding:16px 18px; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid #000; cursor:pointer; font-family:inherit; border-radius:2px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cmr-open-btn:hover{ background:#9A9A9A; border-color:#9A9A9A; color:#000; }
.cmr-open-btn__text{ text-align:left; display:block; }
.cmr-open-btn__text b{ display:block; font-size:15px; font-weight:600; }
.cmr-open-btn__text span{ font-size:12px; opacity:.8; }
.cmr-open-btn__icon{ font-size:18px; }

/* ---------- overlay ---------- */
.cmr-overlay{
  position:fixed; inset:0; background:rgba(20,18,14,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:99999; padding:24px;
}
.cmr-overlay.open{ display:flex; }
.cmr-modal{
  background:#F3EEE3; width:min(1200px,100%); max-height:94vh; overflow:auto;
  display:grid; grid-template-columns:1fr 320px; border:1px solid #232019;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#232019;
}
@media (max-width:900px){ .cmr-modal{ grid-template-columns:1fr; } }

.cmr-room-view{ position:relative; background:#111; overflow:hidden; min-height:560px; display:flex; }
.cmr-room-scene{ position:relative; flex:1; overflow:hidden; background-size:cover; background-position:center; background-color:#1B1912; }
/* Setelah pembeli unggah foto ruangannya sendiri, tampilkan foto itu utuh
   (tidak dipotong menyesuaikan canvas) — background-size:contain membuat
   seluruh foto asli terlihat, dengan sisa area di kiri/kanan atau atas/
   bawah diisi warna latar polos alih-alih memotong bagian fotonya. */
.cmr-room-scene.cmr-custom-photo{ background-size:contain; background-repeat:no-repeat; }

.cmr-empty-state{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:32px; color:#EFE9DA;
}
.cmr-room-scene.cmr-custom-photo .cmr-empty-state{ display:none; }
.cmr-empty-state__icon{ font-size:34px; margin-bottom:14px; opacity:.85; }
.cmr-empty-state__title{ font-size:16px; font-weight:600; margin:0 0 6px; }
.cmr-empty-state__text{ font-size:12.5px; color:rgba(239,233,218,.7); max-width:280px; margin:0 0 20px; line-height:1.5; }
.cmr-empty-state .cmr-upload-btn{ background:#EFE9DA; color:#232019; border-color:#EFE9DA; }
.cmr-empty-state .cmr-upload-btn:hover{ background:#dcd4bd; }

.cmr-art-anchor{
  display:none; position:absolute; left:0; top:0; transform:translate3d(0,0,0) translate(-50%,-50%);
  z-index:5; cursor:grab; touch-action:none; padding:14px;
  /* Posisi digambar lewat transform (bukan left/top) dan diperbarui via
     requestAnimationFrame di JS — ini yang membuat seretan terasa halus
     karena browser cukup meng-komposit ulang layer ini, tanpa perlu
     menghitung ulang layout tiap gerakan pointer. Transisi hanya aktif
     saat TIDAK sedang diseret (mis. resize jendela), supaya perubahan
     posisi terasa mulus tapi seretan langsung tetap 1:1 responsif. */
  transition:transform .12s ease-out;
  will-change:transform;
}
.cmr-room-scene.cmr-custom-photo .cmr-art-anchor{ display:block; }
.cmr-art-anchor.dragging{ cursor:grabbing; transition:none; }
.cmr-art-anchor.dragging .cmr-framed-artwork{ box-shadow:0 30px 60px -20px rgba(0,0,0,.5) !important; }
.cmr-art-anchor::before{
  content:""; position:absolute; inset:0; border:1.5px dashed transparent; transition:border-color .15s ease;
}
.cmr-art-anchor:hover::before{ border-color:rgba(255,255,255,.55); }

.cmr-close{
  position:absolute; top:16px; right:16px; z-index:10; width:36px; height:36px;
  background:rgba(255,255,255,.9); color:#232019; font-size:18px; display:flex;
  align-items:center; justify-content:center; border:1px solid #232019; cursor:pointer;
}
.cmr-panel{ padding:26px; border-left:1px solid #D9CFBA; }
.cmr-type-badge{
  display:inline-block; margin-bottom:10px; padding:3px 10px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:#232019; background:#EFE8D8; border:1px solid #D9CFBA;
  border-radius:20px;
}
.cmr-type-badge:empty{ display:none; }
.cmr-panel h3{ font-size:19px; margin:0 0 4px; font-weight:600; }
.cmr-eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5C574C; margin-bottom:16px; }
.cmr-field{ margin-top:24px; }
.cmr-field:first-of-type{ margin-top:0; }
.cmr-field label{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; color:#232019; }
.cmr-frame-type-label{ font-size:11px; color:#5C574C; margin:-4px 0 10px; }
.cmr-field.is-disabled label{ color:#A9A296; }
.cmr-select-wrap select:disabled{ opacity:.5; cursor:not-allowed; }

.cmr-photo-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cmr-photo-row--center{ justify-content:center; }
.cmr-upload-btn, .cmr-reset-btn{
  padding:10px 14px; font-size:12.5px; border:1px solid #232019; cursor:pointer; background:transparent;
  border-radius:0; font-family:inherit; color:#232019;
}
.cmr-upload-btn{ background:#232019; color:#F3EEE3; }
.cmr-upload-btn:hover{ background:#3a352b; }
.cmr-reset-btn:hover{ background:#e9e2d2; }
.cmr-help-text{ margin:10px 0 0; font-size:11.5px; color:#5C574C; line-height:1.5; }

.cmr-field input[type="range"]{
  width:100%; accent-color:#232019; cursor:pointer;
}

.cmr-size-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cmr-size-pill{
  padding:8px 12px; border:1px solid #232019; background:transparent; cursor:pointer;
  font-family:inherit; color:#232019; border-radius:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:2px; line-height:1.3;
}
.cmr-size-pill:hover{ background:#e9e2d2; }
.cmr-size-pill.selected{ background:#232019; color:#F3EEE3; }
.cmr-size-pill__dims{ font-size:12.5px; font-weight:600; }
.cmr-size-fine__label{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; color:#232019; }

.cmr-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.cmr-swatch{ width:38px; height:38px; border:1px solid #D9CFBA; cursor:pointer; position:relative; }
.cmr-swatch.selected{ outline:2px solid #232019; outline-offset:3px; }
.cmr-swatch[data-frame="none"], .cmr-swatch[data-frame="canvas-none"]{ background:#F3EEE3; }
.cmr-swatch[data-frame="none"]::after, .cmr-swatch[data-frame="canvas-none"]::after{ content:""; position:absolute; width:140%; height:1px; background:#B8483D; top:50%; left:-20%; transform:rotate(-40deg); }
.cmr-swatch[data-frame="white"]{ background:#FBFBF9; }
.cmr-swatch[data-frame="black"]{ background:#181818; }
.cmr-swatch[data-frame="oak"]{ background:linear-gradient(155deg,#C9A876,#A9824F 55%,#8C6A3C); }
.cmr-swatch[data-frame="walnut"]{ background:linear-gradient(155deg,#5A3C29,#3A2416 60%,#2A1A0F); }
.cmr-swatch[data-frame="silver"]{ background:linear-gradient(155deg,#E6E7E9,#AEB2B8 55%,#8A8E94); }
.cmr-swatch[data-frame="gold"]{ background:linear-gradient(155deg,#E8CE9C,#B8935B 55%,#8C6B39); }
.cmr-swatch[data-frame="canvas-white"]{ background:linear-gradient(155deg,#FFFFFF 0%,#F8F6F1 45%,#EDE8DC 100%); }
.cmr-swatch[data-frame="canvas-black"]{ background:linear-gradient(155deg,#2B2B2B 0%,#191919 45%,#060606 100%); }
.cmr-swatch[data-frame="canvas-oak"]{ background:linear-gradient(155deg,#E6CB9E 0%,#D0AA73 30%,#B78F52 60%,#93703C 100%); }
.cmr-swatch[data-frame="canvas-walnut"]{ background:linear-gradient(155deg,#6E4A32 0%,#4C2F1D 35%,#341D11 65%,#20120A 100%); }
.cmr-swatch-col{ display:flex; flex-direction:column; align-items:center; }
.cmr-swatch-label{ margin-top:6px; font-size:10px; color:#5C574C; text-align:center; }

/* Kanvas: bingkai floater tipis yang langsung membungkus tepi kanvas
   (tanpa matte/kaca). Di setiap sisi lukisannya diberi "list" garis hitam
   yang jelas (bukan cuma garis samar 1px seperti sebelumnya), meniru tepi
   kanvas yang melipat ke sisi spanram — plus gradasi highlight/shadow tipis
   di dalamnya supaya terasa ada kedalaman/lekukan, seperti foto kanvas asli
   yang tergantung di dinding. Berlaku untuk varian kanvas yang berbingkai
   (putih, hitam, oak, walnut) — TIDAK untuk Spanram (.is-canvas-none),
   karena spanram tidak punya list/bingkai sama sekali di tepinya. */
.cmr-framed-artwork.is-canvas .cmr-glass-sheen{ display:none; }
.cmr-framed-artwork.is-canvas{ box-shadow:0 20px 38px -16px rgba(35,32,25,.4), 0 2px 6px rgba(35,32,25,.15) !important; }
.cmr-framed-artwork.is-canvas:not(.is-canvas-none) .cmr-art-wrap{
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.9),
    inset 0 3px 4px -2px rgba(255,255,255,.16),
    inset 0 -3px 5px -2px rgba(0,0,0,.5);
}

.cmr-select-wrap{ position:relative; }
.cmr-select-wrap select{
  width:100%; padding:10px 12px; font-size:13.5px; background:#FBFBF9; border:1px solid #232019;
  color:#232019; appearance:none; border-radius:0; cursor:pointer;
}
.cmr-select-wrap::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:12px; color:#5C574C; }

.cmr-note{ margin-top:26px; font-size:11.5px; color:#5C574C; line-height:1.6; border-top:1px solid #D9CFBA; padding-top:16px; }
.cmr-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:10; font-family:monospace; font-size:10.5px; color:rgba(255,255,255,.7); letter-spacing:.06em; }

.cmr-framed-artwork{ position:relative; transition:padding .35s ease, background .35s ease, box-shadow .35s ease; box-shadow:0 24px 48px -20px rgba(35,32,25,.35), 0 4px 10px rgba(35,32,25,.12); }
.cmr-mat-layer{ display:block; transition:padding .35s ease, background .35s ease; }
.cmr-art-wrap{ position:relative; display:block; overflow:hidden; line-height:0; }
.cmr-art-wrap img{ display:block; width:150px; height:auto; object-fit:contain; }
.cmr-framed-artwork.is-landscape .cmr-art-wrap img,
.cmr-framed-artwork.is-portrait .cmr-art-wrap img,
.cmr-framed-artwork.is-square .cmr-art-wrap img{ width:150px; height:auto; }
.cmr-glass-sheen{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); pointer-events:none; }

/* ---------- kalibrasi ukuran nyata ---------- */
.cmr-calib-badge{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 10px;
  background:#EFE9DA; font-size:11px; color:#5C574C;
}
.cmr-calib-badge__dot{ width:7px; height:7px; border-radius:50%; background:#C7883A; flex-shrink:0; }
.cmr-calib-badge.is-calibrated .cmr-calib-badge__dot{ background:#3E7D53; }
.cmr-calib-badge__text{ flex:1; }
.cmr-calib-badge__btn{
  border:1px solid #232019; background:transparent; padding:4px 9px; font-size:10.5px;
  cursor:pointer; font-family:inherit; color:#232019; flex-shrink:0;
}
.cmr-calib-badge__btn:hover{ background:#232019; color:#F3EEE3; }

.cmr-calib-bar{
  position:absolute; z-index:20; display:flex; flex-direction:column; align-items:center;
  transform:translateX(-50%); touch-action:none;
}
.cmr-calib-bar__line{
  width:3px; flex:1; background:#F5C64B; box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:ns-resize;
  min-height:20px;
}
.cmr-calib-bar__handle{
  width:18px; height:18px; border-radius:50%; background:#F5C64B; border:2px solid #232019;
  cursor:ns-resize; flex-shrink:0; touch-action:none;
}
.cmr-calib-bar__label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); white-space:nowrap;
  background:#232019; color:#F5C64B; font-family:monospace; font-size:11px; padding:3px 7px;
}

.cmr-calib-card{
  position:absolute; left:24px; bottom:24px; z-index:21; width:min(320px, calc(100% - 48px));
  background:#F3EEE3; border:1px solid #232019; padding:18px; color:#232019;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.4);
}
.cmr-calib-card__title{ margin:0 0 8px; font-size:14px; font-weight:600; }
.cmr-calib-card__text{ margin:0 0 14px; font-size:12px; line-height:1.5; color:#5C574C; }
.cmr-calib-card__custom{
  width:100%; margin-top:10px; padding:10px 12px; font-size:13.5px; border:1px solid #232019;
  background:#FBFBF9; color:#232019; font-family:inherit;
}
.cmr-calib-card__actions{ margin-top:14px; display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:900px){
  .cmr-calib-card{ left:12px; right:12px; bottom:12px; width:auto; }
}

/* ---------- crop foto produk, langsung di aplikasi mockup (sisi pembeli) ---------- */
.cmr-photo-crop-modal{
  display:none; position:fixed; inset:0; background:rgba(20,18,14,.75); z-index:100000;
  align-items:center; justify-content:center; padding:24px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.cmr-photo-crop-modal.open{ display:flex; }
.cmr-photo-crop-modal__body{
  background:#F3EEE3; width:min(640px,100%); max-height:90vh; overflow:auto; padding:20px; color:#232019;
}
.cmr-photo-crop-modal .cmr-crop-hint{ margin:0 0 12px; font-size:12.5px; color:#5C574C; }
.cmr-photo-crop-modal .cmr-crop-stage{ width:100%; height:380px; background:#1B1912; }
.cmr-photo-crop-modal .cmr-crop-stage img{ display:block; max-width:100%; }
.cmr-photo-crop-modal .cmr-crop-actions{ margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }