/* ==========================================================
   MyStore Reviews — shared styles (product.html + shop-product.html)
   Uses the page's own CSS variables so light/dark and RTL just work.
   ========================================================== */
.reviews-section{padding:56px 0 90px; border-top:1px solid var(--border); margin-top:20px; position:relative; z-index:1;}
.reviews-title{font-size:24px; font-weight:700; margin-bottom:22px; letter-spacing:-.01em;}

#rvRoot{--rv-gold:#F5A623; --rv-r:16px; --rv-on-accent:#fff;}
[data-theme="dark"] #rvRoot{--rv-on-accent:#0D0D0D;}

/* ---------- stars (supports fractional fill) ---------- */
.rv-stars{
  --pct:0%; display:inline-block; direction:ltr; letter-spacing:2px; line-height:1; font-size:16px;
  background:linear-gradient(90deg,var(--rv-gold) var(--pct),var(--border) var(--pct));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  white-space:nowrap; user-select:none;
}
.rv-stars::before{content:"★★★★★";}
.rv-stars.sm{font-size:13px; letter-spacing:1.5px;}
.rv-stars.lg{font-size:22px; letter-spacing:3px;}

/* ---------- summary ---------- */
.rv-summary{
  display:grid; grid-template-columns:auto 1fr auto; gap:34px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rv-r); padding:28px 32px; margin-bottom:22px;
}
.rv-score{text-align:center; min-width:120px;}
.rv-avg{font-family:'Fraunces',serif; font-size:56px; font-weight:800; line-height:1; margin-bottom:10px;}
.rv-count{font-size:12.5px; color:var(--ink-dim); margin-top:8px;}
.rv-bars{display:flex; flex-direction:column; gap:7px; min-width:0;}
.rv-bar-row{all:unset; box-sizing:border-box; display:grid; grid-template-columns:30px 1fr 30px; gap:10px; align-items:center; font-size:12px; color:var(--ink-soft); cursor:pointer; border-radius:6px;}
.rv-bar-row:hover .lbl{color:var(--ink);}
.rv-bar-row:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.rv-bar-row .lbl{white-space:nowrap;}
.rv-bar-row .num{text-align:end; color:var(--ink-dim);}
.rv-bar{height:8px; border-radius:99px; background:var(--bg-soft); overflow:hidden;}
.rv-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--rv-gold); transition:width .8s cubic-bezier(.2,.8,.2,1);}
.rv-bar-row.is-active .lbl{color:var(--ink); font-weight:700;}
.rv-cta{display:flex; flex-direction:column; gap:10px; align-items:stretch;}

.rv-btn{
  font-family:inherit; font-size:14px; font-weight:600; padding:12px 22px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--ink); transition:.2s; white-space:nowrap;
}
.rv-btn:hover{border-color:var(--ink);}
.rv-btn:disabled{opacity:.6; cursor:not-allowed;}
.rv-btn-primary{background:var(--accent); border-color:var(--accent); color:var(--rv-on-accent);}
.rv-btn-primary:hover{filter:brightness(1.08); border-color:var(--accent);}
.admin-link{font-size:12px; color:var(--ink-dim); text-decoration:underline; cursor:pointer; background:none; border:none; font-family:inherit; text-align:center;}
.admin-link:hover{color:var(--ink);}
.admin-badge{font-size:11px; font-weight:700; background:var(--accent-soft); color:var(--accent); padding:3px 10px; border-radius:100px; margin-inline-start:6px;}

/* ---------- customer photos strip ---------- */
.rv-gallery{margin-bottom:22px;}
.rv-gallery h4{font-size:14px; font-weight:600; margin-bottom:10px;}
.rv-gallery-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin;}
.rv-thumb{
  all:unset; box-sizing:border-box; cursor:zoom-in; flex:0 0 auto; width:84px; height:84px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:var(--bg-soft); position:relative;
}
.rv-thumb:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.rv-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.rv-thumb:hover img{transform:scale(1.06);}
.rv-thumb.more::after{
  content:attr(data-more); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:16px;
}

/* ---------- toolbar ---------- */
.rv-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.rv-chips{display:flex; gap:8px; flex-wrap:wrap;}
.rv-chip{
  font-family:inherit; font-size:13px; padding:8px 14px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); transition:.2s;
}
.rv-chip:hover{border-color:var(--ink);}
.rv-chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.rv-select{
  font-family:inherit; font-size:13px; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); cursor:pointer;
}

/* ---------- form ---------- */
.rv-form-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease, margin .35s ease; margin-bottom:0;}
.rv-form-wrap.open{grid-template-rows:1fr; margin-bottom:24px;}
.rv-form-wrap > div{overflow:hidden; min-height:0;}
.rv-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--rv-r); padding:26px;}
.rv-form h3{font-size:17px; font-weight:700; margin-bottom:18px;}
.rv-field{margin-bottom:16px;}
.rv-field > label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px;}
.rv-field input[type=text], .rv-field textarea{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg);
  color:var(--ink); font-family:inherit; font-size:14px; transition:border-color .2s, box-shadow .2s;
}
.rv-field textarea{resize:vertical; min-height:110px; line-height:1.6;}
.rv-field input:focus, .rv-field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.rv-counter{font-size:11.5px; color:var(--ink-dim); text-align:end; margin-top:5px;}
.hp-field{position:absolute !important; inset-inline-start:-9999px; width:1px; height:1px; opacity:0;}

.rv-picker{display:flex; align-items:center; gap:4px; direction:ltr; width:fit-content;}
.rv-picker button{all:unset; cursor:pointer; font-size:32px; line-height:1; color:var(--border); transition:transform .15s, color .15s; padding:2px;}
.rv-picker button.on{color:var(--rv-gold);}
.rv-picker button:hover{transform:scale(1.18);}
.rv-picker button:focus-visible{outline:2px solid var(--accent); border-radius:6px;}
.rv-picker-label{font-size:13px; color:var(--ink-soft); margin-inline-start:12px; direction:inherit;}

.rv-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  border:1.5px dashed var(--border); border-radius:14px; padding:20px 14px; cursor:pointer; color:var(--ink-soft);
  font-size:13px; transition:.2s; background:var(--bg);
}
.rv-drop:hover, .rv-drop.drag{border-color:var(--accent); background:var(--accent-soft);}
.rv-drop b{font-size:14px; color:var(--ink);}
.rv-drop small{color:var(--ink-dim); font-size:11.5px;}
.rv-drop input{display:none;}
.rv-previews{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.rv-prev{position:relative; width:84px; height:84px; border-radius:12px; overflow:hidden; border:1px solid var(--border);}
.rv-prev img{width:100%; height:100%; object-fit:cover; display:block;}
.rv-prev button{
  all:unset; cursor:pointer; position:absolute; top:5px; inset-inline-end:5px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff; font-size:14px; line-height:22px; text-align:center;
}
.rv-prev button:hover{background:#D64545;}
.rv-form-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;}
.rv-msg{font-size:13px; margin-top:12px; min-height:18px;}
.rv-msg.err{color:#D64545;}
.rv-msg.ok{color:#2E9E5B;}

/* ---------- review cards ---------- */
.reviews-list{display:flex; flex-direction:column; gap:14px;}
.rv-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--rv-r); padding:22px 24px; transition:box-shadow .25s, transform .25s;}
.rv-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.06);}
[data-theme="dark"] .rv-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.4);}
.rv-card-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.rv-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#fff; text-transform:uppercase;
}
.rv-who{flex:1; min-width:0;}
.rv-who b{display:block; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rv-date{font-size:12px; color:var(--ink-dim);}
.rv-text{font-size:14px; color:var(--ink-soft); line-height:1.75; margin-top:10px; white-space:pre-line; overflow-wrap:anywhere;}
.rv-text.clamp{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
.rv-more{all:unset; cursor:pointer; font-size:13px; font-weight:600; color:var(--accent); margin-top:6px; display:inline-block;}
.rv-more:hover{text-decoration:underline;}
.rv-more[hidden]{display:none;}
.rv-photos{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.rv-photos .rv-thumb{width:96px; height:96px;}
.review-delete{background:none; border:none; color:#D64545; font-size:12px; cursor:pointer; text-decoration:underline; flex-shrink:0; font-family:inherit;}
.review-delete:hover{color:#a53333;}
.reviews-empty{color:var(--ink-dim); font-size:14px; text-align:center; padding:40px 0;}
.rv-empty{
  text-align:center; padding:44px 20px; border:1.5px dashed var(--border); border-radius:var(--rv-r); color:var(--ink-soft);
}
.rv-empty b{display:block; font-size:16px; color:var(--ink); margin-bottom:6px;}

/* skeleton */
.rv-skel{height:112px; border-radius:var(--rv-r); background:linear-gradient(100deg,var(--bg-soft) 30%,var(--surface) 50%,var(--bg-soft) 70%); background-size:300% 100%; animation:rvShimmer 1.3s infinite linear; border:1px solid var(--border);}
@keyframes rvShimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- lightbox ---------- */
.rv-lb{position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; animation:rvFade .2s;}
@keyframes rvFade{from{opacity:0}to{opacity:1}}
.rv-lb img{max-width:92vw; max-height:86vh; border-radius:10px; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6);}
.rv-lb button{
  all:unset; cursor:pointer; position:absolute; color:#fff; background:rgba(255,255,255,.12); width:46px; height:46px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; transition:.2s;
}
.rv-lb button:hover{background:rgba(255,255,255,.25);}
.rv-lb button:focus-visible{outline:2px solid #fff;}
.rv-lb .x{top:18px; inset-inline-end:18px;}
.rv-lb .prev{inset-inline-start:18px; top:50%; transform:translateY(-50%);}
.rv-lb .next{inset-inline-end:18px; top:50%; transform:translateY(-50%);}
[dir="rtl"] .rv-lb .prev, [dir="rtl"] .rv-lb .next{scale:-1 1;}
.rv-lb .cnt{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; background:rgba(255,255,255,.12); padding:6px 14px; border-radius:99px;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .rv-summary{grid-template-columns:1fr; gap:22px; padding:22px 18px;}
  .rv-cta{flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;}
  .rv-card{padding:18px 16px;}
  .rv-form{padding:20px 16px;}
  .rv-toolbar{flex-direction:column; align-items:stretch;}
  .rv-select{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .rv-bar i, .rv-skel, .rv-form-wrap, .rv-lb{transition:none; animation:none;}
}