/* ════════════════════════════════════════════════════════════
   Swan Deco — "شاهد بغرفتك" (See it in your room)
   نمط معزول تماماً — كل الكلاسات تبدأ بـ rv- حتى ما تتعارض مع الموقع
   ════════════════════════════════════════════════════════════ */

.rv-bg{
  position:fixed; inset:0; z-index:9500; display:none;
  background:rgba(5,5,7,.96); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  flex-direction:column; touch-action:none;
  animation:rvFade .25s var(--ease,ease);
}
.rv-bg.open{ display:flex; }
@keyframes rvFade{ from{opacity:0} to{opacity:1} }

/* ── شريط علوي ── */
.rv-top{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(180deg,rgba(5,5,7,.7),transparent);
  pointer-events:none;
}
.rv-top *{ pointer-events:auto; }
.rv-title{
  font-family:var(--font-ar,sans-serif); font-size:15px; font-weight:700;
  color:var(--bone,#F4ECDB); letter-spacing:.02em;
  display:flex; align-items:center; gap:8px;
}
.rv-title b{ color:var(--gold,#D4AF37); font-weight:700; }
.rv-close{
  background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.35);
  color:var(--gold,#D4AF37); width:42px; height:42px; border-radius:50%;
  font-size:17px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all .2s; backdrop-filter:blur(8px);
}
.rv-close:hover{ background:var(--gold,#D4AF37); color:#0B0D0C; transform:rotate(90deg); }

/* ── المسرح (صورة الغرفة + القطعة) ── */
.rv-stage{
  position:relative; flex:1; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at center,#15110a 0%,#070707 75%);
}
.rv-room{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; user-select:none; -webkit-user-drag:none;
  pointer-events:none;
}

/* القطعة المقصوصة */
.rv-piece{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  cursor:grab; touch-action:none; will-change:transform;
  z-index:3; user-select:none;
}
.rv-piece.dragging{ cursor:grabbing; }
.rv-piece img{
  display:block; width:100%; height:auto; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
  /* الفلتر (إضاءة/ظل) يُحقن ديناميكياً من JS */
}
/* ظل أرضي ناعم تحت القطعة (يمنع شكل "الطايرة") */
.rv-shadow{
  position:absolute; left:50%; bottom:-3%;
  width:80%; height:15%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 42%,transparent 70%);
  filter:blur(8px); z-index:-1; pointer-events:none;
}
/* طبقة تلوين (white-balance) تنطبق على شكل القطعة فقط لمطابقة ألوان الغرفة */
.rv-tint{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  mix-blend-mode:soft-light;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* مقابض زاوية القطعة (تلميح بصري) */
.rv-piece::after{
  content:''; position:absolute; inset:-2px; border:1px dashed rgba(212,175,55,.0);
  border-radius:6px; transition:border-color .2s; pointer-events:none;
}
.rv-piece.active::after{ border-color:rgba(212,175,55,.55); }

/* ── حالة البداية (رفع الصورة) ── */
.rv-empty{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:30px;
}
.rv-empty .rv-ic{ font-size:54px; opacity:.85; }
.rv-empty h3{
  font-family:var(--font-ar,sans-serif); font-size:21px; font-weight:700;
  color:var(--bone,#F4ECDB); margin:0;
}
.rv-empty p{
  font-family:var(--font-ar,sans-serif); font-size:13px;
  color:var(--sand,#A89A7A); max-width:300px; line-height:1.8; margin:0;
}
.rv-empty-btns{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.rv-ebtn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gold,#D4AF37); color:#0B0D0C; border:none;
  padding:13px 24px; border-radius:12px; cursor:pointer;
  font-family:var(--font-ar,sans-serif); font-size:14px; font-weight:700;
  transition:all .2s; box-shadow:0 8px 24px rgba(212,175,55,.3);
}
.rv-ebtn.ghost{
  background:transparent; color:var(--gold,#D4AF37);
  border:1px solid rgba(201,168,76,.4); box-shadow:none;
}
.rv-ebtn:hover{ transform:translateY(-2px); }
.rv-ebtn.ghost:hover{ background:rgba(201,168,76,.08); }

/* ── شاشة التحميل (قص الخلفية) ── */
.rv-loading{
  position:absolute; inset:0; z-index:7; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:20px; background:rgba(5,5,7,.82); backdrop-filter:blur(6px);
}
.rv-loading.show{ display:flex; }
.rv-spin{
  width:54px; height:54px; border-radius:50%;
  border:3px solid rgba(212,175,55,.18); border-top-color:var(--gold,#D4AF37);
  animation:rvSpin .9s linear infinite;
}
@keyframes rvSpin{ to{ transform:rotate(360deg) } }
.rv-loading p{
  font-family:var(--font-ar,sans-serif); font-size:14px;
  color:var(--bone,#F4ECDB); text-align:center; max-width:280px; line-height:1.7;
}
.rv-loading small{ display:block; color:var(--sand,#A89A7A); font-size:11px; margin-top:6px; }

/* ── شريط التحكم السفلي ── */
.rv-controls{
  position:relative; z-index:6; display:none;
  flex-direction:column; gap:12px;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(8,8,10,.96),rgba(8,8,10,.82));
  border-top:1px solid rgba(201,168,76,.14);
}
.rv-controls.show{ display:flex; }
.rv-sliders{ display:flex; flex-direction:column; gap:11px; }
.rv-srow{ display:flex; align-items:center; gap:12px; }
.rv-srow .rv-lbl{
  font-family:var(--font-ar,sans-serif); font-size:12px; color:var(--bone2,#D5C9A9);
  min-width:52px; display:flex; align-items:center; gap:5px;
}
.rv-srow input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:5px;
  background:var(--ink5,#2A2E2B); border-radius:3px; outline:none; direction:ltr;
}
.rv-srow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--gold,#D4AF37); border:3px solid #0B0D0C;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.rv-srow input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--gold,#D4AF37);
  border:3px solid #0B0D0C; cursor:pointer;
}
.rv-btns{ display:flex; gap:10px; }
.rv-btns button{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:13px 10px; border-radius:11px; cursor:pointer;
  font-family:var(--font-ar,sans-serif); font-size:13.5px; font-weight:600;
  transition:all .2s; border:1px solid rgba(201,168,76,.3);
  background:transparent; color:var(--bone2,#D5C9A9);
}
.rv-btns button:hover{ border-color:var(--gold,#D4AF37); color:var(--gold,#D4AF37); }
.rv-btns button.rv-prim{
  background:#25D366; color:#fff; border-color:#25D366; font-weight:700;
  box-shadow:0 6px 18px rgba(37,211,102,.32);
}
.rv-btns button.rv-prim:hover{ background:#1fb354; color:#fff; }
.rv-btns button.rv-save{
  background:var(--gold,#D4AF37); color:#0B0D0C; border-color:var(--gold,#D4AF37); font-weight:700;
}
.rv-btns button.rv-save:hover{ color:#0B0D0C; }

.rv-hint{
  font-family:var(--font-ar,sans-serif); font-size:11px; color:var(--muted,#70685A);
  text-align:center; letter-spacing:.02em;
}

/* رسالة خطأ لطيفة */
.rv-err{
  position:absolute; inset:0; z-index:8; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:30px; background:rgba(5,5,7,.9);
}
.rv-err.show{ display:flex; }
.rv-err .rv-ic{ font-size:40px; }
.rv-err p{ font-family:var(--font-ar,sans-serif); font-size:14px; color:var(--bone,#F4ECDB); max-width:300px; line-height:1.8; }

/* زر الإطلاق داخل صفحة التفاصيل (لمسة مميزة) */
.btn.rv-launch{
  background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.06));
  border-color:rgba(212,175,55,.45); color:var(--gold,#D4AF37); font-weight:600;
}
.btn.rv-launch:hover{ background:rgba(212,175,55,.2); }

/* ── طبقة القطع ── */
.rv-layer{ position:absolute; inset:0; z-index:2; }
.rv-piece{ pointer-events:auto; }
/* زر حذف القطعة (يظهر للمختارة) */
.rv-del{
  position:absolute; top:-12px; right:-12px; width:27px; height:27px; border-radius:50%;
  background:#b91c1c; color:#fff; border:2px solid #0b0d0c; cursor:pointer; font-size:12px;
  display:none; align-items:center; justify-content:center; z-index:6;
}
.rv-piece.active .rv-del{ display:flex; }
/* انعكاس على الأرضية اللامعة */
.rv-reflect{
  position:absolute; left:0; top:100%; width:100%; display:none; pointer-events:none; opacity:.34;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 72%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 72%);
  filter:blur(1px); z-index:0;
}
.rv-reflect img{ width:100%; display:block; }

/* ── غرف جاهزة (حالة البداية) ── */
.rv-rooms-lbl{ font-family:var(--font-ar,sans-serif); font-size:11px; letter-spacing:.12em; color:var(--sand,#A89A7A); margin-top:8px; }
.rv-rooms{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
.rv-room-th{ width:98px; cursor:pointer; border-radius:10px; overflow:hidden; border:1px solid rgba(201,168,76,.25); background:var(--ink3,#181B19); transition:all .2s; }
.rv-room-th:hover{ border-color:var(--gold,#D4AF37); transform:translateY(-2px); }
.rv-room-th img{ width:100%; height:58px; object-fit:cover; display:block; }
.rv-room-th span{ display:block; font-family:var(--font-ar,sans-serif); font-size:10px; color:var(--bone2,#D5C9A9); text-align:center; padding:4px 2px; }

/* ── شريط القطع (إضافة/تبديل) ── */
.rv-strip{ display:none; background:rgba(8,8,10,.97); border-top:1px solid rgba(201,168,76,.16); padding:10px 12px; }
.rv-strip.open{ display:block; animation:rvFade .2s ease; }
.rv-strip-hint{ font-family:var(--font-ar,sans-serif); font-size:11.5px; color:var(--sand,#A89A7A); margin-bottom:8px; }
.rv-strip-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.rv-strip-card{ flex:0 0 auto; width:76px; cursor:pointer; border-radius:10px; overflow:hidden; border:1px solid rgba(201,168,76,.18); background:var(--ink3,#181B19); transition:all .2s; }
.rv-strip-card:hover{ border-color:var(--gold,#D4AF37); transform:translateY(-2px); }
.rv-strip-card img{ width:100%; height:64px; object-fit:cover; display:block; }
.rv-strip-card span{ display:block; font-family:var(--font-ar,sans-serif); font-size:9.5px; color:var(--bone2,#D5C9A9); text-align:center; padding:3px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* زر مفعّل (انعكاس) */
.rv-btns button.on{ background:var(--gold,#D4AF37); color:#0b0d0c; border-color:var(--gold,#D4AF37); font-weight:700; }

/* ── شرح أول مرة ── */
.rv-tut{
  position:absolute; inset:0; z-index:9; display:none; align-items:center; justify-content:center;
  background:rgba(5,5,7,.62); backdrop-filter:blur(3px); padding:24px;
}
.rv-tut.show{ display:flex; animation:rvFade .25s ease; }
.rv-tut-card{
  background:var(--ink2,#121514); border:1px solid rgba(201,168,76,.3); border-radius:16px;
  padding:22px 22px 18px; max-width:300px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.rv-tut-row{ display:flex; align-items:center; gap:12px; font-family:var(--font-ar,sans-serif); font-size:13.5px; color:var(--bone,#F4ECDB); }
.rv-tut-row span{ font-size:21px; }
.rv-tut-card .rv-ebtn{ justify-content:center; margin-top:4px; }

/* موبايل */
@media(max-width:560px){
  .rv-title{ font-size:13px; }
  .rv-empty h3{ font-size:18px; }
  .rv-btns button{ font-size:12px; padding:11px 5px; }
  .rv-srow .rv-lbl{ min-width:44px; font-size:11px; }
  .rv-room-th{ width:88px; }
  .rv-strip-card{ width:68px; }
}