/* ── xMelayu / ExoClick ad units ────────────────────────────────────────────
   Single stylesheet for both display units (in-content + sticky pill).
   Nothing ad-related is inlined in the EJS partials any more.

   Structure (both units):
     .xm-ad          the unit, shrink-wrapped to whatever it ends up showing
     .xm-ad-head     label + close button, normal flow, never clipped
     .xm-ad-frame    OUR clip box, sized to the scaled creative by xm-ads.js
     .xm-ad-stage    OUR transform box holding the provider's markup at its
                     natural size; xm-ads.js applies scale() to this

   Sizing policy — viewport aware and hard-capped so a unit is never oversized
   (accidental-click complaints) and never so small it reads as an unlabelled
   strip (policy risk). The provider's own pixel size drives the final box; the
   creative is only ever scaled DOWN, never stretched and never cropped.

     in-content   < 600px  max 360 wide   |  600-1023  max 468  |  >=1024  max 728
     sticky pill  < 600px  max 320 wide   |  600-1023  max 400  |  >=1024  max 400
     height caps        in-content 30vh (max 250px)   sticky 20vh (max 170px)
     sticky area cap    never more than 16% of the viewport
   ────────────────────────────────────────────────────────────────────────── */

/* Shared unit chrome. `width: fit-content` with no min-width is deliberate: a
   unit that has no fill collapses and is hidden by xm-ads.js (.xm-empty) rather
   than leaving an empty black rectangle sitting on the page. */
.xm-ad {
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  width: fit-content; max-width: 100%;
  padding: 6px 8px 7px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  isolation: isolate;
}
/* No fill yet. Collapse it without taking it out of layout: `visibility:hidden`
   + zero box means it is invisible, unclickable and leaves no gap in the page,
   but every descendant still has a real layout box. That matters — xm-ads.js
   measures the creative with offsetWidth/offsetHeight, and `display:none` would
   report 0 for everything, permanently locking a unit that fills in late. */
.xm-ad.xm-empty {
  visibility: hidden; pointer-events: none;
  height: 0; min-height: 0; max-height: 0;
  padding: 0; border-width: 0; margin: 0;
  overflow: hidden;
}

/* Head: label on the left, close on the right. Both always inside the box. */
.xm-ad-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 24px;
}
.xm-ad-label {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  color: #6b6b75; font: 700 9px/1.4 Arial, sans-serif;
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.xm-ad-label::after {
  content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.08);
}

/* Close button: in normal flow (no negative offsets, so it can never be pushed
   off-screen), 28px visual with a 44px touch target. */
.xm-ad-close {
  position: relative;
  flex: 0 0 auto;
  width: 28px; height: 28px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #d5d5de; font: 700 16px/1 Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none; appearance: none;
  transition: background .15s ease, color .15s ease;
}
/* 44x44 hit area without a 44x44 visual. */
.xm-ad-close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
}
.xm-ad-close:hover  { background: #e0245e; border-color: #e0245e; color: #fff; }
.xm-ad-close:active { background: #c01c4e; }
.xm-ad-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Clip box. Sized in px by xm-ads.js to exactly the scaled creative, so the
   stage inside fills it edge to edge and nothing is ever sliced.
   NOTE: the previous `contain: content` here meant paint containment, which
   clipped any creative larger than the box — that is what cropped the ads. */
.xm-ad-frame {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  contain: layout paint;
  background: transparent;
}
.xm-ad-stage {
  position: absolute; top: 0; left: 0;
  margin: 0; padding: 0; border: 0;
  transform-origin: 0 0;
  /* The provider sets hard pixel sizes on its own nodes; never let a page-wide
     max-width rule re-squash them, because the scale is ours to apply. */
  max-width: none !important;
}
.xm-ad-stage > * { max-width: none !important; }

/* ── in-content unit ─────────────────────────────────────────────────────── */
.xm-native-ad { margin: clamp(14px, 2.5vw, 24px) auto; }

/* ── sticky pill ─────────────────────────────────────────────────────────────
   Bottom-right on anything wide enough to have a gutter, so it sits over the
   side column instead of over the centred content or the player's control bar.
   Phones keep bottom-centre, which is where a thumb expects it. */
.xm-sticky-ad {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 9000;                 /* above page chrome (100/101), below PiP (9999) */
  background: rgba(10,10,11,.97);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
@media (max-width: 599px) {
  .xm-sticky-ad {
    right: auto; left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}
/* Hidden while the page's video plays. visibility (not just opacity) so it also
   stops intercepting clicks, and translateY(140%) so the whole box — close
   button included — is genuinely off-screen rather than a live 26px target
   hovering just past the bottom edge. */
.xm-sticky-ad.xm-hide {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(140%);
}
@media (max-width: 599px) { .xm-sticky-ad.xm-hide { transform: translate(-50%, 140%); } }

/* Short viewports (landscape phones): drop the label row entirely so the pill is
   only the creative plus the close button. */
@media (max-height: 430px) {
  .xm-ad-label { display: none; }
  .xm-ad-head { min-height: 0; justify-content: flex-end; }
  .xm-sticky-ad { padding: 4px 6px 5px; }
  .xm-ad-close { width: 24px; height: 24px; font-size: 14px; }
}

@media (max-width: 400px) {
  .xm-ad { padding: 5px 6px 6px; }
  .xm-ad-close { width: 26px; height: 26px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .xm-sticky-ad { transition: none; }
}