/* ==========================================================================
   ALSRORI FACEBOOK THEATER PHOTO VIEWER & INSTAGRAM REELS SUITE (V13.0)
   ========================================================================== */

/* Feed image cards */
.pg_1x {
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #000000 !important;
  margin: 6px 0 !important;
}

.pg_1x a {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.pg_1x img {
  width: 100% !important;
  max-height: 600px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.pg_1x a::after {
  display: none !important;
  content: "" !important;
}

/* --------------------------------------------------------------------------
   LIGHTBOX ROOT & THEATER LAYOUT
   -------------------------------------------------------------------------- */
.lightbox {
  background: #000000 !important;
  z-index: 99999 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  transition: background-color 0.2s ease !important;
}

.lightbox-container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: transparent !important;
  overflow: hidden !important;
  position: relative !important;
}

/* --------------------------------------------------------------------------
   PHOTO VIEWPORT & IMAGE
   -------------------------------------------------------------------------- */
.lightbox-preview {
  flex: 1 1 72% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: #000000 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
}

.lightbox-preview img {
  display: block !important;
  margin: auto !important;
  max-width: 94vw !important;
  max-height: 94vh !important;
  max-height: 94dvh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transform-origin: center center !important;
  cursor: zoom-in !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7)) !important;
}

.lightbox-preview.is-zoomed img {
  cursor: grab !important;
}
.lightbox-preview.is-dragging img {
  cursor: grabbing !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   FACEBOOK THEATER BUTTONS
   -------------------------------------------------------------------------- */
.fb-lightbox-top-close {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1050 !important;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  outline: none !important;
  padding: 0 !important;
}
.fb-lightbox-top-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08) !important;
  color: #ffffff !important;
}

.lightbox-next,
.lightbox-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  cursor: pointer !important;
  z-index: 1020 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
.lightbox-next:hover,
.lightbox-prev:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-50%) scale(1.1) !important;
  color: #ffffff !important;
}
.lightbox-next {
  right: 22px !important;
}
.lightbox-prev {
  left: 22px !important;
}
[dir="rtl"] .lightbox-next {
  right: auto !important;
  left: 22px !important;
}
[dir="rtl"] .lightbox-prev {
  left: auto !important;
  right: 22px !important;
}

/* --------------------------------------------------------------------------
   DESKTOP DATA SIDEBAR (Applies to both .lightbox-data and .lightbox-post)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .lightbox-data,
  .lightbox-container .lightbox-post {
    flex: 0 0 28% !important;
    width: 28% !important;
    max-width: 440px !important;
    min-width: 330px !important;
    background: var(--body-bg, #ffffff) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
    z-index: 1020 !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE LIGHTBOX COMMENTS BOTTOM SHEET (< 992px)
   Applied to BOTH .lightbox-data and .lightbox-post!
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .lightbox-container {
    flex-direction: column !important;
    position: relative !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  .lightbox-preview {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
  }
  .lightbox-preview img {
    max-width: 100% !important;
    max-height: 100% !important;
    filter: none !important;
  }

  /* Facebook Mobile Pull-Up Sheet */
  .lightbox-data,
  .lightbox-container .lightbox-post {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 75vh !important;
    height: 75dvh !important;
    background: var(--body-bg, #ffffff) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
    z-index: 100100 !important;
    transform: translateY(calc(100% - 72px)) !important;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .lightbox-data.is-expanded,
  .lightbox-container .lightbox-post.is-expanded {
    transform: translateY(0%) !important;
  }

  .fb-lb-mobile-handle {
    width: 100% !important;
    padding: 10px 0 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: inherit !important;
    flex-shrink: 0 !important;
    touch-action: pan-y !important;
    z-index: 5 !important;
  }
  .fb-lb-mobile-handle::after {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(140, 140, 140, 0.45) !important;
  }

  .lightbox-post .js_scroller {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 0 14px 24px 14px !important;
  }

  .fb-lightbox-top-close {
    top: max(16px, env(safe-area-inset-top, 16px)) !important;
    left: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   INSTAGRAM-STYLE REACTION BURST FOR POST PHOTOS
   -------------------------------------------------------------------------- */
.fb-post-like-burst {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fb-post-like-burst .ig-reaction-pop {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fb-post-like-burst.is-like .ig-reaction-pop {
  animation: igReactionSpringPop 0.82s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.fb-post-like-burst.is-like .ig-reaction-ring {
  position: absolute !important;
  width: 125px !important;
  height: 125px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(24, 119, 242, 0.7) !important;
  opacity: 0 !important;
  animation: igRingPulse 0.55s ease-out forwards !important;
}

.fb-post-like-burst.is-unlike .ig-reaction-pop {
  animation: igReactionUnlike 0.62s ease-out forwards !important;
}

.ig-unlike-line {
  position: absolute !important;
  width: 4px !important;
  height: 96px !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8) !important;
}

@keyframes igReactionSpringPop {
  0% { transform: scale(0) rotate(-16deg); opacity: 0; }
  16% { transform: scale(1.36) rotate(0deg); opacity: 1; }
  32% { transform: scale(0.95); opacity: 1; }
  48% { transform: scale(1.08); opacity: 1; }
  75% { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.36) translateY(-22px); opacity: 0; }
}

@keyframes igRingPulse {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes igReactionUnlike {
  0% { transform: scale(1.1); opacity: 1; }
  45% { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(0.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   INSTAGRAM REELS FLOATING HEARTS & CENTER BURST
   -------------------------------------------------------------------------- */
.ig-main-heart-pop {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100065 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: igHeartBurstSpring 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes igHeartBurstSpring {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-14deg); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.38) rotate(0deg); opacity: 1; }
  34% { transform: translate(-50%, -50%) scale(0.94); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -75%) scale(1.4); opacity: 0; }
}

.ig-float-heart {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 100070 !important;
  filter: drop-shadow(0 4px 12px rgba(255, 0, 79, 0.7)) !important;
}

@keyframes igHeartFloatUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(0) scale(0.6) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-35px) scale(1.05) rotate(8deg);
  }
  60% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translateY(-120px) scale(1.15) rotate(-8deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-230px) scale(1.3) rotate(12deg);
  }
}