/* ============================================================================
   🔍 عارض الصور المشترك (SKViewer) + إشارة «اضغط للتكبير»
   هوية Saiko: أسود · ذهبي · أبيض — بلا توهّج ثقيل ولا زجاج مبالغ فيه
   ========================================================================== */

/* ── الصورة القابلة للضغط داخل نافذة التعليمات ── */
.pv-trig { position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: zoom-in; border-radius: inherit; max-width: 100%; -webkit-tap-highlight-color: transparent; }
.pv-trig img { display: block; transition: transform .35s cubic-bezier(.2, .8, .25, 1); }
.pv-trig:focus-visible { outline: 2px solid #f5a800; outline-offset: 3px; }
.pv-hint { position: absolute; bottom: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 11px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
  background: rgba(10, 10, 12, .8); border: 1px solid rgba(245, 168, 0, .42); transition: border-color .2s, color .2s; }
.pv-hint svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #ffd977; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-trig:focus-visible .pv-hint { border-color: #f5a800; color: #ffd977; }
/* تعريف هادئ لمرّة واحدة في الجلسة: ظهور ناعم + حلقة ذهبية خفيفة تتلاشى */
.pv-trig.intro .pv-hint { animation: pvHintIn 1.5s ease .45s 1 both; }
@keyframes pvHintIn {
  0% { opacity: 0; transform: translateY(4px); box-shadow: 0 0 0 0 rgba(245, 168, 0, 0); }
  25% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(245, 168, 0, .32); }
  70% { box-shadow: 0 0 0 7px rgba(245, 168, 0, 0); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(245, 168, 0, 0); }
}

/* ── العارض ── */
.pv { position: fixed; inset: 0; z-index: 100000; background: rgba(6, 6, 8, .96); color: #fff;
  touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
  opacity: 0; transition: opacity .18s ease; }
.pv.on { opacity: 1; }
.pv [hidden] { display: none !important; }
.pv-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.pv-frame { position: absolute; inset: 0; }
.pv-img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform: translate(-50%, -50%);
  transform-origin: center; will-change: transform; -webkit-user-drag: none; cursor: zoom-in; transition: opacity .15s; }
.pv.zoomed .pv-img { cursor: grab; }
.pv.dragging .pv-img { cursor: grabbing; }
.pv.pv-anim .pv-img { transition: transform .24s cubic-bezier(.2, .8, .25, 1), opacity .15s; }
.pv-frame.in-n { animation: pvInN .26s cubic-bezier(.2, .8, .25, 1); }
.pv-frame.in-p { animation: pvInP .26s cubic-bezier(.2, .8, .25, 1); }
@keyframes pvInN { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }   /* RTL: التالية تأتي من اليسار */
@keyframes pvInP { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }

.pv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); pointer-events: none; }
.pv-top > * { pointer-events: auto; }
.pv-count { padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #d7dbe0; background: rgba(12, 12, 14, .82); border: 1px solid #2a2d34; direction: ltr; }
.pv-count b { color: #ffd977; }
.pv-x { margin-inline-start: auto; width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 14px; border: 0; color: #fff; background: #e5484d; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .85); transition: background .15s, transform .15s; }
.pv-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pv-x:active { transform: scale(.96); }
.pv-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pv-nav { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; color: #ffd977; background: rgba(12, 12, 14, .8); border: 1px solid rgba(245, 168, 0, .55);
  transform: translateY(-50%); transition: background .15s, color .15s, border-color .15s; }
.pv-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-prev { inset-inline-start: max(14px, env(safe-area-inset-right)); }                 /* RTL: السابق يميناً ويشير لليمين */
.pv-next { inset-inline-end: max(14px, env(safe-area-inset-left)); }
.pv-next svg { transform: scaleX(-1); }
.pv-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-next.nudge { animation: pvNudge 1s ease-in-out .5s 2; }
@keyframes pvNudge { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(-5px); } }

.pv-bar { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 14px; direction: ltr;
  background: rgba(12, 12, 14, .86); border: 1px solid #2a2d34; }
.pv-tb { height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; cursor: pointer;
  border-radius: 10px; border: 0; background: transparent; color: #f3f3f6; font: inherit; font-size: 13px; font-weight: 800; transition: background .15s, color .15s; }
.pv-tb svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pv-tb:disabled { opacity: .35; cursor: default; }
.pv-tb:focus-visible { outline: 2px solid #f5a800; outline-offset: 1px; }
.pv-fit { padding: 0 12px; border-inline-start: 1px solid #2a2d34; border-radius: 0 10px 10px 0; }
.pv-pct { min-width: 54px; text-align: center; font-size: 13px; font-weight: 800; color: #ffd977; font-variant-numeric: tabular-nums; }

/* الـhover لأجهزة المؤشر فقط — على اللمس يبقى «عالقاً» بعد النقر فيوحي بحالة غير حقيقية */
@media (hover: hover) {
  .pv-trig:hover img { transform: scale(1.012); }
  .pv-trig:hover .pv-hint { border-color: #f5a800; color: #ffd977; }
  .pv-x:hover { background: #f0595e; }
  .pv-nav:hover { background: #f5a800; color: #16120a; border-color: #f5a800; }
  .pv-tb:not(:disabled):hover { background: rgba(255, 255, 255, .07); color: #ffd977; }
}

@media (max-width: 560px) {
  .pv-nav { width: 44px; height: 44px; }
  .pv-nav svg { width: 21px; height: 21px; }
  .pv-prev { inset-inline-start: 8px; }
  .pv-next { inset-inline-end: 8px; }
  .pv-tb { height: 38px; min-width: 38px; }
  .pv-fit span { display: none; }
  .pv-fit { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv, .pv-img, .pv.pv-anim .pv-img, .pv-trig img, .pv-hint, .pv-x, .pv-nav, .pv-tb { transition: none !important; }
  .pv-frame.in-n, .pv-frame.in-p, .pv-next.nudge, .pv-trig.intro .pv-hint { animation: none !important; }
  .pv-trig:hover img { transform: none; }
}