/* MiKO Ads classic approved layout restore v25
   Restore the previous square-ad presentation: no black bottom skip bar,
   compact blue CTA, full glass advertiser profile, countdown TL and close TR. */

.miko-ad-dialog:has(.miko-ad-image-stage) .miko-ad-topbar,
.miko-ad-dialog:has(.miko-ad-image-stage) .miko-ad-actions{
  display:none!important;
}

.miko-ad-dialog:has(.miko-ad-image-stage){
  overflow:visible!important;
  background:transparent!important;
}

.miko-ad-image-stage{
  position:relative!important;
  overflow:hidden!important;
}

/* Read more button — previous compact MiKO style */
.miko-ad-image-stage>.miko-ad-square-cta{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:40!important;
  top:auto!important;
  left:50%!important;
  right:auto!important;
  bottom:12.8%!important;
  width:min(31%,230px)!important;
  min-width:190px!important;
  max-width:calc(100% - 24px)!important;
  height:auto!important;
  min-height:40px!important;
  padding:4px 6px!important;
  gap:5px!important;
  transform:translateX(-50%)!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#168df2,#0875df)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(5,90,190,.30),0 0 18px rgba(39,157,255,.30)!important;
  overflow:hidden!important;
}
.miko-ad-image-stage>.miko-ad-square-cta:hover{
  transform:translateX(-50%) translateY(-1px)!important;
  box-shadow:0 11px 27px rgba(5,90,190,.36),0 0 23px rgba(39,157,255,.36)!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__icon{
  display:grid!important;
  place-items:center!important;
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__icon svg{
  width:14px!important;
  height:14px!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__copy{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__copy strong{
  color:#fff!important;
  font-size:11px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__copy small{
  display:none!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__arrow{
  display:grid!important;
  place-items:center!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}
.miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__arrow svg{
  width:14px!important;
  height:14px!important;
}

/* Full advertiser profile — glass white card */
.miko-ad-image-stage>.miko-ad-square-advertiser--image{
  position:absolute!important;
  z-index:41!important;
  left:50%!important;
  right:auto!important;
  bottom:1.1%!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  grid-template-columns:38px minmax(115px,auto) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:7px!important;
  row-gap:1px!important;
  width:min(88%,700px)!important;
  min-width:0!important;
  max-width:calc(100% - 18px)!important;
  height:auto!important;
  min-height:54px!important;
  padding:5px 8px 5px 5px!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.98)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  background-image:none!important;
  color:#183e66!important;
  box-shadow:0 10px 28px rgba(5,44,100,.22),0 0 20px rgba(32,145,255,.20),inset 0 1px 0 #fff!important;
  backdrop-filter:blur(15px) saturate(1.15)!important;
}
.miko-ad-image-stage>.miko-ad-square-advertiser--image:before,
.miko-ad-image-stage>.miko-ad-square-advertiser--image:after{
  background:none!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__avatar{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:center!important;
  position:relative!important;
  display:block!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  flex:0 0 36px!important;
  padding:0!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#ff1a6a,#6741f4,#39d9ff)!important;
  box-shadow:0 0 0 2px rgba(20,113,210,.08),0 4px 14px rgba(26,93,158,.15)!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__avatar i{
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  right:-2px!important;
  bottom:-1px!important;
  width:13px!important;
  height:13px!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:#1599ef!important;
  color:#fff!important;
  font-size:7px!important;
  line-height:1!important;
}

.miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity{
  grid-column:2!important;
  grid-row:1 / 3!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  max-width:175px!important;
  gap:1px!important;
  overflow:visible!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__name{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  min-width:0!important;
  max-width:100%!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__name strong{
  max-width:125px!important;
  overflow:hidden!important;
  color:#173f68!important;
  font-size:9px!important;
  font-weight:950!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-account-check{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 14px!important;
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#e9f6ff!important;
  color:#087ecf!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-account-check svg{
  width:10px!important;
  height:10px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__rank{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:165px!important;
  height:auto!important;
  min-height:0!important;
  margin:1px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6d849b!important;
  font-size:5.8px!important;
  font-weight:750!important;
  line-height:1.25!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity>small{
  display:block!important;
  max-width:170px!important;
  overflow:hidden!important;
  color:#7c8fa4!important;
  font-size:5.4px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

/* all real status markers */
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges{
  grid-column:3!important;
  grid-row:1 / 3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-content:center!important;
  flex-wrap:wrap!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  gap:3px!important;
  overflow:visible!important;
  transform:none!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:20px!important;
  min-height:20px!important;
  padding:0 5px!important;
  margin:0!important;
  border:1px solid #dce8f4!important;
  border-radius:999px!important;
  background:#f7fbff!important;
  color:#446987!important;
  font-size:5.2px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges svg{
  display:block!important;
  width:10px!important;
  height:10px!important;
  margin-right:3px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span b{
  display:inline!important;
  max-width:62px!important;
  overflow:hidden!important;
  font-size:5.2px!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-verified{
  order:1!important;
  display:inline-flex!important;
  background:#e9f7ff!important;
  color:#087fcf!important;
  border-color:#bfe5fb!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-staff{
  order:2!important;
  background:#eaf5ff!important;
  color:#0d6eb8!important;
  border-color:#bfdef4!important;
}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-writer{order:3!important;background:#f7f0ff!important;color:#7441cf!important;border-color:#d7c2f8!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-reader{order:4!important;background:#f1f7ff!important;color:#315e91!important;border-color:#c8d9ef!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-supporter{order:5!important;background:#fff0f6!important;color:#d92f70!important;border-color:#f5bfd5!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-pro{order:6!important;display:inline-flex!important;background:#fff8df!important;color:#b77b00!important;border-color:#f2d26c!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-sponsored{order:7!important;display:inline-flex!important;background:#fff0f6!important;color:#c71963!important;border-color:#f5c2d9!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-system-badge{order:8!important;display:inline-flex!important}
.miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-inactive{
  opacity:.42!important;
  filter:saturate(.45)!important;
}

/* countdown + close stay in the old top-corner layout */
.miko-ad-image-stage>.miko-ad-square-countdown{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:42!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  bottom:auto!important;
}
.miko-ad-image-stage>.miko-ad-square-close{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:43!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
}

@media(max-width:640px){
  .miko-ad-image-stage>.miko-ad-square-cta{
    bottom:13.4%!important;
    width:min(38%,205px)!important;
    min-width:160px!important;
    min-height:35px!important;
    padding:3px 5px!important;
  }
  .miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__icon{width:23px!important;height:23px!important;flex-basis:23px!important}
  .miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__copy strong{font-size:9px!important}
  .miko-ad-image-stage>.miko-ad-square-cta .miko-ad-square-cta__arrow{width:21px!important;height:21px!important;flex-basis:21px!important}

  .miko-ad-image-stage>.miko-ad-square-advertiser--image{
    bottom:.7%!important;
    grid-template-columns:31px minmax(92px,auto) minmax(0,1fr)!important;
    width:92%!important;
    max-width:calc(100% - 12px)!important;
    min-height:46px!important;
    padding:4px 6px 4px 4px!important;
    gap:4px!important;
    border-radius:12px!important;
  }
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__avatar{width:29px!important;height:29px!important;min-width:29px!important;flex-basis:29px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity{max-width:112px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__name strong{max-width:85px!important;font-size:7.5px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__rank{max-width:105px!important;font-size:4.8px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity>small{max-width:108px!important;font-size:4.4px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges{gap:2px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span{height:18px!important;min-height:18px!important;padding:0 4px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span b{font-size:4.5px!important;max-width:42px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges svg{width:8px!important;height:8px!important;margin-right:2px!important}
}

@media(max-width:430px){
  .miko-ad-image-stage>.miko-ad-square-cta{
    bottom:14%!important;
    width:43%!important;
    min-width:145px!important;
  }
  .miko-ad-image-stage>.miko-ad-square-advertiser--image{
    bottom:.45%!important;
    grid-template-columns:27px 78px minmax(0,1fr)!important;
    width:96%!important;
    max-width:calc(100% - 8px)!important;
    min-height:42px!important;
    padding:3px 5px!important;
  }
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__avatar{width:25px!important;height:25px!important;min-width:25px!important;flex-basis:25px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity{max-width:78px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__name strong{max-width:55px!important;font-size:6.5px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__rank{font-size:4px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__identity>small{font-size:3.8px!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span{
    width:17px!important;
    min-width:17px!important;
    height:17px!important;
    min-height:17px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span b{display:none!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges>span svg{margin:0!important}
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-staff,
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-pro,
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-sponsored{
    width:auto!important;
    min-width:17px!important;
    padding:0 4px!important;
    border-radius:999px!important;
  }
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-staff b,
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-pro b,
  .miko-ad-square-advertiser--image .miko-ad-square-advertiser__badges .is-sponsored b{
    display:inline!important;
    font-size:3.8px!important;
    max-width:27px!important;
  }
}

@media(max-width:390px){
  .miko-ad-image-stage>.miko-ad-square-cta{width:46%!important}
  .miko-ad-image-stage>.miko-ad-square-advertiser--image{width:97%!important}
}

@media(max-width:360px){
  .miko-ad-image-stage>.miko-ad-square-cta{width:49%!important}
  .miko-ad-image-stage>.miko-ad-square-advertiser--image{width:98%!important}
}
