/* ── Promo/sponsor strip — sits between the app-switcher cluster and the
   session countdown. ── */



#promo-strip {
  position: absolute;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* strip itself stays non-blocking; only .promo-link opts back in */
}

.promo-slot .promo-link {
  pointer-events: all;
}





.promo-slot {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Sponsor logos are dropped in here as <img class="promo-logo">. No
   object-fit — the image's own box scales to exactly match its visible
   pixels (preserving aspect ratio), rather than floating inside a
   same-size box with transparent letterbox space around it. Max-height
   is a fixed px value per slot context below, since percentage max-height
   can't reliably resolve through a shrink-wrapped parent chain. */
.promo-slot .promo-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

#promo-strip .promo-logo {
  max-height: 42px;
}

@media (max-width: 480px) {
  #promo-strip .promo-logo {
    max-height: 34px;
  }
}




/* ── Desktop: centered in the top-middle open space, same height/line
   as the collapsed app-switcher button ── */
#promo-strip {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 42px;
}





/* ── Mobile: snug fit between the expanded logo cluster and the
   countdown widget's actual live left edge (set by adspace.js) ── */
@media (max-width: 480px) {
  #promo-strip {
    top: 10px;
    left: 74px; /* just past the expanded logo cluster (~66px) + gap */
    /* `right` is set dynamically in JS to track the countdown's real
       position, since its width flexes with live/normal state and
       days-shown/not-shown content changes. */
    transform: none;
    width: auto;
    height: 34px;
  }
}




.promo-slot .promo-logo {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.promo-slot.promo-fade-in .promo-logo {
  opacity: 1;
}


.promo-slot .promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Shrink-wraps EXACTLY to the image's own rendered box (no object-fit,
   no stretched parent box) — so the badge below anchors to the image's
   true visible corner, never to empty letterbox space around it. */
.promo-media {
  position: relative;
  display: inline-block;
  line-height: 0; /* removes the small baseline gap inline-block adds under images */
}


.promo-link-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 5px;
  height: 5px;
  border-radius: 5%;
  background: #00c853;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}