/* عارض الغرفة 360° — يعيش داخل #cd-preview-stage الحالي بالضبط،
   بنفس المساحة وBorder Radius، بلا أي تغيير في تخطيط الصفحة. */

.cd-room360 {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;          /* احتياطي للمتصفحات بلا :has() — انظر أدناه */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111318;
  box-shadow: var(--shadow-card);
  touch-action: none;           /* الدوران باللمس لا يمرّر الصفحة */
}

/* ── ملء المساحة المتاحة ────────────────────────────────────────────────
 * المشكلة: كان ارتفاع العارض مشتقّاً من عرضه (aspect-ratio: 4/3) والعرض
 * محدود بـ.cd-preview-stage{max-width:620px}. فعلى شاشة 1440×900 كانت
 * الحاوية تتيح 780×534 بينما العارض يخرج 620×465، والفارق الرأسي (69px)
 * يوزّعه align-items:center فراغاً أبيض أعلى وأسفل.
 *
 * الحل: عند ظهور عارض 360 فقط، يُمدّ المسرح ويصير الارتفاع مقوداً بالمساحة
 * المتاحة لا بالعرض. الشرط :has(.cd-room360:not(.hidden)) يجعل القاعدة
 * تنطبق حصراً حين يكون العارض ظاهراً — فالمعاينة المسطّحة 2D
 * (#cd-room-fallback) لا تتأثر إطلاقاً، وتستعيد تخطيطها الأصلي تلقائياً
 * حين يعود العارض إلى Fallback. والمتصفحات التي لا تدعم :has() تبقى على
 * السلوك القديم بلا كسر.
 *
 * لا شيء من هذا يمسّ المشهد ثلاثي الأبعاد: renderer.setSize و camera.aspect
 * يتحدّثان من ResizeObserver على الحاوية، فتكبر الصورة بلا تمطيط ولا تشويه،
 * وحجم الستارة وموضعها بوحدات العالم لا يتغيّران. */
.cd-preview-stage-wrap:has(.cd-room360:not(.hidden)) {
  align-items: stretch;         /* بدل center الذي كان يوزّع الفارق فراغاً */
  padding: 12px 16px;           /* بدل 20px من كل جهة */
}
.cd-preview-stage:has(> .cd-room360:not(.hidden)) {
  max-width: 1180px;            /* بدل 620px */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cd-preview-stage:has(> .cd-room360:not(.hidden)) > .cd-room360 {
  aspect-ratio: auto;           /* الارتفاع لم يعد تابعاً للعرض */
  flex: 1 1 auto;
  min-height: 340px;            /* يمنع انكماشه على الشاشات القصيرة */
  max-height: 78vh;             /* يمنع خروجه عن الشاشة */
}

.cd-room360.hidden { display: none; }

.cd-room360-host { position: absolute; inset: 0; }
.cd-room360-host canvas.cd-room360-canvas {
  display: block; width: 100%; height: 100%; cursor: grab; outline: none;
}
.cd-room360-host canvas.cd-room360-canvas:active { cursor: grabbing; }

/* شارة 360 */
.cd-r360-badge {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: rgba(0,0,0,.55); color: #fff; padding: 3px 12px;
  border-radius: 20px; pointer-events: none; z-index: 3;
}

/* ── خطوط القياس ── */
/* overflow:hidden حاجز أخير: حتى لو أفلت خط من فحوصات shouldShowMeasurementGuides
 * فلن يخرج عن حدود حاوية العارض إلى بقية الصفحة. */
.cd-r360-guides { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.cd-r360-guides.hidden { display: none; }
.cd-r360-guide-line {
  position: absolute; height: 0; border-top: 2px dashed rgba(255,255,255,.9);
  transform-origin: 0 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.cd-r360-guide-line span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17,19,24,.85); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 6px;
}

/* ── طبقات التحميل والخطأ ── */
.cd-r360-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(17,19,24,.92); color: #e8eaed; text-align: center; padding: 20px;
}
.cd-r360-overlay.hidden { display: none; }
.cd-r360-msg { font-size: 13px; font-weight: 600; line-height: 1.7; max-width: 340px; }
.cd-r360-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent, #16a34a);
  animation: cd-r360-spin .8s linear infinite;
}
@keyframes cd-r360-spin { to { transform: rotate(360deg); } }
.cd-r360-retry {
  padding: 8px 20px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--accent, #16a34a); color: #fff; font-size: 12.5px; font-weight: 700;
  font-family: inherit;
}

/* ── لوحة معايرة المطوّر (Development فقط) ── */
.cd-r360-calib-toggle {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 7;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: rgba(17,19,24,.72); border: 1px solid rgba(255,255,255,.16);
  color: #e8eaed; font-size: 13px; line-height: 1; font-family: inherit;
}
.cd-r360-calib-toggle.hidden { display: none; }
.cd-r360-calib-toggle:hover { background: rgba(17,19,24,.92); }
.cd-r360-calib {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 7;
  width: 232px; max-height: calc(100% - 16px); display: flex; flex-direction: column;
  background: rgba(17,19,24,.94); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; color: #e8eaed; font-size: 11px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cd-r360-calib.hidden { display: none; }
.cd-r360-calib-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.12);
  font-weight: 700; font-size: 11.5px;
}
.cd-r360-calib-head button {
  background: none; border: none; color: #e8eaed; font-size: 17px;
  cursor: pointer; line-height: 1; padding: 0 2px; font-family: inherit;
}
.cd-r360-calib-body { padding: 8px 10px; overflow-y: auto; flex: 1; }
.cd-r360-row { display: grid; grid-template-columns: 62px 1fr 46px; gap: 6px; align-items: center; margin-bottom: 6px; }
.cd-r360-row label { color: #9aa0a6; font-size: 10px; }
.cd-r360-row input[type="range"] { width: 100%; accent-color: var(--accent, #16a34a); }
.cd-r360-row output { font-variant-numeric: tabular-nums; font-size: 10px; text-align: start; }
.cd-r360-calib-copy {
  margin: 0 10px 10px; padding: 7px; border: none; border-radius: 7px; cursor: pointer;
  background: var(--accent, #16a34a); color: #fff; font-size: 11px; font-weight: 700;
  font-family: inherit;
}

/* ── الجوال ── */
@media (max-width: 900px) {
  .cd-room360 { aspect-ratio: 3 / 2; }
  .cd-r360-calib { width: 190px; }
  /* القياسات تزدحم على الشاشات الصغيرة — تُخفى تلقائياً */
  .cd-r360-guides { display: none; }

  /* على الجوال لا نُجبر العارض على ارتفاع ضخم: نسبة معتدلة من الشاشة تكفي
   * لرؤية الستارة كاملة دون أن يدفع بقية النموذج بعيداً تحت الطيّة. */
  .cd-preview-stage-wrap:has(.cd-room360:not(.hidden)) { padding: 10px; }
  .cd-preview-stage:has(> .cd-room360:not(.hidden)) > .cd-room360 {
    flex: 0 0 auto;
    height: 58vh;
    min-height: 240px;
    max-height: 65vh;
  }
}

/* ملء الشاشة: العارض يملأ الشاشة بلا نسبة أبعاد مقيَّدة */
.cd-room360:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.cd-room360:fullscreen .cd-r360-badge { bottom: 20px; }