/* ═══════════════════════════════════════════════════════════════════════════
   آراء العملاء — صفحة مستقلة (تصميم من الصفر)
   قاعدة اللون المثبتة بالتباين: الذهبي #FFCC00 تعبئة + نص داكن (12.73:1)،
   والكهرماني #B45309 للنصوص الصغيرة (الذهبي كنص على أبيض = 1.51:1 ✗ يختفي).
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --rv-gold:#FFCC00; --rv-ink:#0B0F12; --rv-ink2:#5B6670; --rv-line:#E7EAEE;
        --rv-soft:#F5F7FA; --rv-amber:#B45309; }

/* ─── الواجهة ─── */
.rvh { background:var(--rv-ink); color:#FFF; padding:56px 0 60px; position:relative; overflow:hidden; }
.rvh::after { content:''; position:absolute; inset-block-start:-40%; inset-inline-end:-10%;
  width:520px; height:520px; border-radius:50%; background:rgba(255,204,0,.07); pointer-events:none; }
.rvh__in { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.rvh__eyebrow { display:inline-block; background:var(--rv-gold); color:var(--rv-ink);
  font-size:.72rem; font-weight:600; padding:5px 14px; border-radius:999px; }
.rvh__title { font-size:2.4rem; line-height:1.35; font-weight:700; margin:16px 0 12px; color:#FFF; }
.rvh__lead { font-size:.95rem; line-height:1.9; color:rgba(255,255,255,.72); margin:0; max-width:52ch; }

/* لوحة التقييم */
.rvh__score { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:26px 28px; text-align:center; }
.rvh__big { font-size:3.4rem; font-weight:700; line-height:1; color:var(--rv-gold); }
.rvh__big small { font-size:1.1rem; color:rgba(255,255,255,.45); font-weight:400; }
.rvh__stars { display:flex; justify-content:center; gap:3px; margin:10px 0 6px; }
.rvh__count { font-size:.8rem; color:rgba(255,255,255,.6); }
.rvh__dist { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.rvd { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }
.rvd__k { font-size:.72rem; color:rgba(255,255,255,.6); min-width:26px; text-align:start; }
/* display:block ضروري: العنصران span والعنصر السطري يتجاهل width/height فتبدو الأشرطة فارغة. */
.rvd__bar { display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.rvd__fill { display:block; height:100%; border-radius:99px; background:var(--rv-gold); width:0; transition:width .7s ease; }
.rvd__n { font-size:.7rem; color:rgba(255,255,255,.45); min-width:18px; text-align:end; }

/* نجوم العرض */
.rv-star { fill:rgba(255,255,255,.18); flex:0 0 auto; }
.rv-star.is-on { fill:var(--rv-gold); }
.rv-msg__stars .rv-star { fill:#DDE2E8; }
.rv-msg__stars .rv-star.is-on { fill:var(--rv-gold); }

/* ─── الصف: نصفان ─── */
.rv-shell { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:24px; align-items:start; }
.rv-card { background:#FFF; border:1px solid var(--rv-line); border-radius:16px; overflow:hidden; }
.rv-card__head { padding:20px 24px; border-block-end:1px solid var(--rv-line); }
.rv-card__title { font-size:1.05rem; font-weight:600; color:var(--rv-ink); margin:0; }
.rv-card__sub { font-size:.78rem; color:var(--rv-ink2); margin:4px 0 0; }
.rv-card__head--chat { display:flex; align-items:center; gap:9px; background:var(--rv-soft); }

/* ─── النموذج ─── */
.rv-card--form { position:sticky; top:calc(var(--header-height, 80px) + 16px); }
.rv-form { padding:22px 24px 24px; }
.rv-field { margin-bottom:16px; position:relative; }
.rv-lbl { display:block; font-size:.78rem; font-weight:500; color:var(--rv-ink); margin-bottom:7px; }
.rv-lbl i { color:var(--rv-amber); font-style:normal; margin-inline-start:2px; }
.rv-in { width:100%; height:44px; border:1px solid var(--rv-line); border-radius:10px; background:#FFF;
  padding:0 13px; font:inherit; font-size:.86rem; color:var(--rv-ink);
  transition:border-color .15s ease, box-shadow .15s ease; }
.rv-in::placeholder { color:#A7B0BA; }
.rv-in:focus { outline:none; border-color:var(--rv-gold); box-shadow:0 0 0 3px rgba(255,204,0,.22); }
.rv-in--other { margin-top:8px; }
.rv-ta { height:auto; padding:11px 13px; resize:vertical; line-height:1.75; }
.rv-cnt { position:absolute; inset-inline-end:2px; inset-block-end:-16px; font-size:.66rem; color:#A7B0BA; }
.rv-hint { display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--rv-ink2); margin:7px 0 0; }
.rv-hint svg { width:12px; height:12px; flex:0 0 auto; color:var(--rv-amber); }

/* اختيار النجوم */
.rv-rate { display:flex; align-items:center; gap:10px; }
.rv-stars { display:flex; gap:3px; }
.rv-pick { background:none; border:0; padding:1px; cursor:pointer; line-height:0; }
.rv-pick svg { fill:#DDE2E8; transition:fill .12s ease, transform .12s ease; }
.rv-pick.is-on svg { fill:var(--rv-gold); }
.rv-pick:hover svg { transform:scale(1.18); }
.rv-rate__txt { font-size:.75rem; color:var(--rv-amber); font-weight:500; }

.rv-submit { width:100%; margin-top:20px; height:48px; border:0; border-radius:10px;
  background:var(--rv-gold); color:var(--rv-ink); font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:filter .15s ease, transform .1s ease; }
.rv-submit:hover:not(:disabled) { filter:brightness(.94); }
.rv-submit:active:not(:disabled) { transform:scale(.99); }
.rv-submit:disabled { opacity:.55; cursor:default; }
.rv-note { font-size:.78rem; margin:11px 0 0; min-height:1em; line-height:1.6; color:var(--rv-ink2); }
.rv-note--ok { color:#15803D; }
.rv-note--err { color:#B91C1C; }

/* ─── الشات ─── */
.rv-live { width:8px; height:8px; border-radius:50%; background:#22C55E; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:rvPulse 2.4s infinite; }
@keyframes rvPulse { 70% { box-shadow:0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.rv-chip { margin-inline-start:auto; background:#FFF; border:1px solid var(--rv-line);
  border-radius:999px; padding:3px 11px; font-size:.72rem; color:var(--rv-ink2); }
/* ارتفاع محدود + تمرير داخلي = إحساس الشات المتصاعد */
.rv-feed { min-height:520px; max-height:660px; overflow-y:auto; padding:22px;
  display:flex; flex-direction:column; gap:18px; scrollbar-width:thin; }

.rv-msg { display:grid; grid-template-columns:38px minmax(0,1fr); gap:11px; align-items:start;
  animation:rvIn .32s ease both; }
@keyframes rvIn { from { opacity:0; transform:translateY(10px); } }
.rv-msg__ava { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:.76rem; font-weight:600; color:#FFF; flex:0 0 auto;
  background:hsl(var(--h,40) 52% 44%); }
.rv-msg__b { background:var(--rv-soft); border:1px solid var(--rv-line);
  border-radius:4px 14px 14px 14px; padding:13px 15px; min-width:0; }
[dir="rtl"] .rv-msg__b { border-radius:14px 4px 14px 14px; }
.rv-msg__top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rv-msg__name { font-size:.85rem; font-weight:600; color:var(--rv-ink); }
.rv-msg__stars { display:inline-flex; gap:1px; }
.rv-msg__car { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--rv-amber);
  background:#FFF; border:1px solid var(--rv-line); border-radius:999px; padding:2px 9px; margin-top:7px; }
.rv-msg__txt { font-size:.85rem; line-height:1.8; color:var(--rv-ink2); margin:9px 0 0;
  overflow-wrap:anywhere; } /* كلمة طويلة بلا مسافات كانت تكسر التخطيط */
.rv-msg__foot { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.rv-msg__time { font-size:.67rem; color:#9AA4AF; }
.rv-msg__reacts { display:inline-flex; gap:5px; margin-inline-start:auto; }
.rv-react { display:inline-flex; align-items:center; gap:4px; background:#FFF; border:1px solid var(--rv-line);
  border-radius:999px; padding:3px 9px; font-size:.75rem; cursor:pointer; line-height:1.4;
  transition:border-color .14s ease, transform .1s ease, background .14s ease; }
.rv-react:hover:not(:disabled) { border-color:var(--rv-gold); transform:translateY(-1px); }
.rv-react.is-mine { background:#FFFBEB; border-color:var(--rv-gold); }
.rv-react.is-dup { opacity:.5; cursor:default; }
.rv-react__n { font-size:.68rem; color:var(--rv-ink2); font-weight:500; }

.rv-empty, .rv-skel { margin:auto; text-align:center; color:var(--rv-ink2); font-size:.85rem;
  padding:40px 16px; line-height:1.9; }
.rv-empty svg { width:38px; height:38px; color:#D3D9E0; margin-bottom:10px; }

/* ─── التجاوب ─── */
@media (max-width: 980px) {
  .rvh__in { grid-template-columns:1fr; gap:28px; }
  .rvh__title { font-size:1.9rem; }
  .rv-shell { grid-template-columns:1fr; }
  .rv-card--form { position:static; } /* لا تثبيت في عمود واحد */
  .rv-feed { min-height:380px; max-height:460px; }
}
@media (max-width: 560px) {
  .rvh { padding:36px 0 40px; }
  .rvh__title { font-size:1.55rem; }
  .rvh__big { font-size:2.6rem; }
  .rv-form, .rv-card__head { padding-inline:16px; }
  .rv-feed { padding:14px; }
}