/* FineME v289 — centered responsive media viewer + larger desktop image lightbox + mobile video poster preview. */

/* Image viewer is a true centered lightbox, never a mobile bottom sheet. */
.fm-v289 .fm-social-modal-root.fm-media-modal-open{
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  padding:clamp(8px,2vw,24px)!important;
}
.fm-v289 .fm-social-modal.is-media{
  width:min(1480px,calc(100vw - 32px))!important;
  height:min(94dvh,1040px)!important;
  max-height:94dvh!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:#07090d!important;
  box-shadow:0 32px 100px rgba(0,0,0,.48)!important;
  overflow:hidden!important;
}
.fm-v289 .fm-social-modal.is-media .fm-social-modal-head{
  flex:0 0 auto;
  min-height:50px;
  padding:8px 10px 8px 15px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:#0d1016;
  color:#f7f9ff;
}
.fm-v289 .fm-social-modal.is-media .fm-social-modal-head strong{
  font-size:13px;
  color:#f7f9ff;
}
.fm-v289 .fm-social-modal.is-media .fm-social-modal-close{
  width:36px;height:36px;
  background:rgba(255,255,255,.09);
  color:#f6f8ff;
}
.fm-v289 .fm-social-modal.is-media .fm-social-modal-close:hover{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.fm-v289 .fm-social-modal.is-media .fm-social-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden!important;
  background:#05070a;
}
.fm-v289 .fm-media-viewer{
  position:relative;
  display:flex!important;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#05070a!important;
}
.fm-v289 .fm-media-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#05070a;
  touch-action:pan-y pinch-zoom;
  user-select:none;
}
.fm-v289 .fm-media-stage img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  background:#05070a!important;
  box-shadow:none!important;
  -webkit-user-drag:none;
}
.fm-v289 .fm-media-nav{
  position:absolute!important;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:58px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:15px!important;
  background:rgba(8,11,16,.62)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(10px);
  font-size:34px!important;
  line-height:1!important;
  cursor:pointer;
}
.fm-v289 .fm-media-nav.is-prev{left:14px}
.fm-v289 .fm-media-nav.is-next{right:14px}
.fm-v289 .fm-media-nav:disabled{display:none!important}
.fm-v289 .fm-media-counter{
  position:absolute;
  z-index:4;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  min-width:50px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(6,8,12,.58);
  color:#f7f9ff;
  font-size:10px;
  font-weight:850;
  text-align:center;
  backdrop-filter:blur(9px);
  pointer-events:none;
}
.fm-v289 .fm-media-footer{
  flex:0 0 auto;
  min-height:0;
  padding:8px 10px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0a0d12;
}
.fm-v289 .fm-media-footer[hidden]{display:none!important}
.fm-v289 .fm-media-thumbs{
  display:flex;
  gap:7px;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  padding:1px 1px 2px;
}
.fm-v289 .fm-media-thumb{
  appearance:none;
  flex:0 0 58px;
  width:58px!important;
  height:44px!important;
  padding:0!important;
  border:2px solid transparent!important;
  border-radius:9px!important;
  overflow:hidden;
  background:#171b23!important;
  opacity:.64;
  cursor:pointer;
}
.fm-v289 .fm-media-thumb.is-active{
  opacity:1;
  border-color:#8b8cff!important;
  box-shadow:0 0 0 2px rgba(139,140,255,.20)!important;
}
.fm-v289 .fm-media-thumb img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  display:block!important;
}

/* Avoid a black first frame on post videos while the mobile browser is loading metadata. */
.fm-v289 .fm-social-video video,
.fm-v289 .post-detail-video video,
.fm-v289 .shadow-video-card video[data-shadow-video]{
  background:#07090d!important;
}

@media(max-width:780px){
  .fm-v289 .fm-social-modal-root.fm-media-modal-open{
    padding:max(8px,env(safe-area-inset-top)) 6px max(8px,env(safe-area-inset-bottom))!important;
  }
  .fm-v289 .fm-social-modal.is-media{
    width:calc(100vw - 12px)!important;
    height:min(92dvh,calc(100dvh - 18px))!important;
    max-height:calc(100dvh - 18px)!important;
    border-radius:18px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    transform:scale(.985)!important;
  }
  .fm-v289 .fm-social-modal-root.is-open .fm-social-modal.is-media{transform:none!important}
  .fm-v289 .fm-social-modal.is-media .fm-social-modal-head{min-height:48px;padding:7px 8px 7px 13px}
  .fm-v289 .fm-media-nav{
    width:38px!important;
    height:48px!important;
    border-radius:13px!important;
    font-size:29px!important;
    background:rgba(5,7,11,.56)!important;
  }
  .fm-v289 .fm-media-nav.is-prev{left:7px}
  .fm-v289 .fm-media-nav.is-next{right:7px}
  .fm-v289 .fm-media-counter{top:8px;font-size:9.5px;padding:4px 8px}
  .fm-v289 .fm-media-footer{padding:7px 7px max(8px,env(safe-area-inset-bottom))}
  .fm-v289 .fm-media-thumb{flex-basis:52px;width:52px!important;height:40px!important;border-radius:8px!important}
}

@media(max-width:420px){
  .fm-v289 .fm-social-modal.is-media{width:calc(100vw - 8px)!important;height:94dvh!important;max-height:94dvh!important;border-radius:16px!important}
  .fm-v289 .fm-media-nav{width:34px!important;height:44px!important;font-size:27px!important}
  .fm-v289 .fm-media-nav.is-prev{left:4px}.fm-v289 .fm-media-nav.is-next{right:4px}
  .fm-v289 .fm-media-thumb{flex-basis:48px;width:48px!important;height:37px!important}
}