/* =========================================================
   CITYMA920 FINAL DIRECT HOME
   Keep the established 360x780 Phone Master on phone + PC.
   ========================================================= */
body.direct-ad-site .app-container{
  width:var(--cityma-master-w)!important;
  min-width:var(--cityma-master-w)!important;
  max-width:var(--cityma-master-w)!important;
}
body.direct-ad-site .viewer{
  width:100%!important;
  max-width:100%!important;
}

/* Do not show the old SERVICE / PRODUCT / HOTSPOT three-choice strip
   on the advertiser's own Home. Only the listing's own section appears. */
body.direct-ad-site .market-section-strip,
body.direct-ad-site .cityma-direct-home-taxonomy{
  display:none!important;
}

/* Right-top stack: 1) active SECTION only, 2) Main Category, 3) SubCategory.
   Same geometry on phone and PC. */
body.direct-ad-site .viewer-top-bar{
  position:relative!important;
}
body.direct-ad-site .cityma-aeo-taxonomy-strip{
  position:absolute!important;
  top:calc(31px + 3mm)!important;
  right:4px!important;
  left:auto!important;
  width:44%!important;
  max-width:158px!important;
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:3px!important;
  margin:0!important;
  padding:0!important;
  z-index:80!important;
  pointer-events:none!important;
}
body.direct-ad-site .cityma-aeo-taxonomy-card{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:.25in!important;
  min-height:.25in!important;
  max-height:.25in!important;
  margin:0!important;
  padding:2px 5px!important;
  border:1px solid #000!important;
  border-radius:6px!important;
  background:#000!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  text-align:right!important;
}
body.direct-ad-site .cityma-aeo-taxonomy-card>div:first-child{
  margin:0!important;
  padding:0!important;
  font-size:4.2pt!important;
  line-height:.92!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:#ff9b43!important;
  text-align:right!important;
  white-space:nowrap!important;
}
body.direct-ad-site .cityma-aeo-taxonomy-card>div:last-child{
  margin:1px 0 0!important;
  padding:0!important;
  font-size:11px!important;
  line-height:.96!important;
  font-weight:800!important;
  color:#fff!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* First box contains only the listing's actual section: SERVICE / PRODUCT / HOTSPOT. */
body.direct-ad-site .cityma-aeo-section-card{
  justify-content:center!important;
}
body.direct-ad-site .cityma-aeo-section-card .cityma-aeo-section-only{
  margin:0!important;
  padding:0!important;
  color:#ff6500!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  text-align:right!important;
  white-space:nowrap!important;
}

/* =========================================================
   MEDIA MASTER — all phone + PC media:
   1. ALWAYS fills 100% horizontal width.
   2. Natural media ratio is preserved.
   3. Media is ALWAYS vertically centered in the available media area.
   ========================================================= */
body.direct-ad-site .video-wrap{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.direct-ad-site .video-wrap .cityeer-square-frame{
  position:relative!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
  display:block!important;
}

/* Images and videos: width-first, centered vertically. */
body.direct-ad-site .cityeer-square-frame>img#mediaPlayer,
body.direct-ad-site .cityeer-square-frame>video#mediaPlayer{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000!important;
  border:0!important;
}

/* YouTube/other video iframe: width 100%, natural 16:9, vertically centered. */
body.direct-ad-site .cityeer-square-frame>iframe#mediaPlayer:not(.cityma-map-fallback){
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  border:0!important;
  background:#000!important;
}

/* No uploaded media: Google Map remains square, 100% wide and vertically centered. */
body.direct-ad-site .cityeer-square-frame>iframe#mediaPlayer.cityma-map-fallback{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  border:0!important;
  background:#111!important;
}

/* Neutralize orientation-specific transforms so every media size follows one rule. */
body.direct-ad-site .cityeer-square-frame.media-portrait>#mediaPlayer,
body.direct-ad-site .cityeer-square-frame.media-landscape>#mediaPlayer,
body.direct-ad-site .cityeer-square-frame.media-square>#mediaPlayer{
  left:0!important;
  top:50%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  object-position:center center!important;
}

/* Phone uses exactly the same styling as PC; no alternate phone taxonomy/media geometry. */
@media(max-width:768px){
  body.direct-ad-site .cityma-aeo-taxonomy-strip{
    top:calc(31px + 3mm)!important;
    right:4px!important;
    width:44%!important;
    max-width:158px!important;
    gap:3px!important;
  }
  body.direct-ad-site .cityma-aeo-taxonomy-card{
    height:.25in!important;
    min-height:.25in!important;
    max-height:.25in!important;
    padding:2px 5px!important;
  }
  body.direct-ad-site .cityma-aeo-taxonomy-card>div:first-child{
    font-size:4.2pt!important;
  }
  body.direct-ad-site .cityma-aeo-taxonomy-card>div:last-child{
    font-size:11px!important;
  }
}