(function () {




























  
  const CM_IMG = "https://cdn.salla.sa/WlApNA/products/wfseFvgokGt2Zhs8f7GaFpFMWPdoBPJF11rH8XQM.png";
  const INCHES_IMG = "https://cdn.salla.sa/WlApNA/products/IZZipSjsYIoH7W9ObSjyr7jwellovRBMJcGTJoKU.png";
  const RETURN_URL = "https://quueen.com/return-policy/page-1702475190";

  const isProductPage =
    window.location.pathname.includes("/p") ||
    document.querySelector("salla-product-options") !== null;

  if (!isProductPage) return;

  function buildWidget() {
    const wrapper = document.createElement("div");
    wrapper.id = "qqn-size-guide";
    wrapper.style.cssText = "margin-top: 12px; margin-bottom: 16px; font-family: inherit; direction: rtl;";

    wrapper.innerHTML = `
      <style>
        #qqn-size-guide * { box-sizing: border-box; }

        #qqn-size-guide .qqn-sec-btn {
          display: flex; justify-content: space-between; align-items: center;
          width: 100%; background: rgba(53,53,53,0.08); border: none;
          cursor: pointer; padding: 0.75rem 1rem; font-size: 15px;
          color: #000; font-family: inherit; direction: rtl;
          margin-top: 8px;
        }
        #qqn-size-guide .qqn-sec-btn:hover { background: rgba(53,53,53,0.13); }
        #qqn-size-guide .qqn-toggle-label { display: flex; align-items: center; gap: 8px; }
        #qqn-size-guide .qqn-arrow { display: inline-block; transition: transform 0.3s ease; font-size: 12px; }
        #qqn-size-guide .qqn-arrow.open { transform: rotate(180deg); }
        #qqn-size-guide .qqn-sec-body { display: none; border-top: 1px solid #ccc; padding: 1rem; background: #fff; }
        #qqn-size-guide .qqn-sec-body.open { display: block; }
        #qqn-size-guide .qqn-tabs { display: flex; gap: 6px; margin-bottom: 1rem; direction: ltr; }
        #qqn-size-guide .qqn-tab {
          padding: 6px 18px; border: 1px solid #ddd; background: #f1f1f1;
          cursor: pointer; font-size: 13px; font-weight: 600; border-radius: 3px;
          transition: background 0.2s, color 0.2s; font-family: inherit;
        }
        #qqn-size-guide .qqn-tab.active { background: #000; color: #fff; border-color: #000; }
        #qqn-size-guide .qqn-img-wrap { display: none; }
        #qqn-size-guide .qqn-img-wrap.active { display: block; }
        #qqn-size-guide .qqn-img-wrap img { max-width: 100%; display: block; }
        #qqn-size-guide .qqn-return-text { font-size: 14px; color: #222; line-height: 1.8; margin: 0 0 10px 0; }
        #qqn-size-guide .qqn-return-link {
          display: inline-block; font-size: 13px; color: #000;
          text-decoration: underline; text-underline-offset: 3px;
        }
        #qqn-size-guide .qqn-return-link:hover { opacity: 0.7; }
      </style>

      <!-- قسم 1: جدول القياسات -->
      <button class="qqn-sec-btn" onclick="qqnSecToggle('sizes')">
        <span class="qqn-toggle-label">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          جدول القياسات
        </span>
        <span class="qqn-arrow" id="qqn-arrow-sizes">▼</span>
      </button>
      <div class="qqn-sec-body" id="qqn-body-sizes">
        <div class="qqn-tabs">
          <button class="qqn-tab active" id="qqn-tab-inches" onclick="qqnShowUnit('inches')">INCHES</button>
          <button class="qqn-tab" id="qqn-tab-cm" onclick="qqnShowUnit('cm')">CM</button>
        </div>
        <div class="qqn-img-wrap active" id="qqn-img-inches">
          <img src="${INCHES_IMG}" alt="مقاسات إنش" loading="lazy">
        </div>
        <div class="qqn-img-wrap" id="qqn-img-cm">
          <img src="${CM_IMG}" alt="مقاسات سم" loading="lazy">
        </div>
      </div>

      <!-- قسم 2: سياسة الاسترجاع -->
      <button class="qqn-sec-btn" onclick="qqnSecToggle('return')">
        <span class="qqn-toggle-label">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21 12A9 9 0 1 1 12 3M21 3v9h-9"/></svg>
          سياسة الاستبدال والاسترجاع
        </span>
        <span class="qqn-arrow" id="qqn-arrow-return">▼</span>
      </button>
      <div class="qqn-sec-body" id="qqn-body-return">
        <p class="qqn-return-text">  استرجاع مجاني خلال 7 أيام — بدون أسئلة، بدون تعقيد</p>
        <a class="qqn-return-link" href="${RETURN_URL}" target="_blank">سياسة الاستبدال والاسترجاع ←</a>
      </div>
    `;

    return wrapper;
  }

  window.qqnSecToggle = function (id) {
    const body = document.getElementById("qqn-body-" + id);
    const arrow = document.getElementById("qqn-arrow-" + id);
    if (!body) return;
    const isOpen = body.classList.contains("open");
    body.classList.toggle("open", !isOpen);
    arrow.classList.toggle("open", !isOpen);
  };

  window.qqnShowUnit = function (unit) {
    ["inches", "cm"].forEach(function (u) {
      document.getElementById("qqn-img-" + u)?.classList.toggle("active", u === unit);
      document.getElementById("qqn-tab-" + u)?.classList.toggle("active", u === unit);
    });
  };

  function inject() {
    if (document.getElementById("qqn-size-guide")) return;
    const target = document.querySelector("salla-product-options");
    if (!target) return;
    target.insertAdjacentElement("afterend", buildWidget());
  }

  function tryInject(retries = 10) {
    if (document.querySelector("salla-product-options")) {
      inject();
    } else if (retries > 0) {
      setTimeout(function () { tryInject(retries - 1); }, 400);
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () { tryInject(); });
  } else {
    tryInject();
  }

  const _pushState = history.pushState;
  history.pushState = function () {
    _pushState.apply(this, arguments);
    setTimeout(tryInject, 800);
  };
  window.addEventListener("popstate", function () { setTimeout(tryInject, 800); });
})();




(function () {
  
  "use strict";

  var SUPABASE_URL      = "https://aqgjdquhpmzryrmnqfzl.supabase.co";
  var SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFxZ2pkcXVocG16cnlybW5xZnpsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1NTMyNDEsImV4cCI6MjA5NTEyOTI0MX0.oA7dKrK0QujzntLMVpNc_9t60Nufn77Uh8LABTMhaAk";

  /* camera SVG icon */
  var CAMERA_SVG =
    '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" ' +
    'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ' +
    'style="display:inline-block;vertical-align:middle;color:#888">' +
    '<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>' +
    '<circle cx="12" cy="13" r="4"/>' +
    '</svg>';

  /* ══════════════════════════════════════════════
     CSS
  ══════════════════════════════════════════════ */
  function injectCSS() {
    if (document.getElementById("pcs-style")) return;
    var s = document.createElement("style");
    s.id = "pcs-style";
    s.textContent = `
.pcs-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 2px;
  direction: rtl;
  font-family: inherit;
  line-height: 1;
  flex-wrap: nowrap;
}
.pcs-camera {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.pcs-count {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
}
.pcs-stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}
.pcs-star {
  font-size: 12px;
  color: #f5a623;
  line-height: 1;
}
.pcs-star.e {
  color: #ddd;
}
.pcs-score {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}
/* shimmer */
.pcs-shimmer {
  height: 12px;
  width: 90px;
  border-radius: 6px;
  margin: 5px 0 3px;
  background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: pcs-sh 1.4s infinite;
  display: block;
}
@keyframes pcs-sh {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
    `;
    document.head.appendChild(s);
  }

  /* ══════════════════════════════════════════════
     HELPERS
  ══════════════════════════════════════════════ */
  function renderStars(avg) {
    var rounded = Math.round(parseFloat(avg));
    var h = "";
    for (var i = 1; i <= 5; i++)
      h += '<span class="pcs-star' + (i > rounded ? " e" : "") + '">★</span>';
    return h;
  }

  /* ══════════════════════════════════════════════
     SUPABASE BATCH FETCH
  ══════════════════════════════════════════════ */
  function fetchStats(productIds) {
    var inList = productIds.join(",");
    var url = SUPABASE_URL + "/rest/v1/review_stats"
            + "?product_id=in.(" + encodeURIComponent(inList) + ")"
            + "&select=product_id,avg_rating,total_reviews,has_images";
    return fetch(url, {
      headers: {
        "apikey":        SUPABASE_ANON_KEY,
        "Authorization": "Bearer " + SUPABASE_ANON_KEY,
        "Accept":        "application/json"
      }
    }).then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    });
  }

  /* ══════════════════════════════════════════════
     INJECT into ONE card
     Format: 📷 (1481) ★★★★★ 4.6
  ══════════════════════════════════════════════ */
  function injectCard(card, stat) {
    var sh = card.querySelector(".pcs-shimmer");
    if (sh && sh.parentNode) sh.parentNode.removeChild(sh);

    if (!stat || !stat.total_reviews || stat.total_reviews < 1) return;

    var avg        = parseFloat(stat.avg_rating  || 0).toFixed(1);
    var total      = Number(stat.total_reviews);
    var hasImages  = stat.has_images === true;

    var row = document.createElement("div");
    row.className = "pcs-row";
    row.innerHTML =
      (hasImages ? '<span class="pcs-camera">' + CAMERA_SVG + '</span>' : "") +
      '<span class="pcs-count">(' + total.toLocaleString("ar-SA") + ')</span>' +
      '<span class="pcs-stars">' + renderStars(avg) + '</span>' +
      '<span class="pcs-score">' + avg + '</span>';

    var titleEl = card.querySelector(".product-card__title");
    if (titleEl && titleEl.parentNode) {
      titleEl.parentNode.insertBefore(row, titleEl.nextSibling);
    }
  }

  /* ══════════════════════════════════════════════
     PROCESS a set of cards
  ══════════════════════════════════════════════ */
  function processCards(cards) {
    if (!cards.length) return;
    injectCSS();

    var idMap = {};
    cards.forEach(function (card) {
      var pid = "p" + card.id.replace("product-", "");
      idMap[pid] = card;

      var titleEl = card.querySelector(".product-card__title");
      if (titleEl && titleEl.parentNode) {
        var sh = document.createElement("div");
        sh.className = "pcs-shimmer";
        titleEl.parentNode.insertBefore(sh, titleEl.nextSibling);
      }
    });

    fetchStats(Object.keys(idMap)).then(function (rows) {
      var statMap = {};
      (rows || []).forEach(function (r) { statMap[r.product_id] = r; });
      Object.keys(idMap).forEach(function (pid) {
        injectCard(idMap[pid], statMap[pid] || null);
      });
    }).catch(function (err) {
      console.error("[CardStars] fetch error:", err);
      cards.forEach(function (card) {
        var sh = card.querySelector(".pcs-shimmer");
        if (sh && sh.parentNode) sh.parentNode.removeChild(sh);
      });
    });
  }

  /* ══════════════════════════════════════════════
     OBSERVER — dynamic / infinite scroll cards
  ══════════════════════════════════════════════ */
  function observeNewCards() {
    var processed = new Set();
    document.querySelectorAll("custom-salla-product-card[id^='product-']").forEach(function (c) {
      processed.add(c.id);
    });

    var observer = new MutationObserver(function (mutations) {
      var newCards = [];
      mutations.forEach(function (m) {
        m.addedNodes.forEach(function (node) {
          if (node.nodeType !== 1) return;
          if (node.matches && node.matches("custom-salla-product-card[id^='product-']") && !processed.has(node.id)) {
            newCards.push(node); processed.add(node.id);
          }
          var nested = node.querySelectorAll ? node.querySelectorAll("custom-salla-product-card[id^='product-']") : [];
          nested.forEach(function (c) {
            if (!processed.has(c.id)) { newCards.push(c); processed.add(c.id); }
          });
        });
      });
      if (newCards.length) processCards(newCards);
    });

    observer.observe(document.body, { childList: true, subtree: true });
  }

  /* ══════════════════════════════════════════════
     BOOT
  ══════════════════════════════════════════════ */
  function boot() {
    var cards = Array.prototype.slice.call(
      document.querySelectorAll("custom-salla-product-card[id^='product-']")
    );
    processCards(cards);
    observeNewCards();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }

})();


(function () {
  "use strict";

  var SUPABASE_URL      = "https://aqgjdquhpmzryrmnqfzl.supabase.co";
  var SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFxZ2pkcXVocG16cnlybW5xZnpsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1NTMyNDEsImV4cCI6MjA5NTEyOTI0MX0.oA7dKrK0QujzntLMVpNc_9t60Nufn77Uh8LABTMhaAk";
  var STORAGE_BUCKET    = "review-images";

  /* ══════════════════════════════════════════════
     SUPABASE HELPERS
  ══════════════════════════════════════════════ */
  function sbFetch(table, params) {
    var qs = Object.keys(params || {}).map(function (k) {
      return encodeURIComponent(k) + "=" + encodeURIComponent(params[k]);
    }).join("&");
    var url = SUPABASE_URL + "/rest/v1/" + table + (qs ? "?" + qs : "");
    return fetch(url, {
      headers: {
        "apikey":        SUPABASE_ANON_KEY,
        "Authorization": "Bearer " + SUPABASE_ANON_KEY,
        "Accept":        "application/json",
        "Content-Type":  "application/json"
      }
    }).then(function (r) {
      if (!r.ok) return r.text().then(function (t) { throw new Error("HTTP " + r.status + ": " + t); });
      return r.json();
    });
  }

  function sbInsert(table, data) {
    var url = SUPABASE_URL + "/rest/v1/" + table;
    return fetch(url, {
      method: "POST",
      headers: {
        "apikey":        SUPABASE_ANON_KEY,
        "Authorization": "Bearer " + SUPABASE_ANON_KEY,
        "Accept":        "application/json",
        "Content-Type":  "application/json",
        "Prefer":        "return=minimal"
      },
      body: JSON.stringify(data)
    }).then(function (r) {
      if (!r.ok) return r.text().then(function (t) { throw new Error("HTTP " + r.status + ": " + t); });
      return true;
    });
  }

  /* ── NEW: رفع صورة واحدة إلى Supabase Storage ── */
  function sbUploadImage(file, productId) {
    var ext      = file.name.split(".").pop().toLowerCase() || "jpg";
    var rand     = Math.random().toString(36).slice(2, 8);
    var fileName = productId + "/" + Date.now() + "_" + rand + "." + ext;
    var url      = SUPABASE_URL + "/storage/v1/object/" + STORAGE_BUCKET + "/" + fileName;

    return fetch(url, {
      method: "POST",
      headers: {
        "apikey":        SUPABASE_ANON_KEY,
        "Authorization": "Bearer " + SUPABASE_ANON_KEY,
        "Content-Type":  file.type || "image/jpeg",
        "x-upsert":      "false"
      },
      body: file
    }).then(function (r) {
      if (!r.ok) return r.text().then(function (t) { throw new Error("Upload failed " + r.status + ": " + t); });
      return SUPABASE_URL + "/storage/v1/object/public/" + STORAGE_BUCKET + "/" + fileName;
    });
  }

  /* ── NEW: رفع مصفوفة صور وإرجاع مصفوفة روابط ── */
  function sbUploadImages(files, productId) {
    if (!files || files.length === 0) return Promise.resolve([]);
    return Promise.all(
      Array.prototype.slice.call(files).map(function (f) {
        return sbUploadImage(f, productId);
      })
    );
  }

  function getProductId() {
    var m = window.location.pathname.match(/p(\d+)/);
    return m ? "p" + m[1] : null;
  }

  /* ══════════════════════════════════════════════
     CSS
  ══════════════════════════════════════════════ */
  function injectCSS() {
    if (document.getElementById("rvq-style")) return;
    var s = document.createElement("style");
    s.id = "rvq-style";
    s.textContent = `
@keyframes rvq-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes stpop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes rvq-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes rvq-dialog-in{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

.rvq-sh{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:rvq-shimmer 1.5s infinite;border-radius:8px}
.rvq-bar-shimmer{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.rvq-bar-shimmer .sh-stars{width:100px;height:18px}
.rvq-bar-shimmer .sh-text{width:180px;height:14px}
.rvq-sec-shimmer{margin:40px 0 60px;direction:rtl}
.rvq-sec-shimmer .sh-title{width:200px;height:28px;margin-bottom:20px}
.rvq-sec-shimmer .sh-sumbar{width:100%;height:70px;border-radius:12px;margin-bottom:26px}
.rvq-sh-cards{display:flex;gap:14px;overflow:hidden}
.rvq-sh-card{min-width:265px;height:180px;border-radius:14px;flex-shrink:0}
.rvq-sec-shimmer .sh-qa-title{width:200px;height:28px;margin:48px 0 20px}
.rvq-sh-qa-cards{display:flex;gap:14px;overflow:hidden}
.rvq-sh-qa-card{min-width:265px;height:140px;border-radius:14px;flex-shrink:0}

.rvq-empty{text-align:center;padding:40px 20px;color:#aaa;direction:rtl}
.rvq-empty-icon{font-size:40px;margin-bottom:12px}
.rvq-empty-title{font-size:16px;font-weight:700;color:#bbb;margin-bottom:6px}
.rvq-empty-sub{font-size:13px;color:#ccc}

.rvq-bar{display:flex;align-items:center;gap:10px;margin:0 0 20px;direction:rtl;flex-wrap:wrap;font-family:inherit;user-select:none}
.rvq-bar-stars{display:flex;gap:2px}
.rvq-bar-stars .st{font-size:19px;line-height:1;color:#f5a623;display:inline-block}
.rvq-bar-stars .st.e{color:#ddd}
.rvq-bar:hover .rvq-bar-stars .st{animation:stpop .4s ease both}
.rvq-bar:hover .rvq-bar-stars .st:nth-child(1){animation-delay:0s}
.rvq-bar:hover .rvq-bar-stars .st:nth-child(2){animation-delay:.05s}
.rvq-bar:hover .rvq-bar-stars .st:nth-child(3){animation-delay:.1s}
.rvq-bar:hover .rvq-bar-stars .st:nth-child(4){animation-delay:.15s}
.rvq-bar:hover .rvq-bar-stars .st:nth-child(5){animation-delay:.2s}
.rvq-bar-score{font-size:15px;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:4px;cursor:pointer}
.rvq-sep{color:#ccc;font-size:13px}
.rvq-bar-meta{font-size:13px;color:#666}
.rvq-bar-link{cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ccc;transition:color .15s,text-decoration-color .15s}
.rvq-bar-link:hover{color:#f5a623;text-decoration-color:#f5a623}

.rvq-bd-wrap{position:relative}
.rvq-bd-pop{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border:1px solid #eee;border-radius:16px;padding:20px;width:min(300px,92vw);z-index:99999;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);transition:opacity .22s cubic-bezier(.34,1.4,.64,1),transform .22s cubic-bezier(.34,1.4,.64,1);direction:rtl;box-shadow:0 4px 24px rgba(0,0,0,.10)}
.rvq-bd-pop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.rvq-bd-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}
.rvq-bd-bigscore{font-size:32px;font-weight:800;color:#1a1a1a;line-height:1}
.rvq-bd-starsrow{display:flex;gap:2px;margin-bottom:4px}
.rvq-bd-starsrow .st{font-size:14px;color:#f5a623}
.rvq-bd-starsrow .st.e{color:#e0e0e0}
.rvq-bd-totallbl{font-size:11px;color:#aaa}
.rvq-bd-lbl-title{font-size:11px;font-weight:700;color:#bbb;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.rvq-bd-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rvq-bd-lbl{font-size:12px;color:#555;min-width:24px;display:flex;align-items:center;gap:2px;justify-content:flex-end}
.rvq-bd-lbl .st{color:#f5a623;font-size:10px}
.rvq-bd-track{flex:1;height:7px;background:#f0f0f0;border-radius:99px;overflow:hidden}
.rvq-bd-fill{height:100%;background:#f5a623;border-radius:99px;width:0;transition:width .8s cubic-bezier(.25,1,.5,1)}
.rvq-bd-cnt{font-size:11px;color:#bbb;min-width:28px;text-align:left}

.rvq-section{font-family:inherit;direction:rtl;margin:40px 0 60px}
.rvq-section *{box-sizing:border-box}
.rvq-sec-title{font-size:22px;font-weight:800;color:#1a1a1a;margin-bottom:20px}
.rvq-sum-bar{background:#fdf8f0;border-radius:12px;padding:16px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;direction:rtl}
.rvq-sum-stars .st{color:#f5a623;font-size:24px}
.rvq-sum-stars .st.e{color:#ddd}
.rvq-sum-score{font-size:22px;font-weight:800;color:#1a1a1a;cursor:pointer;display:flex;align-items:center;gap:5px}
.rvq-sum-score svg{width:16px;height:16px;transition:transform .2s;color:#888}
.rvq-sum-score.open svg{transform:rotate(180deg)}
.rvq-sum-meta{font-size:14px;color:#555}

.rvq-cards-outer{position:relative}
.rvq-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
.rvq-track::-webkit-scrollbar{display:none}
.rvq-card{min-width:265px;max-width:280px;border:1px solid #eee;border-radius:14px;padding:16px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;gap:9px}
.rvq-card-stars .st{font-size:15px;color:#f5a623}
.rvq-card-stars .st.e{color:#ddd}
.rvq-card-meta{font-size:11px;color:#aaa}
.rvq-card-variant{font-size:12px;color:#555}
.rvq-card-text{font-size:13px;color:#333;line-height:1.7;flex:1}
.rvq-card-imgs{display:flex;gap:7px;flex-wrap:wrap}
.rvq-card-img{width:62px;height:62px;border-radius:8px;object-fit:cover;cursor:pointer;border:1px solid #eee;transition:opacity .15s}
.rvq-card-img:hover{opacity:.82}
.rvq-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px;margin-top:3px}
.rvq-card-src{font-size:11px;color:#aaa}
.rvq-card-src b{color:#3b82f6}
.rvq-card-like{display:flex;align-items:center;gap:4px;font-size:11px;color:#aaa;cursor:pointer;padding:3px 8px;border-radius:99px;border:1px solid #eee;background:#fafafa;transition:all .15s;user-select:none;font-family:inherit}
.rvq-card-like:hover{background:#f0f0f0}
.rvq-card-like.liked{color:#f5a623;border-color:#f5a623}
.rvq-scroll{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,.09);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;font-size:18px;color:#555;transition:background .15s;user-select:none;font-family:inherit}
.rvq-scroll:hover{background:#f5f5f5}
.rvq-scroll.sp{right:-13px}
.rvq-scroll.sn{left:-13px}
.rvq-show-all{display:block;width:100%;max-width:230px;margin:20px auto 0;padding:10px 0;border:1px solid #ddd;border-radius:99px;background:#f5f5f5;color:#333;font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:background .15s;font-family:inherit}
.rvq-show-all:hover{background:#ebebeb}

.rvq-lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .25s}
.rvq-lb.open{opacity:1;pointer-events:all}
.rvq-lb-main{display:flex;align-items:center;gap:16px}
.rvq-lb-img{max-width:80vw;max-height:78vh;border-radius:10px;object-fit:contain;transition:opacity .18s}
.rvq-lb-nav{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.rvq-lb-nav:hover{background:rgba(255,255,255,.3)}
.rvq-lb-close{position:absolute;top:16px;left:20px;background:none;border:none;color:#ccc;font-size:30px;cursor:pointer;line-height:1}
.rvq-lb-counter{font-size:13px;color:#888}

.rvq-qa{direction:rtl;margin-top:48px}
.rvq-qa-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.rvq-chips{display:flex;gap:8px;flex-wrap:wrap}
.rvq-chip{padding:6px 14px;border-radius:99px;border:1px solid #ddd;background:#fff;font-size:12px;color:#555;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.rvq-chip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.rvq-qa-track{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
.rvq-qa-track::-webkit-scrollbar{display:none}
.rvq-qa-card{min-width:280px;max-width:320px;border:1px solid #ebebeb;border-radius:16px;padding:0;flex-shrink:0;background:#fff;display:flex;flex-direction:column;overflow:hidden;animation:rvq-fadein .3s ease}
.rvq-qa-card-top{padding:16px 16px 14px}
.rvq-qa-q{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.6;margin-bottom:8px}
.rvq-qa-meta{font-size:11px;color:#bbb}
.rvq-qa-ans{background:#f9f9f9;border-top:1px solid #f0f0f0;padding:13px 16px;display:flex;gap:10px;align-items:flex-start}
.rvq-qa-icon{width:32px;height:32px;border-radius:50%;background:#fff5ec;border:1px solid #fde0c0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.rvq-qa-ans-body{flex:1;min-width:0}
.rvq-qa-by{font-size:11px;font-weight:700;color:#f5793a;margin-bottom:4px}
.rvq-qa-text{font-size:12px;color:#555;line-height:1.6;word-break:break-word}
.rvq-qa-no-ans{padding:12px 16px;font-size:12px;color:#ccc;border-top:1px solid #f5f5f5}

.rvq-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;direction:rtl}
.rvq-btn-action{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:99px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;user-select:none}
.rvq-btn-review{background:#f5a623;color:#fff}
.rvq-btn-review:hover{background:#e09610}
.rvq-btn-question{background:#1a1a1a;color:#fff}
.rvq-btn-question:hover{background:#333}

.rvq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:888888;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .22s}
.rvq-overlay.open{opacity:1;pointer-events:all}
.rvq-dialog{background:#fff;border-radius:22px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;overflow-x:hidden;direction:rtl;transform:scale(.96) translateY(12px);transition:transform .25s cubic-bezier(.34,1.4,.64,1);box-shadow:0 16px 60px rgba(0,0,0,.18)}
.rvq-overlay.open .rvq-dialog{transform:scale(1) translateY(0)}
.rvq-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}
.rvq-dialog-title{font-size:18px;font-weight:800;color:#1a1a1a}
.rvq-dialog-close{background:none;border:none;font-size:22px;color:#aaa;cursor:pointer;line-height:1;padding:0;transition:color .15s;font-family:inherit}
.rvq-dialog-close:hover{color:#333}
.rvq-dialog-body{padding:20px 24px 28px}
.rvq-field{margin-bottom:18px}
.rvq-label{display:block;font-size:13px;font-weight:700;color:#444;margin-bottom:7px}
.rvq-input{width:100%;padding:11px 14px;border:1px solid #e0e0e0;border-radius:10px;font-size:14px;font-family:inherit;color:#1a1a1a;outline:none;transition:border-color .15s;direction:rtl;background:#fff}
.rvq-input:focus{border-color:#f5a623}
.rvq-textarea{width:100%;padding:11px 14px;border:1px solid #e0e0e0;border-radius:10px;font-size:14px;font-family:inherit;color:#1a1a1a;outline:none;transition:border-color .15s;resize:vertical;min-height:100px;direction:rtl;background:#fff}
.rvq-textarea:focus{border-color:#f5a623}

.rvq-star-picker{display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-end}
.rvq-star-picker input{display:none}
.rvq-star-picker label{font-size:30px;color:#e0e0e0;cursor:pointer;transition:color .12s,transform .12s;line-height:1}
.rvq-star-picker label:hover,.rvq-star-picker label:hover~label,.rvq-star-picker input:checked~label{color:#f5a623}
.rvq-star-picker label:hover{transform:scale(1.2)}

.rvq-img-picker-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rvq-img-add-btn{width:70px;height:70px;border-radius:10px;border:1.5px dashed #ddd;background:#fafafa;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:#bbb;gap:4px;transition:border-color .15s}
.rvq-img-add-btn:hover{border-color:#f5a623;color:#f5a623}
.rvq-img-add-btn span{font-size:22px;line-height:1}
.rvq-img-thumb{position:relative;width:70px;height:70px}
.rvq-img-thumb img{width:70px;height:70px;border-radius:10px;object-fit:cover;border:1px solid #eee}
.rvq-img-del{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;background:#ff4444;border:none;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;font-family:inherit}

/* NEW: progress bar for image upload */
.rvq-upload-progress{margin-top:10px;display:none}
.rvq-upload-progress-bar{height:4px;background:#f0f0f0;border-radius:99px;overflow:hidden}
.rvq-upload-progress-fill{height:100%;background:#f5a623;border-radius:99px;width:0;transition:width .4s ease}
.rvq-upload-progress-label{font-size:11px;color:#aaa;margin-top:5px;text-align:center}

.rvq-submit{width:100%;padding:13px;border-radius:12px;border:none;background:#1a1a1a;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s;margin-top:4px}
.rvq-submit:hover{background:#333}
.rvq-submit:disabled{background:#ccc;cursor:not-allowed}
.rvq-submit-msg{text-align:center;font-size:13px;margin-top:10px;color:#888}

@media(max-width:600px){
  .rvq-bd-pop{right:auto;left:0;width:92vw}
  .rvq-scroll.sp{right:-6px}
  .rvq-scroll.sn{left:-6px}
  .rvq-dialog{border-radius:18px}
  .rvq-dialog-body{padding:16px 18px 24px}
  .rvq-dialog-head{padding:18px 18px 0}
  .rvq-card{min-width:240px}
  .rvq-qa-card{min-width:250px}
}
    `;
    document.head.appendChild(s);
  }

  /* ══════════════════════════════════════════════
     HELPERS
  ══════════════════════════════════════════════ */
  function stars(n, sz) {
    var h = "";
    for (var i = 1; i <= 5; i++)
      h += '<span class="st' + (i > n ? " e" : "") + '" style="font-size:' + sz + 'px">★</span>';
    return h;
  }

  function el(tag, cls, html) {
    var d = document.createElement(tag);
    if (cls) d.className = cls;
    if (html !== undefined) d.innerHTML = html;
    return d;
  }

  function stripTranslation(txt) {
    if (!txt) return txt;
    return txt
      .replace(/\s*ف?ترجم[^<\n]*(Google|جوجل)[^<\n]*/gi, "")
      .replace(/\s*عرض النص الأصلي\s*/gi, "")
      .replace(/\s*Translated by Google\s*/gi, "")
      .trim();
  }

  function makeBarShimmer() {
    var w = el("div", "rvq-bar-shimmer");
    w.innerHTML = '<div class="rvq-sh sh-stars"></div><div class="rvq-sh sh-text"></div>';
    return w;
  }

  function makeSectionShimmer() {
    var w = el("div", "rvq-sec-shimmer");
    w.innerHTML =
      '<div class="rvq-sh sh-title"></div>' +
      '<div class="rvq-sh sh-sumbar"></div>' +
      '<div class="rvq-sh-cards"><div class="rvq-sh rvq-sh-card"></div><div class="rvq-sh rvq-sh-card"></div><div class="rvq-sh rvq-sh-card"></div></div>' +
      '<div class="rvq-sh sh-qa-title"></div>' +
      '<div class="rvq-sh-qa-cards"><div class="rvq-sh rvq-sh-qa-card"></div><div class="rvq-sh rvq-sh-qa-card"></div><div class="rvq-sh rvq-sh-qa-card"></div></div>';
    return w;
  }

  function makeEmpty(icon, title, sub) {
    var d = el("div", "rvq-empty");
    d.innerHTML =
      '<div class="rvq-empty-icon">' + icon + '</div>' +
      '<div class="rvq-empty-title">' + title + '</div>' +
      '<div class="rvq-empty-sub">' + sub + '</div>';
    return d;
  }

  /* ══════════════════════════════════════════════
     LIGHTBOX
  ══════════════════════════════════════════════ */
  var lbImgs = [], lbIdx = 0, lbOverlay, lbImg, lbCnt;

  function buildLightbox() {
    lbOverlay = el("div", "rvq-lb");
    lbOverlay.innerHTML =
      '<button class="rvq-lb-close" id="rvqLbClose">✕</button>' +
      '<div class="rvq-lb-main">' +
        '<button class="rvq-lb-nav" id="rvqLbN">›</button>' +
        '<img class="rvq-lb-img" id="rvqLbImg" src="" alt="">' +
        '<button class="rvq-lb-nav" id="rvqLbP">‹</button>' +
      '</div>' +
      '<div class="rvq-lb-counter" id="rvqLbCnt"></div>';
    document.body.appendChild(lbOverlay);
    lbImg = document.getElementById("rvqLbImg");
    lbCnt = document.getElementById("rvqLbCnt");
    document.getElementById("rvqLbClose").onclick = closeLB;
    document.getElementById("rvqLbP").onclick = function () { moveLB(-1); };
    document.getElementById("rvqLbN").onclick = function () { moveLB(1); };
    lbOverlay.addEventListener("click", function (e) { if (e.target === lbOverlay) closeLB(); });
    document.addEventListener("keydown", function (e) {
      if (!lbOverlay.classList.contains("open")) return;
      if (e.key === "ArrowLeft")  moveLB(-1);
      if (e.key === "ArrowRight") moveLB(1);
      if (e.key === "Escape")     closeLB();
    });
  }

  function openLB(imgs, idx) { lbImgs = imgs; lbIdx = idx; updateLB(); lbOverlay.classList.add("open"); document.body.style.overflow = "hidden"; }
  function closeLB()         { lbOverlay.classList.remove("open"); document.body.style.overflow = ""; }
  function moveLB(d)         { lbIdx = (lbIdx + d + lbImgs.length) % lbImgs.length; updateLB(); }
  function updateLB() {
    lbImg.style.opacity = "0";
    var src = lbImgs[lbIdx];
    setTimeout(function () { lbImg.src = src; lbImg.style.opacity = "1"; }, 160);
    lbCnt.textContent = (lbIdx + 1) + " / " + lbImgs.length;
    var show = lbImgs.length > 1 ? "flex" : "none";
    document.getElementById("rvqLbP").style.display = show;
    document.getElementById("rvqLbN").style.display = show;
  }

  /* ══════════════════════════════════════════════
     BREAKDOWN (popup)
  ══════════════════════════════════════════════ */
  function buildBreakdown(stats) {
    var avg = parseFloat(stats.avg_rating || 0).toFixed(1);
    var total = Number(stats.total_reviews || 0);
    var breakdown = [5,4,3,2,1].map(function (s) { return { stars: s, count: stats["s"+s] || 0 }; });
    var maxCount  = Math.max.apply(null, breakdown.map(function (r) { return r.count; })) || 1;

    var head =
      '<div class="rvq-bd-head">' +
        '<div class="rvq-bd-bigscore">' + avg + '</div>' +
        '<div>' +
          '<div class="rvq-bd-starsrow">' + stars(Math.round(avg), 14) + '</div>' +
          '<div class="rvq-bd-totallbl">' + total.toLocaleString("ar-SA") + ' تقييم</div>' +
        '</div>' +
      '</div>' +
      '<div class="rvq-bd-lbl-title">توزيع التقييمات</div>';

    var rows = breakdown.map(function (r) {
      var pct = ((r.count / maxCount) * 100).toFixed(1);
      return '<div class="rvq-bd-row">' +
        '<span class="rvq-bd-lbl">' + r.stars + '<span class="st">★</span></span>' +
        '<div class="rvq-bd-track"><div class="rvq-bd-fill" data-p="' + pct + '"></div></div>' +
        '<span class="rvq-bd-cnt">' + Number(r.count).toLocaleString() + '</span>' +
      '</div>';
    }).join("");

    return head + rows;
  }

  /* ══════════════════════════════════════════════
     DIALOGS
  ══════════════════════════════════════════════ */
  var productIdGlobal = null;
  var overlayEl = null;

  function buildDialogs() {
    overlayEl = el("div", "rvq-overlay");
    overlayEl.innerHTML = '<div class="rvq-dialog" id="rvqDialogInner"></div>';
    document.body.appendChild(overlayEl);
    overlayEl.addEventListener("click", function (e) {
      if (e.target === overlayEl) closeDialog();
    });
    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape") closeDialog();
    });
  }

  function openDialog(html) {
    document.getElementById("rvqDialogInner").innerHTML = html;
    overlayEl.classList.add("open");
    document.body.style.overflow = "hidden";
  }

  function closeDialog() {
    overlayEl.classList.remove("open");
    document.body.style.overflow = "";
  }

  /* ══════════════════════════════════════════════
     ADD REVIEW DIALOG  ← UPDATED: image upload
  ══════════════════════════════════════════════ */
  function openReviewDialog() {
    var html =
      '<div class="rvq-dialog-head">' +
        '<span class="rvq-dialog-title">أضف تقييمك</span>' +
        '<button class="rvq-dialog-close" id="rvqDlgClose">✕</button>' +
      '</div>' +
      '<div class="rvq-dialog-body">' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">اسمك</label>' +
          '<input class="rvq-input" id="rvqRvName" type="text" placeholder="أدخل اسمك">' +
        '</div>' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">تقييمك</label>' +
          '<div class="rvq-star-picker" id="rvqStarPicker">' +
            [5,4,3,2,1].map(function(i){
              return '<input type="radio" name="rvqstar" id="rvqS'+i+'" value="'+i+'">' +
                     '<label for="rvqS'+i+'">★</label>';
            }).join("") +
          '</div>' +
        '</div>' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">تعليقك</label>' +
          '<textarea class="rvq-textarea" id="rvqRvText" placeholder="شاركنا تجربتك مع المنتج..."></textarea>' +
        '</div>' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">صور (اختياري — حتى 5 صور)</label>' +
          '<div class="rvq-img-picker-wrap" id="rvqImgWrap">' +
            '<div class="rvq-img-add-btn" id="rvqImgAddBtn"><span>＋</span>صورة</div>' +
          '</div>' +
          '<input type="file" id="rvqFileInput" accept="image/*" multiple style="display:none">' +
          /* progress bar — hidden until upload starts */
          '<div class="rvq-upload-progress" id="rvqUploadProgress">' +
            '<div class="rvq-upload-progress-bar">' +
              '<div class="rvq-upload-progress-fill" id="rvqUploadFill"></div>' +
            '</div>' +
            '<div class="rvq-upload-progress-label" id="rvqUploadLabel">جاري رفع الصور...</div>' +
          '</div>' +
        '</div>' +
        '<button class="rvq-submit" id="rvqRvSubmit">إرسال التقييم</button>' +
        '<div class="rvq-submit-msg" id="rvqRvMsg"></div>' +
      '</div>';

    openDialog(html);

    document.getElementById("rvqDlgClose").onclick = closeDialog;

    var pickedFiles = [];
    var addBtn    = document.getElementById("rvqImgAddBtn");
    var fileInput = document.getElementById("rvqFileInput");
    var imgWrap   = document.getElementById("rvqImgWrap");

    addBtn.onclick = function () { fileInput.click(); };

    fileInput.onchange = function () {
      var files = Array.prototype.slice.call(fileInput.files || []);
      files.forEach(function (f) {
        if (pickedFiles.length >= 5) return;
        pickedFiles.push(f);
        var reader = new FileReader();
        reader.onload = function (e) {
          var thumb = el("div", "rvq-img-thumb");
          var idx   = pickedFiles.length - 1;
          thumb.innerHTML =
            '<img src="' + e.target.result + '" alt="">' +
            '<button class="rvq-img-del" data-idx="' + idx + '">✕</button>';
          thumb.querySelector(".rvq-img-del").onclick = function () {
            var di = parseInt(this.dataset.idx);
            pickedFiles.splice(di, 1);
            thumb.remove();
            imgWrap.querySelectorAll(".rvq-img-del").forEach(function (b, i) { b.dataset.idx = i; });
            if (pickedFiles.length < 5 && !imgWrap.querySelector(".rvq-img-add-btn")) {
              imgWrap.appendChild(addBtn);
            }
          };
          imgWrap.insertBefore(thumb, addBtn);
          if (pickedFiles.length >= 5 && addBtn.parentNode) addBtn.parentNode.removeChild(addBtn);
        };
        reader.readAsDataURL(f);
      });
      fileInput.value = "";
    };

    /* ── SUBMIT ── */
    document.getElementById("rvqRvSubmit").onclick = function () {
      var name   = (document.getElementById("rvqRvName").value  || "").trim();
      var text   = (document.getElementById("rvqRvText").value  || "").trim();
      var starEl = document.querySelector('input[name="rvqstar"]:checked');
      var rating = starEl ? parseInt(starEl.value) : 0;
      var msg    = document.getElementById("rvqRvMsg");

      if (!name)   { msg.style.color = "#e44"; msg.textContent = "الرجاء إدخال اسمك";    return; }
      if (!rating) { msg.style.color = "#e44"; msg.textContent = "الرجاء اختيار تقييم"; return; }
      if (!text)   { msg.style.color = "#e44"; msg.textContent = "الرجاء كتابة تعليقك"; return; }

      var btn = document.getElementById("rvqRvSubmit");
      btn.disabled    = true;
      msg.textContent = "";

      var progressWrap  = document.getElementById("rvqUploadProgress");
      var progressFill  = document.getElementById("rvqUploadFill");
      var progressLabel = document.getElementById("rvqUploadLabel");

      /* ① رفع الصور أولاً (إن وجدت) */
      var uploadPromise;

      if (pickedFiles.length > 0) {
        btn.textContent          = "جاري رفع الصور...";
        progressWrap.style.display = "block";
        progressFill.style.width   = "10%";
        progressLabel.textContent  = "جاري رفع " + pickedFiles.length + " صورة...";

        /* رفع الصور واحدة واحدة مع تحديث progress */
        var uploaded  = 0;
        var urlList   = [];
        uploadPromise = pickedFiles.reduce(function (chain, file) {
          return chain.then(function () {
            return sbUploadImage(file, productIdGlobal).then(function (url) {
              urlList.push(url);
              uploaded++;
              var pct = Math.round((uploaded / pickedFiles.length) * 80) + 10;
              progressFill.style.width  = pct + "%";
              progressLabel.textContent = "تم رفع " + uploaded + " من " + pickedFiles.length;
            });
          });
        }, Promise.resolve()).then(function () { return urlList; });

      } else {
        uploadPromise = Promise.resolve([]);
      }

      /* ② بعد رفع الصور — أدخل التقييم */
      uploadPromise.then(function (imageUrls) {
        btn.textContent          = "جاري الإرسال...";
        progressFill.style.width = "90%";

        var today = new Date().toISOString().slice(0, 10);
        var payload = {
          product_id:  productIdGlobal,
          user_name:   name,
          stars:       rating,
          review_text: text,
          review_date: today,
          likes:       0,
          images:      imageUrls   /* ← روابط Supabase Storage */
        };

        return sbInsert("reviews", payload);

      }).then(function () {
        progressFill.style.width  = "100%";
        progressLabel.textContent = "تم الرفع ✓";
        btn.textContent           = "تم الإرسال ✓";
        msg.style.color           = "#22a";
        msg.textContent           = "شكراً! سيظهر تقييمك بعد المراجعة.";
        setTimeout(closeDialog, 2000);

      }).catch(function (err) {
        btn.disabled    = false;
        btn.textContent = "إرسال التقييم";
        msg.style.color = "#e44";

        /* تفريق بين خطأ الرفع وخطأ الإدخال */
        if (err.message && err.message.indexOf("Upload failed") !== -1) {
          msg.textContent = "فشل رفع الصور، تحقق من الاتصال وحاول مجدداً.";
        } else {
          msg.textContent = "حدث خطأ، يرجى المحاولة مجدداً.";
        }
        progressWrap.style.display = "none";
        console.error("[Reviews] insert/upload error:", err);
      });
    };
  }

  /* ══════════════════════════════════════════════
     ADD QUESTION DIALOG  (unchanged)
  ══════════════════════════════════════════════ */
  function openQuestionDialog() {
    var html =
      '<div class="rvq-dialog-head">' +
        '<span class="rvq-dialog-title">اطرح سؤالاً</span>' +
        '<button class="rvq-dialog-close" id="rvqDlgClose2">✕</button>' +
      '</div>' +
      '<div class="rvq-dialog-body">' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">اسمك</label>' +
          '<input class="rvq-input" id="rvqQName" type="text" placeholder="أدخل اسمك">' +
        '</div>' +
        '<div class="rvq-field">' +
          '<label class="rvq-label">سؤالك عن المنتج</label>' +
          '<textarea class="rvq-textarea" id="rvqQText" placeholder="اكتب سؤالك هنا..." style="min-height:80px"></textarea>' +
        '</div>' +
        '<button class="rvq-submit" id="rvqQSubmit">إرسال السؤال</button>' +
        '<div class="rvq-submit-msg" id="rvqQMsg"></div>' +
      '</div>';

    openDialog(html);

    document.getElementById("rvqDlgClose2").onclick = closeDialog;

    document.getElementById("rvqQSubmit").onclick = function () {
      var name = (document.getElementById("rvqQName").value || "").trim();
      var text = (document.getElementById("rvqQText").value || "").trim();
      var msg  = document.getElementById("rvqQMsg");

      if (!name) { msg.style.color = "#e44"; msg.textContent = "الرجاء إدخال اسمك";    return; }
      if (!text) { msg.style.color = "#e44"; msg.textContent = "الرجاء كتابة سؤالك";  return; }

      var btn = document.getElementById("rvqQSubmit");
      btn.disabled    = true;
      btn.textContent = "جاري الإرسال...";
      msg.textContent = "";

      var today = new Date().toISOString().slice(0, 10);
      var payload = {
        product_id:    productIdGlobal,
        user_name:     name,
        question:      text,
        question_date: today,
        answer:        null,
        answered_by:   null
      };

      sbInsert("questions", payload).then(function () {
        btn.textContent = "تم الإرسال ✓";
        msg.style.color = "#22a";
        msg.textContent = "شكراً! سيتم الرد على سؤالك قريباً.";
        setTimeout(closeDialog, 2000);
      }).catch(function (err) {
        btn.disabled    = false;
        btn.textContent = "إرسال السؤال";
        msg.style.color = "#e44";
        msg.textContent = "حدث خطأ، يرجى المحاولة مجدداً.";
        console.error("[Reviews] insert error:", err);
      });
    };
  }

  /* ══════════════════════════════════════════════
     BUILD REVIEWS SECTION
  ══════════════════════════════════════════════ */
  function buildReviewsSection(reviews, stats) {
    var sec = el("div", "rvq-section");
    sec.id = "rvqReviewsSection";
    sec.appendChild(el("div", "rvq-sec-title", "التعليقات على المنتج"));

    if (!reviews || reviews.length === 0) {
      sec.appendChild(makeEmpty("💬", "لا توجد تعليقات بعد", "كن أول من يشارك رأيه في هذا المنتج"));
      return sec;
    }

    var avg   = parseFloat(stats.avg_rating || 0).toFixed(1);
    var total = Number(stats.total_reviews || 0);

    var sumBar = el("div", "rvq-sum-bar");
    sumBar.innerHTML =
      '<div class="rvq-bd-wrap">' +
        '<div class="rvq-sum-score" id="rvqSumScore">' +
          '<div class="rvq-sum-stars">' + stars(Math.round(avg), 24) + '</div>' +
          avg +
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>' +
        '</div>' +
        '<div class="rvq-bd-pop" id="rvqSumPop">' + buildBreakdown(stats) + '</div>' +
      '</div>' +
      '<span class="rvq-sep">•</span>' +
      '<span class="rvq-sum-meta">' + total.toLocaleString("ar-SA") + ' تقييم</span>';
    sec.appendChild(sumBar);

    var outer = el("div", "rvq-cards-outer");
    var track = el("div", "rvq-track");
    track.id = "rvqRevTrack";

    reviews.forEach(function (r) {
      var card = el("div", "rvq-card");
      var imgs = Array.isArray(r.images) ? r.images : [];
      var imgsHTML = imgs.length
        ? '<div class="rvq-card-imgs">' + imgs.map(function (img, i) {
            return '<img class="rvq-card-img" src="' + img + '" data-idx="' + i + '" alt="">';
          }).join("") + '</div>'
        : "";

      card.innerHTML =
        '<div class="rvq-card-stars">' + stars(r.stars, 15) + '</div>' +
        '<div class="rvq-card-meta">' + (r.review_date||"") + ' &nbsp;•&nbsp; ' + (r.user_name||"") + '</div>' +
        (r.variant ? '<div class="rvq-card-variant"><b>جسم:</b> ' + r.variant + '</div>' : "") +
        '<div class="rvq-card-text">' + (r.review_text||"") + '</div>' +
        imgsHTML +
        '<div class="rvq-card-foot">' +
          '<span class="rvq-card-src">اشتريته من <b>' + (r.source||"كوين") + '</b></span>' +
          '<button class="rvq-card-like" data-likes="' + (r.likes||0) + '">' +
            '👍 <span class="lc">' + (r.likes > 0 ? r.likes : "") + '</span>' +
          '</button>' +
        '</div>';

      card.dataset.imgs = JSON.stringify(imgs);
      track.appendChild(card);
    });

    track.addEventListener("click", function (e) {
      var btn = e.target.closest(".rvq-card-like");
      if (btn) {
        var wasLiked = btn.classList.contains("liked");
        btn.classList.toggle("liked");
        var next = (parseInt(btn.dataset.likes)||0) + (wasLiked ? -1 : 1);
        btn.dataset.likes = next;
        btn.querySelector(".lc").textContent = next > 0 ? next : "";
      }
      var img = e.target.closest(".rvq-card-img");
      if (img) {
        var imgs2 = JSON.parse(img.closest(".rvq-card").dataset.imgs || "[]");
        openLB(imgs2, parseInt(img.dataset.idx));
      }
    });

    outer.appendChild(track);
    var sp = el("button", "rvq-scroll sp", "›");
    var sn = el("button", "rvq-scroll sn", "‹");
    sp.onclick = function () { document.getElementById("rvqRevTrack").scrollBy({ left: 290, behavior: "smooth" }); };
    sn.onclick = function () { document.getElementById("rvqRevTrack").scrollBy({ left: -290, behavior: "smooth" }); };
    outer.appendChild(sp);
    outer.appendChild(sn);
    sec.appendChild(outer);
    sec.appendChild(el("button", "rvq-show-all", "عرض جميع التعليقات ›"));
    return sec;
  }

  /* ══════════════════════════════════════════════
     BUILD Q&A SECTION
  ══════════════════════════════════════════════ */
  function buildQASection(questions) {
    var sec = el("div", "rvq-qa");
    sec.id = "rvqQASection";

    var header = el("div", "rvq-qa-header");
    header.innerHTML = '<div class="rvq-sec-title" style="margin-bottom:0">أسئلة وأجوبة عن المنتج</div>';
    sec.appendChild(header);

    if (!questions || questions.length === 0) {
      sec.appendChild(makeEmpty("🙋", "لا توجد أسئلة بعد", "هل لديك سؤال؟ اضغط على زر «اطرح سؤالاً»"));
      return sec;
    }

    var chipsDiv = el("div", "rvq-chips");
    var chip = el("button", "rvq-chip active", "الكل (" + questions.length + ")");
    chipsDiv.appendChild(chip);
    header.appendChild(chipsDiv);

    var qaTrack = el("div", "rvq-qa-track");
    questions.forEach(function (q) {
      var card = el("div", "rvq-qa-card");
      var answerHTML = "";
      if (q.answer) {
        var cleanAns = stripTranslation(q.answer);
        answerHTML =
          '<div class="rvq-qa-ans">' +
            '<div class="rvq-qa-icon">🏪</div>' +
            '<div class="rvq-qa-ans-body">' +
              '<div class="rvq-qa-by">إجابة من ' + (q.answered_by||"كوين") + '</div>' +
              '<div class="rvq-qa-text">' + cleanAns + '</div>' +
            '</div>' +
          '</div>';
      } else {
        answerHTML = '<div class="rvq-qa-no-ans">لم يتم الرد بعد</div>';
      }

      card.innerHTML =
        '<div class="rvq-qa-card-top">' +
          '<div class="rvq-qa-q">' + stripTranslation(q.question) + '</div>' +
          '<div class="rvq-qa-meta">' + (q.user_name||"") + ' · ' + (q.question_date||"") + '</div>' +
        '</div>' +
        answerHTML;

      qaTrack.appendChild(card);
    });

    sec.appendChild(qaTrack);
    sec.appendChild(el("button", "rvq-show-all", "عرض جميع الأسئلة ›"));
    return sec;
  }

  /* ══════════════════════════════════════════════
     ACTION BUTTONS ROW
  ══════════════════════════════════════════════ */
  function buildActionRow() {
    var row = el("div", "rvq-action-row");
    var btnReview = el("button", "rvq-btn-action rvq-btn-review", "✏️ اكتب تقييماً");
    var btnQ      = el("button", "rvq-btn-action rvq-btn-question", "❓ اطرح سؤالاً");
    btnReview.onclick = openReviewDialog;
    btnQ.onclick      = openQuestionDialog;
    row.appendChild(btnReview);
    row.appendChild(btnQ);
    return row;
  }

  /* ══════════════════════════════════════════════
     SCROLL LINKS
  ══════════════════════════════════════════════ */
  function wireScrollLinks() {
    var toReviews = document.getElementById("rvqScrollToReviews");
    var toQA      = document.getElementById("rvqScrollToQA");
    var revSec    = document.getElementById("rvqReviewsSection");
    var qaSec     = document.getElementById("rvqQASection");

    function smoothTo(target) {
      if (!target) return;
      var top = target.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: top, behavior: "smooth" });
    }

    if (toReviews) toReviews.addEventListener("click", function () { smoothTo(revSec); });
    if (toQA)      toQA.addEventListener("click",      function () { smoothTo(qaSec); });
  }

  /* ══════════════════════════════════════════════
     WIRE POPUP
  ══════════════════════════════════════════════ */
  function wireSumPopup() {
    var sumScore = document.getElementById("rvqSumScore");
    var sumPop   = document.getElementById("rvqSumPop");
    var h1Score  = document.getElementById("rvqH1Score");
    var h1Pop    = document.getElementById("rvqH1Pop");

    function togglePopup(scoreEl, popEl, e) {
      e.stopPropagation();
      [sumPop, h1Pop].forEach(function (p) { if (p && p !== popEl) p.classList.remove("show"); });
      [sumScore, h1Score].forEach(function (s) { if (s && s !== scoreEl) s.classList.remove("open"); });
      var open = popEl.classList.toggle("show");
      scoreEl.classList.toggle("open", open);
      if (open) popEl.querySelectorAll(".rvq-bd-fill").forEach(function (f) { f.style.width = f.dataset.p + "%"; });
    }

    if (sumScore && sumPop) sumScore.addEventListener("click", function (e) { togglePopup(sumScore, sumPop, e); });
    if (h1Score  && h1Pop)  h1Score.addEventListener("click",  function (e) { togglePopup(h1Score, h1Pop, e); });

    document.addEventListener("click", function () {
      if (sumPop)   sumPop.classList.remove("show");
      if (h1Pop)    h1Pop.classList.remove("show");
      if (sumScore) sumScore.classList.remove("open");
      if (h1Score)  h1Score.classList.remove("open");
    });
  }

  /* ══════════════════════════════════════════════
     INIT
  ══════════════════════════════════════════════ */
  function init() {
    var productId = getProductId();
    if (!productId) {
      console.error("[Reviews] ❌ لم يتم اكتشاف product_id من URL:", window.location.pathname);
      return;
    }
    productIdGlobal = productId;

    injectCSS();
    buildLightbox();
    buildDialogs();

    var h1 = document.querySelector("h1");
    var barShimmer = makeBarShimmer();
    if (h1) h1.insertAdjacentElement("afterend", barShimmer);

    var target = document.querySelector("section.product-more-info") || document.body;
    var secShimmer = makeSectionShimmer();
    if (target === document.body) target.appendChild(secShimmer);
    else target.insertAdjacentElement("afterend", secShimmer);

    Promise.all([
      sbFetch("reviews",      { product_id: "eq." + productId, order: "created_at.desc", limit: "50" }),
      sbFetch("review_stats", { product_id: "eq." + productId, limit: "1" }),
      sbFetch("questions",    { product_id: "eq." + productId, order: "created_at.desc", limit: "30" })
    ]).then(function (results) {
      var reviews   = Array.isArray(results[0]) ? results[0] : [];
      var statsArr  = Array.isArray(results[1]) ? results[1] : [];
      var questions = Array.isArray(results[2]) ? results[2] : [];
      var stats     = statsArr[0] || { avg_rating: 0, total_reviews: 0, s5:0, s4:0, s3:0, s2:0, s1:0 };

      if (barShimmer.parentNode) barShimmer.parentNode.removeChild(barShimmer);

      if (h1 && stats.total_reviews > 0) {
        var bar = el("div", "rvq-bar");
        bar.innerHTML =
          '<div class="rvq-bd-wrap">' +
            '<div class="rvq-bar-score" id="rvqH1Score">' +
              '<div class="rvq-bar-stars">' + stars(Math.round(stats.avg_rating), 19) + '</div>' +
              parseFloat(stats.avg_rating).toFixed(1) +
              '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:14px;height:14px;color:#888"><polyline points="6 9 12 15 18 9"/></svg>' +
            '</div>' +
            '<div class="rvq-bd-pop" id="rvqH1Pop">' + buildBreakdown(stats) + '</div>' +
          '</div>' +
          '<span class="rvq-sep">•</span>' +
          '<span class="rvq-bar-meta rvq-bar-link" id="rvqScrollToReviews">' + Number(stats.total_reviews).toLocaleString("ar-SA") + ' تقييم</span>' +
          '<span class="rvq-sep">•</span>' +
          '<span class="rvq-bar-meta rvq-bar-link" id="rvqScrollToQA">' + questions.length.toLocaleString("ar-SA") + ' سؤال وجواب</span>';
        h1.insertAdjacentElement("afterend", bar);
      }

      var wrapper = el("div");
      wrapper.appendChild(buildActionRow());
      wrapper.appendChild(buildReviewsSection(reviews, stats));
      wrapper.appendChild(buildQASection(questions));

      if (secShimmer.parentNode) secShimmer.parentNode.replaceChild(wrapper, secShimmer);
      else {
        if (target === document.body) target.appendChild(wrapper);
        else target.insertAdjacentElement("afterend", wrapper);
      }

      wireSumPopup();
      wireScrollLinks();

    }).catch(function (err) {
      console.error("[Reviews] ❌ fetch error:", err);
      if (barShimmer.parentNode) barShimmer.parentNode.removeChild(barShimmer);
      var errWrapper = el("div", "rvq-section");
      errWrapper.appendChild(makeEmpty("⚠️", "تعذّر تحميل التقييمات", "يرجى تحديث الصفحة أو المحاولة لاحقاً"));
      if (secShimmer.parentNode) secShimmer.parentNode.replaceChild(errWrapper, secShimmer);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

})();