/* Base ad slot styles (theme may override). */

/* Ad marking label — Onet-like: small gray text above the creative. */
.doit-ad-unit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.doit-ad-form__box:has(> .doit-ad-unit) {
  flex-direction: column;
  align-items: stretch;
}

.doit-ad-form__box > .doit-ad-unit {
  width: 100%;
  max-width: 100%;
}

/* Outer unit (sticky footer / popup / special layouts): shrink-wrap to creative width. */
.js-doit-ad-candidate > .doit-ad-unit {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  vertical-align: top;
}

.js-doit-ad-candidate:has(> .doit-ad-unit) {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] > .doit-ad-unit {
  display: flex;
  width: 100%;
}

.doit-ad-popup .doit-ad-unit,
.doit-ad-form--sticky .doit-ad-unit {
  display: flex;
  width: 100%;
  max-width: 100%;
}

.doit-ad-slot .doit-ad-label,
.doit-ad-popup .doit-ad-label,
.doit-ad-form--sticky .doit-ad-label {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  background: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #999;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  filter: none;
  opacity: 1;
  writing-mode: horizontal-tb;
  transform: none;
  position: static;
  flex: 0 0 auto;
  align-self: stretch;
  pointer-events: none;
}

.doit-ad-slot {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* page_top width mode: constrain banner to theme content column */
.doit-ad-placement--width-container .doit-ad-width-container {
  width: 100%;
  max-width: var(--doit-ad-content-max-width, var(--doit-ad-ambient-content-max-width, 100%));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.doit-ad-placement {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.doit-ad-slot--section {
  display: block;
  width: 100%;
}

/* Device visibility — breakpoint matches Device_Service::DESKTOP_MIN_WIDTH */
.doit-ad-slot--hidden-until-md {
  display: none;
}

@media (min-width: 768px) {
  .doit-ad-slot--hidden-until-md {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
}

.doit-ad-slot--hidden-from-md {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Full-width header slots: flex shell on placement wrapper only (not inner .doit-ad-slot--page_top). */
.doit-ad-placement--page_top.doit-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
}

@media (min-width: 768px) {
  .doit-ad-slot--hidden-until-md.doit-ad-slot--block.doit-ad-placement--page_top {
    display: flex;
  }
}

@media (max-width: 767px) {
  .doit-ad-slot--hidden-from-md.doit-ad-placement--page_top {
    display: flex;
  }
}

@media (min-width: 768px) {
  .doit-ad-slot--hidden-from-md {
    display: none;
  }
}

.doit-ad-slot--hidden-until-md.doit-ad-slot--block {
  display: none;
}

@media (min-width: 768px) {
  .doit-ad-slot--hidden-until-md.doit-ad-slot--block {
    display: block;
  }
}

.doit-ad-slot--hidden-from-md.doit-ad-slot--block {
  display: block;
}

@media (min-width: 768px) {
  .doit-ad-slot--hidden-from-md.doit-ad-slot--block {
    display: none;
  }
}

.doit-ad-slot img,
.doit-ad-image {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.js-doit-ad-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}

/* Image creatives: shrink-wrap chain (never force full slot width). */
.doit-ad-image-host {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.doit-ad-image-host .doit-ad-slot,
.doit-ad-image-host .js-doit-ad-link {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.doit-ad-form__banner--own:has(> .doit-ad-image-host) {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .js-doit-ad-candidate.doit-ad-slot--hidden-from-md > .doit-ad-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .js-doit-ad-link,
.js-doit-ad-link.doit-ad-popup__link,
.js-doit-ad-link:has(.doit-ad-video) {
  width: 100%;
}

.doit-ad-form__banner .doit-ad-slot {
  margin-top: 0;
  margin-bottom: 0;
}

.doit-ad-form--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.doit-ad-form__sticky-inner {
  position: relative;
  display: inline-block;
  max-width: 100%;
  pointer-events: auto;
}

.doit-ad-form--sticky .js-doit-ad-candidate {
  max-width: 100%;
}

.doit-ad-form--sticky .doit-ad-form__banner {
  position: static;
  top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.doit-ad-form--sticky .doit-ad-form__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 100%;
  pointer-events: auto;
  margin: 0 auto;
}

.doit-ad-form--sticky .doit-ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.doit-ad-form__close {
  width: 32px;
  height: 32px;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 32px;
  background-color: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000000;
}

.doit-ad-form--sticky .doit-ad-form__close {
  position: absolute;
  top: -16px;
  right: 0;
}

.doit-ad-form__box {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  margin: 2rem auto;
}

.doit-ad-form__box--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.doit-ad-form__box--sticky.doit-ad-form__box--reserved {
  justify-content: flex-start;
}

.doit-ad-form__box--sticky.doit-ad-form__box--h90 {
  min-height: 90px;
}

.doit-ad-form__box--sticky.doit-ad-form__box--h200 {
  min-height: 200px;
}

.doit-ad-form__box--sticky.doit-ad-form__box--h250 {
  min-height: 250px;
}

.doit-ad-form__box--sticky.doit-ad-form__box--h600 {
  min-height: 600px;
}

.doit-ad-form__box--h90 {
  min-height: 90px;
  --doit-ad-slot-min-height: 90px;
}

.doit-ad-form__box--h200 {
  min-height: 200px;
  --doit-ad-slot-min-height: 200px;
}

.doit-ad-form__box--h250 {
  min-height: 250px;
  --doit-ad-slot-min-height: 250px;
}

.doit-ad-form__box--h600 {
  min-height: 600px;
  --doit-ad-slot-min-height: 600px;
}

/* HTML/AdSense without ACF min-height: reserve 90px mobile / 250px desktop. */
.doit-ad-form__box--html-default-min {
  min-height: 90px;
  --doit-ad-slot-min-height: 90px;
}

@media (min-width: 768px) {
  .doit-ad-form__box--html-default-min {
    min-height: 250px;
    --doit-ad-slot-min-height: 250px;
  }
}

.js-doit-ad-candidate {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.js-doit-ad-candidate .doit-ad-form__box {
  width: 100%;
  max-width: 100%;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] {
  width: 100%;
  max-width: 100%;
}

.doit-ad-form__box--embed .doit-ad-form__banner--own,
.doit-ad-form__box--embed .doit-ad-slot {
  width: 100%;
  max-width: 100%;
}

ins.adsbygoogle {
  display: block;
  max-width: 100%;
  min-width: 1px;
  margin-left: auto;
  margin-right: auto;
}

ins.adsbygoogle[data-full-width-responsive="true"],
ins.adsbygoogle[data-ad-format="auto"],
ins.adsbygoogle[data-ad-format="autorelaxed"] {
  width: 100%;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-full-width-responsive="true"],
.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-ad-format="auto"],
.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-ad-format="autorelaxed"] {
  width: 100%;
}

.doit-ad-form__box:not(.doit-ad-form__box--sticky) {
  align-items: center;
  justify-content: center;
}

/* Reserved min-height: box reserves column space; banner/slot/ins keep measurable size for AdSense. */
.doit-ad-form__box--reserved {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
}

.doit-ad-form__banner--own {
  background: transparent;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: auto;
}

.doit-ad-form__box--sticky.doit-ad-form__box--reserved:not(.doit-ad-form__box--sized) > .doit-ad-form__banner,
.doit-ad-form__box--sticky > .doit-ad-form__banner {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
  background: transparent;
}

.doit-ad-form__box--reserved:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  min-height: var(--doit-ad-slot-min-height);
  background: transparent;
}

.doit-ad-form__box--h90:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner--own,
.doit-ad-form__box--h200:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner--own,
.doit-ad-form__box--h250:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner--own,
.doit-ad-form__box--h600:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner--own,
.doit-ad-form__box--reserved:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner--own {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__banner--own > .doit-ad-slot,
.doit-ad-form__banner .doit-ad-form__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.doit-ad-form__box--h90 .doit-ad-form__banner--own > .doit-ad-slot,
.doit-ad-form__box--h200 .doit-ad-form__banner--own > .doit-ad-slot,
.doit-ad-form__box--h250 .doit-ad-form__banner--own > .doit-ad-slot,
.doit-ad-form__box--h600 .doit-ad-form__banner--own > .doit-ad-slot,
.doit-ad-form__box--reserved .doit-ad-form__banner--own > .doit-ad-slot {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sticky .doit-ad-form__banner--own > .doit-ad-slot {
  min-height: 0;
}

.doit-ad-form__box--h90 ins.adsbygoogle,
.doit-ad-form__box--h200 ins.adsbygoogle,
.doit-ad-form__box--h250 ins.adsbygoogle,
.doit-ad-form__box--h600 ins.adsbygoogle,
.doit-ad-form__box--reserved ins.adsbygoogle:not([data-ad-format="autorelaxed"]) {
  min-height: var(--doit-ad-slot-min-height);
}

/*
 * AdSense parent chain: width + height from slot admin (--doit-ad-slot-min-height on box).
 * Sticky: box reserves space; banner floats; slot/ins keep measurable size before fill.
 */
.doit-ad-form__box--sized {
  width: 100%;
}

.doit-ad-form__box--sized .doit-ad-form__banner--own {
  width: 100%;
  max-width: 100%;
  min-width: 1px;
}

.doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) .doit-ad-form__banner--own {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sized .doit-ad-form__banner--own > .doit-ad-slot {
  width: 100%;
  max-width: 100%;
  min-width: 1px;
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sized ins.adsbygoogle {
  min-width: 1px;
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sized ins.adsbygoogle[data-full-width-responsive="true"],
.doit-ad-form__box--sized ins.adsbygoogle[data-ad-format="auto"] {
  width: 100%;
}

.doit-ad-form__box--sized ins.adsbygoogle[data-ad-format="autorelaxed"] {
  width: 100%;
  min-height: 0;
}

/* HTML creatives: full width chain; centering via margin auto on ins / block slot. */
.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__banner {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__banner > .doit-ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle {
  display: block;
  max-width: 100%;
  min-width: 1px;
  margin-left: auto;
  margin-right: auto;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-full-width-responsive="true"],
.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-ad-format="auto"] {
  width: 100%;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] ins.adsbygoogle[data-ad-format="autorelaxed"] {
  width: 100%;
  /* Multiplex calculates height from width — do not pin banner min-height on <ins>. */
  min-height: 0;
}

/* Responsive AdSense host: width boundary for auto/display units. */
.doit-ad-responsive-host {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/*
 * Multiplex (autorelaxed) is often 600–1600px tall. overflow:hidden + min-height
 * on <ins> breaks Google's size calculation and leaves data-ad-status="unfilled".
 */
.doit-ad-responsive-host--multiplex {
  overflow: visible;
}

.doit-ad-form__banner--own:has(.doit-ad-responsive-host--multiplex) {
  align-items: stretch;
  justify-content: flex-start;
}

.js-doit-ad-candidate[data-doit-html-creative="1"]:has(ins[data-ad-format="autorelaxed"]) .doit-ad-form__banner,
.js-doit-ad-candidate[data-doit-html-creative="1"]:has(ins[data-ad-format="autorelaxed"]) .doit-ad-form__banner > .doit-ad-slot {
  align-items: stretch;
  justify-content: flex-start;
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box,
.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__banner,
.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__banner .doit-ad-slot,
.js-doit-ad-candidate[data-doit-html-creative="1"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* AdSense sizing chain: propagate slot min-height through banner/slot/ins (incl. sticky + embed). */
.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) .doit-ad-form__banner--own,
.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) > .doit-ad-form__banner {
  min-height: var(--doit-ad-slot-min-height);
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) .doit-ad-form__banner--own > .doit-ad-slot {
  min-height: var(--doit-ad-slot-min-height);
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box--sized ins.adsbygoogle:not([data-ad-format="autorelaxed"]) {
  min-height: var(--doit-ad-slot-min-height);
}

.js-doit-ad-candidate[data-doit-html-creative="1"] .doit-ad-form__box--sized ins.adsbygoogle[data-ad-format="autorelaxed"] {
  min-height: 0;
}

.doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) .doit-ad-form__banner--own {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sized:not(.doit-ad-form__box--sticky) .doit-ad-form__banner--own > .doit-ad-slot {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-form__box--sized ins.adsbygoogle {
  min-height: var(--doit-ad-slot-min-height);
}

.doit-ad-candidate--pending {
  display: none !important;
}

.doit-ad-candidate--no-fill {
  display: none !important;
}

/*
 * Device/layout classes set display:flex|block and can override the UA [hidden]
 * rule (same specificity, stylesheet order). After AdSense no-fill we set hidden —
 * without !important the empty reserved shell can stay visible.
 */
.doit-ad-slot[hidden],
.doit-ad-placement[hidden],
.doit-ad-candidate[hidden] {
  display: none !important;
}

.doit-ad-candidate--adform-loading {
  width: 100%;
  max-width: 100%;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
}

.doit-ad-candidate--adform-loading:has(.doit-ad-form__box--reserved),
.doit-ad-candidate--adform-loading:has(.doit-ad-form__box--html-default-min) {
  /* Keep reserved space visible while waiting for fill (CLS). */
  opacity: 1;
}

.doit-ad-slot--awaiting-fill {
  /* Reserve space while AdForm loads; hide chrome only. */
  pointer-events: none !important;
}

.doit-ad-slot--awaiting-fill:not(.doit-ad-form--sticky) .doit-ad-form__box:not(.doit-ad-form__box--reserved):not(.doit-ad-form__box--html-default-min) {
  min-height: 0 !important;
  margin: 0 !important;
}

.doit-ad-slot--awaiting-fill.doit-ad-form--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  opacity: 0 !important;
}

.doit-ad-slot--awaiting-fill .doit-ad-form__close {
  display: none !important;
}

.doit-ad-slot--awaiting-fill.doit-ad-placement--page_top:not(:has(.doit-ad-form__box--reserved)):not(:has(.doit-ad-form__box--html-default-min)),
.doit-ad-slot--awaiting-fill[class*="doit-ad-placement--"]:not(:has(.doit-ad-form__box--reserved)):not(:has(.doit-ad-form__box--html-default-min)) {
  min-height: 0 !important;
  opacity: 0 !important;
}

.doit-ad-candidate--adform-loading .doit-ad-form__box:not(.doit-ad-form__box--reserved):not(.doit-ad-form__box--html-default-min) {
  min-height: 0 !important;
  margin: 0 !important;
}

.doit-ad-candidate[style*="display: none"] {
  pointer-events: none;
}

/* Modal popup slot */
.doit-ad-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100002;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.doit-ad-popup.doit-ad-popup--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.doit-ad-popup.doit-ad-popup--visible .doit-ad-popup__panel {
  transform: scale(1);
}

.doit-ad-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.doit-ad-popup__panel {
  position: relative;
  max-width: 600px;
  width: 100%;
  max-height: 90dvh;
  border-radius: 8px;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.doit-ad-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.doit-ad-popup__link {
  display: block;
  line-height: 0;
}

.doit-ad-popup__link img,
.doit-ad-popup__link .doit-ad-image {
  display: block;
  height: auto;
}

.doit-ad-popup__link .doit-ad-image:not([data-doit-ad-creative-width]),
.doit-ad-popup__link img:not([data-doit-ad-creative-width]) {
  width: 100%;
}

body.doit-ad-popup-open {
  overflow: hidden;
}

/* ── Video player ─────────────────────────────────────────────────────────── */
.doit-ad-video {
  width: 100%;
  max-width: 100%;
  background: #000;
}

.doit-ad-video__wrap {
  position: relative;
  line-height: 0;
}

.doit-ad-video__wrap video {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.doit-ad-video__wrap iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.doit-ad-video__thumb {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.doit-ad-video__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.25s ease, background-color 0.2s ease;
  z-index: 2;
}

.doit-ad-video__play-btn:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

.doit-ad-video.doit-ad-video--playing .doit-ad-video__play-btn {
  opacity: 0;
  pointer-events: none;
}

.doit-ad-video.doit-ad-video--done .doit-ad-video__play-btn {
  opacity: 1;
  pointer-events: auto;
}

.doit-ad-video__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.85);
  line-height: 1;
}

.doit-ad-video__progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}

.doit-ad-video__progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  transition: width 0.1s linear;
  pointer-events: none;
}

.doit-ad-video__time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* ── Ambient background (fills page background areas behind content) ───────── */
.doit-ad-slot--ambient-bg.doit-ad-slot,
.doit-ad-placement.doit-ad-slot--ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

@media (min-width: 768px) {
  .doit-ad-slot--ambient-bg.doit-ad-slot--hidden-until-md {
    display: block;
  }
}

.doit-ad-slot--ambient-bg .js-doit-ad-candidate {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.doit-ad-ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Uniform scale (like object-fit: cover): same aspect ratio => same visible crop at any size. */
  --doit-ad-ambient-scale: max(
    100vw / var(--doit-ad-ambient-reference-width, 1920px),
    100vh / var(--doit-ad-ambient-reference-height, 1080px)
  );
}

.doit-ad-ambient-bg__visual {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-image: var(--doit-ad-ambient-slice-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: calc(var(--doit-ad-ambient-reference-width, 1920px) * var(--doit-ad-ambient-scale))
    calc(var(--doit-ad-ambient-reference-height, 1080px) * var(--doit-ad-ambient-scale));
}

.doit-ad-ambient-bg__hit {
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - var(--doit-ad-ambient-content-max-width, 100vw)) / 2));
  pointer-events: auto;
  z-index: 1;
}

.doit-ad-ambient-bg__hit--left {
  left: 0;
}

.doit-ad-ambient-bg__hit--right {
  right: 0;
}

a.doit-ad-ambient-bg__hit.js-doit-ad-link {
  width: max(0px, calc((100vw - var(--doit-ad-ambient-content-max-width, 100vw)) / 2));
  max-width: none;
  height: 100%;
  margin: 0;
}

/* ── Brand frame (fixed top/bottom sponsor bars) ──────────────────────────── */
.doit-ad-slot--brand-frame {
  position: fixed;
  inset: 0;
  z-index: 990;
  pointer-events: none;
}

.doit-ad-brand-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doit-ad-brand-frame__bar {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #1e1e1e;
}

.doit-ad-brand-frame__bar--top {
  top: var(--doit-ad-brand-frame-header-offset, 64px);
  height: calc(
    var(--doit-ad-brand-frame-top-height, 52px) * 100vw / var(--doit-ad-brand-frame-reference-width, 400px)
  );
}

.doit-ad-brand-frame__bar--bottom {
  bottom: var(--doit-ad-brand-frame-bottom-offset, 0px);
  height: calc(
    var(--doit-ad-brand-frame-bottom-height, 44px) * 100vw / var(--doit-ad-brand-frame-reference-width, 400px)
  );
  transition: bottom 0.2s ease;
}

.doit-ad-brand-frame__link {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  pointer-events: auto;
  line-height: 0;
}

.doit-ad-brand-frame__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-image: var(--doit-ad-brand-frame-slice-url);
  background-repeat: no-repeat;
  background-size: 100% calc(
    var(--doit-ad-brand-frame-creative-height, 96px) * 100vw / var(--doit-ad-brand-frame-reference-width, 400px)
  );
}

.doit-ad-brand-frame__media--top {
  background-position: top center;
}

.doit-ad-brand-frame__media--bottom {
  background-position: bottom center;
}

body.has-doit-ad-sticky-serving .doit-ad-brand-frame__bar--bottom {
  display: none;
}