/* ═══════════════════════════════════════════════════════
   VRV Vertical Gallery Pro v4 — gallery.css
   ═══════════════════════════════════════════════════════ */

/* ── Reset pe elementele noastre ───────────────────────── */
.vrv-gallery, .vrv-gallery *, .vrv-gallery *::before, .vrv-gallery *::after,
.vrv-lb, .vrv-lb *, .vrv-lb *::before, .vrv-lb *::after {
  box-sizing: border-box !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; float: none !important;
  list-style: none !important; background: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-appearance: none !important; appearance: none !important;
}

/* ── Wrapper ────────────────────────────────────────────── */
.vrv-gallery {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 2em !important;
}

/* ══════════════════════════════════════════════════════════
   COLOANA PRINCIPALĂ
   ══════════════════════════════════════════════════════════ */
.vrv-main-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  background: #111 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  box-shadow: 0 6px 30px rgba(0,0,0,.5) !important;
}

.vrv-main-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: opacity .22s ease, transform .22s ease !important;
}
.vrv-main-img.fading { opacity: 0 !important; transform: scale(1.02) !important; }

/* ── Butoane prev/next pe imagine ───────────────────────── */
.vrv-nav {
  position: absolute !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 40px !important; height: 40px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 50% !important;
  color: #fff !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important;
  transition: opacity .2s ease, background .2s ease !important;
  z-index: 5 !important;
}
/* Desktop: arată la hover */
.vrv-main-col:hover .vrv-nav:not([disabled]) { opacity: 1 !important; }
.vrv-nav:hover:not([disabled]) { background: #1a6fff !important; }
.vrv-nav[disabled] { pointer-events: none !important; opacity: 0 !important; }
.vrv-prev { left: 10px !important; }
.vrv-next { right: 10px !important; }
.vrv-nav svg {
  width: 18px !important; height: 18px !important;
  stroke: #fff !important; fill: none !important;
  stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
  display: block !important;
}

/* Counter */
.vrv-counter {
  position: absolute !important; bottom: 10px !important; right: 10px !important;
  background: rgba(0,0,0,.6) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important; padding: 3px 11px !important;
  font-size: 12px !important; font-weight: 600 !important; color: #fff !important;
  letter-spacing: .04em !important; pointer-events: none !important;
}

/* Buton fullscreen */
.vrv-expand {
  position: absolute !important; top: 8px !important; right: 8px !important;
  width: 34px !important; height: 34px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 7px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; transition: opacity .2s ease, background .2s ease !important;
  z-index: 5 !important;
}
.vrv-main-col:hover .vrv-expand { opacity: 1 !important; }
.vrv-expand:hover { background: #1a6fff !important; }
.vrv-expand svg {
  width: 14px !important; height: 14px !important;
  stroke: #fff !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important;
  display: block !important;
}

/* Caption */
.vrv-caption {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 32px 14px 12px !important;
  background: linear-gradient(transparent, rgba(0,0,0,.7)) !important;
  color: #fff !important; font-size: 13px !important; line-height: 1.4 !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════
   COLOANA THUMBURI
   ══════════════════════════════════════════════════════════ */
.vrv-thumb-col {
  flex: 0 0 80px !important;
  width: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}

/* Săgeți sus/jos (desktop) */
.vrv-arrow {
  flex-shrink: 0 !important;
  width: 72px !important; height: 28px !important;
  background: #1c1c1c !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s ease, color .2s ease, opacity .2s ease !important;
}
.vrv-arrow:hover { background: #1a6fff !important; color: #fff !important; }
.vrv-arrow.hidden {
  opacity: 0 !important; pointer-events: none !important;
  height: 0 !important; margin: 0 !important; overflow: hidden !important;
}
.vrv-arrow svg {
  width: 14px !important; height: 14px !important;
  stroke: currentColor !important; fill: none !important;
  stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
  display: block !important;
}

/* Viewport — clipper */
.vrv-thumb-viewport {
  width: 72px !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  position: relative !important;
}

/* Track — se translatează cu JS */
.vrv-thumb-track {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform !important;
}

/* Thumb individual */
.vrv-thumb {
  display: block !important;
  width: 72px !important; height: 72px !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease !important;
  opacity: .75 !important;
}
.vrv-thumb:hover {
  opacity: 1 !important;
  border-color: rgba(26,111,255,.5) !important;
  transform: scale(1.04) !important;
}
.vrv-thumb.active {
  border-color: #1a6fff !important;
  box-shadow: 0 0 0 3px rgba(26,111,255,.25) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════ */
.vrv-lb {
  position: fixed !important; inset: 0 !important; z-index: 999999 !important;
  background: rgba(4,4,4,.96) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-direction: row !important;
  opacity: 0 !important; transition: opacity .28s ease !important;
  pointer-events: none !important;
}
.vrv-lb[hidden] { display: none !important; }
.vrv-lb.open { opacity: 1 !important; pointer-events: all !important; display: flex !important; }

.vrv-lb-close {
  position: absolute !important; top: 14px !important; right: 14px !important;
  width: 44px !important; height: 44px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s ease, transform .2s ease !important; z-index: 2 !important;
}
.vrv-lb-close:hover { background: #c00 !important; transform: rotate(90deg) !important; }
.vrv-lb-close svg { width: 18px !important; height: 18px !important; stroke: #fff !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; display: block !important; }

.vrv-lb-prev, .vrv-lb-next {
  flex-shrink: 0 !important;
  width: 50px !important; height: 50px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s ease, transform .2s ease !important;
  margin: 0 12px !important;
}
.vrv-lb-prev:hover, .vrv-lb-next:hover { background: #1a6fff !important; transform: scale(1.1) !important; }
.vrv-lb-prev[disabled], .vrv-lb-next[disabled] { opacity: .2 !important; pointer-events: none !important; }
.vrv-lb-prev svg, .vrv-lb-next svg { width: 22px !important; height: 22px !important; stroke: #fff !important; fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; display: block !important; }

.vrv-lb-stage {
  position: relative !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  max-width: 82vw !important; max-height: 85vh !important;
}
.vrv-lb-img {
  max-width: 82vw !important; max-height: 85vh !important;
  object-fit: contain !important; border-radius: 6px !important; display: block !important;
  opacity: 0 !important; transform: scale(.97) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
.vrv-lb-img.loaded { opacity: 1 !important; transform: scale(1) !important; }

.vrv-lb-spin {
  position: absolute !important; width: 34px !important; height: 34px !important;
  border: 3px solid rgba(255,255,255,.15) !important;
  border-top-color: #1a6fff !important; border-radius: 50% !important;
  animation: vrv-spin .7s linear infinite !important; background: transparent !important;
}
.vrv-lb-spin.hidden { display: none !important; }
@keyframes vrv-spin { to { transform: rotate(360deg); } }

.vrv-lb-bar {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 12px 20px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  gap: 12px !important;
}
.vrv-lb-cap-txt { color: rgba(255,255,255,.5) !important; font-size: 13px !important; }
.vrv-lb-cnt { color: rgba(255,255,255,.4) !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; }

/* ══════════════════════════════════════════════════════════
   MOBIL — max-width: 580px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 580px) {

  /* Gallery: coloana verticala */
  .vrv-gallery {
    flex-direction: column !important;
  }

  .vrv-main-col {
    width: 100% !important;
    border-radius: 6px !important;
  }

  /* Sagetile prev/next pe imagine: MEREU vizibile pe touch */
  .vrv-nav {
    opacity: 0.85 !important;
    width: 36px !important;
    height: 36px !important;
  }
  .vrv-nav[disabled] {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .vrv-prev { left: 8px !important; }
  .vrv-next { right: 8px !important; }

  /* Buton expand vizibil pe mobil */
  .vrv-expand { opacity: 0.85 !important; }

  /* Strip thumburi ORIZONTAL */
  .vrv-thumb-col {
    flex-direction: row !important;
    width: 100% !important;
    flex: none !important;
    height: 88px !important;
    gap: 0 !important;
    align-items: center !important;
  }

  /* Viewport orizontal */
  .vrv-thumb-viewport {
    flex: 1 1 0% !important;
    width: 0 !important;         /* forteaza flex sa calculeze latimea */
    min-width: 0 !important;
    height: 80px !important;
    overflow: hidden !important;
  }

  /* Track orizontal */
  .vrv-thumb-track {
    flex-direction: row !important;
    gap: 6px !important;
  }

  /* Thumb dimensiune pe mobil */
  .vrv-thumb {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
  }

  /* Sageti strip pe mobil: mereu vizibile, disabled la capete */
  .vrv-arrow,
  .vrv-arrow.hidden {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 72px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .vrv-arrow[disabled] {
    opacity: 0.25 !important;
    pointer-events: none !important;
  }
  /* Chevron-up = sageata stanga, chevron-dn = sageata dreapta */
  .vrv-arrow-up svg { transform: rotate(-90deg) !important; }
  .vrv-arrow-dn svg { transform: rotate(90deg) !important; }

  /* Lightbox pe mobil */
  .vrv-lb-stage { max-width: 96vw !important; }
  .vrv-lb-img   { max-width: 96vw !important; }
  .vrv-lb-prev, .vrv-lb-next {
    width: 38px !important; height: 38px !important;
    margin: 0 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vrv-main-img, .vrv-thumb, .vrv-thumb-track, .vrv-nav, .vrv-lb, .vrv-lb-img {
    transition: none !important; animation: none !important;
  }
}