/*
 * MBG Ads PRO V4.0.9 — Unified Product Gallery Overlay
 * Safe visual unification: thumbnails remain in their proven template structure,
 * but are visually overlaid inside the main hero image. This avoids DOM regressions
 * across Property, Hotel, Service, Boarding and generic product detail schemas.
 */

/* Shared safety: gallery containers become positioning contexts. */
body.mbg-ads-detail-page .mbg-property-gallery-card,
body.mbg-ads-detail-page .mbg-hotel-gallery-card,
body.mbg-ads-detail-page .mbg-ad-gallery-panel{
  position:relative!important;
}

/* Property + Hotel: remove the old outside-thumbnail visual footprint. */
body.mbg-ads-detail-page .mbg-property-gallery-card,
body.mbg-ads-detail-page .mbg-hotel-gallery-card{
  overflow:hidden!important;
}
body.mbg-ads-detail-page .mbg-property-gallery-card .mbg-ad-main-photo,
body.mbg-ads-detail-page .mbg-hotel-gallery-card .mbg-hotel-main-photo{
  border-radius:13px!important;
  overflow:hidden!important;
}

/* Generic gallery: the old "Galeri Foto Premium" header is no longer needed. */
body.mbg-ads-detail-page .mbg-ad-gallery-panel .mbg-ad-gallery-premium-head{
  display:none!important;
}

/* Overlay strips inside the visual hero area without changing proven PHP markup. */
body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid,
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid,
body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid{
  position:absolute!important;
  z-index:12!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  max-width:calc(100% - 130px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Property/Hotel cards have no outer gallery padding. */
body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid,
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid{
  bottom:12px!important;
}

/* Generic gallery panel has internal padding, so compensate for it. */
body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid{
  bottom:26px!important;
}

/* Uniform thumbnail geometry. */
body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid .mbg-ad-gallery-thumb,
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb,
body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid .mbg-ad-gallery-thumb{
  display:block!important;
  width:92px!important;
  height:58px!important;
  min-width:92px!important;
  min-height:58px!important;
  flex:0 0 92px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:2px solid rgba(255,255,255,.96)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(0,0,0,.25)!important;
  opacity:.96!important;
}
body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid .mbg-ad-gallery-thumb.is-active,
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb.is-active,
body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid .mbg-ad-gallery-thumb.is-active{
  border-color:#ed1c2f!important;
  box-shadow:0 0 0 1px #ed1c2f,0 4px 12px rgba(0,0,0,.28)!important;
  opacity:1!important;
}
body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid .mbg-ad-gallery-thumb img,
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb img,
body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid .mbg-ad-gallery-thumb img{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  object-fit:cover!important;
  display:block!important;
}

/* Keep overlays above gradients, but below navigation controls when needed. */
body.mbg-ads-detail-page .mbg-property-gallery-card .mbg-ad-gallery-nav,
body.mbg-ads-detail-page .mbg-hotel-gallery-card .mbg-ad-gallery-nav,
body.mbg-ads-detail-page .mbg-ad-gallery-panel .mbg-ad-gallery-nav{
  z-index:14!important;
}
body.mbg-ads-detail-page .mbg-property-gallery-card .mbg-property-premium-badge,
body.mbg-ads-detail-page .mbg-property-gallery-card .mbg-property-photo-count,
body.mbg-ads-detail-page .mbg-hotel-gallery-card .mbg-hotel-premium-badge,
body.mbg-ads-detail-page .mbg-hotel-gallery-card .mbg-hotel-photo-count,
body.mbg-ads-detail-page .mbg-ad-gallery-panel .mbg-ad-detail-package,
body.mbg-ads-detail-page .mbg-ad-gallery-panel .mbg-ad-detail-promo,
body.mbg-ads-detail-page .mbg-ad-gallery-panel .mbg-ad-detail-favorite{
  z-index:15!important;
}

/* Avoid old bottom-strip rounding assumptions now that the strip is overlaid. */
body.mbg-ads-detail-page .mbg-property-gallery-card .mbg-ad-main-photo,
body.mbg-ads-detail-page .mbg-hotel-detail-v3100 .mbg-hotel-main-photo,
body.mbg-ads-detail-page .mbg-hotel-detail-v3102 .mbg-hotel-main-photo{
  border-radius:13px!important;
}

/* Tablet/mobile: horizontal thumbnail rail inside hero. */
@media(max-width:700px){
  body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid,
  body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid,
  body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    transform:none!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:auto!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid::-webkit-scrollbar,
  body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid::-webkit-scrollbar,
  body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid::-webkit-scrollbar{
    display:none!important;
  }
  body.mbg-ads-detail-page .mbg-property-gallery-card > .mbg-property-thumb-grid .mbg-ad-gallery-thumb,
  body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb,
  body.mbg-ads-detail-page .mbg-ad-gallery-panel > .mbg-ad-thumb-grid .mbg-ad-gallery-thumb{
    width:64px!important;
    height:42px!important;
    min-width:64px!important;
    min-height:42px!important;
    flex-basis:64px!important;
    border-radius:8px!important;
    scroll-snap-align:start!important;
  }
}

/* V4.1.0 Gallery UX enhancement: autoplay, hover-preview, and hero zoom */
body.mbg-ads-detail-page [data-mbg-detail-gallery]{
  -webkit-tap-highlight-color:transparent;
}
body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-main-image,
body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-auto-main-image{
  transform-origin:center center;
  transition:opacity .16s ease, transform .34s ease!important;
  will-change:transform;
}
body.mbg-ads-detail-page [data-mbg-detail-gallery].mbg-gallery-zooming .mbg-ad-main-image,
body.mbg-ads-detail-page [data-mbg-detail-gallery].mbg-gallery-zooming .mbg-auto-main-image{
  transform:scale(1.14)!important;
}
body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-gallery-thumb,
body.mbg-ads-detail-page [data-mbg-detail-gallery] [data-mbg-gallery-thumb]{
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease!important;
}
body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-gallery-thumb:hover,
body.mbg-ads-detail-page [data-mbg-detail-gallery] [data-mbg-gallery-thumb]:hover{
  transform:translateY(-2px);
}
body.mbg-ads-detail-page [data-mbg-detail-gallery].is-changing .mbg-ad-main-image,
body.mbg-ads-detail-page [data-mbg-detail-gallery].is-changing .mbg-auto-main-image{
  transform:none!important;
}
@media (hover:hover) and (pointer:fine){
  body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-main-image,
  body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-auto-main-image{
    cursor:zoom-in;
  }
}
@media (hover:none), (pointer:coarse){
  body.mbg-ads-detail-page [data-mbg-detail-gallery].mbg-gallery-zooming .mbg-ad-main-image,
  body.mbg-ads-detail-page [data-mbg-detail-gallery].mbg-gallery-zooming .mbg-auto-main-image{
    transform:none!important;
  }
}
@media (prefers-reduced-motion: reduce){
  body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-main-image,
  body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-auto-main-image,
  body.mbg-ads-detail-page [data-mbg-detail-gallery] .mbg-ad-gallery-thumb,
  body.mbg-ads-detail-page [data-mbg-detail-gallery] [data-mbg-gallery-thumb]{
    transition:none!important;
  }
}

/* V4.1.1 — Hotel thumbnail rail polish */
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid{
  left:50%!important;
  right:auto!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:calc(100% - 150px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  scrollbar-width:none!important;
}
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb{
  flex:0 0 96px!important;
  width:96px!important;
  min-width:96px!important;
  height:60px!important;
  min-height:60px!important;
  border:2px solid rgba(255,255,255,.98)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 3px 12px rgba(0,0,0,.28)!important;
  opacity:.95!important;
}
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb:hover{
  transform:translateY(-3px) scale(1.02)!important;
  opacity:1!important;
  box-shadow:0 6px 16px rgba(0,0,0,.32)!important;
}
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb.is-active{
  border-color:#ed1c2f!important;
  box-shadow:0 0 0 1px #ed1c2f,0 6px 16px rgba(0,0,0,.34)!important;
  opacity:1!important;
}
body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
@media(max-width:700px){
  body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.mbg-ads-detail-page .mbg-hotel-gallery-card > .mbg-hotel-thumb-grid .mbg-ad-gallery-thumb{
    flex:0 0 68px!important;
    width:68px!important;
    min-width:68px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:8px!important;
    scroll-snap-align:start!important;
  }
}