/* BantuSocial v2.35.7 — rental detail / related rail / ZiwaPhi trend placement precision repair */

/* 1) Listing detail trust cards: keep them directly under reviews and use the empty left-column space. */
body.bantusphere .bx-place-layout-v2>main .bx-left-trust-grid,
body.bantusphere .bx-place-layout-v2>main .bx-after-reviews-grid.bx-left-trust-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr)!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  visibility:visible!important;
  opacity:1!important;
}
body.bantusphere .bx-place-layout-v2>main .bx-left-trust-grid>.bx-card{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:14px!important;
  position:relative!important;
  visibility:visible!important;
  opacity:1!important;
}
body.bantusphere .bx-left-trust-grid .bx-connected h2,
body.bantusphere .bx-left-trust-grid .bx-contact-card h3{
  margin:0 0 9px!important;
  font-size:15px!important;
  line-height:1.2!important;
}
body.bantusphere .bx-left-trust-grid .bx-connected-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
body.bantusphere .bx-left-trust-grid .bx-connected-grid>*{
  min-height:52px!important;
  padding:8px 6px!important;
  border-radius:11px!important;
}
body.bantusphere .bx-left-trust-grid .bx-connected-grid i{font-size:13px!important}
body.bantusphere .bx-left-trust-grid .bx-connected-grid span{font-size:8.5px!important;line-height:1.15!important}
body.bantusphere .bx-left-trust-grid .bx-contact-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
body.bantusphere .bx-left-trust-grid .bx-contact-link{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:8px 9px!important;
  margin:0!important;
  border-radius:10px!important;
  overflow-wrap:anywhere!important;
}
body.bantusphere .bx-left-trust-grid .btn{margin-top:auto!important;min-height:36px!important;padding:8px 10px!important}

/* 2) More From This Host: actual horizontal overflow, with clean grab/swipe behaviour. */
body.bantusphere .bx-more-host-full{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  contain:none!important;
  isolation:isolate!important;
  transform:none!important;
}
body.bantusphere .bx-more-host-full .bx-related-rail{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:stretch!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:scroll!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-y!important; /* v2357 JS owns horizontal touch-drag; vertical page scroll stays native */
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  padding:2px 2px 10px!important;
  transform:none!important;
  scrollbar-width:none!important;
}
body.bantusphere .bx-more-host-full .bx-related-rail::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.bantusphere .bx-more-host-full .bx-related-rail.is-dragging{cursor:grabbing!important;scroll-behavior:auto!important}
body.bantusphere .bx-more-host-full .bx-related-card{
  flex:0 0 clamp(220px,24vw,275px)!important;
  width:clamp(220px,24vw,275px)!important;
  min-width:clamp(220px,24vw,275px)!important;
  max-width:275px!important;
  scroll-snap-align:start!important;
  transform:none!important;
}
body.bantusphere .bx-more-host-full .bx-related-card *{pointer-events:none!important}
body.bantusphere .bx-more-host-full .bx-rail-controls button{pointer-events:auto!important;z-index:5!important}

/* 3) Mobile rental: gallery first, then content. No z-index/negative-margin overlap. */
@media(max-width:767.98px){
  body.bantusphere .bx-shell .bx-gallery{
    display:grid!important;
    position:relative!important;
    inset:auto!important;
    z-index:auto!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    margin:0 0 14px!important;
    transform:none!important;
    overflow:hidden!important;
  }
  body.bantusphere .bx-shell .bx-gallery-main{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    transform:none!important;
  }
  body.bantusphere .bx-shell .bx-gallery-side{display:none!important}
  body.bantusphere .bx-shell .bx-gallery + .bx-gallery-modal + .bx-amenity-strip + .bx-place-layout-v2,
  body.bantusphere .bx-shell .bx-gallery + .bx-gallery-modal + .bx-place-layout-v2,
  body.bantusphere .bx-shell .bx-place-layout-v2{
    position:relative!important;
    inset:auto!important;
    z-index:auto!important;
    clear:both!important;
    float:none!important;
    margin-top:0!important;
    transform:none!important;
  }
  body.bantusphere .bx-place-layout-v2>main,
  body.bantusphere .bx-place-layout-v2>main>.bx-place-info-grid,
  body.bantusphere .bx-place-layout-v2 .bx-about-card,
  body.bantusphere .bx-place-layout-v2 .bx-overview-rental,
  body.bantusphere .bx-place-layout-v2 .bx-description{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    float:none!important;
    clear:both!important;
    transform:none!important;
    margin-top:0!important;
  }
  body.bantusphere .bx-place-layout-v2 .bx-about-card{overflow:visible!important}
  body.bantusphere .bx-place-layout-v2 .bx-description{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.bantusphere .bx-place-layout-v2>main .bx-left-trust-grid{grid-template-columns:1fr!important;gap:10px!important}
  body.bantusphere .bx-left-trust-grid .bx-connected-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.bantusphere .bx-more-host-full .bx-related-card{flex-basis:min(78vw,250px)!important;width:min(78vw,250px)!important;min-width:min(78vw,250px)!important}
}
@media(max-width:440px){
  body.bantusphere .bx-left-trust-grid .bx-connected-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* 4) Trending: exactly one badge, in the far top-right of the relevant card/hero/ticket. */
body.bantusphere .zi-event-card,
body.bantusphere .zi-wallet-event,
body.bantusphere .zi-wallet-event-cover,
body.bantusphere .zi-event-detail-hero{position:relative!important}
body.bantusphere .z19-trend-card,
body.bantusphere .z19-trend-detail,
body.bantusphere .bs2357-trend-main,
body.bantusphere .bs2357-trend-ticket,
body.bantusphere .bs2357-trend-detail{
  position:absolute!important;
  left:auto!important;
  right:12px!important;
  top:12px!important;
  bottom:auto!important;
  margin:0!important;
  z-index:40!important;
  transform:none!important;
  pointer-events:none!important;
}
body.bantusphere .zi-wallet-event-cover>.z19-trend,
body.bantusphere .zi-event-card>.z19-trend,
body.bantusphere .zi-event-detail-hero>.z19-trend{margin:0!important}
body.bantusphere .zi-ticket-pass .z19-trend,
body.bantusphere .zi-ticket-carousel-status .z19-trend,
body.bantusphere .zi-ticket-pass-copy .z19-trend{display:none!important}

@media(max-width:575px){
  body.bantusphere .z19-trend-card,
  body.bantusphere .z19-trend-detail,
  body.bantusphere .bs2357-trend-main,
  body.bantusphere .bs2357-trend-ticket,
  body.bantusphere .bs2357-trend-detail{right:8px!important;top:8px!important}
}