/* ============================================================================
   noqte-viewer.css — نمایشگر بومی تصویر
   بدون هیچ وابستگی خارجی. همهٔ کلاس‌ها با nv- شروع می‌شوند تا با استایل‌های
   موجود پروژه تداخل نکنند.
   ========================================================================== */

.nv-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 14, .94);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  direction: rtl;
  font-family: inherit;
  contain: layout paint;
}

.nv-root.nv-open { opacity: 1; visibility: visible; }

/* هنگام swipe عمودی، محو شدن دستی کنترل می‌شود */
.nv-root.nv-dragging { transition: none; }

/* ── نوار بالا ─────────────────────────────────────────────────────────── */
.nv-bar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .75rem;
  color: #f2f4f8;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
  transition: opacity .2s ease;
}

.nv-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
}

.nv-count {
  flex: 0 0 auto;
  font-size: .8rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
  padding-inline-end: .35rem;
}

.nv-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}

.nv-btn:hover  { background: rgba(255, 255, 255, .2); }
.nv-btn:active { transform: scale(.92); }
.nv-btn:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.nv-btn[disabled] { opacity: .3; cursor: default; }
.nv-btn svg { width: 20px; height: 20px; display: block; }

/* ── صحنهٔ تصویر ───────────────────────────────────────────────────────── */
.nv-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.nv-stage.nv-zoomed { cursor: grab; }
.nv-stage.nv-panning { cursor: grabbing; }

.nv-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.nv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* پیش‌نمایش کم‌کیفیت تا وقتی نسخهٔ اصلی برسد */
.nv-img.nv-preview { filter: blur(14px); transform: scale(1.03); }

.nv-img.nv-anim { transition: transform .22s cubic-bezier(.22, .61, .36, 1); }

/* ── ناوبری چپ/راست ────────────────────────────────────────────────────── */
.nv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 24, 32, .55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, opacity .2s ease;
}

.nv-nav:hover { background: rgba(40, 48, 62, .85); }
.nv-nav:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.nv-nav svg { width: 22px; height: 22px; }
.nv-prev { inset-inline-start: .6rem; }
.nv-next { inset-inline-end: .6rem; }
.nv-nav[hidden] { display: none; }

/* ── نوار بندانگشتی ────────────────────────────────────────────────────── */
.nv-strip {
  flex: 0 0 auto;
  z-index: 3;
  display: flex;
  gap: .4rem;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  touch-action: pan-x;
  transition: opacity .2s ease;
}

.nv-strip::-webkit-scrollbar { height: 4px; }
.nv-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .3);
  border-radius: 4px;
}

.nv-strip[hidden] { display: none; }

.nv-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: .5;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, .06);
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}

.nv-thumb:hover { opacity: .85; transform: translateY(-2px); }
.nv-thumb.nv-active { opacity: 1; border-color: #4f8cff; }
.nv-thumb:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }

/* ── وضعیت‌ها ──────────────────────────────────────────────────────────── */
.nv-spinner {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nv-spin .8s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.nv-spinner[hidden] { display: none; }

@keyframes nv-spin { to { transform: rotate(360deg); } }

.nv-error {
  color: #ffd9d9;
  font-size: .95rem;
  text-align: center;
  padding: 1rem;
  z-index: 2;
}

.nv-error[hidden] { display: none; }

/* هنگام زوم فقط فلش‌ها و نوار بندانگشتی کنار می‌روند —
   نوار بالا و دکمهٔ بستن همیشه در دسترس می‌ماند. */
.nv-root.nv-zoomed-ui .nv-strip,
.nv-root.nv-zoomed-ui .nv-nav { opacity: 0; pointer-events: none; }

/* تصاویری که با نمایشگر باز می‌شوند */
[data-nv] img:not([data-nv-skip]),
img[data-nv] { cursor: zoom-in; }

@media (max-width: 640px) {
  .nv-nav  { width: 40px; height: 40px; }
  .nv-thumb { width: 48px; height: 48px; }
  .nv-title { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-root, .nv-img, .nv-btn, .nv-nav, .nv-thumb { transition: none !important; }
  .nv-img.nv-anim { transition: none !important; }
  .nv-spinner { animation-duration: 2s; }
}